/*
Theme Name: Camp Two Step
Theme URI: 
Author: Camp Two Step
Description: Custom theme for the Camp Two Step family camp website — three houses on Corlear Bay, Lake Champlain.
Version: 1.0
*/

/* ============================================
   CAMP TWO STEP — shared stylesheet
   Palette, type, and the reusable "camp sign" system
   ============================================ */

/* Fonts are loaded dynamically based on the Customizer's Fonts panel
   selection — see inc/customizer.php. Nothing to import here. */


:root{
  --cream:      #F2E9CB;
  --cream-deep: #E7D9A8;
  --paper:      #FBF6E9;
  --pine:       #1E3A29;
  --pine-deep:  #142A1C;
  --pine-mid:   #3D6B4C;
  --bark:       #2A2417;
  --rust:       #C1602A;
  --rust-deep:  #9C481D;
  --lake:       #5F86A1;
  --shadow: 0 14px 34px rgba(20,42,28,0.18);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--cream);
  color:var(--bark);
  font-family:'Karla', sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

h1,h2,h3,h4{
  font-family:'Fraunces', serif;
  color:var(--pine-deep);
  line-height:1.05;
  margin:0 0 .4em;
  letter-spacing:-0.01em;
}

h1{ font-weight:900; }
h2{ font-weight:700; }
h3{ font-weight:600; }

a{ color:var(--rust-deep); text-decoration-thickness: 1.5px; text-underline-offset:3px; }
a:hover{ color:var(--rust); }

.hand{
  font-family:'Caveat', cursive;
  font-weight:700;
}

.wrap{
  max-width:1120px;
  margin:0 auto;
  padding:0 28px;
}

/* ---------- texture: subtle woodgrain-ish noise on pine sections ---------- */
.grain{
  position:relative;
}
.grain::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.06;
  background-image:
    repeating-linear-gradient(90deg, #fff 0 1px, transparent 1px 90px),
    repeating-linear-gradient(0deg, #fff 0 1px, transparent 1px 140px);
  mix-blend-mode:overlay;
}

/* ============================================
   NAV — painted wooden sign board
   ============================================ */
.site-nav{
  position:sticky; top:0; z-index:50;
  background:var(--pine-deep);
  border-bottom:6px solid var(--rust-deep);
}
.site-nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:12px; padding-bottom:12px;
  gap:20px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  text-decoration:none;
  color:var(--cream);
}
.brand img{ height:100px; width:auto; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.brand-word{
  font-family:'Fraunces', serif;
  font-weight:700;
  font-size:1.7rem;
  color:var(--cream);
  letter-spacing:.01em;
}
.brand-word small{
  display:block;
  font-family:'Karla', sans-serif;
  font-weight:400;
  font-size:.78rem;
  letter-spacing:.2em;
  color:var(--cream-deep);
  text-transform:uppercase;
  margin-top:4px;
  white-space:nowrap;
}
.nav-links{
  display:flex; gap:6px; flex-wrap:wrap;
  list-style:none; margin:0; padding:0;
}
.nav-links a{
  color:var(--cream);
  text-decoration:none;
  font-weight:700;
  font-size:1.08rem;
  padding:8px 11px;
  border-radius:3px;
  transition:background .15s ease, color .15s ease;
  white-space:nowrap;
}
.nav-links a:hover{ background:rgba(242,233,203,.12); color:var(--cream); }
.nav-links a.current, .nav-links li.current-menu-item > a, .nav-links li.current_page_item > a{ background:var(--rust-deep); color:var(--paper); }

@media (max-width:760px){
  .site-nav .wrap{ flex-direction:column; align-items:flex-start; gap:10px; }
  .nav-links{ width:100%; justify-content:flex-start; }
  .nav-links a{ padding:7px 10px; font-size:.86rem; }
}

/* ============================================
   WAVE DIVIDERS — echoes the logo's waterline
   ============================================ */
.wave{ display:block; width:100%; line-height:0; }
.wave svg{ display:block; width:100%; height:auto; }
.wave.flip{ transform:scaleY(-1); }

/* ============================================
   HERO
   ============================================ */
.hero{
  position:relative;
  min-height:78vh;
  display:flex; align-items:flex-end;
  background-size:cover; background-position:center;
  color:var(--paper);
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,42,28,.15) 0%, rgba(20,42,28,.35) 45%, rgba(15,28,19,.92) 100%);
}
.hero-inner{
  position:relative; z-index:2;
  padding:64px 0 76px;
  width:100%;
}
.eyebrow{
  display:inline-block;
  font-family:'Karla', sans-serif;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
  font-size:.74rem;
  color:var(--cream);
  background:rgba(30,58,41,.55);
  border:1px solid rgba(242,233,203,.5);
  padding:6px 14px;
  border-radius:999px;
  margin-bottom:20px;
}
.hero h1{
  color:var(--paper);
  font-size:clamp(2.6rem, 7vw, 5rem);
  margin-bottom:.15em;
}
.hero .hand{
  color:var(--cream);
  font-size:clamp(1.3rem, 2.6vw, 1.8rem);
  display:block;
}
.hero-sub{
  max-width:600px;
  margin-top:18px;
  font-size:1.08rem;
  color:var(--cream);
}

.page-hero{
  min-height:46vh;
}

/* ============================================
   PATCH BADGE — the poster's circular seal, reused
   ============================================ */
.patch{
  --patch-c: var(--pine);
  width:132px; height:132px;
  border-radius:50%;
  border:3px dashed var(--patch-c);
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding:10px;
  flex-shrink:0;
  background:var(--paper);
  box-shadow: var(--shadow);
}
.patch-inner{
  border:1px solid var(--patch-c);
  border-radius:50%;
  width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px;
  padding:8px;
}
.patch-eyebrow{
  font-size:.56rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--patch-c);
}
.patch-num{
  font-family:'Fraunces', serif;
  font-weight:800;
  font-size:1.5rem;
  color:var(--patch-c);
  line-height:1;
}
.patch-label{
  font-size:.62rem;
  letter-spacing:.06em;
  color:var(--patch-c);
  text-transform:uppercase;
  font-weight:700;
}
.patch.rust{ --patch-c: var(--rust-deep); }

/* ============================================
   SECTIONS
   ============================================ */
section{ padding:76px 0; }
.section-tight{ padding:48px 0; }
.pine-section{ background:var(--pine); color:var(--cream); }
.pine-section h2, .pine-section h3{ color:var(--paper); }
.deep-section{ background:var(--pine-deep); color:var(--cream); }
.deep-section h2, .deep-section h3{ color:var(--paper); }
.cream-deep-section{ background:var(--cream-deep); }
.paper-section{ background:var(--paper); }

.kicker{
  font-family:'Karla', sans-serif;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:.78rem;
  color:var(--rust-deep);
  margin-bottom:.6em;
  display:inline-block;
}
.pine-section .kicker, .deep-section .kicker{ color:#E3A47C; }

.lede{
  font-size:1.22rem;
  max-width:700px;
  color:var(--pine-deep);
}
.pine-section .lede, .deep-section .lede{ color:var(--cream); }

/* ---------- intro / welcome block ---------- */
.welcome-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:56px;
  align-items:center;
}
@media (max-width:820px){ .welcome-grid{ grid-template-columns:1fr; } }

/* ============================================
   HOUSE CARDS (home page)
   ============================================ */
.house-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:30px;
  margin-top:48px;
}
@media (max-width:900px){ .house-grid{ grid-template-columns:1fr; } }

.house-card{
  display:flex; flex-direction:column;
  text-decoration:none;
  color:inherit;
}
.house-card figure{
  margin:0; overflow:hidden; position:relative;
  border-radius:8px;
  transform:rotate(var(--tilt, 0deg));
  box-shadow: 0 10px 24px rgba(20,42,28,.22);
  transition: transform .2s ease;
}
.house-card:nth-child(1) figure{ --tilt: -1.4deg; }
.house-card:nth-child(2) figure{ --tilt: 1deg; }
.house-card:nth-child(3) figure{ --tilt: -0.8deg; }
.house-card:hover figure{ transform:rotate(0deg) scale(1.02); }
.house-card img{ width:100%; height:230px; object-fit:cover; display:block; }
.house-card-body{ padding:18px 6px 0; }
.house-card-body h3{ font-family:'Caveat', cursive; font-size:2rem; font-weight:700; color:var(--pine-deep); margin-bottom:.1em; }
.house-card-body p{ color:#4a4635; margin:0; }
.arrow-link{
  font-weight:700; color:var(--rust-deep);
  display:inline-flex; align-items:center; gap:6px;
}
.arrow-link svg{ width:16px; height:16px; transition:transform .2s ease; }
.house-card:hover .arrow-link svg{ transform:translateX(4px); }

/* ============================================
   CAMP CALLOUT (homepage "what is a camp" teaser)
   ============================================ */
.callout{
  background:var(--paper);
  border-radius:12px;
  padding:44px;
  box-shadow:var(--shadow);
  position:relative;
  border-left:8px solid var(--rust-deep);
}
.callout .kicker{ color:var(--rust-deep); }
.pine-section .callout, .deep-section .callout{ color:var(--bark); }
.pine-section .callout h2, .pine-section .callout h3,
.deep-section .callout h2, .deep-section .callout h3{ color:var(--pine-deep); }

/* ============================================
   GALLERY GRID (house pages)
   ============================================ */
.gallery{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  grid-auto-rows:150px;
  gap:10px;
  margin-top:10px;
}
.gallery img{ width:100%; height:100%; object-fit:cover; border-radius:8px; }
.gallery .g-big{ grid-column:span 4; grid-row:span 2; }
.gallery .g-small{ grid-column:span 2; grid-row:span 1; }
@media (max-width:760px){
  .gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:140px; }
  .gallery .g-big{ grid-column:span 2; grid-row:span 2; }
  .gallery .g-small{ grid-column:span 1; }
}

/* ============================================
   FACT STRIP / stat row on house pages
   ============================================ */
.fact-strip{
  display:flex; flex-wrap:wrap; gap:34px;
  padding:26px 0;
  border-top:1px solid rgba(30,58,41,.18);
  border-bottom:1px solid rgba(30,58,41,.18);
  margin:36px 0;
}
.fact{ min-width:100px; }
.fact-num{ font-family:'Fraunces',serif; font-weight:800; font-size:2rem; color:var(--pine-deep); display:block; }
.fact-label{ text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; font-weight:700; color:var(--pine-mid); }

/* ---------- two column story ---------- */
.story-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:60px;
  align-items:start;
}
@media (max-width:820px){ .story-grid{ grid-template-columns:1fr; gap:32px; } }

.detail-list{ list-style:none; margin:0; padding:0; }
.detail-list li{
  padding:10px 0 10px 30px;
  position:relative;
  border-bottom:1px dashed rgba(30,58,41,.25);
}
.detail-list li::before{
  content:"~";
  position:absolute; left:0; top:9px;
  color:var(--rust-deep);
  font-weight:800;
  font-size:1.1rem;
}
.detail-list li:last-child{ border-bottom:none; }

.note-card{
  background:var(--cream-deep);
  border-radius:10px;
  padding:26px 28px;
  border:1px dashed var(--pine-mid);
}
.note-card .hand{ font-size:1.35rem; color:var(--pine-deep); }

/* ============================================
   CROSS-LINK / other houses strip
   ============================================ */
.cross-links{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:24px;
}
@media (max-width:700px){ .cross-links{ grid-template-columns:1fr; } }
.cross-card{
  display:flex; align-items:center; gap:16px;
  background:rgba(242,233,203,.08);
  border:1px solid rgba(242,233,203,.25);
  border-radius:10px;
  padding:16px 18px;
  text-decoration:none;
  color:var(--cream);
  transition:background .2s ease;
}
.cross-card:hover{ background:rgba(242,233,203,.16); }
.cross-card img{ width:74px; height:74px; object-fit:cover; border-radius:6px; flex-shrink:0; }
.cross-card .cc-label{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:#E3A47C; font-weight:700; }
.cross-card h4{ color:var(--paper); margin:.1em 0 0; font-size:1.15rem; }

/* ============================================
   BUTTONS
   ============================================ */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--rust-deep);
  color:var(--paper) !important;
  text-decoration:none;
  font-weight:700;
  padding:13px 26px;
  border-radius:999px;
  border:2px solid transparent;
  transition:background .18s ease, transform .18s ease;
}
.btn:hover{ background:var(--rust); transform:translateY(-2px); }
.btn.outline{
  background:transparent;
  border-color:var(--paper);
  color:var(--paper) !important;
}
.btn.outline:hover{ background:rgba(255,255,255,.12); }

/* ============================================
   FOOTER
   ============================================ */
.site-footer{
  background:var(--pine-deep);
  color:var(--cream-deep);
  padding:50px 0 30px;
}
.footer-top{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:20px;
  padding-bottom:28px;
  border-bottom:1px solid rgba(242,233,203,.15);
  margin-bottom:22px;
}
.footer-brand{ display:flex; align-items:center; gap:12px; }
.footer-brand img{ height:44px; }
.footer-brand span{ font-family:'Fraunces',serif; font-weight:700; color:var(--paper); font-size:1.15rem; }
.footer-links{ list-style:none; display:flex; gap:22px; padding:0; margin:0; flex-wrap:wrap; }
.footer-links a{ color:var(--cream-deep); text-decoration:none; font-weight:700; font-size:.9rem; }
.footer-links a:hover{ color:var(--paper); }
.footer-fine{ font-size:.8rem; color:rgba(242,233,203,.55); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* misc */
.center{ text-align:center; }
.mt-lg{ margin-top:48px; }
.small-caps{
  text-transform:uppercase; letter-spacing:.14em; font-size:.8rem; font-weight:700;
}
.quiet-line{
  font-size:1rem;
  color:var(--pine-mid);
  font-style:italic;
  margin-top:-4px;
}
.plain-list{ list-style:none; margin:0; padding:0; }
.plain-list li{
  padding:9px 0 9px 22px;
  position:relative;
  border-bottom:1px dashed rgba(30,58,41,.2);
}
.plain-list li::before{
  content:"–";
  position:absolute; left:0; top:9px;
  color:var(--pine-mid);
}
.plain-list li:last-child{ border-bottom:none; }

/* ============================================
   HOMEPAGE — ALTERNATE DESIGN ("scrapbook" layout)
   Additive only — doesn't touch anything above.
   ============================================ */
:root{ --gold: #B98B3E; }

.wordmark-logo{ height:38px; width:auto; }

/* ---------- light, split hero (no moody photo overlay) ---------- */
.hero-v2{
  background:var(--cream);
  padding:56px 0 40px;
  overflow:hidden;
}
.hero-v2-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:50px;
  align-items:center;
}
@media (max-width:860px){ .hero-v2-grid{ grid-template-columns:1fr; } }

.hero-v2 h1{
  font-size:clamp(2.6rem, 6vw, 4.2rem);
  color:var(--pine-deep);
  margin-bottom:.2em;
}
.hero-v2 .lede{ color:var(--bark); font-size:1.15rem; max-width:480px; }

/* photo cluster */
.photo-cluster{
  position:relative;
  min-height:380px;
}
.photo-cluster .polaroid{
  position:absolute;
  background:var(--paper);
  padding:10px 10px 34px;
  box-shadow:0 14px 30px rgba(20,42,28,.28);
  border-radius:2px;
}
.photo-cluster .polaroid img{ display:block; width:100%; height:100%; object-fit:cover; }
.photo-cluster .p1{ width:62%; top:0; left:2%; transform:rotate(-4deg); z-index:2; }
.photo-cluster .p1 img{ height:230px; }
.photo-cluster .p2{ width:52%; top:34%; right:0; transform:rotate(5deg); z-index:3; }
.photo-cluster .p2 img{ height:190px; }
.photo-cluster .badge-spot{
  position:absolute; bottom:-6px; left:20%;
  z-index:4;
  width:150px; height:150px;
  filter:drop-shadow(0 8px 16px rgba(20,42,28,.3));
}
@media (max-width:860px){
  .photo-cluster{ min-height:320px; margin-top:20px; }
  .photo-cluster .badge-spot{ width:120px; height:120px; left:auto; right:8%; }
}

/* ---------- camp patch badge (reusable) ---------- */
.camp-badge{
  width:100%; height:100%;
  border-radius:50%;
  background:var(--cream);
  box-shadow:
    0 0 0 5px var(--pine-deep),
    0 0 0 8px var(--gold),
    0 10px 22px rgba(20,42,28,.35);
  display:flex; align-items:center; justify-content:center;
  padding:16%;
}
.camp-badge img{ width:100%; height:100%; object-fit:contain; }

/* ---------- polaroid trio (the three houses, scrapbook style) ---------- */
.polaroid-row{
  display:flex;
  gap:38px;
  flex-wrap:wrap;
  justify-content:center;
  padding-top:20px;
}
.polaroid-card{
  background:var(--paper);
  padding:12px 12px 20px;
  width:290px;
  box-shadow:0 12px 26px rgba(20,42,28,.22);
  text-decoration:none;
  color:inherit;
  display:block;
  transition:transform .2s ease, box-shadow .2s ease;
  position:relative;
}
.polaroid-card:nth-child(1){ transform:rotate(-3deg); }
.polaroid-card:nth-child(2){ transform:rotate(2deg); margin-top:26px; }
.polaroid-card:nth-child(3){ transform:rotate(-1.5deg); }
.polaroid-card:hover{ transform:rotate(0deg) translateY(-6px); box-shadow:0 20px 36px rgba(20,42,28,.3); }
.polaroid-card img{ width:100%; height:200px; object-fit:cover; display:block; }
.polaroid-card .cap{
  font-family:'Caveat', cursive;
  font-size:1.5rem;
  font-weight:700;
  color:var(--pine-deep);
  text-align:center;
  padding-top:12px;
}
.polaroid-card .cap-sub{
  font-family:'Karla', sans-serif;
  font-size:.88rem;
  color:#4a4635;
  text-align:center;
  padding:2px 6px 0;
}
.tape{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%) rotate(-2deg);
  width:70px; height:26px;
  background:rgba(185,139,63,.55);
  border:1px solid rgba(185,139,63,.7);
}

/* ---------- mountain band divider / footer art ---------- */
.mountain-band{
  width:100%; display:block;
  line-height:0;
  background:var(--pine-deep);
}
.mountain-band img{ width:100%; display:block; }

.footer-v2{
  background:var(--pine-deep);
  color:var(--cream-deep);
  padding:0 0 30px;
}
.footer-v2 .footer-top{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:20px;
  padding:34px 0 26px;
}