/* ==========================================================================
   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 & Grid Layout */

.tours{ padding: clamp(2rem, 6vw, 4rem) 0 6rem }

.section-head{ text-align:center; margin-bottom:2rem }

.section-head h2{font-size: clamp(2rem, 4vw, 2.5rem); margin:0 0 .5rem 0; color: var(--accent)}

.section-head p{font-size:1.1rem}



.tours-grid{

  display:grid;

  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

  gap: 2rem;

  align-items: start;

}



/* 6) Cards */

.card{

  background: linear-gradient(180deg, var(--card), #0d1f17);

  border:1px solid var(--border);

  border-radius:var(--radius-card); 

  padding:1.5rem; 

  display:flex; flex-direction:column; gap:1rem;

  box-shadow: var(--shadow);

  transition: transform 0.2s ease;

}

.card:hover{

  transform: translateY(-4px);

  border-color: var(--border-mid);

}



.card-header{

  display:flex; align-items:flex-start; gap:1rem;

  border-bottom:1px dashed var(--border);

  padding-bottom:1rem; margin-bottom:.5rem

}

.card-header img.icon{ width:56px; height:56px; object-fit:contain; flex-shrink:0 }

.card-header div { flex: 1; }

.card-header .title{ font-size:1.25rem; margin:0 0 .4rem 0; line-height:1.2; color:white; font-family: "Fredoka", sans-serif; }



.price-tag{

  display:inline-block;

  background: var(--leaf);

  color:white;

  font-weight:800;

  padding: 0.3rem 0.6rem;

  border-radius: 6px;

  font-size: 1.1rem;

}

.price-tag .per-person{

  font-weight:400; font-size:0.8rem; opacity:0.9;

}



.description{

  color: var(--muted);

  line-height: 1.6;

  font-size: 1rem;

  margin: 0;

}



/* Highlights List (Replaces Accordion) */

.highlights h4 {

  text-transform: uppercase;

  letter-spacing: 1px;

  font-size: 0.85rem;

  color: var(--accent);

  margin: 0 0 0.5rem 0;

  border-bottom: 1px solid var(--border);

  padding-bottom: 0.3rem;

  display: inline-block;

}



.highlights ul {

  list-style: none;

  padding: 0;

  margin: 0;

  display: flex;

  flex-direction: column;

  gap: 0.8rem;

}



.highlights li {

  position: relative;

  padding-left: 1rem;

  line-height: 1.4;

  font-size: 0.95rem;

  color: var(--muted);

}

.highlights li::before {

  content: "•";

  color: var(--accent);

  position: absolute;

  left: 0;

  top: 0;

  font-weight: bold;

}

.highlight-title {

  color: #e6f4ea;

  font-weight: 600;

  display: block;

  margin-bottom: 0.1rem;

}

.highlight-desc {

  display: block;

  font-size: 0.9rem;

  opacity: 0.85;

}



.card-action {

  margin-top: auto;

  padding-top: 1rem;

  border-top: 1px solid var(--border-weak);

}

.btn-outline {

  display: block;

  width: 100%;

  text-align: center;

  padding: 0.8rem;

  border: 1px solid var(--accent);

  color: var(--accent);

  border-radius: var(--radius-chip);

  text-decoration: none;

  font-weight: 700;

  transition: all 0.2s;

}

.btn-outline:hover {

  background: var(--accent);

  color: #0f2419;

}



/* Sticky Floating Action Button (FAB) */

.fab-whatsapp {

  position: fixed;

  bottom: 2rem;

  right: 2rem;

  background-color: #25D366;

  color: white;

  padding: 12px 20px 12px 16px;

  border-radius: 50px;

  display: flex;

  align-items: center;

  gap: 10px;

  box-shadow: 0 4px 12px rgba(0,0,0,0.3);

  z-index: 100;

  text-decoration: none;

  font-weight: bold;

  transition: transform 0.2s ease;

  border: 2px solid rgba(255,255,255,0.2);

}

.fab-whatsapp:hover {

  transform: scale(1.05);

  background-color: #20ba5a;

}

.fab-whatsapp img {

  width: 24px;

  height: 24px;

}

.fab-text {

  font-size: 1rem;

}



@media (max-width: 600px) {

  .tours-grid { grid-template-columns: 1fr; }

  .fab-whatsapp { bottom: 1.5rem; right: 1.5rem; padding: 10px 16px 10px 12px; }

}



/* 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;
}