/*
 * aega-components.css — AEGA component utility classes
 * ==========================================================================
 * Loaded by the BB child theme alongside aega-palette.css.
 * All classes here are applied via the BB module → Advanced → Class field.
 *
 * Contents:
 *   1. Eyebrows (with inner-color enforcement)
 *   2. Buttons (primary / secondary / tertiary, all variants)
 *
 * SPECIFICITY NOTE:
 * BB Global Styles emits per-node rules like `.fl-node-xxxx .fl-button { ... }`
 * which carry (0,2,0) specificity. To beat those without !important on every
 * line, our button rules use 3-class compound selectors:
 *     .fl-module-button.fl-button-wrap.<variant> .fl-button   →  (0,3,0)
 * BB module wrappers always have BOTH `.fl-module-button` AND `.fl-button-wrap`,
 * so the selector is safe.
 *
 * The inner text span (.fl-button-text) takes its own color rule — BB does
 * NOT inherit color through the span, so we set it explicitly per variant.
 * ==========================================================================
 */


/* ==========================================================================
   -2. PARAGRAPH MARGIN RESET (trailing only)
   BB Theme's base.min.css applies `p { margin-bottom: 1rem }` to every <p>.
   That 16px is correct between stacked paragraphs but creates dead space
   at the bottom of cards / modules. Zero it on the TRAILING paragraph only
   so intra-paragraph spacing is preserved.
   ========================================================================== */

.fl-module p:last-child,
.fl-simple-text-content,
.fl-rich-text > p:last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   -1. WIDTH UTILITIES (UIKit-style fraction widths)
   Apply via BB Row/Column/Module → Advanced → CSS Class.
   Use !important to override BB's inline column-width styles.

   Class pattern: rc-width-{num}-{denom}
   Responsive suffixes (mobile-first — applies AT this breakpoint and UP):
     @s = ≥ 640px
     @m = ≥ 960px
     @l = ≥ 1200px

   Stacking example: "rc-width-1-1 rc-width-1-2@m"  =  full on mobile, 1/2 on tablet+
   ========================================================================== */

/* --- Base (all viewports) --- */
.rc-width-1-1     { width: 100%      !important; }
.rc-width-1-2     { width: 50%       !important; }
.rc-width-1-3     { width: 33.3333%  !important; }
.rc-width-2-3     { width: 66.6667%  !important; }
.rc-width-1-4     { width: 25%       !important; }
.rc-width-3-4     { width: 75%       !important; }
.rc-width-1-5     { width: 20%       !important; }
.rc-width-2-5     { width: 40%       !important; }
.rc-width-3-5     { width: 60%       !important; }
.rc-width-4-5     { width: 80%       !important; }
.rc-width-1-6     { width: 16.6667%  !important; }
.rc-width-5-6     { width: 83.3333%  !important; }
.rc-width-auto    { width: auto      !important; }
.rc-width-expand  { flex: 1 1 0      !important; width: auto !important; min-width: 0 !important; }

/* --- @s : ≥ 640px (small / large mobile +) --- */
@media (min-width: 640px) {
    .rc-width-1-1\@s    { width: 100%      !important; }
    .rc-width-1-2\@s    { width: 50%       !important; }
    .rc-width-1-3\@s    { width: 33.3333%  !important; }
    .rc-width-2-3\@s    { width: 66.6667%  !important; }
    .rc-width-1-4\@s    { width: 25%       !important; }
    .rc-width-3-4\@s    { width: 75%       !important; }
    .rc-width-1-5\@s    { width: 20%       !important; }
    .rc-width-2-5\@s    { width: 40%       !important; }
    .rc-width-3-5\@s    { width: 60%       !important; }
    .rc-width-4-5\@s    { width: 80%       !important; }
    .rc-width-1-6\@s    { width: 16.6667%  !important; }
    .rc-width-5-6\@s    { width: 83.3333%  !important; }
    .rc-width-auto\@s   { width: auto      !important; }
    .rc-width-expand\@s { flex: 1 1 0      !important; width: auto !important; min-width: 0 !important; }
}

/* --- @m : ≥ 960px (medium / tablet +) --- */
@media (min-width: 960px) {
    .rc-width-1-1\@m    { width: 100%      !important; }
    .rc-width-1-2\@m    { width: 50%       !important; }
    .rc-width-1-3\@m    { width: 33.3333%  !important; }
    .rc-width-2-3\@m    { width: 66.6667%  !important; }
    .rc-width-1-4\@m    { width: 25%       !important; }
    .rc-width-3-4\@m    { width: 75%       !important; }
    .rc-width-1-5\@m    { width: 20%       !important; }
    .rc-width-2-5\@m    { width: 40%       !important; }
    .rc-width-3-5\@m    { width: 60%       !important; }
    .rc-width-4-5\@m    { width: 80%       !important; }
    .rc-width-1-6\@m    { width: 16.6667%  !important; }
    .rc-width-5-6\@m    { width: 83.3333%  !important; }
    .rc-width-auto\@m   { width: auto      !important; }
    .rc-width-expand\@m { flex: 1 1 0      !important; width: auto !important; min-width: 0 !important; }
}

/* --- @l : ≥ 1200px (large / desktop +) --- */
@media (min-width: 1200px) {
    .rc-width-1-1\@l    { width: 100%      !important; }
    .rc-width-1-2\@l    { width: 50%       !important; }
    .rc-width-1-3\@l    { width: 33.3333%  !important; }
    .rc-width-2-3\@l    { width: 66.6667%  !important; }
    .rc-width-1-4\@l    { width: 25%       !important; }
    .rc-width-3-4\@l    { width: 75%       !important; }
    .rc-width-1-5\@l    { width: 20%       !important; }
    .rc-width-2-5\@l    { width: 40%       !important; }
    .rc-width-3-5\@l    { width: 60%       !important; }
    .rc-width-4-5\@l    { width: 80%       !important; }
    .rc-width-1-6\@l    { width: 16.6667%  !important; }
    .rc-width-5-6\@l    { width: 83.3333%  !important; }
    .rc-width-auto\@l   { width: auto      !important; }
    .rc-width-expand\@l { flex: 1 1 0      !important; width: auto !important; min-width: 0 !important; }
}


/* ==========================================================================
   0b. COMPARISON TABLE — .cmp-table
   Apply to a <table> inside a BB HTML module. 3-col comparison pattern:
   first cell = row label, second = AEGA option (.win highlights it),
   third = alternative. Mobile (<640px) stacks each row as a labeled card.
   ========================================================================== */

.cmp-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-sans, "DM Sans", sans-serif);
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
    background: #FFFFFF;
    border: 1px solid var(--color-border, #E8E2D6);
    border-radius: 4px;
    overflow: hidden;
}

.cmp-table thead th {
    background: var(--color-primary, #1F3056);
    color: #FFFFFF;
    padding: 14px 18px;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 2px solid var(--color-primary-deep, #14223D);
}

.cmp-table tbody td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-stone, #E8E2D6);
    color: var(--color-text, #14110F);
    vertical-align: top;
}

.cmp-table tbody tr:last-child td {
    border-bottom: 0;
}

.cmp-table tbody tr:nth-child(even) td {
    background: rgba(247, 243, 236, 0.5); /* cream tint */
}

.cmp-table td:first-child {
    font-weight: 600;
    color: var(--color-primary-deep, #14223D);
    width: 28%;
}

.cmp-table td.win {
    color: var(--color-primary-deep, #14223D);
    font-weight: 600;
    background: var(--aega-gold-soft, #FBF6EC) !important;
    position: relative;
    padding-left: 38px;
}

.cmp-table td.win::before {
    content: "✓";
    position: absolute;
    left: 14px;
    top: 14px;
    color: var(--color-accent, #B8924A);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.5;
}

/* Mobile: stack each row as a labeled card */
@media (max-width: 639px) {
    .cmp-table,
    .cmp-table thead,
    .cmp-table tbody,
    .cmp-table tr,
    .cmp-table th,
    .cmp-table td {
        display: block;
        width: 100%;
    }
    .cmp-table thead {
        display: none; /* hide the column headers; we'll prefix each cell instead */
    }
    .cmp-table tbody tr {
        border-bottom: 1px solid var(--color-stone, #E8E2D6);
        padding: 10px 0;
    }
    .cmp-table tbody tr:nth-child(even) td { background: transparent; }
    .cmp-table td {
        border: 0;
        padding: 6px 18px;
    }
    .cmp-table td:first-child {
        background: var(--color-primary-deep, #14223D);
        color: #FFFFFF;
        padding: 10px 18px;
        margin-bottom: 4px;
        width: 100%;
    }
    .cmp-table td:not(:first-child)::before {
        content: attr(data-label);
        display: block;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--color-text-muted, #6B6056);
        margin-bottom: 2px;
        font-weight: 600;
    }
    .cmp-table td.win {
        padding-left: 38px;
    }
    .cmp-table td.win::before {
        content: "✓";  /* keep the checkmark, label appended below */
    }
    .cmp-table td.win::after {
        /* label rendered via data-label still */
    }
}


/* ==========================================================================
   0a. MENU CTA — Join AEGA button in primary nav
   Apply class "menu-cta" to a menu item (Appearance → Menus → CSS Classes
   field, enable via Screen Options). Gold fill, navy text, hover inverts.
   ========================================================================== */

.menu-cta > a,
li.menu-cta > a {
    display: inline-block;
    padding: 12px 28px;
    background: var(--color-accent, #B8924A);
    color: var(--color-primary, #1F3056) !important;
    font-family: var(--font-sans, "DM Sans", sans-serif);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    border-radius: 2px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.menu-cta > a:hover,
.menu-cta > a:focus,
li.menu-cta > a:hover,
li.menu-cta > a:focus {
    background: var(--color-primary, #1F3056);
    color: var(--color-accent, #B8924A) !important;
}


/* ==========================================================================
   0. SECTION CONTEXT — dark backgrounds
   Apply class "section-dark" (or "on-dark") to a BB Row when its background
   is dark (Ink, Navy, Navy Deep, image-with-dark-overlay). Flips inline link
   color to white with gold hover so links stay legible.

   Compound `.fl-row.section-dark` selector beats BB native `.fl-rich-text a`
   without !important.
   ========================================================================== */

/* `:not(.fl-button)` excludes BB Button modules so they keep their own
   variant styling (primary fill, secondary outline, tertiary, gold). */
.fl-row.section-dark a:not(.fl-button),
.fl-row.on-dark a:not(.fl-button),
.fl-col.section-dark a:not(.fl-button),
.fl-col.on-dark a:not(.fl-button),
.section-dark a:not(.fl-button),
.on-dark a:not(.fl-button) {
    color: var(--color-accent, #B8924A);
    text-decoration: underline;
    text-decoration-color: var(--color-accent, #B8924A);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.fl-row.section-dark a:not(.fl-button):hover,
.fl-row.section-dark a:not(.fl-button):focus-visible,
.fl-row.on-dark a:not(.fl-button):hover,
.fl-row.on-dark a:not(.fl-button):focus-visible,
.fl-col.section-dark a:not(.fl-button):hover,
.fl-col.on-dark a:not(.fl-button):hover,
.section-dark a:not(.fl-button):hover,
.section-dark a:not(.fl-button):focus-visible,
.on-dark a:not(.fl-button):hover,
.on-dark a:not(.fl-button):focus-visible {
    color: #FFFFFF;
    text-decoration-color: #FFFFFF;
}

/* Paragraph/rich-text default color in dark sections — keeps body legible
   if the BB module hasn't been color-set explicitly. */
.fl-row.section-dark,
.fl-row.on-dark,
.section-dark,
.on-dark {
    color: var(--color-muted, #B8B0A8);
}


/* ==========================================================================
   1. EYEBROW — typography only, no color.
   Apply class "eyebrow" to any BB Heading module.
   Stack with a color modifier: "eyebrow gold-heading"
   ========================================================================== */

.eyebrow.fl-heading {
    font-family: var(--font-sans, "DM Sans", sans-serif);
    font-size: 12px;
    line-height: 1.1;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
}

.eyebrow.fl-heading.eyebrow-lg { font-size: 13px; letter-spacing: 0.26em; }
.eyebrow.fl-heading.eyebrow-sm { font-size: 10px; letter-spacing: 0.20em; }


/* ==========================================================================
   1c. HEADING SIZE MODIFIERS
   Apply to any BB Heading module via Advanced → CSS Class.
   Stacks with color modifiers, e.g.  "xl-heading navy-deep-heading"
   Inner .fl-heading-text span also targeted so BB module wrappers
   that nest the text don't strip the size.

   Mobile (<640px) gets a sensible scale-down so xxl doesn't break layout.
   ========================================================================== */

/* Selectors hit (a) the class itself, (b) BB Heading inner span,
   (c) any nested h1–h6 — so the class works on BB Heading, Rich Text,
   Simple Text, and any other module type. !important needed because
   most module wrappers ship per-node font-size rules. */
.s-heading,
.s-heading .fl-heading-text,
.s-heading h1, .s-heading h2, .s-heading h3,
.s-heading h4, .s-heading h5, .s-heading h6   { font-size: 1.25rem !important; line-height: 1.3 !important; }

.m-heading,
.m-heading .fl-heading-text,
.m-heading h1, .m-heading h2, .m-heading h3,
.m-heading h4, .m-heading h5, .m-heading h6   { font-size: 1.5rem !important; line-height: 1.25 !important; }

.l-heading,
.l-heading .fl-heading-text,
.l-heading h1, .l-heading h2, .l-heading h3,
.l-heading h4, .l-heading h5, .l-heading h6   { font-size: 2rem !important; line-height: 1.2 !important; }

.xl-heading,
.xl-heading .fl-heading-text,
.xl-heading h1, .xl-heading h2, .xl-heading h3,
.xl-heading h4, .xl-heading h5, .xl-heading h6 { font-size: 3rem !important; line-height: 1.15 !important; }

.xxl-heading,
.xxl-heading .fl-heading-text,
.xxl-heading h1, .xxl-heading h2, .xxl-heading h3,
.xxl-heading h4, .xxl-heading h5, .xxl-heading h6 { font-size: 5rem !important; line-height: 1.05 !important; letter-spacing: -0.01em; }

@media (max-width: 639px) {
    .s-heading,
    .s-heading .fl-heading-text,
    .s-heading h1, .s-heading h2, .s-heading h3,
    .s-heading h4, .s-heading h5, .s-heading h6   { font-size: 1.125rem !important; }

    .m-heading,
    .m-heading .fl-heading-text,
    .m-heading h1, .m-heading h2, .m-heading h3,
    .m-heading h4, .m-heading h5, .m-heading h6   { font-size: 1.25rem !important; }

    .l-heading,
    .l-heading .fl-heading-text,
    .l-heading h1, .l-heading h2, .l-heading h3,
    .l-heading h4, .l-heading h5, .l-heading h6   { font-size: 1.5rem !important; }

    .xl-heading,
    .xl-heading .fl-heading-text,
    .xl-heading h1, .xl-heading h2, .xl-heading h3,
    .xl-heading h4, .xl-heading h5, .xl-heading h6 { font-size: 2rem !important; }

    .xxl-heading,
    .xxl-heading .fl-heading-text,
    .xxl-heading h1, .xxl-heading h2, .xxl-heading h3,
    .xxl-heading h4, .xxl-heading h5, .xxl-heading h6 { font-size: 2.75rem !important; }
}

/* Inner content elements need explicit color so BB's link/heading color
   rules don't bleed through. */
.eyebrow.fl-heading a,
.eyebrow.fl-heading .fl-heading-text {
    color: inherit;
}


/* ==========================================================================
   1b. HEADING COLOR MODIFIERS
   Stack with .eyebrow or use solo on any BB Heading module.
   Selector covers both the wrapper and any nested heading/anchor.
   ========================================================================== */

.fl-heading.navy-heading,
.fl-heading.navy-heading .fl-heading-text,
.fl-heading.navy-heading a            { color: var(--color-primary, #1F3056); }

.fl-heading.navy-deep-heading,
.fl-heading.navy-deep-heading .fl-heading-text,
.fl-heading.navy-deep-heading a       { color: var(--color-primary-deep, #14223D); }

.fl-heading.gold-heading,
.fl-heading.gold-heading .fl-heading-text,
.fl-heading.gold-heading a            { color: var(--color-accent, #B8924A); }

.fl-heading.ink-heading,
.fl-heading.ink-heading .fl-heading-text,
.fl-heading.ink-heading a             { color: var(--color-text, #14110F); }

.fl-heading.white-heading,
.fl-heading.white-heading .fl-heading-text,
.fl-heading.white-heading a           { color: #FFFFFF; }

.fl-heading.cream-heading,
.fl-heading.cream-heading .fl-heading-text,
.fl-heading.cream-heading a           { color: var(--color-cream, #F7F3EC); }

.fl-heading.muted-heading,
.fl-heading.muted-heading .fl-heading-text,
.fl-heading.muted-heading a           { color: var(--color-muted, #B8B0A8); }


/* ==========================================================================
   2. BUTTONS
   Specificity-boosted selectors:
     .fl-module-button.fl-button-wrap[.variant] .fl-button   →  (0,3,0)
   beats BB's per-node `.fl-node-xxxx .fl-button` (0,2,0).
   Every variant sets BOTH .fl-button color AND .fl-button-text color.
   ========================================================================== */

/* ---------- PRIMARY (default) — navy filled, white text ---------- */

.fl-module-button.fl-button-wrap .fl-button {
    font-family: var(--font-sans, "DM Sans", sans-serif);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    padding: 16px 32px;
    border: 0;
    border-radius: 2px;
    color: #FFFFFF;
    background: var(--color-primary, #1F3056);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.fl-module-button.fl-button-wrap .fl-button .fl-button-text {
    color: #FFFFFF;
    font-weight: 600;
    letter-spacing: 1.8px;
}

.fl-module-button.fl-button-wrap .fl-button:hover,
.fl-module-button.fl-button-wrap .fl-button:focus {
    color: #FFFFFF;
    background: var(--color-primary-deep, #14223D);
    border-color: var(--color-primary-deep, #14223D);
}

.fl-module-button.fl-button-wrap .fl-button:hover .fl-button-text,
.fl-module-button.fl-button-wrap .fl-button:focus .fl-button-text {
    color: #FFFFFF;
}

/* Button icon (when "Has Icon" is enabled in BB) — inherit color */
.fl-module-button.fl-button-wrap .fl-button i,
.fl-module-button.fl-button-wrap .fl-button svg { color: inherit; fill: currentColor; }


/* ---------- GOLD (filled accent) — navy text, hover inverts ---------- */

.fl-module-button.fl-button-wrap.gold-btn .fl-button {
    color: var(--color-primary, #1F3056);
    background: var(--color-accent, #B8924A);
    border: 0;
}

.fl-module-button.fl-button-wrap.gold-btn .fl-button .fl-button-text {
    color: var(--color-primary, #1F3056);
}

.fl-module-button.fl-button-wrap.gold-btn .fl-button:hover,
.fl-module-button.fl-button-wrap.gold-btn .fl-button:focus {
    color: var(--color-accent, #B8924A);
    background: var(--color-primary, #1F3056);
    border-color: var(--color-primary, #1F3056);
}

.fl-module-button.fl-button-wrap.gold-btn .fl-button:hover .fl-button-text,
.fl-module-button.fl-button-wrap.gold-btn .fl-button:focus .fl-button-text {
    color: var(--color-accent, #B8924A);
}


/* ---------- SECONDARY (outline) ---------- */

.fl-module-button.fl-button-wrap.secondary-btn .fl-button {
    color: var(--color-primary, #1F3056);
    background: transparent;
    border: 1.5px solid var(--color-primary, #1F3056);
}

.fl-module-button.fl-button-wrap.secondary-btn .fl-button .fl-button-text {
    color: var(--color-primary, #1F3056);
}

.fl-module-button.fl-button-wrap.secondary-btn .fl-button:hover,
.fl-module-button.fl-button-wrap.secondary-btn .fl-button:focus {
    color: #FFFFFF;
    background: var(--color-primary, #1F3056);
    border-color: var(--color-primary, #1F3056);
}

.fl-module-button.fl-button-wrap.secondary-btn .fl-button:hover .fl-button-text,
.fl-module-button.fl-button-wrap.secondary-btn .fl-button:focus .fl-button-text {
    color: #FFFFFF;
}


/* ---------- SECONDARY on dark ---------- */

.fl-module-button.fl-button-wrap.secondary-btn.on-dark .fl-button {
    color: #FFFFFF;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.6);
}

.fl-module-button.fl-button-wrap.secondary-btn.on-dark .fl-button .fl-button-text {
    color: #FFFFFF;
}

.fl-module-button.fl-button-wrap.secondary-btn.on-dark .fl-button:hover,
.fl-module-button.fl-button-wrap.secondary-btn.on-dark .fl-button:focus {
    color: var(--color-primary, #1F3056);
    background: #FFFFFF;
    border-color: #FFFFFF;
}

.fl-module-button.fl-button-wrap.secondary-btn.on-dark .fl-button:hover .fl-button-text,
.fl-module-button.fl-button-wrap.secondary-btn.on-dark .fl-button:focus .fl-button-text {
    color: var(--color-primary, #1F3056);
}


/* ---------- TERTIARY (text-only with underline) ----------
   !important on the border-bottom: BB's per-node CSS sets `border: 1px solid ...`
   shorthand which wipes our border-bottom otherwise. This is the only place
   in this file where !important is justified — true rendering bug, not a
   specificity skirmish. */

.fl-module-button.fl-button-wrap.tertiary-btn .fl-button {
    color: var(--color-primary, #1F3056);
    background: transparent;
    border: 0 !important;
    border-bottom: 1px solid var(--color-primary, #1F3056) !important;
    border-radius: 0;
    padding: 4px 0 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.fl-module-button.fl-button-wrap.tertiary-btn .fl-button .fl-button-text {
    color: var(--color-primary, #1F3056);
    letter-spacing: 1.4px;
    font-weight: 600;
}

.fl-module-button.fl-button-wrap.tertiary-btn .fl-button:hover,
.fl-module-button.fl-button-wrap.tertiary-btn .fl-button:focus {
    color: var(--color-accent, #B8924A);
    background: transparent;
    border-bottom-color: var(--color-accent, #B8924A) !important;
}

.fl-module-button.fl-button-wrap.tertiary-btn .fl-button:hover .fl-button-text,
.fl-module-button.fl-button-wrap.tertiary-btn .fl-button:focus .fl-button-text {
    color: var(--color-accent, #B8924A);
}


/* ---------- TERTIARY make-gold (gold by default) ----------
   Stack with .on-dark to keep gold default but flip hover to white. */

.fl-module-button.fl-button-wrap.tertiary-btn.make-gold .fl-button {
    color: var(--color-accent, #B8924A);
    border-bottom-color: var(--color-accent, #B8924A) !important;
}

.fl-module-button.fl-button-wrap.tertiary-btn.make-gold .fl-button .fl-button-text {
    color: var(--color-accent, #B8924A);
}

.fl-module-button.fl-button-wrap.tertiary-btn.make-gold .fl-button:hover,
.fl-module-button.fl-button-wrap.tertiary-btn.make-gold .fl-button:focus {
    color: var(--color-primary, #1F3056);
    border-bottom-color: var(--color-primary, #1F3056) !important;
}

.fl-module-button.fl-button-wrap.tertiary-btn.make-gold .fl-button:hover .fl-button-text,
.fl-module-button.fl-button-wrap.tertiary-btn.make-gold .fl-button:focus .fl-button-text {
    color: var(--color-primary, #1F3056);
}

/* make-gold + on-dark — gold default, hover to white instead of navy */
.fl-module-button.fl-button-wrap.tertiary-btn.make-gold.on-dark .fl-button:hover,
.fl-module-button.fl-button-wrap.tertiary-btn.make-gold.on-dark .fl-button:focus {
    color: #FFFFFF;
    border-bottom-color: #FFFFFF !important;
}

.fl-module-button.fl-button-wrap.tertiary-btn.make-gold.on-dark .fl-button:hover .fl-button-text,
.fl-module-button.fl-button-wrap.tertiary-btn.make-gold.on-dark .fl-button:focus .fl-button-text {
    color: #FFFFFF;
}


/* ---------- TERTIARY on dark ---------- */

.fl-module-button.fl-button-wrap.tertiary-btn.on-dark .fl-button {
    color: #FFFFFF;
    border-bottom-color: #FFFFFF !important;
}

.fl-module-button.fl-button-wrap.tertiary-btn.on-dark .fl-button .fl-button-text {
    color: #FFFFFF;
}

.fl-module-button.fl-button-wrap.tertiary-btn.on-dark .fl-button:hover,
.fl-module-button.fl-button-wrap.tertiary-btn.on-dark .fl-button:focus {
    color: var(--color-accent, #B8924A);
    border-bottom-color: var(--color-accent, #B8924A) !important;
}

.fl-module-button.fl-button-wrap.tertiary-btn.on-dark .fl-button:hover .fl-button-text,
.fl-module-button.fl-button-wrap.tertiary-btn.on-dark .fl-button:focus .fl-button-text {
    color: var(--color-accent, #B8924A);
}

/* ---------------------------------------------------------------
 * Requirements grid: column-major flow so #1, #2, #3... read top-to-bottom
 * Applied to Ordained (#33) and Licensed (#32) requirement containers.
 * Added 2026-05-27 per Jan's "move #2 under #1" request.
 * --------------------------------------------------------------- */
.fl-builder-content-33 .fl-node-9r5oteiv14mj,
.fl-builder-content-32 .fl-node-ft2vozwpx61s {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  grid-template-rows: repeat(4, auto) !important;
  grid-auto-flow: column !important;
}

@media (max-width: 768px) {
  .fl-builder-content-33 .fl-node-9r5oteiv14mj,
  .fl-builder-content-32 .fl-node-ft2vozwpx61s {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    grid-auto-flow: row !important;
  }
}