/* ==========================================================================
   Mr. Heng • Kampot TukTuk Tours — Stylesheet (Tokenized & cleaned)
   - Implements new header: brand (2 lines) left, flags right
   - Removes unused header bits (old logo/title layout) and empty carousel-wrap
   ========================================================================== */

/* 1) Root / Design Tokens */
:root{
  --bg:#0f2419;
  --card:#10281c;
  --leaf:#1b5e2f;
  --leaf-2:#2e7d32;
  --text:#e6f4ea;
  --muted:#b9d4c0;
  --accent:#9bd17c;

  --border-weak: rgba(255,255,255,.06);
  --border:      rgba(255,255,255,.08);
  --border-mid:  rgba(255,255,255,.10);
  --border-strong: rgba(255,255,255,.12);
  --border-avatar: rgba(255,255,255,.15);

  --radius-card: 18px;
  --radius-chip: 14px;

  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* 2) Base / Utilities */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  background:linear-gradient(180deg,var(--bg) 0%, #0b1a13 100%);
  color:var(--text);
}
.container{width:min(1100px,92%);margin-inline:auto}
a{color:var(--accent)}
a:hover{opacity:.9}
.muted{color:var(--muted)}
.small{font-size:.9rem}

/* 3) Header (new layout: brand left, flags right) */
.site-header{
  position:sticky; top:0; z-index:10;
  background:rgba(15,36,25,.7); backdrop-filter: blur(8px);
  border-bottom:1px solid var(--border-weak);
}
.header-inner{
  display:grid;                      /* replaces old flex header */
  grid-template-columns: 1fr auto;   /* brand left, flags right */
  align-items:center;
  gap:.5rem;
  padding:.6rem 0;
}
.brand{
  display:flex;
  flex-direction:column;
  line-height:1.1;
  min-width:0;
}
.brand-title{
  font-weight:800;
  font-size:clamp(1.1rem, 2.6vw, 1.6rem);
  margin:0;
}
.brand-title{
  font-family: "Fredoka", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;  /* Fredoka 700 */
  letter-spacing: .2px;  /* tiny polish */
}
.brand-subtitle{
  font-weight:700;
  font-size:clamp(.95rem, 2.2vw, 1.2rem);
  margin:0;
  color:var(--text);
  opacity:.95;
}
.flags{
  display:flex; align-items:center; gap:.35rem; white-space:nowrap;
}
.flags a{
  text-decoration:none;
  font-size:22px;    /* slightly larger flags as requested */
  line-height:1;
}
.flags a.active {
  filter: grayscale(0);
  font-weight: bold;
  border-bottom: 2px solid #4fa04d;
}

@media (max-width:420px){
  .header-inner{ gap:.35rem }
  .flags{ gap:.25rem }
}

/* 4) Hero */
.hero{
  position:relative; overflow:hidden;
  padding: clamp(2rem, 5vw, 4rem) 0;
}
.hero-grid{
  display:grid; gap:2rem; align-items:center;
}
.hero-text h1{font-size: clamp(2rem, 3.8vw, 3.2rem); line-height:1.1; margin:.2rem 0 1rem}
.hero-text h1 span{color:var(--accent)}
.hero-text p{color:var(--muted); font-size:1.05rem}
.hero-cta{display:flex; gap:.8rem; margin-top:1.2rem}
.btn{
  display:inline-block; padding:.8rem 1rem; border-radius:var(--radius-chip); text-decoration:none; font-weight:700;
  border:1px solid var(--border-strong);
  box-shadow: var(--shadow);
}
.btn-primary{ background:linear-gradient(135deg,var(--leaf),var(--leaf-2)); color:white }
.btn-ghost{ background:transparent; color:var(--text) }
.leafy-bg{
  position:absolute; inset:auto 0 0 0; height:180px; z-index:-1;
  background:
    radial-gradient(120px 80px at 10% 40%, rgba(155,209,124,.2), transparent 60%),
    radial-gradient(160px 120px at 90% 60%, rgba(183,228,160,.18), transparent 60%),
    radial-gradient(300px 140px at 60% 10%, rgba(27,94,47,.25), transparent 60%);
  filter: blur(10px);
}

/* 5) Tours & Carousel */
.tours{ padding: clamp(2rem, 6vw, 4rem) 0 4rem }
.section-head h2{font-size:2rem; margin:0}
.section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1rem }

.carousel{
  display:grid; grid-auto-flow:column; grid-auto-columns: minmax(280px, 360px);
  gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; padding: .6rem .6rem;
  scrollbar-width:thin
}
.carousel::-webkit-scrollbar{height:10px}
.carousel::-webkit-scrollbar-thumb{ background: var(--border); border-radius:999px }

/* 6) Cards & Accordion */
.card{
  scroll-snap-align:start;
  background: linear-gradient(180deg, var(--card), #0d1f17);
  border:1px solid var(--border);
  border-radius:var(--radius-card); padding:1rem; display:flex; flex-direction:column; gap:.6rem;
  box-shadow: var(--shadow);
  min-height: 380px;
}
.card-header{
  display:grid; grid-template-columns: 64px 1fr; gap:.8rem; align-items:center;
  border-bottom:1px dashed var(--border);
  padding-bottom:.6rem; margin-bottom:.2rem
}
.card-header img.icon{ width:64px; height:64px; object-fit:contain }
.card-header .title{ font-size:1.1rem; margin:0; line-height:1.2 }
.card-header .subtitle{ color:var(--muted); font-size:.95rem; margin-top:.2rem }

.accordion{ margin-top:.4rem; display:flex; flex-direction:column; gap:.4rem }
details{
  background: rgba(255,255,255,.03);
  border:1px solid var(--border);
  border-radius:12px;
  padding:.4rem .6rem;
}
summary{ cursor:pointer; font-weight:600; list-style:none }
summary::-webkit-details-marker{ display:none }
details p{ color:var(--muted); margin:.4rem 0 .2rem }

/* Card Price: Leaf Pill (helpers kept adjacent to card block) */
.price-area{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.35rem;
}
.price-pill{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.6rem .9rem;
  color:#fff;
  background: linear-gradient(135deg, var(--leaf), var(--leaf-2));
  border-radius: 999px;
  box-shadow: var(--shadow);
}
.leaf-icon svg{ width:18px; height:18px; opacity:.95; display:block }
.price-stack{ display:flex; flex-direction:column; line-height:1.05 }
.price-main{ font-weight:800; font-size: clamp(1.2rem, 2.2vw, 1.6rem) }
.price-sub{ font-size:.85rem; opacity:.9 }
.price-note{ color: var(--muted); font-size:.95rem; margin:0; text-align:center }

/* 7) Contact */
.contact{ padding: 3rem 0 4rem; background:linear-gradient(180deg, #0b1a13, #0a1711) }
.contact-grid{ display:flex; justify-content:center; }
.contact-list{ list-style:none; padding:0; margin:1rem 0; display:flex; gap:.6rem }
.contact-chip{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem .9rem; border-radius:var(--radius-chip); text-decoration:none; font-weight:700;
  background:rgba(255,255,255,.06); border:1px solid var(--border-mid);
}
.contact-chip img{ width:18px; opacity:.8 }
.contact-card{
  background: linear-gradient(180deg, var(--card), #0d1f17);
  border:1px solid var(--border);
  border-radius:var(--radius-card); padding:1.2rem; text-align:center; box-shadow: var(--shadow);
}
.contact .lead {
  font-size: 1.1rem;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 1rem;
}
.reassure-list{
  list-style:none; padding:0; margin:.6rem 0 0 0;
  display:flex; flex-wrap:wrap; gap:.5rem .8rem;
  color:var(--muted); font-weight:700;
}
.reassure-list li{ white-space:nowrap }
.avail{ margin-top:.2rem }
.contact-photo{
  height:128px; width:128px; object-fit:cover;
  border-radius:50%;
  border:2px solid var(--border-avatar);
  box-shadow: var(--shadow);
  margin-bottom:.4rem;
}
.contact-actions{
  margin-top:.6rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.6rem;
}
.contact-actions .contact-list{
  display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; margin:.2rem 0;
}
.contact-actions p{ text-align:center; }
.contact-actions .contact-list img{
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* 8) Footer */
.site-footer{ padding:1.2rem 0; border-top:1px solid var(--border-weak); background:#0a1711 }
.site-footer p{ margin:0; color:var(--muted); text-align:center }

/* 9) Media Queries */
@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
  .contact-grid{ display:flex; justify-content:center; }
  .contact-card{ margin-top:.6rem }
}

/* 10) Hero Overrides (single-column, centered) */
.hero-grid{
  grid-template-columns: 1fr;
}
.hero-text{
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
}
.hero-cta{
  justify-content: center;
}
.hero-text p{
  margin-left: auto;
  margin-right: auto;
}
.hero-logo{
  width: clamp(320px, 50vw, 800px);
  height: auto;
  display: block;
  margin: 0 auto 1.5rem auto;
}