/*
 * AWA-DV — CMS additions. Loaded last (after awa-overrides.css).
 * Nothing here changes how the existing pages look; it only covers
 *   1. the visual editor (wrapper carries data-cms-mode="edit"),
 *   2. the contact form status message written by /cms-runtime/forms.js,
 *   3. the two section presets that have no direct theme equivalent (CTA band, text block).
 */

/* ── 1. Editor ─────────────────────────────────────────────────────────────
 * owl.js is skipped in edit mode (site.config.ts), so the hero slider is not initialised: show every slide
 * stacked, fully visible, so each one can be edited in place. */
[data-cms-mode="edit"] .banner-section .banner-carousel.owl-carousel:not(.owl-loaded) .slide-item {
  display: block;
}

/* FAQ answers are collapsed by script.js; keep them open while editing. */
[data-cms-mode="edit"] .accordion-box .block .acc-content {
  display: block;
}

/* ── 2. Contact form status ────────────────────────────────────────────────
 * The theme status box is hidden until it has a state class. Show it whenever the forms runtime has written a
 * message, and map the common state hooks onto the existing success/error colours. */
.awa-contact-form .awa-form-status:not(:empty) {
  display: block;
}

.awa-contact-form .awa-form-status.is-success,
.awa-contact-form .awa-form-status[data-state="success"],
.awa-contact-form .awa-form-status[data-status="success"] {
  background: #edf8f0;
  color: #1f6a39;
  border: 1px solid #b6e1c1;
}

.awa-contact-form .awa-form-status.is-error,
.awa-contact-form .awa-form-status[data-state="error"],
.awa-contact-form .awa-form-status[data-status="error"] {
  background: #fff1f0;
  color: #9b2a23;
  border: 1px solid #f3c2be;
}

.awa-contact-form form[aria-busy="true"] button[type="submit"] {
  opacity: 0.7;
  pointer-events: none;
}

/* ── 3. Presets ────────────────────────────────────────────────────────────*/

/* CTA band: reuses the .page-title photo + overlay, with an h2 and buttons. */
.page-title.awa-cta-band {
  padding: 100px 0px;
}

.page-title.awa-cta-band .content-box h2 {
  color: #ffffff;
  margin-bottom: 15px;
}

.page-title.awa-cta-band .content-box p {
  max-width: 640px;
  margin: 0 auto 30px;
}

.page-title.awa-cta-band .btn-box .theme-btn {
  margin: 0px 7px 10px;
}

/* Text block: readable lists and spacing inside the rich text area. */
.awa-rich-text .text p {
  margin-bottom: 20px;
}

.awa-rich-text .text ul,
.awa-rich-text .text ol {
  margin: 0 0 20px 22px;
  padding: 0;
}

.awa-rich-text .text ul li {
  list-style: disc;
  margin-bottom: 6px;
}

.awa-rich-text .text ol li {
  list-style: decimal;
  margin-bottom: 6px;
}

.awa-rich-text .text a {
  color: var(--awa-purple);
  text-decoration: underline;
}

@media only screen and (max-width: 767px) {
  .page-title.awa-cta-band {
    padding: 70px 0px;
  }
}

/* ── 4. Fixes found during CMS QA (2026-11-08) ────────────────────────────
 * Card detail lines: one name/line per <span>. The theme override only covered the contact page (#contact),
 * so trustee names ran together on the home and about pages. */
.service-block-one .inner-box .awa-card-meta span {
  display: block;
}

/* Grids where the last card sits centred when the count is odd (objectives). Replaces a hard-coded
 * offset-lg-3 class on objective 7, which stayed on that card when objectives were added or reordered. */
@media (min-width: 992px) {
  .awa-center-last > .single-column:last-child:nth-child(odd) {
    margin-left: 25%;
  }
}

/* ── 5. Design layer: site colour tokens (ARCHITECTURE §17, site.config.ts → design) ──────────────────────
 * The CMS writes the site colours as :root { --cms-color-<id>: … } (always, with the configured default).
 * The AWA variables used by awa-overrides.css — and the theme's base heading / text colours — read those tokens,
 * so every rule that uses them (including !important ones and hover states) follows the Site design screen.
 * Each fallback / default is the current value, so nothing changes until a colour is edited. */
:root {
  --awa-purple: var(--cms-color-primary, #6f4ca6);
  --awa-orange: var(--cms-color-accent, #fea57d);
  --awa-purple-deep: var(--cms-color-footer, #2e1f45);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--cms-color-dark, #252638);
}

body,
p {
  color: var(--cms-color-text, #696b7e);
}

/* Shades derived from the tokens. The mixes are chosen so the default token gives exactly the current colour
 * (#4a2d73, #1f1530, #170f27); without color-mix support the plain values in awa-overrides.css stay. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  :root {
    --awa-purple-dark: color-mix(in srgb, var(--cms-color-primary, #6f4ca6) 50%, #250e40);
  }

  .main-footer .widget-section {
    background: color-mix(in srgb, var(--cms-color-footer, #2e1f45) 50%, #100b1b) !important;
  }

  .footer-bottom {
    background: color-mix(in srgb, var(--cms-color-footer, #2e1f45) 40%, #080413) !important;
  }
}

/* Button radius (Site design): the theme's two hover-fill halves keep the button's own outer corners. */
.theme-btn:before {
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
}

.theme-btn:after {
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
}

/* Secondary (outline) button. The theme's .theme-btn.style-two is flattened to purple by awa-overrides.css. */
.theme-btn.awa-btn-outline {
  background: transparent !important;
  border: 1px solid var(--awa-purple);
  color: var(--awa-purple) !important;
}

.theme-btn.awa-btn-outline:before,
.theme-btn.awa-btn-outline:after {
  background: var(--awa-purple) !important;
}

.theme-btn.awa-btn-outline:hover,
.theme-btn.awa-btn-outline:focus-visible {
  border-color: var(--awa-purple) !important;
  color: #ffffff !important;
}

/* On dark / photo sections the outline turns white. Add the class "awa-on-dark" (Section design → CSS class) to
 * any other section with a dark background for the same effect. */
.bg-color-2 .theme-btn.awa-btn-outline,
.page-title .theme-btn.awa-btn-outline,
.awa-quote .theme-btn.awa-btn-outline,
.subscribe-section .theme-btn.awa-btn-outline,
.awa-on-dark .theme-btn.awa-btn-outline {
  border-color: rgba(255, 255, 255, 0.7);
  color: #ffffff !important;
}

.bg-color-2 .theme-btn.awa-btn-outline:before,
.bg-color-2 .theme-btn.awa-btn-outline:after,
.page-title .theme-btn.awa-btn-outline:before,
.page-title .theme-btn.awa-btn-outline:after,
.awa-quote .theme-btn.awa-btn-outline:before,
.awa-quote .theme-btn.awa-btn-outline:after,
.subscribe-section .theme-btn.awa-btn-outline:before,
.subscribe-section .theme-btn.awa-btn-outline:after,
.awa-on-dark .theme-btn.awa-btn-outline:before,
.awa-on-dark .theme-btn.awa-btn-outline:after {
  background: #ffffff !important;
}

.bg-color-2 .theme-btn.awa-btn-outline:hover,
.page-title .theme-btn.awa-btn-outline:hover,
.awa-quote .theme-btn.awa-btn-outline:hover,
.subscribe-section .theme-btn.awa-btn-outline:hover,
.awa-on-dark .theme-btn.awa-btn-outline:hover {
  border-color: #ffffff !important;
  color: var(--awa-ink) !important;
}

/* ── 6. Presets added with the design layer (site/presets) ────────────────────────────────────────────────
 * Only these presets' own classes (awa-icon-cards, awa-team, awa-stats, awa-quote, awa-give, awa-events,
 * awa-newsletter) are styled here; the existing pages do not use them. */

/* Shared: intro paragraph under a centred section title, small footnote. */
.awa-section-intro {
  max-width: 720px;
  margin: -20px auto 45px;
  text-align: center;
}

.awa-section-note {
  margin-top: 10px;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  opacity: 0.85;
}

/* Equal-height card rows. */
.awa-team .row.clearfix,
.awa-stats .row.clearfix,
.awa-give .row.clearfix,
.awa-events .row.clearfix {
  display: flex;
  flex-wrap: wrap;
}

/* Icon cards: the theme panel overlaps the hero on the home page; as a standalone section it sits in flow. */
@media (min-width: 768px) {
  .awa-icon-cards .inner-container {
    margin-top: 40px;
  }
}

/* Trustees and team (theme .team-block-one). */
.awa-team .team-block {
  display: flex;
  margin-bottom: 30px;
}

.awa-team .team-block-one,
.awa-team .team-block-one .inner-box {
  width: 100%;
  height: 100%;
}

.awa-team .team-block-one .inner-box .image-box img {
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.awa-team .team-block-one .inner-box .image-box:empty {
  display: none;
}

.awa-team .team-block-one .inner-box .image-box:empty + .lower-content .author-box {
  margin-top: 0;
  padding-top: 28px;
}

.awa-team .team-block-one .inner-box .lower-content {
  padding-bottom: 26px;
  text-align: center;
}

.awa-team .team-block-one .inner-box .lower-content .author-box .designation {
  margin-top: 2px;
  color: var(--awa-purple);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.awa-team .awa-team-bio {
  padding: 12px 26px 0;
  font-size: 15px;
  line-height: 24px;
}

/* Impact numbers (theme .funfact-block-one). */
.awa-stats .awa-stats-panel {
  position: relative;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(36, 27, 53, 0.08);
  padding: 46px 30px 16px;
}

.awa-stats .funfact-block {
  margin-bottom: 30px;
}

.awa-stats .funfact-block-one .inner-box .count-outer {
  color: var(--cms-color-dark, #252638);
}

.awa-stats .funfact-block-one .inner-box h6 {
  color: var(--awa-purple);
  margin-bottom: 6px;
}

.awa-stats .funfact-block-one .inner-box p {
  font-size: 14px;
  line-height: 22px;
}

@media (min-width: 992px) {
  .awa-stats .funfact-block + .funfact-block .funfact-block-one .inner-box:before {
    position: absolute;
    content: "";
    left: -15px;
    top: 8px;
    width: 1px;
    height: calc(100% - 16px);
    background: #e6e6ea;
  }
}

/* Testimonial quote (theme .testimonial-section / .testimonial-block-one, without the slider). */
.testimonial-section.awa-quote {
  padding: 110px 0 100px;
}

.awa-quote .testimonial-block-one {
  max-width: 840px;
  margin: 0 auto;
}

.awa-quote .testimonial-block-one .inner-box .image-box {
  border-color: var(--awa-purple);
  background: #ffffff;
}

.awa-quote .testimonial-block-one .inner-box .image-box img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.awa-quote .testimonial-block-one .inner-box .image-box:before {
  background: var(--awa-purple);
}

.awa-quote .testimonial-block-one .inner-box .image-box:empty {
  display: none;
}

.awa-quote .testimonial-block-one .inner-box .text p {
  font-size: 20px;
  line-height: 34px;
  color: rgba(255, 255, 255, 0.86);
}

.awa-quote .testimonial-block-one .inner-box .author-box .designation {
  color: var(--awa-orange);
}

@media only screen and (max-width: 767px) {
  .testimonial-section.awa-quote {
    padding: 70px 0;
    background-attachment: scroll;
  }

  .awa-quote .testimonial-block-one .inner-box {
    padding: 0;
  }

  .awa-quote .testimonial-block-one .inner-box .text p {
    font-size: 17px;
    line-height: 29px;
  }
}

/* Ways to give (theme .service-block-one cards). */
.awa-give .service-block {
  display: flex;
}

.awa-give .service-block-one,
.awa-give .service-block-one .inner-box {
  width: 100%;
}

.awa-give .service-block-one .inner-box {
  display: flex;
  flex-direction: column;
  padding-bottom: 34px;
}

.awa-give .awa-give-amount {
  display: block;
  font-family: var(--cms-font-heading, "DM Sans", sans-serif);
  font-size: 40px;
  line-height: 48px;
  font-weight: 700;
  color: var(--awa-purple);
  margin-bottom: 6px;
}

.awa-give .service-block-one .inner-box h4 {
  margin-bottom: 12px;
}

.awa-give .service-block-one .inner-box .awa-card-meta {
  margin-bottom: 26px;
  padding-right: 40px;
}

.awa-give .service-block-one .inner-box .btn-box {
  margin-top: auto;
}

.awa-give .awa-give-note {
  margin-top: 10px;
  position: relative;
}

.awa-give .awa-give-note a {
  color: var(--awa-purple);
  text-decoration: underline;
}

/* Events (theme .schedule-block-one). color.css hard-codes the theme purple here; use the brand token. */
.awa-events .schedule-block {
  display: flex;
  margin-bottom: 30px;
}

.awa-events .schedule-block-one,
.awa-events .schedule-block-one .inner-box {
  width: 100%;
}

.awa-events .schedule-block-one .inner-box {
  display: flex;
  flex-direction: column;
}

.awa-events .schedule-block-one .inner-box .lower-content {
  flex: 1 1 auto;
}

.awa-events .schedule-block-one .inner-box .image-box .image img {
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.awa-events .schedule-block-one .inner-box .image-box .content-box .post-date h3 {
  color: var(--awa-purple);
}

.awa-events .schedule-block-one .inner-box .image-box .content-box .post-date h3 b {
  display: block;
  font-weight: 700;
}

.awa-events .schedule-block-one .inner-box .image-box .content-box .text .category {
  background: var(--awa-purple);
}

.awa-events .schedule-block-one .inner-box .lower-content .post-info li i {
  color: var(--awa-purple);
}

.awa-events .schedule-block-one .inner-box .lower-content .links a:hover {
  color: var(--awa-purple);
}

/* Newsletter sign-up (theme .subscribe-section). */
.subscribe-section.awa-newsletter {
  background: var(--awa-purple);
  padding: 60px 0 56px;
}

.awa-newsletter .text p {
  margin-top: 6px;
  opacity: 0.9;
}

.awa-newsletter .subscribe-form .form-group {
  box-shadow: 0 12px 30px rgba(23, 15, 39, 0.18);
}

.awa-newsletter .subscribe-form .form-group button {
  background: var(--awa-orange);
  color: var(--awa-ink);
}

.awa-newsletter .subscribe-form .form-group button:hover,
.awa-newsletter .subscribe-form .form-group button:focus-visible {
  background: var(--cms-color-dark, #252638);
  color: #ffffff;
}

.awa-newsletter .subscribe-form .form-group input[type="email"]:focus {
  outline: 2px solid var(--awa-orange);
  outline-offset: -2px;
}

.awa-newsletter .awa-form-status {
  margin-top: 12px;
  font-size: 14px;
  line-height: 22px;
  color: #ffffff;
}

.awa-newsletter .awa-form-status:empty {
  display: none;
}

.awa-newsletter .awa-form-status.is-error,
.awa-newsletter .awa-form-status[data-state="error"] {
  color: #ffd7c2;
}

.awa-newsletter form[aria-busy="true"] button[type="submit"] {
  opacity: 0.7;
  pointer-events: none;
}

@media only screen and (max-width: 767px) {
  .subscribe-section.awa-newsletter {
    padding: 46px 0 42px;
  }

  .awa-newsletter .subscribe-form .form-group {
    padding-right: 0;
  }

  .awa-newsletter .subscribe-form .form-group button {
    position: relative;
    width: 100%;
  }
}

/* ── 7. Builder sections (CMS "Layouts": cms/html/builder.ts) ─────────────────────────────────────────────
 * Builder markup uses the theme classes from site.config.ts → design.classes (sec-pad, auto-container,
 * row clearfix, col-lg-{n}, theme-btn, sec-title, service-block-one) plus the engine's cms-* widget classes.
 * Specificity is kept at or below (0,2,1): above the theme's own rules for the same elements (e.g. .sec-title h2),
 * below the CMS design rules (html body .cms-d-x.cms-d-x …, 0,2,2), so per-element styling still wins.
 * Only .cms-builder / .cms-* elements are matched; the existing pages are not affected. */

/* Headings: the heading widget sits in .sec-title. */
:where(.cms-builder) .sec-title {
  margin-bottom: 0;
}

:where(.cms-builder) .sec-title > .cms-heading {
  margin-bottom: 0;
  font-weight: 700;
}

:where(.cms-builder) h1.cms-heading {
  font-size: 50px;
  line-height: 60px;
}

:where(.cms-builder) h2.cms-heading {
  font-size: 40px;
  line-height: 48px;
}

:where(.cms-builder) h3.cms-heading {
  font-size: 30px;
  line-height: 40px;
}

:where(.cms-builder) h4.cms-heading {
  font-size: 22px;
  line-height: 32px;
}

:where(.cms-builder) h5.cms-heading {
  font-size: 18px;
  line-height: 28px;
}

/* h6 = the theme's eyebrow line (.sec-title h6: purple, uppercase). */
:where(.cms-builder) .sec-title > h6.cms-heading {
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.4px;
}

/* The theme's title shape (dot, bar, dot) under h1 / h2 headings; it follows the text alignment. */
:where(.cms-builder) .sec-title:has(> h1.cms-heading, > h2.cms-heading)::after {
  content: "";
  display: inline-block;
  vertical-align: top;
  width: 66px;
  height: 4px;
  margin-top: 20px;
  background: linear-gradient(
    90deg,
    var(--awa-purple) 0 4px,
    transparent 4px 8px,
    var(--awa-purple) 8px 58px,
    transparent 58px 62px,
    var(--awa-purple) 62px 66px
  );
}

@media only screen and (max-width: 767px) {
  :where(.cms-builder) h1.cms-heading {
    font-size: 36px;
    line-height: 44px;
  }

  :where(.cms-builder) h2.cms-heading {
    font-size: 30px;
    line-height: 38px;
  }

  :where(.cms-builder) h3.cms-heading {
    font-size: 24px;
    line-height: 32px;
  }
}

/* Text and lists (the theme resets ul/li list-style to none). */
:where(.cms-builder) .cms-text p,
:where(.cms-builder) .cms-icon-box-text p,
:where(.cms-builder) .cms-card-text p {
  margin-bottom: 16px;
}

:where(.cms-builder) .cms-text ul,
:where(.cms-builder) .cms-text ol {
  margin: 0 0 16px;
  padding-left: 1.4em;
}

:where(.cms-builder) .cms-text ul li {
  list-style: disc;
}

:where(.cms-builder) .cms-text ol li {
  list-style: decimal;
}

:where(.cms-builder) .cms-text li + li {
  margin-top: 6px;
}

:where(.cms-builder) .cms-text a,
:where(.cms-builder) .cms-icon-box-text a,
:where(.cms-builder) .cms-card-text a {
  color: var(--awa-purple);
  text-decoration: underline;
}

:where(.cms-builder) .cms-list.is-disc li {
  list-style: disc;
}

:where(.cms-builder) .cms-list ol li {
  list-style: decimal;
}

:where(.cms-builder) .cms-list.is-check li::before {
  color: var(--awa-purple);
}

/* Buttons: theme-btn / theme-btn awa-btn-outline from design.classes. */
:where(.cms-builder) .cms-buttons {
  gap: 14px;
}

:where(.cms-builder) .cms-btn-block {
  display: block;
}

/* Icon box: icon in the theme's soft rounded tile. */
:where(.cms-builder) .cms-icon {
  padding: 14px;
  border-radius: 8px;
  color: var(--awa-purple);
  background: #f1edf7;
  margin-bottom: 20px;
  transition: all 500ms ease;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
  :where(.cms-builder) .cms-icon {
    background: color-mix(in srgb, var(--awa-purple) 10%, #ffffff);
  }
}

:where(.cms-builder) .is-left > .cms-icon {
  margin-bottom: 0;
}

:where(.cms-builder) .cms-icon svg {
  width: 40px;
  height: 40px;
}

:where(.cms-builder) .cms-icon-box:hover .cms-icon {
  color: #ffffff;
  background: var(--awa-purple);
}

:where(.cms-builder) .cms-icon-box-title {
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  margin-bottom: 10px;
}

/* A column holding just one card: the card fills the column, so cards in a row share one height. */
:where(.cms-builder) .cms-builder-col-inner:has(> .cms-w-card:only-child),
:where(.cms-builder) .cms-builder-col-inner > .cms-w-card:only-child {
  height: 100%;
}

/* Card: the theme's service card (white, 5px corners, soft shadow, purple bar on hover). */
:where(.cms-builder) .cms-card {
  position: relative;
  background: #ffffff;
  border-radius: 5px;
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.07);
}

:where(.cms-builder) .cms-card::before,
:where(.cms-builder) .cms-card::after {
  position: absolute;
  content: "";
  left: 0;
  width: 4px;
  background: var(--awa-purple);
  transform: scale(0, 0);
  transition: all 500ms ease;
  z-index: 1;
}

:where(.cms-builder) .cms-card::before {
  top: 31px;
  height: 4px;
}

:where(.cms-builder) .cms-card::after {
  top: 39px;
  height: 38px;
}

:where(.cms-builder) .cms-card:has(.cms-card-media)::before {
  top: auto;
  bottom: 70px;
}

:where(.cms-builder) .cms-card:has(.cms-card-media)::after {
  top: auto;
  bottom: 24px;
}

:where(.cms-builder) .cms-card:hover::before,
:where(.cms-builder) .cms-card:hover::after {
  transform: scale(1, 1);
}

:where(.cms-builder) .cms-card-media {
  overflow: hidden;
}

:where(.cms-builder) .cms-card-media img {
  transition: transform 500ms ease;
}

:where(.cms-builder) .cms-card:hover .cms-card-media img {
  transform: scale(1.04);
}

:where(.cms-builder) .cms-card-body {
  padding: 24px 30px 30px;
}

:where(.cms-builder) .cms-card-title {
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  margin-bottom: 12px;
}

:where(.cms-builder) .cms-card-link {
  margin-top: 18px;
  padding: 5px 23px;
  border: 2px solid #e6e6ea;
  border-radius: 4px;
  font-family: var(--cms-font-heading, "DM Sans", sans-serif);
  font-size: 14px;
  line-height: 26px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--cms-color-text, #696b7e);
}

:where(.cms-builder) .cms-card-link:hover,
:where(.cms-builder) .cms-card-link:focus-visible {
  background: var(--awa-purple);
  border-color: var(--awa-purple);
  color: #ffffff;
}

/* Stat: the theme's fun-fact figure. */
:where(.cms-builder) .cms-stat-number {
  font-family: var(--cms-font-heading, "DM Sans", sans-serif);
  font-size: 48px;
  line-height: 60px;
  font-weight: 700;
  color: var(--cms-color-dark, #252638);
}

:where(.cms-builder) .cms-stat-label {
  margin-top: 4px;
  font-family: var(--cms-font-heading, "DM Sans", sans-serif);
  font-size: 14px;
  line-height: 24px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--awa-purple);
}

/* Quote: the theme's quote mark (Flaticon) in a purple disc and a purple edge. No background of its own, so it
 * reads on light and dark sections and follows the section / widget text colour. */
:where(.cms-builder) .cms-quote {
  position: relative;
  padding: 0 0 4px 34px;
  border-left: 4px solid var(--awa-purple);
}

:where(.cms-builder) .cms-quote::before {
  position: absolute;
  content: "\f10e";
  font-family: "Flaticon";
  top: 0;
  left: 34px;
  width: 44px;
  height: 44px;
  line-height: 44px;
  font-size: 18px;
  text-align: center;
  color: #ffffff;
  background: var(--awa-purple);
  border-radius: 50%;
}

:where(.cms-builder) .cms-quote-text {
  margin-top: 62px;
  font-size: 19px;
  line-height: 32px;
}

:where(.cms-builder) .cms-quote-text p {
  font-size: inherit;
  line-height: inherit;
  margin-bottom: 12px;
}

:where(.cms-builder) .cms-quote-footer {
  margin-top: 20px;
}

:where(.cms-builder) .cms-quote-author {
  font-family: var(--cms-font-heading, "DM Sans", sans-serif);
  font-size: 18px;
  line-height: 26px;
}

:where(.cms-builder) .cms-quote-role {
  font-size: 14px;
  line-height: 22px;
  color: var(--awa-purple);
  opacity: 1;
}

:where(.cms-builder) .cms-align-center .cms-quote,
:where(.cms-builder) .cms-align-right .cms-quote {
  padding-left: 0;
  border-left: 0;
}

:where(.cms-builder) .cms-align-center .cms-quote::before {
  left: 50%;
  margin-left: -22px;
}

:where(.cms-builder) .cms-align-right .cms-quote::before {
  left: auto;
  right: 0;
}

/* Divider. */
:where(.cms-builder) .cms-divider {
  border-top-color: #e6e6ea;
  opacity: 1;
}

/* Images and embeds: rounded with the theme's soft shadow. */
:where(.cms-builder) .cms-image img {
  border-radius: 5px;
}

:where(.cms-builder) .cms-image.is-full img {
  box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.08);
}

:where(.cms-builder) .cms-caption {
  margin-top: 12px;
  font-size: 14px;
  line-height: 22px;
  font-style: italic;
}

:where(.cms-builder) .cms-embed,
:where(.cms-builder) .cms-map {
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.08);
}

/* Columns stack on tablet / mobile (col-md-12): keep the theme's vertical rhythm. */
@media only screen and (max-width: 991px) {
  :where(.cms-builder) .cms-builder-row {
    row-gap: 40px;
  }
}