@font-face {
  font-family: "Perfectly Nineties";
  src: url("../fonts/PerfectlyNineties.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Camp Detour Brand CSS (fonts + variables) */

@font-face {
  font-family: "Chalets";
  src: url("../fonts/Chalets.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* TODO: Place your 'Perfectly Nineties' font file in /assets/fonts/ (e.g., PerfectlyNineties.woff2) */
:root {
  --cd-pine: #00463c;
  --cd-sunset: #d16330;
  --cd-gold: #f0a31f;
  --cd-cream: #f9f6ed;
  --cd-blush: #f2b6b6;
  --cd-brown: #443022;
  --cd-radius: 16px;
}

html, body { scroll-behavior: smooth; }
body {
  background: #fff;
  color: #0f172a;
  font-family: Helvetica, Arial, sans-serif; /* Body in Helvetica */
}
/* Headings in Perfectly Nineties (fallback to Chalets, then Helvetica) */
h1, h2, h3, h4, h5, h6, .font-display { font-family: "Perfectly Nineties", "Chalets", Helvetica, Arial, sans-serif; font-weight: 700; letter-spacing: 0.005em; }
/* Wordmark utility */
.font-chalets {font-family:'Chalets',Helvetica,Arial,sans-serif; font-weight:400; font-synthesis:none; letter-spacing:0.01em;}

.badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .25rem .5rem; border-radius: 9999px; font-size: .75rem;
  background: #fff; color: #334155; border: 1px solid #e2e8f0;
}
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1rem; border-radius: 9999px; font-weight: 600; text-decoration: none; border: 1px solid transparent; }
.btn-primary { background: var(--cd-pine); color: #fff; }
.btn-primary:hover { background: #003a32; }
.btn-outline { background: #fff; color: #0f172a; border-color: #e2e8f0; }
.btn-outline:hover { background: #f8fafc; }

.card { background: #fff; border: 1px solid #e2e8f0; border-radius: var(--cd-radius); padding: 1.25rem; box-shadow: 0 8px 30px rgba(0,0,0,0.05);}
.section-alt { background: var(--cd-cream); }
.nav-link { color: #0f172a; text-decoration: none; }
.nav-link:hover { color: var(--cd-pine); }

.footer a { color: #64748b; text-decoration: none; }
.footer a:hover { color: #334155; }
/* Page background gradient from cream → blush → cream */


body



html, body { height: 100%; }

/* Beige base with alternating left/right blush pulses */
/* Beige base with brighter alternating blush pulses */
.bg-page-gradient,

.footer { background:#fff; }

/* Full-page beige base with alternating blush pulses */
.bg-page-gradient,
body.bg-page-gradient {
  background-color: var(--cd-cream);
  background-image:
    radial-gradient(60% 38% at 0% 22%, rgba(242, 182, 182, 0.44) 0%, rgba(242, 182, 182, 0.24) 38%, rgba(242, 182, 182, 0.00) 72%),
    radial-gradient(60% 38% at 100% 50%, rgba(242, 182, 182, 0.38) 0%, rgba(242, 182, 182, 0.20) 38%, rgba(242, 182, 182, 0.00) 72%),
    radial-gradient(60% 38% at 0% 78%, rgba(242, 182, 182, 0.34) 0%, rgba(242, 182, 182, 0.18) 38%, rgba(242, 182, 182, 0.00) 72%),
    linear-gradient(180deg, #f9f6ed 0%, #f9f6ed 100%);
  background-repeat: no-repeat;
  background-size: cover, cover, cover, cover;
  background-attachment: scroll;
}




/* Additions for new homepage sections */
.amenity { background: #fff; border: 1px solid #e2e8f0; border-radius: var(--cd-radius); padding: 1rem; }
.faq > summary { cursor: pointer; font-weight: 600; color: #0f172a; }
.faq > p { margin-top: .5rem; color: #334155; }


/* --- Reviews two-row brick carousel --- */
.reviews-viewport{overflow:hidden; position:relative;}
.reviews-row{display:flex; gap:1rem; padding:0.5rem 0; will-change:transform; align-items:stretch;}
.reviews-row .review-card{background:#fff; border:1px solid #e2e8f0; border-radius: var(--cd-radius); box-shadow: 0 8px 30px rgba(0,0,0,0.05); padding:1.25rem; min-width: 22rem; max-width: 28rem;}
.reviews-row .review-card blockquote{color:#0f172a;}
.reviews-row .review-card figcaption{margin-top:.75rem; color:#64748b; font-size:.9rem;}
/* brick-like horizontal offset for row 2 */
.row-2{margin-top:1rem; padding-left:11rem;}
/* auto scroll */
@keyframes reviews-scroll { from{transform:translateX(0);} to{transform:translateX(-50%);} }
.row-1{animation: reviews-scroll 38s linear infinite;}
.row-2{animation: reviews-scroll 42s linear infinite reverse;}
/* Pause on hover */

@media (max-width: 640px){
  .reviews-row .review-card{min-width: 16rem; max-width: 20rem;}
  .row-2{padding-left:8rem;}
}

/* Full-page gradient override */
.bg-page-gradient{
  background: linear-gradient(180deg, var(--cd-cream) 0%, #fdeeea 28%, #ffffff 60%, #fdeeea 85%, var(--cd-cream) 100%);
  background-attachment: fixed;
  min-height: 100%;
}

/* Full-bleed reviews viewport */
.reviews-bleed{width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; padding-left:1rem; padding-right:1rem;}
@media (min-width: 640px){ .reviews-bleed{padding-left:1.5rem; padding-right:1.5rem;} }
@media (min-width: 1024px){ .reviews-bleed{padding-left:2rem; padding-right:2rem;} }

/* FAQ box styling with transparent gray background */
.faq-box{
  background: rgba(15, 23, 42, 0.06); /* transparent slate gray */
  border: 1px solid #e2e8f0;
  border-radius: var(--cd-radius);
  padding: 1rem 1.125rem;
}
.faq-box + .faq-box{ margin-top: .25rem; }
.faq-box > summary{ list-style: none; }
.faq-box > summary::-webkit-details-marker{ display:none; }
.faq-box[open]{ background: rgba(15, 23, 42, 0.08); }

/* --- Fixed header offset (Camp Detour) --- */
:root { --nav-height: 76px; } /* matches h-[4.75rem] in nav */
@media (max-width: 768px){ :root { --nav-height: 76px; } }
body > main { padding-top: var(--nav-height); }
html { scroll-padding-top: var(--nav-height); }
[id] { scroll-margin-top: var(--nav-height); }