/* ============ SEASONAL THEME: HALLOWEEN ============
     Switched on and off by assets/seasonal.js, which adds .theme-halloween to <html> during the configured
     dates. Every rule below is scoped under that class, so this file changes nothing when the theme is off.
     Kept separate from style.css so the whole theme can be removed by deleting this file, seasonal.js,
     their <head> tags and the homepage banner markup.

     Decorations are CSS pseudo-elements (never announced by screen readers) or aria-hidden SVGs. They sit in
     section padding or behind opaque components, ignore pointer events, stay inside their section's box (no
     sideways scroll) and, because the class is set before first paint, cause no layout shift. */

  html.theme-halloween{
    --hw-orange:#f08c3a;        /* 7.96:1 against --navy-deep text on the banner button */
    --hw-orange-light:#f5a35c;  /* 9.6:1 on --navy-deep */
    /* Corner cobweb, anchored top-left; used as a mask so each placement can pick its own colour */
    --hw-web:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.6' d='M0 0L100 0M0 0L95 31M0 0L81 59M0 0L59 81M0 0L31 95M0 0L0 100M24 0Q20.4 3.2 22.8 7.4Q18.4 9.4 19.4 14.1Q14.6 14.6 14.1 19.4Q9.4 18.4 7.4 22.8Q3.2 20.4 0 24M44 0Q37.4 5.9 41.8 13.6Q33.7 17.2 35.6 25.9Q26.8 26.8 25.9 35.6Q17.2 33.7 13.6 41.8Q5.9 37.4 0 44M64 0Q54.4 8.6 60.9 19.8Q49 25 51.8 37.6Q38.9 38.9 37.6 51.8Q25 49 19.8 60.9Q8.6 54.4 0 64M84 0Q71.4 11.3 79.9 26Q64.4 32.8 68 49.4Q51.1 51.1 49.4 68Q32.8 64.4 26 79.9Q11.3 71.4 0 84'/%3E%3C/svg%3E");
  }

  /* ---------- SEASONAL BANNER (homepage, above the header) ---------- */
  /* Markup ships with `hidden`; only this rule reveals it. It scrolls away, and the sticky header then takes over. */
  html.theme-halloween .seasonal-banner{
    display:block;
    background:var(--navy-deep);color:var(--white);
    border-bottom:1px solid rgba(240,140,58,.35);
  }
  html.theme-halloween .seasonal-banner-inner{
    max-width:var(--max);margin:0 auto;
    padding:.6rem clamp(1.25rem,4vw,3rem);
    display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.5rem 1rem;
    text-align:center;
  }
  html.theme-halloween .seasonal-banner p{margin:0;font-size:.9rem;font-weight:500;line-height:1.45;}
  html.theme-halloween .seasonal-banner strong{color:var(--hw-orange-light);font-weight:800;}
  html.theme-halloween .seasonal-banner-note{color:rgba(255,255,255,.72);font-size:.8rem;white-space:nowrap;}
  html.theme-halloween .seasonal-pumpkin{
    width:22px;height:22px;flex-shrink:0;
    background:url('images/seasonal/pumpkin.svg') center/contain no-repeat;
    transform-origin:50% 90%;
    animation:hw-wobble 2.4s ease-in-out .6s 3;  /* a few gentle wobbles on load, then still */
  }
  html.theme-halloween .seasonal-banner-btn{
    display:inline-flex;align-items:center;
    background:var(--hw-orange);color:var(--navy-deep);
    padding:.45rem 1rem;border-radius:999px;
    font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
    transition:background .18s ease;
  }
  html.theme-halloween .seasonal-banner-btn:hover{background:var(--hw-orange-light);}
  html.theme-halloween .seasonal-banner-btn:focus-visible{outline:2px solid var(--white);outline-offset:3px;}
  @keyframes hw-wobble{0%,100%{transform:rotate(0);}25%{transform:rotate(-7deg);}75%{transform:rotate(7deg);}}
  html.theme-halloween .sb-label-short{display:none;}
  /* Mobile: copy left, a short "Book" pill right, on one row. The shorter pill leaves the copy room for two lines
     instead of three, and the pill's ::after stretches over the whole banner, so the entire banner is the tap
     target (well over 44px tall). The link's accessible name stays "Book a class" at every width. */
  @media (max-width:640px){
    html.theme-halloween .seasonal-banner-inner{position:relative;flex-wrap:nowrap;justify-content:space-between;text-align:left;gap:.6rem;padding-top:.5rem;padding-bottom:.5rem;}
    html.theme-halloween .seasonal-banner p{font-size:.8rem;line-height:1.35;}
    html.theme-halloween .seasonal-banner-note{font-size:.76rem;}
    html.theme-halloween .seasonal-banner-btn{padding:.5rem .9rem;}
    html.theme-halloween .seasonal-banner-btn::after{content:"";position:absolute;inset:0;}
    html.theme-halloween .sb-label-full{display:none;}
    html.theme-halloween .sb-label-short{display:inline;}
  }
  /* Short landscape screens (e.g. 1024x600): a slimmer banner and slightly tighter gaps around the hero intro
     offset the banner's height, so the hero's Book Now button stays on the first screen. Type sizes are unchanged. */
  @media (min-width:641px) and (max-height:700px){
    html.theme-halloween .seasonal-banner-inner{padding-top:.4rem;padding-bottom:.4rem;}
    html.theme-halloween .hero.seasonal-hero .eyebrow{margin-bottom:1rem;}
    html.theme-halloween .hero.seasonal-hero p.lede{margin:1.2rem 0 1.6rem;}
  }
  @media (max-width:480px){
    html.theme-halloween .seasonal-pumpkin{display:none;}
  }

  /* ---------- HOMEPAGE DECORATIONS ---------- */
  /* Corner cobwebs sit inside each section's top padding: their size (7vw, 52-96px) is always smaller than
     section{padding-top:clamp(4rem,8vw,7rem)} (8vw, 64-112px), so they can never reach the heading below. */
  html.theme-halloween .services,
  html.theme-halloween .gallery{position:relative;}
  html.theme-halloween .services::before,
  html.theme-halloween .gallery::before{
    content:"";position:absolute;top:0;
    width:clamp(52px,7vw,96px);height:clamp(52px,7vw,96px);
    background:currentColor;
    -webkit-mask:var(--hw-web) 0 0/100% 100% no-repeat;
    mask:var(--hw-web) 0 0/100% 100% no-repeat;
    pointer-events:none;
  }
  html.theme-halloween .services::before{left:0;color:var(--navy);opacity:.16;}
  html.theme-halloween .gallery::before{right:0;color:var(--white);opacity:.16;transform:scaleX(-1);}
  /* A small pumpkin after the final CTA eyebrow (inline, part of the eyebrow's own flex row) */
  html.theme-halloween .final-cta .eyebrow::after{
    content:"";width:18px;height:18px;flex-shrink:0;
    background:url('images/seasonal/pumpkin.svg') center/contain no-repeat;
  }

  /* ---------- REFORMER NEW CUSTOMER OFFER (shared .pilates-offer, all Reformer pages) ---------- */
  /* Same copy, layout and booking button; seasonal colouring only. The price badge becomes a pumpkin, a cobweb sits
     in the top-left corner behind the content, and a warm glow and hairline add the orange accent. */
  html.theme-halloween .pilates-offer-box{
    background:
      radial-gradient(circle at 0 0,rgba(240,140,58,.2),rgba(240,140,58,0) 45%),
      linear-gradient(135deg,#3d4a38 0%,#2c3628 100%);
    box-shadow:inset 0 0 0 1px rgba(240,140,58,.3);
  }
  html.theme-halloween .pilates-offer-box::before{
    content:"";position:absolute;top:0;left:0;
    width:clamp(56px,6vw,72px);height:clamp(56px,6vw,72px);
    background:var(--white);opacity:.2;
    -webkit-mask:var(--hw-web) 0 0/100% 100% no-repeat;
    mask:var(--hw-web) 0 0/100% 100% no-repeat;
    pointer-events:none;
  }
  /* Pumpkin badge: price text stays #2c3628 (5.7:1 on the centre lobe, 4.55:1 on the side lobes) */
  html.theme-halloween .offer-badge{
    width:116px;height:112px;border-radius:0;  /* same width as the normal badge, so the text column (and its wrapping) is unchanged */
    background:url('images/seasonal/pumpkin.svg') center/contain no-repeat;
    box-shadow:none;padding-top:28px;  /* centres the text on the pumpkin body, below the stem */
  }
  html.theme-halloween .offer-badge::before{display:none;}
  html.theme-halloween .offer-badge::after{inset:28px 4px 0;background:rgba(240,140,58,.35);}  /* pulse; still off under reduced motion */
  html.theme-halloween .offer-tag{color:var(--hw-orange-light);}

  /* ---------- HERO ARTWORK (homepage .hero and Reformer .pilates-hero) ----------
     Markup: <div class="seasonal-hero-art" aria-hidden="true" hidden> inside each hero, revealed only here. Layout rules are
     scoped to .seasonal-hero (the two homepage heroes) because the Reformer book/contact/thank-you heroes share .pilates-hero.
     Illustrations are SVG files in assets/images/seasonal/, fetched only while the theme is on.
     Layout: corner cobwebs at the top; the ghost sits in the gutter beside the text column on wide screens,
     top-right on tablets (with reserved top padding) and bottom-right on phones; the pumpkin cluster sits
     on the bottom edge. Bottom offsets allow for the hero's slanted clip-path (the right edge is 8% higher).
     Every position was checked for clearance from the hero text, buttons and badges at 320-1920px widths. */
  html.theme-halloween .seasonal-hero-art{display:block;position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
  html.theme-halloween .hero.seasonal-hero > .wrap,
  html.theme-halloween .pilates-hero.seasonal-hero > .wrap{position:relative;z-index:1;}
  html.theme-halloween .seasonal-hero-art > span{position:absolute;display:block;background-repeat:no-repeat;background-position:center;background-size:contain;}
  html.theme-halloween .sh-web{top:0;width:var(--sh-web);height:var(--sh-web);background-image:url('images/seasonal/cobweb.svg');opacity:.6;}
  html.theme-halloween .sh-web-l{left:0;}
  html.theme-halloween .sh-web-r{right:0;transform:scaleX(-1);}
  html.theme-halloween .sh-pumpkins{
    background-image:url('images/seasonal/pumpkin-cluster.svg');aspect-ratio:260/152;
    filter:drop-shadow(0 4px 10px rgba(0,0,0,.3));
  }
  html.theme-halloween .sh-ghost{
    background-image:url('images/seasonal/ghost.svg');aspect-ratio:136/150;
    filter:drop-shadow(0 10px 14px rgba(0,0,0,.35));
    animation:hw-float 2.5s ease-in-out 2;  /* floats for 5s after load, then settles upright */
  }
  @keyframes hw-float{0%,100%{transform:none;}25%{transform:translateY(-10px) rotate(-3deg);}75%{transform:translateY(-5px) rotate(3deg);}}
  /* Warm glow behind the pumpkins: orange on the navy homepage, a softer amber on the sage Reformer page */
  html.theme-halloween .sh-glow{inset:0;background:radial-gradient(ellipse 50% 55% at 90% 100%,rgba(240,140,58,.34),rgba(240,140,58,0) 70%);}
  html.theme-halloween .pilates-hero.seasonal-hero .sh-glow{background:radial-gradient(ellipse 50% 55% at 90% 100%,rgba(238,164,92,.32),rgba(238,164,92,0) 70%);}

  /* Wide screens: ghost centred in the right gutter beside the text column (at most ~910px wide) */
  html.theme-halloween .seasonal-hero-art{--sh-web:clamp(120px,11vw,170px);--sh-ghost:clamp(84px,7.5vw,118px);}
  html.theme-halloween .sh-ghost{width:var(--sh-ghost);top:18%;right:max(16px,calc((100% - 910px)/4 - var(--sh-ghost)/2));}
  html.theme-halloween .sh-pumpkins{width:clamp(180px,16vw,250px);right:2.5%;bottom:calc(8% + 4px);}
  html.theme-halloween .pilates-hero.seasonal-hero .sh-pumpkins{width:clamp(170px,14vw,210px);right:1.5%;}

  /* Tablets / small laptops: the gutter is too narrow, so the ghost moves to the top-right corner. Up to 900px
     the text column spans the full width, so the hero reserves top padding for it (this only changes the layout
     when the content would otherwise reach the top); from 901px the column is narrow enough to clear it. */
  @media (min-width:641px) and (max-width:1099px){
    html.theme-halloween .seasonal-hero-art{--sh-web:110px;--sh-ghost:84px;}
    html.theme-halloween .sh-ghost{top:28px;right:3%;}
    html.theme-halloween .sh-pumpkins{width:170px;}
  }
  @media (min-width:641px) and (max-width:900px){
    html.theme-halloween .hero.seasonal-hero,
    html.theme-halloween .pilates-hero.seasonal-hero{padding-top:150px;}
    html.theme-halloween .sh-ghost{right:8%;}
  }
  /* Short landscape screens in this range: smaller webs and ghost instead of pushing the content down */
  @media (min-width:901px) and (max-width:1099px) and (max-height:700px){
    html.theme-halloween .seasonal-hero-art{--sh-web:76px;--sh-ghost:64px;}
    html.theme-halloween .sh-ghost{top:14px;right:2%;}
  }

  /* Phones: one small scene on the bottom edge (pumpkins bottom-left, the ghost floating just to their right,
     where the slanted edge is still low) inside a reserved 136px band below the badges, plus cobwebs in the top
     corners. The homepage hero's min-height is reduced by roughly the banner's height so the hero (and this
     scene) ends where it does with the theme off, keeping the artwork on the first screen of most phones. */
  @media (max-width:640px){
    html.theme-halloween .hero.seasonal-hero{min-height:calc(92vh - 64px);}
    html.theme-halloween .hero.seasonal-hero,
    html.theme-halloween .pilates-hero.seasonal-hero{padding-bottom:136px;}
    /* Reformer content is bottom-anchored, so reserve the top corners for its cobwebs too. The homepage keeps
       its tuned 56px top padding and uses smaller webs that fit inside it. */
    html.theme-halloween .pilates-hero.seasonal-hero{padding-top:66px;}
    html.theme-halloween .seasonal-hero-art{--sh-web:46px;--sh-ghost:52px;}
    html.theme-halloween .pilates-hero.seasonal-hero .seasonal-hero-art{--sh-web:56px;}
    html.theme-halloween .pilates-hero.seasonal-hero .sh-pumpkins{width:124px;}
    html.theme-halloween .sh-pumpkins{width:132px;left:8px;right:auto;bottom:3%;}
    html.theme-halloween .sh-ghost{top:auto;right:auto;left:152px;bottom:calc(5% + 6px);}
    html.theme-halloween .sh-glow{background:radial-gradient(ellipse 70% 26% at 28% 100%,rgba(240,140,58,.38),rgba(240,140,58,0) 72%);}
    html.theme-halloween .pilates-hero.seasonal-hero .sh-glow{background:radial-gradient(ellipse 70% 26% at 28% 100%,rgba(238,164,92,.36),rgba(238,164,92,0) 72%);}
  }
  /* The slanted bottom edge rises faster on narrower screens, so the pumpkins sit a little higher there */
  @media (max-width:449px){html.theme-halloween .sh-pumpkins{bottom:3.9%;}}
  /* Narrow phones wrap the Reformer copy into a much taller hero, so its %-based offsets need a deeper band */
  @media (max-width:374px){html.theme-halloween .pilates-hero.seasonal-hero{padding-bottom:156px;}}
  @media (max-width:359px){html.theme-halloween .sh-pumpkins{bottom:4.6%;width:124px;}html.theme-halloween .sh-ghost{left:140px;}}

  /* ---------- REDUCED MOTION ---------- */
  @media (prefers-reduced-motion:reduce){
    html.theme-halloween .seasonal-pumpkin,
    html.theme-halloween .sh-ghost{animation:none;}
  }