/* ============================================================
   EAST AFRICA SAFARI GUIDE — STYLESHEET
   Theme: Light · Clean · Editorial
   ============================================================ */

@font-face { font-family:'Athelas'; src:url('../fonts/Athelas-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Athelas'; src:url('../fonts/Athelas-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'AtypDisplay'; src:url('../fonts/AtypDisplay-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'AtypDisplay'; src:url('../fonts/AtypDisplay-Medium.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }

:root {
  --max: 1200px;
  --nav-h: 68px;

  /* Light palette */
  --base:      #FFFFFF;
  --surface-1: #F7F6F3;
  --surface-2: #EFEDE8;
  --surface-3: #E4E1DA;
  --surface-4: #D4D0C8;

  /* Text */
  --text-primary:   #1C1C1C;
  --text-secondary: #4A4A4A;
  --text-muted:     #888880;

  /* Accent — forest green */
  --green:     #2D6A4F;
  --green-lt:  #40916C;
  --green-dim: rgba(45,106,79,0.09);

  /* Borders */
  --border:    rgba(0,0,0,0.09);
  --border-md: rgba(0,0,0,0.14);

  --serif: 'Athelas','Palatino Linotype',Georgia,serif;
  --body:  'AtypDisplay','DM Sans',system-ui,-apple-system,sans-serif;
  --t-fast: 0.15s ease;
  --t-med:  0.25s ease;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; -webkit-font-smoothing:antialiased; }
body { background:var(--base); color:var(--text-primary); font-family:var(--body); font-weight:400; line-height:1.65; overflow-x:hidden; }
h1,h2,h3,h4,h5,h6 { font-family:var(--serif); font-weight:400; line-height:1.15; color:var(--text-primary); }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
ul { list-style:none; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }

.wrap { width:100%; max-width:var(--max); margin:0 auto; padding:0 24px; }

/* ============================================================
   NAV — white bar, green accents
   ============================================================ */
.nav {
  position:fixed; top:0; left:0; right:0;
  height:var(--nav-h);
  background:#fff;
  border-bottom:1px solid var(--border);
  box-shadow:0 1px 8px rgba(0,0,0,0.05);
  z-index:900;
  display:flex; align-items:center;
}
.nav-inner { width:100%; max-width:var(--max); margin:0 auto; padding:0 24px; display:flex; align-items:center; }

.nav-logo { display:flex; flex-direction:column; gap:2px; flex-shrink:0; margin-right:36px; text-decoration:none; }
.nav-logo-name { font-family:var(--serif); font-size:16px; font-weight:700; color:var(--text-primary); letter-spacing:0.2px; line-height:1; }
.nav-logo-name span { color:var(--green); }
.nav-logo-tag { font-family:var(--body); font-size:9px; font-weight:500; letter-spacing:2.5px; text-transform:uppercase; color:var(--text-muted); line-height:1; }

.nav-links { display:flex; align-items:center; gap:2px; flex:1; }
.nav-item { position:relative; }
.nav-link, .nav-dropdown-trigger {
  display:flex; align-items:center; gap:4px; padding:8px 13px; border-radius:4px;
  font-family:var(--body); font-size:13px; font-weight:500; color:var(--text-secondary);
  cursor:pointer; user-select:none; white-space:nowrap;
  transition:color var(--t-fast),background var(--t-fast);
  background:none; border:none;
}
.nav-link:hover, .nav-dropdown-trigger:hover,
.nav-item.active > .nav-dropdown-trigger, .nav-item.active > .nav-link { color:var(--green); background:var(--green-dim); }
.nav-arrow { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform var(--t-fast); flex-shrink:0; }
.nav-item.active .nav-arrow { transform:rotate(180deg); }

.nav-cta {
  margin-left:auto; flex-shrink:0;
  display:inline-flex; align-items:center; gap:7px; padding:10px 20px;
  background:var(--green); color:#fff; border-radius:4px;
  font-family:var(--body); font-size:13px; font-weight:500;
  transition:background var(--t-fast); white-space:nowrap;
}
.nav-cta:hover { background:var(--green-lt); }
.nav-cta svg { width:16px; height:16px; fill:currentColor; flex-shrink:0; }

/* Dropdowns */
.nav-dropdown {
  position:absolute; top:calc(100% + 8px); left:0;
  background:#fff; border:1px solid var(--border-md); border-radius:8px;
  padding:8px 0; min-width:220px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity var(--t-med),transform var(--t-med),visibility var(--t-med);
  pointer-events:none; z-index:1000;
  box-shadow:0 8px 32px rgba(0,0,0,0.11),0 2px 8px rgba(0,0,0,0.06);
}
.nav-item.active .nav-dropdown { opacity:1; visibility:visible; transform:translateY(0); pointer-events:all; }
.nav-dropdown.wide { display:flex; min-width:540px; padding:18px 0; }
.nav-item:last-of-type .nav-dropdown.wide,
.nav-item:nth-last-of-type(2) .nav-dropdown.wide,
.nav-item:nth-last-of-type(3) .nav-dropdown.wide { left:auto; right:0; }
.dropdown-col { flex:1; padding:0 18px; border-right:1px solid var(--border); }
.dropdown-col:last-child { border-right:none; }
.dropdown-head { font-family:var(--body); font-size:9px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--green); padding:4px 0 10px; margin-bottom:4px; border-bottom:1px solid var(--border); }
.nav-dropdown:not(.wide) .dropdown-head { padding:8px 18px 10px; margin:0 0 4px; border-bottom:1px solid var(--border); }
.dropdown-link { display:flex; align-items:center; gap:9px; padding:9px 18px; font-family:var(--body); font-size:13px; color:var(--text-secondary); transition:color var(--t-fast),background var(--t-fast); line-height:1.35; }
.dropdown-link:hover { color:var(--green); background:var(--green-dim); }
.dropdown-col .dropdown-link { padding:8px 0; }
.dropdown-col .dropdown-link:hover { padding-left:4px; background:none; color:var(--green); }
.dropdown-icon { font-size:14px; flex-shrink:0; width:20px; text-align:center; opacity:0.8; }
.dropdown-sub { display:block; font-size:11px; color:var(--text-muted); margin-top:1px; }

/* ============================================================
   MOBILE NAV
   ============================================================ */
.hamburger {
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:40px; height:40px; padding:8px; border-radius:4px; cursor:pointer; flex-shrink:0;
  margin-left:auto; transition:background var(--t-fast); border:1px solid var(--border);
}
.hamburger:hover { background:var(--surface-2); }
.hamburger span { display:block; width:20px; height:1.5px; background:var(--text-primary); border-radius:2px; transition:transform .3s ease,opacity .3s ease,width .3s ease; transform-origin:center; }
.hamburger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; width:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

.mobile-nav { display:block; position:fixed; top:var(--nav-h); left:0; right:0; bottom:0; z-index:800; overflow:hidden; pointer-events:none; visibility:hidden; opacity:0; transition:opacity .25s ease,visibility .25s ease; }
.mobile-nav.open { pointer-events:all; visibility:visible; opacity:1; }
.mob-panel { position:absolute; inset:0; background:#fff; overflow-y:auto; transform:translateX(100%); transition:transform .32s cubic-bezier(.4,0,.2,1); will-change:transform; border-top:1px solid var(--border); }
.mob-panel.active { transform:translateX(0); }
.mob-panel.exit-left { transform:translateX(-30%); }
.mob-panel-inner { display:flex; flex-direction:column; min-height:100%; padding-bottom:40px; }
.mob-header { display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--border); background:var(--surface-1); position:sticky; top:0; z-index:10; }
.mob-header-title { font-family:var(--serif); font-size:16px; color:var(--text-primary); }
.mob-back { display:flex; align-items:center; gap:6px; font-family:var(--body); font-size:12px; font-weight:500; color:var(--green); background:none; border:none; cursor:pointer; padding:4px 0; transition:color var(--t-fast); }
.mob-back:hover { color:var(--green-lt); }
.mob-back svg { stroke:currentColor; flex-shrink:0; }
.mob-list { flex:1; padding:8px 0; }
.mob-item { display:flex; align-items:center; justify-content:space-between; width:100%; padding:14px 20px; border-bottom:1px solid rgba(0,0,0,0.04); background:none; border-left:none; border-right:none; border-top:none; cursor:pointer; transition:background var(--t-fast); text-decoration:none; text-align:left; }
.mob-item:hover { background:var(--surface-2); }
.mob-item:last-child { border-bottom:none; }
.mob-item-label { display:flex; align-items:center; gap:12px; font-family:var(--body); font-size:14px; color:var(--text-secondary); line-height:1.3; }
.mob-item:hover .mob-item-label { color:var(--green); }
.mob-item-icon { font-size:16px; width:24px; text-align:center; flex-shrink:0; }
.mob-item-arrow { font-size:16px; color:var(--text-muted); flex-shrink:0; transition:color var(--t-fast),transform var(--t-fast); }
.mob-item:hover .mob-item-arrow { color:var(--green); transform:translateX(3px); }
.mob-item--link .mob-item-label { color:var(--text-secondary); }
.mob-item--link:hover .mob-item-label { color:var(--green); }
.mob-cta-block { padding:24px 20px; margin-top:auto; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:10px; }
.mobile-cta-primary { display:flex; align-items:center; justify-content:center; gap:8px; padding:15px; background:var(--green); color:#fff; border-radius:4px; font-family:var(--body); font-size:13px; font-weight:500; transition:background var(--t-fast); text-decoration:none; }
.mobile-cta-primary:hover { background:var(--green-lt); }
.mobile-cta-wa { display:flex; align-items:center; justify-content:center; gap:8px; padding:13px; background:rgba(37,211,102,.07); border:1px solid rgba(37,211,102,.2); border-radius:4px; font-family:var(--body); font-size:13px; font-weight:500; color:#1a7a3a; text-decoration:none; transition:background var(--t-fast); }
.mobile-cta-wa:hover { background:rgba(37,211,102,.13); }
.mobile-contact-info { text-align:center; font-size:11px; color:var(--text-muted); }

@media (max-width:768px) { .nav-links { display:none; } .nav-cta { display:none; } .hamburger { display:flex; } }

.page-offset { padding-top:var(--nav-h); }
.hero { padding-top:var(--nav-h); }
.page-main { min-height:60vh; padding:60px 0; }
.page-placeholder { font-size:14px; color:var(--text-muted); font-style:italic; padding:60px 0; text-align:center; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background:#1A1A1A; padding:60px 0 0; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.08); }
.footer-logo { display:block; margin-bottom:14px; }
.footer-logo-name { font-family:var(--serif); font-size:18px; font-weight:700; color:#fff; display:block; margin-bottom:3px; }
.footer-logo-name span { color:#60b08a; }
.footer-logo-tag { font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:#888; }
.footer-desc { font-size:13px; color:#999; line-height:1.7; margin-bottom:18px; }
.footer-contacts { display:flex; flex-direction:column; gap:8px; }
.footer-wa, .footer-email { font-size:13px; color:#bbb; text-decoration:none; transition:color var(--t-fast); }
.footer-wa:hover, .footer-email:hover { color:#60b08a; }
.footer-col-head { font-family:var(--body); font-size:10px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:#888; margin-bottom:16px; }
.footer-col ul { display:flex; flex-direction:column; gap:10px; }
.footer-col a { font-size:13px; color:#999; text-decoration:none; transition:color var(--t-fast); }
.footer-col a:hover { color:#fff; }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; padding:20px 0; font-size:12px; color:#666; flex-wrap:wrap; gap:12px; }
.footer-bottom a { color:#888; text-decoration:none; transition:color var(--t-fast); }
.footer-bottom a:hover { color:#fff; }
@media (max-width:900px) { .footer-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:580px) { .footer-grid { grid-template-columns:1fr; gap:32px; } .footer-bottom { flex-direction:column; text-align:center; } }