/*
  Go Tagaytay — main.css
  - Mobile-first, lean CSS
  - Breakpoints: 640px, 768px, 900px, 1200px
*/

/* -------------------- Theme tokens -------------------- */
:root{
  --bg:#0f172a;         /* slate-900 */
  --card:#111827;       /* gray-900 */
  --line:#1f2937;       /* gray-800 */
  --text:#e5e7eb;       /* gray-200 */
  --muted:#94a3b8;      /* slate-400 */
  --accent:#22c55e;     /* green-500 */
  --accent-2:#a7f3d0;   /* green-200 */

  --shadow-sm: 0 1px 4px rgba(0,0,0,.15);
  --shadow-md: 0 8px 24px rgba(0,0,0,.35);

  --header-h:56px;      /* used by mobile nav panel */
}

/* -------------------- Base & layout -------------------- */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{font-size:16px; scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:where(p,li){margin:0 0 .85rem; max-width:72ch}
h1,h2,h3{line-height:1.25;margin:0 0 .75rem}
h1{font-size:24px}
h2{font-size:20px}
h3{font-size:18px}
.muted{color: color-mix(in oklab, var(--muted) 92%, white 8%)}

.wrap{max-width:980px;margin:auto;padding:18px}
@media(min-width:900px){
  html{font-size:17px}
  .wrap{padding:24px}
}
@media(min-width:1200px){ .wrap{max-width:1120px} }

/* -------------------- Header & brand -------------------- */
header{display:flex;align-items:center;justify-content:space-between;margin:2px 0 14px}
.logo-lockup{display:flex;align-items:center;gap:.5rem;text-decoration:none}
.logo-img{
  width:28px;height:28px;border-radius:8px;object-fit:cover;object-position:center;display:block
}
@media(min-width:768px){ .logo-img{width:32px;height:32px;border-radius:10px} }
.brand::before{content:none !important}

/* -------------------- Nav (mobile panel → desktop inline) -------------------- */
.nav-toggle{background:none;border:0;color:var(--text);font-size:28px;line-height:1;padding:4px 8px;position:relative;z-index:1000}

#siteNav{
  position:fixed; top:var(--header-h); left:0; right:0;
  background:rgba(12,17,22,.98);
  padding:12px 16px 16px;
  border-top:1px solid rgba(255,255,255,.06);
  box-shadow:var(--shadow-md);
  z-index:999;
  opacity:0; transform:translateY(-8px); pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  display:block; /* allow JS toggling even though hidden by opacity/pointer-events */
}
#siteNav a{display:block;padding:12px 6px;font-weight:600;color:var(--muted)}
#siteNav.is-open, body.nav-open #siteNav{ opacity:1; transform:none; pointer-events:auto }
body.nav-open::before{
  content:''; position:fixed; inset:0; background:rgba(0,0,0,.45); backdrop-filter:blur(2px); z-index:998;
}

@media(min-width:768px){
  #siteNav{
    position:static; opacity:1; transform:none; pointer-events:auto;
    background:transparent; box-shadow:none; border:0; padding:0;
    display:flex; gap:12px;
  }
  body.nav-open::before{display:none}
  .nav-toggle{display:none}
}

/* -------------------- Cards, hero, grid -------------------- */
.hero,.card{background:var(--card);border:1px solid var(--line);border-radius:16px}
.hero{padding:20px}
.card{padding:16px}
.grid{display:grid;gap:12px;margin-top:14px}
.grid.cols-2{grid-template-columns:1fr}
.grid.cols-3{grid-template-columns:1fr}
@media(min-width:640px){
  .grid.cols-2{grid-template-columns:1fr 1fr}
  .grid.cols-3{grid-template-columns:1fr 1fr 1fr}
}
@media(min-width:900px){
  .card,.hero{padding:20px}
  .grid{gap:14px}
}

/* -------------------- Buttons -------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent); color:#0b111b;
  font-weight:800; padding:12px 16px; border-radius:12px; min-height:44px;
  box-shadow:0 1px 0 rgba(0,0,0,.22) inset, var(--shadow-sm);
  border:0; line-height:1; cursor:pointer; -webkit-appearance:none
}
.btn.secondary{background:#e5e7eb;color:#0b111b}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid #10b981; outline-offset:2px}

/* Newsletter trigger (desktop gets button look) */
@media(min-width:641px){
  #openNewsletter, a#openNewsletter{
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--accent);color:#0b111b;
    padding:.6rem 1rem;border-radius:12px;text-decoration:none;border:0;
    box-shadow:0 1px 0 rgba(0,0,0,.22) inset, var(--shadow-sm);font-weight:700;line-height:1
  }
  #openNewsletter:hover{filter:brightness(1.05)}
  #openNewsletter:focus-visible{outline:2px solid #fff; outline-offset:2px}
}

/* Small helper for stacked CTAs on narrow screens */
@media(max-width:520px){
  .hero .btn + .btn{ margin-top:12px }
}

/* -------------------- Lists & badges -------------------- */
ul.clean{list-style:none;margin:0;padding:0}
.list-item{display:flex;gap:12px;padding:10px;border-top:1px solid var(--line)}
.list-item:first-child{border-top:0}
.badge{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; color:#0b111b; background:#fef08a;
  border-radius:999px; padding:2px 8px; line-height:1; white-space:nowrap
}

/* -------- Featured badge: GOLD SHIMMER (Option B) -------- */
/* Reset any older effects so shimmer can own it */
.badge--featured{
  position:relative;
  font-weight:800;
  border-radius:999px;
  padding:.28rem .55rem;
  color:#0b111b;
  border:1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,.12)) padding-box,
    linear-gradient(100deg,#8d6b27 0%, #f3d37a 25%, #c59a3a 45%, #f3d37a 65%, #6e5420 100%) border-box;
  background-size:220% 100%;
  box-shadow:0 1px 0 rgba(0,0,0,.35) inset, 0 6px 14px rgba(0,0,0,.25);
}
.badge--featured::before,
.badge--featured::after{ content:none !important; } /* kill any prior pseudo-elements */

@keyframes goldShimmer{
  0%   { background-position: 0% 50%; }
  100% { background-position: 150% 50%; }
}
.badge--featured.shimmer{
  animation: goldShimmer 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .badge--featured.shimmer{ animation:none }
}

/* -------------------- Areas (cards + “More in this area”) -------------------- */

.area-card{padding:16px}
.area-card h3{margin:0 0 6px}
.area-card p{margin:0 0 10px}

/* Native <details> styling */
details.more{margin-top:.5rem}
details.more summary{
  cursor:pointer; list-style:none;
  display:inline-flex; align-items:center; gap:.35rem;
}
details.more summary::-webkit-details-marker{display:none}
details.more summary::marker{content:""; display:none}
details.more summary::after{
  content:"▸"; font-size:.9em; line-height:1; opacity:.85; transition:transform .18s ease
}
details.more[open] summary::after{ transform:rotate(90deg) }

/* Show only first 2 items by default (ALL screen sizes) */
#areas .area-card > ul.clean:not(.extra) > li:nth-child(n+3){ display:none; }

/* When the card's <details> is open, reveal all list items */
#areas .area-card:has(details.more[open]) ul.clean > li{ display:flex; }
/* If you have plain <li> (not .list-item), keep them list-style */
#areas .area-card:has(details.more[open]) ul.clean > li:not(.list-item){ display:list-item; }

/* Areas heading should span the full grid row */
#areas > h2{ grid-column:1 / -1; margin:0 0 .5rem }

/* -------------------- Partners grid helper (no empty gaps) -------------------- */
@media(min-width:900px){
  #options.grid{ grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); align-items:stretch }
}
#options .card{ display:flex; flex-direction:column }
#options .card ul.clean{ margin-bottom:auto }
#options .card p:last-of-type{ margin-top:.5rem }

/* Partner tag pill sizing (avoid full-width stretch) */
.tag{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.25rem .6rem; border-radius:999px;
  background:var(--accent-2); color:#0b111b; font-weight:700; font-size:.75rem; line-height:1; white-space:nowrap;
}
.area-card .tag{ align-self:flex-start }
#options .card > .tag{ margin-bottom:.5rem }

/* -------------------- Weather pill -------------------- */
.wx-pill{display:inline-flex;align-items:center;gap:.35rem;font-size:.92rem;color:#9fb3c8;white-space:nowrap}
@media(max-width:420px){ .wx-pill{font-size:.85rem;opacity:.9} }

/* -------------------- Modals -------------------- */
dialog{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  color:var(--text); padding:18px; max-width:720px
}
dialog::backdrop{background:rgba(0,0,0,.6)}
.modal-close{float:right;background:none;border:1px solid var(--line);color:var(--text);border-radius:8px;padding:6px 10px}

/* -------------------- Forms: MailerLite look -------------------- */
.ml-form-embedContainer .ml-form-embedSubmit button{
  background:var(--accent) !important; color:#041016 !important; border:none !important;
  border-radius:12px !important; padding:.7rem 1.1rem !important; font-weight:700 !important;
}
.ml-form-embedContainer input[type="email"]{
  background:#0b1222 !important; color:var(--text) !important; border:1px solid var(--line) !important; border-radius:10px !important;
}

/* -------------------- Focus states -------------------- */
:where(a,button,.card):focus-visible{
  outline:2px solid color-mix(in oklab, var(--accent) 75%, white 25%);
  outline-offset:2px;
}

/* -------------------- Mobile polish: perfectly center pills & buttons -------------------- */
@media (max-width: 640px){
  .tag, .badge{
    display:inline-flex;align-items:center;justify-content:center;
    line-height:1; padding:.30rem .60rem; border-radius:999px; font-weight:700; white-space:nowrap; vertical-align:middle;
  }
  .btn, a.btn, button.btn{
    display:inline-flex !important; align-items:center; justify-content:center;
    line-height:1; min-height:44px; padding:.70rem 1rem; border-radius:12px; -webkit-appearance:none;
  }
  #openNewsletter,
  .ml-onclick-form#openNewsletter{
    display:inline-flex !important; align-items:center; justify-content:center;
    line-height:1; min-height:44px; padding:.70rem 1rem; border-radius:12px; font-weight:800;
    background:var(--accent); color:#0b111b; border:1px solid transparent;
    box-shadow:0 1px 0 rgba(0,0,0,.22) inset, 0 1px 4px rgba(0,0,0,.15);
    -webkit-appearance:none;
  }
  .btn.secondary{ background:#e5e7eb; color:#0b111b; }
}

/* === Partners layout fix (desktop) === */
#options {
  display: grid;
  /* let the cards auto-pack without leaving holes */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  grid-auto-flow: dense;          /* back-fills gaps */
  align-items: stretch;           /* equal heights */
}

/* make each option card stretch to same height */
#options .card {
  display: flex;
  flex-direction: column;
}
#options .card ul.clean { margin-bottom: auto; }  /* pushes CTAs down */

/* Ensure the "Partner options" heading spans the grid */
#options-title { grid-column: 1 / -1; }

/* === Tag pill sizing (no stretch) === */
#options .card > .tag {
  /* prevent flex stretch across the card */
  align-self: flex-start;
  display: inline-flex;
  place-items: center;
  padding: .25rem .6rem;
  border-radius: 999px;
  background: var(--accent-2);
  color: #0b111b;
  font-weight: 700;
  font-size: .75rem;
  line-height: 1;
  white-space: nowrap;
  width: max-content;             /* never expand to full width */
}

/* If any global rule makes .tag block-level, override it here */
#options .card > .tag { display: inline-flex !important; }


/* Weekender — add-on eats */
.weekender-addons { margin-top: 10px; }
.weekender-addons__title {
  margin: 6px 0 4px;
  font-size: .95rem;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .2px;
}
.weekender-addons ul.clean { margin: 0; padding: 0; }
.weekender-addons .list-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.weekender-addons .list-item:first-child { border-top: 0; }
.weekender-addons .list-item > div:first-child { min-width: 0; } /* allow text wrap */
.weekender-addons .list-item strong { display: block; }
.weekender-addons .links { white-space: nowrap; }
.weekender-addons .links a { color: var(--muted); text-decoration: none; }
.weekender-addons .links a:hover { text-decoration: underline; }

/* Weekender — CTA row */
.weekender-cta {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}
.weekender-cta a { text-decoration: none; }
.weekender-cta a:first-child { font-weight: 600; }
.weekender-cta a + a::before { content: " • "; margin: 0 6px; color: var(--muted); }

/* Weekender image card sugar */
.wkndr-fig { margin: 0 0 .5rem 0; }
.wkndr-fig img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}
.wkndr-cap { margin-top: .25rem; }
.wkndr-actions { margin-top: .35rem; }
.wkndr-actions a { text-decoration: underline; }

.wkndr-fig { margin: .5rem 0 0 0; }
.wkndr-fig img { width: 100%; height: auto; border-radius: 12px; display: block; object-fit: cover; }
.wkndr-cap { margin-top: .25rem; }

@media (max-width: 640px) {
  #weekend .list-item { padding: 10px 0; }
  #weekend .list-item strong { display:block; font-size:1rem; line-height:1.25; word-break:break-word; }
  #weekend .list-item .muted {
    margin-top: 2px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;   /* clamp description to 2 lines */
    overflow: hidden;
  }
  .wkndr-fig img { aspect-ratio: 4 / 3; }  /* stable image height */
  .wkndr-cap { display: none; }            /* hide credit on phones; shows on desktop */
  .wkndr-actions { margin-top: 4px; }
}

/* Photo credit: smaller + softer */
.wkndr-cap {
  font-size: 0.75rem;   /* ~12px */
  line-height: 1.1;
  opacity: .7;
}

/* keep it readable on desktop, extra small on phones */
@media (max-width: 640px) {
  .wkndr-cap { font-size: 0.7rem; opacity: .65; }
}

/* indicate images are clickable */
.wkndr-fig img { cursor: zoom-in; }

/* ---- Lightbox base ---- */
#wkndrLightbox {
  position: fixed; inset: 0;
  display: none;
  z-index: 9999;
}
#wkndrLightbox.is-open { display: block; }

.wkndr-lb__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.8);
}

.wkndr-lb__figure {
  position: absolute; inset: 0;
  margin: 0; display: grid; place-items: center;
  padding: 24px;
}

.wkndr-lb__img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  cursor: zoom-out;
}

.wkndr-lb__cap {
  margin-top: 8px;
  color: #cbd5e1; /* muted */
  font-size: .8rem;
  text-align: center;
}

.wkndr-lb__close {
  position: absolute; top: 10px; right: 10px;
  background: rgba(0,0,0,.55); color: #fff;
  border: 0; border-radius: 10px;
  font-size: 22px; width: 36px; height: 36px;
  line-height: 36px; cursor: pointer;
}

.no-scroll { overflow: hidden; }

/* Mobile comfort */
@media (max-width: 640px) {
  .wkndr-lb__img { max-height: 70vh; }
  .wkndr-lb__cap { font-size: .75rem; }
}