/* Chesapeake Beach Water Park — shared styles for the interior guest pages
   Matches Concept 1 "Cannonball" (Lilita One + Nunito). */
:root{
  --indigo:#2c2785;
  --indigo-deep:#201c66;
  --coral:#f55530;
  --coral-dark:#d94120;
  --green:#7ac142;
  --green-deep:#4e8a1f;
  --sun:#ffec2e;
  --paper:#fffdf6;
  --ink:#33306e;
  --ink-soft:#63609b;
  --line:#e8e5f2;
  --display:"Lilita One",sans-serif;
  --body:"Nunito",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.06;letter-spacing:.01em}
button{font-family:inherit;cursor:pointer;border:none}
.wrap{max-width:1180px;margin:0 auto;padding-left:24px;padding-right:24px}

/* ---------- Nav ---------- */
.nav{background:var(--indigo-deep);position:sticky;top:0;z-index:60}
.nav-inner{max-width:1220px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:30px}
.nav-logo img{height:52px;width:auto}
.nav-links{display:flex;gap:26px;align-items:center;margin-left:auto;list-style:none}
.nav-links a{color:#fff;text-decoration:none;font-weight:800;font-size:1rem;padding:4px 0;border-bottom:3px solid transparent;transition:border-color .2s}
.nav-links a:hover,.nav-links a[aria-current]{border-color:var(--sun)}
.nav-links a.nav-cta{background:var(--coral);padding:12px 24px;border-radius:14px;border:none;box-shadow:0 5px 0 var(--coral-dark);transition:transform .15s ease,box-shadow .15s ease}
.nav-links a.nav-cta:hover{transform:translateY(2px);box-shadow:0 3px 0 var(--coral-dark);border-color:transparent}
.menu-btn{display:none;background:none;padding:8px;margin-left:auto}
.menu-btn span{display:block;width:26px;height:3px;background:#fff;border-radius:3px;margin:5px 0;transition:transform .3s ease,opacity .2s ease}
.nav-open .menu-btn span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-open .menu-btn span:nth-child(2){opacity:0}
.nav-open .menu-btn span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------- Page head ---------- */
.phead{background:var(--indigo);color:#fff;padding:54px 0 58px}
.phead h1{font-size:clamp(2.3rem,5.4vw,3.5rem);color:#fff}
.phead p{color:#c9caf0;font-weight:600;font-size:1.08rem;max-width:60ch;margin-top:12px}
.phead .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.phead .split img{border-radius:20px;box-shadow:0 18px 44px rgba(15,12,60,.4)}
@media (max-width:860px){ .phead .split{grid-template-columns:minmax(0,1fr);gap:26px} }

/* ---------- Sections ---------- */
.sec{padding-top:66px;padding-bottom:66px}
.sec.tint{background:#f4f2fb}
.sec h2{font-size:clamp(1.8rem,3.6vw,2.5rem);color:var(--indigo)}
.sec .lede{color:var(--ink-soft);font-weight:600;font-size:1.04rem;max-width:64ch;margin-top:10px}
.sec-head{margin-bottom:34px}

/* ---------- Buttons ---------- */
.btn{display:inline-block;text-decoration:none;text-align:center;font-weight:800;font-size:1rem;border-radius:14px;padding:14px 28px;transition:transform .15s ease,box-shadow .15s ease,background .2s ease}
.btn-coral{background:var(--coral);color:#fff;box-shadow:0 5px 0 var(--coral-dark)}
.btn-coral:hover{transform:translateY(2px);box-shadow:0 3px 0 var(--coral-dark)}
.btn-indigo{background:var(--indigo);color:#fff;box-shadow:0 5px 0 var(--indigo-deep)}
.btn-indigo:hover{transform:translateY(2px);box-shadow:0 3px 0 var(--indigo-deep)}
.btn-ghost{background:transparent;color:var(--indigo);box-shadow:inset 0 0 0 2.5px var(--indigo)}
.btn-ghost:hover{background:var(--indigo);color:#fff}
.btn-sm{padding:10px 18px;font-size:.9rem;border-radius:11px}
.btn-block{display:block;width:100%}

/* ---------- Cards ---------- */
.cards{display:grid;gap:22px}
.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px;min-width:0}
.card h3{font-size:1.35rem;color:var(--indigo);margin-bottom:8px}
.card p{color:var(--ink-soft);font-weight:600;font-size:.96rem}
.card.photo{padding:0;overflow:hidden}
.card.photo img{aspect-ratio:16/10;object-fit:cover;width:100%}
.card.photo .inner{padding:22px 24px 26px}

/* ---------- Rate table ---------- */
.rates{width:100%;border-collapse:collapse;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 2px 0 var(--line)}
.rates th,.rates td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--line)}
.rates thead th{background:var(--indigo);color:#fff;font-family:var(--display);font-weight:400;font-size:1.05rem;letter-spacing:.02em}
.rates tbody tr:last-child td{border-bottom:none}
.rates .who{font-weight:800;font-size:1.02rem}
.rates .who small{display:block;color:var(--ink-soft);font-weight:700;font-size:.84rem}
.rates .amt{font-family:var(--display);font-weight:400;font-size:1.5rem;color:var(--indigo);white-space:nowrap}
.rates .amt.best{color:var(--green-deep)}
.rates tbody tr:hover{background:#faf9ff}
.rate-scroll{overflow-x:auto}

/* residency explainer */
.tier{display:grid;grid-template-columns:52px minmax(0,1fr);gap:16px;align-items:start;margin-bottom:22px}
.tier .mark{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;color:#fff;font-family:var(--display);font-size:1.3rem}
.tier .mark.town{background:var(--green-deep)}
.tier .mark.county{background:var(--indigo)}
.tier .mark.general{background:var(--coral)}
.tier h3{font-size:1.2rem;color:var(--indigo);margin-bottom:3px}
.tier p{color:var(--ink-soft);font-weight:600;font-size:.95rem}

/* ---------- Weather banner ---------- */
.weather{background:#fff6d9;border:2px solid #f2dd8c;border-radius:20px;padding:26px 28px;display:grid;grid-template-columns:64px minmax(0,1fr);gap:20px;align-items:center}
.weather .ic{width:64px;height:64px;border-radius:18px;background:var(--sun);display:grid;place-items:center;color:var(--indigo)}
.weather h3{font-size:1.35rem;color:var(--indigo);margin-bottom:5px}
.weather p{color:#7a6410;font-weight:700;font-size:.96rem}
@media (max-width:560px){ .weather{grid-template-columns:minmax(0,1fr)} }

/* ---------- Food ordering ---------- */
.order-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:26px;align-items:start}
@media (max-width:960px){ .order-grid{grid-template-columns:minmax(0,1fr)} }
.fcat{margin-bottom:34px}
.fcat h3{font-size:1.5rem;color:var(--indigo);margin-bottom:16px}
.fitems{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));gap:14px}
.fitem{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;display:flex;flex-direction:column;gap:6px;text-align:left;min-width:0;transition:transform .14s ease,box-shadow .14s ease}
.fitem:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(44,39,133,.1)}
.fitem .n{font-weight:800;font-size:1.02rem}
.fitem .d{color:var(--ink-soft);font-weight:600;font-size:.86rem}
.fitem .p{font-family:var(--display);font-weight:400;font-size:1.25rem;color:var(--indigo);margin-top:auto;padding-top:8px}
.fitem.out{opacity:.5;cursor:not-allowed}
.fitem.out .p{color:var(--ink-soft)}
.basket{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;position:sticky;top:96px}
.basket h3{font-size:1.35rem;color:var(--indigo);margin-bottom:4px}
.basket .sub{color:var(--ink-soft);font-weight:700;font-size:.88rem;margin-bottom:16px}
.bline{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}
.bline .n{flex:1;min-width:0;font-weight:700;font-size:.94rem}
.bline .q{display:flex;align-items:center;gap:7px}
.bline .q button{width:26px;height:26px;border-radius:8px;background:#f0eefb;color:var(--indigo);font-weight:800}
.bline .q span{font-weight:800;min-width:14px;text-align:center}
.bline .amt{font-weight:800;min-width:56px;text-align:right;font-variant-numeric:tabular-nums}
.basket .tot{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0 18px;font-family:var(--display);font-weight:400;font-size:1.6rem;color:var(--indigo)}
.basket .empty{color:var(--ink-soft);font-weight:700;font-size:.94rem;text-align:center;padding:30px 6px}

/* ---------- Portal ---------- */
.ptabs{display:flex;gap:6px;border-bottom:2px solid var(--line);margin-bottom:30px;overflow-x:auto}
.ptabs button{background:none;font-weight:800;font-size:1rem;color:var(--ink-soft);padding:12px 18px;border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap;transition:color .18s ease,border-color .18s ease}
.ptabs button:hover{color:var(--indigo)}
.ptabs button.on{color:var(--indigo);border-color:var(--coral)}
.ppane{display:none}
.ppane.on{display:block;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.passcard{background:linear-gradient(135deg,var(--indigo) 0%,var(--indigo-deep) 100%);color:#fff;border-radius:22px;padding:26px 28px;position:relative;overflow:hidden}
.passcard::after{content:"";position:absolute;right:-40px;top:-40px;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.07)}
.passcard h3{color:#fff;font-size:1.6rem}
.passcard .nm{font-weight:800;font-size:1.1rem;margin-top:2px}
.passcard .meta{color:#c9caf0;font-weight:700;font-size:.9rem;margin-top:10px}
.passcard .code{background:#fff;border-radius:14px;padding:12px;width:112px;margin-top:18px;display:grid;place-items:center}
.balance{background:var(--green);color:#173b06;border-radius:20px;padding:24px 26px}
.balance .n{font-family:var(--display);font-weight:400;font-size:2.6rem;line-height:1}
.balance p{font-weight:800;font-size:.94rem;margin-top:4px}
.tlist{width:100%;border-collapse:collapse}
.tlist th{text-align:left;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);font-weight:800;padding:9px 12px;border-bottom:1px solid var(--line)}
.tlist td{padding:14px 12px;border-bottom:1px solid var(--line);font-weight:600}
.tlist tr:last-child td{border-bottom:none}
.tlist .num{text-align:right;font-variant-numeric:tabular-nums;font-weight:800}
.tlist .strong{font-weight:800}
.tlist .sub{display:block;color:var(--ink-soft);font-size:.84rem;font-weight:700}

/* status dot + text (never pills) */
.dot{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:.9rem}
.dot::before{content:"";width:9px;height:9px;border-radius:50%;flex:none}
.dot.good{color:var(--green-deep)} .dot.good::before{background:var(--green)}
.dot.warn{color:#a8791b}          .dot.warn::before{background:#e8b931}
.dot.bad{color:var(--coral-dark)} .dot.bad::before{background:var(--coral)}
.dot.mute{color:var(--ink-soft)}  .dot.mute::before{background:#c5c2da}

/* ---------- Forms ---------- */
.form{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px}
.fld{display:block;margin-bottom:18px}
.fld > span{display:block;font-weight:800;font-size:.88rem;margin-bottom:6px}
.fld input,.fld select,.fld textarea{width:100%;font-family:var(--body);font-size:1rem;font-weight:600;color:var(--ink);border:2px solid var(--line);border-radius:12px;padding:12px 14px;background:#fff;outline:none;transition:border-color .18s ease}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--indigo)}
.fld textarea{resize:vertical;min-height:110px}
.f2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 18px}
@media (max-width:620px){ .f2{grid-template-columns:minmax(0,1fr)} }
.help{color:var(--ink-soft);font-weight:700;font-size:.86rem;margin-top:-8px;margin-bottom:18px}

/* ---------- Footer ---------- */
.foot{background:var(--indigo-deep);color:#c9caf0;padding-top:52px;padding-bottom:40px;margin-top:10px}
.foot h4{font-family:var(--display);font-weight:400;color:#fff;font-size:1.15rem;margin-bottom:12px}
.foot a{color:#c9caf0;text-decoration:none;font-weight:700}
.foot a:hover{color:var(--sun)}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.foot-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.foot .fine{border-top:1px solid rgba(255,255,255,.14);margin-top:36px;padding-top:22px;font-size:.86rem;font-weight:700;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media (max-width:820px){ .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .foot-grid{grid-template-columns:minmax(0,1fr)} }

/* mock ribbon */
.mockbar{background:#fff6d9;border-bottom:1px solid #f2dd8c;color:#7a6410;font-weight:800;font-size:.86rem;text-align:center;padding:9px 16px}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- Responsive: off-canvas menu ---------- */
@media (max-width:900px){
  .c3,.c2{grid-template-columns:minmax(0,1fr)}
  .menu-btn{display:block}
  .nav-links{
    position:fixed;inset:0 0 0 auto;width:min(88vw,340px);background:var(--indigo-deep);
    flex-direction:column;align-items:flex-start;justify-content:flex-start;
    gap:4px;margin:0;padding:96px 30px 40px;
    transform:translateX(100%);transition:transform .34s cubic-bezier(.3,.9,.3,1);
    box-shadow:-14px 0 40px rgba(10,8,44,.4);overflow-y:auto;
  }
  .nav-open .nav-links{transform:translateX(0)}
  .nav-links li{width:100%;opacity:0;transform:translateX(22px);transition:opacity .3s ease,transform .3s ease}
  .nav-open .nav-links li{opacity:1;transform:none}
  .nav-open .nav-links li:nth-child(1){transition-delay:.06s}
  .nav-open .nav-links li:nth-child(2){transition-delay:.11s}
  .nav-open .nav-links li:nth-child(3){transition-delay:.16s}
  .nav-open .nav-links li:nth-child(4){transition-delay:.21s}
  .nav-open .nav-links li:nth-child(5){transition-delay:.26s}
  .nav-open .nav-links li:nth-child(6){transition-delay:.31s}
  .nav-links a{display:block;font-size:1.5rem;font-family:var(--display);font-weight:400;padding:12px 0;border-bottom:none}
  .nav-links a.nav-cta{font-size:1.1rem;font-family:var(--body);font-weight:800;margin-top:14px;text-align:center}
  .nav-scrim{position:fixed;inset:0;background:rgba(16,13,58,.5);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:55}
  .nav-open .nav-scrim{opacity:1;pointer-events:auto}
  .basket{position:static}
}
@media (max-width:560px){
  .wrap{padding-left:16px;padding-right:16px}
  .sec{padding-top:46px;padding-bottom:46px}
  .phead{padding-top:38px;padding-bottom:42px}
  .card{padding:20px}
  .form{padding:20px}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .reveal{opacity:1;transform:none}
}

/* ---------- Guest date picker ---------- */
.rate-pick{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.rate-pick button{
  background:#fff;border:2px solid var(--line);border-radius:13px;padding:11px 20px;
  font-weight:800;font-size:.95rem;color:var(--ink-soft);
  transition:border-color .18s ease,color .18s ease,background .18s ease;
}
.rate-pick button:hover{border-color:var(--indigo);color:var(--indigo)}
.rate-pick button.on{background:var(--indigo);border-color:var(--indigo);color:#fff}
.gcal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.gcal .dow{font-size:.72rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);text-align:center;padding-bottom:4px}
.gday{
  background:#fff;border:2px solid var(--line);border-radius:14px;padding:10px 8px 11px;
  min-height:82px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  cursor:pointer;min-width:0;transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease;
}
.gday:hover{transform:translateY(-3px);border-color:var(--indigo);box-shadow:0 10px 24px rgba(44,39,133,.12)}
.gday .n{font-weight:800;font-size:.9rem;color:var(--ink-soft)}
.gday .p{font-family:var(--display);font-weight:400;font-size:1.15rem;color:var(--indigo);line-height:1}
.gday .t{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);text-align:center;line-height:1.2}
.gday.blank{border:none;background:transparent;cursor:default;min-height:0}
.gday.blank:hover{transform:none;box-shadow:none}
.gday.peak{border-color:#f9c3b3}      .gday.peak .p{color:var(--coral-dark)}   .gday.peak .t{color:var(--coral-dark)}
.gday.cloudy{border-color:#f0dc9a;background:#fffbea} .gday.cloudy .p{color:#a8791b} .gday.cloudy .t{color:#a8791b}
.gday.camp .p{color:var(--green-deep)}
.gday.sel{border-color:var(--indigo);background:#f3f2fd;box-shadow:0 0 0 3px rgba(44,39,133,.12)}
.gcal-note{
  background:#fff;border:2px solid var(--line);border-radius:16px;padding:20px 22px;margin-top:22px;
  display:flex;gap:18px;align-items:center;flex-wrap:wrap;
}
.gcal-note .big{font-family:var(--display);font-weight:400;font-size:2rem;color:var(--indigo);line-height:1}
.gcal-note .who{font-weight:800;font-size:.95rem}
.gcal-note .sub{color:var(--ink-soft);font-weight:700;font-size:.88rem}
.gcal-note .push{margin-left:auto}
@media (max-width:760px){
  .gcal{gap:5px}
  .gday{min-height:66px;padding:7px 4px 8px;border-radius:11px;border-width:1.5px}
  .gday .p{font-size:.88rem}
  .gday .t{display:none}
  .gcal-note .push{margin-left:0;width:100%}
}
@media (max-width:420px){
  .gday{min-height:56px}
  .gday .n{font-size:.76rem}
  .gday .p{font-size:.74rem}
}