/* ==========================================================================
   HAMDY COOK — DESIGN SYSTEM v1
   Single source of truth for tokens, base, and shared components.
   Load AFTER the Tailwind browser script and BEFORE page <style> blocks.
   Pages: index / overview / itinerary / gallery / faq
   Breakpoints: <=1024 layout switch · <=767/700/640 fine-tuning
   Grid rhythm: 64px desktop gutters · 16-20px mobile · min 44px targets
   ========================================================================== */

/* ---------- fonts (self-hosted, no network dependency) ---------- */
@font-face {
  font-family: "Just Another Hand:Regular";
  src: url("./fonts/JustAnotherHand-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: "Just Another Hand";
  src: url("./fonts/JustAnotherHand-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Fredoka";
  src: url("./fonts/Fredoka-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Fredoka:Bold";
  src: url("./fonts/Fredoka-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Fredoka:Regular";
  src: url("./fonts/Fredoka-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  --brand: #6e95ff;        /* cornflower — headings, primary surfaces */
  --brand-deep: #1b3485;   /* sticker outline, eyebrows */
  --brand-soft: #659df5;   /* light surfaces, secondary text accents */
  --ink: #111114;          /* sticker borders, counter text */
  --body-ink: #2b2b36;     /* body copy */
  --paper: #ffffff;
  --nav-green: #2ecc71;
  --nav-green-dark: #27ae60;
  --gold: #e8c07a;         /* route accents, stars base */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --border-bold: 3px solid #111114;
  --border-bolder: 4px solid #111114;
  --shadow-pop: 0 30px 90px rgba(0,0,0,.5);
  --shadow-lift: 0 8px 20px rgba(0,0,0,.15);
  --gutter-desktop: 64px;
  --gutter-mobile: 16px;
  --tap-min: 44px;
  --focus-ring: 0 0 0 3px rgba(110,149,255,.6);
}

/* ---------- base ---------- */
html { scroll-behavior: smooth; }
html, body, #root { min-height: 100%; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--body-ink);
  font-family: 'Fredoka', 'Arial Rounded MT Bold', Arial, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button { color: inherit; font: inherit; }
button, a, [role="button"] { min-height: var(--tap-min); }
button:not(.question):not(.stop):not(.gal-tile):not(.rev-arrow):not(.lb-nav):not(.rev-modal-close):not(.lb-close),
a:not(.nav-link) { min-width: var(--tap-min); }
::selection { background: var(--brand); color: #fff; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }

/* Mikado substitute: Fredoka (free, same rounded-bold look).
   Applied everywhere a design asked for Mikado, plus anywhere Inter was used. */
[class*="Mikado:"] {
  font-family: "Fredoka", "Arial Rounded MT Bold", Arial, sans-serif !important;
}
/* restore the design's Bold vs Regular difference (it was only in the name before) */
[class*="Mikado:Bold"] { font-weight: 700 !important; }
[class*="Mikado:Regular"] { font-weight: 500 !important; }
[class*="Inter:"] {
  font-family: "Fredoka", "Arial Rounded MT Bold", Arial, sans-serif !important;
}

/* ---------- sticker strokes ---------- */
.stroke-footer {
  -webkit-text-stroke: 16px #000000;
  paint-order: stroke fill;
}
.stroke-price {
  -webkit-text-stroke: 40px #4977FF;
  paint-order: stroke fill;
}

/* ---------- layout shell (scaled-canvas pages: index / overview) ---------- */
.design-viewport {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  overflow: hidden;
}
.design-canvas {
  width: 1920px;
  height: auto; /* content-defined: sections changed height since the 4279px era */
  transform-origin: left top;
}

/* ---------- bottom navbar (shared, all pages) ---------- */
#viewport > nav[data-node-id="1:350"] {
  position: fixed; bottom: 64px; top: auto; left: 64px; margin: 0;
  width: fit-content; max-width: calc(100vw - 128px);
  z-index: 80;
}
#viewport .nav-link {
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #6E95FF;
  font-family: "Fredoka", "Arial Rounded MT Bold", Arial, sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  color: transparent;
  text-decoration: none;
  cursor: pointer;
  paint-order: stroke fill;
  transition: color .25s;
  min-height: 0;
}
#viewport .nav-link.active {
  color: #6E95FF;
  -webkit-text-stroke-color: #1B3485;
  font-family: "Fredoka", "Arial Rounded MT Bold", Arial, sans-serif;
}

/* ---------- shared review controls ---------- */
.rev-arrow {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.12); color: #fff;
  font-size: 20px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; transition: .25s;
  backdrop-filter: blur(8px);
}
.rev-arrow:hover { background: #fff; color: #111; }
.rev-counter { font-variant-numeric: tabular-nums; }

/* ---------- trust footer stage (shared: itinerary / gallery / faq) ---------- */
.footer-stage {
  position: relative; width: 100%; aspect-ratio: 1920 / 1219;
  overflow: hidden; background: #fff;
}
.footer-stage #reviews {
  position: absolute; left: 0; top: 0; transform-origin: left top;
}

/* ================= RESPONSIVE (<=1024px) ================= */
body.is-responsive .design-canvas { width: 100%; height: auto; }
body.is-responsive #viewport { height: auto; }
body.is-responsive .design-viewport { overflow: visible; }
body.is-responsive { padding-bottom: 90px; }

/* nav: bottom bar, wrapping */
body.is-responsive #viewport > nav[data-node-id="1:350"] {
  position: fixed; bottom: 10px; top: auto; left: 10px; right: 10px;
  width: auto; max-width: none; height: auto; min-height: 56px;
  margin: 0; padding: 8px 12px 8px 8px;
  flex-wrap: wrap; gap: 10px 14px; border-width: 3px; z-index: 60;
}
body.is-responsive nav a[data-node-id="1:351"] { height: auto; padding: 8px 16px 8px 10px; }
body.is-responsive nav [data-node-id="1:369"] { font-size: 16px; }
body.is-responsive nav [data-node-id="1:370"] {
  font-size: 15px; gap: 6px 14px; white-space: normal; flex-wrap: wrap;
}
body.is-responsive #viewport .nav-link {
  font-size: 16px; -webkit-text-stroke-width: 2px;
}

/* trust footer: stacked flow */
body.is-responsive #reviews { width: 100%; height: auto; }
body.is-responsive [data-node-id="1:189"] { display: none; }
body.is-responsive [data-node-id="1:190"] {
  position: relative; left: auto; top: auto; width: 100%; height: auto;
}
body.is-responsive [data-node-id="1:191"] {
  position: relative; right: auto; bottom: auto; width: 100%; height: auto;
  padding: 52px 20px 40px; display: flex; flex-direction: column; gap: 26px;
}
body.is-responsive [data-node-id="1:192"],
body.is-responsive [data-node-id="1:204"],
body.is-responsive [data-node-id="1:205"],
body.is-responsive [data-node-id="1:206"] { inset: 0; }
body.is-responsive [data-node-id="1:192"] img,
body.is-responsive [data-node-id="1:204"] img,
body.is-responsive [data-node-id="1:205"] img,
body.is-responsive [data-node-id="1:206"] img { object-fit: cover; }
body.is-responsive [data-node-id="1:193"] { display: none; }
body.is-responsive [data-node-id="1:207"] {
  position: relative; left: auto; top: auto; width: 100%; z-index: 2;
}
body.is-responsive [data-node-id="1:208"] { height: auto; }
body.is-responsive [data-node-id="1:209"] { flex-wrap: wrap; gap: 18px; }
body.is-responsive [data-node-id="1:212"] { font-size: clamp(40px, 10vw, 60px); }
body.is-responsive [data-node-id="1:222"],
body.is-responsive [data-node-id="1:223"],
body.is-responsive [data-node-id="1:224"],
body.is-responsive [data-node-id="1:225"],
body.is-responsive [data-node-id="1:226"] { width: 34px; height: 34px; }
body.is-responsive [data-node-id="1:227"] { font-size: clamp(16px, 4.4vw, 24px); }
body.is-responsive [data-node-id="1:228"],
body.is-responsive [data-node-id="1:229"],
body.is-responsive [data-node-id="1:230"],
body.is-responsive [data-node-id="1:231"],
body.is-responsive [data-node-id="1:340"] {
  position: relative; left: auto; top: auto; width: 100%; z-index: 2;
  font-size: clamp(24px, 6.5vw, 36px);
}
body.is-responsive [data-node-id="1:232"],
body.is-responsive [data-node-id="1:304"] { display: none; }
body.is-responsive .footer-stage { aspect-ratio: auto; height: auto; overflow: visible; }
body.is-responsive .footer-stage #reviews { position: relative; transform: none; }

@media (max-width: 640px) {
  body.is-responsive nav[data-node-id="1:350"] { border-radius: 10px; }
  body.is-responsive .rev-arrow { width: 40px; height: 40px; }
  body.is-responsive [data-node-id="1:191"] { padding-left: 16px; padding-right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}