/*
Theme Name:      olytheme-child
Theme URI:       http://childtheme-generator.com/
Description:     starter-child is a child theme of OlyWeb, created by ChildTheme-Generator.com
Author:          Oly
Author URI:      http://childtheme-generator.com/
Template:        olytheme
Version:         1.0.0
Text Domain:     olytheme-child
*/

/*incase of longer menus add wrapping*/
/*.navbar-expand-lg .navbar-nav {
    flex-wrap: wrap;
    justify-content: flex-end !important;
} */

/* ================================================================
   CKS EXTENDED PALETTE + FONT VARIABLES
   ================================================================ */
:root {
    --font-display: "Plus Jakarta Sans", sans-serif;
    --font-body:    "Source Sans 3", sans-serif;

    /* Royal Blue */
    --cks-blue-50:  #EDF1FB;
    --cks-blue-100: #D8E0F6;
    --cks-blue-200: #B3C2EC;
    --cks-blue-300: #88A0DF;
    --cks-blue-400: #5A77CB;
    --cks-blue-500: #3352AF;
    --cks-blue-600: #1C3A9C;
    --cks-blue-700: #0D2789;  /* brand */
    --cks-blue-800: #0B1E68;
    --cks-blue-900: #081546;

    /* Crown Gold */
    --cks-gold-50:  #FEF5E6;
    --cks-gold-100: #FCE8C4;
    --cks-gold-200: #F9D38B;
    --cks-gold-300: #F5B952;
    --cks-gold-400: #F2A62B;
    --cks-gold-500: #F0940C;  /* brand */
    --cks-gold-600: #CF7D07;
    --cks-gold-700: #A66304;
    --cks-gold-800: #7C4A04;
    --cks-gold-900: #523103;

    /* Laurel Grey */
    --cks-grey-50:  #F6F8FA;
    --cks-grey-100: #EBEEF2;
    --cks-grey-200: #D9DEE4;
    --cks-grey-300: #BFC7D0;
    --cks-grey-400: #A6AFBA;
    --cks-grey-500: #8C98A4;  /* brand */
    --cks-grey-600: #6E7A86;
    --cks-grey-700: #535E69;
    --cks-grey-800: #3B444D;
    --cks-grey-900: #242B32;

    /* Aliases — existing rules keep working */
    --blue-50:  var(--cks-blue-50);
    --blue-600: var(--cks-blue-600);
    --blue-700: var(--cks-blue-700);
    --blue-800: var(--cks-blue-800);
    --blue-900: var(--cks-blue-900);
    --gold-50:  var(--cks-gold-50);
    --gold-300: var(--cks-gold-300);
    --gold-400: var(--cks-gold-400);
    --gold-500: var(--cks-gold-500);
    --gold-800: var(--cks-gold-800);
    --grey-100: var(--cks-grey-100);
    --grey-300: var(--cks-grey-300);
    --grey-600: var(--cks-grey-600);
    --grey-700: var(--cks-grey-700);
    --ink:      var(--cks-grey-900);

    /* Heading rhythm (top / bottom) — shared by direct-page headings
       and pattern section titles so the two never drift apart. */
    --heading-gap-h2-top: 48px;
    --heading-gap-h2-bottom: 52px;
    --heading-gap-h3-top: 36px;
    --heading-gap-h3-bottom: 32px;
    --heading-gap-h4-top: 28px;
    --heading-gap-h4-bottom: 16px;

    /* Gap after a block paragraph in page/post content, so stacked paragraphs
       read as separate blocks. Pattern paragraph rules override where needed. */
    --heading-gap-p-bottom: 16px;
}

/* Parent theme (olytheme/style.css) sets a:visited to the browser-default
   magenta #800080, which clashes with the navy/gold brand palette. Rather
   than chasing every button/nav class with :not(), scope this to page/post
   content areas only -- the same wrapper classes the inline-link color rule
   below already uses. Nav menus (header, footer, mobile drawer) live
   outside these wrappers entirely, so they're excluded automatically.
   Buttons are still excluded explicitly since a button block can appear
   inside content. This loads after the parent's stylesheets (see
   functions.php enqueue order), so it wins the cascade without !important. */
.entry-content a:visited:not(.wp-block-button__link):not(.wp-block-file__button):not(.btn):not(.btn-gold):not(.btn-blue):not(.btn-ghost):not(.btn-dark):not(.btn-primary):not(.btn-secondary):not(.page-nav-link),
.page-content a:visited:not(.wp-block-button__link):not(.wp-block-file__button):not(.btn):not(.btn-gold):not(.btn-blue):not(.btn-ghost):not(.btn-dark):not(.btn-primary):not(.btn-secondary):not(.page-nav-link),
.editor-styles-wrapper a:visited:not(.wp-block-button__link):not(.wp-block-file__button):not(.btn):not(.btn-gold):not(.btn-blue):not(.btn-ghost):not(.btn-dark):not(.btn-primary):not(.btn-secondary):not(.page-nav-link) {
    color: var(--blue-800);
}

/* ================================================================
   TYPOGRAPHY
   ================================================================ */
body {
    font-family: var(--font-body) !important;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
}

h1, h2, h3, h4, h5, h6,
.site-title,
.site-desc {
    font-family: var(--font-display);
}

h1, h2, h3, h4, h5, h6 {
    color: #0B1E68;
    text-wrap: balance;
}
h1, h2, h3 {
    letter-spacing: -0.01em;
    line-height: 1.2;
}
p {
    text-wrap: pretty;
}

/* Inline text links */
.entry-content a:not(.wp-block-button__link):not(.wp-block-post-excerpt__more-link),
.page-content a:not(.wp-block-button__link):not(.wp-block-post-excerpt__more-link),
.editor-styles-wrapper a:not(.wp-block-button__link):not(.wp-block-post-excerpt__more-link) {
    color: var(--blue-600);
    text-decoration: underline !important;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    text-decoration-skip-ink: auto;
}
.entry-content a:not(.wp-block-post-excerpt__more-link):hover,
.page-content a:not(.wp-block-post-excerpt__more-link):hover {
    text-decoration: underline !important;
}

/* ================================================================
   TYPE SCALE UTILITIES
   ================================================================ */
.h-hero {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(40px, 4.6vw, 66px);
    line-height: 1.06;
    letter-spacing: -0.015em;
    text-wrap: balance;
}
.h-kicker {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(20px, 1.9vw, 27px);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #EBEEF2;
}
.h1 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 38px;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: #0B1E68;
}
.h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 24px;
    color: #0B1E68;
    margin-bottom: 8px;
}
.h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 34px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #0B1E68;
}
.lead {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.45;
    color: #535E69;
    max-width: 70ch;
}
.body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.6;
    color: #242B32;
}
.caption {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 15px;
    color: #535E69;
}
.eyebrow {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #6E7A86;
}
.nav {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #0B1E68;
}
.utility {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #EBEEF2;
}

/* ================================================================
   GUTENBERG CONTENT — AUTO-APPLY TYPOGRAPHY
   Targets .entry-content / .page-content so these rules never
   touch the nav, header, or any structural component.
   ================================================================ */

/* Paragraphs */
.entry-content p,
.entry-content .wp-block-paragraph,
.page-content p,
.page-content .wp-block-paragraph {
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.6;
    color: #242B32;
    text-wrap: pretty;
}

/* All headings — shared base */
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6,
.page-content h1,  .page-content h2,  .page-content h3,
.page-content h4,  .page-content h5,  .page-content h6 {
    font-family: var(--font-display);
    color: #0B1E68;
    text-wrap: balance;
    margin-bottom: 8px;
}

/* H1 */
.entry-content h1, .page-content h1 {
    font-weight: 800; line-height: 1.06; letter-spacing: -.015em;
    font-size: var(--wp--preset--font-size--huge, clamp(40px, 4.6vw, 60px));
}
/* H2 */
.entry-content h2, .page-content h2 {
    font-weight: 700; line-height: 1.15; letter-spacing: -.01em;
    font-size: var(--wp--preset--font-size--xx-large, clamp(30px, 3.2vw, 42px));
}
/* H3 */
.entry-content h3, .page-content h3 {
    font-weight: 700; line-height: 1.2; letter-spacing: -.01em;
    font-size: var(--wp--preset--font-size--x-large, clamp(23px, 2.2vw, 28px));
}
/* H4 */
.entry-content h4, .page-content h4 {
    font-weight: 700; line-height: 1.25;
    font-size: var(--wp--preset--font-size--large, 20px);
}
/* H5 */
.entry-content h5, .page-content h5 {
    font-weight: 600; line-height: 1.3;
    font-size: var(--wp--preset--font-size--medium, 18px);
}
/* H6 */
.entry-content h6, .page-content h6 {
    font-weight: 600; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase;
    font-size: var(--wp--preset--font-size--small, 15px);
}

/* Paragraph rhythm — a consistent gap after every block paragraph in content,
   so stacked paragraphs read as separate blocks instead of run-on lines, and a
   paragraph before a list/heading/image is separated too. Deliberately low
   specificity (0,2,0) and early in the file so pattern paragraph rules further
   down (card grids, .cks-intro, .cks-contact-info, etc.) still win and keep
   their own spacing; is-style-cks-* paragraph variants opt out via :not().
   Only margin-bottom is set — `p` already has margin-top:0 from Bootstrap. */
.wp-block-paragraph:not([class*="is-style-cks"]) {
    margin-bottom: var(--heading-gap-p-bottom);
}

/* ================================================================
   CONTENT WIDTH CONSTRAINT
   contentSize 760px / wideSize 1340px — mirrors theme.json.
   Direct children default to prose width; alignment classes break out.
   ================================================================ */
.entry-content > *,
.page-content > * {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
.entry-content > .alignwide,
.page-content > .alignwide,
#footer-affiliate > .alignwide,
#footer-bottom > .alignwide {
    width: auto !important;
    max-width: 1340px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.entry-content > .alignfull,
.page-content > .alignfull,
#footer-affiliate.alignfull,
#footer-bottom.alignfull {
    max-width: none;
    width: 100vw;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}

/* OlyWeb Stats Block (legacy Meta Box block, inc/metabox-blocks/block-stats.php)
   predates this content-width system. Its outer #stats-block wrapper carries a
   .wide-div class meant to full-bleed the navy background via style-theme.css's
   bare ".wide-div { margin: calc(50% - 50vw) }" rule, but that ties in
   specificity with ".entry-content > *" above, so whether it actually wins
   depends on stylesheet load order rather than being guaranteed -- and there's
   no alignment control on this block for an editor to fix it from the toolbar
   either way. Scoping by ID here makes it unconditional, matching "always
   full width, not an option." Without also reining in the inner
   .wp-block-columns.wide-div, the same breakout would apply a second time
   inside it and spread the stat items edge-to-edge across the full viewport,
   so that's constrained back to a centered row at the same width used by
   other full-width tinted/navy bands (.cks-why, .cks-highlights). */
.entry-content > #stats-block,
.page-content > #stats-block {
    max-width: none;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
#stats-block .wp-block-columns {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 26px;
    padding-right: 26px;
    box-sizing: border-box;
    flex-wrap: wrap;
    padding-bottom: 0;
    padding-top: 0;
    margin-bottom: 0;
}

/* Block editor only: the parent theme's bare .wide-div/.alignwide/.alignfull
   rule (style-theme.css) full-bleeds with calc(50% - 50vw). On the frontend
   the rules above always win (they're more specific), but inside the editor
   iframe there's no .entry-content/.page-content wrapper for those rules to
   match, so the parent's vw-based rule is the only one left -- and the
   editor iframe's 100vw doesn't line up with its own canvas width, clipping
   full-width blocks a few pixels past the left edge. Zero it out only in
   the editor; the canvas already constrains full/wide blocks visually
   without needing a viewport-relative breakout. */
.editor-styles-wrapper .alignwide,
.editor-styles-wrapper .alignfull {
    margin-left: 0;
    margin-right: 0;
}

/* ================================================================
   VERTICAL RHYTHM / SPACING
   Utility classes only — no bare element selectors that could
   affect nav, slider, or other structural components.
   ================================================================ */


/* Eyebrow / gold tick → heading gap */
.eyebrow,
.gold-tick { margin-bottom: 14px; }

/* Heading → supporting text */
.h1,
.h2          { margin-bottom: 8px; }
.lead        { margin-bottom: 28px; }

/* Stacked paragraphs */
.body + .body { margin-top: 1em; }

/* Hero stack */
.h-hero + .h-hero { margin-top: 8px; }
.h-kicker         { margin-top: 26px; }

/* Eyebrow → next element (type card pattern) */
.eyebrow + * { margin-top: 14px; }


/*Theme Colors for Admin Color Pallet*/
.has-primary-background-color {
    background-color: var(--primary);
}
.has-primary-color {
    color: var(--primary);
}
.has-secondary-background-color {
    background-color: var(--secondary);
}
.has-secondary-color {
    color: var(--secondary);
}
.has-grey-background-color {
    background-color: var(--gold);
}
.has-grey-color {
    color: var(--gold);
}
.has-light-blue-background-color {
    background-color: var(--light-blue);
}
.has-light-blue-color {
    color: var(--light-blue);
}
.has-light-gold-background-color {
    background-color: var(--light-gold);
}
.has-light-gold-color {
    color: var(--light-gold);
}
.has-light-grey-background-color {
    background-color: var(--light-grey);
}
.has-light-grey-color {
    color: var(--light-grey);
}
.has-white-background-color {
    background-color: #ffffff;
}
.has-white-color {
    color: #ffffff;
}
.has-black-background-color {
    background-color: #000000;
}
.has-black-color {
    color: #000000;
}

/* Bootstrap dark utility overrides — dark utility classes share the old secondary
   hex value so they got swapped to gold; restore them to the primary blue. */
.bg-dark { background-color: #0D2789 !important; }
.text-dark { color: #0D2789 !important; }
a.text-dark:hover, a.text-dark:focus { color: #081a5e !important; }
.btn-dark {
    background-color: #0D2789 !important;
    border-color: #0D2789 !important;
    color: #fff !important;
}
.btn-dark:hover, .btn-dark:focus {
    background-color: #081a5e !important;
    border-color: #081a5e !important;
}
.border-dark { border-color: #0D2789 !important; }
.badge-dark { background-color: #0D2789 !important; }
/* ================================================================
   HEADER — LOGO CARD + TWO-BAR NAV
   ================================================================ */

/* ── Logo card ──────────────────────────────────────────────────── */
.logo-card {
    position: absolute;
    top: 0;
    left: 56px;
    z-index: 150;
    width: 204px;
    background: #fff;
    padding: 16px 18px 10px;
    border-bottom: 4px solid var(--gold-500);
    box-shadow: 0 10px 28px rgba(8, 21, 70, 0.22);
}
.logo-card .custom-logo-link,
.logo-card a { display: block; }
.logo-card .custom-logo,
.logo-card img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
}

/* ── Header shell ───────────────────────────────────────────────── */
#masthead {
    padding: 0 !important;
    position: relative;
}

/* ── Nav container ──────────────────────────────────────────────── */
/* no overflow:hidden — that would clip absolutely-positioned dropdowns */
.nav-container {
    border-bottom: 1px solid var(--light-grey);
}

/* ── Bar 1: utility bar ─────────────────────────────────────────── */
.utility-bar {
    background-color: var(--blue-800);
    display: flex;
    align-items: center;
}
#masthead .utility-bar .container {
    padding: 12px 22px !important;
    padding-left: 290px !important;
}
.utility-bar-inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 26px;
    width: 100%;
}
.utility-label {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-300);
    white-space: nowrap;
}
.utility-bar .utility-nav { display: flex; align-items: center; }
.utility-bar .navbar-nav  { flex-direction: row; }
.utility-bar .navbar-nav .nav-item .nav-link {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--grey-100) !important;
    padding: 0 8px;
    transition: color 0.15s ease;
}
.utility-bar .navbar-nav .nav-item .nav-link:hover {
    color: var(--gold-300) !important;
}

/* ── Bar 2: main nav bar ────────────────────────────────────────── */
.main-nav-bar {
    background: #fff;
    display: flex;
    align-items: center;
    border-radius: 0 0 10px 10px;
}
#masthead .main-nav-bar .container {
    padding: 18px 22px !important;
    padding-left: 290px !important;
}
.main-nav-bar #site-navigation { width: 100%; }

/* Nav item spacing via gap instead of link side-padding
   (keeps border-bottom text-width only) */
.main-nav-bar .navbar-nav {
    gap: 34px;
}

/* Main nav link base */
.main-nav-bar #main-nav .navbar-nav .nav-item .nav-link,
.home.media-template.media-inline .main-navigation #main-nav .navbar-nav .nav-item .nav-link,
.fulltop-image.media-template.media-inline .main-navigation #main-nav .navbar-nav .nav-item .nav-link {
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--blue-800) !important;
    text-decoration: none;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 5px;
    border-bottom: 3px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

/* Hover — gold underline for non-dropdown items only.
   Dropdown triggers use the panel's gold border-top as their hover signal. */
.main-nav-bar #main-nav .navbar-nav .nav-item:not(.dropdown) .nav-link:hover,
.home.media-template.media-inline .main-navigation #main-nav .navbar-nav .nav-item:not(.dropdown) .nav-link:hover,
.fulltop-image.media-template.media-inline .main-navigation #main-nav .navbar-nav .nav-item:not(.dropdown) .nav-link:hover {
    color: var(--blue-600) !important;
    border-bottom-color: var(--gold-500) !important;
}

/* Active — current page or ancestor of current page shows gold underline at rest */
.main-nav-bar #main-nav .navbar-nav .nav-item.active > .nav-link,
.main-nav-bar #main-nav .navbar-nav .nav-item.current-menu-item > .nav-link,
.main-nav-bar #main-nav .navbar-nav .nav-item.current-menu-parent > .nav-link,
.main-nav-bar #main-nav .navbar-nav .nav-item.current-menu-ancestor > .nav-link {
    color: var(--blue-700) !important;
    box-shadow: none !important;
    border-bottom-color: var(--gold-500) !important;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1080px) {
    .logo-card { width: 150px; left: 44px; }
    #masthead .utility-bar .container,
    #masthead .main-nav-bar .container { padding-left: 220px !important; }
}

/* Mobile (below Bootstrap lg = 992px)
   Hide the utility bar; main-nav-bar becomes the sole header row.
   .logo-card stays position:absolute (sibling of .nav-container inside
   position:relative #masthead) — making it static would drop it above the bar. */
@media (max-width: 991px) {
    .utility-bar { display: none; }

    /* Shrink logo card; reserve its width via padding-left on the container */
    .logo-card { width: 120px; left: 12px; padding: 8px 8px 6px; }
    .logo-card img, .logo-card .custom-logo { width: 100% !important; }

    .main-navigation .mobile-site-title { display: none; }

    /* Container: left-pad clears the logo, right-pad mirrors it */
    #masthead .main-nav-bar .container {
        padding-left: 144px !important;
        padding-right: 16px !important;
    }

    /* nav spans remaining width as a flex row: title | hamburger */
    .main-nav-bar { border-radius: 0; }
    #site-navigation { display: flex; align-items: center; width: 100%; }

    /* Site title fills and centres the middle */
    .mobile-site-title {
        flex: 1;
        text-align: center;
        font-family: "Plus Jakarta Sans", sans-serif;
        font-weight: 700;
        font-size: 15px;
        color: #0B1E68;
        text-decoration: none;
        letter-spacing: -0.01em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Hamburger on the right */
    .main-nav-bar .menu-toggler {
        margin-left: auto;
        font-size: 20px;
        cursor: pointer;
    }
    .main-nav-bar .menu-toggler .fa-bars { color: #0B1E68; }
}

/* ================================================================
   DROPDOWN / SUBMENU
   ================================================================ */

/* --- Trigger (top-level item that has children) --- */
.main-nav-bar .nav-item.dropdown > .nav-link {
    display: flex;
    align-items: center;
    gap: 7px;
    /* match the 10px top from the (1,5,0) media-inline rule that regular items get */
    padding: 10px 0 5px !important;
    border-bottom: 3px solid transparent;
}

/* Replace Bootstrap's border-triangle caret with a CSS chevron */
.main-nav-bar .nav-item.dropdown > .nav-link::after {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-right: 2.5px solid currentColor;
    border-bottom: 2.5px solid currentColor;
    border-top: none;
    border-left: none;
    transform: rotate(45deg) translateY(-3px);
    transition: transform 0.18s ease;
    margin-left: 0;
    flex-shrink: 0;
}

/* Hover: color + rotate caret; hide underline (including active state) so it
   doesn't butt against the panel's gold border-top.
   Uses #main-nav in selector to beat the active rule's (1,4,0) specificity. */
.main-nav-bar #main-nav .navbar-nav .nav-item.dropdown:hover > .nav-link {
    color: var(--blue-600) !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
}
.main-nav-bar .nav-item.dropdown:hover > .nav-link::after {
    transform: rotate(225deg) translateY(3px);
}

/* --- Panel --- */
/* Override Bootstrap display:none — use opacity/visibility for animation */
.main-nav-bar .dropdown-menu {
    display: block !important;
    position: absolute;
    top: 100%;
    left: -22px;
    min-width: 256px;
    background: #fff;
    border: 1px solid var(--light-grey);
    border-top: 3px solid var(--gold-500);
    border-radius: 0;
    box-shadow: 0 16px 34px rgba(8, 21, 70, 0.17);
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    /* delay visibility so it waits for opacity to finish on mouse-out */
    transition: opacity 0.17s ease, transform 0.17s ease,
                visibility 0s linear 0.17s;
    pointer-events: none;
    z-index: 1000;
}

/* Show on hover — visibility immediate, then opacity/transform animate */
.main-nav-bar .nav-item.dropdown:hover > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.17s ease, transform 0.17s ease, visibility 0s;
    pointer-events: auto;
}

/* --- Items --- */
.main-nav-bar .dropdown-menu .dropdown-item {
    display: block;
    white-space: nowrap;
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    letter-spacing: 0.03em !important;
    text-transform: none !important;
    color: var(--blue-800) !important;
    padding: 11px 22px !important;
    border-bottom: none !important;
    border-left: 3px solid transparent;
    box-shadow: none !important;
    background: transparent;
    transition: background 0.13s, color 0.13s, border-color 0.13s;
}
.main-nav-bar .dropdown-menu .dropdown-item:hover,
.main-nav-bar .dropdown-menu .dropdown-item:focus {
    background: var(--blue-50) !important;
    color: var(--blue-600) !important;
    border-left-color: var(--gold-500);
}

/* Suppress parent theme's ::before dash on dropdown items
   (replaced by our border-left gold indicator) */
.main-nav-bar #main-nav .navbar-nav .dropdown .dropdown-menu li a::before {
    display: none !important;
}

/* --- Divider ---
   Add CSS class "dropdown-divider" to a menu item in WP Admin > Menus
   to place a horizontal rule between item groups. */
.main-nav-bar .dropdown-menu .dropdown-divider,
.main-nav-bar .dropdown-menu li.dropdown-divider > a {
    height: 1px;
    background: var(--light-grey);
    border: none;
    margin: 8px 0;
    padding: 0;
    pointer-events: none;
    color: transparent;
    font-size: 0;
}

/* ================================================================
   MOBILE DRAWER MENU
   The off-canvas drawer (nav.drawer-nav) uses the .sub-menu-toggle
   +/− buttons to open submenus, so Bootstrap's caret is redundant.
   ================================================================ */

/* Kill Bootstrap's ::after triangle on the drawer's dropdown triggers
   (themestrap.css loads after the parent theme, so the parent's own
   border-zeroing attempt loses the cascade — override it here). */
nav.drawer-nav .dropdown-toggle::after {
    display: none !important;
}

/* Drawer submenus collapse by default; only their own +/- toggle opens them
   (core.js adds .submenu-open to the toggled <ul> only, via .children()).
   The doubled `.dropdown-menu .dropdown-menu` selector is needed to clear the
   parent theme's `.dropdown-menu > li > .dropdown-menu { display:block !important }`
   (style-theme.css, inside @media max-width:992px), which otherwise
   force-expands every nested level the moment its ancestor opens. */
nav.drawer-nav .dropdown-menu,
nav.drawer-nav .dropdown-menu .dropdown-menu {
    display: none !important;
}
nav.drawer-nav .dropdown-menu.submenu-open,
nav.drawer-nav .dropdown-menu .dropdown-menu.submenu-open {
    display: block !important;
}

/* +/− toggle button: brand blue to match the nav items, not the
   parent theme's default grey (#5a6268). Keep the background clear —
   the parent's hover fills it solid grey otherwise. */
nav.drawer-nav .sub-menu-toggle,
nav.drawer-nav .sub-menu-toggle:focus {
    color: var(--cks-blue-800);
    background-color: transparent;
    border-color: transparent;
}
nav.drawer-nav .sub-menu-toggle:hover {
    color: var(--cks-blue-600);
    background-color: transparent;
    border-color: transparent;
}

/* ================================================================
   BUTTONS
   ================================================================ */
/* Shared base for CKS button classes */
.btn-gold,
.btn-blue,
.btn-ghost,
.is-style-cks-btn-gold .wp-block-button__link,
.is-style-cks-btn-blue .wp-block-button__link,
.is-style-cks-btn-ghost .wp-block-button__link,
.post-navigation .nav-previous a,
.post-navigation .nav-next a {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    padding: 15px 34px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

/* Gold — primary CTA ("Apply") */
.btn-gold,
.wp-block-button.is-style-cks-btn-gold .wp-block-button__link,
.post-navigation .nav-next a {
    background-color: var(--gold-500);
    color: var(--blue-900);
}
.btn-gold:hover,
.wp-block-button.is-style-cks-btn-gold .wp-block-button__link:hover,
.post-navigation .nav-next a:hover { background-color: var(--gold-400); color: var(--blue-900); }

/* Blue — secondary CTA ("Inquire") */
.btn-blue,
.wp-block-button.is-style-cks-btn-blue .wp-block-button__link,
.post-navigation .nav-previous a {
    background-color: var(--blue-700);
    color: #fff;
    box-shadow: 0 6px 18px rgba(8, 21, 70, 0.25);
}
.btn-blue:hover,
.wp-block-button.is-style-cks-btn-blue .wp-block-button__link:hover,
.post-navigation .nav-previous a:hover { background-color: var(--blue-600); color: #fff; }

/* Ghost — tertiary CTA ("Visit") */
.btn-ghost,
.wp-block-button.is-style-cks-btn-ghost .wp-block-button__link {
    background-color: #fff;
    color: var(--blue-800);
    border: 1.5px solid var(--grey-300) !important;
}
.btn-ghost:hover,
.wp-block-button.is-style-cks-btn-ghost .wp-block-button__link:hover { background-color: var(--blue-50); color: var(--blue-800); }

/* :visited color reset — a plain single-class selector (.btn-gold/.btn-blue/.btn-ghost)
   ties the parent theme's bare `a:visited` rule on specificity (1 class each), and CSS
   tie-breaks on the type-selector tier, where a:visited's implicit `a` wins. Asserting
   :visited directly on each button class (2-tier specificity) beats it outright. The
   .wp-block-button.is-style-cks-btn-* variants above don't need this — they're already
   2-3 classes deep and beat a:visited on specificity alone, visited or not. */
.btn-gold:visited { color: var(--blue-900); }
.btn-blue:visited { color: #fff; }
.btn-ghost:visited { color: var(--blue-800); }

/* External Link icon toggle (Icon panel in the button block Inspector) */
.wp-block-button.has-external-link-icon .wp-block-button__link::after {
    content: "\f35d";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.75em;
    margin-left: 8px;
    vertical-align: 2px;
}

/* Lift + press for hero CTAs */
.btn-raised:hover  { transform: translateY(-2px); }
.btn-raised:active { transform: scale(0.98); }

/* Override Bootstrap .btn-primary / .btn-secondary to match spec */
.btn-primary {
    background-color: var(--blue-700) !important;
    border-color: var(--blue-700) !important;
    color: #fff !important;
    font-family: var(--font-display);
    font-weight: 700;
    border-radius: 6px;
}
.btn-primary:hover {
    background-color: var(--blue-600) !important;
    border-color: var(--blue-600) !important;
}
.btn-secondary {
    background-color: var(--gold-500) !important;
    border-color: var(--gold-500) !important;
    color: var(--blue-900) !important;
    font-family: var(--font-display);
    font-weight: 700;
    border-radius: 6px;
}
.btn-secondary:hover {
    background-color: var(--gold-400) !important;
    border-color: var(--gold-400) !important;
    color: var(--blue-900) !important;
}

/* Core's `.wp-block-buttons > .wp-block-button { margin: 0 }`
   (wp-includes/blocks/buttons/style.css) has no !important and gets beaten
   on mobile — a stray margin then shifts stacked buttons out of alignment
   with each other. Re-assert core's own intent with !important; spacing
   between buttons comes from the block's flex `gap`, not margins. */
.wp-block-buttons > .wp-block-button {
    display: inline-block;
    margin: 0 !important;
}

/* ================================================================
   CHIP / PILL  ("Est. 1939" etc.)
   ================================================================ */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 999px;
    background: var(--gold-50);
    color: var(--gold-800);
    border: 1px solid var(--light-gold);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
}

/* ================================================================
   REFERENCE CARD (typeface specimen styling)
   ================================================================ */
.type-card {
    border: 1px solid var(--light-grey);
    border-radius: 14px;
    padding: 30px;
}
.type-card .eyebrow {
    font-family: var(--font-display);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--grey-600);
}
.type-card .display-specimen {
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 700;
    color: var(--blue-800);
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.type-card .body-specimen {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 400;
    color: var(--ink);
    line-height: 1.6;
}
.type-card .caption {
    font-size: 15px;
    color: var(--grey-700);
}

/* Start the banner at the bottom of the header instead of pulling it up
   behind the nav (parent theme sets -185px, which crops the top of the photo).
   The hanging .logo-card still overlaps the banner via its own absolute position. */
.media-template.media-inline.fulltop-image .page-image-head {
    margin-top: 0 !important;
}

/* ---- Interior page banner (Image Location = Full Top) ---- */

/* CKS brand gradient overlay — replaces parent theme's flat grey.
   Three-class selector beats the parent theme's two-class rule (.page-image-head .bg-overlay)
   which loads after this file and would otherwise win at equal specificity. */
.page-image-head .bg-page-img .bg-overlay {
    background:
        linear-gradient(75deg,
            rgba(8, 21, 70, 0.82) 0%,
            rgba(8, 21, 70, 0.45) 42%,
            rgba(8, 21, 70, 0.12) 70%,
            rgba(8, 21, 70, 0.05) 100%),
        linear-gradient(to top,
            rgba(8, 21, 70, 0.55) 0%,
            rgba(8, 21, 70, 0.00) 38%);
    opacity: 1;
    height: auto; /* parent sets height:100% which collapses with min-height; auto lets top:0+bottom:0 stretch it */
}

/* Banner height + title pinned to the bottom */
.page-image-head .bg-page-img {
    position: relative; /* makes bg-overlay fill the section, not the outer page-image-head */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
}
.media-template.media-inline.fulltop-image .page-image-head .bg-page-img {
    padding-top: 400px;
    padding-bottom: 100px;
}

/* Brand H1 — three-class specificity beats parent's two-class .page-image-head .container-head */
.page-image-head .bg-page-img h1,
.page-image-head .bg-page-img .container-head {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 800;
    font-size: clamp(36px, 4.5vw, 60px);
    line-height: 1.06;
    letter-spacing: -0.02em;
    color: #fff;
    text-shadow: 0 2px 24px rgba(8, 21, 70, 0.45);
    margin: 0;
    text-align: center;
}

/* Gold bar below the title */
.page-image-head .bg-page-img .container-head::after {
    content: "";
    display: block;
    width: 68px;
    height: 4px;
    border-radius: 2px;
    background: #F0940C;
    margin: 20px auto 0;
}

.media-template.media-inline .main-navigation #main-nav .navbar-nav .nav-item .nav-link {
    padding: 10px 15px;
}
.home.media-template.media-inline .main-navigation #main-nav .navbar-nav .nav-item .nav-link,
.fulltop-image.media-template.media-inline .main-navigation #main-nav .navbar-nav .nav-item .nav-link {
    color: var(--primary) !important;
}
.home.media-template.media-inline .main-navigation #main-nav .navbar-nav .nav-item .nav-link:hover,
.fulltop-image.media-template.media-inline .main-navigation #main-nav .navbar-nav .nav-item .nav-link:hover {
    color: var(--secondary) !important;
}

.media-template.media-inline .quick-menu-top #main-nav .navbar-nav .nav-item .nav-link {
    padding: 10px 15px 6px 15px;
}

.quick-menu-bottom {border-bottom: 10px var(--secondary) solid;}

.btn {
    border-radius: 30px !important;
}
.swiper-wrapper .card .excerpt-hover {
   
}
.swiper-wrapper .card:hover .excerpt-hover {
    opacity: 1 !important;
}
/* ================================================================
   HOMEPAGE CONTENT BLOCKS
   ================================================================ */

/* ---- shared section furniture ---- */
.is-style-cks-section, .is-style-cks-section-tinted, .is-style-cks-section-navy { padding-block: 50px; }
/* full-width tinted bands */
.is-style-cks-section-tinted { background: #F6F8FA; border-block: 1px solid #D9DEE4; }
/* Navy band */
.is-style-cks-section-navy { background: #081546; border-block: none; }

/* section title = the section's H2 */
.is-style-cks-section h2, .is-style-cks-section-tinted h2, .is-style-cks-section-navy h2 {
    font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800;
    font-size: clamp(30px, 3.2vw, 42px); line-height: 1.1; letter-spacing: -0.01em;
    color: #0B1E68; margin-top: 0; margin-bottom: var(--heading-gap-h2-bottom); text-wrap: balance;
}
.is-style-cks-section h2::after, .is-style-cks-section-tinted h2::after, .is-style-cks-section-navy h2::after {
    content: "" !important; display: block !important; width: 140px; height: 4px; border-radius: 2px;
    background: #F0940C; margin-top: 20px;
}
/* Navy-band H2 white — must come after the shared color rule above */
.is-style-cks-section-navy h2 { color: #ffffff; }
/* centered heads (editor "Center align") also center the gold bar */
h2.has-text-align-center::after { margin-inline: auto; }

/* "Section Title" heading style — same treatment as a pattern's ambient
   section H2, but self-contained and centered so it can be applied to any
   heading anywhere (direct-page content, blocks, etc). */
h1.is-style-cks-section-title, h2.is-style-cks-section-title, h3.is-style-cks-section-title,
h4.is-style-cks-section-title, h5.is-style-cks-section-title, h6.is-style-cks-section-title {
    font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800;
    font-size: clamp(30px, 3.2vw, 42px); line-height: 1.1; letter-spacing: -0.01em;
    color: #0B1E68; text-align: center; text-wrap: balance;
    margin-bottom: var(--heading-gap-h2-bottom);
}
h1.is-style-cks-section-title::after, h2.is-style-cks-section-title::after, h3.is-style-cks-section-title::after,
h4.is-style-cks-section-title::after, h5.is-style-cks-section-title::after, h6.is-style-cks-section-title::after {
    content: ""; display: block; width: 140px; height: 4px; border-radius: 2px;
    background: #F0940C; margin: 20px auto 0;
}

/* "Explore More News" heading above single-post prev/next nav -- same
   centered gold-bar treatment as .is-style-cks-section-title, at half size. */
.explore-more-title {
    font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800;
    font-size: clamp(17px, 1.6vw, 21px); line-height: 1.1; letter-spacing: -0.01em;
    color: #0B1E68; text-align: center; text-wrap: balance;
    max-width: 760px; margin: 48px auto 0;
}
.explore-more-title::after {
    content: ""; display: block; width: 70px; height: 2px; border-radius: 1px;
    background: #F0940C; margin: 10px auto 0;
}

/* section lead paragraph (first paragraph directly under the section) */
.is-style-cks-section > p, .is-style-cks-section-tinted > p, .is-style-cks-section-navy > p {
    font-size: 18px; line-height: 1.6; color: #535E69; margin-top: 18px; text-wrap: pretty;
}

/* ---- text link = Button block with .is-style-cks-text-link ---- */
.is-style-cks-text-link .wp-block-button__link {
    display: inline-flex; align-items: center; gap: 8px;
    background: none !important;
    padding: 2px 0;
    font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 16px;
    color: #1C3A9C !important;
    border-bottom: 2px solid #F5B952;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-decoration: none;
    transition: color .15s, border-color .15s;
}
.is-style-cks-text-link .wp-block-button__link::after {
    content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 14px;
    transition: transform .15s;
}
.is-style-cks-text-link .wp-block-button__link:hover { color: #0B1E68 !important; border-bottom-color: #F0940C; transform: none; }
.is-style-cks-text-link .wp-block-button__link:hover::after { transform: translateX(3px); }

/* ---- single-post featured image ---- */
/* Parent theme's .page_img img (style-theme.css) forces a fixed 450px height
   at 100% width, cropping every image the same way regardless of its real
   aspect ratio. Cap height instead, full width. Scoped to .single-post so
   Pages/other .page_img usages elsewhere in the site are unaffected. */
.single-post .post-thumbnail.page_img img {
    height: auto;
    max-height: 500px;
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

/* ---- back-to-news link (single post) ---- */
/* Real .is-style-cks-text-link button (wp-block-button__link) for the color/
   underline/hover treatment -- already excluded from the global inline-link
   underline rule above and !important-hardened, so no more fragile :not()
   chasing needed. Only the arrow itself needs overriding: pointing left and
   placed before the text instead of the style's default after/right. */
.wp-block-button.back-to-news .wp-block-button__link::after { content: none; }
.wp-block-button.back-to-news .wp-block-button__link::before {
    content: "\f060"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 14px;
    transition: transform .15s;
}
.wp-block-button.back-to-news .wp-block-button__link:hover::before { transform: translateX(-3px); }

/* Global: never underline button links */
.wp-block-button__link,
.entry-content .wp-block-button__link,
.page-content .wp-block-button__link { text-decoration: none !important; }

/* ---- Feature split (Columns with CKS Feature Split style) ---- */
.is-style-cks-split.wp-block-columns { gap: 64px; align-items: center; }
.wp-block-group img, .wp-block-column img { border-radius: 20px; width: 100%; height: auto; object-fit: cover; }

/* ---- Full-width sections: constrain inner content to theme container width ---- */
.is-style-cks-section-tinted.alignfull h2,
.is-style-cks-section-navy.alignfull h2 {
    max-width: 1140px;
    margin-inline: auto;
    padding-inline: 48px;
}
.is-style-cks-section-tinted.alignfull .wp-block-columns,
.is-style-cks-section-navy.alignfull .wp-block-columns {
    max-width: 1140px;
    margin-inline: auto;
    gap: 26px !important;
    padding-inline: 26px;
}
@media (max-width: 980px) {
    .is-style-cks-section-tinted.alignfull h2,
    .is-style-cks-section-navy.alignfull h2 { padding-inline: 32px; }
    .is-style-cks-section-tinted.alignfull .wp-block-columns,
    .is-style-cks-section-navy.alignfull .wp-block-columns { padding-inline: 16px; }
}
.is-style-cks-card-grid .wp-block-column,
.is-style-cks-card-grid-multirow .wp-block-column {
    background: #fff; border: 1px solid #D9DEE4; border-radius: 14px; padding: 32px 28px;
    box-shadow: 0 8px 24px rgba(8, 21, 70, 0.05);
}
.is-style-cks-card-grid .cks-ic,
.is-style-cks-card-grid-multirow .cks-ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 14px; background: #FEF5E6; color: #A66304;
    font-size: 22px; margin-bottom: 20px;
}
.is-style-cks-card-grid .wp-block-column h3,
.is-style-cks-card-grid-multirow .wp-block-column h3 {
    font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 20px; color: #0B1E68; margin: 0;
}
.is-style-cks-card-grid .wp-block-column p,
.is-style-cks-card-grid-multirow .wp-block-column p { font-size: 15.5px; line-height: 1.55; color: #535E69; margin-top: 10px; }
.is-style-cks-card-grid ul,
.is-style-cks-card-grid-multirow ul { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.is-style-cks-card-grid li,
.is-style-cks-card-grid-multirow li { position: relative; padding-left: 26px; font-size: 15.5px; line-height: 1.5; color: #535E69; }
.is-style-cks-card-grid li::before,
.is-style-cks-card-grid-multirow li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px;
    border-radius: 2px; transform: rotate(45deg); background: #F0940C; }

/* ---- Card grid multirow: extra columns wrap to their own line, staying the
   same width as the rest and centering on that line. WP core forces
   `flex-wrap: nowrap !important` on .wp-block-columns at desktop widths and
   evenly redistributes column width via flex-grow, which is why a plain
   card grid just squeezes a 4th column in instead of wrapping it. */
.is-style-cks-card-grid-multirow.wp-block-columns {
    flex-wrap: wrap !important;
    gap: 26px;
    justify-content: center;
}
@media (min-width: 782px) {
    .is-style-cks-card-grid-multirow.wp-block-columns > .wp-block-column {
        flex: 0 0 calc((100% - 2 * 26px) / 3) !important;
    }
}

/* ---- Navy card grid ---- */
.is-style-cks-card-grid-navy .wp-block-column {
    background: #0B1E68; color: #fff; border-radius: 18px; padding: 40px 34px;
    position: relative; overflow: hidden; box-shadow: 0 16px 34px rgba(8, 21, 70, 0.18);
}
.is-style-cks-card-grid-navy .wp-block-column::before {
    content: ""; position: absolute; left: 34px; top: 0; width: 44px; height: 5px; background: #F0940C;
}
.is-style-cks-card-grid-navy .wp-block-column h3 {
    font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 23px;
    letter-spacing: -0.01em; margin: 0 0 22px; color: #fff;
}
.is-style-cks-card-grid-navy img { border-radius: 20px; width: 100%; height: auto; object-fit: cover; }
.is-style-cks-card-grid-navy ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.is-style-cks-card-grid-navy li { position: relative; padding-left: 26px; font-size: 15.5px; line-height: 1.5; color: #EBEEF2; }
.is-style-cks-card-grid-navy li::before {
    content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px;
    border-radius: 2px; transform: rotate(45deg); background: #F2A62B;
}

/* ---- School News: Query block card grid ---- */
.is-style-cks-news-cards .wp-block-post > .wp-block-group {
    background: #fff; border: 1px solid #D9DEE4; border-radius: 14px;
    box-shadow: 0 8px 24px rgba(8, 21, 70, 0.05); overflow: hidden;
}
.is-style-cks-news-cards .wp-block-post-featured-image img {
    border-radius: 20px; width: 100%; height: 200px; object-fit: cover; display: block;
}
.entry-content .is-style-cks-news-cards .wp-block-post-title a,
.page-content .is-style-cks-news-cards .wp-block-post-title a {
    font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700;
    font-size: 20px; color: #0B1E68 !important; text-decoration: none !important; line-height: 1.25;
}
.is-style-cks-news-cards .wp-block-post-title a:hover { color: #1C3A9C !important; text-decoration: none !important; }
.is-style-cks-news-cards .wp-block-post-date time { font-size: 13px; color: #6E7A86; }
.is-style-cks-news-cards .wp-block-post-excerpt__excerpt { font-size: 15.5px; line-height: 1.55; color: #535E69; }
.is-style-cks-news-cards .wp-block-post-excerpt__more-link {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 15px;
    color: #1C3A9C !important; border-bottom: 2px solid #F5B952; padding: 2px 0;
    text-decoration: none !important; transition: color .15s, border-color .15s;
}
.is-style-cks-news-cards .wp-block-post-excerpt__more-link::after {
    content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 13px;
    transition: transform .15s;
}
.is-style-cks-news-cards .wp-block-post-excerpt__more-link:hover { color: #0B1E68 !important; border-bottom-color: #F0940C; }
.is-style-cks-news-cards .wp-block-post-excerpt__more-link:hover::after { transform: translateX(3px); }

/* ---- Affiliations: Columns→Column tiles ---- */
.cks-affiliations .wp-block-column {
    display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center;
    padding: 28px 20px; border: 1px solid #D9DEE4; border-radius: 14px; background: #fff;
    transition: transform .18s, box-shadow .18s;
}
.cks-affiliations .wp-block-column:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(8, 21, 70, 0.1); }
.cks-affiliations img { width: 96px; height: 96px; object-fit: contain; }
.cks-affiliations .wp-block-column h3 {
    font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700;
    font-size: 14.5px; color: #0B1E68; line-height: 1.35; margin: 0;
}

/* ---- Contact info column ---- */
.cks-contact .wp-block-columns { gap: 60px; margin-top: 52px; align-items: start; }
.cks-contact-info h3 { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 20px; color: #0B1E68; }
.cks-contact-info > .wp-block-group { display: flex; gap: 14px; align-items: flex-start; margin-top: 20px; }
.cks-contact-info .cks-ic {
    flex: none; width: 40px; height: 40px; border-radius: 10px; background: #EDF1FB;
    color: #0D2789; display: inline-flex; align-items: center; justify-content: center; font-size: 17px;
}
.cks-contact-info p { font-size: 16.5px; line-height: 1.45; color: #242B32; margin: 0; }
.cks-contact-info p strong {
    display: block; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700;
    font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: #6E7A86; margin-bottom: 3px;
}
.cks-contact-info iframe { width: 100%; height: 220px; border: 1px solid #D9DEE4; border-radius: 14px; display: block; margin-top: 26px; }

/* ---- Page hero / banner (Cover block, Full width) ---- */
.cks-page-hero { position: relative; min-height: 410px; display: flex; align-items: center; justify-content: center;
    text-align: center; overflow: hidden; }
.cks-page-hero h1 { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800;
    font-size: clamp(44px, 5.4vw, 74px); line-height: 1.04; letter-spacing: -0.02em; color: #fff;
    text-shadow: 0 2px 24px rgba(8, 21, 70, 0.45); margin: 0; }
.cks-page-hero h1::after { content: ""; display: block; width: 68px; height: 4px; border-radius: 2px;
    background: #F0940C; margin: 22px auto 0; }

/* ---- Intro: image fills column height ---- */
.cks-intro .wp-block-columns { align-items: stretch; }
.cks-intro img { height: 100%; min-height: 360px; }
.cks-intro p { font-size: 18px; line-height: 1.62; color: #535E69; text-wrap: pretty; }
.cks-intro p + p { margin-top: 18px; }

/* ---- Programs: alternating image/text rows ---- */
.cks-programs .wp-block-columns { align-items: center; gap: 60px; }
.cks-programs .wp-block-columns + .wp-block-columns { margin-top: 84px; }
.cks-programs img { border-radius: 18px; }
.cks-programs .wp-block-column h3 { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800;
    font-size: clamp(30px, 3vw, 40px); line-height: 1.08; letter-spacing: -0.015em; color: #0B1E68; margin: 0; }
.cks-programs .cks-prog-sub { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700;
    font-size: 18px; color: #A66304; margin-top: 8px; }
.cks-programs .wp-block-column p:not(.cks-prog-sub) { font-size: 16.5px; line-height: 1.62; color: #535E69;
    margin-top: 18px; text-wrap: pretty; }
.wp-block-list:not([class*="is-style-cks"]),
.is-style-cks-diamond { list-style: none; margin-top: 18px; margin-bottom: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 11px; }
.wp-block-list:not([class*="is-style-cks"]) li,
.is-style-cks-diamond li { position: relative; padding-left: 26px; font-size: 15.5px; line-height: 1.5; color: #535E69; }
.wp-block-list:not([class*="is-style-cks"]) li::before,
.is-style-cks-diamond li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px;
    border-radius: 2px; transform: rotate(45deg); background: #F0940C; }
.cks-programs .cks-text-link { margin-top: 24px; }

/* ---- Navy cards: paragraph + light text-link ---- */
/* Higher specificity than .wp-block-list:not([class*="is-style-cks"]) li above, which would
   otherwise win the tie and paint list text dark grey on the navy card background. */
.is-style-cks-card-grid-navy .wp-block-column li { color: #EBEEF2; }
.is-style-cks-card-grid-navy .wp-block-column li::before { background: #F2A62B; }
.is-style-cks-card-grid-navy .wp-block-column p { font-size: 15.5px; line-height: 1.6; color: #EBEEF2; margin-top: 16px; }
.is-style-cks-card-grid-navy .is-style-cks-text-link .wp-block-button__link { color: #F5B952 !important; border-bottom-color: rgba(240, 148, 12, 0.45); margin-top: 22px; }
.is-style-cks-card-grid-navy .is-style-cks-text-link .wp-block-button__link:hover { color: #fff !important; border-bottom-color: #F0940C; }

@media (max-width: 980px) {
    .is-style-cks-section, .is-style-cks-section-tinted, .is-style-cks-section-navy { padding-block: 36px; }
    .cks-programs .wp-block-columns + .wp-block-columns { margin-top: 56px; }
}

/* ================================================================
   GRAVITY FORMS — SUBMIT BUTTON
   ================================================================ */
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_footer button {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
    font-size: 16px;
    height: 54px;
    padding: 0 34px;
    border: none;
    cursor: pointer;
    border-radius: 6px;
    background: #F0940C;
    color: #081546;
    transition: background .15s, transform .15s;
}
.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper .gform_footer button:hover { background: #F2A62B; }
.gform_wrapper .gform_footer input[type="submit"]:active { transform: scale(0.98); }

.post, .page { margin: 0; }
.blog article.post { padding: 0; }

/* ---- Inner-page h1 (non-home, non-banner) ---- */
/* Banner pages use h1.container-head; Full Top suppresses h1.entry-title, so both selectors are safe globally.
   body.blog is the Posts page — WordPress also adds body.home there, so body:not(.home) misses it; include explicitly. */
body:not(.home) h1.page-title,
body.blog h1.page-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 4.6vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--cks-blue-800);
  text-align: center;
  margin: 1em !important;
}
body:not(.home) h1.page-title::after,
body.blog h1.page-title::after {
  content: "";
  display: block;
  width: 100px;
  height: 4px;
  border-radius: 2px;
  background: var(--cks-gold-500);
  margin: 20px auto 0;
}

/* Parent theme's default "_s" boilerplate (olytheme/style.css) puts
   margin-top: 1.5em on .entry-content. On Pages .entry-header is a sibling
   before .entry-content, so that margin only affects the gap further down
   the page — mostly harmless. On single posts .entry-header is the FIRST
   CHILD of .entry-content (see content-single.php), so that same margin-top
   collapses onto .entry-content's own top edge and pushes the navy band
   itself down, opening an unwanted plain gap above it. Zero it out here —
   spacing is handled explicitly by .entry-header's own margin-bottom below
   and the per-element vertical-rhythm rules elsewhere in this file. */
.page-content, .entry-content, .entry-summary {
  margin-top: 0;
}

/* ---- Inner-page title band: pages/posts with no banner ----
   .entry-header only renders when cks_show_image_banner() is false (content-page.php /
   content-single.php) -- posts and any non-page post type always fall here, since the
   banner is page-only; a page falls here only once its featured image is removed. Full-bleed
   navy band replaces the plain white space that used to sit behind h1.entry-title, using the
   same 100vw breakout as the site's other full-width sections. */
body:not(.home) .entry-header {
  background: var(--cks-blue-900);
  min-height: 340px;
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 30px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
body:not(.home) .entry-header h1.entry-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  text-align: center;
  margin: 0;
}
body:not(.home) .entry-header h1.entry-title::after {
  content: "";
  display: block;
  width: 68px;
  height: 4px;
  border-radius: 2px;
  background: var(--cks-gold-500);
  margin: 20px auto 0;
}

/* .entry-footer and .post-navigation are siblings of .entry-content (not
   children), so the .entry-content > * prose-width rule never reaches
   them — give them the same 760px column explicitly. */
.entry-footer,
.navigation.post-navigation {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* ---- Staff Directory v3 ---- */

/* Navy title band, matching body:not(.home) .entry-header — page-staff-v3.php
   only renders this <header> when cks_show_image_banner() is false, same gate
   content-page.php uses, so this never doubles up with the banner. */
.staffv3 header {
  background: var(--cks-blue-900);
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  margin-bottom: 30px;
}
body:not(.home) .staffv3 h1.page-title {
  color: #fff !important;
  margin: 0 auto !important;
}

/* Filter controls */
select.staff-select,
.staff-search input {
  height: 54px;
  border: 1px solid #D9DEE4 !important;
  border-radius: 12px !important;
  padding: 0 18px;
  font-family: "Source Sans 3", sans-serif;
  font-size: 16px;
  color: #1A1F26;
  background-color: #ffffff;
  box-shadow: none !important;
}
select.staff-select:focus,
.staff-search input:focus {
  outline: none;
  border-color: #3352AF !important;
  box-shadow: 0 0 0 3px rgba(51,82,175,0.16) !important;
}

/* Null out parent-theme card chrome — .dirbody handles it now */
.staffv3 .profile-blog {
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  background: transparent;
  margin-bottom: 0;
  padding: 0;
  float: none;
}

/* School Directory (page-volunteers.php) — remove parent-theme drop shadow on cards */
.staffv1 .profile-blog {
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
}

/* Staff cards */
.dirbody {
  background: #ffffff;
  border: 1px solid #D9DEE4;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(8,21,70,0.05);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  margin-bottom: 24px;
}
.dirbody:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(8,21,70,0.13);
}
.dirbody img {
  border-radius: 16px 16px 0 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Card text padding — image bleeds full-width; text gets 20px gutter */
.staffv3 .name-location {
  padding: 0 20px 20px;
}
.staffv3 .name-location > .pb-3 > .text-center {
  margin: 0 -20px;
  width: calc(100% + 40px) !important;
}
.staffv3 .dirbody img {
  border-radius: 0; /* .dirbody overflow:hidden clips the top corners */
}

/* Card text */
.staffname {
  display: block;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: #0B1E68;
}
.teacherdepartment {
  color: var(--cks-gold-700);
}
.teacherpostiion {
  font-size: 15.5px;
  color: var(--cks-grey-700);
}
.staffv3 .fa-phone {
  color: var(--cks-gold-600);
}
.staff-contact {
  border-top: 1px solid var(--cks-grey-100);
  margin-top: 18px;
  padding-top: 16px;
}
.dirbody a[href^="mailto:"],
.dirbody a[href^="tel:"] {
  color: #3352AF;
  font-size: 15px;
}
.dirbody a[href^="mailto:"]:hover,
.dirbody a[href^="tel:"]:hover {
  color: #0B1E68;
  text-decoration: underline;
}

/* ---- Single Staff block: horizontal card (image left, text right) ----
   Reuses .dirbody for the card chrome (border, radius, shadow, hover lift)
   and the same .staffname/.teacherdepartment/.teacherpostiion/.staff-contact
   text styling as the Staff Group cards; only the layout direction changes. */
.staff-single-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
.staff-single-media {
  flex: 0 0 38%;
  align-self: stretch;
}
.staff-single-media img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  display: block;
  border-radius: 0; /* .dirbody's own overflow:hidden + border-radius clips the corners */
}
.staffv3 .staff-single-card .name-location {
  padding: 24px 24px 24px 10px;
}
@media (max-width: 640px) {
  .staff-single-card { flex-direction: column; }
  .staff-single-media { flex-basis: auto; }
  .staffv3 .staff-single-card .name-location { padding: 20px; }
}

/* ---- Footer ---- */
.site-footer,
#footer-widget { background: #081546; color: #EBEEF2; }

/* Strip Bootstrap spacing added by the parent template, replace with our own gap above the footer */
#footer-widget { margin-top: 100px !important; }

/* Centering wrapper — the single widget <section> fills it */
.footer-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 64px 48px 48px;
}
#footer-widget section.widget { width: 100%; }

/* The WP Columns block IS the 3-column grid */
#footer-widget .wp-block-columns {
  display: grid !important;
  grid-template-columns: 1fr 1.25fr 1fr !important;
  gap: 48px !important;
  align-items: start;
  flex-wrap: unset; /* cancel WP's flex-wrap */
}
#footer-widget .wp-block-column {
  width: auto !important;
  flex-basis: auto !important;
  min-width: 0;
}

/* Remove the spacer blocks — they compensated for logo height; the grid handles that */
#footer-widget .wp-block-spacer { display: none; }

/* Logo card (white rounded card wrapping the site logo image) */
#footer-widget figure.wp-block-image {
  width: 118px;
  background: #fff;
  border-radius: 16px;
  padding: 12px 14px 8px;
  margin-bottom: 22px;
}
#footer-widget figure.wp-block-image img { width: 100%; height: auto; display: block; }

/* School name / brand line — first <p><strong> in column 1 only */
#footer-widget .wp-block-column:first-child p:first-of-type strong {
  position: relative;
  padding-bottom: 14px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 800;
  font-size: 17px;
  color: #fff;
  letter-spacing: -0.01em;
  display: inline-block;
}
#footer-widget .wp-block-column:first-child p:first-of-type strong::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: #F0940C;
}

/* Address / contact paragraphs */
#footer-widget p { margin-top: 10px; font-size: 15px; line-height: 1.6; }
#footer-widget p a { color: #EBEEF2; transition: color 0.15s ease; text-decoration: none; }
#footer-widget p a:hover { color: #F5B952; }

/* Map iframe */
#footer-widget iframe { border: 0; border-radius: 14px; display: block; }

/* Quick Links heading — nav menu widget uses .widgettitle (any heading level).
   Parent theme sets background:var(--secondary) and padding:15px 30px on .widgettitle;
   both must be nulled here since #footer-widget .widgettitle has higher specificity. */
#footer-widget .widgettitle,
#footer-widget .wp-block-heading {
  position: relative;
  padding: 0 0 14px;
  background: transparent;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 800;
  font-size: 19px;
  color: #fff;
  margin-bottom: 16px;
}
#footer-widget .widgettitle::after,
#footer-widget .wp-block-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: #F0940C;
}

/* Navigation menu links */
#footer-widget .menu { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; }
#footer-widget .menu a { font-size: 15px; color: #EBEEF2; transition: color 0.15s ease; text-decoration: none; }
#footer-widget .menu a:hover { color: #F5B952; }

/* Hide the Search item from the footer Quick Links menu */
#footer-widget .search-open { display: none; }

/* Neutralise parent-theme nav-link padding and focus highlight */
#footer-widget .nav-link { display: block; padding: 0; }
#footer-widget a:focus { background-color: transparent; }
#footer-widget .current-menu-item { background-color: transparent !important; }

@media (max-width: 860px) {
  #footer-widget .wp-block-columns {
    grid-template-columns: 1fr !important;
  }
}

/* ---- Blog index (home.php) ---- */

/* Let the container breathe at wide viewports; mt-4 on #content is redundant here */
body.blog .container { max-width: 1200px; }
body.blog #content { margin-top: 0 !important; }

/* Navy title band, matching body:not(.home) .entry-header — home.php only
   renders this wrapper when cks_show_image_banner() is false, which is always true for
   the posts page itself (see cks_show_image_banner()'s page_for_posts exclusion), so this
   never doubles up with the banner. */
.page-head {
  background: var(--cks-blue-900);
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  margin-bottom: 30px;
  text-align: center;
}
body.blog .page-head h1.page-title,
body.search-results .page-head h1.page-title,
body.search-no-results .page-head h1.page-title {
  color: #fff !important;
  margin: 0 auto !important;
}
body.search-results .page-head h1.page-title span,
body.search-no-results .page-head h1.page-title span {
  color: var(--cks-gold-500);
}

.section.blog {
  max-width: 1160px;
  margin: 0 auto;
  padding: 48px 48px 76px;
}

/* Search box: centered, card-sized, above the grid */
.blog-search {
  max-width: 420px;
  margin: 0 auto 44px;
  position: relative;
}
/* input[type="search"].blog-search__input, not just the bare class -- the
   parent theme's style.css has a normalize rule targeting
   input[type="search"] directly (color/border/border-radius/padding) at
   higher specificity (element+attribute beats a bare class), which would
   otherwise silently win over these declarations. */
input[type="search"].blog-search__input {
  width: 100%;
  height: 54px;
  border-radius: 14px;
  border: 1px solid var(--cks-grey-200);
  background: #fff;
  box-shadow: 0 8px 24px rgba(8, 21, 70, 0.05);
  padding: 0 54px 0 32px;
  font-family: "Source Sans 3", sans-serif;
  font-size: 15.5px;
  color: var(--cks-blue-900);
}
.blog-search__input::placeholder { color: var(--cks-grey-600); }
input[type="search"].blog-search__input:focus {
  outline: none;
  border-color: var(--cks-blue-500);
  box-shadow: 0 0 0 3px rgba(51, 82, 175, .25);
  color: var(--cks-blue-900);
}
.blog-search__btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: none;
  background: var(--cks-blue-700);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease;
}
.blog-search__btn:hover { background: var(--cks-blue-600); }

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

/* Post card */
.post-card {
  background: #fff;
  border: 1px solid #D9DEE4;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(8, 21, 70, 0.05);
  display: flex;
  flex-direction: column;
  min-width: 0; /* grid items default to min-width:auto, letting a long unbroken excerpt link (e.g. a bare URL) stretch the whole grid track wider instead of wrapping */
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.post-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(8, 21, 70, 0.13); }

.post-media { aspect-ratio: 16 / 10; }
.post-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.post-body { padding: 24px 24px 28px; display: flex; flex-direction: column; flex: 1; }

.post-title { margin: 10px 0 0; }
.post-title a {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 800;
  font-size: 21px;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: #0B1E68;
  text-decoration: none;
}
.post-title a:hover { color: #1C3A9C; }

.post-date { font-size: 13.5px; color: #6E7A86; margin-top: 10px; }
.post-excerpt { font-size: 15.5px; line-height: 1.58; color: #535E69; margin-top: 12px; overflow-wrap: break-word; word-break: break-word; }

/* Pagination */
.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid #D9DEE4;
}
.page-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.page-nav-link.next { margin-left: auto; }
.page-nav-link.is-disabled { opacity: 0.4; pointer-events: none; }

@media (max-width: 980px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
  .blog-grid { grid-template-columns: 1fr; }
  .page-head, .section.blog { padding-left: 24px; padding-right: 24px; }
  .blog-pagination { flex-direction: column; gap: 18px; align-items: stretch; text-align: center; }
  .page-nav-link.next { margin-left: 0; }
}

/* ---- Colophon bar ---- */
#colophon { background: #081546; color: #EBEEF2; }
#colophon .site-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}
#colophon a,
#colophon .credits { color: #F0940C; text-decoration: none; transition: color 0.15s ease; }
#colophon a:visited { color: #CF7D07; }
#colophon a:hover { color: #F5B952; }

/* MEDIA SECTION */
@media only screen and (min-width: 1200px) {
  #colophon .container { max-width: 1200px; }
}

@media only screen and (max-width: 1200px) {

}
@media only screen and (max-width: 992px) {

    }
@media only screen and (max-width: 768px) {

}

@media only screen and (max-width: 550px) {
    .site-branding img {
        height: 100px !important;
    }
}
@media only screen and (max-width: 400px) {


}

/* ================================================================
   CORE BLOCK STYLES
   Net-new rules only — additive, does not replace any existing rule.
   ================================================================ */

/* ---------- 1. Button base (default = Blue) ---------- */
.wp-block-button__link{
  font-family:var(--font-display);font-weight:700;font-size:16px;
  padding:15px 34px;border-radius:6px;border:none;cursor:pointer;text-decoration:none;
  background-color:var(--blue-700);color:#fff;
  box-shadow:0 6px 18px rgba(8,21,70,.25);
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
/* Plain (no is-style-cks-btn-*) buttons are only 1 class deep, tying a:visited
   on specificity and losing on its implicit `a` element -- see the a:visited
   note near the top of this file. The is-style-cks-btn-* variants don't need
   this because their 2-class selectors already outrank a:visited outright. */
.wp-block-button__link:visited{color:#fff}
.wp-block-button__link:hover{background-color:var(--blue-600);transform:translateY(-2px);box-shadow:0 10px 24px rgba(8,21,70,.32)}
.wp-block-button__link:active{transform:scale(.98)}
/* ---------- 2. Quote ---------- */
.wp-block-quote:not(.is-style-cks-quote-testimonial){
  border-left:4px solid var(--cks-gold-500);padding:4px 0 4px 28px;margin-top:32px;margin-bottom:32px;
}
.wp-block-quote:not(.is-style-cks-quote-testimonial) p{
  font-family:var(--font-body);font-style:italic;font-size:19.5px;line-height:1.55;color:var(--ink);
}
.wp-block-quote:not(.is-style-cks-quote-testimonial) cite{
  display:block;margin-top:14px;font-family:var(--font-display);font-style:normal;font-weight:600;
  font-size:14.5px;color:var(--cks-grey-600);
}
.wp-block-quote:not(.is-style-cks-quote-testimonial) cite::before{content:"\25C6 ";color:var(--cks-gold-500);font-size:10px}

.wp-block-quote.is-style-cks-quote-testimonial{
  background:#fff;border-left:none;border:1px solid var(--cks-grey-200);border-radius:14px;
  padding:36px 38px;box-shadow:0 8px 24px rgba(8,21,70,.05);margin-top:32px;margin-bottom:32px;
}
.wp-block-quote.is-style-cks-quote-testimonial p{
  font-family:var(--font-body);font-style:normal;font-size:21px;line-height:1.55;color:var(--cks-blue-800);
}
.wp-block-quote.is-style-cks-quote-testimonial cite{
  display:flex;align-items:center;gap:10px;margin-top:20px;padding-top:18px;border-top:1px solid var(--cks-grey-200);
  font-family:var(--font-display);font-style:normal;font-weight:600;font-size:14.5px;color:var(--cks-grey-600);
}
.wp-block-quote.is-style-cks-quote-testimonial cite::before{content:"";width:8px;height:8px;border-radius:2px;transform:rotate(45deg);background:var(--cks-gold-500);flex:none}

/* ---------- 3. Pullquote ---------- */
.wp-block-pullquote{border:none;text-align:center;margin:44px 0;padding:0}
.wp-block-pullquote blockquote{border:none;margin:0;padding:0}
.wp-block-pullquote blockquote::before{content:"";display:block;width:140px;height:4px;border-radius:2px;background:var(--cks-gold-500);margin:0 auto 26px}
.wp-block-pullquote p{
  font-family:var(--font-display);font-weight:500;font-size:clamp(28px,3vw,34px);line-height:1.3;
  color:var(--cks-blue-800);letter-spacing:-.01em;
}
.wp-block-pullquote cite{display:block;margin-top:16px;font-family:var(--font-display);font-style:normal;font-weight:600;font-size:14px;color:var(--cks-grey-600)}

/* ---------- 4. Details ---------- */
.wp-block-details{border-bottom:1px solid var(--cks-grey-200);padding:22px 0}
.wp-block-details:first-of-type{border-top:1px solid var(--cks-grey-200)}
.wp-block-details + .wp-block-details{border-top:none}
.wp-block-details summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-family:var(--font-display);font-weight:600;font-size:17px;color:var(--cks-blue-800);
  transition:color .15s ease;
}
.wp-block-details summary::-webkit-details-marker{display:none}
.wp-block-details summary:hover{color:var(--cks-blue-600)}
.wp-block-details summary::after{
  content:"";flex:none;width:10px;height:10px;border-right:2px solid var(--cks-gold-500);border-bottom:2px solid var(--cks-gold-500);
  transform:rotate(45deg);transition:transform .2s ease;
}
.wp-block-details[open] summary::after{transform:rotate(-135deg)}
.wp-block-details > *:not(summary){
  font-family:var(--font-body);font-size:16px;line-height:1.6;color:var(--cks-grey-700);margin-top:14px;
}

/* ---------- 5. Table ---------- */
.wp-block-table table{width:100%;border-collapse:collapse;font-family:var(--font-body);font-size:15.5px}
.wp-block-table td,.wp-block-table th{padding:14px 18px;border:none;border-bottom:1px solid var(--cks-grey-200);text-align:left}
.wp-block-table thead th,.wp-block-table tr:first-child th{
  background:var(--cks-blue-800);color:#fff;font-family:var(--font-display);font-weight:700;border-bottom:none;
}
.wp-block-table tbody tr:nth-child(even){background:var(--cks-grey-50)}
.wp-block-table.is-style-cks-table-gold thead th,.wp-block-table.is-style-cks-table-gold tr:first-child th{
  background:var(--cks-gold-50);color:var(--cks-blue-800);font-family:var(--font-display);font-weight:700;
  border-bottom:2px solid var(--cks-gold-500);
}
.wp-block-table.is-style-cks-table-gold tbody tr:nth-child(even){background:var(--cks-grey-50)}

/* ---------- 5b. OlyWeb Stats Block ---------- */
/* Same signature gold-tick treatment as section H2s (.is-style-cks-section
   h2::after etc., above) -- a fixed-size bar, not tied to the block's own
   dynamic font_color, between the number and its label. ::after on
   .stat-number renders directly below the number and above the sibling
   .stat-title div, so no markup change is needed. */
.stats-block .stat-number::after {
    content: "";
    display: block;
    width: 140px;
    height: 4px;
    border-radius: 2px;
    background: var(--cks-gold-500);
    margin: 0px auto 20px;
}
.stats-block .stat-title {
    font-size: 1.5rem;
    font-weight: 600;
}

/* ---------- 6. File ---------- */
.wp-block-file{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-family:var(--font-body)}
.wp-block-file>a:first-child{color:var(--cks-grey-600);font-size:15px}
.wp-block-file__button,.wp-block-file>a:first-child{text-decoration:none}
.wp-block-file .wp-block-file__button{
  font-family:var(--font-display);font-weight:700;font-size:15px;padding:11px 24px;border-radius:6px;
  background:var(--blue-700);color:#fff;
  transition:background .15s ease,transform .15s ease;
}
.wp-block-file .wp-block-file__button:hover{background:var(--blue-600)}
.wp-block-file.is-style-cks-file-gold .wp-block-file__button{background:var(--cks-gold-500);color:var(--cks-blue-900)}
.wp-block-file.is-style-cks-file-gold .wp-block-file__button:hover{background:var(--cks-gold-400)}

/* ---------- 7. List ---------- */
.wp-block-list.is-style-cks-blue-circle{list-style:none;margin-top:18px;margin-bottom:0;padding-left:1.3em;display:flex;flex-direction:column;gap:11px}
.wp-block-list.is-style-cks-blue-circle li{position:relative;padding-left:26px;font-size:15.5px;line-height:1.5;color:#535E69}
.wp-block-list.is-style-cks-blue-circle li::before{content:"";position:absolute;left:2px;top:7px;width:8px;height:8px;border-radius:50%;background:var(--cks-blue-700)}

/* ---------- 8. Image ---------- */
.wp-block-image img{border-radius:20px}
.wp-block-image.is-style-cks-image-plain img{border-radius:0}
#footer-widget figure.wp-block-image img{border-radius:0}
.wp-block-image figcaption,.wp-block-gallery figcaption,.wp-block-video figcaption,.wp-block-embed figcaption,.wp-block-audio figcaption{
  font-family:var(--font-body);font-size:13.5px;color:var(--cks-grey-600);margin-top:10px;text-align:center;
}

/* ---------- 9. Gallery ---------- */
/* wp-includes/blocks/gallery.php prints a PER-INSTANCE rule for every gallery
   (".wp-block-gallery.wp-block-gallery-{id}", specificity 0,0,2,0) that sets
   --wp--style--unstable-gallery-gap -- the var core's width calc() reads to size
   each image. A plain ".wp-block-gallery" override (0,0,1,0) can never beat that,
   no matter the source order, which is why setting the var directly here had no
   effect. Since theme.json sets no blockGap for core/gallery, that per-instance
   rule falls back to gallery.php's own chain (--wp--style--gallery-gap-default,
   then --gallery-block--gutter-size, then --wp--style--block-gap, then 0.5em/~8px)
   -- resolving ~8px short of the real 16px gap below, enough to force an extra
   wrap on every row (2 images render 1-up, 3 render 2-up, 4 render 3-up, etc).
   gallery.php explicitly documents --wp--style--gallery-gap-default as the
   variable themes should set for exactly this -- it's looked up by var(), not
   overridden by the per-instance rule, so no specificity fight needed. */
:root{--wp--style--gallery-gap-default:16px}
.wp-block-gallery{gap:16px}
.wp-block-gallery .wp-block-image img{border-radius:20px}

/* ---------- 10. Media & Text ---------- */
.wp-block-media-text{align-items:center;gap:clamp(28px,4vw,64px)}
.wp-block-media-text .wp-block-media-text__media img{border-radius:20px;display:block}
.wp-block-media-text .wp-block-media-text__content{padding:0}
.wp-block-media-text__content h2,.wp-block-media-text__content h3{font-family:var(--font-display);font-weight:800;color:var(--cks-blue-800)}
.wp-block-media-text__content p{font-family:var(--font-body);font-size:17px;line-height:1.6;color:var(--cks-grey-700);margin-top:12px}

/* ---------- 11. Cover (typography only; no border-radius) ---------- */
.wp-block-cover .wp-block-cover__inner-container h2,.wp-block-cover .wp-block-cover__inner-container h3{font-family:var(--font-display);font-weight:800}
.wp-block-cover .wp-block-cover__inner-container p{font-family:var(--font-body);font-size:17px;line-height:1.6}
.wp-block-cover .wp-block-button__link{box-shadow:0 6px 18px rgba(8,21,70,.35)}

/* ---------- 12. Separator ---------- */
hr.wp-block-separator{
  border:none;height:4px;width:120px;margin:48px auto;border-radius:2px;background:var(--cks-gold-500);
  background-image:none;opacity:1;
}
hr.wp-block-separator.is-style-wide,hr.wp-block-separator.is-style-dots{display:none}

/* ============================================================
   TYPOGRAPHY RECONCILIATION + ACCESSIBILITY BASICS
   ============================================================ */

/* ---------- 1. Plain list style ---------- */
.wp-block-list.is-style-cks-plain { list-style: disc; margin-top: 18px; margin-bottom: 0; padding-left: 1.3em; }
.wp-block-list.is-style-cks-plain li { font-family: var(--font-body); font-size: 15.5px; line-height: 1.5; color: #535E69; margin-bottom: 6px; }
.wp-block-list.is-style-cks-plain li::marker { color: #000; }

/* ---------- 3. Vertical rhythm ---------- */
.entry-content > h2, .page-content > h2 { margin-top: var(--heading-gap-h2-top); margin-bottom: var(--heading-gap-h2-bottom); }
.entry-content > h3, .page-content > h3 { margin-top: var(--heading-gap-h3-top); margin-bottom: var(--heading-gap-h3-bottom); }
.entry-content > h4, .entry-content > h5, .entry-content > h6,
.page-content  > h4, .page-content  > h5, .page-content  > h6 { margin-top: var(--heading-gap-h4-top); margin-bottom: var(--heading-gap-h4-bottom); }
.entry-content > *:first-child, .page-content > *:first-child { margin-top: 0; }

/* Bare <p> typed directly on a page (classic content / wpautop output has no
   .wp-block-paragraph class, so the rhythm rule up top misses it). Same gap. */
.entry-content > p:not([class*="is-style-cks"]),
.page-content  > p:not([class*="is-style-cks"]) { margin-top: 0; margin-bottom: var(--heading-gap-p-bottom); }
.entry-content > ul:not([class*="is-style-cks"]),
.entry-content > ol:not([class*="is-style-cks"]),
.page-content  > ul:not([class*="is-style-cks"]),
.page-content  > ol:not([class*="is-style-cks"]) {
    margin-top: 0; margin-bottom: 1em;
    margin-left: auto; margin-right: auto;
    padding-left: 1.4em;
    max-width: calc(760px + 1.4em);
}
.entry-content > ul:not([class*="is-style-cks"]) li,
.entry-content > ol:not([class*="is-style-cks"]) li,
.page-content  > ul:not([class*="is-style-cks"]) li,
.page-content  > ol:not([class*="is-style-cks"]) li { font-family: var(--font-body); font-size: 18px; line-height: 1.6; color: #242B32; margin-bottom: .5em; }

/* cks-styled lists (diamond / blue-circle / plain) dropped straight onto a page
   need the same treatment as the plain-list rule above: the parent theme's
   .site ul (0-1-1) sets `margin: 0 0 1em 1.5em; padding: 0`, beating both
   .entry-content > * (0-1-0) and .is-style-cks-diamond (0-1-0) — that left-shoves
   the list out of the centered 760px column AND kills its padding-left, so the
   marker (li ::before at left:0) hangs left of the prose edge. This selector is
   (0-2-1) so it wins: re-assert the 1.4em indent and widen max-width to match,
   which lands the marker ~0.7em inside the column like the plain lists do. Only
   reaches direct children — lists inside pattern groups/columns are untouched. */
.entry-content > ul[class*="is-style-cks"],
.entry-content > ol[class*="is-style-cks"],
.page-content  > ul[class*="is-style-cks"],
.page-content  > ol[class*="is-style-cks"] {
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.4em;
    max-width: calc(760px + 1.4em);
}

/* ---------- 6. Focus visibility ---------- */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible,
.wp-block-button__link:focus-visible,
.wp-block-file__button:focus-visible {
  outline: 3px solid var(--cks-blue-700);
  outline-offset: 2px;
  border-radius: 3px;
}
.is-style-cks-section-navy :focus-visible,
.is-style-cks-card-grid-navy :focus-visible { outline-color: var(--cks-gold-500); }
a:focus { outline: none; }
a:hover, a:active { outline: none; }
:where(a, button):focus:not(:focus-visible) { outline: none; }

/* ---------- 7. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .wp-block-button__link:hover { transform: none !important; }
}

/* ---------- 8. Long-string overflow ---------- */
.entry-content, .page-content { overflow-wrap: break-word; }

/* ---------- 9. Table overflow ---------- */
.wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wp-block-table > table { min-width: 520px; }
@media (min-width: 768px) {
  .wp-block-table > table { min-width: 0; }
}

/* ---------- 10. Print ---------- */
@media print {
  @page { size: auto; margin: 15mm; }
  body, .container { min-width: 0 !important; width: auto !important; }
  #masthead, .site-footer, .utility-bar,
  .wp-block-buttons, .staff-search, .staff-select { display: none !important; }
  .entry-content, .page-content { color: #000; }
  .entry-content a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; word-break: break-all; }
  h2, h3 { page-break-after: avoid; }
  img, tr { page-break-inside: avoid; }
}

/* ---------- 11. Polish ---------- */
::selection { background: var(--cks-gold-500); color: var(--cks-blue-900); }
.entry-content strong, .page-content strong { font-weight: 700; }
.entry-content sup, .entry-content sub,
.page-content  sup, .page-content  sub { font-size: .72em; line-height: 0; }
.entry-content mark, .page-content mark { background: var(--cks-gold-50); color: var(--cks-blue-900); padding: .1em .25em; border-radius: 2px; }
.entry-content abbr[title], .page-content abbr[title] { text-decoration: underline dotted; cursor: help; }