/* ==========================================================================
   Everest Base Camp Treks — Design System
   Palette: Himalayan dawn — slate rock, glacier white, alpenglow amber, pine
   Type: Fraunces (display) / Inter (body) / JetBrains Mono (data & labels)
   Signature: the elevation-profile line — used as hero motif, section divider,
   and literal itinerary chart, because altitude gain is the actual product.
   ========================================================================== */

:root{
  --slate:        #1C2B33;
  --slate-2:      #24363F;
  --slate-soft:   #405864;
  --glacier:      #F7F8FA;
  --glacier-2:    #EEF1F3;
  --amber:        #E8873A;
  --amber-dark:   #C96B22;
  --pine:         #3B5D50;
  --pine-light:   #6E8C7E;
  --stone:        #8B95A1;
  --line:         #DDE3E7;
  --line-dark:    #33454F;
  --white:        #FFFFFF;

  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body:    'Inter', -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --radius: 3px;
  --shadow-card: 0 1px 2px rgba(28,43,51,0.06), 0 8px 24px rgba(28,43,51,0.06);
  --container-max: 1240px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family: var(--font-body);
  color: var(--slate);
  background: var(--glacier);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a{color: var(--slate); text-decoration:none;}
img{max-width:100%; display:block;}
.container-wide{max-width: var(--container-max); margin:0 auto; padding:0 24px;}

h1,h2,h3,h4,.font-display{
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--slate);
  line-height: 1.12;
}
h1{font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight:500;}
h2{font-size: clamp(1.8rem, 3.2vw, 2.6rem);}
h3{font-size: 1.35rem;}
.eyebrow{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber-dark);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 14px;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px; background: var(--amber-dark);
  display:inline-block;
}
.lede{color: var(--slate-soft); font-size:1.1rem; max-width:640px;}
.mono{font-family: var(--font-mono);}

/* ---------- Buttons ---------- */
.btn-trek{
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition: all .18s ease;
}
.btn-amber{background: var(--amber); color: var(--slate); font-weight:600;}
.btn-amber:hover{background: var(--amber-dark); color:var(--white);}
.btn-outline-light{border-color: rgba(255,255,255,0.4); color:var(--white);}
.btn-outline-light:hover{background: rgba(255,255,255,0.12); border-color: var(--white); color: var(--white);}
.btn-outline-dark{border-color: var(--slate); color: var(--slate);}
.btn-outline-dark:hover{background: var(--slate); color: var(--white);}

/* ---------- Navbar ---------- */
.site-nav{
  background: var(--slate);
  padding: 18px 0;
  position: sticky; top:0; z-index: 999;
  border-bottom: 1px solid var(--line-dark);
}
.site-nav .container-wide{display:flex; align-items:center; justify-content:space-between;}
.brand{
  font-family: var(--font-display);
  color: var(--white);
  font-size: 1.28rem;
  font-weight:600;
  display:flex; align-items:center; gap:10px;
}
.brand .peak{color: var(--amber);}
.nav-links{display:flex; align-items:center; gap:30px; list-style:none; margin:0; padding:0;}
.nav-links a{
  color: rgba(255,255,255,0.78);
  font-size:0.92rem;
  font-family: var(--font-mono);
  letter-spacing: .01em;
}
.nav-links a:hover, .nav-links a.active{color: var(--white);}
.nav-cta{margin-left:6px;}
.nav-toggle{display:none; background:none; border:none; color:var(--white); font-size:1.6rem;}

@media (max-width:900px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0; background:var(--slate);
    flex-direction:column; align-items:flex-start; padding: 6px 24px 24px;
    display:none; gap:16px; border-bottom:1px solid var(--line-dark);
  }
  .nav-links.open{display:flex;}
  .nav-toggle{display:block;}
}

/* ---------- Hero ---------- */
.hero{
  background: var(--slate);
  color: var(--white);
  position: relative;
  overflow: hidden;
  padding: 90px 0 0;
}
.hero-inner{
  max-width: var(--container-max); margin:0 auto; padding: 0 24px 60px;
  display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items:end;
}
.hero h1{color:var(--white); margin-bottom:22px;}
.hero .lede{color: rgba(255,255,255,0.72); margin-bottom: 32px;}
.hero-stats{display:flex; gap:34px; margin-top:40px; flex-wrap:wrap;}
.hero-stats div span{display:block;}
.hero-stats .num{font-family:var(--font-mono); font-size:1.5rem; color:var(--amber);}
.hero-stats .label{font-size:0.76rem; color:rgba(255,255,255,0.55); text-transform:uppercase; letter-spacing:.06em;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap;}
.elevation-svg{width:100%; height:auto; display:block;}
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;}
}

/* ---------- Elevation divider (signature element) ---------- */
.elevation-divider{width:100%; display:block; margin: 0;}

/* ---------- Sections ---------- */
section{padding: 88px 0;}
.section-tight{padding: 56px 0;}
.bg-slate{background: var(--slate); color: var(--white);}
.bg-slate h2{color:var(--white);}
.bg-glacier-2{background: var(--glacier-2);}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom: 48px; flex-wrap:wrap;}

/* ---------- Cards: Treks ---------- */
.trek-grid{display:grid; grid-template-columns: repeat(3,1fr); gap:28px;}
@media (max-width:960px){.trek-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:640px){.trek-grid{grid-template-columns:1fr;}}

.trek-card{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.trek-card:hover{transform: translateY(-4px); box-shadow: var(--shadow-card);}
.trek-card-art{height:150px; position:relative;}
.trek-card-body{padding: 22px 22px 24px; display:flex; flex-direction:column; flex:1;}
.trek-card-body h3{margin-bottom:8px;}
.trek-card-meta{
  display:flex; gap:16px; font-family:var(--font-mono); font-size:0.76rem;
  color: var(--stone); text-transform:uppercase; letter-spacing:.03em; margin-bottom:14px;
}
.trek-card-desc{color: var(--slate-soft); font-size:0.95rem; flex:1; margin-bottom:18px;}
.trek-card-foot{display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); padding-top:16px;}
.trek-price{font-family:var(--font-mono); font-weight:600;}
.trek-price small{display:block; font-weight:400; color:var(--stone); font-size:0.68rem; text-transform:uppercase;}
.badge-diff{
  font-family:var(--font-mono); font-size:0.68rem; text-transform:uppercase; letter-spacing:.05em;
  padding:4px 9px; border-radius:20px; border:1px solid currentColor;
}
.diff-moderate{color: var(--pine);}
.diff-strenuous{color: var(--amber-dark);}
.diff-challenging{color:#B24545;}

/* ---------- Elevation profile chart (used on trek detail) ---------- */
.elevation-chart{background: var(--slate); border-radius: var(--radius); padding: 30px 24px; color:var(--white);}
.elevation-chart .eyebrow{color: var(--amber);}
.day-list{list-style:none; margin:0; padding:0; border-top:1px solid var(--line);}
.day-list li{
  display:grid; grid-template-columns: 60px 1fr auto; gap:18px; align-items:baseline;
  padding: 22px 0; border-bottom:1px solid var(--line);
}
.day-list .day-num{font-family:var(--font-mono); color:var(--amber-dark); font-weight:600;}
.day-list .day-alt{font-family:var(--font-mono); color:var(--stone); font-size:0.85rem; white-space:nowrap;}
.day-list h4{margin:0 0 6px; font-size:1.05rem; font-family:var(--font-display); font-weight:600;}
.day-list p{margin:0; color:var(--slate-soft); font-size:0.94rem;}

/* ---------- FAQ (AEO) ---------- */
.faq-item{border-bottom:1px solid var(--line); padding: 22px 0;}
.faq-item summary{
  cursor:pointer; font-family:var(--font-display); font-weight:600; font-size:1.08rem;
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; font-family:var(--font-mono); color:var(--amber-dark); font-size:1.3rem;}
.faq-item[open] summary::after{content:"–";}
.faq-item p{margin: 14px 0 0; color: var(--slate-soft);}

/* ---------- Blog ---------- */
.blog-grid{display:grid; grid-template-columns: repeat(3,1fr); gap:30px;}
@media (max-width:960px){.blog-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:640px){.blog-grid{grid-template-columns:1fr;}}
.post-card{border-top:1px solid var(--line); padding-top:18px;}
.post-card .eyebrow{margin-bottom:10px;}
.post-card h3{margin-bottom:10px;}
.post-card p{color:var(--slate-soft); font-size:0.95rem;}
.post-meta{font-family:var(--font-mono); font-size:0.74rem; color:var(--stone); text-transform:uppercase; margin-top:12px;}

article.post-body{max-width: 720px; margin: 0 auto;}
article.post-body h2{margin-top:2.2em;}
article.post-body p{color: var(--slate-soft); margin-bottom: 1.3em;}
article.post-body ul, article.post-body ol{color: var(--slate-soft); margin-bottom:1.3em; padding-left: 1.3em;}
article.post-body blockquote{
  border-left: 3px solid var(--amber); padding-left:20px; margin: 2em 0;
  font-family: var(--font-display); font-size:1.2rem; color: var(--slate);
}
.answer-box{
  background: var(--glacier-2); border-left:3px solid var(--pine);
  padding: 20px 24px; border-radius: var(--radius); margin: 2em 0;
}
.answer-box .eyebrow{color:var(--pine); margin-bottom:8px;}
.answer-box p{color:var(--slate); margin:0;}

/* ---------- Testimonials / trust ---------- */
.trust-grid{display:grid; grid-template-columns: repeat(4,1fr); gap:24px; text-align:center;}
@media (max-width:900px){.trust-grid{grid-template-columns:1fr 1fr;}}
.trust-grid .num{font-family:var(--font-display); font-size:2.4rem; color:var(--amber);}
.trust-grid .label{font-family:var(--font-mono); font-size:0.76rem; text-transform:uppercase; color:rgba(255,255,255,0.55);}

/* ---------- Forms ---------- */
.form-trek label{font-family:var(--font-mono); font-size:0.76rem; text-transform:uppercase; letter-spacing:.04em; color:var(--slate-soft); margin-bottom:8px; display:block;}
.form-trek .form-control, .form-trek .form-select{
  border-radius: var(--radius); border:1px solid var(--line); padding:12px 14px; font-family:var(--font-body);
}
.form-trek .form-control:focus, .form-trek .form-select:focus{
  border-color: var(--amber); box-shadow: 0 0 0 3px rgba(232,135,58,0.18); outline:none;
}

/* ---------- Footer ---------- */
.site-footer{background: var(--slate); color: rgba(255,255,255,0.7); padding: 64px 0 30px;}
.site-footer h5{color:var(--white); font-family:var(--font-mono); font-size:0.78rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:18px;}
.site-footer a{color: rgba(255,255,255,0.68);}
.site-footer a:hover{color: var(--amber);}
.footer-grid{display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:40px;}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}}
.footer-bottom{border-top:1px solid var(--line-dark); margin-top:50px; padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:0.82rem;}

/* ---------- Breadcrumb ---------- */
.crumbs{font-family:var(--font-mono); font-size:0.78rem; color:var(--stone); padding: 22px 0 0;}
.crumbs a{color:var(--stone);}
.crumbs a:hover{color:var(--amber-dark);}

/* Focus visibility */
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline: 2px solid var(--amber); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; scroll-behavior:auto !important;}
}