/* =========================================================
   ExploringNepal.com — Warm Earthy Theme (No JS)
   Fonts: Playfair Display (headings), Inter (body)
   Palette: Terracotta, Evergreen, Saffron, Natural Paper
========================================================= */

/* --------- Design tokens --------- */
:root{
  --bg:          #fffaf4;   /* paper */
  --text:        #2b2b2b;   /* deep charcoal */
  --muted:       #6a6a6a;   /* subtle grey */
  --primary:     #7a3e2e;   /* terracotta */
  --primary-2:   #5f2f23;   /* deeper terracotta */
  --accent:      #e8a829;   /* saffron */
  --accent-2:    #d47b1f;   /* warm amber */
  --evergreen:   #0b6e4f;   /* footer */
  --evergreen-2: #08533c;
  --card:        #fff3e4;   /* soft peach */
  --border:      #ead8c8;   /* parchment line */
  --radius:      12px;
  --max:         1100px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.65;
  letter-spacing:.01em;
}
img{max-width:100%; height:auto; display:block}
.container{max-width:var(--max); margin-inline:auto; padding:0 1rem}
.prose p{max-width:70ch}
.muted{color:var(--muted)}

h1,h2,h3{
  font-family:"Playfair Display", Georgia, "Times New Roman", serif;
  letter-spacing:.2px;
  color:var(--primary-2);
  margin:0 0 .5rem 0;
}

/* --------- Skip link --------- */
.skip-link{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.skip-link:focus{position:static; width:auto; height:auto; padding:.5rem 1rem; background:#000; color:#fff}

/* --------- Header (light, paper-like) --------- */
.site-header{
  position:sticky; top:0; z-index:10;
  background: #fff9f2;
  border-bottom:1px solid var(--border);
  box-shadow: 0 6px 14px rgba(122,62,46,.06);
}
.logo a{
  text-decoration:none;
  font-family:"Playfair Display", serif;
  font-weight:700;
  color:var(--primary-2);
  letter-spacing:.3px;
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  padding:.85rem 1rem;
}
.site-nav ul{list-style:none; display:flex; gap:1rem; margin:0; padding:0}
.site-nav a{
  color:var(--primary-2);
  text-decoration:none;
  padding:.5rem .7rem; border-radius:.6rem;
  transition:background .2s ease, color .2s ease;
}
.site-nav a[aria-current="page"]{background:#fbe8cf; color:var(--primary)}
.site-nav a:hover,.site-nav a:focus{background:#f6ddbc; outline:none}

/* --------- Hero --------- */
.hero{position:relative; isolation:isolate}
.hero img{width:100%; height:48svh; object-fit:cover; object-position:center}
.hero-text{
  position:absolute; inset:auto 0 1.5rem 0; color:#2b2b2b;
}
.hero-text h2{
  color:var(--primary-2);
  text-shadow:0 2px 12px rgba(255,255,255,.65);
}
.hero-text p{
  max-width:60ch; background:rgba(255,250,244,.8);
  display:inline-block; padding:.35rem .6rem; border-radius:.5rem;
}

/* --------- Buttons (saffron gradient) --------- */
.button{
  display:inline-block; color:#2b2b2b; text-decoration:none; font-weight:700;
  padding:.65rem 1rem; border-radius:999px; border:1px solid #e1b455;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
  box-shadow: 0 8px 16px rgba(232,168,41,.18);
  transition: transform .12s ease, box-shadow .2s ease;
}
.button:hover,.button:focus{
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(212,123,31,.25);
  outline:none;
}

/* --------- Grids & Cards --------- */
.grid-3{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin-block:2rem;
}
.cards .card, .feature-cards .card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1rem 1.1rem;
  box-shadow:0 6px 14px rgba(122,62,46,.08);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card h3{margin-top:.1rem}
.card:hover,.card:focus-within{
  transform: translateY(-6px);
  box-shadow:0 14px 26px rgba(122,62,46,.16);
  border-color:#e6c8ae;
}
.card a.text-link{
  color:var(--primary);
  text-underline-offset:2px; text-decoration-thickness:2px;
}
.card a.text-link:hover,.card a.text-link:focus{color:var(--primary-2)}

/* --------- Gallery (3:2 aspect, soft frames) --------- */
.gallery-grid{
  display:grid; gap:.9rem;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  margin:1rem 0 2rem;
}
.gallery-grid figure{
  margin:0; background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 6px 14px rgba(122,62,46,.08);
}
.figure-media{aspect-ratio:3/2; width:100%; overflow:hidden; background:#f7efe6}
.figure-media img{width:100%; height:100%; object-fit:cover}
figcaption{padding:.7rem 1rem .2rem; font-weight:700; color:var(--primary-2)}
.desc{padding:0 1rem 1rem; color:var(--text)}

/* --------- Contact Form (paper card) --------- */
.contact-form{
  max-width:720px; margin:1rem 0 3rem;
  background:#fffdf9;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.25rem;
  box-shadow: 0 12px 28px rgba(122,62,46,.09);
}
.form-row{display:flex; flex-direction:column; gap:.35rem; margin-bottom:1rem}
.form-row.checkbox{flex-direction:row; align-items:center; gap:.6rem}
.contact-form .form-row label{font-weight:600; color:var(--primary-2)}
input[type="text"],input[type="email"],select,textarea{
  padding:.8rem .95rem; border:1px solid var(--border); border-radius:.6rem; background:#fff;
  transition:border-color .2s ease, box-shadow .2s ease;
}
input:hover,select:hover,textarea:hover{border-color:#e3cdb8}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(122,62,46,.15);
}
textarea{min-height:8rem; resize:vertical}
input[type="checkbox"]{width:1.05rem; height:1.05rem; accent-color:var(--primary)}
::placeholder{color:#a08e84}
.contact-form .button{width:100%; margin-top:.25rem}

/* --------- Footer (evergreen, cream text) --------- */
.site-footer{
  background:var(--evergreen);
  color:#f3efe7;
  border-top:1px solid rgba(243,239,231,.25);
  margin-top:2rem; padding-top:2rem;
}
.footer-grid{
  display:grid; gap:2rem;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  padding:1rem;
}
.footer-col h4{
  margin:0 0 .6rem 0; font-size:1.1rem; font-weight:700;
  color:#fffdfa;
  font-family:"Playfair Display", serif;
}
.footer-col p{font-size:.95rem; line-height:1.55; color:#e7e1d6; margin:0 0 1rem 0}
.footer-links{list-style:none; padding:0; margin:0}
.footer-links li{margin-bottom:.5rem}
.footer-links a{
  color:#fffdfa; text-decoration:none; font-size:.95rem;
  border-bottom:1px dashed transparent; transition:opacity .2s ease, border-color .2s ease;
}
.footer-links a:hover,.footer-links a:focus{
  opacity:.8; border-color:#fffdfa;
}
.footer-bottom{
  border-top:1px solid rgba(243,239,231,.25);
  padding:1rem; text-align:center; font-size:.9rem; color:#e7e1d6;
}

/* --------- Links --------- */
a{color:var(--primary)}
a:hover,a:focus{color:var(--primary-2)}

/* --------- Responsive & a11y --------- */
@media (max-width:600px){.footer-grid{text-align:left}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media (max-width:480px){
  .site-header .container{flex-wrap:wrap; gap:.5rem}
  .site-nav ul{flex-wrap:wrap}
}

/* --------- Visually hidden --------- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
