/*
 * Homepage hero: Season Savings teaser (template-parts/home-season-teaser.php).
 * Front page only, while the seasonal page is published and its teaser is on
 * (inc/holiday-savings.php). Same string lights and yellow gift tag as the
 * page itself, so the click lands somewhere that looks the same.
 *
 * Centered under the hero's Schedule Service / phone buttons: a string of
 * lights across the hero, fading out at both ends, with the tag hanging from
 * the middle of it (where two swags meet). The parent's hero has no hook after
 * the buttons, so .hst is absolutely positioned into the hero's bottom padding
 * band, which grows by the teaser's height while it shows (:has()):
 *
 *   hero bottom padding = trust-strip overlap + gap + teaser + a little air
 *
 *   601px and up ... one row: label pill · tag line · Learn More
 *   600px and under  label pill · Learn More (tag line hidden)
 *
 * The whole tag is the link: .hst__btn::after covers .hst__tag. Motion: the
 * bulbs switch on once and the tag swings once, gently; none under reduced
 * motion.
 *
 * Ported from Mainstream (2026-11-09). Colours: the brand accent is the tag,
 * #16202b text on it 5.0:1; white on the navy pill and button 10:1+.
 * Spacing: 72 Degrees' trust strip bites 64px into the hero (40px on phones).
 */

.hero-home:has(.hst) {
    --hst-strip: 64px;  /* the trust strip rides up over the hero this much */
    --hst-gap: 32px;    /* tag bottom to the trust strip's top */
    --hst-h: 86px;      /* teaser block: drop + tag + room for the tilt */
    padding-bottom: calc(var(--hst-strip) + var(--hst-gap) + var(--hst-h) + 8px);
}

.hst {
    --hst-yellow: #ff4d00; /* the tag (brand accent) */
    --hst-navy: #0d4066;
    --hst-ink: #16202b; /* text on the tag */
    --hst-btn-hover: #051827;
    --hst-hook: 7px;    /* teaser top to the wire where two swags meet */
    --hst-drop: 16px;   /* teaser top to the top of the tag */
    --hst-hole: 11px;   /* tag top to the centre of its punched hole */
    --hst-tilt: -1.5deg;
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--hst-strip, 40px) + var(--hst-gap, 32px));
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: var(--hst-h, 86px);
    pointer-events: none;
}

/* ---- Lights --------------------------------------------------------------- */

.hst__lights {
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    width: min(1080px, 100%);
    height: 46px;
    overflow: hidden;
    transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}
.hst .hs-lights__wire { stroke: #020a1f; stroke-width: 2.4; }
.hst .hs-bulb { color: #ffd84d; }
.hst .hs-bulb--2 { color: #ff5a5f; }
.hst .hs-bulb--3 { color: #4fe08a; }
.hst .hs-bulb--4 { color: #6cc6ff; }
.hst .hs-bulb--5 { color: #ffa94d; }
.hst .hs-bulb path { fill: currentColor; }
.hst .hs-bulb__glow { fill: currentColor; opacity: 0.4; }

/* ---- Tag ------------------------------------------------------------------ */

.hst__hang {
    position: relative;
    padding-top: var(--hst-drop);
    filter: drop-shadow(0 10px 18px rgba(1, 8, 26, 0.38));
}
/* From the wire down into the tag's hole. */
.hst__string {
    position: absolute;
    left: 50%;
    top: var(--hst-hook);
    z-index: 1;
    width: 2px;
    height: calc(var(--hst-drop) + var(--hst-hole) - var(--hst-hook));
    transform: translateX(-50%);
    background: #020a1f;
}
.hst__tag {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 22px 12px 10px 14px;
    color: var(--hst-ink);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent 40%),
        var(--hst-yellow);
    /* Clipped top corners, punched hole for the string. */
    clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%, 0 14px);
    -webkit-mask: radial-gradient(circle at 50% var(--hst-hole), transparent 4.5px, #000 5px);
            mask: radial-gradient(circle at 50% var(--hst-hole), transparent 4.5px, #000 5px);
    transform: rotate(var(--hst-tilt));
    transform-origin: 50% var(--hst-hole);
    transition: transform 0.3s ease;
    pointer-events: auto;
}
.hst__tag:hover,
.hst__tag:focus-within { transform: rotate(0deg); }

.hst__eyebrow {
    margin: 0;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--hst-navy);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}
.hst__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--hst-ink);
}
.hst__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 34px;
    padding: 6px 14px;
    border-radius: var(--radius-md, 8px);
    background: var(--hst-navy);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.15s ease;
}
.hst__btn::after { content: ""; position: absolute; inset: 0; }
.hst__btn i {
    --fa-primary-color: currentColor;
    --fa-secondary-color: currentColor;
    transition: transform 0.15s ease;
}
.hst__btn:hover,
.hst__btn:focus-visible,
.hst__tag:hover .hst__btn { background: var(--hst-btn-hover); color: #fff; }
.hst__tag:hover .hst__btn i { transform: translateX(3px); }
/* The tag's clip-path would cut an outline drawn around the tag; ring the button. */
.hst__btn:focus-visible { outline: 3px solid var(--hst-navy); outline-offset: 2px; }

/* ---- Phones: label pill + Learn More -------------------------------------- */

@media (max-width: 600px) {
    .hero-home:has(.hst) {
        --hst-strip: 40px;
        --hst-gap: 26px;
        --hst-h: 74px;
    }
    .hst { --hst-hook: 5px; --hst-drop: 12px; --hst-hole: 10px; }
    .hst__lights {
        width: 100%;
        height: 38px;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
                mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    }
    .hst__tag { gap: 10px; padding: 20px 8px 8px 10px; }
    .hst__title { display: none; }
    .hst__btn { min-height: 30px; padding: 5px 12px; font-size: 0.82rem; }
}

/* ---- 72 Degrees: stacked hero ---------------------------------------------- */

/* At 900px and under the hero's foreground figure (the wizard) stacks UNDER the
 * buttons (child.css "(c) Stacked layout"), so the tag hangs just below his
 * feet. 20px more air keeps the lights off his shoes. (hst-air-72) */
@media (max-width: 900px) {
    .hero-home.hero-has-foreground:has(.hst) {
        padding-bottom: calc(var(--hst-strip) + var(--hst-gap) + var(--hst-h) + 28px);
    }
}

/* ---- Motion --------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    .hst .hs-bulb {
        animation: hst-switch-on 0.7s ease both;
        animation-delay: calc(var(--i) * 40ms + 0.2s);
    }
    /* backwards, not both: once it settles, :hover can straighten the tag. */
    .hst__tag { animation: hst-swing 1.6s cubic-bezier(0.3, 0.7, 0.4, 1) 0.6s backwards; }
}
@media (prefers-reduced-motion: reduce) {
    .hst__tag,
    .hst__btn i { transition: none; }
    .hst__tag:hover,
    .hst__tag:focus-within { transform: rotate(var(--hst-tilt)); }
    .hst__tag:hover .hst__btn i { transform: none; }
}
@keyframes hst-switch-on {
    0%   { opacity: 0.12; }
    55%  { opacity: 1; }
    70%  { opacity: 0.55; }
    100% { opacity: 1; }
}
@keyframes hst-swing {
    0%   { transform: rotate(-5deg); }
    35%  { transform: rotate(1.5deg); }
    65%  { transform: rotate(-2.5deg); }
    100% { transform: rotate(var(--hst-tilt)); }
}