/* Thanksgiving preview — homepage banner only */

.tg-banner{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  color:#fff;
  text-align:center;
  padding:40px 20px 42px;
  border-top:3px solid #c9a227;
  border-bottom:3px solid #c9a227;
  background-color:#081220;
  background-image:
    linear-gradient(180deg, rgba(6,16,38,.22), rgba(6,16,38,.38)),
    url("assets/thanksgiving/harvest.jpg");
  background-image:
    linear-gradient(180deg, rgba(6,16,38,.22), rgba(6,16,38,.38)),
    image-set(
      url("assets/thanksgiving/harvest.webp") type("image/webp"),
      url("assets/thanksgiving/harvest.jpg") type("image/jpeg")
    );
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center 68%;
}
.tg-inner{
  position:relative;
  z-index:2;
  max-width:1040px;
  margin:0 auto;
  border:2px solid rgba(232,192,74,.88);
  padding:30px 56px 32px;
  background:rgba(6,14,28,.28);
  box-shadow:0 12px 36px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,236,180,.12);
}
.tg-break{display:none}
.tg-title{
  margin:4px 0 12px;
  line-height:1.12;
  text-align:center;
}
.tg-title span{
  font-family:"Great Vibes",Georgia,cursive;
  font-weight:400;
  font-size:clamp(50px, 7.4vw, 88px);
  letter-spacing:.01em;
  background:linear-gradient(180deg,#fff8d4 0%,#f6e7a3 16%,#e8c04a 42%,#c9a227 60%,#f0d78c 80%,#a67c22 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:#e8c04a;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.75)) drop-shadow(0 0 18px rgba(232,192,74,.55));
}
.tg-sub{
  margin:0 0 12px;
  color:#fff;
  font-family:Inter,system-ui,sans-serif;
  font-weight:500;
  font-size:clamp(15px, 2.1vw, 22px);
  letter-spacing:.06em;
  line-height:1.45;
  text-shadow:0 2px 10px rgba(0,0,0,.75);
}
.tg-rule{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin:0 auto;
  max-width:460px;
}
.tg-rule span{
  flex:1;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(232,192,74,.15), rgba(232,192,74,.95), rgba(232,192,74,.15), transparent);
}
.tg-rule-star{
  flex:0 0 auto;
  width:10px;
  height:10px;
  background:linear-gradient(180deg,#fff4c2,#e8c04a 45%,#a67c22);
  transform:rotate(45deg);
  box-shadow:0 0 8px rgba(232,192,74,.55);
}

/* Tighten the hero the same way the Veterans banner does */
.tg-banner + .hero{
  min-height:auto !important;
  padding:44px 0 64px !important;
}

/* Falling leaves — inside the banner, over the photo, under the type */
.tg-fall{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}
.tg-fl{
  position:absolute;
  top:-56px;
  width:40px;
  height:auto;
  opacity:0;
  will-change:transform,opacity;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));
  animation:tg-drift 11s linear infinite;
}
.tg-fl-1{left:5%;color:#ff3b1f;animation-duration:12s;animation-delay:0s;width:48px}
.tg-fl-2{left:14%;color:#ffbf1f;animation-duration:10s;animation-delay:2.2s;width:36px}
.tg-fl-3{left:80%;color:#e01818;animation-duration:13s;animation-delay:1s;width:44px}
.tg-fl-4{left:90%;color:#ff8a00;animation-duration:9.5s;animation-delay:4s;width:34px}
.tg-fl-5{left:9%;color:#f0c43a;animation-duration:14s;animation-delay:6.5s;width:40px}
.tg-fl-6{left:86%;color:#ff3b1f;animation-duration:11.5s;animation-delay:8s;width:38px}

@keyframes tg-drift{
  0%{transform:translate3d(0,-20px,0) rotate(-20deg);opacity:0}
  8%{opacity:.88}
  30%{transform:translate3d(22px,30%,0) rotate(28deg)}
  60%{transform:translate3d(-18px,65%,0) rotate(-16deg);opacity:.8}
  100%{transform:translate3d(12px,115%,0) rotate(30deg);opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .tg-fall{display:none}
  .tg-fl{animation:none}
}

@media (max-width:960px){
  .tg-banner{padding:36px 16px 40px;background-position:center 72%}
  .tg-inner{padding:22px 22px 24px}
  .tg-title span{font-size:clamp(42px, 11vw, 64px)}
  .tg-fl{width:26px}
  .tg-fl-5,.tg-fl-6{display:none}
  .hero-shell #primary-nav{
    background:#0A2A5E !important;
    box-shadow:0 18px 32px rgba(0,0,0,.4);
  }
}

@media (max-width:600px){
  .tg-banner{padding:30px 12px 34px;background-position:center bottom}
  .tg-inner{padding:18px 16px 22px}
  .tg-title{margin:2px 0 10px}
  .tg-title span{font-size:clamp(44px, 13vw, 56px)}
  .tg-break{display:block}
  .tg-sub{font-size:15px;letter-spacing:.03em;margin:0 0 14px;padding:0 6px}
  .tg-rule{max-width:220px;gap:10px}
  .tg-fl-3,.tg-fl-4{display:none}
}

/* Keep decorations below the header so dropdowns and the mobile nav stay on top */
.hero-shell .site-header{z-index:50}

/* --- falling leaves + logo pumpkins --- */
.tg-leaves{position:fixed;inset:0;pointer-events:none;z-index:60}
.site-header .logo.tg-logo{position:relative;display:inline-flex;align-items:flex-end;gap:2px}
.tg-pumpkin{width:34px;height:32px;flex:0 0 auto;filter:drop-shadow(0 3px 3px rgba(0,0,0,.45));align-self:flex-end;margin-bottom:2px}
.tg-pumpkin.small{width:24px;height:23px;margin-left:-10px;margin-right:-10px;z-index:1}
.tg-pumpkin.flip{transform:scaleX(-1)}
@media (max-width:600px){.tg-pumpkin{width:24px;height:23px}.tg-pumpkin.small{width:17px;height:16px;margin-left:-7px;margin-right:-7px}}

/* --- leaf piles on boxes --- */
.leafpile-layer{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;z-index:40}
.leafpile{position:absolute;pointer-events:none;opacity:0;transform:translateY(-6px);animation:leafpile-in 1.8s ease-out forwards}
.leafpile svg{display:block;filter:drop-shadow(0 2px 2px rgba(0,0,0,.45))}
@keyframes leafpile-in{to{opacity:1;transform:none}}
.leafpile-layer.settled .leafpile{animation:none;opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.leafpile{animation:none;opacity:1;transform:none}}

/* --- Frozen Thanksgiving hero: picture lives only below the banner, zoomed out, taller --- */
.hero.tg-photo{position:relative;isolation:isolate}
.hero.tg-photo > .hero-slides{position:absolute;inset:0;z-index:-1}
.hero.tg-photo .hslide{transform:none!important;animation:none!important;background-position:center 70%!important;background-size:cover}
.tg-banner + .hero.tg-photo{min-height:clamp(560px,calc(100vh - 120px),860px)!important;padding:56px 0 72px!important}
@media (max-width:700px){.tg-banner + .hero.tg-photo{min-height:640px!important;padding:40px 0 260px!important}.hero.tg-photo .hslide{background-position:66% 100%!important}}