/* UMA Theme Styles — assets/css/src/editor-style.css
   ==========================================================================
   ALL of UMA's CSS lives in this file. The chickadee parent enqueues it
   (handle chickadee-child-editor) on enqueue_block_assets, which fires in BOTH
   the front-end and the block editor iframe — so one file styles both contexts.

   The old .editor-styles-wrapper editor-only approximation layer was removed
   2026-06-09: after the style.css consolidation the real (unprefixed) rules
   below render the editor canvas directly, and theme.json already covers what
   the approximations duplicated — links (styles.elements.link = accent-1, hover
   brand-2) and h1 letter-spacing (0.2em). The old block also added an h2 border
   the front-end never had, so dropping it improves editor fidelity.

   ========================================================================== */

/* ==========================================================================
   NOTE ON !important USAGE
   ==========================================================================
   This stylesheet uses ~85 !important declarations. This is intentional,
   not technical debt. Kadence Blocks injects per-block inline CSS via
   <style> tags with specificity (0,3,0) to (0,5,0) — far above what
   normal theme selectors can match. WordPress FSE global styles also use
   !important on preset utility classes. The only way to override these
   for theme-level consistency is !important on our rules.

   Before adding new !important declarations, verify the need:
     1. Inspect the target element in DevTools
     2. Identify which Kadence/FSE rule you're overriding
     3. If the Kadence rule doesn't use !important, try matching its
        specificity first — only escalate to !important if needed
     4. Comment the !important with the reason (e.g., "overrides Kadence
        inline style" or "overrides FSE global-styles utility class")
   ========================================================================== */


/* ==========================================================================
   WordPress Preset Map: Color Palette
   ==========================================================================
   Maps the short color names (`var(--brand-1)`, `var(--accent-2-tint)`, etc.)
   to the long `--wp--preset--color--*` form WordPress emits from theme.json.
   The short convention is used both by Kadence block content stored in the DB
   (InfoBox, columns, etc.) and by hand-authored rules in this stylesheet.

   Without this map the short names are undefined and fall back to the initial
   value (often transparent) — e.g. rich pages like /admission/ render flat with
   missing tile backgrounds.

   This is a permanent convention, not debt: theme.json stays the single source
   of truth, and every consumer (DB blocks + CSS) references one short alias.
   The sibling `law` theme uses the identical map (see its editor-style.css,
   "WordPress Preset Map"). These are plain variable definitions — zero
   !important — so they have no bearing on the !important lean-down.
   ========================================================================== */
:root {
    --brand-1: var(--wp--preset--color--brand-1);
    --brand-2: var(--wp--preset--color--brand-2);
    --accent-1: var(--wp--preset--color--accent-1);
    --accent-2: var(--wp--preset--color--accent-2);
    --accent-3: var(--wp--preset--color--accent-3);
    --brand-1-tint: var(--wp--preset--color--brand-1-tint);
    --brand-2-tint: var(--wp--preset--color--brand-2-tint);
    --accent-1-tint: var(--wp--preset--color--accent-1-tint);
    --accent-2-tint: var(--wp--preset--color--accent-2-tint);
    --accent-3-tint: var(--wp--preset--color--accent-3-tint);
    --brand-1-neutral: var(--wp--preset--color--brand-1-neutral);
    --brand-2-neutral: var(--wp--preset--color--brand-2-neutral);
    --accent-1-neutral: var(--wp--preset--color--accent-1-neutral);
    --accent-2-neutral: var(--wp--preset--color--accent-2-neutral);
    --accent-3-neutral: var(--wp--preset--color--accent-3-neutral);
    --gray-0: var(--wp--preset--color--gray-0);
    --gray-3: var(--wp--preset--color--gray-3);
    --gray-9: var(--wp--preset--color--gray-9);
    --footer-border: var(--wp--preset--color--footer-border);
    --overlay-blue: var(--wp--preset--color--overlay-blue);
}


/* Global box-sizing reset — match production baseline.
   Prod's legacy theme applies `* { box-sizing: border-box }`; the FSE base
   doesn't. Without it, any element with both `height` and `padding` set (most
   notably Kadence info-box link-wrap, which sets height:100% to equalize cards
   in a row) ends up taller than authored because padding is added to the set
   height. Restore the universal border-box baseline. */
*,
*::before,
*::after {
    box-sizing: border-box;
}


/* ==========================================================================
   Restore Kadence spacing + font-size variables to their plugin defaults
   ==========================================================================
   chickadee/assets/css/src/editor-style.css remaps the --global-kb-spacing-*
   and --global-kb-font-size-* variables to --wp--preset--spacing--{10..100}
   and --wp--preset--font-size--{small..xxx-large}. That works for chickadee
   itself (which defines numeric spacing slugs 10..100 = 0.5rem..10rem) but
   breaks here: UMA's theme.json replaces the parent's spacingSizes array
   with named slugs (x-small..xxxx-large), so the numeric slugs disappear.
   WordPress core defaults then fill in --wp--preset--spacing--20 = 0.44rem
   (1.5x progression), which propagates to Kadence button padding (7.04px
   instead of the 16px prod expects). Same story for font-size--small
   (clamp(.875,.., 1.0625rem) -> 17px vs Kadence's intended 14.4px).

   Restore the Kadence variables to the values in includes/init.php so
   buttons, info boxes, and other Kadence blocks render with the spacing
   and typography Kadence (and prod) were designed around. Loaded after
   chickadee-parent-editor on the frontend, so this wins the cascade.

   ⚠ COMPAT LAYER — Phase 3 removal target. The real fix is in the chickadee
   PARENT: stop remapping --global-kb-* vars (or make it defensive when a
   child uses named spacing slugs). Once the parent is fixed, delete this
   :root block (16 decls + their !important) — every child benefits. */
:root {
    --global-kb-spacing-xxs: 0.5rem !important;
    --global-kb-spacing-xs: 1rem !important;
    --global-kb-spacing-sm: 1.5rem !important;
    --global-kb-spacing-md: 2rem !important;
    --global-kb-spacing-lg: 3rem !important;
    --global-kb-spacing-xl: 4rem !important;
    --global-kb-spacing-xxl: 5rem !important;
    --global-kb-spacing-3xl: 6.5rem !important;
    --global-kb-spacing-4xl: 8rem !important;
    --global-kb-spacing-5xl: 10rem !important;
    --global-kb-font-size-sm: clamp(0.8rem, 0.73rem + 0.217vw, 0.9rem) !important;
    --global-kb-font-size-md: clamp(1.1rem, 0.995rem + 0.326vw, 1.25rem) !important;
    --global-kb-font-size-lg: clamp(1.75rem, 1.576rem + 0.543vw, 2rem) !important;
    --global-kb-font-size-xl: clamp(2.25rem, 1.728rem + 1.63vw, 3rem) !important;
    --global-kb-font-size-xxl: clamp(2.5rem, 1.456rem + 3.26vw, 4rem) !important;
    --global-kb-font-size-xxxl: clamp(2.75rem, 0.489rem + 7.065vw, 6rem) !important;
}


/* Kadence button line-height + inter-button spacing — match production.
   - line-height: theme body uses 1.2 (--wp--custom--line-height--normal); legacy
     site has buttons at 1.6 so they sit taller and the text doesn't crowd the
     padding edges. Apply 1.6 specifically to Kadence buttons.
   - inter-wrap spacing: prod wraps each Kadence button in its own widget section
     which contributes natural 10px gap; FSE inlines them as adjacent siblings
     in area-sidebar-a with no margin between, so add a small top margin to
     adjacent .kb-buttons-wrap blocks to restore visual rhythm. */
.kb-button {
    line-height: 1.6 !important; /* overrides Kadence inline-flex default 1.2 inheritance */
}
.kb-buttons-wrap + .kb-buttons-wrap {
    margin-top: 10px;
}


/* Override Kadence Pro splitcontent default minHeight=450 so blocks size to
   content, matching prod. Authored minHeight values still win via the block's
   per-instance inline CSS (which uses class .kt-sc<uniqueID> + higher specificity). */
.kt-sc-imgcol,
.kt-sc-textcol {
    min-height: 0 !important;
}


/* alignleft / alignright base float — match prod's legacy global.
   WP's modern alignleft float only applies via `.is-layout-flow > .alignleft`
   and `.is-layout-constrained > .alignleft` direct-child selectors. When a
   figure with .alignleft is nested inside a Kadence tab, column, or other
   container that isn't a layout flow/constrained block, neither selector
   matches and the float is lost. Prod's legacy theme had a generic
   `.alignleft { float: left }` rule with no parent constraint. Restore
   it inside body content so nested aligned figures behave consistently. */
.entry-content .alignleft,
.wp-block-post-content .alignleft {
    float: left;
    margin-right: 2em;
    margin-bottom: 1em;
}
.entry-content .alignright,
.wp-block-post-content .alignright {
    float: right;
    margin-left: 2em;
    margin-bottom: 1em;
}


/* alignleft / alignright floats: align with the centered body-text column.
   On page-fullwidth templates, post-content is wider than its
   own contentSize (post-content is full-main-width so alignfull can break out;
   body text inside is constrained + centered). Without this, floated images
   stick to the post-content edges (root-padding distance from viewport),
   stranded ~110px to the left of where centered text starts. This shifts the
   float inward by the same gutter, so badges sit at the body-text column edge. */
body.page-template-page-fullwidth .entry-content.wp-block-post-content > .alignleft {
    margin-left: max(0px, calc((100% - 1140px) / 2));
}
body.page-template-page-fullwidth .entry-content.wp-block-post-content > .alignright {
    margin-right: max(0px, calc((100% - 1140px) / 2));
}


/* Kadence Accordion title font — match body font (Lato).
   The accordion header is rendered as a <button> element; browsers do not
   inherit font-family on form elements by default, so it falls back to the
   browser default (Arial on most). Prod's legacy theme had a global
   form-element font reset; FSE doesn't. Inherit the body font explicitly. */
.kt-blocks-accordion-header {
    font-family: inherit;
}


/* UMS Post Picker card images — constrain to card width.
   The ums-post-picker plugin's CSS doesn't set max-width on its <img>, so
   images render at natural size and overflow the card on staging (the legacy
   theme had a global img { max-width: 100% } reset; FSE doesn't). */
.ums_post_summary-item img,
.ums-post-picker img {
    max-width: 100%;
    height: auto;
}


/* Kadence column.alignfull — break out to viewport edges.
   WP's modern alignfull mechanism (negative margins matching root padding) only
   handles direct children of has-global-padding. When a Kadence column has
   align=full but is nested inside an outer Kadence row that's max-width
   constrained, the inner alignfull can't escape. Prod's legacy theme applied
   the classic 100vw + 50% offset trick. Replicate it here. */
.wp-block-kadence-column.alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}


/* Header, logo, main nav
---------------------------------------------------------------------------- */

/* Header–content left-alignment.
   The header rows center their inner (.kadence-header-row-inner) at the same
   content-size box as page content (max-width 1130px, margin:0 auto) — BUT Kadence
   applies its 20px edge padding INSIDE that max-width, whereas WordPress's matching
   root padding sits OUTSIDE the constrained content (on the .has-global-padding
   band, with the constrained child at the box edge). Net: header content lands 20px
   right of body content on viewports wider than the content size.
   Fix: widen the inner's max-width by 2× the edge padding so its padded content edge
   coincides with the body content's left edge. Tracks both vars, so it stays aligned
   if content-size or padding change. (On narrow viewports the inner is full-width and
   already matched the 20px root padding, so this is a no-op there.) */
/* Selector specificity (0,3,1) — the <header> tag plus the two stable row/inner
   classes — outranks Kadence's (0,3,0) rule that pins the inner to content width
   (.wp-block-kadence-header-row.kb-header-row-layout-standard .kadence-header-row-inner),
   so no !important is needed. */
header.wp-block-kadence-header .wp-block-kadence-header-row .kadence-header-row-inner {
    max-width: calc(
        var(--wp--style--global--content-size, 1130px)
        + 2 * var(--global-content-edge-padding, 20px)
    );
}

.wp-block-kadence-navigation > .navigation > .menu-container > .menu > .wp-block-kadence-navigation-link > .kb-link-wrap,
.wp-block-kadence-navigation .sub-menu > .wp-block-kadence-navigation-link > .kb-link-wrap {
    font-size: var(--wp--preset--font-size--sidebar-link);
}

.site-logo img {
    width: auto;
}


.kb-off-canvas-inner {
    align-items: normal;
}


/* page-feature-sidebar - content max-width override
   Constrains body width at the .content-layout level (1185px design width) while
   alignfull blocks inside can still break out edge-to-edge. */
body.page-template-page-feature-sidebar .content-layout {
    max-width: 1185px !important; /* !important: overrides FSE inline style */
}

/* page-fullwidth hero overlay is handled by the shared .uma-hero-overlay rules
   below (page-fullwidth now uses parts/page-title, like page-feature-sidebar).
   The old .page-header -140px rules were removed when the inline title bar was
   replaced by the shared part. */

/* Hero overlay: push content up over hero (like uma.edu/admission)
   Targets section with .content-wrap--hero-overlay so it works regardless of body class.
   Transparent background so the hero image shows through (theme.json gives core/group white by default). */
.content-wrap--hero-overlay,
section.content-wrap--hero-overlay,
.wp-block-group.content-wrap--hero-overlay {
    background-color: transparent !important; /* !important: overrides FSE inline style */
    background: transparent !important; /* !important: overrides FSE inline style */
}

/* Force Title Bar Outer transparent on feature-sidebar (overrides theme.json core/group default) */
body.page-template-page-feature-sidebar section.wp-block-group.content-wrap.content-wrap--hero-overlay,
body.page-template-page-feature-sidebar .wp-block-group.content-wrap.content-wrap--hero-overlay:first-of-type,
section.content-wrap--hero-overlay.has-gray-0-background-color {
    background-color: transparent !important; /* !important: overrides FSE inline style */
    background: none !important; /* !important: overrides FSE inline style */
}

@media (min-width: 48em ) {
    .content-wrap--hero-overlay,
    section.content-wrap--hero-overlay,
    .wp-block-group.content-wrap--hero-overlay {
        margin-top: -230px !important; /* !important: overrides FSE inline style */
    }
}

/* Hero image height — tablet + desktop (mobile uses the image's natural ratio).
   Shared by page-feature-sidebar AND page-fullwidth (both carry .uma-hero-overlay
   and the parts/page-title bar). */
@media (min-width: 48em ) {
    body.uma-hero-overlay.has-hero-featured-img:not(.home) .hero-featured-img-wrap,
    body.uma-hero-overlay.has-hero-featured-img:not(.home) .hero-featured-img-wrap .kt-row-layout-inner {
        min-height: 70vh !important; /* !important: overrides FSE inline style */
    }
    body.page-template-page-feature-sidebar.has-hero-featured-img .hero-featured-img {
        width: 100%;
        height: 70vh;
        object-fit: cover;
    }
}

/* Title-bar-over-hero overlay — DESKTOP ONLY (>1024px).
   The title band is absolutely positioned with its bottom ~40px above the
   content-wrap top (= hero bottom), so it overlaps the hero while content flows
   below. Below 1025px this is OFF, so the title bar sits in normal flow below
   the hero (hero -> title bar -> content, stacked). The absolute positioning +
   content pull were dragging the content/sidebar up over the hero in the tablet
   range. Shared by page-feature-sidebar AND page-fullwidth. */
@media (min-width: 1025px ) {
    body.uma-hero-overlay.has-hero-featured-img:not(.home) .content-wrap,
    body.uma-hero-overlay.has-hero-featured-img:not(.home) section.content-wrap,
    body.uma-hero-overlay.has-hero-featured-img:not(.home) .wp-block-group.content-wrap {
        position: relative;
        margin-top: 0 !important; /* !important: overrides FSE inline style */
    }
    body.uma-hero-overlay.has-hero-featured-img:not(.home) .page-head {
        position: absolute;
        bottom: calc(100% + 40px); /* sit the band ~40px up on the hero; content stays below the hero */
        left: 0;
        right: 0;
        margin: 0 !important;
        z-index: 10;
    }
    /* Logged-in only: the admin bar's 32px html offset leaves a 32px
       hero->content gap (the 70vh hero doesn't account for it); pull content up
       to close it. Scoped to .admin-bar — anonymous visitors are already correct. */
    body.admin-bar.uma-hero-overlay.has-hero-featured-img:not(.home) .content-wrap {
        margin-top: -32px !important;
    }
    /* Title bar: gap below matches live site */
    body.page-template-page-feature-sidebar .page-header,
    body.page-template-page-feature-sidebar .page-header--overlay {
        margin-bottom: 40px !important; /* !important: overrides FSE inline style */
    }
}

/* Feature-sidebar rowlayout: collapse to one column below desktop, content first.
   Kadence does NOT honor this row's tabletLayout/mobileLayout "collapse" when
   it's rendered from an FSE template — it emits 2-column grids (35/65 at
   <=1024px, repeat(2) at <=767px), so the sidebar + content never stack. Force
   one column, and place the content BEFORE the sidebar when stacked (matches
   prod: sidebar/section-nav comes after the content on tablet+mobile). Scoped to
   the page-feature-sidebar template's row by uniqueID; nested content rowlayouts
   keep their own settings. */
@media (max-width: 1024px) {
    .kb-row-layout-iduma__page-feature-sidebar_5a7b10-dc > .kt-row-column-wrap {
        grid-template-columns: minmax(0, 1fr) !important; /* !important: overrides Kadence's generated grid */
    }
    /* sidebar is the first source column; push it after the content when stacked */
    .kb-row-layout-iduma__page-feature-sidebar_5a7b10-dc > .kt-row-column-wrap > .kadence-columnuma__page-feature-sidebar_436200-d3 {
        order: 2;
    }
}

/* Page feature sidebar overlay template - Hero height */
/* Title bar breadcrumb links: no underline, white, green hover
   Applies to .page-head (sidebar/fullwidth/default templates)
   and .page-header (feature/feature-sidebar/archive templates) */
.page-head .wpseopress-breadcrumbs a,
.page-head [class*="breadcrumb"] a,
.page-header .wpseopress-breadcrumbs a,
.page-header [class*="breadcrumb"] a {
    text-decoration: none;
    color: var(--wp--preset--color--gray-0);
    transition: color 0.3s ease;
}

.page-head .wpseopress-breadcrumbs a:hover,
.page-head .wpseopress-breadcrumbs a:focus,
.page-head [class*="breadcrumb"] a:hover,
.page-head [class*="breadcrumb"] a:focus,
.page-header .wpseopress-breadcrumbs a:hover,
.page-header .wpseopress-breadcrumbs a:focus,
.page-header [class*="breadcrumb"] a:hover,
.page-header [class*="breadcrumb"] a:focus {
    color: var(--wp--preset--color--brand-2);
    background-color: transparent;
}

/* ==========================================================================
   Hero Featured Image - Full Width Stretch
   ========================================================================== */
.hero-featured-img-wrap {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.hero-featured-img-wrap .kt-row-layout-inner {
    background-size: cover !important; /* !important: overrides Kadence inline style */
    background-position: center center !important; /* !important: overrides Kadence inline style */
}

/* Page header overlay positioning */
.page-header--overlay {
    position: relative;
    z-index: 10;
}

@media (max-width: 767px) {
    .page-header--overlay {
        margin-top: 0 !important; /* !important: overrides FSE inline style */
    }
}

/* Fullwidth template: reduce gap between header and content-wrap
   (FSE sets margin-block-start on .wp-site-blocks > * via block gap) */
body.page-template-page-fullwidth .wp-site-blocks > .content-wrap {
    margin-block-start: var(--wp--preset--spacing--small);
}

/* Non-overlay templates: 20px gap between header and title bar,
   85px gap between title bar and content below.
   Descendant (not child) combinator so it still matches when .page-head is
   wrapped in a core/template-part <div> (parts/page-title.html). */
.content-wrap:not(.content-wrap--hero-overlay) .page-head {
    margin-top: -15px !important; /* !important: overrides FSE inline style */
    margin-bottom: 65px !important; /* !important: overrides FSE inline style */
}

/* Sticky header: prevent title from being covered when scrolling back up */
.page-head,
.page-header {
    scroll-margin-top: 120px; /* Reserve space for sticky header when browser scrolls to this element */
}

/* When admin bar is present (logged in), add extra offset */
body.admin-bar .page-head,
body.admin-bar .page-header {
    scroll-margin-top: 152px; /* 120px header + 32px admin bar */
}

/* Title bar: remove default top/bottom padding (inline style sets spacing--small ~16px) */
.page-head,
.page-header {
    padding-top: 0 !important; /* !important: overrides FSE inline style */
    padding-bottom: 0 !important; /* !important: overrides FSE inline style */
}

/* Title bar h1: uppercase + line-height to match live site */
.page-head h1,
.page-header h1 {
    text-transform: uppercase;
    line-height: 60px;
}

.page-head .wpseopress-breadcrumbs,
.page-head [class*="breadcrumb"],
.page-header .wpseopress-breadcrumbs,
.page-header [class*="breadcrumb"] {
    font-size: 18px;
    line-height: 22px;
    padding-bottom: 5px;
}

/* Title bar: restore padding for feature-sidebar (overrides global padding:0 reset) */
body.page-template-page-feature-sidebar .page-header {
    padding-top: var(--wp--preset--spacing--small) !important; /* !important: overrides FSE inline style */
    padding-bottom: var(--wp--preset--spacing--small) !important; /* !important: overrides FSE inline style */
}

/* Title bar background: brand-1 at 0.9 alpha */
.page-head.has-brand-1-background-color,
.page-header.has-brand-1-background-color {
    background-color: rgba(0, 48, 87, 0.9) !important; /* !important: overrides FSE inline style */
}

/* ==========================================================================
   Merged page-feature-sidebar: adaptive title + hero (PROTOTYPE v2)
   ==========================================================================
   One template serves all three former variants, switched by body class:
     - no featured image            -> navy title bar in normal flow
     - featured image, inner page   -> title band overlays hero, content below
     - featured image, homepage     -> title band overlays hero AND the content
                                        card pulls up to overlap the hero
                                        (the uma.edu/academics look), no crumbs
   `.home` distinguishes the homepage (overlay) geometry from inner pages. */
@media (min-width: 48em) {
    /* Shared hero states: navy band overlays the hero image */
    body.page-template-page-feature-sidebar.has-hero-featured-img .page-head {
        margin-top: 0 !important;
        margin-bottom: 40px !important;
    }
    body.page-template-page-feature-sidebar.has-hero-featured-img .hero-featured-img {
        width: 100%;
        height: 70vh;
        object-fit: cover;
    }

    /* Homepage (overlay): deeper pull + content card overlapping the hero */
    body.page-template-page-feature-sidebar.has-hero-featured-img.home .content-wrap {
        margin-top: -230px !important;
    }
    body.page-template-page-feature-sidebar.has-hero-featured-img.home .hero-featured-img-wrap {
        min-height: 70vh;
    }
    body.page-template-page-feature-sidebar.has-hero-featured-img.home .content-layout {
        margin-top: 80px !important; /* overlap depth — content card overlaps the hero bottom (matches prod) */
        padding: 20px 40px 10px 40px !important;
        background-color: var(--wp--preset--color--gray-0) !important; /* white card overlaps hero */
    }
}

/* Subsite home pages on page-fullwidth (e.g. /aihub): give them the same
   title-band-over-hero overlay that INNER pages get — page-head absolutely
   positioned over the hero bottom, content flowing BELOW it on the page's own
   background. page-fullwidth home pages are excluded from the general
   :not(.home) overlay rules and aren't covered by the feature-sidebar home block,
   so they fell through (no overlay at all).
   NOTE: unlike the feature-sidebar home (text content in a white card pulled deep
   over the hero), /aihub's content is Kadence blocks with TRANSPARENT backgrounds
   that sit just below the hero — matches prod uma.edu/aihub (transparent content,
   gentle overlap). So NO white content card and NO deep -230px pull here. Only
   targets .home; inner pages (general rules) and the MetaSlider home (page-home,
   no match) are unaffected. */
@media (min-width: 48em) {
    body.page-template-page-fullwidth.has-hero-featured-img.home .hero-featured-img {
        width: 100%;
        height: 70vh;
        object-fit: cover;
    }
    body.page-template-page-fullwidth.has-hero-featured-img.home .hero-featured-img-wrap {
        min-height: 70vh;
    }
    /* White content CARD pulled up to overlap the hero bottom (prod /aihub look).
       The white background stays on .content-layout (the template's
       has-gray-0-background-color) and that element CONTAINS the cards, so the
       cards sit ON the white card — nothing floats over the green hero. Pull is
       on .content-layout itself (not .content-wrap) so the page-head band keeps
       its own over-hero position. */
    /* Constrain the white card to a centered column (page-fullwidth's content-layout
       is otherwise edge-to-edge, so when pulled up it covers the FULL hero width
       instead of sitting as a card with the hero showing on the sides — the
       feature-sidebar look comes "free" from the sidebar narrowing the content).
       max-width ~= contentSize (1130px) + the card's 40px side padding. */
    body.page-template-page-fullwidth.has-hero-featured-img.home .content-layout {
        margin-top: -150px !important; /* overlap depth over the hero — tune live */
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 1210px !important; /* white card width — tune live */
        position: relative;
        z-index: 2;
    }
}
@media (min-width: 1025px) {
    body.page-template-page-fullwidth.has-hero-featured-img.home .content-wrap {
        position: relative;
        margin-top: 0 !important;
    }
    body.page-template-page-fullwidth.has-hero-featured-img.home .page-head {
        position: absolute;
        bottom: calc(100% + 40px); /* "UMA AI HUB" band overlays the hero bottom */
        left: 0;
        right: 0;
        margin: 0 !important;
        z-index: 10;
    }
}

/* Inner + no-hero feature-sidebar pages: 20px breathing room above the
   content (matches prod). The homepage gets its top spacing from the
   `.home .content-layout` rule above, so scope this to :not(.home). */
body.page-template-page-feature-sidebar:not(.home) .content-layout {
    padding-top: 20px !important; /* !important: overrides FSE inline style */
}

/* Homepages don't need breadcrumbs (the homepage IS the site root).
   `home` body class is present on every site's front page (is_front_page). */
body.home .page-head .wp-block-wpseopress-breadcrumbs,
body.home .page-header .wp-block-wpseopress-breadcrumbs,
body.home .page-head [class*="breadcrumb"],
body.home .page-header [class*="breadcrumb"] {
    display: none !important;
}


/* ==========================================================================
   Responsive: Mobile (≤767px)
   ========================================================================== */
@media (max-width: 767px) {
    /* Hero: shrink on mobile. The hero is a Kadence rowlayout whose min-height
       (70vh, baked into the block) sits on its .kt-row-column-wrap grid
       (kbVersion 2 — there is NO .kt-row-layout-inner) and applies at every
       width, so override that exact element. The hero part is shared, so this
       uniqueID matches the hero on every feature-sidebar/fullwidth page. */
    .kb-row-layout-iduma__hero-featured-img_7a2cec-b5 > .kt-row-column-wrap {
        min-height: 40vh !important; /* !important: overrides Kadence's generated 70vh */
    }

    /* Title bar: reduce h1 and breadcrumbs on mobile */
    .page-head h1,
    .page-header h1 {
        font-size: var(--wp--preset--font-size--heading-2);
        line-height: 1.2;
        letter-spacing: 0.1em;
    }

    .page-head .wpseopress-breadcrumbs,
    .page-head [class*="breadcrumb"],
    .page-header .wpseopress-breadcrumbs,
    .page-header [class*="breadcrumb"] {
        font-size: 14px;
        line-height: 18px;
    }

    /* Footer: shrink social icons on mobile */
    .main-footer .wp-block-social-links .wp-social-link svg {
        width: 60px;
        height: 60px;
    }

    .main-footer .wp-block-social-links {
        margin-bottom: 100px;
    }

    /* Content area: add side padding on small screens */
    .content-wrap .content-layout {
        padding-left: var(--wp--preset--spacing--small);
        padding-right: var(--wp--preset--spacing--small);
    }
}

/* Tablet hero-height rules removed: they set the hero SECTION (.hero-featured-img)
   to height:50vh (500px) while the .hero-featured-img-wrap inside stayed 70vh
   (700px, the more-specific :48em rule won), so the wrap overflowed the section
   by 200px and content flowed up under the hero (the tablet overlap). With these
   gone the hero is a consistent 70vh at tablet (section sizes to the 70vh wrap),
   which also matches prod's taller hero. Mobile height is handled below by
   overriding the Kadence row's min-height. */


/* Content area width: match old theme fixed width (1130px)
   Ensures content doesn't expand to full browser when root padding is removed */
.content-wrap .content-layout,
.content-wrap--hero-overlay .content-layout {
    max-width: 1130px;
    margin-left: auto;
    margin-right: auto;
}

/* Fullwidth template: let content-layout go full viewport so alignfull blocks
   (Kadence Sections) can stretch edge-to-edge. post-content handles the 1140px
   constraint for normal blocks. */
body.page-template-page-fullwidth .content-wrap .content-layout {
    max-width: none;
}


/* Breathing room between main content and footer */
.content-wrap {
    padding-bottom: 30px;
}

/* Advanced Sidebar Nav Block Styles
---------------------------------------------------------------------------- */
.advanced-sidebar-menu ul,
.advanced-sidebar-menu ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.advanced-sidebar-menu .current-menu-item > a {
    border-left: 8px solid var(--wp--preset--color--brand-2);
    background-color: var(--wp--preset--color--brand-2-neutral);
    margin-left: -8px;
    font-weight: 300;
}
.advanced-sidebar-menu .menu-item {
    line-height: 1.5em;
}
.advanced-sidebar-menu .menu-item a {
    display: block; /* wrapped lines hang-indent to padding-left; some widget instances omit this */
    border-bottom: 1px solid var(--wp--preset--color--brand-2-neutral);
    color: var(--wp--preset--color--gray-9);
    font-size: var(--wp--preset--font-size--sidebar-link);
    padding: 5px 25px 5px 10px !important; /* !important: overrides Kadence inline style */
    text-decoration: none;
}
.advanced-sidebar-menu .menu-item a:hover {
    text-decoration:underline;
    color: var(--wp--preset--color--accent-1);
    border-left: 8px solid var(--wp--preset--color--brand-2);
    margin-left: -8px;
    padding-left: 8px;
    transition: border-left .15s,padding-left .25s,margin-left .5s;
}
.advanced-sidebar-menu .sub-menu .menu-item a {
    margin-left: 0.75em;
}


/* Sidebar-A link styles
---------------------------------------------------------------------------- */
/* All sidebar links - no underlines or color change on hover */
body .area-sidebar-a a,
body .wp-block-chickadee-template-area[data-area="sidebar-a"] a {
    text-decoration: none;
}

body .area-sidebar-a a:not(.kb-button):not(.kt-button):hover,
body .wp-block-chickadee-template-area[data-area="sidebar-a"] a:not(.kb-button):not(.kt-button):hover {
    text-decoration: underline;
    color: var(--wp--preset--color--accent-1);
}



/* Footer Navigation Styles
---------------------------------------------------------------------------- */
.wp-block-column .wp-block-navigation {
    margin-top: 10px;
}

.wp-block-column .wp-block-navigation__container {
    list-style: none;
    margin: 0;
    padding: 0;
    row-gap: 0;
    gap: 0;
}

.wp-block-column .wp-block-navigation-item {
    margin-bottom: 0;
}

.wp-block-column .wp-block-navigation-link {
    margin: 0;
    padding: 0;
}

.wp-block-column .wp-block-navigation-link a {
    color: var(--wp--preset--color--gray-0); /* Default link color (White) */
    text-decoration: none;
    display: inline-block; /* Allows padding/margin if needed */
    transition: color 0.3s ease;
}

.wp-block-column .wp-block-navigation-link a:hover,
.wp-block-column .wp-block-navigation-link a:focus {
    color: var(--wp--preset--color--brand-2); /* UMA Green on hover/focus */
    text-decoration: underline;
}


/* Footer styling is block-attribute driven: the .main-footer group sets
   backgroundColor (brand-1), border-top, min-height, and elements.link colors;
   the column h3s set textColor (gray-0) + textTransform (uppercase); footer
   paragraphs set textColor. The old `.wp-block-template-part[data-area="footer"]`
   rules that duplicated bg/border/color/uppercase were removed 2026-06-10 — they
   never matched (the footer renders as `.main-footer`, not a core template-part)
   and were redundant with those attributes. Live .main-footer rules below cover
   what can't be a block attribute (bg !important to beat Kadence, the shield
   ::before overlay, social/nav specifics). */

/* Link color and hover set on the footer group block via elements.link */
.main-footer a {
    /* .main-footer a (0,2,0) already out-specifies FSE's :where()-wrapped link
       element style, so no !important is needed here. */
    text-decoration: none;
    border-bottom: none;
}

.main-footer a:hover {
    text-decoration: underline;
}

.footer-nav-list li {
    min-height: 25px;
}

/* List block: "no bullets" style (referenced in footer + sidebar News list) */
.wp-block-list.is-style-no-bullets,
ul.is-style-no-bullets {
    list-style: none;
    padding-left: 0;
}

/* UMA News sidebar widget — hide bullets until replaced by styled post picker */
ul.ums_post_link_list_ul {
    list-style: none;
    padding-left: 0;
}

ul.ums_post_link_list_ul li + li {
    margin-top: 0.75em;
}

/* Main content H2/H3: sentence/title case (theme.json no longer sets uppercase globally) */
.wp-block-post-content .wp-block-heading,
.wp-block-post-content h2,
.wp-block-post-content h3,
.wp-block-post-content h4 {
    text-transform: none;
}

/* h2 margin: 10px bottom to match production (e.g. /academics/programs/) */
.wp-block-post-content.is-layout-flow > h2,
.wp-block-post-content .is-layout-flow > h2 {
    margin-bottom: 10px;
}

/* h3/h4 margin: override blockGap (flow layout uses :where() so these selectors win) */
.wp-block-post-content.is-layout-flow > h3,
.wp-block-post-content .is-layout-flow > h3 {
    margin-top: 10px;
    margin-bottom: 10px;
}

.wp-block-post-content.is-layout-flow > h4,
.wp-block-post-content .is-layout-flow > h4 {
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Stacked Kadence rowlayouts: drop the FSE flow block-gap between rows. Each
   Kadence row already supplies its own vertical rhythm via the inner
   .kt-row-column-wrap padding (24px top/bottom), so the global block-gap (30px,
   set in theme.json styles.spacing.blockGap) on top of that just over-spaces
   consecutive rows. Zero it BETWEEN rows; the row padding still separates them,
   and the global 30px gap still applies to hero/section spacing elsewhere.
   (0,2,0) out-specifies the flow layout's :where()-wrapped gap rule, so no
   !important needed. */
.wp-block-post-content.is-layout-flow > .wp-block-kadence-rowlayout,
.wp-block-post-content .is-layout-flow > .wp-block-kadence-rowlayout {
    margin-block-start: 0;
}

/* Sidebar nav H2: sentence/title case (not all caps); 10px margin top/bottom */
.wp-block-post-content .inner-column-1 h2.wp-block-heading,
.area-sidebar-a h2.wp-block-heading {
    text-transform: none;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Main content first H2 (e.g. "Your Career Starts Here!" on /academics/programs/): 10px margin-top */
.wp-block-post-content.is-layout-flow > h2:first-of-type {
    margin-top: 10px;
}

/* Long unbreakable tokens (emails, URLs) in page content wrap instead of
   overflowing their container — the legacy Virtue theme set word-wrap:break-word
   globally; the FSE theme otherwise drops it. UMA 2026-06-26. */
.wp-block-post-content {
    overflow-wrap: break-word;
}

/* Main content links: WCAG 2.1 SC 1.4.1 (Level A) / Technique G183.
   No underline at rest (UMA design preference, 2026-06-25); the underline appears
   on hover AND focus, plus a focus-visible ring (SC 2.4.7).
   ⚠ COMPLIANCE CAVEAT: with no at-rest underline, 1.4.1 is satisfied ONLY by the
   link-vs-body-text contrast carrying the resting distinction — currently 3.22:1
   (accent-1 #00629B vs gray-9 #000), which clears the 3:1 G183 floor. This is tied
   to the still-pending gray-9 #000 decision: if body reverts to #302322 the ratio
   drops to 2.32:1 and content links FAIL 1.4.1 — restore an at-rest underline then.
   Scoped to true content links: buttons, read-more, and embedded advanced-sidebar
   menus are excluded. See a11y-link-in-text-block-decision.md (Option B variant). */
body .wp-block-post-content a {
    text-decoration: none;
}

body .wp-block-post-content a:not(.advanced-sidebar-menu *):not(.kb-button):not(.kt-button):not(.kt-blocks-post-readmore):not(.kt-excerpt-readmore):hover,
body .wp-block-post-content a:not(.advanced-sidebar-menu *):not(.kb-button):not(.kt-button):not(.kt-blocks-post-readmore):not(.kt-excerpt-readmore):focus {
    text-decoration: underline;
    text-underline-offset: 2px;
    color: var(--wp--preset--color--brand-1);
}

body .wp-block-post-content a:not(.advanced-sidebar-menu *):not(.kb-button):not(.kt-button):not(.kt-blocks-post-readmore):not(.kt-excerpt-readmore):focus-visible {
    outline: 2px solid var(--wp--preset--color--accent-1);
    outline-offset: 2px;
}

/* Main content list items: tighter spacing to match production */
.wp-block-post-content li {
    margin-bottom: 5px;
}

/* Separator styling lives in assets/css/blocks/core--separator.css (loaded
   only when the block is present); vertical margins in theme.json. */

.bottom-footer-nav .wp-block-navigation-item:not(:last-child)::after {
    content: "|";
    color: var(--wp--preset--color--gray-0);
    margin-left: 0.5em;
    margin-right: 0.5em;
    text-decoration: none;
}
.bottom-footer-nav .wp-block-navigation__container {
    column-gap: 0;
    gap: 0;
}
.main-footer {
    /* min-height is now the group block's dimensions.minHeight attribute (540px) */
    background-color: var(--wp--preset--color--brand-1) !important; /* !important: overrides Kadence inline style */
}
.main-footer::before {
    content: "";
    background-image: url(../../img/uma-shield-footer.png);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.33;
    background-repeat: no-repeat;
    background-position: right -145px top 35px;
    z-index: 0;
}
.main-footer > * {
    position: relative;
    z-index: 1;
}
.main-footer .wp-block-social-links {
    gap: 0;
    margin-bottom: 200px;
}
.main-footer .wp-block-social-links .wp-social-link svg {
    width: 93px;
    height: 93px;
    transition: fill 0.3s ease;
}
.main-footer .wp-block-social-links .wp-social-link:hover svg,
.main-footer .wp-block-social-links .wp-social-link a:focus svg,
.main-footer .wp-block-social-links .wp-social-link a:focus-visible svg {
    fill: var(--wp--preset--color--brand-2);
}
.main-footer p {
    margin: 0;
}


/* Blog grid, post cards, single post, pagination → per-block CSS files:
   core--post-template.css, core--post-content.css, core--query-pagination.css */
/* Template layout: remove body side padding for sidebar/feature templates */
body.home .wp-site-blocks,
body.page-template-page-feature-sidebar .wp-site-blocks {
    padding-left: 0 !important; /* !important: overrides FSE inline style */
    padding-right: 0 !important; /* !important: overrides FSE inline style */
}

body.page-template-page-feature-sidebar {
    overflow-x: hidden;
}

/* Homepage styles → assets/css/src/homepage.css (conditionally loaded on front page) */


/* ==========================================================================
   Icon Link Card Pattern (Kadence Info Box)
   ========================================================================== */
.kb-info-boxuma_icon-card_info_01 .kt-blocks-info-box-link-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.kb-info-boxuma_icon-card_info_01 .kt-blocks-info-box-media-container {
    width: 100%;
    text-align: center;
}

.kb-info-boxuma_icon-card_info_01 .kt-infobox-textcontent {
    width: 100%;
    text-align: center;
}

/* ==========================================================================
   Kadence Column: restore float behaviour for alignleft/alignright images
   .kt-inside-inner-col uses flex-direction:column which suppresses floats.
   Switch to block display when an aligned image is present.
   ========================================================================== */
.kt-inside-inner-col:has(> .alignleft),
.kt-inside-inner-col:has(> .alignright) {
    display: block !important; /* !important: overrides Kadence inline style */
}

.kt-inside-inner-col > .alignleft {
    float: left;
    margin-right: 1em;
    margin-bottom: 0.5em;
}

.kt-inside-inner-col > .alignright {
    float: right;
    margin-left: 1em;
    margin-bottom: 0.5em;
}

/* ==========================================================================
   Kadence Button Styles
   ========================================================================== */
/* Kadence outline buttons: let each button's own inline color attribute
   apply (e.g., var(--brand-1) navy on light bg, or white on dark bg).
   A previous rule forced all outline buttons to white text with !important,
   which was correct on dark sections but broke buttons on light backgrounds
   (/academics/advising/registration/ had invisible white-on-pale-blue text).
   Removed — if a specific dark-bg context needs white outline buttons, scope
   it to that context's parent class. */

/* Kadence Post Grid / Classic WP Pagination
---------------------------------------------------------------------------- */
.kt-blocks-page-nav .navigation.pagination .nav-links {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

.kt-blocks-page-nav .nav-links .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.2em;
    height: 2.2em;
    padding: 0;
    border: 1px solid var(--wp--preset--color--gray-3, #ccc);
    color: var(--wp--preset--color--brand-1);
    text-decoration: none;
    font-size: 14px;
    line-height: 1;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.kt-blocks-page-nav .nav-links .page-numbers.current {
    background-color: var(--wp--preset--color--brand-1);
    border-color: var(--wp--preset--color--brand-1);
    color: var(--wp--preset--color--gray-0, #fff);
    font-weight: 600;
}

.kt-blocks-page-nav .nav-links .page-numbers:hover:not(.current),
.kt-blocks-page-nav .nav-links .page-numbers:focus:not(.current) {
    background-color: var(--wp--preset--color--gray-2, #f0f0f0);
    border-color: var(--wp--preset--color--accent-1);
    color: var(--wp--preset--color--accent-1);
}

.kt-blocks-page-nav .nav-links .page-numbers.dots {
    border: none;
    padding: 0 0.15em;
    min-width: auto;
}

/* Anchor links — offset for sticky header (site-wide) */
.anchor-target {
    scroll-margin-top: 120px !important; /* !important: overrides FSE inline style */
}

/* Kadence sticky header — smooth the reveal-on-scroll-up animation (site-wide,
   the global header is on every page).
   (pattern from UM, per Eric). On UM the sticky wrapper IS the header
   container, so `.kb-header-container.kb-header-sticky-wrapper` works.
   On UMA, data-sticky-section="top_main" makes Kadence wrap the top+center
   rows in a fresh <div class="kb-header-sticky-wrapper">, so we target the
   sticky wrapper class alone. */
.kb-header-sticky-wrapper {
    transition: top 0.2s ease-in-out;
}

/* The Events Calendar (tribe) + UMS Post Picker event layout → assets/css/src/events.css
   (conditionally enqueued when The Events Calendar is active for the request).
   Moved out of the always-loaded style.css in the CSS lean-down. */


/* Horizon tab menu → advanced-sidebar-menu--navigation.css */

/* Google Custom Search (.gsc-* / .gs-*) results styling → assets/css/src/search.css
   (conditionally enqueued on is_search() only — the Google CSE widget renders
   on the search-results page and nowhere else). Moved out of the always-loaded
   style.css in the CSS lean-down. */

/* EdSights chatbot color fix (site-wide chatbot, loads on every page) */
.sc-header--title,
.sc-header--close-button,
.sc-message--text-content {
    color: var(--wp--preset--color--brand-1) !important; /* !important: overrides the EdSights chatbot's inline styles */
}


/* ==========================================================================
   Homepage Hero Slider Accessibility Overrides
   ==========================================================================
   The homepage hero uses MetaSlider Pro with per-slider inline CSS that sets
   white PNG sprite arrows on transparent backgrounds. Over bright slide
   photos WAVE flags the arrows for contrast failure (white on variable bg).
   Fix: semi-opaque dark chip behind the sprite + focus ring for keyboard
   users. Scoped to `.home-hero-slider` only — other MetaSlider instances
   (e.g., the news slider) either hide their arrows off-screen or have
   different visual contexts that shouldn't inherit this treatment.

   The `:not(.flex-disabled)` guards are load-bearing (#158): FlexSlider hides
   the arrows on a single-slide slider with `.flex-direction-nav .flex-disabled
   { opacity: 0 !important }`. Both declarations are !important, so specificity
   decides — and these selectors far outweigh MetaSlider's two-class rule, which
   forced disabled arrows back to opacity:1 AND painted the chip behind them.
   Keep the guards on any new rule added here. */
.home-hero-slider .metaslider .flexslider:not(.filmstrip) .flex-direction-nav .flex-prev:not(.flex-disabled),
.home-hero-slider .metaslider .flexslider:not(.filmstrip) .flex-direction-nav .flex-next:not(.flex-disabled) {
    /* Fill the sprite's transparent pixels behind the arrow so the halo
       reads as a solid chip and contrast is deterministic. */
    background-color: rgba(0, 0, 0, 0.5) !important; /* !important: overrides MS's `background: transparent` shorthand */
    opacity: 1 !important; /* !important: overrides MS's hover-only opacity:0 rule */
    border-radius: 6px !important;
    /* box-shadow spread paints a chip AROUND the element without resizing it,
       so MS's sprite background-position math isn't disturbed. */
    box-shadow: 0 0 0 9px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.25) !important;
    transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
}
.home-hero-slider .metaslider .flexslider:not(.filmstrip) .flex-direction-nav .flex-prev:not(.flex-disabled):hover,
.home-hero-slider .metaslider .flexslider:not(.filmstrip) .flex-direction-nav .flex-next:not(.flex-disabled):hover,
.home-hero-slider .metaslider .flexslider:not(.filmstrip) .flex-direction-nav .flex-prev:not(.flex-disabled):focus,
.home-hero-slider .metaslider .flexslider:not(.filmstrip) .flex-direction-nav .flex-next:not(.flex-disabled):focus {
    background-color: rgba(0, 0, 0, 0.8) !important;
    box-shadow: 0 0 0 9px rgba(0, 0, 0, 0.8), 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}
.home-hero-slider .metaslider .flexslider:not(.filmstrip) .flex-direction-nav .flex-prev:not(.flex-disabled):focus-visible,
.home-hero-slider .metaslider .flexslider:not(.filmstrip) .flex-direction-nav .flex-next:not(.flex-disabled):focus-visible {
    outline: 3px solid #fff !important;
    outline-offset: 12px; /* sit outside the box-shadow halo */
}




/* UMS Alerter banners — UMA overrides
   The ums-alerter plugin auto-enqueues default CSS at
   fse-plugins/plugins/ums-alerter/assets/css/ums-alerter-{announcement,emergency}.css.
   Its announcement yellow (#fbd874) matches legacy UMA, but its emergency
   background (#C45945 dark orange) does not. Override colors + wrapper to
   match legacy (Virtue-era) UMA: 1120px max width, Lato, 18px, left-aligned,
   5px padding.

   The banner is placed via the ums-alerter "Alerts Container" block (block
   display mode) in parts/header.html, rendered at the top of the page. These
   overrides style that markup (and the plugin's default output) regardless of
   where the block is placed.
---------------------------------------------------------------------------- */
.ums-emergency {
    background-color: #E10000; /* Legacy UMA emergency red (Virtue skin uma.css) */
    color: #fff;
    font-weight: 400; /* Override plugin's 300 */
}

.ums-announcement {
    background-color: #fbd874; /* Legacy UMA announcement yellow */
    color: #000;
    font-weight: 400; /* Override plugin's 300 */
}

.ums-emergency-wrapper,
.ums-announcement-wrapper {
    padding: 5px;
    max-width: 1120px;
    margin: 0 auto;
    font-size: 18px;
    font-family: "Lato", sans-serif;
    text-align: left; /* Override plugin's centered alignment */
}

.ums-emergency-content,
.ums-announcement-content {
    padding: 0; /* Override plugin's 20px 40px */
}

.ums-emergency-content p,
.ums-announcement-content p {
    display: block;
    text-align: left;
    padding: 5px;
    margin: 0;
}

.ums-emergency-title-date,
.ums-announcement-title-date {
    font-weight: 700;
}