/* ============================================================================
   home_2.css — the redesigned HOMEPAGE ONLY. Loaded after /home.css.
   Consolidated + deduplicated from the design-v2 … design-v8 blocks of
   docs/mockups/index-preview-v8.html. Do not load on other pages (the
   .nav-*/.footer-top styles here belong to the homepage's _2 includes).
   The snow + snowdrift rules are gated behind body.festive, which PHP sets
   when date('n') >= 9 or <= 1 (Sep–Jan). Outside those months the hero keeps
   the plain blue with the standard scalloped tear.
   ========================================================================= */

/* ---- hero copy additions (proof line + secondary upload link) ----
   Ink at full strength for AA contrast on the mid-gradient blue; these two are
   quieter than the CTA in SIZE and WEIGHT, never in ink. */
/* decision pair on one row (button + quiet alternative), reassurance ticks below */
#home-banner .hb-cta-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px 18px}
#home-banner .hb-cta-note{margin:16px 0 0;color:rgba(255,255,255,.94);font-size:.9rem;font-weight:600}
#home-banner .hb-cta-note span{display:flex;align-items:baseline;gap:8px;margin-bottom:5px}
#home-banner .hb-cta-note i{color:#9ae6b4;font-size:.85em}
@media (max-width:900px){
  #home-banner .hb-cta-row{justify-content:center}
  #home-banner .hb-cta-note span{justify-content:center}
}
#home-banner .hb-secondary{display:inline-block;color:#fff;font-size:.9rem;font-weight:600;text-decoration:underline;text-decoration-color:rgba(255,255,255,.55);text-underline-offset:3px;transition:text-decoration-color .2s ease}
#home-banner .hb-secondary:hover{color:#fff;text-decoration-color:#fff}

/* CTA arrow nudges on hover */
#home-banner .hb-cta .hb-cta-arrow{transition:transform .2s ease}
#home-banner .hb-cta:hover .hb-cta-arrow{transform:translateX(3px)}

/* ---- hero entrance choreography ----
   home.css already lifts the h1 (fadeUp 1s) and the note paragraph (1.2s, .2s
   delay); these join the same sequence so the hero settles top-to-bottom. */
#home-banner .hb-cta{animation:fadeUp .8s ease .15s both}
#home-banner .hb-secondary{animation:fadeUp .8s ease .3s both}
#home-banner .hb-pill{animation:fadeUp .7s ease both}
#home-banner .hb-pill:nth-child(1){animation-delay:.45s}
#home-banner .hb-pill:nth-child(2){animation-delay:.55s}
#home-banner .hb-pill:nth-child(3){animation-delay:.65s}

/* ---- v2: ticket vernacular ---- */
#home-banner .hb-copy h1 span{color:rgba(255,255,255,.9)}

/* hero tear: scalloped ticket edge between hero and content (non-festive default) */
.hero-tear{height:16px;background-color:#f3f3f3;background-image:radial-gradient(circle 10px at 12px -4px,#1D4ED8 9px,rgba(0,0,0,0) 10px);background-size:24px 16px;background-repeat:repeat-x}

/* trust pills -> ticket stubs with REAL punched notches.
   The holes are mask cutouts (two no-repeat layers, one per half, so no
   mask-composite is needed): the hero gradient and the festive snow show
   through them. The shadow moves to the parent as a drop-shadow filter so it
   contours the cutouts; a browser without mask support just renders solid
   stubs with no holes. */
#home-banner .hb-pills{filter:drop-shadow(0 2px 6px rgba(0,0,0,.18))}
#home-banner .hb-pill{position:relative;background:#fff;backdrop-filter:none;color:#1e293b;font-weight:700;border-radius:8px;padding:9px 20px;box-shadow:none;
  -webkit-mask:radial-gradient(circle 5px at 0 50%,transparent 4.5px,#000 5px) left/51% 100% no-repeat,radial-gradient(circle 5px at 100% 50%,transparent 4.5px,#000 5px) right/51% 100% no-repeat;
  mask:radial-gradient(circle 5px at 0 50%,transparent 4.5px,#000 5px) left/51% 100% no-repeat,radial-gradient(circle 5px at 100% 50%,transparent 4.5px,#000 5px) right/51% 100% no-repeat}
#home-banner .hb-pill i{color:#dc3545;font-size:.95em}
#home-banner .hb-pill i.fa-star{color:#f5b301}

/* how-it-works: circles -> sequential ticket numbers */
.step-ticket{display:inline-flex;align-items:baseline;gap:9px;margin:0 auto 20px;padding:10px 24px;border:2px dashed currentColor;border-radius:8px;background:#fff}
.step-ticket .no-label{font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.step-ticket .no{font-family:"Courier New",Courier,monospace;font-size:1.5rem;font-weight:700;letter-spacing:.14em;line-height:1}

/* perforation rules with cut-here scissors (replace the plain <hr>s) */
.perf-rule{position:relative;border:0;border-top:2px dashed #c3cfdd;margin:32px auto;overflow:visible}
.perf-rule i{position:absolute;left:50%;top:-10px;transform:translateX(-50%) scaleX(-1);color:#8fa3b8;background:var(--bg,#fff);padding:0 10px;font-size:.95rem}

/* gold review stars */
.bg-soft-blue .fa-star{color:#f5b301}

/* flattened spec cards keep FA check icons */
.spec-check{color:#28a745;font-size:.8em;margin-right:5px}

/* fundraiser feature band */
.fp-eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#dc3545;margin-bottom:8px}
#pagecontainer .fp-more{display:inline-block;margin-bottom:8px;color:#0056b3;font-weight:600;text-decoration:underline} /* #pagecontainer: outguns global.css's `#pagecontainer a` */
#pagecontainer .fp-more:hover{color:#003d80}

/* footer top band */
.footer-top{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center;padding:28px 10px 22px;border-bottom:1px dashed rgba(255,255,255,.25);margin-bottom:6px}
.footer-top .ft-brand{font-family:WorkSans,"Century Gothic",sans-serif;font-size:1.7rem;color:#fff;font-weight:700;letter-spacing:-1px} /* matches .navbar-brand-23 so the two wordmarks agree */
.footer-top .ft-tag{color:#9aa3ab;margin:4px 0 0;font-size:.92rem;max-width:420px}
.footer-top .ft-contact{text-align:right}
.footer-top .ft-phone{display:block;color:#fff;font-size:1.45rem;font-weight:700;text-decoration:none}
.footer-top .ft-phone i{color:#dc3545;font-size:1.1rem;margin-right:8px}
.footer-top .ft-phone:hover{color:#fff;text-decoration:none}
.footer-top .ft-email{color:#9fc3e8;font-size:.95rem;text-decoration:none}
.footer-top .ft-email:hover{text-decoration:underline}
@media (max-width:640px){.footer-top{justify-content:center;text-align:center}.footer-top .ft-contact{text-align:center}}

/* ---- v3: the whole page is a sheet of tickets ---- */

/* generic scalloped tear between sections: set --top / --bot per instance */
.tear{height:16px;background-color:var(--bot,#fff);background-image:radial-gradient(circle 10px at 12px -4px,var(--top,#ccc) 9px,rgba(0,0,0,0) 10px);background-size:24px 16px;background-repeat:repeat-x}

/* punch-notch utility: REAL cutouts via mask (the notch bites through the
   dashed border too, like a genuinely punched ticket). Both users of this
   class are flat (their shadows are removed below), so masking clips nothing
   it shouldn't. Fallback without mask support: no notches, nothing broken. */
.tkt-notched{position:relative;
  -webkit-mask:radial-gradient(circle 8px at 0 50%,transparent 7.5px,#000 8px) left/51% 100% no-repeat,radial-gradient(circle 8px at 100% 50%,transparent 7.5px,#000 8px) right/51% 100% no-repeat;
  mask:radial-gradient(circle 8px at 0 50%,transparent 7.5px,#000 8px) left/51% 100% no-repeat,radial-gradient(circle 8px at 100% 50%,transparent 7.5px,#000 8px) right/51% 100% no-repeat}

/* review cards -> tickets with serial numbers */
.bg-soft-blue.border{border:2px dashed #9dbde4 !important;position:relative}
.tkt-serial{position:absolute;top:10px;right:14px;font-family:"Courier New",Courier,monospace;font-size:.76rem;font-weight:700;letter-spacing:.08em;color:#8aa4c4}

/* why-customers-come-back cards */
.card.bg-soft-grey{border:2px dashed #ccd5de}

/* why-choose feature cards */
.feature-card{box-shadow:none;border:2px dashed #c9d7e8}

/* pricing panel: the full ticket (notches are real cutouts via .tkt-notched) */
.bg-soft-green .rounded-10{border:2px dashed #7fb08d;box-shadow:none !important}

/* FAQ items: a book of tear-off coupons */
.home-faq .faq-item{box-shadow:none;border:2px dashed #b9cbe2}

/* fundraiser wrap — scoped to out-specify home.css's
   .home-fundraiserpage .card-wrap, or its shadow quietly survives */
.home-fundraiserpage .card-wrap{box-shadow:none;border:2px dashed #c9d7e8}

/* spec bottom CTA bar joins the system */
.tkt-dash-white{border:2px dashed #c9d7e8 !important;box-shadow:none !important}

/* (the FREE PROOF FIRST stamp over the hero showcase was removed on Tim's
   ruling 2026-08-28 — the message lives in the hb-cta-note text instead;
   the .note-stamp on the seasonal strip is a separate, surviving element) */

/* CSS barcode, print-trade garnish */
.tkt-barcode{display:inline-block;height:30px;width:86px;background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 4px,currentColor 4px 5px,transparent 5px 9px,currentColor 9px 12px,transparent 12px 14px)}
.tkt-barcode-wrap{text-align:center;line-height:1;margin-top:14px}
.tkt-barcode-label{display:block;font-family:"Courier New",Courier,monospace;font-size:.66rem;letter-spacing:.22em;margin-top:4px;color:inherit}
.footer-top .tkt-barcode-wrap{color:#8d959c;margin:0}

/* ---- v4: landing-page conversion pass ----
   (nav phone removed on Tim's ruling 2026-08-28 — it crowded the nav;
   the tap-to-call lives in the footer band) */

/* logged-in account control: a quiet outline pill opening a standard dropdown,
   replacing the raw email + [DASHBOARD]/[LOGOUT] text block */
/* ORDER as the nav's one loud action: plain link in brand red (a pill was
   tried and ruled "odd" — Tim, 2026-08-28). Matches the logo's "Stubbs" red. */
/* three-class selector: global.css sets link colour at
   .navbar-dark-23 .navbar-nav-23 .nav-link-23 (0,3,0), so anything weaker loses */
.navbar-dark-23 .navbar-nav-23 .nav-order-red{color:#dc3545;font-weight:700}
.navbar-dark-23 .navbar-nav-23 .nav-order-red span{color:#fff} /* ORDER red, NOW white — same split as the StubbsTickets logo */
.navbar-dark-23 .navbar-nav-23 .nav-order-red:hover,
.navbar-dark-23 .navbar-nav-23 .nav-order-red:focus{color:#ff6b7a}

.nav-account{display:flex;align-items:center}
.nav-account-btn{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;margin-right:20px;color:#fff;font-size:.9rem;font-weight:600;letter-spacing:.02em;border:1px solid rgba(255,255,255,.35);border-radius:50px;text-decoration:none;white-space:nowrap;transition:background .15s ease,border-color .15s ease}
.nav-account-btn:hover,.nav-account-btn:focus{color:#fff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.55);text-decoration:none}
.nav-account-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.nav-account-btn i{color:#dc3545;font-size:1.1em}
.nav-account-menu{min-width:230px;border:none;border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.18);padding:10px 0;margin-top:10px}
.nav-account-email{display:block;padding:4px 18px 2px;font-size:.8rem;color:#6c757d;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-account-menu .dropdown-item{padding:8px 18px;font-weight:600;color:#212529}
.nav-account-menu .dropdown-item i{width:22px;color:#dc3545;font-size:.9em}
.nav-account-menu .dropdown-item:hover{background:#f2f7ff}
@media (max-width:991px){
  .nav-account{display:block;margin:6px 0 12px}
  .nav-account-btn{margin-right:0}
  /* collapsed nav: the menu flows under the pill, never Popper-floated beside it */
  .nav-account-menu{position:static !important;transform:none !important;float:none;width:100%;box-shadow:none;border:1px solid rgba(255,255,255,.2);background:transparent;padding:6px 0 0;margin-top:8px}
  .nav-account-email{color:#adb5bd}
  .nav-account-menu .dropdown-item{color:#fff}
  .nav-account-menu .dropdown-item:hover{background:rgba(255,255,255,.08);color:#fff}
  .nav-account-menu .dropdown-divider{border-color:rgba(255,255,255,.15)}
}

/* seasonal strip: reassurance palette (v4 base merged with the v8 blue palette) */
.season-note{display:inline-flex;align-items:center;gap:12px;border:2px dashed #9dbde4;background:#f2f7ff;color:#33526b;border-radius:8px;padding:10px 18px;font-weight:600;font-size:.95rem;margin-bottom:20px;text-align:left}
.season-note i{color:#4a7fb5}
/* red rubber stamp on the urgent variant — same stamp vocabulary as the hero */
.season-note .note-stamp{flex:0 0 auto;transform:rotate(-4deg);border:2px solid #dc3545;color:#dc3545;background:rgba(255,255,255,.85);border-radius:5px;padding:3px 10px;font-weight:800;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.2;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.season-note .note-copy{flex:1 1 auto;min-width:0} /* one flex item, so narrow screens wrap the sentence, not the layout */
.season-note .note-copy strong{color:#dc3545} /* lead-in matches the URGENT stamp red */
#pagecontainer .season-note a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:2px} /* tel/contact link: id prefix needed to beat global.css #pagecontainer a colour */
#pagecontainer .season-note a:hover{color:#dc3545}
@media (max-width:576px){
  /* phone: stamp/icon beside 7 wrapped lines leaves a dead column — stack instead */
  .season-note{flex-direction:column;align-items:flex-start;gap:8px}
}

/* while the cookie banner is open (body.cc-open, toggled in head-tracking),
   lift the Penny launcher clear of it — on phones it covers the Allow button */
body.cc-open .penny-btn{bottom:120px}
@media (max-width:768px){
  body.cc-open .penny-btn{bottom:190px}
}

/* ---- unified page CTA — the hero button's voice, reused everywhere ----
   (replaces the mismatched btn-danger / btn-lg / btn-block / btn-pill mix)
   ⚠ #pagecontainer prefix is load-bearing: global.css's `#pagecontainer a`
   (id specificity) forces #5183cf 15px onto any bare-class link. The old
   buttons were only rescued by `#pagecontainer .btn`; these must rescue
   themselves. */
#pagecontainer .tkt-cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:13px 30px;border:none;border-radius:12px;background:#dc3545;color:#fff;font-size:1.02rem;font-weight:700;line-height:1.15;letter-spacing:-.01em;text-align:center;text-decoration:none;box-shadow:0 4px 16px rgba(220,53,69,.25);transition:background .2s ease,transform .15s ease,box-shadow .15s ease}
#pagecontainer .tkt-cta:hover{background:#bb2d3b;color:#fff;text-decoration:none;transform:translateY(-1px);box-shadow:0 6px 20px rgba(220,53,69,.32)}
#pagecontainer .tkt-cta:focus-visible{outline:2px solid #dc3545;outline-offset:3px}
#pagecontainer .tkt-cta .tkt-cta-arrow{font-size:1.15em;line-height:1;transition:transform .2s ease}
#pagecontainer .tkt-cta:hover .tkt-cta-arrow{transform:translateX(3px)}
@media (max-width:480px){#pagecontainer .tkt-cta{font-size:.95rem;padding:12px 20px;max-width:100%}}

/* design-grid captions — pick up the brand red when the card lifts
   (#pagecontainer: outguns global.css's `#pagecontainer p`) */
#pagecontainer .tpl-name{font-size:.92rem;font-weight:600;color:#33415c;margin:10px 0 0;transition:color .15s ease}
#pagecontainer a:hover .tpl-name{color:#dc3545}

/* ---- How It Works steps: ticket-style cards, one tint per step, with
   connecting arrows on desktop ("a bit bare" — Tim, 2026-08-28) ---- */
.step-card{border:2px dashed #c7d4e4;border-radius:12px;padding:26px 20px 22px;height:100%;background:#fff}
.step-card--red{border-color:#eec3c9;background:linear-gradient(180deg,#fff 0%,#fdf6f7 100%)}
.step-card--blue{border-color:#bcd3ee;background:linear-gradient(180deg,#fff 0%,#f4f8fd 100%)}
.step-card--green{border-color:#bedec7;background:linear-gradient(180deg,#fff 0%,#f4faf6 100%)}
@media (min-width:768px){
  .step-col{position:relative}
  .step-col:not(:last-child)::after{content:"\2192";position:absolute;right:-13px;top:44%;color:#b6c4d4;font-size:1.7rem;line-height:1;z-index:1}
}

/* ---- ambient hero depth: glow blobs + ghost tickets (Tim, 2026-08-28:
   "love the colour... put some blobs or stuff in there") ---- */
/* real elements, not pseudos: festive snow owns ::before/::after on #home-banner */
#home-banner{position:relative;overflow:hidden}
#home-banner .container{position:relative;z-index:2}
.hb-deco{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.hb-blob{position:absolute;border-radius:50%;filter:blur(55px)}
.hb-blob--1{width:560px;height:560px;top:-220px;left:-140px;background:radial-gradient(circle,rgba(147,197,253,.5) 0%,rgba(147,197,253,0) 70%);animation:hbDrift 26s ease-in-out infinite alternate}
.hb-blob--2{width:480px;height:480px;bottom:-200px;right:-120px;background:radial-gradient(circle,rgba(125,211,252,.4) 0%,rgba(125,211,252,0) 70%);animation:hbDrift 32s ease-in-out infinite alternate-reverse}
.hb-blob--3{width:420px;height:420px;bottom:-180px;left:32%;background:radial-gradient(circle,rgba(30,58,138,.55) 0%,rgba(30,58,138,0) 70%);animation:hbDrift 38s ease-in-out infinite alternate}
.hb-blob--4{width:380px;height:380px;top:-140px;right:14%;background:radial-gradient(circle,rgba(96,165,250,.38) 0%,rgba(96,165,250,0) 70%);animation:hbDrift 30s ease-in-out infinite alternate-reverse}
.hb-blob--5{width:300px;height:300px;top:38%;left:44%;background:radial-gradient(circle,rgba(191,219,254,.28) 0%,rgba(191,219,254,0) 70%);animation:hbDrift 34s ease-in-out infinite alternate}
.hb-blob--6{width:340px;height:340px;bottom:-120px;left:-100px;background:radial-gradient(circle,rgba(23,37,84,.45) 0%,rgba(23,37,84,0) 70%);animation:hbDrift 42s ease-in-out infinite alternate-reverse}
/* (ghost-ticket outlines removed — Tim's ruling, 2026-08-28) */
@keyframes hbDrift{to{transform:translate(50px,30px) scale(1.08)}}

/* ---- v8: blue, but make it Christmas (Sep–Jan only, via body.festive) ---- */
/* two layers of snow, different sizes and speeds; sits behind the content */
/* transform/width/height are reset explicitly: home.css's #home-banner::before
   (the radial highlight) sets translate(-50%,-50%) at 120% size, and a winning
   rule only overrides what it sets — without the reset, this layer inherits
   that transform and only snows on the top-left of the hero. */
body.festive #home-banner::before,body.festive #home-banner::after{content:"";position:absolute;inset:0;width:auto;height:auto;transform:none;pointer-events:none;z-index:1;background-repeat:repeat}
body.festive #home-banner::before{
  background-image:
    radial-gradient(2.5px 2.5px at 18px 36px,#fff 50%,rgba(255,255,255,0) 52%),
    radial-gradient(2px 2px at 84px 130px,rgba(255,255,255,.9) 50%,rgba(255,255,255,0) 52%),
    radial-gradient(1.5px 1.5px at 146px 62px,rgba(255,255,255,.75) 50%,rgba(255,255,255,0) 55%),
    radial-gradient(2px 2px at 210px 188px,rgba(255,255,255,.85) 50%,rgba(255,255,255,0) 52%),
    radial-gradient(1.5px 1.5px at 60px 224px,rgba(255,255,255,.7) 50%,rgba(255,255,255,0) 55%);
  background-size:260px 260px;animation:snowA 24s linear infinite;opacity:.85}
body.festive #home-banner::after{
  background-image:
    radial-gradient(3.5px 3.5px at 40px 60px,rgba(255,255,255,.95) 50%,rgba(255,255,255,0) 52%),
    radial-gradient(3px 3px at 170px 150px,rgba(255,255,255,.8) 50%,rgba(255,255,255,0) 52%),
    radial-gradient(9px 9px at 230px 40px,rgba(255,255,255,.16) 40%,rgba(255,255,255,0) 60%),
    radial-gradient(2.5px 2.5px at 110px 250px,rgba(255,255,255,.85) 50%,rgba(255,255,255,0) 52%);
  background-size:300px 300px;animation:snowB 14s linear infinite;opacity:.9}
@keyframes snowA{to{background-position:0 260px}}
@keyframes snowB{to{background-position:0 300px}}

/* ---- reduced motion: snow freezes, entrances and stamp render settled ---- */
@media (prefers-reduced-motion: reduce){
  body.festive #home-banner::before,body.festive #home-banner::after{animation:none}
  .hb-blob{animation:none}
  #home-banner .hb-cta,#home-banner .hb-secondary,#home-banner .hb-pill{animation:none}
  #home-banner .hb-cta .hb-cta-arrow{transition:none}
  #pagecontainer .tkt-cta,#pagecontainer .tkt-cta .tkt-cta-arrow{transition:none}
}

/* ---- keyboard focus restored (home.css sets outline:none on the FAQ buttons) ---- */
.home-faq .faq-q:focus-visible{outline:2px solid #2563EB;outline-offset:-2px;border-radius:8px}
#home-banner .hb-cta:focus-visible,#home-banner .hb-secondary:focus-visible,.footer-top .ft-phone:focus-visible,.footer-top .ft-email:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* the tear becomes a snowdrift: grey mounds rising into the blue */
body.festive .hero-tear{height:20px;background-color:#1D4ED8;background-image:radial-gradient(circle 13px at 15px 21px,#f3f3f3 12px,rgba(0,0,0,0) 13px);background-size:30px 20px;background-repeat:repeat-x;border:0}