/* =============================================================
   Section kit — block styles borrowed from the Scholars template
   (css/umbc-scholars.css), made reusable on any page.

   Registered in umbc-blocks/register_blocks.php. Editors pick them from a
   block's Styles panel:
     Paragraph → Eyebrow label, Big number
     Heading   → Section title
     Group     → Band – gray / dark / teal / gold,
                 Card – lifted / soft gray / teal tint / teal / gold / dark
     List      → Callout
     Cover     → Hero

   House rules (JBB, 2026-09-30):
   - No borders on cards at all (no hairlines, no one-sided rules). Cards get
     their character from surface, depth, shape and the CTA arrow.
   - No Retriever-brown/dark-gold text. Light surfaces use AOK Teal
     (#007176, 5.7:1 on white) and UMBC Dark Gray (#636466, 5.9:1).
     Brand gold is used only on dark surfaces.
   - Eyebrows only where they carry information the heading doesn't
     (an address, a place). Never a restatement of the heading.

   Whole-card links: give the card's link paragraph the extra CSS class
   "card-cta" and the entire card becomes the click target. Hover motion is
   inside (hover: hover) so touch devices go straight to the link.
   ============================================================= */

:root {
    --kit-gold: #fdb515;
    --kit-black: #1a1a1a;
    --kit-gray-100: #f5f5f3;
    --kit-hairline: #deded9;
    --kit-muted: #4a4a46;
    --kit-gray-text: #636466;
    --kit-teal: #007176;
    --kit-teal-tint: #e8f2f2;
    --kit-card-bg: #ffffff;
    --kit-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 6px 18px rgba(0, 0, 0, 0.05);
    --kit-card-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.08), 0 16px 34px rgba(0, 0, 0, 0.1);
    --kit-radius: 10px;
    --kit-band-pad: clamp(2rem, 4.5vw, 3.5rem);
}

/* ── Eyebrow label ─────────────────────────────────────────── */
:is(.entry-content, .editor-styles-wrapper) p.is-style-eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--kit-teal);
    margin-bottom: 0.5rem !important;
}
/* Beats css/style.css ".wp-block-group :where(h2):not(:first-child) { margin-top: 1.5rem !important }". */
:is(.entry-content, .editor-styles-wrapper) p.is-style-eyebrow + :is(h1, h2, h3) {
    margin-top: 0 !important;
}

/* ── Section title ─────────────────────────────────────────── */
h2.is-style-section-title,
h3.is-style-section-title {
    font-size: clamp(1.9rem, 3.2vw, 2.75rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--kit-black);
    margin-top: 0;
    margin-bottom: 1rem;
}
:is(.entry-content, .editor-styles-wrapper) h2.is-style-section-title + p {
    font-size: 1.125rem;
    color: var(--kit-muted);
    max-width: 62ch;
}

/* ── Big number ────────────────────────────────────────────── */
:is(.entry-content, .editor-styles-wrapper) p.is-style-big-number {
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--kit-teal);
    margin-bottom: 0.35rem !important;
}
p.is-style-big-number + p {
    margin-top: 0;
    color: var(--kit-muted);
}

/* ── Bands ─────────────────────────────────────────────────── */
.wp-block-group:is(.is-style-band-gray, .is-style-band-dark, .is-style-band-teal, .is-style-band-gold) {
    padding: var(--kit-band-pad) clamp(1.25rem, 4vw, 3rem);
    margin-block: 0;
}
.wp-block-group.is-style-band-gray { background: var(--kit-gray-100); }
.wp-block-group.is-style-band-dark { background: var(--kit-black); color: #ffffff; }
.is-style-band-dark h2,
.is-style-band-dark h3,
.is-style-band-dark h4 { color: #ffffff; }
.is-style-band-dark p.is-style-big-number,
.is-style-band-dark p.is-style-eyebrow,
.is-style-band-dark a:not(.wp-block-button__link) { color: var(--kit-gold); }
:is(.entry-content, .editor-styles-wrapper) .is-style-band-dark p:not(.is-style-eyebrow):not(.is-style-big-number),
:is(.entry-content, .editor-styles-wrapper) .is-style-band-dark li {
    color: rgba(255, 255, 255, 0.86);
}
.is-style-band-dark h2.is-style-section-title { margin-bottom: 1.75rem; }

/* ── Cards ─────────────────────────────────────────────────── */
/* No borders on any card (JBB, 2026-09-30). Surfaces:
   card       — Card – lifted: white, layered shadow, no outline
   card-soft  — Card – soft gray: flat warm gray; white when on a gray band
   card-tint  — Card – teal tint: flat AOK Teal tint
   card-teal  — Card – teal: solid AOK Teal, white type, gold arrow
   card-gold  — Card – gold: solid UMBC Gold, black type, black arrow
   card-dark  — Card – dark: UMBC black, white type, gold arrow */
.wp-block-group:is(.is-style-card, .is-style-card-soft, .is-style-card-tint, .is-style-card-teal, .is-style-card-gold, .is-style-card-dark) {
    position: relative;
    background: var(--kit-card-bg);
    border: 0;
    border-radius: var(--kit-radius);
    box-shadow: var(--kit-card-shadow);
    padding: 1.6rem 1.6rem 1.4rem;
    height: 100%;
    color: var(--kit-black);
    text-align: left !important;
}
.wp-block-group.is-style-card-soft { background: var(--kit-gray-100); box-shadow: none; }
.is-style-band-gray .wp-block-group.is-style-card-soft { background: #ffffff; }
.wp-block-group.is-style-card-tint { background: var(--kit-teal-tint); box-shadow: none; }
.is-style-band-gray .wp-block-group.is-style-card-tint { background: #ffffff; }
.wp-block-group.is-style-card-teal { background: var(--kit-teal); color: #ffffff; box-shadow: none; }
.wp-block-group.is-style-card-gold { background: var(--kit-gold); color: var(--kit-black); box-shadow: none; }
.wp-block-group.is-style-card-dark { background: var(--kit-black); color: #ffffff; }

/* Cards fill their column so a row of cards lines up. */
.wp-block-column:has(> .wp-block-group[class*="is-style-card"]) {
    display: flex;
    flex-direction: column;
}
.wp-block-column > .wp-block-group[class*="is-style-card"] { flex: 1 1 auto; }

:is(.entry-content, .editor-styles-wrapper) .wp-block-group[class*="is-style-card"] > * { margin-block: 0 !important; text-align: left !important; }
:is(.entry-content, .editor-styles-wrapper) .wp-block-group[class*="is-style-card"] > * + * { margin-top: 0.6rem !important; }
/* Theme layout rules give child blocks auto side margins and a narrower width, which
   floats short lines (titles, links) to the middle of the card. Pin them left. */
:is(.entry-content, .editor-styles-wrapper) .wp-block-group[class*="is-style-card"] > * {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
:is(.entry-content, .editor-styles-wrapper) .wp-block-group[class*="is-style-card"] > :not(figure):not(.wp-block-buttons) { width: 100%; }
.wp-block-group[class*="is-style-card"] h3,
.wp-block-group[class*="is-style-card"] h4 {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: inherit;
}
.wp-block-group[class*="is-style-card"] p { color: var(--kit-muted); }
.wp-block-group[class*="is-style-card"] p.is-style-eyebrow { color: var(--kit-teal); }
.wp-block-group.is-style-card-dark p { color: rgba(255, 255, 255, 0.82); }
.wp-block-group.is-style-card-dark p.is-style-eyebrow { color: var(--kit-gold); }
.wp-block-group.is-style-card-dark a:not(.wp-block-button__link) { color: var(--kit-gold); }

/* Big number at the top of a card: a numbered marker (e.g. drop-off stands). */
.wp-block-group[class*="is-style-card"] > p.is-style-big-number:first-child {
    font-size: 2.5rem;
    color: var(--kit-teal);
}
.wp-block-group.is-style-card-dark > p.is-style-big-number:first-child { color: var(--kit-gold); }

/* Card image runs edge to edge across the top. */
:is(.entry-content, .editor-styles-wrapper) .wp-block-group[class*="is-style-card"] > figure:first-child {
    margin: -1.6rem -1.6rem 1rem !important;
    max-width: none !important;
    width: calc(100% + 3.2rem);
}
.wp-block-group[class*="is-style-card"] > figure:first-child img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: calc(var(--kit-radius) - 1px) calc(var(--kit-radius) - 1px) 0 0;
    display: block;
}
.wp-block-group[class*="is-style-card"] > figure:first-child + * { margin-top: 0 !important; }

/* Card call to action: bold teal text with a round arrow that slides on hover;
   the link is stretched over the whole card. */
:is(.entry-content, .editor-styles-wrapper) .wp-block-group[class*="is-style-card"] > p.card-cta { margin-top: auto !important; }
.wp-block-group[class*="is-style-card"]:has(p.card-cta) {
    display: flex;
    flex-direction: column;
}
.wp-block-group[class*="is-style-card"] p.card-cta { padding-top: 1rem; font-weight: 700; }
.wp-block-group[class*="is-style-card"] p.card-cta a {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--kit-teal);
    text-decoration: none;
}
.wp-block-group[class*="is-style-card"] p.card-cta a::before {
    /* the round arrow chip, drawn after the text via order. flex: none keeps it a
       circle when the link text wraps to two lines (it was shrinking into an oval). */
    content: "\2192";
    content: "\2192" / "";
    order: 2;
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 1.6em;
    height: 1.6em;
    border-radius: 50%;
    background: var(--kit-teal);
    color: #ffffff;
    font-size: 0.8em;
    line-height: 1;
    transition: transform 0.15s ease;
}
.wp-block-group.is-style-card-dark p.card-cta a { color: var(--kit-gold); }
.wp-block-group.is-style-card-dark p.card-cta a::before { background: var(--kit-gold); color: var(--kit-black); }
.wp-block-group[class*="is-style-card"] p.card-cta a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--kit-radius);
}
.wp-block-group[class*="is-style-card"]:has(p.card-cta a:focus-visible) {
    outline: 3px solid var(--kit-teal);
    outline-offset: 3px;
}
.wp-block-group[class*="is-style-card"] p.card-cta a:focus-visible { outline: none; }
@media (hover: hover) {
    .wp-block-group[class*="is-style-card"]:has(p.card-cta) {
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }
    .wp-block-group[class*="is-style-card"]:has(p.card-cta):hover {
        transform: translateY(-3px);
        box-shadow: var(--kit-card-shadow-hover);
    }
    .wp-block-group[class*="is-style-card"]:has(p.card-cta):hover p.card-cta a::before { transform: translateX(4px); }
    .wp-block-group[class*="is-style-card"] p.card-cta a:hover { text-decoration: underline; }
}
@media (prefers-reduced-motion: reduce) {
    @media (hover: hover) {
.wp-block-group[class*="is-style-card"]:has(p.card-cta):hover,.wp-block-group[class*="is-style-card"]:has(p.card-cta):hover p.card-cta a::before { transform: none; }
}
}

/* ── Callout list: a tinted box, no side rule ──────────────── */
ul.is-style-callout {
    background: var(--kit-teal-tint);
    border-radius: var(--kit-radius);
    padding: 1.25rem 1.5rem 1.25rem 2.5rem;
}
.is-style-band-gray ul.is-style-callout { background: #ffffff; }
ul.is-style-callout li + li { margin-top: 0.5rem; }
ul.is-style-callout li::marker { color: var(--kit-teal); }

/* ── Hero (Cover) ──────────────────────────────────────────── */
.wp-block-cover.is-style-hero {
    align-items: flex-end;
    padding: clamp(1.5rem, 5vw, 3.5rem) !important;
}
.wp-block-cover.is-style-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0.05) 100%);
}
.wp-block-cover.is-style-hero .wp-block-cover__inner-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 52rem;
    margin-inline: 0;
    color: #ffffff;
}
.wp-block-cover.is-style-hero p.is-style-eyebrow { color: var(--kit-gold); }
.wp-block-cover.is-style-hero h1 {
    font-size: clamp(2.4rem, 6vw, 4rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: #ffffff;
    margin: 0 0 0.75rem !important;
}
.wp-block-cover.is-style-hero h1 + p {
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    color: rgba(255, 255, 255, 0.9);
    max-width: 42rem;
}

/* Ghost buttons on dark surfaces (mirrors .dark-bg in umbc-buttons.css). */
:is(.is-style-band-dark, .is-style-hero, .is-style-card-dark) .wp-block-button.is-style-ghost-gold > .wp-block-button__link {
    color: #ffffff;
    border-color: var(--kit-gold);
}
@media (hover: hover) {
:is(.is-style-band-dark, .is-style-hero, .is-style-card-dark) .wp-block-button.is-style-ghost-gold > .wp-block-button__link:hover {
    background-color: var(--kit-gold);
    color: var(--kit-black);
}
}

/* ── Dark mode ─────────────────────────────────────────────── */
[data-theme="dark"] {
    --kit-gray-100: #232323;
    --kit-hairline: #3a3a3a;
    --kit-card-bg: #2a2a2a;
    --kit-card-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
    --kit-card-shadow-hover: 0 4px 18px rgba(0, 0, 0, 0.6);
    --kit-muted: #c9c9c4;
    --kit-teal-tint: #173536;
}
/* AOK Teal is too dark on dark surfaces; use a lighter teal for text there. */
[data-theme="dark"] p.is-style-eyebrow,
[data-theme="dark"] p.is-style-big-number,
[data-theme="dark"] .wp-block-group[class*="is-style-card"] > p.is-style-big-number:first-child,
[data-theme="dark"] .wp-block-group[class*="is-style-card"] p.card-cta a,
[data-theme="dark"] ul.is-style-callout li::marker { color: #6cc5c9; }
[data-theme="dark"] .wp-block-group[class*="is-style-card"] p.card-cta a::before { background: #6cc5c9; color: #0e0e0e; }
[data-theme="dark"] h2.is-style-section-title,
[data-theme="dark"] h3.is-style-section-title,
[data-theme="dark"] .wp-block-group[class*="is-style-card"] { color: #ffffff; }
[data-theme="dark"] .wp-block-group.is-style-band-dark,
[data-theme="dark"] .wp-block-group.is-style-card-dark { background: #0e0e0e; border-color: #3a3a3a; }
[data-theme="dark"] .is-style-band-gray :is(.wp-block-group.is-style-card-tint, ul.is-style-callout) { background: #2a2a2a; }
[data-theme="dark"] :is(.is-style-band-dark, .is-style-card-dark, .is-style-hero) :is(p.is-style-eyebrow, p.is-style-big-number) { color: var(--kit-gold); }
[data-theme="dark"] .is-style-card-dark p.card-cta a { color: var(--kit-gold); }
[data-theme="dark"] .is-style-card-dark p.card-cta a::before { background: var(--kit-gold); color: var(--kit-black); }
[data-theme="dark"] .wp-block-group[class*="is-style-card"]:has(p.card-cta a:focus-visible) { outline-color: #6cc5c9; }

/* ── Back link (Paragraph → Back link) ─────────────────────── */
/* A small "up one level" link for section home pages that hide the section nav,
   e.g. "About UMBC" at the top of the Visit UMBC cover. The arrow is CSS, so
   screen readers hear only the link text.
   Accessibility (hub UMBC_Accessible_Web_Prompt): text over a photo can't rely on
   the photo for contrast, so on covers and dark surfaces the link sits on a solid
   dark pill: white on rgba(0,0,0,.78) is at least 12:1 over any image. On light
   pages it is plain AOK Teal text (5.7:1). Focus is a 3px outline either way,
   and the pill is at least 44px tall for touch. */
:is(.entry-content, .editor-styles-wrapper) p.is-style-back-link {
    font-size: 0.9375rem;
    font-weight: 700;
    margin-bottom: 1rem !important;
}
p.is-style-back-link a {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 44px;
    color: var(--kit-teal);
    text-decoration: underline;
    text-underline-offset: 3px;
}
p.is-style-back-link a::before {
    content: "\2190";
    content: "\2190" / "";
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--kit-teal);
    color: #ffffff;
    font-size: 0.9rem;
    line-height: 1;
    text-decoration: none;
}
p.is-style-back-link a:focus-visible { outline: 3px solid var(--kit-teal); outline-offset: 3px; border-radius: 999px; }
:is(.umbc-cover-block, .wp-block-cover, .is-style-band-dark, .is-style-band-teal) p.is-style-back-link a {
    padding: 0.35rem 1rem 0.35rem 0.4rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.78);
    color: #ffffff;
    text-decoration: none;
}
:is(.umbc-cover-block, .wp-block-cover, .is-style-band-dark, .is-style-band-teal) p.is-style-back-link a::before { background: var(--kit-gold); color: var(--kit-black); }
@media (hover: hover) {
:is(.umbc-cover-block, .wp-block-cover, .is-style-band-dark, .is-style-band-teal) p.is-style-back-link a:hover { text-decoration: underline; }
}
:is(.umbc-cover-block, .wp-block-cover, .is-style-band-dark, .is-style-band-teal) p.is-style-back-link a:focus-visible { outline-color: #ffffff; }
[data-theme="dark"] p.is-style-back-link a { color: #6cc5c9; }
[data-theme="dark"] p.is-style-back-link a::before { background: #6cc5c9; color: #0e0e0e; }
[data-theme="dark"] :is(.umbc-cover-block, .wp-block-cover, .is-style-band-dark, .is-style-band-teal) p.is-style-back-link a { color: #ffffff; }
[data-theme="dark"] :is(.umbc-cover-block, .wp-block-cover, .is-style-band-dark, .is-style-band-teal) p.is-style-back-link a::before { background: var(--kit-gold); color: var(--kit-black); }

/* ── 360 tour launcher + full-screen dialog ────────────────── */
/* Markup lives in the page (core/html). The tour iframe only loads when opened.
   <dialog> gives focus containment and Escape-to-close natively. */
.umbc-tour-launcher { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.25rem; }
.umbc-tour-launcher__open {
    display: inline-flex; align-items: center; gap: 0.6rem;
    padding: 0.95rem 1.6rem; border: 0; border-radius: 3px; cursor: pointer;
    background: var(--kit-gold); color: var(--kit-black);
    font: inherit; font-weight: 800; font-size: 1.05rem;
}
@media (hover: hover) {
.umbc-tour-launcher__open:hover { background: #e3a100; }
}
.umbc-tour-launcher__open:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }
.umbc-tour-launcher__alt { color: #ffffff; font-weight: 700; }
.umbc-tour-dialog {
    width: 100vw; height: 100vh; height: 100dvh;
    max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
    background: #000000;
}
.umbc-tour-dialog::backdrop { background: #000000; }
.umbc-tour-dialog iframe { display: block; width: 100%; height: 100%; border: 0; }
.umbc-tour-dialog__close {
    /* right offset clears Kuula's own full-screen button in the top-right corner */
    position: absolute; top: 1rem; right: 4rem; z-index: 2;
    min-width: 44px; min-height: 44px; padding: 0.6rem 1rem;
    border: 2px solid var(--kit-gold); border-radius: 3px;
    background: var(--kit-black); color: #ffffff;
    font: inherit; font-weight: 800; cursor: pointer;
}
.umbc-tour-dialog__close:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }

/* ── Solid surfaces: Card – teal / gold, Band – teal / gold ────── */
/* Contrast: white on AOK Teal 5.7:1; black on UMBC Gold 10.9:1. Gold text never
   sits on teal (2.9:1), so eyebrows and numbers on teal are white. */
.wp-block-group.is-style-band-teal { background: var(--kit-teal); color: #ffffff; }
.wp-block-group.is-style-band-gold { background: var(--kit-gold); color: var(--kit-black); }

:is(.entry-content, .editor-styles-wrapper) :is(.wp-block-group.is-style-card-teal, .wp-block-group.is-style-band-teal) :is(h2, h3, h4, p, li, p.is-style-eyebrow, p.is-style-big-number, p.is-style-big-number + p) { color: #ffffff; }
:is(.entry-content, .editor-styles-wrapper) :is(.wp-block-group.is-style-card-teal, .wp-block-group.is-style-band-teal) a:not(.wp-block-button__link) { color: #ffffff; text-decoration: underline; }
:is(.entry-content, .editor-styles-wrapper) :is(.wp-block-group.is-style-card-gold, .wp-block-group.is-style-band-gold) :is(h2, h3, h4, p, li, p.is-style-eyebrow, p.is-style-big-number, p.is-style-big-number + p) { color: var(--kit-black); }
:is(.entry-content, .editor-styles-wrapper) :is(.wp-block-group.is-style-card-gold, .wp-block-group.is-style-band-gold) a:not(.wp-block-button__link) { color: var(--kit-black); text-decoration: underline; }

:is(.entry-content, .editor-styles-wrapper) .wp-block-group.is-style-card-teal p.card-cta a { color: #ffffff; text-decoration: none; }
:is(.entry-content, .editor-styles-wrapper) .wp-block-group.is-style-card-teal p.card-cta a::before { background: var(--kit-gold); color: var(--kit-black); }
:is(.entry-content, .editor-styles-wrapper) .wp-block-group.is-style-card-gold p.card-cta a { color: var(--kit-black); text-decoration: none; }
:is(.entry-content, .editor-styles-wrapper) .wp-block-group.is-style-card-gold p.card-cta a::before { background: var(--kit-black); color: var(--kit-gold); }
.wp-block-group:is(.is-style-card-teal, .is-style-card-gold):has(p.card-cta a:focus-visible) { outline-color: var(--kit-black); }
.wp-block-group.is-style-card-teal:has(p.card-cta a:focus-visible) { outline-color: var(--kit-gold); }

/* Buttons on solid bands: ghost buttons read white on teal, black on gold. */
.is-style-band-teal .wp-block-button.is-style-ghost-gold > .wp-block-button__link { color: #ffffff; border-color: var(--kit-gold); }
.is-style-band-gold .wp-block-button:is(.is-style-ghost-gold, .is-style-ghost-black) > .wp-block-button__link { color: var(--kit-black); border-color: var(--kit-black); }
.is-style-band-gold .wp-block-button.is-style-fill > .wp-block-button__link { background: var(--kit-black); color: #ffffff; border-color: var(--kit-black); }

/* Cards inside dark or solid bands keep their own surface; soft/tint cards go translucent. */
:is(.is-style-band-dark, .is-style-band-teal) .wp-block-group:is(.is-style-card-soft, .is-style-card-tint) { background: rgba(255, 255, 255, 0.1); }
:is(.entry-content, .editor-styles-wrapper) :is(.is-style-band-dark, .is-style-band-teal) .wp-block-group:is(.is-style-card-soft, .is-style-card-tint) :is(h3, h4, p, li) { color: #ffffff; }

/* Dark mode: solid surfaces keep their brand color; soft gray follows the theme. */
[data-theme="dark"] .wp-block-group.is-style-card-soft { background: #262626; }
[data-theme="dark"] :is(.wp-block-group.is-style-card-teal, .wp-block-group.is-style-band-teal) { background: #005c60; }
[data-theme="dark"] :is(.entry-content, .editor-styles-wrapper) .wp-block-group.is-style-card-teal p.card-cta a,
[data-theme="dark"] :is(.entry-content, .editor-styles-wrapper) :is(.wp-block-group.is-style-card-teal, .wp-block-group.is-style-band-teal) :is(h2, h3, h4, p, li, p.is-style-eyebrow, p.is-style-big-number) { color: #ffffff; }
[data-theme="dark"] :is(.entry-content, .editor-styles-wrapper) .wp-block-group.is-style-card-teal p.card-cta a::before { background: var(--kit-gold); color: var(--kit-black); }
[data-theme="dark"] :is(.entry-content, .editor-styles-wrapper) .wp-block-group.is-style-card-gold p.card-cta a,
[data-theme="dark"] :is(.entry-content, .editor-styles-wrapper) :is(.wp-block-group.is-style-card-gold, .wp-block-group.is-style-band-gold) :is(h2, h3, h4, p, li, p.is-style-eyebrow, p.is-style-big-number) { color: var(--kit-black); }
[data-theme="dark"] :is(.entry-content, .editor-styles-wrapper) .wp-block-group.is-style-card-gold p.card-cta a::before { background: var(--kit-black); color: var(--kit-gold); }
/* Dark-mode specificity fixes (swatch check 2026-09-30): light-teal eyebrows on the
   neutral cards, and Card – dark keeps its gold link and arrow. */
[data-theme="dark"] .wp-block-group:is(.is-style-card, .is-style-card-soft, .is-style-card-tint) p.is-style-eyebrow { color: #6cc5c9; }
[data-theme="dark"] :is(.entry-content, .editor-styles-wrapper) .wp-block-group.is-style-card-dark p.card-cta a { color: var(--kit-gold); }
[data-theme="dark"] :is(.entry-content, .editor-styles-wrapper) .wp-block-group.is-style-card-dark p.card-cta a::before { background: var(--kit-gold); color: var(--kit-black); }
[data-theme="dark"] .wp-block-group.is-style-card-dark { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.65); }
/* Something upstream clears group backgrounds in dark mode (the gray band computed as
   transparent on a real page shell, 2026-09-30), which also broke the cover wedge match
   (wedge #232323 over a #1a1a1a page). Pin every band's dark background explicitly. */
[data-theme="dark"] .entry-content .wp-block-group.is-style-band-gray { background: #232323 !important; }
[data-theme="dark"] .entry-content .wp-block-group.is-style-band-dark { background: #0e0e0e !important; }
[data-theme="dark"] .entry-content .wp-block-group.is-style-band-teal { background: #005c60 !important; }
[data-theme="dark"] .entry-content .wp-block-group.is-style-band-gold { background: var(--kit-gold) !important; }

/* ── Numbers on a cover (umbc/cover-block + Big number) ────────── */
/* "At a glance" rows sit on a photo cover with the dark overlay instead of a flat
   black band. Numbers are large and gold; the line under each is white. */
.umbc-cover-block .umbc-cover-block__inner p.is-style-big-number {
    font-size: clamp(3.25rem, 7vw, 5.5rem);
    color: var(--kit-gold);
    line-height: 0.95;
    margin-bottom: 0.5rem !important;
}
.umbc-cover-block .umbc-cover-block__inner p.is-style-big-number + p {
    color: #ffffff;
    font-size: 1.0625rem;
    max-width: 30ch;
}
.umbc-cover-block .umbc-cover-block__inner p.is-style-eyebrow { color: var(--kit-gold); }
.umbc-cover-block .umbc-cover-block__inner h2.is-style-section-title { color: #ffffff; margin-bottom: 2rem; font-size: clamp(1.9rem, 3.2vw, 2.75rem); font-weight: 800; letter-spacing: -0.02em; }
[data-theme="dark"] .umbc-cover-block .umbc-cover-block__inner p.is-style-big-number { color: var(--kit-gold); }


/* ════════════════════════════════════════════════════════════════
   Arrow chip, site-wide (2026-10-05)
   The round arrow from the card CTAs, rolled out to every "link + trailing
   arrow" on the site. Two ways to get it:
   1. Markup: <span class="umbc-arrow" aria-hidden="true"></span> after the link
      text (templates and blocks: media/faculty, programs, college and department
      pages, playlist, stories).
   2. CSS: Six Pack Link draws the same chip with ::after (below). It can't live
      in the block's own style.css: block.json loads that file in the editor only.
   Size: about 1.3x the link text, so the chip sits level with the words.
   The chip fills with the link's own color (currentColor) and the arrow is drawn
   in --umbc-arrow-ink, so it follows the link through light mode, dark mode and
   dark surfaces. flex: none keeps it a circle when text wraps. The glyph uses
   CSS alt text ("" after the slash) so screen readers don't announce "right arrow".
   Not converted on purpose: pagination "Next", carousel buttons, breadcrumb
   separators, the Timeline chevron, Quick Search options, the Bold Moves
   microsite and the landing-page templates.
   ════════════════════════════════════════════════════════════════ */
.umbc-arrow {
    --umbc-arrow-ink: #ffffff;
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 1.3em;
    height: 1.3em;
    margin-left: 0.35em;
    border-radius: 50%;
    background: currentColor;
    vertical-align: middle;
    position: relative;
    top: -0.08em;
    text-decoration: none;
    transition: transform 0.15s ease;
}
.umbc-arrow::before {
    content: "\2192";
    content: "\2192" / "";
    color: var(--umbc-arrow-ink);
    font-size: 0.8em;
    font-weight: 700;
    line-height: 1;
}
/* Light links (dark mode, dark surfaces): dark arrow inside the light chip. */
[data-theme="dark"] .umbc-arrow,
:is(.is-style-band-dark, .is-style-card-dark, .umbc-cover-block, .playlist-block, .wp-block-cover) .umbc-arrow { --umbc-arrow-ink: #1a1a1a; }
:is(.is-style-card-teal, .is-style-band-teal) .umbc-arrow { --umbc-arrow-ink: var(--kit-teal); }
[data-theme="dark"] :is(.is-style-card-gold, .is-style-band-gold) .umbc-arrow { --umbc-arrow-ink: var(--kit-gold); }
@media (hover: hover) {
    a:hover > .umbc-arrow, a:hover .umbc-arrow { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
    .umbc-arrow, .umbc-arrow::before { transition: none; }
    @media (hover: hover) {
a:hover > .umbc-arrow,a:hover .umbc-arrow { transform: none; }
}
}


/* ── Six Pack Link arrows ──────────────────────────────────────
   Single link: round chip on the link. Stacked link lists: no arrows at all
   (JBB 2026-10-05), which also suppresses umbc-nav.css's old "→" on each <li>.
   The template's typed <span class="arrow"> was removed. */
:is(.entry-content, .editor-styles-wrapper) .ugrad-six-pack .ugrad-six-pack-link-wrapper a::after {
    content: "\2192";
    content: "\2192" / "";
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 1.6em;
    height: 1.6em;
    margin-left: 0.4em;
    border-radius: 50%;
    background: var(--kit-teal);
    color: #ffffff;
    font-size: 0.8em;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
    position: relative;
    top: -0.08em;
    left: 0;
    text-decoration: none;
    transition: transform 0.15s ease;
}
:is(.entry-content, .editor-styles-wrapper) .ugrad-six-pack .ugrad-six-pack-content ul li::after,
:is(.entry-content, .editor-styles-wrapper) .ugrad-six-pack .ugrad-six-pack-content ul li a::after {
    content: none;
    display: none;
}
@media (hover: hover) {
    :is(.entry-content, .editor-styles-wrapper) .ugrad-six-pack .ugrad-six-pack-link-wrapper a:hover::after { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
    :is(.entry-content, .editor-styles-wrapper) .ugrad-six-pack .ugrad-six-pack-link-wrapper a::after { transition: none; }
    @media (hover: hover) {
:is(.entry-content, .editor-styles-wrapper) .ugrad-six-pack .ugrad-six-pack-link-wrapper a:hover::after { transform: none; }
}
}
:is(.entry-content, .editor-styles-wrapper) :is(.is-style-band-dark, .is-style-card-dark, .umbc-cover-block, .wp-block-cover) .ugrad-six-pack .ugrad-six-pack-link-wrapper a::after {
    background: var(--kit-gold);
    color: var(--kit-black);
}
/* Dark mode: off-white chip matching the six-pack link color, dark arrow.
   Beats the !important glyph colors in umbc-nav.css and the block's editor CSS. */
[data-theme="dark"] :is(.entry-content, .editor-styles-wrapper) .ugrad-six-pack .ugrad-six-pack-link-wrapper a::after {
    background: #e0e0e0 !important;
    color: #1a1a1a !important;
}
@media (hover: hover) {
[data-theme="dark"] :is(.entry-content, .editor-styles-wrapper) .ugrad-six-pack .ugrad-six-pack-link-wrapper a:hover::after {
    background: #ffffff !important;
}
}

/* ── Breadcrumbs over a cover (2026-10-06) ─────────────────────
   When a page opens with umbc/cover-block and breadcrumbs are on (Visit UMBC,
   Undergraduate Admissions), the theme's normal Rank Math trail is lifted onto
   the top of the photo instead of sitting on a white strip above it. Same markup
   and links, so screen readers and the BreadcrumbList schema are unchanged.
   Contrast: the trail sits on a solid charcoal bar (see below), so white text
   holds 11.6:1 whatever the photo does. */
article:has(> .entry-content > .umbc-cover-block:first-child) {
    position: relative;
}
article:has(> .entry-content > .umbc-cover-block:first-child) > .entry-header {
    position: absolute;
    top: clamp(1.75rem, 5vw, 3.5rem);
    left: 0;
    right: 0;
    z-index: 5;
    margin: 0;
    padding: 0;
    pointer-events: none;
}
article:has(> .entry-content > .umbc-cover-block:first-child) > .entry-header .umbc-breadcrumbs-wrap {
    /* 1200px: the column the cover's heading and buttons line up on */
    max-width: 1200px;
    box-sizing: content-box;
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 4vw, 3rem);
    pointer-events: none;
}
/* Plain charcoal rectangle (#3a3a3a, the utility strip's colour). The utility
   strip's colour is kept; crumbs are separated by a plain 1px vertical rule inset
   from the top and bottom of the bar. Type is a light,
   tracked, uppercase eyebrow face rather than body text. White on #3a3a3a is
   11.6:1. The theme's separator glyph is hidden; dividers are drawn on the links
   so the markup and BreadcrumbList schema are untouched. (2026-10-07) */
article:has(> .entry-content > .umbc-cover-block:first-child) > .entry-header .rank-math-breadcrumb {
    --crumb-h: 2.5rem;
    display: inline-flex;
    align-items: center;
    min-height: var(--crumb-h);
    box-sizing: border-box;
    pointer-events: auto;
    padding: 0.35rem 1.25rem;
    border-radius: 0;
    background: #3a3a3a;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: #ffffff;
    font-size: 0.7rem;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
article:has(> .entry-content > .umbc-cover-block:first-child) > .entry-header .rank-math-breadcrumb :is(p, span, a) {
    color: #ffffff;
    font-size: inherit;
    line-height: inherit;
    font-weight: 400;
}
article:has(> .entry-content > .umbc-cover-block:first-child) > .entry-header .rank-math-breadcrumb .separator {
    display: none;
}
article:has(> .entry-content > .umbc-cover-block:first-child) > .entry-header .rank-math-breadcrumb p > a::after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 1px;
    height: 1.1rem;
    margin: 0 1.1em 0 1.25em;
    background: rgba(255, 255, 255, 0.6);
    text-decoration: none;
}
article:has(> .entry-content > .umbc-cover-block:first-child) > .entry-header .rank-math-breadcrumb p > a:last-child::after {
    content: none;
}
html article:has(> .entry-content > .umbc-cover-block:first-child) > .entry-header .rank-math-breadcrumb a {
    color: #ffffff;
    /* Navigation links are exempt from WCAG 1.4.1's underline expectation; the
       divider rules, hover underline and focus ring mark them, and the current
       page (not a link) is dimmer. */
    text-decoration: none;
}
@media (hover: hover) {
html article:has(> .entry-content > .umbc-cover-block:first-child) > .entry-header .rank-math-breadcrumb a:hover {
    color: var(--kit-gold);
    text-decoration: underline;
    text-underline-offset: 0.25em;
}
}
article:has(> .entry-content > .umbc-cover-block:first-child) > .entry-header .rank-math-breadcrumb p > span:last-child {
    color: rgba(255, 255, 255, 0.78);
}
html article:has(> .entry-content > .umbc-cover-block:first-child) > .entry-header .rank-math-breadcrumb a:focus-visible {
    outline: 3px solid var(--kit-gold);
    outline-offset: 2px;
    border-radius: 2px;
}
/* Room for the trail: push the cover's content down a little on short covers. */
article:has(> .entry-content > .umbc-cover-block:first-child) > .entry-content > .umbc-cover-block:first-child .umbc-cover-block__inner {
    padding-top: clamp(5.75rem, 9vw, 6.5rem);
}

/* ── Link list inside a card (List → Link list) ─────────────────
   A card that routes to several pages (About home "In This Section").
   Plain bold links, no bullets, no arrows (stacked links get no arrows).
   Don't combine with p.card-cta: its stretched link would cover these. */
/* style.css gives every list in a page group margin-left: 1em !important at (0,5,1)
   (".type-page .wp-block-group ul.wp-block-list:not(.navigation-list):not(.list-look-alike)");
   this selector is (0,6,1) so the link list sits flush with the card text. */
:is(.entry-content, .editor-styles-wrapper) .wp-block-group[class*="is-style-card"] > ul.wp-block-list.is-style-card-links.is-style-card-links,
:is(.entry-content, .editor-styles-wrapper) ul.is-style-card-links {
    list-style: none !important;
    margin: 0.85rem 0 0 !important;
    padding: 0 !important;
}
:is(.entry-content, .editor-styles-wrapper) ul.is-style-card-links li {
    list-style: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}
:is(.entry-content, .editor-styles-wrapper) ul.is-style-card-links li::marker { content: none; }
ul.is-style-card-links li + li { margin-top: 0.45rem; }
ul.is-style-card-links a {
    font-weight: 700;
    color: var(--kit-teal);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}
@media (hover: hover) {
ul.is-style-card-links a:hover { color: #00595d; }
}
[data-theme="dark"] ul.is-style-card-links a { color: #6cc5c9; }
@media (hover: hover) {
[data-theme="dark"] ul.is-style-card-links a:hover { color: #ffffff; }
}
/* "See all" link at the foot of a routing card (with the .umbc-arrow chip). */
:is(.entry-content, .editor-styles-wrapper) .wp-block-group[class*="is-style-card"] > p.card-link {
    margin-top: auto !important;
    padding-top: 1rem;
    font-weight: 700;
}
.wp-block-group[class*="is-style-card"] > p.card-link a { color: var(--kit-teal); text-decoration: none; }
@media (hover: hover) {
.wp-block-group[class*="is-style-card"] > p.card-link a:hover { text-decoration: underline; }
}
[data-theme="dark"] .wp-block-group[class*="is-style-card"] > p.card-link a { color: #6cc5c9; }

/* ── Cover → White button text (2026-10-07) ─────────────────────
   Ghost buttons on a black UMBC cover default to gold text (cover-block
   style.css, --cover-ghost-text). This opt-in style matches the Academics
   hero: white text, gold outline. Used on the Visit UMBC hero. Hover still
   fills gold with dark text. */
.umbc-cover-block.theme-black.is-style-white-buttons { --cover-ghost-text: #ffffff; }

/* ── Callout box flush with the text above it ───────────────────
   style.css indents every page list (margin-left: 1em !important at (0,5,1));
   the callout box should line up with the heading and buttons. (0,6,1). */
:is(.entry-content, .editor-styles-wrapper) ul.wp-block-list.is-style-callout.is-style-callout.is-style-callout.is-style-callout {
    margin-left: 0 !important;
}

/* ── Stacked cards (Visit hub "Tour Campus") ─────────────────────
   Cards inside a plain group so each takes its own height, not 100% of the column. */
.wp-block-group.visit-card-stack > .wp-block-group[class*="is-style-card"] { height: auto; }