/**
 * FBCOFHAWAII.CSS
 * Main theme styles for the Family Business Center of Hawaii.
 */

/*------------------------------------------------------------------------------------------------*\
    #FONTS
\*------------------------------------------------------------------------------------------------*/

/**
 * The @font-face rules for Barlow Semi Condensed (400/600/700/800) and Lora (variable, roman +
 * italic) are NOT declared here. theme.json declares all six in
 * settings.typography.fontFamilies[].fontFace, and WordPress emits them into every page and into
 * the block editor automatically — so the editor and the front end can't drift apart, and the
 * font files are named in exactly one place.
 *
 * To add a weight or swap a typeface, edit settings.typography.fontFamilies in theme.json; do not
 * add @font-face here or in css/editor.css.
 */

/*------------------------------------------------------------------------------------------------*\
    #DESIGN-TOKENS
\*------------------------------------------------------------------------------------------------*/

/**
 * Every colour and typeface in this stylesheet goes through one of the variables below. Change a
 * value here (or in theme.json) and it changes everywhere — no find-and-replace across the whole
 * stylesheet.
 *
 * BRAND COLOURS come from theme.json's palette, which WordPress publishes as --wp--preset--color--*
 * custom properties on :root of every page. Aliasing them rather than restating the hex means the
 * stylesheet, the block editor's colour picker, and the palette itself can never disagree. Each
 * alias keeps the literal as a var() fallback so the theme still renders correctly if WordPress's
 * global styles are ever dequeued.
 *
 * To change a brand colour, edit settings.color.palette in theme.json — not the fallbacks here.
 *
 * UI COLOURS are the greys, borders, states and hover shades that are not part of the brand palette
 * and have no business cluttering the editor's colour picker. They live here only.
 */
:root {
    /**
     * Typefaces (theme.json: settings.typography.fontFamilies)
     */
    --fbc-font-display: var(--wp--preset--font-family--barlow, 'Barlow Semi Condensed', sans-serif);
    --fbc-font-body: var(--wp--preset--font-family--lora, 'Lora', serif);

    /**
     * Brand colours (theme.json: settings.color.palette)
     */
    --fbc-white: var(--wp--preset--color--white, #ffffff);
    --fbc-black: var(--wp--preset--color--black, #000000);

    --fbc-blue: var(--wp--preset--color--blue, #569bbd); /* Shidler Blue */
    --fbc-blue-dark: var(--wp--preset--color--blue-dark, #144e6b);
    --fbc-blue-tint: var(--wp--preset--color--blue-tint, #d2e9f5);
    --fbc-bg-blue: var(--wp--preset--color--bg-blue, #eef5f8);

    --fbc-green: var(--wp--preset--color--green, #9bbd56); /* Shidler Green */
    --fbc-green-lighter: var(--wp--preset--color--green-lighter, #bfd593);
    --fbc-bg-green: var(--wp--preset--color--bg-green, #f4f8ee);

    --fbc-gray-900: var(--wp--preset--color--gray-900, #222222);
    --fbc-gray-700: var(--wp--preset--color--gray-700, #555555);
    --fbc-gray-600: var(--wp--preset--color--gray-600, #666666);
    --fbc-gray-500: var(--wp--preset--color--gray-500, #808080);
    --fbc-gray-400: var(--wp--preset--color--gray-400, #999999);
    --fbc-gray-300: var(--wp--preset--color--gray-300, #cccccc);
    --fbc-gray-100: var(--wp--preset--color--gray-100, #eeeeee);

    --fbc-text: var(--wp--preset--color--body, #595959); /* body copy */

    /**
     * UI colours (not in the palette, not offered to editors)
     *
     * Secondary text. Both were lighter greys (#888 3.54:1, #777 4.48:1) and failed WCAG 1.4.3
     * (4.5:1), as did the palette greys some rules used for text. They now share gray-600, the
     * lightest grey that passes on every ground they sit on: white 5.74:1, green tint 5.33:1, blue
     * tint 5.21:1, gray-100 panel 4.95:1. Do not use gray-400/500 for text.
     */
    --fbc-text-meta: var(--fbc-gray-600); /* small meta labels: company, month/year, counts */
    --fbc-text-muted: var(--fbc-gray-600); /* empty states and secondary list meta */
    --fbc-border: #e5e5e5; /* card, table and rule borders */

    --fbc-green-deep: #4a6b2a; /* green text needing more contrast */

    /**
     * Button fills (WCAG 1.4.3 text + 1.4.11 non-text contrast)
     *
     * The brand colours are too light to carry a white label. Shidler Green is only 2.14:1 against
     * white, so a green button on the page failed twice over: the label was unreadable, and the
     * fill itself was too close to the page to register as a control boundary at all. Shidler Blue
     * was 3.08:1 — the boundary passed, the label did not.
     *
     * Buttons on LIGHT backgrounds therefore use darkened palette entries with a white label.
     * Ratios below are against white.
     */
    --fbc-blue-fill: var(--wp--preset--color--blue-mid, #1c6c93); /* 5.81:1 */
    --fbc-blue-fill-hover: var(--wp--preset--color--blue-dark, #144e6b); /* 9.01:1 */
    --fbc-green-fill: var(--wp--preset--color--green-darkest, #436400); /* 6.86:1 */
    --fbc-green-fill-hover: #2f4700; /* 10.38:1 */

    /**
     * Buttons on DARK backgrounds (navy footer and CTA band, header photo) cannot use those:
     * #436400 on the navy is 1.31:1, near enough to invisible. They keep brand green and darken the
     * label instead — 8.13:1 for the text, and 4.21:1 for the fill against the navy. Hover lightens
     * rather than darkens, since there is no room to go down.
     */
    --fbc-green-on-dark: var(--wp--preset--color--green, #9bbd56);
    --fbc-green-on-dark-hover: var(--wp--preset--color--green-lighter, #bfd593);
    --fbc-ink: #1a1a1a; /* label on a brand-green fill */

    --fbc-photo-bg: #e0eaf1; /* tint behind headshots while they load */
    --fbc-placeholder-ink: #92b4c4; /* icon + label inside empty photo frames */

    --fbc-error: #c0392b; /* form validation text and borders, 5.44:1 */

    /**
     * Form controls (WCAG 1.4.11 non-text contrast)
     *
     * Ratios against white. Used by #FORMIDABLE-FORMS and by the homepage login form.
     */
    --fbc-field-border: var(--fbc-gray-500); /* text field outline, 3.95:1 (was gray-300, 1.61:1) */
    --fbc-control-border: var(--fbc-gray-500); /* radio + checkbox ring, 3.95:1 */
    --fbc-focus: var(--fbc-blue-fill); /* focus ring on light grounds, 5.81:1 */

    /**
     * Links and blue text on light grounds. Brand blue #569BBD is 3.08:1 on white and fails as
     * text; this is the button blue. 5.81:1 on white and at least 5:1 on every tinted panel it sits
     * on.
     */
    --fbc-link: var(--fbc-blue-fill);
    --fbc-link-hover: var(--fbc-blue-fill-hover); /* 9.01:1 */
}

/*------------------------------------------------------------------------------------------------*\
    #BREAKPOINTS
\*------------------------------------------------------------------------------------------------*/

/**
 * Four widths, and only four. Use these literal values in every new @media block so sections stop
 * stacking at slightly different moments.
 *
 *   lg   1023px   desktop nav -> hamburger; hero height steps down
 *   md    767px   multi-column -> two columns
 *   sm    600px   two columns -> one; topbar simplifies
 *   xs    420px   small-phone polish: type scale and padding tighten
 *
 * These CANNOT be custom properties. `@media (max-width: var(--bp-md))` is invalid CSS and fails
 * silently — var() is not allowed in a media query prelude. The values are written out literally on
 * purpose.
 *
 * Why these four, in case you are tempted to add a fifth. Each is measured, not conventional:
 *   - 1023 is the last width where the desktop header row still fits. It needs ~935px of content,
 *     and .container caps at 1024 (matching theme.json's contentSize). iPad landscape keeps the
 *     desktop nav.
 *   - 767 is where the footer's four columns stop being readable — at 768 they measure
 *     149/149/149/200px and "Member Login" already wraps.
 *   - 600 is where two columns of nav links get narrower than their own longest link text.
 *   - 420 is the small-phone tail; the iPhone SE viewport is 375px.
 *
 * Written desktop-first (max-width) to match the rest of the file.
 *
 * MIGRATION IN PROGRESS. The header and footer use this scale. Body sections still carry eight
 * older ad-hoc values (480/640/680/700/760/768/780/900); each is marked with the value it should
 * become in a later pass. Remapping them changes where working pages stack, so it wants its own
 * careful look rather than being folded in here.
 */

/*------------------------------------------------------------------------------------------------*\
    #BASE
\*------------------------------------------------------------------------------------------------*/

body {
    font-family: var(--fbc-font-body);
    font-size: 1rem; /* 16px */
    line-height: 1.875; /* 30px */
    color: var(--fbc-text);
}

a {
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--fbc-font-display);
}

/**
 * Put back the bold and italics that reset.css removes. Its Meyer-style `font: inherit` rule
 * leaves strong, b, em, i and cite looking like plain text, so bold and italic words typed in the
 * editor (199 events alone) didn't show. These are the browser's own defaults. Lora is loaded at
 * 400–700 in both styles, so this is real bold and italic, not synthesized. Font Awesome's
 * <i class="fa-…"> icons keep font-style: normal from their own, more specific class rules.
 */
strong,
b {
    font-weight: bolder;
}

em,
i,
cite,
dfn {
    font-style: italic;
}

/**
 * Visible to screen readers, not on screen. Used for the labels on the menu toggle, the close
 * button and the submenu chevrons, all of which show an icon only.
 */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
    clip-path: inset(50%);
}

/**
 * Skip link (header.php). Hidden like .screen-reader-text until it has keyboard focus, then shown
 * at the top left, above the site notice, the header and the admin bar. The inset white outline
 * sits on the link's own blue, so it shows whatever is behind the link.
 */
.skip-link:focus {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 100000;
    width: auto;
    height: auto;
    padding: 0.75rem 1.25rem;
    margin: 0;
    overflow: visible;
    font-family: var(--fbc-font-display);
    font-weight: 600;
    color: var(--fbc-white);
    white-space: normal;
    outline: 2px solid var(--fbc-white);
    outline-offset: -5px;
    background-color: var(--fbc-blue-fill); /* white text 5.81:1 */
    clip-path: none;
}

/*------------------------------------------------------------------------------------------------*\
    #CONTAINER
    Centered max-width wrapper. Apply to inner divs, not the full-bleed section/header/footer
    elements themselves.
\*------------------------------------------------------------------------------------------------*/

.container {
    width: 100%;
    max-width: 1024px;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    margin-right: auto;
    margin-left: auto;
}

/*------------------------------------------------------------------------------------------------*\
    #SITE-NOTICE
    Announcement strip across the very top of every page, above the header. Visibility and content
    come from Appearance -> Global Settings -> Site Notice; the markup is
    template-parts/site-notice.php.
\*------------------------------------------------------------------------------------------------*/

/**
 * Near-black text on Shidler green, not the white used on the green buttons: white on #9BBD56
 * measures 2.1:1, which fails WCAG AA. Near-black is 7.4:1.
 */
#site-notice {
    text-align: center;
    background-color: var(--fbc-green);
}

.site-notice-text {
    display: block;
    padding-top: 0.6875rem;
    padding-bottom: 0.6875rem;
    margin: 0;
    font-family: var(--fbc-font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--fbc-gray-900);
    letter-spacing: 0.01em;
}

a.site-notice-text {
    text-decoration: none;
}

a.site-notice-text:hover,
a.site-notice-text:focus {
    text-decoration: underline;
}

@media (max-width: 640px) {
    .site-notice-text {
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
        font-size: 0.875rem;
    }
}

/*------------------------------------------------------------------------------------------------*\
    #BUTTONS
    Shared base
\*------------------------------------------------------------------------------------------------*/

/**
 * Every button in the theme repeated these three declarations. Sizing, colour and hover behaviour
 * stay with the individual button classes, which is where they legitimately differ.
 *
 * House rules for hover:
 *   - a FILLED button darkens   (background goes to its *-hover token)
 *   - an OUTLINED button fills  (background goes to its colour, text white)
 *   - nothing moves: no translateY, no shadow
 */
.header-cta a.btn,
.nav-panel-cta,
.btn-video,
.btn-register,
.btn-past-events,
.btn-event-more,
.btn-cta-band,
.btn-newsletter-primary,
.btn-newsletter-secondary {
    font-family: var(--fbc-font-display);
    font-weight: 600;
    line-height: 1;
}

/*------------------------------------------------------------------------------------------------*\
    #HEADER
\*------------------------------------------------------------------------------------------------*/

/**
 * min-height, not height. Paired with `overflow: hidden` below, a fixed height meant any page title
 * too tall for the box was silently cut off rather than pushing the header taller — which is a live
 * risk on a narrow screen, where a long event title wraps to three or four lines. The box still
 * sits at exactly 540px whenever the content is shorter, so desktop is unchanged.
 */
#site-header {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 540px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#header-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-color: #121212;
}

#header-topbar,
#header-page-title {
    position: relative;
    z-index: 1;
}

#header-main {
    position: relative;
    z-index: 2;
}

/**
 * Topbar
 */
#header-topbar a {
    color: var(--fbc-white);
}

.header-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    padding-bottom: 12px;
    line-height: 1;
}

.topbar-contact {
    display: flex;
    gap: 1.5rem;
}

.topbar-contact-item {
    font-size: 0.8125rem;
    color: var(--fbc-white);
}

.topbar-contact-item i {
    margin-right: 0.25rem;
    color: var(--fbc-green);
}

.topbar-social {
    display: flex;
    gap: 1.5rem;
}

.topbar-social a {
    transition: color 0.15s ease;
}

#header-topbar .topbar-social a:hover {
    color: var(--fbc-green);
}

/**
 * Main header row
 */
.header-main-inner {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 2rem;
    align-items: center;
    justify-content: space-between;
    padding-top: 1.125rem;
    padding-bottom: 1.0625rem;
    background-color: rgba(255, 255, 255, 0.06);
}

.header-main-inner::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    content: '';
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

/**
 * Logo
 *
 * flex-shrink: 0 is load-bearing. .header-main-inner is a flex row, the nav ul is rigid at 520px
 * and the CTA is white-space: nowrap — so the logo was the only item that could give, and it gave
 * all of it. Combined with reset.css's `img { max-width: 100% }` the image scaled down with its
 * shrinking parent instead of overflowing it: 146px wide at 960px viewport, 31px at 820px, and 0px
 * — completely invisible — at 790px and below. The brand mark was missing on every tablet and
 * phone, silently, because #site-header hides the overflow that would otherwise have shown
 * something was wrong.
 */
.header-logo {
    flex: 0 0 auto;
}

.header-logo a {
    display: block;
    padding-bottom: 1px;
}

.header-logo img {
    width: auto;
    height: 60px;
}

.header-site-name {
    font-family: var(--fbc-font-display);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--fbc-white);
}

/**
 * Navigation
 */
#site-navigation {
    position: static;
    display: flex;
    flex: 1;
    justify-content: center;
}

#site-navigation ul {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    padding: 0;
    margin: 0;
    list-style: none;
}

#site-navigation ul li a {
    display: block;
    padding: 0.625rem 0.875rem;
    font-family: var(--fbc-font-display);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fbc-white);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: all 0.15s ease;
}

#site-navigation ul li a:hover {
    color: var(--fbc-green-on-dark-hover);
}

/**
 * Dropdown
 */
#site-navigation ul li {
    position: static;
    display: flex;
    align-items: stretch;
}

#site-navigation ul li > a {
    display: flex;
    align-items: center;
}

#site-navigation ul li.menu-item-has-children > a::after {
    margin-left: 0.375rem;
    font-family: 'Font Awesome 6 Free';
    font-size: 0.625rem;
    font-weight: 900;
    content: '\f078';
}

#site-navigation ul li ul {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    display: none;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
    min-width: 220px;
    padding: 0;
    background-color: rgba(20, 78, 107, 0.92);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

#site-navigation ul li.menu-item-has-children {
    position: relative;
}

#site-navigation ul li.menu-item-has-children::after {
    position: absolute;
    right: 0;
    bottom: -12px;
    left: 0;
    height: 12px;
    content: '';
}

/**
 * :focus-within opens a dropdown for keyboard users too: tabbing onto a parent item, or onto any
 * link inside its dropdown, keeps it open. With :hover alone, Tab skipped every submenu link.
 */
#site-navigation ul li:hover > ul,
#site-navigation ul li:focus-within > ul {
    display: flex;
}

#site-navigation ul li ul li {
    width: 100%;
}

#site-navigation ul li ul li a {
    display: block;
    width: 100%;
    padding: 0.75rem 0.875rem;
    font-size: 0.8125rem;
    text-align: left;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

#site-navigation ul li ul li a:hover {
    color: var(--fbc-green-on-dark-hover);
    background-color: rgba(255, 255, 255, 0.08);
}

/**
 * Page Title
 */
#header-page-title {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
}

/**
 * The skip link's target. tabindex="-1" lets it take focus, so screen readers start reading from
 * the page title; it isn't a control, so it gets no focus ring.
 */
#header-page-title:focus {
    outline: none;
}

#header-page-title h1 {
    margin-bottom: 3.5rem;
    font-family: var(--fbc-font-display);
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 42px;
    color: var(--fbc-white);
    text-align: center;
    text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.4);
}

/**
 * CTA Button
 */
.header-cta a.btn {
    display: inline-block;
    padding: 1rem 1.5rem;
    font-size: 0.9375rem;
    color: var(--fbc-ink);
    white-space: nowrap;
    background-color: var(--fbc-green-on-dark);
    border: none;
    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}

/**
 * Sits over the dark header photo, so it keeps brand green and takes a near-black label — same
 * treatment as .btn-cta-band. Hover lightens rather than darkens; on a dark ground there is nowhere
 * down to go.
 */
.header-cta a.btn:hover {
    color: var(--fbc-ink);
    background-color: var(--fbc-green-on-dark-hover);
}

/**
 * Responsive
 *
 * The nav itself is handled in the MOBILE MENU section further down; what changes here is the
 * chrome around it — the hero box, the logo, the topbar strip and the page title.
 */

/**
 * lg — the desktop header row stops fitting at about 935px of content.
 */
@media (max-width: 1023px) {
    /**
     * 540px is 64% of an 844px phone screen before a word of content shows. Each step down keeps
     * the hero feeling deliberate rather than merely shorter.
     */
    #site-header {
        min-height: 460px;
    }

    .header-logo img {
        height: 48px;
    }

    .header-main-inner {
        gap: 1rem;
    }

    /**
     * The CTA leaves the bar along with the desktop nav and reappears inside the menu panel. It
     * cannot stay: at 390px the row would need the logo (146px) plus a 44px toggle plus the button
     * (157px) plus gaps, inside 342px of content width. Dropping it at every hamburger width —
     * rather than keeping it down to 600px — means the bar reads identically on a tablet and a
     * phone.
     */
    .header-cta {
        display: none;
    }

    #header-page-title h1 {
        margin-bottom: 2.5rem;
        font-size: 2.125rem;
        line-height: 1.15;
    }
}

/**
 * sm
 */
@media (max-width: 600px) {
    #site-header {
        min-height: 400px;
    }

    /**
     * The phone number and email each wrap to two lines here and run into the social icons. Both
     * are repeated in the menu panel and again in the footer, so the strip costs more than it
     * carries.
     */
    #header-topbar {
        display: none;
    }

    #header-page-title h1 {
        margin-bottom: 2rem;
        font-size: 1.75rem;
    }
}

/**
 * xs
 */
@media (max-width: 420px) {
    #site-header {
        min-height: 360px;
    }

    .header-logo img {
        height: 44px;
    }

    #header-page-title h1 {
        margin-bottom: 1.5rem;
        font-size: 1.5rem;
    }
}

/*------------------------------------------------------------------------------------------------*\
    #MOBILE-MENU
    Below lg (1023px) the primary nav becomes a full-screen overlay panel, driven by
    js/navigation.js.
\*------------------------------------------------------------------------------------------------*/

/**
 * One menu, not two. .nav-panel wraps #site-navigation at every width: at desktop it is an ordinary
 * flex wrapper and the dropdowns behave exactly as they always have; below lg the same element
 * becomes the overlay. Rendering wp_nav_menu() a second time for mobile would have meant two copies
 * of every menu-item-#### id in the document.
 *
 * The panel is position: fixed with inset: 0 rather than being anchored under the header bar.
 * Anchoring would have to answer what happens when the menu is opened halfway down a page, with the
 * bar scrolled out of view; a full-screen overlay is correct at any scroll position without that
 * arithmetic.
 *
 * Its material is deliberately the same navy and blur as the desktop dropdowns, so on a tablet the
 * panel reads as the surface the dropdown is made of rather than a separate mobile skin.
 */

/**
 * Desktop: the panel is just a wrapper
 */
.nav-panel {
    display: flex;
    flex: 1;
}

/**
 * .submenu-toggle belongs in this list even though nothing in the markup creates it:
 * js/navigation.js injects one into every parent item as soon as it runs, at any width. Without a
 * desktop rule hiding it, those buttons render as stray chevrons sitting between the nav items.
 */
.menu-toggle,
.nav-panel-head,
.nav-panel-extras,
.submenu-toggle {
    display: none;
}

.menu-toggle {
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    font-size: 1.375rem;
    color: var(--fbc-white);
    cursor: pointer;
    background: none;
    border: 0;
}

.menu-toggle:focus-visible,
.nav-panel-close:focus-visible,
.submenu-toggle:focus-visible {
    outline: 2px solid var(--fbc-green);
    outline-offset: 2px;
}

/**
 * Below lg: the overlay
 */
@media (max-width: 1023px) {
    /**
     * The panel is position: fixed so this clip would not reach it anyway, but the clip has no job
     * left at these widths — the dropdowns it used to contain are gone — and leaving it on invites
     * confusion the next time something is positioned out of the header.
     */
    #site-header {
        overflow: visible;
    }

    .menu-toggle {
        display: flex;
    }

    /**
     * 1. Above the admin bar's 99999. While the menu is open the admin bar is not needed, and
     *    sitting under it would put the close button beneath a strip the visitor has no way to
     *    see past. On its own this is not enough: the z-index only counts inside #header-main's
     *    stacking context. See the html.nav-open #header-main rule below.
     */
    .nav-panel {
        position: fixed;
        inset: 0;
        z-index: 100001; /* [1] */
        visibility: hidden;
        flex: none;
        flex-direction: column;
        align-items: stretch;
        padding-bottom: 2.5rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        background-color: rgba(20, 78, 107, 0.97);
        opacity: 0;
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        transform: translateY(-0.5rem);
        transition:
            opacity 0.18s ease,
            transform 0.18s ease,
            visibility 0s linear 0.18s;
    }

    .nav-panel.is-open {
        visibility: visible;
        opacity: 1;
        transform: none;
        transition:
            opacity 0.18s ease,
            transform 0.18s ease,
            visibility 0s;
    }

    /**
     * #header-main is position: relative with z-index: 2, which makes it a stacking context that
     * caps everything inside it, the panel included. So the panel's 100001 still ranked below the
     * admin bar's 99999, and for any logged-in user with the admin bar, the bar covered the close
     * button and the logo. Lifting #header-main while the menu is open (navigation.js puts
     * .nav-open on <html>) brings the whole panel above it. Measured at 768px and 390px: before,
     * the admin bar was topmost at the centre of the close button; after, the button is.
     */
    html.nav-open #header-main {
        z-index: 100001;
    }

    /**
     * Scroll lock, so the page cannot be scrolled away behind the overlay.
     */
    html.nav-open,
    html.nav-open body {
        overflow: hidden;
    }

    /**
     * Panel head: logo and close button
     */
    .nav-panel-head {
        display: flex;
        gap: 1rem;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.5rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    }

    .nav-panel-logo {
        flex: 0 0 auto;
        width: auto;
        height: 44px;
    }

    .nav-panel-close {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        font-size: 1.5rem;
        color: var(--fbc-white);
        cursor: pointer;
        background: none;
        border: 0;
    }

    /**
     * Menu list
     */
    #site-navigation {
        display: block;
        flex: none;
    }

    #site-navigation ul {
        display: block;
        gap: 0;
    }

    #site-navigation > ul {
        padding: 0.5rem 1.5rem 0;
    }

    #site-navigation ul li {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    /**
     * Split row: the label keeps its own link to the parent page, the chevron beside it is a
     * separate button.
     */
    #site-navigation ul li > a {
        display: block;
        flex: 1;
        padding: 1.0625rem 0;
        font-size: 1rem;
    }

    /**
     * The CSS caret is replaced by the real chevron button.
     */
    #site-navigation ul li.menu-item-has-children > a::after {
        content: none;
    }

    .submenu-toggle {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        width: 56px;
        min-height: 56px;
        padding: 0;
        font-size: 0.875rem;
        color: var(--fbc-white);
        cursor: pointer;
        background: none;
        border: 0;
    }

    .submenu-toggle:hover {
        color: var(--fbc-green-on-dark-hover);
    }

    .submenu-toggle i {
        transition: transform 0.15s ease;
    }

    .is-expanded > .submenu-toggle i {
        transform: rotate(180deg);
    }

    /**
     * Submenus.
     *
     * :hover and :focus-within are listed here on purpose. The desktop rules
     * `#site-navigation ul li:hover > ul` and `…li:focus-within > ul` carry a pseudo-class, making
     * them (1,1,3) — they would outrank a plain (1,0,3) selector and let a touch tap, or tabbing
     * onto a submenu chevron, open a submenu. Matching their specificity and coming later in the
     * file is what actually turns the desktop dropdowns off; the chevron buttons open them here.
     */
    #site-navigation ul li ul,
    #site-navigation ul li:hover > ul,
    #site-navigation ul li:focus-within > ul {
        position: static;
        display: none;
        flex-basis: 100%;
        width: 100%;
        min-width: 0;
        background-color: rgba(0, 0, 0, 0.16);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    #site-navigation ul li.is-expanded > ul {
        display: block;
    }

    #site-navigation ul li ul li {
        border-bottom: 0;
    }

    /**
     * Children drop the uppercase display face so a long panel reads as parents and their contents
     * rather than one flat list of shouting.
     */
    #site-navigation ul li ul li a {
        padding: 0.8125rem 1rem;
        font-family: var(--fbc-font-body);
        font-size: 0.9375rem;
        font-weight: 400;
        text-transform: none;
        letter-spacing: 0.01em;
        white-space: normal;
    }

    /**
     * Extras: CTA, contact, social
     */
    .nav-panel-extras {
        display: block;
        padding: 1.75rem 1.5rem 0;
    }

    .nav-panel-cta {
        display: block;
        width: 100%;
        padding: 1rem 1.5rem;
        font-size: 0.9375rem;
        color: var(--fbc-ink);
        text-align: center;
        background-color: var(--fbc-green-on-dark);
        transition: background-color 0.15s ease;
    }

    .nav-panel-cta:hover,
    .nav-panel-cta:focus {
        color: var(--fbc-ink);
        background-color: var(--fbc-green-on-dark-hover);
    }

    .nav-panel-contact {
        padding: 0;
        margin: 1.75rem 0 0;
        font-size: 0.9375rem;
        list-style: none;
    }

    .nav-panel-contact li {
        margin-bottom: 0.875rem;
    }

    .nav-panel-contact i {
        margin-right: 0.5rem;
        color: var(--fbc-green);
    }

    .nav-panel-contact a {
        color: var(--fbc-white);
    }

    .nav-panel-social {
        display: flex;
        gap: 1rem;
        padding: 0;
        margin: 1.5rem 0 0;
        list-style: none;
    }

    .nav-panel-social a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        font-size: 1rem;
        color: var(--fbc-ink);
        background-color: var(--fbc-green-on-dark);
        border-radius: 50%;
        transition:
            background-color 0.15s ease,
            color 0.15s ease;
    }

    .nav-panel-social a:hover,
    .nav-panel-social a:focus {
        color: var(--fbc-blue-fill);
        background-color: var(--fbc-white);
    }

    /**
     * No JavaScript.
     *
     * js/navigation.js removes the no-js class from <html> before first paint, so these rules apply
     * only if the script never ran. There is no working toggle in that case, so the panel is laid
     * out inline and fully expanded instead of as an overlay that can never be opened — every link
     * stays reachable.
     */
    .no-js .header-main-inner {
        flex-wrap: wrap;
    }

    .no-js .menu-toggle,
    .no-js .nav-panel-head {
        display: none;
    }

    .no-js .nav-panel {
        position: static;
        z-index: auto;
        visibility: visible;
        flex-basis: 100%;
        padding-bottom: 1rem;
        overflow: visible;
        background-color: transparent;
        opacity: 1;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        transform: none;
    }

    .no-js #site-navigation ul li ul {
        display: block;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-panel {
        transform: none;
        transition:
            opacity 0.01ms,
            visibility 0.01ms;
    }

    .submenu-toggle i {
        transition: none;
    }
}

/*------------------------------------------------------------------------------------------------*\
    #MAIN-CONTENT
\*------------------------------------------------------------------------------------------------*/

#site-main {
    padding-top: 3rem;
    padding-bottom: 4rem;
}

#event-registration {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

/*------------------------------------------------------------------------------------------------*\
    #ENTRY-CONTENT
    Styles for block editor output inside .entry-content.
\*------------------------------------------------------------------------------------------------*/

.entry-content {
    font-family: var(--fbc-font-body);
    color: var(--fbc-text);
}

.entry-content p {
    margin-bottom: 1.6875rem;
}

/**
 * Links in editor content (pages, events, newsletters). reset.css sets a:not([class]) { color:
 * currentcolor } at (0,1,1), which outranked theme.json's link colour at (0,0,1), and the global a
 * rule removes the underline: content links rendered as body text, indistinguishable from the words
 * around them (WCAG 1.4.1). Class-less links only, so block buttons and styled components are
 * untouched.
 */
.entry-content a:not([class]) {
    color: var(--fbc-link);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.entry-content a:not([class]):hover {
    color: var(--fbc-link-hover);
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    margin-top: 2rem;
    margin-bottom: 0.875rem;
    font-family: var(--fbc-font-display);
    font-weight: 700;
    line-height: 1.25; /* was inherited from body text, 1.875 */
    color: var(--fbc-black);
}

/**
 * Every content heading level needs a size set here. reset.css gives headings font: inherit, which
 * overrides theme.json's heading sizes, so until 2026-09-11 only h2 and h3 had sizes and h1, h4, h5
 * and h6 rendered at body size. The scale steps down from the existing h2/h3 rather than using
 * theme.json's larger one. Mirrored in editor.css.
 */
.entry-content h1 {
    font-size: 2.375rem;
}
.entry-content h2 {
    font-size: 2rem;
}
.entry-content h3 {
    font-size: 1.625rem;
}
.entry-content h4 {
    font-size: 1.25rem;
}
.entry-content h5 {
    font-size: 1.125rem;
}
.entry-content h6 {
    font-size: 1rem;
}

.entry-content ul.wp-block-list,
.entry-content ol.wp-block-list {
    padding-left: 1.5rem;
    margin-bottom: 1.25rem;
}

.entry-content ul.wp-block-list {
    list-style: disc;
}

.entry-content ol.wp-block-list {
    list-style: decimal;
}

.entry-content ul.wp-block-list li,
.entry-content ol.wp-block-list li {
    margin-bottom: 1.125rem;
    line-height: 1.4;
}

/**
 * Checkmark lists — a utility, usable anywhere.
 *
 * The .entry-content variants are spelled out alongside the bare class on purpose. A checkmark list
 * built from the FBCH block pattern also carries .wp-block-list, and .entry-content
 * ul.wp-block-list sets list-style: disc at the same specificity (0,2,1). The bare .has-checkmarks
 * class is (0,1,0) and would lose to it, putting the bullets back. Listing both keeps the utility
 * working inside the block editor and out.
 */
.has-checkmarks,
.entry-content ul.has-checkmarks {
    padding-left: 0;
    list-style: none;
}

.has-checkmarks li,
.entry-content ul.has-checkmarks li {
    position: relative;
    padding-left: 1.75rem;
}

.has-checkmarks li::before,
.entry-content ul.has-checkmarks li::before {
    position: absolute;
    top: -0.05em;
    left: 0;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--fbc-green);
    content: '\f00c';
}

/**
 * Nested lists
 */
.entry-content ul.wp-block-list ul.wp-block-list {
    padding-left: 1.5rem;
    margin-top: 1.125rem;
    margin-bottom: 1.125rem;
    list-style: circle;
}

/*------------------------------------------------------------------------------------------------*\
    #FOOTER
\*------------------------------------------------------------------------------------------------*/

#site-footer {
    position: relative;
    padding-top: 88px;
    color: var(--fbc-white);
    background-color: var(--fbc-blue-dark);
}

/**
 * Asanoha texture overlay — currently OFF.
 * The background-image was commented out but the rest of the rule was left live, so this rendered
 * an empty, fully transparent overlay element on every page. Disabled as a whole rather than
 * deleted: images/asanoha-tile.svg is still in the theme and this is the wiring for it.
 * To switch the texture on, uncomment this entire block.
 */
/*
#site-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../images/asanoha-tile.svg');
    background-repeat: repeat;
    background-size: 50px auto;
    background-position: -16px -9px;
    opacity: 0.25;
    pointer-events: none;
}
*/

#site-footer a {
    color: var(--fbc-white);
    text-decoration: none;
    transition: all 0.15s ease;
}

/**
 * Brand green is only 4.21:1 on the navy footer. Hover lightens instead — 5.64:1 — following the
 * same rule as the buttons on dark grounds.
 */
#site-footer a:hover {
    color: var(--fbc-green-on-dark-hover);
}

/**
 * Layout
 */
.footer-main-inner {
    display: flex;
    gap: 1.5rem;
    padding-bottom: 88px;
}

.footer-col {
    flex: 1;
}

#footer-bottom .footer-bottom-inner {
    position: relative;
    display: flex;
    gap: 2rem;
    align-items: center;
    justify-content: space-between;
    padding-top: 1.6875rem;
    padding-bottom: 1.625rem;
}

#footer-bottom .footer-bottom-inner::before {
    position: absolute;
    top: 0;
    right: 1.5rem;
    left: 1.5rem;
    height: 1px;
    content: '';
    background-color: rgba(255, 255, 255, 0.2);
}

/**
 * Social Icons
 */
.footer-social {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    padding: 0;
    margin: 1.1875rem 0 0 0;
    list-style: none;
}

/**
 * Scoped to #site-footer so it outranks `#site-footer a`, which would otherwise force these icons
 * back to white — 2.14:1 on the green disc.
 */
#site-footer .footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    font-size: 1rem;
    color: var(--fbc-ink);
    background-color: var(--fbc-green-on-dark);
    border-radius: 50%;
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

#site-footer .footer-social a:hover {
    color: var(--fbc-green-fill);
    background-color: var(--fbc-white);
}

/**
 * Contact
 */
.footer-contact i {
    margin-right: 0.25rem;
    color: var(--fbc-green);
}

/**
 * Logo
 */
.footer-logo img {
    max-width: 70.79646018%;
    height: auto;
}

.footer-logo {
    display: block;
    margin-bottom: 1.1875rem;
}

/**
 * Headings
 *
 * block + fit-content, not inline-block: the green rule is a border on this box, and on an
 * inline-block that wraps to two lines the border follows the final line box only — so in a narrow
 * column "About Us" broke to two lines with the rule sitting under "Us" alone. A block sized to
 * fit-content is as wide as its longest line, so the rule spans the whole heading either way.
 */
.footer-col-heading {
    display: block;
    width: fit-content;
    padding-bottom: 0.8125rem;
    margin-bottom: 1.125rem;
    font-size: 1.5rem;
    font-weight: 600;
    border-bottom: 3px solid var(--fbc-green);
}

#footer-bottom {
    font-size: 0.75rem;
    line-height: 1.58333333;
    color: var(--fbc-blue-tint);
}

.footer-tagline {
    margin-bottom: 1rem;
    font-size: 0.75rem;
    line-height: 1.58333333;
    color: var(--fbc-blue-tint);
}

.footer-col-identity .footer-contact,
.footer-col-about .menu,
.footer-col-members .menu,
.footer-col-affiliates .menu {
    font-size: 0.9375rem;
    line-height: 1.26666667;
}

.footer-col-identity .footer-contact li,
.footer-col-about .menu li,
.footer-col-members .menu li,
.footer-col-affiliates .menu li {
    margin-bottom: 1.0625rem;
}

/**
 * Responsive
 */

/**
 * md — four columns become 2x2. The flex row becomes a grid so the second pair lines up under the
 * first; as a flex row the columns would just wrap ragged, since .footer-col-affiliates has a hard
 * 200px floor (four 38px social discs plus three 16px gaps) while the others compress freely.
 *
 * That 200px floor is also what pushed the whole document to 568px wide inside a 390px viewport —
 * the footer, not the header, was the source of the sideways scroll on phones.
 */
@media (max-width: 767px) {
    #site-footer {
        padding-top: 3.5rem;
    }

    .footer-main-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem 1.5rem;
        padding-bottom: 3.5rem;
    }
}

/**
 * sm — single column, and the bottom bar stops sitting on one line.
 */
@media (max-width: 600px) {
    .footer-main-inner {
        grid-template-columns: 1fr;
        gap: 2.25rem;
    }

    /**
     * 70.8% of a full-width column is a ~240px logo on a phone, which reads as an oversized mark
     * rather than a footer lockup.
     */
    .footer-logo img {
        max-width: 200px;
    }

    /**
     * Left-aligned rather than centred, to sit under a left-aligned column stack. Both lines get
     * their own row instead of being squeezed into two narrow halves by space-between.
     */
    #footer-bottom .footer-bottom-inner {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
}

/*------------------------------------------------------------------------------------------------*\
    #ICON-BOXES
    Homepage section: 2-column grid of icon + heading + text + link. Registered as the "Homepage
    Icon Boxes" block pattern (inc/patterns.php). The .icon-boxes wrapper is a wp:group;
    .icon-boxes-grid uses WP's grid layout (minimumColumnWidth: 280px) which handles responsiveness.
\*------------------------------------------------------------------------------------------------*/

.icon-boxes {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.icon-boxes-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.icon-boxes-grid > * {
    margin-block-start: 0;
}

@media (max-width: 640px) {
    .icon-boxes-grid {
        grid-template-columns: 1fr;
    }
}

.icon-box {
    display: flex;
    gap: 1.125rem;
    align-items: flex-start;
    padding: 1.375rem 1.375rem 1.3125rem 1.375rem;
    border: 1px solid var(--fbc-border);
}

/**
 * The coloured square holding the Font Awesome icon
 */
.icon-box-icon {
    display: flex;
    flex: 0 0 60px;
    align-items: center;
    justify-content: center;
    height: 60px;
    font-size: 1.375rem;
    color: var(--fbc-white);
    background-color: var(--fbc-blue); /* Shidler Blue */
}

/**
 * Content column
 */
.icon-box-content {
    flex: 1;
    min-width: 0;
}

.icon-box .icon-box-heading {
    margin-top: 0.3125rem;
    margin-bottom: 0;
    line-height: 1.80769231;
}

.icon-box .icon-box-text {
    margin-top: 0;
    margin-bottom: 0.5625rem;
    font-size: 1rem;
    line-height: 1.5625;
}

.icon-box .wp-block-buttons {
    margin-top: 0;
}

/**
 * "Learn more" style link
 */
.icon-box .icon-box-link .wp-block-button__link,
.icon-box .icon-box-link a {
    padding: 0;
    font-family: var(--fbc-font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--fbc-link);
    text-decoration: none;
    background: none;
    border: none;
    box-shadow: none;
    transition: color 0.15s ease;
}

.icon-box .icon-box-link .wp-block-button__link:hover,
.icon-box .icon-box-link a:hover {
    color: var(--fbc-link-hover);
}

/*------------------------------------------------------------------------------------------------*\
    #DIRECTOR-LETTER
    Full-bleed light grey section on the homepage, immediately below the hero.
    Two-column grid: text left, photo right.
    Template: front-page.php
\*------------------------------------------------------------------------------------------------*/

#director-letter {
    padding-top: 5rem;
    padding-bottom: 5rem;
    background-color: #f4f6f8;
}

.director-letter-inner {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 4rem;
    align-items: center;
}

/**
 * Eyebrow label
 */
.director-letter-eyebrow {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-family: var(--fbc-font-display);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--fbc-green-deep);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

/**
 * Director name heading
 */
.director-letter-name {
    margin-top: 0;
    margin-bottom: 1.75rem;
    font-family: var(--fbc-font-display);
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--fbc-blue-dark);
}

/**
 * Letter body paragraphs
 */
.director-letter-body p {
    margin-top: 0;
    margin-bottom: 1.25rem;
    font-family: var(--fbc-font-body);
    font-size: 1rem;
    font-style: italic;
    line-height: 1.875;
    color: var(--fbc-text);
}

.director-letter-body p:last-child {
    margin-bottom: 0;
}

/**
 * Signature block
 */
.director-letter-signature {
    padding-top: 1.25rem;
    margin-top: 2rem;
    border-top: 1px solid #d0d8de;
}

.director-letter-sig-name {
    font-family: var(--fbc-font-display);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--fbc-blue-dark);
}

.director-letter-sig-title {
    margin-top: 0.2rem;
    font-family: var(--fbc-font-display);
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--fbc-green-deep);
}

/**
 * Photo column — 300px, vertically centred beside the letter; the photo keeps a 2:3 ratio
 */
.director-letter-photo-col {
    width: 100%;
}

.director-letter-photo {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    object-position: center top;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(20, 78, 107, 0.15);
}

/**
 * Responsive — stack vertically on smaller screens
 */
@media (max-width: 768px) {
    .director-letter-inner {
        grid-template-columns: 1fr;
    }

    .director-letter-photo-col {
        max-width: 260px;
        margin: 2.5rem auto 0;
    }
}

/*------------------------------------------------------------------------------------------------*\
    #HOMEPAGE-MEMBER-LOGIN
    Compact login section shown only to logged-out visitors, below the icon boxes and above the
    footer. Template: front-page.php. Uses WordPress's own wp_login_form() — input field styling
    matches the site's form conventions (see #FORMIDABLE-FORMS) for consistency.
\*------------------------------------------------------------------------------------------------*/

#homepage-member-login {
    padding-top: 4rem;
    padding-bottom: 4rem;
    background-color: var(--fbc-bg-blue); /* Background Blue */
}

.member-login-inner {
    max-width: 400px;
    margin: 0 auto;
    text-align: center;
}

.member-login-heading {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-family: var(--fbc-font-display);
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--fbc-blue-dark);
}

.member-login-text {
    margin-top: 0;
    margin-bottom: 1.75rem;
    font-size: 0.9375rem;
    color: var(--fbc-text);
}

#homepage-login-form {
    text-align: left;
}

#homepage-login-form p {
    margin: 0 0 1rem;
}

#homepage-login-form .login-username label,
#homepage-login-form .login-password label {
    display: block;
    margin-bottom: 0.375rem;
    font-family: var(--fbc-font-display);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fbc-blue-dark);
}

/**
 * Field base styling is shared with Formidable forms: see #FORMIDABLE-FORMS. Focus matches them
 * too.
 */
#homepage-login-form input[type='text']:focus,
#homepage-login-form input[type='password']:focus {
    outline: 2px solid var(--fbc-focus);
    outline-offset: 0;
    border-color: var(--fbc-focus);
}

#homepage-login-form .login-remember label {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0;
    font-family: var(--fbc-font-body);
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--fbc-text);
    cursor: pointer;
}

#homepage-login-form .login-remember input[type='checkbox'] {
    width: auto;
    margin: 0;
}

#homepage-login-form .login-submit {
    margin-top: 1.5rem;
    margin-bottom: 0;
    text-align: center;
}

#homepage-login-form input[type='submit'] {
    display: inline-block;
    padding: 0.8125rem 2rem 0.9375rem;
    font-family: var(--fbc-font-display);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    color: var(--fbc-white);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    background-color: var(--fbc-green-fill);
    border: 2px solid var(--fbc-green-fill);
    border-radius: 0;
    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}

#homepage-login-form input[type='submit']:hover {
    color: var(--fbc-green-fill);
    background-color: var(--fbc-white);
}

.member-login-note {
    margin-top: 1.5rem;
    margin-bottom: 0;
    font-size: 0.8125rem;
    color: var(--fbc-text-meta);
    text-align: center;
}

.member-login-note a {
    color: var(--fbc-link);
}

.member-login-note a:hover {
    text-decoration: underline;
}

/*------------------------------------------------------------------------------------------------*\
    #ADVISORY-BOARD
    Chapter sections with a 3-column advisor card grid.
    Template: page-advisory-board.php
\*------------------------------------------------------------------------------------------------*/

#advisory-board-intro {
    padding-top: 2rem;
    padding-bottom: 0;
}

.advisory-board-chapter {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.advisory-board-chapter:last-of-type {
    padding-bottom: 6rem;
}

.advisor-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem 2rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

@media (max-width: 760px) {
    .advisor-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .advisor-grid {
        grid-template-columns: 1fr;
    }
}

.advisor-card {
    padding: 1rem 1.125rem;
    border-left: 3px solid var(--fbc-blue);
}

/**
 * Chapter Chair card
 */
.advisor-card--chair {
    padding-top: 0.75rem;
    background-color: var(--fbc-bg-green);
    border-left-color: var(--fbc-green);
}

/**
 * White on the chair card's bg-green, so the badge stands out from the card: green-deep on white
 * measures 6.13:1 (WCAG 1.4.3). The green border matches the chair badge on member profiles.
 */
.advisor-chair-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    margin-bottom: 0.4375rem;
    font-family: var(--fbc-font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--fbc-green-deep);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    background-color: var(--fbc-white);
    border: 1px solid var(--fbc-green);
}

.advisor-name {
    margin: 0.1875rem 0 0.25rem 0;
    font-family: var(--fbc-font-display);
    font-size: 1.125rem; /* 18px */
    font-weight: 700;
    line-height: 1.33333333; /* 24px */
    color: var(--fbc-gray-900);
}

.advisor-title {
    margin: 0.0625rem 0 0.125rem 0;
    font-size: 0.875rem; /* 14px */
    line-height: 1.28571429; /* 18px */
}

.advisor-company {
    margin: 0.125rem 0 0.1875rem 0;
    font-family: var(--fbc-font-body);
    font-size: 0.8125rem; /* 13px */
    line-height: 1.38461538; /* 18px */
    color: var(--fbc-text-meta);
}

/*------------------------------------------------------------------------------------------------*\
    #SINGLE-EVENT
    Two-column layout: meta sidebar (left) + entry content (right).
    Stacks to single column on narrow viewports.
\*------------------------------------------------------------------------------------------------*/

/**
 * Layout
 */
.single-event .event-layout {
    display: flex;
    gap: 2.25rem;
    align-items: flex-start;
}

/**
 * Meta sidebar
 */
.event-meta {
    flex: 0 0 256px;
    padding: 1.5rem;
    background-color: var(--fbc-bg-green);
    border-top: 4px solid var(--fbc-green);
}

/**
 * Speaker card (single-speaker events with a photo set)
 */
.event-meta-speaker {
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.event-meta-speaker-photo {
    width: 100px;
    height: 100px;
    margin: 0 auto 0.875rem;
    overflow: hidden;
    background-color: var(--fbc-photo-bg);
    border-radius: 50%;
}

.event-meta-speaker-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.event-meta-speaker-name {
    margin: 0 0 0.25rem;
    font-family: var(--fbc-font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--fbc-blue-dark);
}

.event-meta-speaker-title {
    margin: 0;
    font-family: var(--fbc-font-body);
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--fbc-text);
}

.event-meta-item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    margin-bottom: 1.25rem;
}

.event-meta-item i {
    flex-shrink: 0;
    margin-top: 0.0625em;
    font-size: 1rem;
    color: var(--fbc-green);
}

.event-meta-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.event-meta-label {
    font-family: var(--fbc-font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.72727273;
    color: var(--fbc-text-meta);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.event-meta-value {
    font-family: var(--fbc-font-body);
    font-size: 0.875rem;
    line-height: 1.42857143;
    color: var(--fbc-text);
}

/**
 * The Time Note, when it sits under the times rather than in their place.
 */
.event-meta-note {
    font-style: italic;
}

/**
 * Add to Calendar: one link per calendar, stacked (inc/event-calendar.php).
 */
.event-calendar-links {
    padding: 0;
    margin: 0;
    font-family: var(--fbc-font-body);
    font-size: 0.875rem;
    line-height: 1.42857143;
    list-style: none;
}

.event-calendar-links li + li {
    margin-top: 0.25rem;
}

.event-calendar-links a {
    color: var(--fbc-link);
    text-decoration: underline;
}

.event-calendar-links a:hover,
.event-calendar-links a:focus {
    color: var(--fbc-link-hover);
}

/**
 * Members-only notice (shown to logged-out users when video exists)
 */
.event-meta-members-only {
    margin: 0;
    font-family: var(--fbc-font-body);
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--fbc-text-meta);
}

.event-meta-members-only i {
    margin-right: 0.25rem;
    color: var(--fbc-green);
}

.event-meta-members-only a {
    color: var(--fbc-link);
    text-decoration: underline;
}

/**
 * Video button
 */
.event-meta-video {
    margin-top: 0.5rem;
}

.btn-video {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.875rem 1.25rem;
    font-size: 1rem;
    color: var(--fbc-white);
    background-color: var(--fbc-blue-fill);
    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}

/**
 * Filled blue button: darkens on hover, matching .btn-event-more and .btn-newsletter-primary.
 */
.btn-video:hover {
    color: var(--fbc-white);
    background-color: var(--fbc-blue-fill-hover);
}

.btn-video i {
    font-size: 1.125rem;
}

/**
 * Register button
 */
.btn-register {
    box-sizing: border-box;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.8125rem 1.25rem 0.9375rem;
    margin-bottom: 1.25rem;
    font-size: 1rem;
    color: var(--fbc-white);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background-color: var(--fbc-green-fill);
    border: 2px solid var(--fbc-green-fill);
    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}

.btn-register:hover {
    color: var(--fbc-green-fill);
    background-color: var(--fbc-white);
}

.btn-register i {
    font-size: 1.125rem;
}

.btn-register-banner {
    display: flex;
    justify-content: center;
    width: fit-content;
    padding: 0.6875rem 2rem 0.8125rem;
    margin: 0 auto 1.5rem;
}

.btn-register-banner:hover {
    color: var(--fbc-white);
    background-color: transparent;
    border-color: var(--fbc-white);
}

/**
 * Video placeholder (shown to logged-out users when video exists)
 */
.event-video-placeholder {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 16 / 9;
    padding: 1.5rem;
    margin-bottom: 2rem;
    color: var(--fbc-text-meta);
    text-align: center;
    background-color: var(--fbc-gray-100);
}

.event-video-placeholder i {
    font-size: 2.375rem;
    color: var(--fbc-gray-300);
}

.event-video-placeholder p {
    margin: 0;
    font-family: var(--fbc-font-body);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--fbc-text-meta);
}

.event-video-placeholder a {
    color: var(--fbc-link);
    text-decoration: underline;
}

/**
 * Video embed
 */
.event-video-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: 2rem;
}

.event-video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/**
 * Content column
 */
.event-content {
    flex: 1;
    min-width: 0;
}

/**
 * Responsive: stack on narrow viewports
 */
@media (max-width: 680px) {
    .single-event .event-layout {
        flex-direction: column;
    }

    .event-meta {
        flex: none;
        width: 100%;
    }
}

/*------------------------------------------------------------------------------------------------*\
    #EVENT-LIST
    Past Events & Archive
    Used by: archive-event.php, template-parts/past-events-list.php,
    template-parts/events-island.php
    Rows: template-parts/event-list-item.php
    .events-empty is also used by page-event-registration.php
\*------------------------------------------------------------------------------------------------*/

/**
 * Page header
 */
#past-events-header,
#events-archive-header {
    padding: 3rem 0;
    text-align: center;
    background-color: #f8f8f8;
    border-bottom: 1px solid var(--fbc-border);
}

.events-page-title {
    margin-bottom: 0.5rem;
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--fbc-gray-900);
}

.events-page-subtitle {
    margin-bottom: 1.75rem;
    font-size: 1.0625rem;
}

.btn-past-events {
    display: inline-block;
    padding: 0.6rem 1.5rem;
    font-size: 1.0625rem;
    color: var(--fbc-blue-fill);
    text-decoration: none;
    border: 2px solid var(--fbc-blue-fill);
    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}

.btn-past-events:hover {
    color: var(--fbc-white);
    background-color: var(--fbc-blue-fill);
}

/**
 * Year navigation
 */
.past-events-years {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.past-events-years a {
    display: inline-block;
    padding: 0.35rem 1rem;
    font-family: var(--fbc-font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1;
    color: var(--fbc-blue-fill);
    border: 2px solid var(--fbc-blue-fill);
    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}

.past-events-years a:hover {
    color: var(--fbc-white);
    background-color: var(--fbc-blue-fill);
}

.past-events-years a.active {
    color: var(--fbc-white);
    background-color: var(--fbc-blue-fill);
}

/**
 * List content area
 */
#past-events-content,
#events-list {
    padding: 2rem 0 3rem;
}

/**
 * Event list
 */
.event-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

/**
 * Event row
 */
.event-list-item {
    display: flex;
    gap: 0;
    align-items: stretch;
    padding: 1.75rem 2.25rem;
    border: 1px solid var(--fbc-border);
}

/**
 * Date block
 */
.event-list-date {
    display: flex;
    flex: 0 0 96px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-right: 1.125rem;
    margin-right: 1.125rem;
    text-align: center;
}

.event-list-day {
    display: block;
    font-family: var(--fbc-font-display);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--fbc-gray-900);
}

/**
 * An event over several days in one month: "27–28" is set smaller, and never breaks at the dash.
 */
.event-list-day--range {
    font-size: 1.75rem;
    white-space: nowrap;
}

.event-list-monyr {
    display: block;
    margin-top: 0.25rem;
    font-family: var(--fbc-font-display);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--fbc-text-meta);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/**
 * Event thumbnail
 */
.event-list-thumbnail {
    flex: 0 0 162px;
    min-height: 108px;
    margin-right: 1.5rem;
    overflow: hidden;
}

.event-list-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/**
 * Info block
 */
.event-list-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.event-list-title {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.33333333;
    color: var(--fbc-gray-900);
}

.event-list-title a {
    display: block;
    color: inherit;
}

.event-list-title a:hover {
    color: var(--fbc-link);
}

.event-list-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.125rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.event-list-meta li {
    display: flex;
    gap: 0.375rem;
    align-items: center;
    font-size: 0.875rem;
    color: var(--fbc-text-muted);
}

.event-list-meta li i {
    flex-shrink: 0;
    font-size: 0.8125rem;
    color: var(--fbc-blue);
}

/**
 * CTA button
 */
.event-list-cta {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    padding-left: 2rem;
}

.btn-event-more {
    display: inline-block;
    padding: 0.75rem 1.75rem;
    font-size: 1rem;
    color: var(--fbc-white);
    white-space: nowrap;
    background-color: var(--fbc-blue-fill);
    transition: background-color 0.15s ease;
}

.btn-event-more:hover {
    color: var(--fbc-white);
    background-color: var(--fbc-blue-fill-hover);
}

/**
 * Empty state
 */
.events-empty {
    margin: 2rem 0;
    font-size: 1rem;
    color: var(--fbc-text-muted);
}

/**
 * Narrow viewports
 *
 * md (767px) and below: the row has no room left for a column of its own for "More", so the card
 * becomes a grid and the button moves under the title and meta. The date keeps its column and the
 * thumbnail shrinks; both sit at the top instead of stretching to the height of the text, which
 * had cropped the images into thin strips.
 *
 * sm (600px) and below: one column. The date becomes a single line above the title, and each meta
 * item gets its own line. A real featured image runs full width on top, at its own proportions:
 * the images are 16:9 flyers, square speaker photos and the odd portrait, and no one crop suits
 * all three. The cap stops a portrait filling the screen; it trims from the bottom, so a speaker
 * keeps their head. The placeholder is dropped (see event-list-item.php). No row-gap here: the
 * dropped placeholder's empty row would still leave its gap, so the spacing is margins instead.
 */
@media (max-width: 767px) {
    .event-list-item {
        display: grid;
        grid-template-areas:
            'date thumb info'
            'date thumb cta';
        grid-template-rows: auto 1fr;
        grid-template-columns: 4.5rem 7.5rem minmax(0, 1fr);
        column-gap: 1.25rem;
        padding: 1.5rem;
    }

    .event-list-date {
        grid-area: date;
        align-self: start;
        justify-content: flex-start;
        padding-right: 0;
        margin-right: 0;
    }

    .event-list-thumbnail {
        grid-area: thumb;
        align-self: start;
        min-height: 0;
        aspect-ratio: 3 / 2;
        margin-right: 0;
    }

    .event-list-info {
        grid-area: info;
    }

    .event-list-cta {
        grid-area: cta;
        align-items: flex-start;
        padding-top: 1rem;
        padding-left: 0;
    }
}

@media (max-width: 600px) {
    .event-list-item {
        grid-template-areas:
            'thumb'
            'date'
            'info'
            'cta';
        grid-template-rows: none;
        grid-template-columns: minmax(0, 1fr);
        padding: 1.25rem;
    }

    .event-list-date {
        flex-direction: row;
        gap: 0.375rem;
        align-items: baseline;
        margin-bottom: 0.5rem;
    }

    .event-list-day {
        font-size: 1.5rem;
    }

    .event-list-day--range {
        font-size: 1.125rem;
    }

    .event-list-thumbnail {
        aspect-ratio: auto;
        margin-bottom: 1rem;
    }

    .event-list-thumbnail img {
        height: auto;
        max-height: 20rem;
        object-position: center top;
    }

    .event-list-thumbnail--fallback {
        display: none;
    }

    .event-list-meta {
        flex-direction: column;
    }
}

/*------------------------------------------------------------------------------------------------*\
    #MEMBER-DIRECTORY
    Template: page-member-directory.php
\*------------------------------------------------------------------------------------------------*/

/**
 * Directory locked state (logged-out visitors)
 *
 * All three member-only pages share the same vertical rhythm. The resources and archive pages
 * previously had no rule at all, so their content sat flush against the header and footer.
 *
 * The -intro sections carry no bottom padding on purpose: the gap below them is supplied by the top
 * padding of the -locked / -content section that follows, so the spacing is the same whether or not
 * intro text exists.
 */
#member-directory-intro,
#member-resources-intro,
#member-video-archive-intro {
    padding: 3rem 0 0;
}

#member-directory-locked,
#member-resources-locked,
#member-video-archive-locked {
    padding: 3rem 0 4rem;
}

.member-locked-message {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    max-width: 480px;
    padding: 3rem 2rem;
    margin: 0 auto;
    text-align: center;
    background: #f9f9f9;
    border: 1px solid var(--fbc-border);
    border-radius: 6px;
}

.member-lock-icon {
    flex-shrink: 0;
    fill: var(--fbc-gray-400);
}

.member-locked-message p {
    margin: 0;
    font-size: 1rem;
    color: var(--fbc-gray-700);
}

.member-locked-message a {
    color: var(--fbc-link);
    text-decoration: underline;
}

/**
 * Coming-soon panel (logged-in members, content not built yet)
 *
 * Reuses the .member-locked-message panel above so the gated and coming-soon states read as one
 * system. Markup: template-parts/member-coming-soon.php
 */
.member-coming-soon-icon {
    font-size: 2rem;
    line-height: 1;
    color: var(--fbc-gray-400);
}

.member-coming-soon-heading {
    font-family: var(--fbc-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--fbc-blue-dark);
    letter-spacing: 0.01em;
}

/**
 * Directory controls (search + count)
 */
#member-directory-content,
#member-resources-content,
#member-video-archive-content {
    padding: 2.5rem 0 4rem;
}

.member-directory-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.member-search-input {
    flex: 1 1 280px;
    max-width: 400px;
    padding: 0.5rem 0.875rem;
    font-family: var(--fbc-font-body);
    font-size: 0.9375rem;
    color: var(--fbc-gray-900);
    border: 1px solid var(--fbc-field-border);
}

/**
 * Same field border and focus ring as every other form on the site.
 */
.member-search-input:focus {
    outline: 2px solid var(--fbc-focus);
    border-color: var(--fbc-focus);
}

.member-count {
    font-size: 0.875rem;
    color: var(--fbc-text-meta);
    white-space: nowrap;
}

/**
 * Table
 */
.member-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.member-table {
    width: 100%;
    font-size: 0.9rem;
    table-layout: fixed;
    border-collapse: collapse;
}

/**
 * Name carries three lines (name, title, company); Profile holds only a short link.
 */
.member-table thead th:nth-child(1) {
    width: 55%;
}
.member-table thead th:nth-child(2) {
    width: 25%;
}
.member-table thead th:nth-child(3) {
    width: 20%;
}

.member-table thead th {
    padding: 0.625rem 0.875rem;
    font-family: var(--fbc-font-display);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--fbc-white);
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    background-color: var(--fbc-blue-dark);
}

.member-table tbody tr:nth-child(odd) {
    background-color: var(--fbc-white);
}

.member-table tbody tr:nth-child(even) {
    background-color: #f4f8fb;
}

.member-table tbody tr:hover {
    background-color: #e8f2f8;
}

.member-table tbody td {
    padding: 0.625rem 0.875rem;
    vertical-align: middle;
    color: var(--fbc-text);
    border-bottom: 1px solid var(--fbc-border);
}

.member-table tbody td strong {
    font-weight: 600;
    color: var(--fbc-gray-900);
}

.member-sub-line {
    display: block;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--fbc-gray-600);
}

.member-table tbody td a {
    color: var(--fbc-link);
}

.member-table tbody td a:hover {
    text-decoration: underline;
}

/**
 * Profile link. A link, not a button: it is navigation, and eighty buttons down a column read as
 * noise. Underlined because it is the only thing in its cell. The padding is cancelled by an equal
 * negative margin, so the tap target clears 44px without making the rows any taller.
 */
.member-profile-link {
    display: inline-block;
    padding: 0.625rem 0;
    margin: -0.625rem 0;
    font-family: var(--fbc-font-display);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.member-table tbody td .member-profile-link:hover,
.member-table tbody td .member-profile-link:focus {
    color: var(--fbc-link-hover);
    text-decoration-thickness: 2px;
}

.member-no-results {
    margin-top: 1.5rem;
    font-size: 0.9375rem;
    color: var(--fbc-text-muted);
}

.member-directory-empty {
    margin: 2rem 0;
    font-size: 1rem;
    color: var(--fbc-text-muted);
}

/**
 * Responsive: stack table on narrow viewports
 *
 * Measured at a 390 x 844 phone viewport with 80 members: the page was 19,513px, 23.1 screens, and
 * the filter scrolled away 446px down. Hiding City and keeping the filter to one row bring it to
 * 14,586px (17.3 screens), and the filter now stays at the top.
 */
@media (max-width: 680px) {
    /**
     * Filter bar: one compact row that sticks while the cards scroll under it. The negative side
     * margins carry its white background across the container's gutters, so cards don't show at
     * its edges. Below 783px WordPress's admin bar is fixed and publishes its height as
     * --wp-admin--admin-bar--height, so the bar sits under it; at 600px and under the admin bar
     * scrolls away, and the filter goes flush to the top (see the block after this one).
     */
    .member-directory-controls {
        position: sticky;
        top: var(--wp-admin--admin-bar--height, 0px);
        z-index: 5;
        flex-wrap: nowrap;
        gap: 0.75rem;
        padding: 0.625rem 1.5rem;
        margin: 0 -1.5rem 0.75rem;
        background-color: var(--fbc-white);
        border-bottom: 1px solid var(--fbc-border);
    }

    /**
     * 16px, not 15px: iOS Safari zooms the whole page when a field under 16px takes focus.
     */
    .member-search-input {
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
        min-height: 2.75rem;
        font-size: 1rem;
    }

    .member-table thead {
        display: none;
    }

    .member-table tbody tr {
        display: block;
        padding: 0.75rem;
        margin-bottom: 1rem;
        border: 1px solid var(--fbc-border);
    }

    .member-table tbody td {
        display: block;
        padding: 0.25rem 0;
        border-bottom: none;
    }

    .member-table tbody td::before {
        display: block;
        font-family: var(--fbc-font-display);
        font-size: 0.875rem;
        font-weight: 700;
        color: var(--fbc-text-meta);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        content: attr(data-label) ': ';
    }

    /**
     * No City on phones: it isn't needed to recognise someone, and every card is shorter without
     * it. The cell stays in the markup, so the filter still finds members by city.
     */
    .member-table tbody td[data-label='City'] {
        display: none;
    }

    /**
     * No label on the Name cell (the name is self-evident) or the Profile cell (the link says what
     * it is). Spacing below the name.
     */
    .member-table tbody td[data-label='Name']::before,
    .member-table tbody td[data-label='Profile']::before {
        display: none;
    }

    .member-table tbody td[data-label='Name'] {
        padding-bottom: 0.5rem;
        margin-bottom: 0.25rem;
        border-bottom: 1px solid var(--fbc-border);
    }
}

/**
 * sm: WordPress's admin bar stops being fixed at 600px and scrolls away with the page, so the
 * sticky filter no longer needs to clear it.
 */
@media (max-width: 600px) {
    .member-directory-controls {
        top: 0;
    }
}

/*------------------------------------------------------------------------------------------------*\
    #MEMBER-PROFILE
    One member's full profile, opened from the Member Directory.
    Template: single-member.php
\*------------------------------------------------------------------------------------------------*/

/**
 * The member's name is the banner heading above, so the page opens on the company rather than a
 * second copy of the name. Every part is optional; nothing here assumes a neighbour exists.
 *
 * The bottom space belongs to <main>, not to a section: Family Members prints only when there is
 * data, so the last section on the page varies.
 */
#member-profile {
    padding: 3rem 0 5rem;
}

#member-profile-contact,
#member-profile-family {
    padding-top: 2.5rem;
}

/**
 * Back link. Padding takes the tap target past 44px without making it look like a button.
 */
.member-profile-back {
    margin-bottom: 0.5rem;
}

.member-profile-back a {
    display: inline-block;
    padding: 0.75rem 0;
    font-family: var(--fbc-font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--fbc-link);
}

.member-profile-back a:hover,
.member-profile-back a:focus {
    color: var(--fbc-link-hover);
    text-decoration: underline;
}

/**
 * Leadership roles. Modelled on .advisor-chair-badge. Both pass WCAG 1.4.3 — green-deep on
 * bg-green 5.69:1, blue-dark on blue-tint 7.17:1. Both carry a 1px border so the two badges are
 * the same size; only the chair's is visible.
 */
.member-profile-roles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.member-profile-role {
    padding: 0.25rem 0.625rem;
    font-family: var(--fbc-font-display);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--fbc-blue-dark);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    background-color: var(--fbc-blue-tint);
    border: 1px solid var(--fbc-blue-tint);
}

.member-profile-role--chair {
    color: var(--fbc-green-deep);
    background-color: var(--fbc-bg-green);
    border-color: var(--fbc-green);
}

/**
 * Identity: the job title as a lead-in, the company as the anchor, the chapter as a quiet
 * signature underneath.
 */
.member-profile-title {
    font-family: var(--fbc-font-body);
    font-size: 1.125rem;
    font-style: italic;
    line-height: 1.5;
    color: var(--fbc-gray-700);
}

.member-profile-company {
    font-family: var(--fbc-font-display);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--fbc-blue-dark);
    text-wrap: balance;
}

.member-profile-chapters {
    margin-top: 0.5rem;
    font-family: var(--fbc-font-display);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--fbc-green-deep); /* 6.13:1 */
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/**
 * Contact details: a label column beside the values, or the label above its value on phones.
 *
 * The values are what someone came for, so links are underlined rather than left to colour alone.
 * Each link's padding is cancelled by an equal negative margin: the tap target grows past 44px
 * while the row keeps its height. A long email or web address wraps instead of overflowing.
 */
.member-profile-details {
    max-width: 44rem;
    border-top: 1px solid var(--fbc-border);
}

.member-profile-detail {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    column-gap: 1.5rem;
    align-items: baseline;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--fbc-border);
}

.member-profile-detail dt {
    grid-column: 1;
    font-family: var(--fbc-font-display);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--fbc-text-meta);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.member-profile-detail dd {
    grid-column: 2;
    padding: 0.5625rem 0;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--fbc-gray-900);
    overflow-wrap: anywhere;
}

.member-profile-detail dd a {
    display: inline-block;
    padding: 0.5625rem 0;
    margin: -0.5625rem 0;
    color: var(--fbc-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.member-profile-detail dd a:hover,
.member-profile-detail dd a:focus {
    color: var(--fbc-link-hover);
    text-decoration-thickness: 2px;
}

.member-profile-empty {
    font-style: italic;
    color: var(--fbc-text-muted);
}

/**
 * Family members, as staff typed them.
 */
.member-profile-family-text {
    max-width: 44rem;
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--fbc-gray-900);
}

/**
 * sm: the label moves above its value, and the company steps down a size.
 */
@media (max-width: 600px) {
    #member-profile {
        padding-top: 2rem;
    }

    .member-profile-company {
        font-size: 1.625rem;
    }

    .member-profile-detail {
        grid-template-columns: minmax(0, 1fr);
        padding: 0.625rem 0 0.25rem;
    }

    .member-profile-detail dt,
    .member-profile-detail dd {
        grid-column: 1;
    }

    .member-profile-detail dd {
        padding-top: 0.125rem;
    }
}

/*------------------------------------------------------------------------------------------------*\
    #ABOUT-PAGE
    Three-section layout: Mission, Programs, Staff.
    Template: page-about.php
\*------------------------------------------------------------------------------------------------*/

/**
 * Shared section heading: see .section-heading below
 */

/**
 * SECTION 1: MISSION
 */
#about-mission {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}

.about-mission-inner {
    display: flex;
    gap: 3rem;
    align-items: flex-start;
}

.about-mission-text {
    flex: 1;
    min-width: 0;
}

.about-mission-text p + p {
    margin-top: 1.375rem;
}

.about-lead {
    margin-top: 0;
    margin-bottom: 1.25rem;
    font-family: var(--fbc-font-display);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.65;
    color: var(--fbc-gray-900);
}

.about-mission-badge-year {
    font-family: var(--fbc-font-display);
    font-size: 2.125rem;
    font-weight: 800;
    line-height: 1;
    color: var(--fbc-green);
}

.about-mission-badge-name {
    font-family: var(--fbc-font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.4;
}

@media (max-width: 680px) {
    .about-mission-inner {
        flex-direction: column;
    }

    .about-mission-photo-wrap {
        flex: none;
        width: 100%;
    }
}

/**
 * Mission photo (replaces the badge column when a photo is uploaded)
 */
.about-mission-photo-wrap {
    position: relative;
    flex: 0 0 300px;
    align-self: stretch; /* fills the height of the text column */
    min-height: 280px;
    overflow: hidden;
}

.about-mission-photo-wrap img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/**
 * Badge overlay — sits at the bottom of the photo (or placeholder)
 */
.about-mission-badge-overlay {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.875rem 1.25rem;
    color: var(--fbc-white);
    text-align: center;
    background-color: rgba(20, 78, 107, 0.9);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

/**
 * SECTION 2: PROGRAMS
 */
#about-programs {
    padding-top: 3rem;
    padding-bottom: 3.5rem;
    background-color: #f4f8fb;
}

.about-programs-intro {
    max-width: 680px;
    margin-top: -0.5rem;
    margin-bottom: 2rem;
}

.about-programs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

@media (max-width: 640px) {
    .about-programs-grid {
        grid-template-columns: 1fr;
    }
}

.about-program-card {
    padding: 1.5rem 1.375rem;
    background-color: var(--fbc-white);
    border: 1px solid var(--fbc-border);
    border-top: 3px solid var(--fbc-blue);
}

.about-program-icon {
    margin-bottom: 0.75rem;
    font-size: 1.375rem;
    color: var(--fbc-blue);
}

.about-program-heading {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-family: var(--fbc-font-display);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--fbc-gray-900);
}

.about-program-list {
    padding-left: 0;
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--fbc-text);
    list-style: none;
}

.about-program-list li {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.about-program-list li::before {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 18px;
    min-width: 18px;
    height: 18px;
    font-family: 'Font Awesome 6 Free';
    font-size: 0.75rem;
    font-weight: 900;
    color: var(--fbc-white);
    content: '\f0da'; /* fa-caret-right */
    background-color: var(--fbc-blue);
}

/**
 * SECTION 3: STAFF
 */
#about-staff {
    padding-top: 3rem;
    padding-bottom: 5rem;
}

.about-staff-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

@media (max-width: 640px) {
    .about-staff-grid {
        grid-template-columns: 1fr;
    }
}

.about-staff-card {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}

.about-staff-photo {
    flex: 0 0 80px;
    height: 80px;
    overflow: hidden;
    background-color: var(--fbc-photo-bg);
    border-radius: 50%;
}

.about-staff-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-staff-photo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: var(--fbc-blue);
}

.about-staff-info {
    flex: 1;
    min-width: 0;
}

.about-staff-name {
    margin-top: 0;
    margin-bottom: 0.25rem;
    font-family: var(--fbc-font-display);
    font-size: 1.1875rem;
    font-weight: 700;
    color: var(--fbc-gray-900);
}

.about-staff-title {
    margin-top: 0;
    margin-bottom: 0.625rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fbc-link);
}

.about-staff-bio {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--fbc-text);
}

/**
 * Admin-only notice shown when no staff rows exist yet
 */
.about-staff-empty-notice {
    padding: 0.875rem 1.125rem;
    margin: 0;
    font-size: 0.9375rem;
    color: var(--fbc-text);
    background-color: #fff8e5;
    border-left: 4px solid #f0b429;
}

/*------------------------------------------------------------------------------------------------*\
    #SECTION-HEADING
    Shared utility
    Reusable section heading style used across interior page templates: page-about.php,
    page-advisory-board.php, page-benefits.php, page-contact.php, page-history.php,
    page-programs.php and archive-newsletter.php.
\*------------------------------------------------------------------------------------------------*/

.section-heading {
    display: inline-block;
    padding-bottom: 0.75rem;
    margin-top: 0;
    margin-bottom: 1.75rem;
    font-family: var(--fbc-font-display);
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--fbc-blue-dark);
    border-bottom: 3px solid var(--fbc-green);
}

/*------------------------------------------------------------------------------------------------*\
    #BENEFITS-PAGE
    Template: page-benefits.php
\*------------------------------------------------------------------------------------------------*/

/**
 * Section 1: Intro
 */
#benefits-intro {
    padding-top: 3rem;
    padding-bottom: 0;
}

.benefits-intro-inner {
    display: flex;
    gap: 3rem;
    align-items: flex-start;
}

.benefits-intro-text {
    flex: 1;
    min-width: 0;
}

.benefits-intro-text p {
    margin-top: 0;
    font-family: var(--fbc-font-display);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.65;
    color: var(--fbc-gray-900);
}

.benefits-intro-photo {
    flex: 0 0 320px;
    overflow: hidden;
}

.benefits-intro-photo img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

@media (max-width: 680px) {
    .benefits-intro-inner {
        flex-direction: column;
    }

    .benefits-intro-photo {
        flex: none;
        width: 100%;
    }
}

/**
 * Section 2: Benefit cards
 */
#benefits-cards {
    padding-top: 2.5rem;
    padding-bottom: 6rem;
}

#benefits-cards .section-heading {
    border-bottom-color: transparent;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
}

@media (max-width: 640px) {
    .benefits-grid {
        grid-template-columns: 1fr;
    }
}

.benefit-card {
    padding: 1.5rem 2.25rem 1.0625rem;
    background-color: var(--fbc-white);
    border: 1px solid var(--fbc-border);
    border-top: 3px solid var(--fbc-blue);
}

.benefit-card-icon {
    margin-bottom: 0.375rem;
    font-size: 1.5rem;
    color: var(--fbc-green);
}

.benefit-card-heading {
    margin-top: 0.375rem;
    margin-bottom: 0;
    font-family: var(--fbc-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.8;
    color: var(--fbc-blue-dark);
}

.benefit-card-text {
    margin-top: 0;
    margin-bottom: 0.8125rem;
    font-size: 0.9375rem; /* 15px */
    line-height: 1.93333333; /* 29px */
    color: var(--fbc-text);
}

.benefit-card-text a {
    color: var(--fbc-link);
}

.benefit-card-text a:hover {
    text-decoration: underline;
}

/*------------------------------------------------------------------------------------------------*\
    #CTA-BAND
    Shared closing call-to-action band, rendered by template-parts/cta-band.php and used by the
    Programs and Benefits pages.
\*------------------------------------------------------------------------------------------------*/

/**
 * Styled by class, not by id: these were previously two byte-identical copies (#programs-cta and
 * #benefits-cta) precisely because an id can only appear once per page, so the markup could not be
 * shared. Anything using the partial picks this up for free.
 *
 * The optional background photo comes from the page's cta_background_photo ACF field; without one
 * the band falls back to the flat navy below.
 */
.cta-band {
    position: relative;
    padding-top: 4rem;
    padding-bottom: 4rem;
    background-color: var(--fbc-blue-dark);
}

.cta-band.has-bg-photo {
    background-position: center;
    background-size: cover;
}

/**
 * Darkening overlay so white text stays readable over any photo.
 */
.cta-band-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(2, 46, 68, 0.6); /* Blue Darkest, translucent */
}

.cta-band-inner {
    position: relative;
    z-index: 1;
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
}

.cta-band-heading {
    margin-top: 0;
    margin-bottom: 0.875rem;
    font-family: var(--fbc-font-display);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--fbc-white);
}

.cta-band-text {
    margin-bottom: 1.75rem;
    font-size: 1rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.8);
}

.btn-cta-band {
    display: inline-block;
    padding: 1rem 2rem;
    font-size: 1.0625rem;
    color: var(--fbc-ink);
    text-decoration: none;
    background-color: var(--fbc-green-on-dark);
    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}

/**
 * Filled green button on the dark navy band: lightens on hover, since there is no room to darken —
 * the same rule as the other buttons on dark grounds.
 */
.btn-cta-band:hover {
    color: var(--fbc-ink);
    background-color: var(--fbc-green-on-dark-hover);
}

/*------------------------------------------------------------------------------------------------*\
    #PROGRAMS-PAGE
    Template: page-programs.php
\*------------------------------------------------------------------------------------------------*/

/**
 * Section 1: Intro
 */
#programs-intro {
    padding-top: 3rem;
    padding-bottom: 0.5rem;
}

.programs-intro-text p {
    max-width: 760px;
    margin-top: 0;
    font-family: var(--fbc-font-display);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.65;
    color: var(--fbc-gray-900);
}

/**
 * Section 2: Topic clusters
 */
#programs-topics {
    padding-top: 2.5rem;
    padding-bottom: 4rem;
}

.programs-topics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
}

@media (max-width: 640px) {
    .programs-topics-grid {
        grid-template-columns: 1fr;
    }
}

.programs-topic-card {
    padding: 1.5rem 2.25rem 1.75rem;
    background-color: var(--fbc-white);
    border: 1px solid var(--fbc-border);
    border-top: 3px solid var(--fbc-blue);
}

.programs-topic-icon {
    margin-bottom: 0.375rem;
    font-size: 1.5rem;
    color: var(--fbc-green);
}

.programs-topic-heading {
    margin-top: 0.375rem;
    margin-bottom: 0.75rem;
    font-family: var(--fbc-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--fbc-blue-dark);
}

.programs-topic-list {
    padding-left: 1.125rem;
    margin: 0;
    list-style: disc;
}

.programs-topic-list li {
    margin-bottom: 0.4375rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--fbc-text);
}

.programs-topic-list li:last-child {
    margin-bottom: 0;
}

/**
 * Section 3: Photo band
 */
#programs-photos {
    padding-top: 0;
    padding-bottom: 4rem;
}

.programs-photos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
}

@media (max-width: 780px) {
    .programs-photos-grid {
        grid-template-columns: 1fr;
    }
}

.programs-photo {
    margin: 0;
}

.programs-photo-frame {
    overflow: hidden;
}

.programs-photo-frame img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.programs-photo figcaption {
    margin-top: 0.75rem;
    font-family: var(--fbc-font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--fbc-blue-dark);
    text-align: center;
}

/**
 * Section 4: Mission
 *
 * Full-bleed tinted band with a pull-quote style statement and a two-column checkmark list rather
 * than one long single-column list.
 */
#programs-mission {
    padding-top: 4rem;
    padding-bottom: 4rem;
    background-color: var(--fbc-bg-green); /* Background Green */
}

.programs-mission-inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.programs-mission-heading {
    margin-top: 0;
    margin-bottom: 1.25rem;
    font-family: var(--fbc-font-display);
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--fbc-blue-dark);
}

.programs-mission-statement {
    max-width: 700px;
    margin: 0 auto 2.5rem;
    font-family: var(--fbc-font-display);
    font-size: 1.4375rem;
    font-style: italic;
    font-weight: 500;
    line-height: 1.55;
    color: var(--fbc-gray-900);
}

/**
 * Two-column layout only — the checkmarks themselves come from the shared .has-checkmarks utility.
 * Multi-column rather than grid so each column stacks at its natural height instead of sharing a
 * stretched row.
 */
.programs-mission-checklist {
    columns: 2;
    column-gap: 2.5rem;
    margin: 0;
    text-align: left;
}

.programs-mission-checklist li {
    margin-bottom: 1rem;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}

@media (max-width: 680px) {
    .programs-mission-checklist {
        columns: 1;
    }
}

/*------------------------------------------------------------------------------------------------*\
    #PHOTO-PLACEHOLDERS
    Shared .is-placeholder state used by .about-mission-photo-wrap, .benefits-intro-photo, and
    .programs-photo-frame when no image has been uploaded yet. Gives a visible grey box so the
    layout is obvious during development.
\*------------------------------------------------------------------------------------------------*/

.about-mission-photo-wrap.is-placeholder,
.benefits-intro-photo.is-placeholder,
.programs-photo-frame.is-placeholder {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background-color: #dce8ef;
}

.about-mission-photo-wrap.is-placeholder i,
.benefits-intro-photo.is-placeholder i,
.programs-photo-frame.is-placeholder i {
    font-size: 2.25rem;
    color: var(--fbc-placeholder-ink);
}

.about-mission-photo-wrap.is-placeholder > span,
.benefits-intro-photo.is-placeholder > span,
.programs-photo-frame.is-placeholder > span {
    font-family: var(--fbc-font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--fbc-placeholder-ink);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/**
 * Keep placeholder tiles the same 4:3 shape the real photos will use, so the photo band doesn't
 * reflow once images are uploaded.
 */
.programs-photo-frame.is-placeholder {
    aspect-ratio: 4 / 3;
}

/*------------------------------------------------------------------------------------------------*\
    #FORMIDABLE-FORMS
    Every Formidable form on the site: Contact, event registration, and anything built later.
    The shared text field design here is used by the homepage login form too.
\*------------------------------------------------------------------------------------------------*/

/**
 * Until 2026-09-10 these rules were scoped to .contact-form-inner, so they never reached
 * /register/, which rendered in Formidable's defaults: rounded fields, Lora labels, and a #F04438
 * required marker at 3.76:1. On Contact itself the error text lost a specificity contest and
 * painted the same failing red. Found by measuring the rendered page, not by reading this file.
 *
 * Two mechanisms, in order of preference:
 *
 * 1. Formidable's own variables. Almost all of its styling reads custom properties declared on
 *    .with_frm_style (0,1,0). Redeclaring them on .frm_forms.with_frm_style (0,2,0) retunes every
 *    rule that reads them, with no specificity contest at all.
 *
 * 2. Selector overrides, only where Formidable hardcodes a value instead of reading a variable.
 *    Each is written to outrank Formidable's rule outright; a tie would leave it at the mercy of
 *    enqueue order.
 *
 * The honeypot and the submit button were already global.
 */

/**
 * Text fields — one design, shared by the homepage login form and every Formidable form (Contact,
 * event registration, anything added later).
 *
 * Two selector families because each has something different to beat. #homepage-login-form is
 * id-scoped to outrank WordPress's login form styles. Formidable fields carry
 * .frm_forms.frm_style_formidable-style.with_frm_style, reaching (0,4,1): above every plain field
 * rule Formidable ships, not merely tied with it.
 *
 * The Formidable focus state is NOT here. Formidable's focus rule is (0,7,1), so ours is further
 * down this section.
 *
 * <select> is deliberately absent: appearance:none would strip its arrow. Selects should still pick
 * up border, radius and colours through Formidable's variables (no form uses one yet, so that is
 * unverified).
 */
#homepage-login-form input[type='text'],
#homepage-login-form input[type='password'],
.frm_forms.frm_style_formidable-style.with_frm_style input[type='text'],
.frm_forms.frm_style_formidable-style.with_frm_style input[type='email'],
.frm_forms.frm_style_formidable-style.with_frm_style input[type='tel'],
.frm_forms.frm_style_formidable-style.with_frm_style input[type='url'],
.frm_forms.frm_style_formidable-style.with_frm_style input[type='number'],
.frm_forms.frm_style_formidable-style.with_frm_style textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-family: var(--fbc-font-body);
    font-size: 0.9375rem;
    color: var(--fbc-gray-900);
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--fbc-white);
    border: 1px solid var(--fbc-field-border);
    border-radius: 0;
    transition:
        border-color 0.15s ease,
        outline 0.15s ease;
}

.frm_forms.frm_style_formidable-style.with_frm_style textarea {
    min-height: 140px;
    resize: vertical;
}

/**
 * Formidable's spam honeypot, hidden.
 *
 * Formidable renders a decoy text input labelled "If you are human, leave this field blank" and
 * treats any submission that fills it as spam. Nothing in Formidable's own stylesheet hides it, so
 * it was rendering as a visible sixth field on the Contact form and on the event registration form.
 *
 * Positioned off-screen rather than display:none on purpose: a screen reader user still hears the
 * instruction and knows to skip it, so they don't get flagged as spam. display:none would hide the
 * warning along with the field.
 *
 * Global, not scoped to .contact-form-inner — it applies to every Formidable form on the site.
 */
.frm_verify {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.frm_forms.with_frm_style {
    /**
     * Labels
     */
    --font-size: 0.9375rem;
    --label-color: var(--fbc-gray-900);
    --required-color: var(--fbc-error);
    --description-color: var(--fbc-gray-600); /* 5.74:1 */

    /**
     * Fields
     */
    --font: var(--fbc-font-body);
    --field-font-size: 0.9375rem;
    --field-pad: 0.625rem 0.875rem;
    --field-margin: 1.25rem;
    --text-color: var(--fbc-gray-900);
    --text-color-disabled: var(--fbc-gray-600); /* placeholder text, 5.74:1 */
    --text-color-error: var(--fbc-gray-900);
    --check-label-color: var(--fbc-gray-900);
    --bg-color: var(--fbc-white);
    --bg-color-active: var(--fbc-white);
    --bg-color-error: var(--fbc-white);
    --border-color: var(--fbc-field-border);
    --border-color-active: var(--fbc-focus);
    --border-color-error: var(--fbc-error); /* also colours .frm_error text */
    --border-radius: 0;
}

/**
 * Label typeface and weight. Formidable has no variable for the label typeface, and its --weight
 * also sets error text. (0,3,0) over its (0,2,0).
 */
.frm_forms.with_frm_style .frm_primary_label {
    display: block;
    margin-bottom: 0.375rem;
    font-family: var(--fbc-font-display);
    font-weight: 600;
}

/**
 * Formidable submit buttons, on every form — contact, registration, and anything added later.
 * Matches .btn-event-more: filled blue, darkens on hover, no lift.
 *
 * Selector is deliberately long. Formidable ships
 * `.frm_style_formidable-style.with_frm_style .frm_submit button` at specificity (0,3,1), which
 * outranked the theme's plainer `.contact-form-inner .frm_button_submit` (0,2,0) and had been
 * painting these buttons its default #4199FD — 2.92:1 on white, failing both the label and the
 * control boundary. The old rule looked correct in the stylesheet, which is why it went unnoticed
 * through the CF7 migration; it never actually applied. Adding .frm_style_formidable-style takes us
 * to (0,4,1), above Formidable's own rule rather than merely tied with it — a tie would leave this
 * at the mercy of enqueue order.
 *
 * Both element forms are listed because Formidable renders <button> on some forms and <input
 * type="submit"> on others.
 */
.frm_style_formidable-style.with_frm_style .frm_submit button.frm_button_submit,
.frm_style_formidable-style.with_frm_style .frm_submit input[type='submit'] {
    display: inline-block;
    padding: 0.875rem 2rem;
    font-family: var(--fbc-font-display);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    color: var(--fbc-white);
    cursor: pointer;
    background-color: var(--fbc-blue-fill);
    border: none;
    border-radius: 0;
    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}

.frm_style_formidable-style.with_frm_style .frm_submit button.frm_button_submit:hover,
.frm_style_formidable-style.with_frm_style .frm_submit input[type='submit']:hover {
    color: var(--fbc-white);
    background-color: var(--fbc-blue-fill-hover);
}

/**
 * Field descriptions ("First Name" under a name field) and inline errors. Formidable sets both in
 * one hardcoded rule, 12px #667085, at (0,3,1) for descriptions and (0,3,0) for errors. One more
 * class here clears both.
 */
.frm_forms.frm_style_formidable-style.with_frm_style div.frm_description {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: var(--fbc-gray-600);
}

.frm_forms.frm_style_formidable-style.with_frm_style .frm_error {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--fbc-error);
}

/**
 * A field in error. Formidable's own rule,
 * .frm_style_formidable-style.with_frm_style .frm_blank_field input[type="text"], is (0,4,1): it
 * only ties with the shared text field rule above, which loads later and wins, leaving an errored
 * field grey. (0,6,1) here. The focus rule below is heavier still, so a field being corrected shows
 * the focus ring.
 */
.frm_forms.frm_style_formidable-style.with_frm_style
    .frm_blank_field
    :is(input:not([type='radio']):not([type='checkbox']), textarea, select) {
    border-color: var(--fbc-error);
}

/**
 * Text field focus. Formidable's rule is
 * .frm_style_formidable-style.with_frm_style .form-field
 * input:not([type="file"]):not([type="range"]):not([readonly]):focus
 * at (0,7,1), with a hardcoded pale-blue glow. Its border already follows --border-color-active;
 * this adds the outline and removes the glow.
 *
 * :is() takes the specificity of its heaviest argument, so textarea and select reach the same
 * (0,10,1) as the input. Radios and checkboxes are excluded; their ring is handled below.
 */
.frm_forms.frm_style_formidable-style.with_frm_style
    .form-field
    :is(
        input:not([type='file']):not([type='range']):not([readonly]):not([type='radio']):not(
                [type='checkbox']
            ),
        textarea,
        select
    ):focus {
    outline: 2px solid var(--fbc-focus);
    outline-offset: 0;
    border-color: var(--fbc-focus);
    box-shadow: none;
}

/**
 * Radio buttons and checkboxes. Formidable draws its own 16px ring (appearance:none). The ring is
 * the whole control, so it needs 3:1 against the page (WCAG 1.4.11), but it reads --border-color,
 * the same variable text fields use; at Formidable's default that was a light grey at 1.47:1.
 *
 * Redeclaring the variable on the input itself darkens the ring everywhere Formidable reads it,
 * including its :not(:checked):focus { border-color: var(--border-color) !important }, which no
 * selector of ours could otherwise reach.
 */
.frm_forms.with_frm_style input[type='radio'],
.frm_forms.with_frm_style input[type='checkbox'] {
    --border-color: var(--fbc-control-border);
}

.frm_forms.frm_style_formidable-style.with_frm_style .frm_radio label,
.frm_forms.frm_style_formidable-style.with_frm_style .frm_checkbox label {
    font-size: 0.9375rem;
}

/**
 * Formidable's radio/checkbox focus is a 40%-opacity light-blue box-shadow marked !important, too
 * faint to register as a focus indicator. Replace it with the outline text fields use. The
 * !important is the only way past Formidable's own.
 */
.frm_forms.frm_style_formidable-style.with_frm_style input[type='radio']:focus,
.frm_forms.frm_style_formidable-style.with_frm_style input[type='checkbox']:focus {
    box-shadow: none !important;
}

.frm_forms.frm_style_formidable-style.with_frm_style input[type='radio']:focus-visible,
.frm_forms.frm_style_formidable-style.with_frm_style input[type='checkbox']:focus-visible {
    outline: 2px solid var(--fbc-focus);
    outline-offset: 2px;
}

/**
 * Form-level error summary
 */
.frm_forms.frm_style_formidable-style.with_frm_style .frm_error_style {
    padding: 0.875rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.9375rem;
    color: var(--fbc-error);
    background-color: #fdf3f2;
    border: 1px solid var(--fbc-error);
}

/**
 * Success message after submit
 */
.frm_forms.frm_style_formidable-style.with_frm_style .frm_message {
    padding: 1rem;
    font-size: 1rem;
    color: var(--fbc-green-deep);
    background-color: var(--fbc-bg-green);
    border: 1px solid var(--fbc-green);
}

/**
 * Formidable colours the paragraph inside the message directly (#468847, 4.00:1 on the green tint),
 * so the box's colour above never reached the text. Inherit it instead.
 */
.frm_forms.frm_style_formidable-style.with_frm_style .frm_message p {
    color: inherit;
}

.frm_forms.frm_style_formidable-style.with_frm_style .frm_message p:last-child {
    margin-bottom: 0;
}

/*------------------------------------------------------------------------------------------------*\
    #CONTACT-PAGE
    Template: page-contact.php
\*------------------------------------------------------------------------------------------------*/

/**
 * Layout
 */
#contact-main {
    padding-top: 3.5rem;
    padding-bottom: 4rem;
}

.contact-layout {
    display: flex;
    gap: 4rem;
    align-items: flex-start;
}

@media (max-width: 768px) {
    /**
     * 1. The desktop row uses flex-start so the columns keep their own heights. Stacked, flex-start
     *    stops the columns stretching across: the form shrank to its content, 206px of a 342px
     *    phone column.
     */
    .contact-layout {
        flex-direction: column;
        gap: 2.5rem;
        align-items: stretch; /* [1] */
    }
}

/**
 * Left column: contact info
 */
.contact-info {
    flex: 1;
    min-width: 0;
}

.contact-intro {
    margin-top: -0.5rem;
    margin-bottom: 2rem;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--fbc-text);
}

.contact-info-blocks {
    display: flex;
    flex-direction: column;
    gap: 1.375rem;
    margin-bottom: 2.5rem;
}

.contact-info-block {
    display: flex;
    gap: 1.125rem;
    align-items: flex-start;
}

/**
 * Coloured icon square
 */
.contact-info-icon {
    display: flex;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    height: 48px;
    font-size: 1.0625rem;
    color: var(--fbc-white);
    background-color: var(--fbc-blue);
}

/**
 * Text
 */
.contact-info-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-top: 0.25rem;
}

.contact-info-label {
    font-family: var(--fbc-font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    color: var(--fbc-text-meta);
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.contact-info-value {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--fbc-text);
}

.contact-info-value a {
    color: var(--fbc-link);
}

.contact-info-value a:hover {
    text-decoration: underline;
}

.contact-info-hours {
    font-size: 0.8125rem;
    font-style: italic;
    color: var(--fbc-text-meta);
}

/**
 * Social links
 */
.contact-social-wrap {
    padding-top: 1.5rem;
    border-top: 1px solid var(--fbc-border);
}

.contact-social-label {
    margin-top: 0;
    margin-bottom: 0.875rem;
    font-family: var(--fbc-font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--fbc-text-meta);
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.contact-social {
    display: flex;
    gap: 0.625rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.contact-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    font-size: 0.9375rem;
    color: var(--fbc-white);
    background-color: var(--fbc-blue-dark);
    transition: background-color 0.15s ease;
}

.contact-social a:hover {
    color: var(--fbc-white);
    background-color: var(--fbc-green-fill);
}

/**
 * Right column: contact form
 */
.contact-form-wrap {
    flex: 0 0 46%;
}

/**
 * Contact page layout only: the form fills its column.
 */
.contact-form-inner .frm_forms,
.contact-form-inner .frm_form_fields {
    max-width: 100%;
}

/**
 * Google Map
 */
#contact-map {
    display: block;
    width: 100%;
    height: 420px;
    margin-top: 0;
    overflow: hidden;
}

#contact-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/*------------------------------------------------------------------------------------------------*\
    #HISTORY-PAGE
    Template: page-history.php
\*------------------------------------------------------------------------------------------------*/

/**
 * Section 1: Intro
 */
#history-intro {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}

.history-intro-inner {
    max-width: 720px;
}

/**
 * Section 2: Timeline
 */
#history-timeline {
    padding-top: 3rem;
    padding-bottom: 4rem;
    background-color: #f4f6f8;
}

/**
 * Vertical center line
 */
.timeline {
    position: relative;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.timeline::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    content: '';
    background-color: var(--fbc-blue-dark);
    transform: translateX(-50%);
}

/**
 * Each row: three columns — left panel / marker / right panel
 */
.timeline-item {
    display: grid;
    grid-template-columns: 1fr 6rem 1fr;
    align-items: start;
    margin-bottom: 2.5rem;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

/**
 * Panels
 */
.timeline-panel {
    padding-top: 0.25rem;
}

.timeline-panel--left {
    padding-right: 2rem;
    text-align: right;
}

.timeline-panel--right {
    padding-left: 2rem;
    text-align: left;
}

/**
 * Center marker: dot + year badge
 */
.timeline-marker {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0.5rem;
}

.timeline-dot {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    background-color: var(--fbc-green);
    border: 3px solid var(--fbc-blue-dark);
    border-radius: 50%;
}

.timeline-year {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    margin-top: 0.5rem;
    font-family: var(--fbc-font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--fbc-white);
    white-space: nowrap;
    background-color: var(--fbc-blue-dark);
    border-radius: 4px;
}

/**
 * Content card
 */
.timeline-card {
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    padding: 1.5rem 1.5rem 1.0625rem;
    background-color: var(--fbc-white);
    border: 1px solid #e0e6ea;
    border-radius: 6px;
}

.timeline-panel--left .timeline-card {
    text-align: left;
}

.timeline-card-icon {
    margin-bottom: 0.375rem;
    font-size: 1.5rem;
    color: var(--fbc-green);
}

.timeline-card-heading {
    margin-top: 0.375rem; /* 6px */
    margin-bottom: 0;
    font-family: var(--fbc-font-display);
    font-size: 1.25rem; /* 20px */
    font-weight: 700;
    line-height: 1.8; /* 36px */
    color: var(--fbc-blue-dark);
}

.timeline-card-body {
    margin-top: 0;
    margin-bottom: 0.8125rem;
    font-size: 0.9375rem; /* 15px */
    line-height: 1.93333333; /* 29px */
    color: var(--fbc-text);
}

/**
 * Timeline — responsive (mobile: single column, line on left)
 */
@media (max-width: 700px) {
    .timeline::before {
        left: 1.25rem;
        transform: none;
    }

    .timeline-item {
        grid-template-rows: auto auto;
        grid-template-columns: 2.5rem 1fr;
    }

    .timeline-panel--left,
    .timeline-panel--right {
        grid-row: 2;
        grid-column: 2;
        padding-right: 0;
        padding-left: 1rem;
        text-align: left;
    }

    /**
     * Hide whichever panel is empty on mobile
     */
    .timeline-panel--left:empty,
    .timeline-panel--right:empty {
        display: none;
    }

    .timeline-marker {
        grid-row: 1 / 3;
        grid-column: 1;
        align-items: center;
        padding-top: 0;
    }

    .timeline-year {
        padding: 0.4rem 0.2rem;
        margin-top: 0.75rem;
        font-size: 0.6875rem;
        writing-mode: vertical-rl;
        transform: rotate(180deg);
    }

    .timeline-card {
        margin-bottom: 1rem;
    }
}

/*------------------------------------------------------------------------------------------------*\
    #NEWSLETTERS-ARCHIVE
    Template: archive-newsletter.php
    Fixed, capped layout: Tier 1 featured grid (4 most recent) + Tier 2 past-issues list (next 25).
    No filtering, no pagination.
\*------------------------------------------------------------------------------------------------*/

/**
 * Tier 1: Featured grid
 */
#newsletters-featured {
    padding-top: 3.5rem;
    padding-bottom: 2.5rem;
}

.newsletter-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.75rem;
}

@media (max-width: 900px) {
    .newsletter-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .newsletter-grid {
        grid-template-columns: 1fr;
    }
}

.newsletter-card {
    display: flex;
    flex-direction: column;
    background-color: var(--fbc-white);
}

.newsletter-card--new .newsletter-card-body {
    background-color: var(--fbc-bg-green);
}

.newsletter-card-thumb {
    position: relative;
    aspect-ratio: 952 / 1232;
    overflow: hidden;
    outline: 1px solid var(--fbc-border);
    outline-offset: -1px;
    background-color: #dce8ef;
    transition:
        outline-color 0.2s ease,
        outline-width 0.2s ease,
        outline-offset 0.2s ease;
}

.newsletter-card-thumb:hover {
    outline: 4px solid var(--fbc-blue);
    outline-offset: -4px;
}

.newsletter-card-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.newsletter-card-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.newsletter-card-thumb-placeholder i {
    font-size: 2.25rem;
    color: var(--fbc-placeholder-ink);
}

.newsletter-badge-new {
    position: absolute;
    top: 1.1rem;
    left: -2.75rem;
    width: 10rem;
    padding: 0.3rem 0;
    font-family: var(--fbc-font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--fbc-ink);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    background-color: var(--fbc-green);
    transform: rotate(-45deg);
}

.newsletter-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.125rem 1.25rem 1.375rem;
    margin-top: 1.5rem;
    text-align: center;
}

.newsletter-card-title {
    margin-top: 0;
    margin-bottom: 0.875rem;
    font-family: var(--fbc-font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--fbc-blue-dark);
}

.newsletter-card-actions {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding-top: 1rem;
    margin-top: auto;
}

.btn-newsletter-primary {
    display: inline-block;
    padding: 0.625rem 1rem;
    font-size: 0.9375rem;
    color: var(--fbc-white);
    text-align: center;
    background-color: var(--fbc-blue-fill);
    transition: background-color 0.15s ease;
}

.btn-newsletter-primary:hover {
    color: var(--fbc-white);
    background-color: var(--fbc-blue-fill-hover);
}

.newsletter-card--new .btn-newsletter-primary {
    background-color: var(--fbc-green-fill);
}

.newsletter-card--new .btn-newsletter-primary:hover {
    background-color: var(--fbc-green-fill-hover);
}

.btn-newsletter-secondary {
    display: inline-block;
    padding: 0.625rem 1rem;
    font-size: 0.9375rem;
    color: var(--fbc-blue-fill);
    text-align: center;
    background-color: transparent;
    border: 1px solid var(--fbc-blue-fill);
    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}

.newsletter-card--new .btn-newsletter-secondary {
    color: var(--fbc-green-fill);
    border-color: var(--fbc-green-fill);
}

.newsletter-card--new .btn-newsletter-secondary:hover {
    color: var(--fbc-white);
    background-color: var(--fbc-green-fill);
}

.btn-newsletter-secondary:hover {
    color: var(--fbc-white);
    background-color: var(--fbc-blue-fill);
}

/**
 * Tier 2: Past issues list
 */
#newsletters-past {
    padding-top: 1rem;
    padding-bottom: 5rem;
}

.newsletter-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.newsletter-list-item {
    display: flex;
    gap: 1.5rem;
    align-items: baseline;
    justify-content: space-between;
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--fbc-border);
}

.newsletter-list-item:first-child {
    padding-top: 0;
}

.newsletter-list-title {
    font-family: var(--fbc-font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--fbc-gray-900);
}

.newsletter-list-link {
    flex-shrink: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fbc-link);
}

.newsletter-list-link:hover {
    text-decoration: underline;
}

.newsletter-list-unavailable {
    flex-shrink: 0;
    font-size: 0.875rem;
    color: var(--fbc-text-meta);
}

/**
 * Empty state
 */
#newsletters-empty {
    padding-top: 3rem;
    padding-bottom: 6rem;
}

.newsletters-empty-message {
    color: var(--fbc-text);
}

/*------------------------------------------------------------------------------------------------*\
    #EVENT-CONTENT-PATTERNS
    Speaker bios, takeaways, session blocks. Used by the "FBCH" block patterns
    (patterns/event-*.php) inside .entry-content on single-event.php.
\*------------------------------------------------------------------------------------------------*/

.event-speaker {
    gap: 1.5rem;
    align-items: flex-start;
    margin-bottom: 1.25rem;
}

.event-speaker-photo {
    flex: 0 0 140px;
    width: 140px;
    height: 140px;
    overflow: hidden;
    background-color: var(--fbc-photo-bg);
    border-radius: 50%;
}

.event-speaker-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.event-speaker-info {
    flex: 1;
    min-width: 0;
}

.entry-content .event-speaker-info p:last-child {
    margin-bottom: 0;
}

.entry-content .event-speaker-name {
    margin-top: 0;
    margin-bottom: 0.25rem;
    font-family: var(--fbc-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--fbc-gray-900);
}

.entry-content .event-speaker-title {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--fbc-link);
}

@media (max-width: 680px) {
    .event-speaker {
        flex-wrap: wrap;
    }

    .event-speaker-photo {
        flex-basis: 100%;
        width: 100px;
        height: 100px;
    }
}

.event-session-divider {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
}

.event-session-photo {
    width: 200px;
    margin: 0 1.5rem 1rem 0;
    border-radius: 4px;
}