/* ================== MyItineraries Base Styles ================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@800;900&family=Inter:wght@700;800&display=swap');
/* Root tokens */
:root{
 /* Indigo & Lime */
  --bg:            #E1E1E1;
  --ink:           #232129;   /* deep neutral for strong contrast */
  --muted:         #6D6A7C;   /* cool gray for secondary text */

  --brand:         #3F2CAF;   /* INDIGO (brand) */
  --brand-ink:     #FFFFFF;

  --accent:        #9BE564;   /* LIME (accent/CTAs, highlights) */

  --surface:       #F6F6FB;   /* very light indigo-tinted surface */
  --border:        #E3E6F5;   /* cool, subtle border */

  --success:       #2FAE66;   /* keeps harmony with lime */
  --error:         #D64545;

  /* Helpful states & scales */
  --brand-600:     #37259A;
  --brand-700:     #2E1F84;
  --brand-050:     #F1EFFB;

  --accent-600:    #7EC94E;
  --accent-700:    #6AB63F;
  --accent-050:    #F4FBEA;

  --ink-600:       #1B1921;
  --ink-300:       #9BA0AE;

  --focus-ring:    rgba(63, 44, 175, 0.35); /* indigo focus */
  --shadow:        0 10px 30px rgba(0,0,0,.08);
  --radius:        .75rem;

  /* Spacing scale */
  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;

  /* Typography scale */
  --fs-100: clamp(.875rem, .8rem + .2vw, 1rem);
  --fs-200: clamp(1rem, .9rem + .4vw, 1.125rem);
  --fs-300: clamp(1.125rem, 1rem + .6vw, 1.25rem);
  --fs-400: clamp(1.25rem, 1.1rem + .9vw, 1.5rem);
  --fs-500: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  --fs-600: clamp(2rem, 1.5rem + 2vw, 2.5rem);
  --fs-700: clamp(2.15rem, 1.6rem + 3vw, 2.65rem);
}

/* ================== Components & Interaction ================== */

/* Brand button (legacy usage) */
.button-brand{
  color: var(--brand-ink);
  background: var(--brand);
  border: 1px solid var(--brand);
}
.button-brand:hover{ background: var(--brand-600); }
.button-brand:active{ background: var(--brand-700); }
.button-brand:focus{ outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* Wordmark — uses palette + scales from :root */
.logo{
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);              /* uses your spacing token */
  line-height: 1;
  font-size: var(--fs-600);     /* scales icon via em */
}

/* Icon scales with text size; square aspect; no hard-coded colors */
.logo-icon{
  inline-size: 1.25em;          /* ~125% of cap height */
  block-size: 1.25em;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  vertical-align: middle;
}


.logo-a{
  color: var(--accent);
  font-family: "Fraunces", ui-serif, Georgia, serif;   /* swap per pairing */
  font-weight: 900;
  letter-spacing: -.02em;
  margin-right: calc(var(--s-1) / 2);  /* tiny optical gap */
  font-size: var(--fs-700);
}

.logo-b{
  color: var(--brand);
  font-family: "Inter", ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif; /* swap per pairing */
  font-weight: 800;
  letter-spacing: -.01em;
  font-size: var(--fs-600);
}

/* Responsive size – keep it graceful on mobile */
@media (max-width: 900px){
  .logo, .logo-a, .logo-b{ font-size: var(--fs-500); }
}

/* Optional hover (uses accent, no hard-coded values) */
.logo:hover .logo-a,
.logo:focus .logo-a{
  color: var(--brand);
  text-decoration: none;
}
.logo:hover .logo-b,
.logo:focus .logo-b{
  color: var(--accent);
  text-decoration: none;
}

/* Cards */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
}

/* Accent button (secondary CTA) */
.btn-accent{
  background: var(--accent);
  color: #0A1A07; /* readable on lime */
  border-color: transparent;
}
.btn-accent:hover{ background: var(--accent-600); }
.btn-accent:active{ background: var(--accent-700); }
.btn-accent:focus{ outline: 3px solid rgba(155,229,100,.45); outline-offset: 2px; }

/* ================== Base ================== */
*{ box-sizing: border-box; }
html:focus-within{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--fs-200);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; height: auto; }

/* Links (single definition) */
a{ color: var(--brand); text-decoration: none; }
a:hover, a:focus{ color: var(--accent); text-decoration: underline; }

p{ margin: 0 0 var(--s-4); color: var(--muted); }
h1,h2,h3{ margin: 0 0 var(--s-3); line-height: 1.2; color: var(--ink); }
h1{ font-size: var(--fs-700); }
h2{ font-size: var(--fs-600); }
h3{ font-size: var(--fs-400); }

/* Utility */
.container{ width: min(1200px, 92%); margin-inline: auto; }
.section{ padding: var(--s-8) 0; }
.hidden{ position: absolute; left: -9999px; }

/* Skip link */
.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{ left: var(--s-4); top: var(--s-4); width:auto; height:auto; padding: var(--s-2) var(--s-3); background: #000; color:#fff; z-index:999; }

/* ================== Header & Nav ================== */
.site-header{
  position: sticky; top: 0;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  z-index: 100;
}
.header-inner{
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-3) 0;
}


.primary-nav{ position: relative; }
/* Mobile toggle: icon-only */
.menu-button{
  display: none;                      /* shown in your @media rule */
  align-items: center;
  justify-content: center;
  inline-size: calc(var(--s-6));      /* touch target ≈ 44px (2rem) */
  block-size: calc(var(--s-6));
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--ink);
  border-radius: var(--radius);
  cursor: pointer;
}
.menu-button:focus-visible{
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Hamburger bars */
.menu-button .hamburger{
  position: relative;
  display: inline-block;
  inline-size: 22px;
  block-size: 2px;
  background: currentColor;
  border-radius: 2px;
}
.menu-button .hamburger::before,
.menu-button .hamburger::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  block-size: 2px;
  background: currentColor;
  border-radius: 2px;
}
.menu-button .hamburger::before{ top: -6px; }
.menu-button .hamburger::after { top:  6px; }

.menu-list{
  display: flex; gap: var(--s-5); list-style:none; margin:0; padding:0;
}
.menu-list a{ padding: var(--s-2) 0; color: var(--ink); font-weight:600; }
/* Active/current page: lime accent */
.menu-list a[aria-current="page"]{
  color: var(--accent);
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
}

/* ================== Buttons ================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap: var(--s-2);
  padding: .75rem 1rem; border-radius: calc(var(--radius) - 2px);
  border:1px solid var(--border); font-weight:700; text-decoration:none;
}
.btn-primary{
  background: var(--brand);
  color: var(--brand-ink);
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.btn-primary:hover, .btn-primary:focus{ filter: brightness(.98);
  background: var(--accent);
  color: var(--brand-ink); text-decoration:none; }

.btn-ghost{ background: transparent; color: var(--ink); }
.btn-ghost:hover, .btn-ghost:focus{
  border-color: var(--accent);
  color: var(--brand-ink); text-decoration:none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent), white 70%);
}

/* Ghost variant for dark image backgrounds */
.btn-ghost-ondark{
  color: #fff;
  border: 1px solid color-mix(in oklab, #fff 35%, transparent);
  background: color-mix(in oklab, #000 18%, transparent);
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.btn-ghost-ondark:hover,
.btn-ghost-ondark:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent), white 70%), 0 2px 12px rgba(0,0,0,.3);
}

.hero-actions{ display:flex; gap: var(--s-3); margin: var(--s-4) 0 var(--s-3); flex-wrap: wrap; }

/* ================== Hero (Cover) ================== */
.hero-cover{
  position: relative;
  min-height: min(92vh, 980px);           /* homepage height */
  display: grid;
  align-items: center;
  padding: clamp(var(--s-6), 6vh, var(--s-8)) 0;
  color: #fff;
  overflow: clip;
}

/* Background image (behind content) */
.hero-cover::before{
  content:"";
  position:absolute; inset:0;
  background-image: var(--hero-image);
  background-size: cover;
  background-position: var(--hero-pos, center);
  background-repeat: no-repeat;
  transform: scale(1.02);
  z-index: -2;
}
/* Readability gradient (behind content) */
.hero-cover::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.40) 0%, rgba(0,0,0,.28) 40%, rgba(0,0,0,.18) 100%);
  z-index: -1;
}
/* Ensure content sits above overlays */
.hero-cover .container{ position: relative; z-index: 0; }

/* Optional glass panel behind text */
.hero-panel{
  max-width: 720px;
  background: color-mix(in oklab, #000 16%, transparent);
  border: 1px solid color-mix(in oklab, #fff 12%, transparent);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  padding: clamp(var(--s-5), 2.5vw, var(--s-7));
  backdrop-filter: blur(4px);
}
.hero-cover h1, .hero-cover h2{ color:#fff; }
.hero-cover .lead{ color: color-mix(in oklab, #fff 85%, transparent); }
.hero-cover .trust-note{ color: color-mix(in oklab, #fff 70%, transparent); }

/* Compact variant for secondary pages */
.hero-compact{
  min-height: clamp(46vh, 56vh, 640px);
  padding: clamp(var(--s-5), 4vh, var(--s-6)) 0;
}

/* ================== Features ================== */
.feature-list{
  display:flex; gap: var(--s-5); list-style:none; padding:0; margin: var(--s-6) 0 0;
  flex-wrap: wrap;
}
.feature-list li{
	list-style: none;
}
.feature-card{
  flex:1 1 280px; background:#fff; border:1px solid var(--border); border-radius: var(--radius);
  padding: var(--s-5); box-shadow: var(--shadow);
}
.feature-card .icon{ font-size: 1.75rem; }

/* ================== Pricing ================== */
.pricing-teaser{
  display:flex; gap: var(--s-5); align-items: stretch; flex-wrap: wrap; margin-top: var(--s-6);
}
.price-card{
  flex:1 1 280px; background:#fff; border:1px solid var(--border); border-radius: var(--radius);
  padding: var(--s-5); box-shadow: var(--shadow);
  display:flex; flex-direction: column; justify-content: space-between;
}
/* Featured uses lime accent */
.price-card.featured{
  border-color: var(--accent);
  outline: 3px solid color-mix(in oklab, var(--accent), white 70%);
}
.price-name{ font-size: var(--fs-300); }
.price-amount{ font-size: var(--fs-600); font-weight: 800; margin: 0 0 var(--s-4); color: var(--ink); }
.price-amount .per{ font-size: var(--fs-100); color: var(--muted); }
.price-features{ margin: 0 0 var(--s-4); padding-left: 1.25rem; }

/* ================== Forms ================== */
.contact-form{
  margin-top: var(--s-5);
  background: #fff; border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: var(--s-6);
}
.form-row{ display:flex; gap: var(--s-5); flex-wrap: wrap; }
.form-field{ flex:1 1 260px; display:flex; flex-direction: column; gap: .5rem; }
label{ font-weight: 700; color: var(--ink); }
input, select, textarea{
  font: inherit; padding: .7rem .9rem; border-radius: .5rem; border:1px solid var(--border); background: #fff;
}
/* Lime focus ring */
input:focus, select:focus, textarea:focus{
  outline: 3px solid color-mix(in oklab, var(--accent), white 25%);
  border-color: var(--accent);
}
.form-actions{ margin-top: var(--s-4); }

/* ================== Footer ================== */
.site-footer{ border-top: 1px solid var(--border); background: var(--surface); }
.footer-inner{ display:flex; align-items:center; justify-content: space-between; padding: var(--s-5) 0; gap: var(--s-3); flex-wrap: wrap; }
.footer-links{ list-style:none; display:flex; gap: var(--s-4); margin:0; padding:0; }
.footer-links a{ color: var(--muted); }
.footer-links a:hover{ color: var(--ink); }

/* ================== Responsive ================== */
@media (max-width: 900px){
  .menu-button{ display: inline-flex; }
  .menu-list{
    position: absolute; right: 0; top: calc(100% + .5rem);
    display: none; flex-direction: column; gap: 0; min-width: 220px;
    background: #fff; border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
    padding: var(--s-2);
  }
  .menu-list.open{ display: flex; }
  .menu-list a{ padding: .7rem .9rem; border-radius: .5rem; }

  /* legacy hero layout support */
  .hero .container{ flex-direction: column; }
}

/* ================== Reduced motion ================== */
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; }
}

/* ================== Small accents ================== */
.badge{
  display:inline-block;
  padding:.35rem .6rem;
  border-radius: 999px;
  background: var(--accent);
  color:#0A1A07;
  font-weight:700;
}
.hr-accent{
  height: 3px;
  width: 80px;
  background: var(--accent);
  border: 0;
  border-radius: 3px;
  margin: var(--s-4) 0;
}
/* Feature icons (regularized) */
.icon{
  width: clamp(1.5rem, 1.1rem + 1vw, 2rem);
  height: clamp(1.5rem, 1.1rem + 1vw, 2rem);
  color: var(--brand);                    /* stroke uses currentColor */
  margin-bottom: var(--s-3);
  flex: 0 0 auto;
  display: inline-block;
}
.icon-brand{ color: var(--brand); }
.icon-accent{ color: var(--accent); }

/* If cards use a grid/flex, ensure icon aligns nicely */
.feature-card{ display:flex; flex-direction: column; gap: var(--s-2); }

/* Spacing utilities */
.mt-sm { margin-top: var(--s-3); }
.mt-md { margin-top: var(--s-4); }
.mt-lg { margin-top: var(--s-6); }

/* ================== Home, Features, Pricing and legal pages (Oct 2026) ================== */

/* Hero images (kept here so the pages carry no inline styles) */
.hero-home{ --hero-image: url('safari-photos/your-itineraries-hero.jpg'); --hero-pos: center left 20%; }
.hero-features{ --hero-image: url('safari-photos/your-itineraries-hero-7.jpg'); --hero-pos: center right 20%; }
.hero-pricing{ --hero-image: url('safari-photos/your-itineraries-hero-3.jpg'); }
.hero-band{ --hero-image: url('safari-photos/your-itineraries-hero-4.jpg'); --hero-pos: center left 20%; }

/* Text helpers used by the original pages but never defined */
.lead{ font-size: var(--fs-300); max-width: 62ch; }
.muted{ color: var(--muted); font-size: var(--fs-100); }

/* Alternate section background, to separate plain sections without a photo */
.section-alt{ background: var(--surface); border-block: 1px solid var(--border); }

/* Numbered steps: an <ol class="feature-list step-list"> of .feature-card items */
.step-list{ counter-reset: step; }
.step-list .feature-card::before{
  counter-increment: step;
  content: counter(step);
  display: grid; place-items: center;
  inline-size: var(--s-6); block-size: var(--s-6);
  border-radius: 50%;
  background: var(--brand); color: var(--brand-ink);
  font-weight: 800;
}

/* Text beside a screenshot */
.split{ display: flex; gap: var(--s-6); align-items: center; flex-wrap: wrap; }
.split-text{ flex: 1 1 320px; }
.shot{ flex: 1.4 1 360px; margin: 0; }
.shot img{ border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
/* A tall screenshot shown in a window of fixed height that scrolls, so it
   sits beside the text instead of running far down the page */
.shot-scroll{
  max-height: min(70vh, 560px);
  overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.shot-scroll:focus-visible{ outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.shot-scroll img{ border: 0; border-radius: 0; box-shadow: none; }
.shot figcaption{ margin-top: var(--s-2); color: var(--muted); font-size: var(--fs-100); }

/* Tick list for short "what you get" lines */
.tick-list{ list-style: none; margin: var(--s-4) 0 0; padding: 0; color: var(--muted); }
.tick-list li{ padding-left: var(--s-5); position: relative; margin-bottom: var(--s-2); }
.tick-list li::before{ content: "\2713"; position: absolute; left: 0; color: var(--accent-700); font-weight: 800; }

/* FAQ */
.faq-item{ background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s-4) var(--s-5); margin-top: var(--s-3); }
.faq-item summary{ font-weight: 700; color: var(--ink); cursor: pointer; }
.faq-item p{ margin: var(--s-3) 0 0; }

/* Terms and privacy: a readable line length for long text */
.legal{ max-width: 70ch; }
.legal h2{ font-size: var(--fs-500); margin-top: var(--s-6); }
.legal ul{ color: var(--muted); padding-left: var(--s-5); margin: 0 0 var(--s-4); }

/* Sign-up form (signup.php) */
.form-errors{
  margin: var(--s-4) 0 0; padding: var(--s-3) var(--s-4) var(--s-3) var(--s-6);
  border: 1px solid var(--error); border-radius: var(--radius);
  background: #fff; color: var(--error);
}
.check-label{ display: flex; gap: var(--s-2); align-items: flex-start; font-weight: 400; color: var(--muted); }
.check-label input{ margin-top: .3em; }