/*
    assets/css/slider-shop.css

    Brings the homepage slider (#banner) in line with ozroofracks.shop's hero.
    Added 2026-08-20 as the second component of the restyle, after the header.

    Started as paint only. The first pass deliberately kept the slider centred
    and said so here, on the reasoning that alignment was a layout change and
    out of scope.

    That reasoning was wrong, and it is why the page still did not read as
    .shop after the colours all matched: with .shop the alignment IS the
    difference. The hero is now left-aligned against a 90deg shade with an
    eyebrow kicker above the headline, and template/slider.php moved with it --
    the <center> around the buttons became a flex div, and every string in the
    block became a $lang[] key so the most prominent copy on the site is no
    longer the one piece that cannot be translated.

    Values from ozroofracks.shop/app/globals.css:
      .hero-shade    rgba(3,16,28,...) gradient over the photo
      .hero h1       clamp(42px,5vw,70px), line-height 1.04, tracking -.052em
      .button        min-height 50px, radius 8px, 14px/800, padding 0 24px
      .button-primary  --blue, hover #1591e6 and a 1px lift
      .button-ghost    white on a 1px rgba(255,255,255,.65) outline

    Loaded last in template/css.php, so it beats both main.css (which owns
    #banner) and migrate.css (which owns .ebay/.wise).

    NOT TOUCHED, by request: #customerPanel and #cartPanel keep their current
    look, Proceed to Checkout included. Nothing here can reach them -- every
    rule is scoped under #banner, and the panels' own controls are .checkout-btn
    and .customer-button, not .button.
*/

/* ---------------------------------------------------------------- the shade */

/*
main.css paints a flat black wash at opacity .35 over every slide. .shop uses
a gradient in its ink tone instead, which keeps the photo readable on the
right while still anchoring the text on the left.

The opacity has to be reset to 1 and the alpha baked into the gradient stops --
leaving main.css's .35 in place would flatten the gradient back out to almost
nothing.

UPDATED 2026-08-20: this was a top-to-bottom gradient when the hero was still
centred, and the comment here said so. Now that the hero is left-aligned it is
.shop's actual 90deg stops, verbatim -- dark at the copy, clear over the
photo.
*/
#banner > article:after {
    background: linear-gradient(
        90deg,
        rgba(3, 16, 28, .90) 0%,
        rgba(3, 16, 28, .68) 48%,
        rgba(3, 16, 28, .10) 78%
    );
    opacity: 1;
}

/* ------------------------------------------------------------- the headline */

#banner > article h2 {
    font-family: var(--font-display);
    font-size: clamp(30px, 4.4vw, 58px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -.052em;
    text-transform: none;
    text-shadow: 0 2px 18px rgba(3, 16, 28, .45);
}

/* --------------------------------------------------------------- the buttons */

/*
main.css's .button is Roboto, uppercase, square-cornered and 2.75em tall.
.shop's is Poppins 800, sentence case, 8px radius and a flat 50px. Scoped to
#banner so the same classes elsewhere on the site keep their current look until
the buttons get their own pass -- .button.ebay is the primary CTA in five
places (kit deal, product order-now, load-more) and moving it is its own
change, not part of the slider.
*/
#banner .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 50px;
    line-height: 1;
    padding: 0 24px;
    border-radius: 8px;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 800;
    text-transform: none;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

/* .shop's .button-primary */
#banner .button.ebay {
    background-color: var(--blue);
    color: var(--white) !important;   /* migrate.css marks its #fff important */
}

#banner .button.ebay:hover {
    background-color: #1591e6;
    transform: translateY(-1px);
}

/* .shop's .button-ghost, in place of the green .wise */
#banner .button.wise {
    background-color: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .65);
    color: var(--white);
}

#banner .button.wise:hover {
    background-color: rgba(255, 255, 255, .14);
    transform: translateY(-1px);
}

/* .shop's focus ring */
#banner .button:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}


/* ========================================================================
   Left-aligned hero -- .shop's .hero-content
   ======================================================================== */

/*
main.css centres the slide (text-align:center on the article, an inline-block
.inner at width 80%). .shop left-aligns against the 90deg shade above, with
the copy capped so it never runs across the photo.

This is the change that was deliberately skipped in the first slider pass --
paint alone could not get there, because the alignment IS the difference.
Markup moved with it: the <center> wrapper around the buttons became a flex
div, and an .eyebrow kicker was added above the headline.
*/
/*
main.css centres .inner with an old inline-block trick: article:before is an
empty inline-block of height:100% with vertical-align:middle, and .inner is an
inline-block beside it. Switching .inner to display:block on its own does NOT
work -- the full-height :before still occupies the line, so the content lands
UNDER it and overflows the slide onto the counters band below. That is exactly
what happened on the first attempt here.

So the spacer goes and the article becomes a flex container, which is how
.shop does it anyway. Safe for the carousel: main.css shows and hides slides
with opacity/visibility, never with display, so overriding display costs
nothing.
*/
#banner > article {
    display: flex;
    align-items: center;
    text-align: left;
}

#banner > article:before {
    display: none;
}

/*
    THE HERO SHARES THE PAGE CONTAINER (2026-08-22).

    This was max-width:1400px while the header and everything below it use the
    1180px container, so the hero copy started 19px LEFT of the wordmark
    directly above it -- measured at 1280: h2 at x=24, wordmark at x=43 -- and
    the gap widened with the viewport, because 1180 stays centred while 1400
    just ran wider. On .shop the headline starts on exactly the same vertical
    as the wordmark, which is what makes the fold read as one block.

    The 3em is the padding added back: the box is the container PLUS its own
    1.5em gutters, so the CONTENT edge lands on the container edge (42.5px at
    1280, 352.5px at 1900) rather than 24px inside it. Setting max-width to
    the bare container with padding still applied would have overcorrected and
    pushed the copy 24px right of the wordmark instead.

    Keeping the padding matters below ~1230px, where the box is narrower than
    the viewport and the gutter is the only thing stopping the headline
    touching the screen edge.
*/
#banner > article .inner {
    display: block;
    width: 100%;
    max-width: calc(var(--oz-container) + 3em);
    margin: 0 auto;
    padding: 0 1.5em;
}

#banner > article h2 {
    max-width: 760px;
    margin: 0;
}

/* .shop's .hero-actions: left-aligned, 12px gap, wrapping on narrow screens */
#banner .slider-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 25px;
    text-align: left;
}

/*
The eyebrow sits above the headline. typography-shop.css owns .eyebrow itself
and already lightens it to #9fd6ff inside #banner; only the spacing is here.
*/
#banner .eyebrow {
    margin-bottom: 16px;
}

@media screen and (max-width: 736px) {
    /*
    The shade is horizontal, so on a narrow screen the clear end of it lands
    under the copy. Go back to a vertical wash there -- .shop does the same.
    */
    #banner > article:after {
        background: linear-gradient(
            180deg,
            rgba(3, 16, 28, .55) 0%,
            rgba(3, 16, 28, .75) 100%
        );
    }

    #banner > article h2 {
        max-width: none;
    }
}


/* ========================================================================
   Hero height -- .shop's .hero is a band, not a viewport filler
   ======================================================================== */

/*
main.css sizes #banner as `min-height: 40em; height: 75vh`, with 60vh/75vh/
25em variants further down its media queries -- a hero that scales with the
window and, on a tall monitor, pushes everything else below the fold.

.shop's .hero is a fixed 620px band. Same photo, same copy, but the page
starts rather than the hero filling the screen. Overriding all four of
main.css's variants with one value, because .shop does not vary it either.
*/
#banner {
    min-height: 620px;
    height: 620px;
}

@media screen and (max-width: 980px) {
    #banner {
        min-height: 520px;
        height: 520px;
    }
}

@media screen and (max-width: 736px) {
    #banner {
        min-height: 460px;
        height: 460px;
    }
}

/*
.shop's .hero-copy: 18px / 1.7 on #e6eff5, capped at 650px so it never runs
across the photo, with 25px above and 31px below.

There was no body copy in this hero at all -- headline straight to buttons.
*/
#banner .hero-copy {
    max-width: 650px;
    margin: 25px 0 31px;
    color: #e6eff5;
    font-size: 18px;
    line-height: 1.7;
}

@media screen and (max-width: 736px) {
    #banner .hero-copy {
        max-width: none;
        margin: 18px 0 24px;
        font-size: 15px;
    }
}

/*
HERO CLIPPING AT THE TOP.

#banner is pulled up under the fixed chrome by
`#header + #banner { margin-top: calc(-1 * (--header-h + --utility-h)) }`, so
its first 90px sit BEHIND the utility bar and the header. That was harmless
while the hero held a headline and two buttons. Adding .shop's hero-copy made
the block tall enough that centring it in the full 620px pushed its top into
that hidden strip, and the headline lost its first line.

.shop does not centre blind either -- its .hero-content carries
`padding-block: 96px 142px`. Padding the article by the exact height of the
chrome above it means the flex centring happens in the space that is actually
visible, and the value follows the variables rather than being a magic 90.
*/
#banner > article {
    /*
    THE ARITHMETIC MATTERS HERE, so it is written down.

    #banner is pulled up under the fixed chrome by
    `#header + #banner { margin-top: calc(-1 * (--header-h + --utility-h)) }`,
    which is what makes the photo run full-bleed behind the translucent
    header. The article is absolutely positioned at the banner's top, so its
    own top sits at viewport -90.

    With align-items:center the content lands at
        articleTop + padTop + (height - padTop - padBottom - contentH) / 2
    and no sane padding value gets that below the header: at padTop 90 it
    computed to 88, and at padTop 138 it computed to 88 again, because raising
    the padding also shrinks the box the content is being centred in. Two
    pixels under the header, unchanged by the fix.

    flex-start makes it arithmetic anyone can follow instead --
        contentTop = articleTop + padTop = -90 + (90 + 120) = 120
    i.e. "the chrome height, plus the gap we want below it".
    */
    align-items: flex-start;
    /*
    TWICE the chrome, plus the gap. Not a magic number:
        contentTop = articleTop + padTop
        articleTop = -chrome            (the negative margin on #banner)
    so to land the content `gap` below the header,
        padTop = chrome + chrome + gap
    -- once to undo the pull-up, once to clear the header itself.

    Writing it as `chrome + 120` worked at 90px chrome by coincidence and
    broke the moment the mobile breakpoint used a smaller number: +72 there
    put the eyebrow 15px UNDER the header, because 72 is less than the chrome
    it had to clear.
    */
    padding-top: calc((var(--utility-h) + var(--header-h)) * 2 + 30px);
    padding-bottom: 48px;
}

/*
More content also needs more room. .shop's hero is 620px around copy of about
this length; with the header eating 90 of ours, 620 leaves 530. Give it back.
*/
/*
TWICE THE CHROME AGAIN, for the same reason the padding needs it.

.shop's hero is a 620px band. Adding the chrome once gave 710px, but the
banner is ALSO pulled up 90px by the negative margin -- so it ran from -90 to
620 and the part you could actually see, below the header, was 530px. Ninety
short of .shop, which is why it read as a smaller hero even though the
number in the CSS said 620.

    visible = height - chrome        (the top `chrome` px are behind the header)
    620     = height - 90
    height  = 620 + 2 x chrome       (once to undo the pull-up, once to clear it)
*/
#banner {
    min-height: calc(620px + (var(--utility-h) + var(--header-h)) * 2);
    height: calc(620px + (var(--utility-h) + var(--header-h)) * 2);
}

@media screen and (max-width: 980px) {
    #banner {
        min-height: calc(560px + (var(--utility-h) + var(--header-h)) * 2);
        height: auto;
    }
}

@media screen and (max-width: 736px) {
    #banner {
        min-height: calc(500px + (var(--utility-h) + var(--header-h)) * 2);
        height: auto;
    }
}

/*
MOBILE OVERFLOW.

At 375px the hero content ran 78px PAST the banner and sat on top of the
finder card. The slides are position:absolute, so they contribute no height --
`height: auto` on #banner does nothing for them, and the banner stayed at its
min-height while the content kept growing.

Two ways out: make the banner tall enough for everything, or give it less to
hold. A 713px hero on a 375px phone is most of the screen before a single
product, so this trims instead.

The copy goes below 560px. It is four lines of 15px detail that the headline
and the two buttons already imply, and .shop drops elements at its own small
breakpoints for the same reason. Headline and clamp come down with it.
*/
@media screen and (max-width: 560px) {
    #banner .hero-copy {
        display: none;
    }

    #banner > article h2 {
        font-size: clamp(26px, 7vw, 34px);
    }

    #banner > article {
        padding-top: calc((var(--utility-h) + var(--header-h)) * 2 + 24px);
        padding-bottom: 32px;
    }

    #banner .slider-actions {
        margin-top: 18px;
    }
}

/*
MEASURED AGAINST THE LIVE .shop, NOT ITS min-height.

.shop's .hero declares min-height:620px, so that is what I matched -- and the
hero still read short. 620 is only a FLOOR there: .hero-content carries
padding-block 96px/142px and the h1 runs at 70px, which pushes the rendered
hero to 749px. Measured on https://www.ozroofracks.shop at 1440: heroTop 114,
heroBottom 863, height 749.

So this stops fixing the height and mirrors the construction instead --
content-driven, with the floor underneath. The padding carries the same
2 x chrome compensation as before (once to undo #banner's negative pull-up,
once to clear the fixed header) plus .shop's own 96, so the eyebrow lands
96px below the visible top exactly as it does there.

    padTop = 2 x chrome + 96      padBottom = 142
*/
#banner {
    height: auto;
    /*
    749, not 620. .shop declares min-height:620 but renders 749 -- its
    content is taller than its own floor. Ours is shorter (no second body
    paragraph), so leaving the floor at 620 meant the floor won and the hero
    stayed 129px short of .shop no matter what the padding did. The floor is
    the measured height now, and height:auto still lets a longer headline
    grow it.

    Plus 2 x chrome, as everywhere in this file: once to undo #banner's
    negative pull-up, once to clear the fixed header above it.
    */
    min-height: calc(749px + (var(--utility-h) + var(--header-h)) * 2);
    background: var(--ink);   /* main.css leaves #444 showing between slides */
}

#banner > article {
    padding-top: calc((var(--utility-h) + var(--header-h)) * 2 + 96px);
    padding-bottom: 142px;
}

/* .shop's h1 clamp, verbatim -- mine topped out at 58px against its 70 */
#banner > article h2 {
    font-size: clamp(42px, 5vw, 70px);
}

@media screen and (max-width: 736px) {
    #banner > article {
        padding-top: calc((var(--utility-h) + var(--header-h)) * 2 + 48px);
        padding-bottom: 64px;
    }

    #banner > article h2 {
        font-size: clamp(28px, 7vw, 40px);
    }
}