/*
 * One-screen welcome page.
 *
 * home/banner.blade.php includes home/section inside .video-overlay so About Us
 * sits on the hero rather than below it. This file does that placement AND
 * NOTHING ELSE.
 *
 * That restraint is the point. eduleave-mobile.css section 5 already owns how
 * the feature cards look and behave at every width, and it had solved on
 * purpose every problem an earlier version of this file then re-broke:
 *
 *   - >=993px  .features-content is absolute at bottom:0 over a min-height post,
 *              so an opening panel grows UPWARD out of the bar
 *   - <=992px  the cards STACK, one per row, with a tap-sized hit area
 *   - h4::after draws the caret, and rotates it on .el-open
 *   - .el-open is #111a2e plus an amber inset edge — "no fill, no colour flip"
 *   - the amber hover is fenced behind (hover: hover) and (pointer: fine),
 *              because otherwise it sticks after the tap that opened a panel
 *
 * This file previously set position:relative on .features-content, forced
 * flex-wrap:nowrap on the row below 991px, made the container full-bleed, and
 * added a numeral and a second caret. On a phone that produced three cards
 * side by side with the body copy wrapping to one word per line. All of it is
 * gone; none of it should come back.
 *
 * Loaded unconditionally, NOT from the @guest block that carries auth-modal.css:
 * signed-in visitors see the same banner.
 *
 * There is deliberately no `html, body { overflow: hidden }` here. That block
 * used to live in banner.blade.php and was released only at 768px while the nav
 * collapses at 950px, so 769-950px could not scroll at all. Content that
 * genuinely does not fit is still allowed to scroll.
 */

/*
 * Exactly one viewport, and therefore no scrollbar.
 *
 * The welcome page is the banner and nothing else now, so it should be exactly
 * as tall as the window. It was a few pixels over, which is enough for a
 * permanent scrollbar on a page with nowhere to scroll to.
 *
 * The source was #bg-video. It is a replaced element and the theme leaves it
 * `display: inline`, so it sits on a text baseline and the line box adds
 * descender space UNDER it — the classic gap beneath an <img>. At
 * `min-height: 100vh` that made the banner 100vh plus a few pixels. Taking the
 * video out of flow entirely removes the line box, and with it the whole class
 * of problem; a definite height on the banner then leaves nothing to round.
 *
 * NOT solved with `html, body { overflow: hidden }`. That block used to live in
 * banner.blade.php and was released only at 768px while the nav collapses at
 * 950px, so 769-950px could not scroll at all. Removing the overflow is the fix;
 * hiding the scrollbar would only hide the symptom, and take real scrolling with
 * it wherever the content genuinely does not fit.
 */
/*
 * Desktop only — 768px up.
 *
 * eduleave-mobile.css already takes the video out of flow below 767px, sizes the
 * banner with svh rather than vh, and resets the video's z-index. Repeating any
 * of that here at every width is how phase 3 broke the mobile cards, and the two
 * specific traps it would walk into are:
 *
 *   - The theme sets `#bg-video { z-index: -1 }`. That is inert while the video
 *     is static, which it is on desktop, and takes effect the moment it becomes
 *     positioned — painting the video BEHIND .main-banner's own gradient, i.e.
 *     invisible. eduleave-mobile.css documents this and resets it to 0; so must
 *     anything that positions the video.
 *   - dvh tracks the retracting mobile toolbar, so it would reintroduce the hero
 *     jump that eduleave-mobile.css chose svh to fix. On desktop there is no
 *     retracting toolbar and dvh is simply the viewport.
 */
@media screen and (min-width: 768px) {
    .main-banner {
        height: 100dvh;
        min-height: 100dvh;
        /* The theme pulls the banner up 7px to swallow the video's baseline gap.
           With the video out of flow there is no gap, and the negative margin
           would just expose whatever is behind it. */
        margin-bottom: 0;
    }

    .main-banner #bg-video {
        position: absolute;
        inset: 0;
        /* Above .main-banner's gradient, below .video-overlay. Without this the
           theme's -1 applies and the hero video is invisible. */
        z-index: 0;
        display: block;
        width: 100%;
        height: 100%;
        /* The theme sizes it with min/max-height: 100vh, which is what put it in
           flow at full height in the first place. */
        min-width: 0;
        min-height: 0;
        max-width: none;
        max-height: none;
        object-fit: cover;
    }

    .main-banner .video-overlay {
        /* Paired with the theme's margin-bottom: -7px above, which is now zero. */
        bottom: 0;
        /* Above the video now that the video is positioned. */
        z-index: 1;
    }
}

/*
 * The overlay's flex column is NOT inside the desktop query above. It was
 * present at every width in the build whose mobile layout was reviewed and
 * confirmed good, and moving it now would change mobile away from that.
 * Only the scrollbar fix — the video's positioning and the banner's height —
 * is desktop-scoped, because eduleave-mobile.css already handles both below
 * 768px and does it differently on purpose.
 */
.main-banner .video-overlay {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

/*
 * The caption was position:absolute at top/left 50% with a translate, centred
 * against the whole hero — which would put it straight through the strip now
 * pinned to the bottom. As a flex child it takes the free space and centres
 * inside that instead, so the two cannot overlap at a height nobody anticipated.
 */
.main-banner .video-overlay .caption {
    position: static;
    transform: none;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
    padding: 90px 20px 12px;   /* clears the 80px fixed header */
}

.banner-features {
    flex: 0 0 auto;
    width: 100%;
}

/*
 * The heading's contents are a <button> so the cards can be opened from the
 * keyboard — production's bare <h4> could only be opened with a mouse. It has
 * to be invisible as a control: this renders identically to the heading it
 * replaced, and every layout rule around it still comes from
 * eduleave-mobile.css, whose `.content-show h4 { display: flex }` the button
 * inherits so h4::after still lands on the right edge.
 *
 * A reset rather than `display: contents`, which drops the element from the
 * accessibility tree in some engines and would undo the entire point.
 */
.features-content .features-toggle {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    text-align: left;
    cursor: pointer;

    /*
     * The whole UA reset group, not just the properties noticed so far.
     *
     * Browsers reset a specific set of inherited text properties on form
     * controls — Blink's html.css sets font, letter-spacing, word-spacing,
     * line-height, text-transform, text-indent, text-shadow and text-align on
     * input/textarea/select/button together. The theme styles the heading
     * `text-transform: uppercase; letter-spacing: 1px; font-weight: 700`, and
     * the label sits inside this button, so every one of those is at risk.
     *
     * letter-spacing was restored when the spacing went; text-transform was
     * missed and the labels rendered sentence-case. Taking the group whole
     * rather than one property per visual review, which is how that happened.
     */
    font: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;
    line-height: inherit;
    text-transform: inherit;
    text-indent: 0;
    text-shadow: none;
}

.features-content .features-toggle:focus-visible {
    outline: 2px solid #f5a425;
    outline-offset: 3px;
}

/* Production opens a card from anywhere on it, and custom.js forwards those
   clicks to the button — so the whole card has to look clickable, not just the
   label. eduleave-mobile.css already does this below 992px. */
.banner-features .features-post {
    cursor: pointer;
}

/*
 * Desktop: production's inset strip — three separated cards with the hero
 * showing between and beside them, rather than one edge-to-edge navy band.
 *
 * eduleave-mobile.css zeroes the Bootstrap gutters and the row margins and
 * paints section.features navy at EVERY width. That was right when this strip
 * sat below the hero: the gutters let the page background through as white
 * slivers. On the hero, what shows through is the video — which is exactly what
 * production looks like.
 *
 * min-width: 993px deliberately matches eduleave-mobile.css's own desktop
 * branch, so the two agree on where the boundary is. Below it nothing here
 * applies and the mobile stack is untouched — that stack is confirmed working
 * and undoing it is what phase 3 was entirely about.
 */
@media screen and (min-width: 993px) {
    .banner-features .features {
        background-color: transparent;
    }

    .banner-features .row {
        margin-left: -15px;
        margin-right: -15px;
    }

    .banner-features [class*="col-"] {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/*
 * Short viewports only: drop the second paragraph so the strip cannot push the
 * call to action off screen. Not a width rule — below 992px eduleave-mobile.css
 * stacks the cards and the page is allowed to scroll, so there is nothing to
 * protect against there.
 */
@media screen and (max-height: 760px) and (min-width: 993px) {
    .banner-features .content-hide .hidden-sm {
        display: none;
    }
}

/* -------------------------------------------------------- banner CTA ---- */

/*
 * Navy label on amber, not white.
 *
 * templatemo-grad-school.css:71 sets `.main-button a { background: #f5a425;
 * color: #fff }`. White on that amber is about 2.0:1 — it fails WCAG AA by a
 * wide margin, on the single most important control on the page. #162239 on the
 * same amber is about 7.7:1.
 *
 * The amber does not change, so the banner still looks like itself; only the
 * label does.
 */
.main-button a {
    color: #162239;
    border-radius: 6px;
    font-weight: 800;
    letter-spacing: .06em;
    transition: background-color .25s ease, transform .2s ease, box-shadow .25s ease;
}

.main-button a:hover,
.main-button a:focus-visible {
    background-color: #e08f0d;
    color: #162239;
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(245, 164, 37, .3);
}

.main-button a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* The outline twin beside it keeps white text — on the translucent hero, not on
   amber, so it measures against the video overlay and passes. */
.main-button .auth-cta-secondary:hover,
.main-button .auth-cta-secondary:focus-visible {
    transform: translateY(-1px);
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    .main-button a:hover,
    .main-button a:focus-visible {
        transform: none;
    }
}