/* ==============================================
   UMBC Cover Block
   style.css

   Themes set --cover-* and button tokens; inner
   blocks inherit via CSS custom properties.
   ============================================== */

/* ── Shell + token defaults (overridden per theme) ─── */
.umbc-cover-block {
    --cover-bg: #000;
    --cover-text: #ffffff;
    --cover-heading: #ffffff;
    --cover-link: #fdb515;
    --cover-accent: #fdb515;
    /* Overlay is built from a base color (rgb triplet) + a max opacity so the
       flat fill and the directional gradient can share one source of truth.
       Dark themes overlay black (0,0,0); light/gold themes overlay white. */
    --cover-overlay-rgb: 0, 0, 0;
    --cover-overlay-max: 0.55;
    --cover-pattern-line: rgba(255, 255, 255, 0.06);

    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: var(--cover-bg);
    color: var(--cover-text);
    isolation: isolate;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   THEMES — each sets surface, text, accent, overlay
   default, and (where needed) overrides the global
   button tokens so inner core/buttons inherit.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.umbc-cover-block.theme-black {
    --cover-bg: #000000;
    --cover-text: #ffffff;
    --cover-heading: #ffffff;
    --cover-link: #fdb515;
    --cover-accent: #fdb515;
    --cover-overlay-rgb: 0, 0, 0;
    --cover-overlay-max: 0.55;
    --cover-pattern-line: rgba(255, 255, 255, 0.06);
}

.umbc-cover-block.theme-teal {
    --cover-bg: #007176;
    --cover-text: #ffffff;
    --cover-heading: #ffffff;
    --cover-link: #ffffff; /* gold-on-teal fails AA — link uses white + underline */
    --cover-accent: #fdb515;
    /* Teal-tinted overlay (brand teal #007176). Needs more opacity than black
       to hold white text over a busy photo, so the defaults run higher. */
    --cover-overlay-rgb: 0, 113, 118;
    --cover-overlay-max: 0.75;
    --cover-pattern-line: rgba(255, 255, 255, 0.05);
}

.umbc-cover-block.theme-gold {
    --cover-bg: #fdb515;
    --cover-text: #1a1a1a;
    --cover-heading: #000000;
    --cover-link: #1a1a1a;
    --cover-accent: #000000;
    /* Gold-tinted overlay (#fdb515) under dark text. Needs to stay heavy so a
       dark photo can't pull the surface below AA against #1a1a1a text. */
    --cover-overlay-rgb: 253, 181, 21;
    --cover-overlay-max: 0.8;
    --cover-pattern-line: rgba(0, 0, 0, 0.07);

    /* Swap button tokens so core/buttons inside become dark-on-gold-text. */
    --umbc-btn-gold: #1a1a1a;
    --umbc-btn-gold-hover: #2f2f2f;
    --umbc-btn-gold-active: #000000;
    --umbc-btn-black: #fdb515;
}

.umbc-cover-block.theme-light {
    --cover-bg: #ffffff;
    --cover-text: #252525;
    --cover-heading: #1a1a1a;
    --cover-link: #007176; /* teal — passes AA on white */
    --cover-accent: #fdb515;
    --cover-overlay-rgb: 255, 255, 255;
    --cover-overlay-max: 0.4;
    --cover-pattern-line: rgba(0, 0, 0, 0.06);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BACKGROUND LAYERS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.umbc-cover-block__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.umbc-cover-block__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Flat fill (default). Gradient variant below reuses the same tokens. */
    background: rgba(var(--cover-overlay-rgb), var(--cover-overlay-max));
    pointer-events: none;
}

/* Gradient overlay: holds full strength for the first 25% (a solid pad behind
   the text at the opaque end) then fades to clear at the opposite side. The
   editor aims the opaque end via the direction class so text stays legible
   while the rest of the photo shows through. --cover-grad-dir is set per
   direction below; base color follows the theme automatically. */
.umbc-cover-block.overlay-grad .umbc-cover-block__overlay {
    background: linear-gradient(
        var(--cover-grad-dir, to top),
        rgba(var(--cover-overlay-rgb), var(--cover-overlay-max)) 0%,
        rgba(var(--cover-overlay-rgb), var(--cover-overlay-max)) 25%,
        rgba(var(--cover-overlay-rgb), 0) 100%
    );
}

/* Direction = where the OPAQUE end sits; gradient points toward the clear end. */
.umbc-cover-block.grad-bottom {
    --cover-grad-dir: to top;
}
.umbc-cover-block.grad-top {
    --cover-grad-dir: to bottom;
}
.umbc-cover-block.grad-left {
    --cover-grad-dir: to right;
}
.umbc-cover-block.grad-right {
    --cover-grad-dir: to left;
}
.umbc-cover-block.grad-bl {
    --cover-grad-dir: to top right;
}
.umbc-cover-block.grad-br {
    --cover-grad-dir: to top left;
}
.umbc-cover-block.grad-tl {
    --cover-grad-dir: to bottom right;
}
.umbc-cover-block.grad-tr {
    --cover-grad-dir: to bottom left;
}

.umbc-cover-block__pattern {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* Graph paper — fine grid drawn with two crossed gradients */
.umbc-cover-block.bg-graph-paper .umbc-cover-block__pattern {
    background-image:
        repeating-linear-gradient(
            0deg,
            var(--cover-pattern-line) 0 1px,
            transparent 1px 28px
        ),
        repeating-linear-gradient(
            90deg,
            var(--cover-pattern-line) 0 1px,
            transparent 1px 28px
        );
}

/* Stripes — exact pattern from scholars-why section */
.umbc-cover-block.bg-stripes .umbc-cover-block__pattern {
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 40px,
        var(--cover-pattern-line) 40px,
        var(--cover-pattern-line) 80px
    );
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   OVERLAY STRENGTH OVERRIDES (image mode only)
   Each theme tints in its own color: black darkens,
   teal and gold tint in brand color, light whitens.
   Brand tints run heavier than black because a
   partial teal/gold wash gives less contrast.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.umbc-cover-block.theme-black.overlay-light {
    --cover-overlay-max: 0.3;
}
.umbc-cover-block.theme-black.overlay-medium {
    --cover-overlay-max: 0.55;
}
.umbc-cover-block.theme-black.overlay-strong {
    --cover-overlay-max: 0.78;
}

.umbc-cover-block.theme-teal.overlay-light {
    --cover-overlay-max: 0.6;
}
.umbc-cover-block.theme-teal.overlay-medium {
    --cover-overlay-max: 0.75;
}
.umbc-cover-block.theme-teal.overlay-strong {
    --cover-overlay-max: 0.88;
}

.umbc-cover-block.theme-gold.overlay-light {
    --cover-overlay-max: 0.65;
}
.umbc-cover-block.theme-gold.overlay-medium {
    --cover-overlay-max: 0.8;
}
.umbc-cover-block.theme-gold.overlay-strong {
    --cover-overlay-max: 0.9;
}

.umbc-cover-block.theme-light.overlay-light {
    --cover-overlay-max: 0.25;
}
.umbc-cover-block.theme-light.overlay-medium {
    --cover-overlay-max: 0.4;
}
.umbc-cover-block.theme-light.overlay-strong {
    --cover-overlay-max: 0.65;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LAYOUT — min-height, content width, vertical align
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.umbc-cover-block.minh-small {
    min-height: 340px;
}
.umbc-cover-block.minh-medium {
    min-height: 480px;
}
.umbc-cover-block.minh-large {
    min-height: 640px;
}
.umbc-cover-block.minh-viewport {
    min-height: 100vh;
    min-height: 100svh;
}

/* Vertical alignment positions the inner column on the flex main axis.
   The inner keeps a modest, fixed block padding (not a viewport clamp) so
   there is real slack between it and the min-height floor — that slack is
   what makes top / center / bottom visibly distinct. */
.umbc-cover-block.valign-top {
    justify-content: flex-start;
}
.umbc-cover-block.valign-center {
    justify-content: center;
}
.umbc-cover-block.valign-bottom {
    justify-content: flex-end;
}

.umbc-cover-block__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;            /* default; cw-* overrides below */
    margin-inline: auto;
    padding-block: clamp(3rem, 5vw, 4.5rem);
    box-sizing: border-box;
    /* No horizontal padding at/above the content cap: the column is already
       centered by margin-inline:auto, and the cap IS the target width, so the
       content should span the full chosen max-width (1200px / 1400px) instead
       of padding-inline eating ~48px off each side. Below the cap the column
       fills the viewport, so the responsive gutter is re-added there — see the
       media queries after the cw-* rules. */
}

/* ── Content width ── inner column cap on desktop. 1200px matches the
   theme's "wide" width; 1400px is the extra-wide option. */
.umbc-cover-block.cw-1200 .umbc-cover-block__inner {
    max-width: 1200px;
}
.umbc-cover-block.cw-1400 .umbc-cover-block__inner {
    max-width: 1400px;
}

/* Responsive side gutter — only while the column is narrower than its cap
   (i.e. it fills the viewport). Once the cap kicks in, margin-inline:auto
   supplies the outer space and the column spans the full chosen width. */
@media (max-width: 1199.98px) {
    .umbc-cover-block__inner {
        padding-inline: clamp(1.5rem, 4vw, 3rem);
    }
}
@media (max-width: 1399.98px) {
    .umbc-cover-block.cw-1400 .umbc-cover-block__inner {
        padding-inline: clamp(1.5rem, 4vw, 3rem);
    }
}

/* Side-rail layouts (section nav / alumni): the cover is a full-bleed band
   beside the rail, and with the gutter removed its content sits flush against
   the cover edge next to the nav. Restore the responsive gutter there, at any
   viewport width — mirrors the core wp-block-cover rule in css/umbc-nav.css. */
.section-main-content .umbc-cover-block__inner,
.alumni-main-content .umbc-cover-block__inner {
    padding-inline: clamp(1.5rem, 4vw, 3rem);
}

/* The bottom-left corner notch is only 46px and the modest block padding
   (min 48px) already clears it, so no extra room is needed. */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   INNER CONTENT THEMING
   Specificity beats the global heading/paragraph
   rules but :not(.has-text-color) yields to any
   color the editor has explicitly set.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.umbc-cover-block__inner {
    color: var(--cover-text);
}

.umbc-cover-block__inner h1:not(.has-text-color),
.umbc-cover-block__inner h2:not(.has-text-color),
.umbc-cover-block__inner h3:not(.has-text-color),
.umbc-cover-block__inner h4:not(.has-text-color),
.umbc-cover-block__inner h5:not(.has-text-color),
.umbc-cover-block__inner h6:not(.has-text-color) {
    color: var(--cover-heading);
}

.umbc-cover-block__inner p:not(.has-text-color),
.umbc-cover-block__inner li:not(.has-text-color),
.umbc-cover-block__inner blockquote:not(.has-text-color) {
    color: var(--cover-text);
}

.umbc-cover-block__inner a:not(.wp-block-button__link):not(.has-text-color) {
    color: var(--cover-link);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.umbc-cover-block__inner a:not(.wp-block-button__link):focus-visible {
    outline: 2px solid var(--cover-accent);
    outline-offset: 2px;
}

/* ── Ghost buttons on dark covers ──
   The global ghost-gold / ghost-black rules use near-black text and only flip
   under [data-theme="dark"] or .dark-bg, so on a black/teal cover in LIGHT
   mode the label went black-on-dark. Key the flip to the cover's own surface
   instead of the site mode. Teal uses white text (gold-on-teal fails AA);
   theme-light joins in only when dark mode turns its surface dark.
   Hover/active are restated so the filled state keeps dark text on gold. */
.umbc-cover-block.theme-black {
    --cover-ghost-text: #fdb515;
}
.umbc-cover-block.theme-teal {
    --cover-ghost-text: #ffffff;
}
[data-theme="dark"] .umbc-cover-block.theme-light {
    --cover-ghost-text: #fdb515;
}

.umbc-cover-block.theme-black .wp-block-button.is-style-ghost-gold > .wp-block-button__link,
.umbc-cover-block.theme-teal .wp-block-button.is-style-ghost-gold > .wp-block-button__link,
[data-theme="dark"] .umbc-cover-block.theme-light .wp-block-button.is-style-ghost-gold > .wp-block-button__link {
    background-color: transparent;
    color: var(--cover-ghost-text);
    border-color: #fdb515;
}
.umbc-cover-block.theme-black .wp-block-button.is-style-ghost-gold > .wp-block-button__link:hover,
.umbc-cover-block.theme-teal .wp-block-button.is-style-ghost-gold > .wp-block-button__link:hover,
[data-theme="dark"] .umbc-cover-block.theme-light .wp-block-button.is-style-ghost-gold > .wp-block-button__link:hover {
    background-color: #fdb515;
    color: #1a1a1a;
    border-color: #fdb515;
}
.umbc-cover-block.theme-black .wp-block-button.is-style-ghost-gold > .wp-block-button__link:active,
.umbc-cover-block.theme-teal .wp-block-button.is-style-ghost-gold > .wp-block-button__link:active,
[data-theme="dark"] .umbc-cover-block.theme-light .wp-block-button.is-style-ghost-gold > .wp-block-button__link:active {
    background-color: var(--umbc-btn-gold-active, #e0a000);
    color: #1a1a1a;
    border-color: var(--umbc-btn-gold-active, #e0a000);
}

/* Ghost-black has the same bug (black border + text vanish) — flip to white. */
.umbc-cover-block.theme-black .wp-block-button.is-style-ghost-black > .wp-block-button__link,
.umbc-cover-block.theme-teal .wp-block-button.is-style-ghost-black > .wp-block-button__link {
    background-color: transparent;
    color: #ffffff;
    border-color: #ffffff;
}
.umbc-cover-block.theme-black .wp-block-button.is-style-ghost-black > .wp-block-button__link:hover,
.umbc-cover-block.theme-teal .wp-block-button.is-style-ghost-black > .wp-block-button__link:hover,
.umbc-cover-block.theme-black .wp-block-button.is-style-ghost-black > .wp-block-button__link:active,
.umbc-cover-block.theme-teal .wp-block-button.is-style-ghost-black > .wp-block-button__link:active {
    background-color: #ffffff;
    color: #1a1a1a;
    border-color: #ffffff;
}
.umbc-cover-block.theme-black .wp-block-button.is-style-ghost-black > .wp-block-button__link:focus-visible,
.umbc-cover-block.theme-teal .wp-block-button.is-style-ghost-black > .wp-block-button__link:focus-visible {
    outline-color: #ffffff;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   WEDGE — a real 46px 45° cut at the bottom-LEFT corner,
   the same notch geometry as the site header / section
   nav. Rather than a transparent clip-path (which only
   reveals the page background and reads wrong in the
   editor), it is a filled triangle whose color matches
   the section sitting below the cover, so the cut looks
   "real" on the front end AND in the preview.

   The wedge is a real child element (.umbc-cover-block__wedge), not a
   pseudo-element, so it renders identically in the block editor and on the
   front end — a pseudo-element on the block root collides with the editor's
   full-align block treatment and can appear duplicated.

   Auto matches the section sitting below the cover: white in light mode,
   #1a1a1a (the page surface) in dark mode — NOT pure black, which left a
   visible seam against the #1a1a1a section. Custom pins explicit per-mode
   colors via inline --cover-wedge-light / --cover-wedge-dark from PHP.
   Add the "wedge-right" class to cut bottom-right instead.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.umbc-cover-block.has-wedge {
    --cover-wedge-fill: #ffffff;
}

/* Auto — track the real section-below surface per mode. */
.umbc-cover-block.has-wedge.wedge-fill-auto {
    --cover-wedge-fill: #ffffff;
}
[data-theme="dark"] .umbc-cover-block.has-wedge.wedge-fill-auto {
    --cover-wedge-fill: #1a1a1a;
}

/* Custom — editor-picked light/dark fills (inline vars set by PHP). */
.umbc-cover-block.has-wedge.wedge-fill-custom {
    --cover-wedge-fill: var(--cover-wedge-light, #ffffff);
}
[data-theme="dark"] .umbc-cover-block.has-wedge.wedge-fill-custom {
    --cover-wedge-fill: var(--cover-wedge-dark, #1a1a1a);
}

.umbc-cover-block__wedge {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 46px;
    height: 46px;
    z-index: 4; /* above image/overlay/inner — only sits in the empty corner */
    background: var(--cover-wedge-fill);
    /* lower-left triangle: the section-below color cutting up into the cover */
    clip-path: polygon(0 0, 0 100%, 100% 100%);
    pointer-events: none;
}

.umbc-cover-block.wedge-right .umbc-cover-block__wedge {
    left: auto;
    right: 0;
    /* lower-right triangle */
    clip-path: polygon(100% 0, 0 100%, 100% 100%);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DARK MODE
   Black/teal/gold are already saturated brand surfaces
   and stay as-is. Only theme-light flips to a dark
   surface. The wedge's auto fill flips separately (see
   the wedge section above).
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[data-theme="dark"] .umbc-cover-block.theme-light {
    --cover-bg: #1e1e1e;
    --cover-text: #e8e8e8;
    --cover-heading: #f5f5f5;
    --cover-link: #fdb515;
    --cover-overlay-rgb: 0, 0, 0;
    --cover-overlay-max: 0.55;
    --cover-pattern-line: rgba(255, 255, 255, 0.06);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE — theme breakpoints. Layout reflows but
   behavior is unchanged; the 46px wedge stays fixed at
   all sizes to match the header / nav notch.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 960px) {
    .umbc-cover-block.minh-large {
        min-height: 540px;
    }
}

@media (max-width: 600px) {
    .umbc-cover-block.minh-small {
        min-height: 280px;
    }
    .umbc-cover-block.minh-medium {
        min-height: 380px;
    }
    .umbc-cover-block.minh-large {
        min-height: 460px;
    }
}