/* ══════════════════════════════════════════════════════════════
   Yoovic Reviews — public landing pages
   Every page sets --accent from landing_pages.accent_color, so the
   same templates render green for Marketplace, gold for UAE, etc.
   ══════════════════════════════════════════════════════════════ */

:root {
  --accent: #6D28D9;
  --accent-dark: #4C1D95;
  --accent-light: #7C3AED;
  --go-green: #16A34A;
  --go-gold: #F59E0B;
  --star: #F7B500;
  --ink: #0F1A14;
  --body: #5A6B60;
  --line: #E4E9E5;
  --soft: #F5F8F6;
  --radius: 12px;
  --shadow: 0 2px 10px rgba(16, 40, 25, .06);
  --shadow-md: 0 8px 28px rgba(16, 40, 25, .10);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Safety net: a stray wide element (a long unwrapped city/testimonial name,
   a full-bleed section slightly miscalculated, etc.) turns into a page-wide
   horizontal scrollbar on mobile if nothing stops it — this doesn't fix the
   overflowing element itself, it just stops one from ever taking the whole
   page down with it. Set on both html and body (iOS Safari inconsistently
   honours it on just one); only the x-axis is constrained, so normal
   vertical scroll and .nav's position:sticky are unaffected. */
html { overflow-x: hidden; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: #fff;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

.wrap { max-width: 1800px; margin: 0 auto; padding: 0 24px; }
.sec { padding: 46px 0; }
.sec-tight { padding: 0 0 46px; }

/* ── section heading ───────────────────────────────────────── */
.sec-head { text-align: center; margin-bottom: 22px; }
.sec-head h2 { font-size: 23px; font-weight: 800; letter-spacing: -.4px; }
.sec-head p { font-size: 12.5px; color: var(--body); margin-top: 5px; }

.row-head {
  display: flex; justify-content: space-between;
  align-items: center; gap: 16px; margin-bottom: 18px;
}
.row-head h2 { font-size: 19px; font-weight: 800; letter-spacing: -.3px; }
.row-head .sub { font-size: 12px; color: var(--body); margin-top: 3px; }

/* ── buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 13.5px; font-weight: 600; border-radius: 8px;
  padding: 11px 22px; transition: all .18s; white-space: nowrap;
}
.btn-solid { background: var(--accent); color: #fff; }
.btn-solid:hover { background: var(--accent-light); }
.btn-ghost { border: 1px solid var(--line); color: var(--ink); background: #fff; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-white { background: #fff; color: var(--accent); font-weight: 700; }
.btn-white:hover { background: #F0F7F3; }
.btn-outline-white { border: 1px solid rgba(255,255,255,.5); color: #fff; }
.btn-outline-white:hover { background: rgba(255,255,255,.12); }
.btn-sm { padding: 7px 15px; font-size: 11.5px; }

/* ── stars ─────────────────────────────────────────────────── */
.stars { color: var(--star); letter-spacing: 1.5px; }

/* ── media placeholder ─────────────────────────────────────── */
/* Shown until an image is picked in the admin Media Library. */
.ph {
  background: linear-gradient(135deg, #EDF3EF, #DCE8E1);
  display: grid; place-items: center;
  color: #9CB3A5; font-size: 11px; font-weight: 600;
  letter-spacing: .3px; text-align: center; padding: 12px;
}
.ph::before { content: '▢'; font-size: 22px; display: block; opacity: .5; }

/* ── nav ───────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: #fff; border-bottom: 1px solid var(--line);
}
.nav-in { display: flex; align-items: center; gap: 26px; height: 64px; }
/* min-width:0 lets a flex item actually shrink below its content size —
   without it, a broken logo image rendering its (possibly long) alt text
   refuses to shrink and pushes the header wider than the viewport. */
.logo { flex-shrink: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.logo img { max-width: 100%; }
.logo b {
  display: block; font-weight: 900; font-size: 17px;
  letter-spacing: .5px; color: var(--accent); line-height: 1.05;
}
.logo small {
  display: block; font-size: 9px; font-weight: 700;
  letter-spacing: 2.4px; color: var(--body);
}
.nav-links { display: flex; gap: 20px; margin-left: 10px; }
.nav-links a {
  font-size: 13px; font-weight: 500; color: #33453B;
  padding: 6px 0; white-space: nowrap;
}
.nav-links a:hover { color: var(--accent); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav-btn { padding: 8px 16px; font-size: 12.5px; white-space: nowrap; }

/* ── breadcrumb ────────────────────────────────────────────── */
.crumb {
  font-size: 11.5px; color: var(--body);
  padding: 12px 0; display: flex; gap: 7px; align-items: center;
}
.crumb a:hover { color: var(--accent); }
.crumb span { color: #C4CFC8; }

/* ── footer ────────────────────────────────────────────────── */
.foot { background: var(--accent-dark); color: #fff; padding: 42px 0 0; }
.foot-grid {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr;
  gap: 26px;
}
.foot h5 { font-size: 12px; font-weight: 700; margin-bottom: 12px; }
.foot ul { list-style: none; display: grid; gap: 8px; }
.foot ul a { font-size: 11px; opacity: .7; }
.foot ul a:hover { opacity: 1; }
.foot-about { font-size: 11px; line-height: 1.8; opacity: .7; max-width: 240px; }
.foot-social { display: flex; gap: 8px; margin-top: 14px; }
.foot-social a {
  width: 28px; height: 28px; border-radius: 7px;
  background: rgba(255,255,255,.1); display: grid; place-items: center;
  font-size: 11px; transition: .2s;
}
.foot-social a:hover { background: var(--accent-light); }
.foot-bot {
  margin-top: 32px; border-top: 1px solid rgba(255,255,255,.12);
  padding: 15px 0; font-size: 10.5px; opacity: .6; text-align: center;
}

/* ── accessibility + motion ────────────────────────────────── */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ── responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .row-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  /* Logo + language toggle + Login + Register in one row is tight on a
     phone — shrink the controls rather than let any of them force width.
     (.lang-toggle's own mobile sizing lives in language-toggle-public.ejs,
     next to its base styles, so document order can't fight this rule.) */
  .nav-in { gap: 10px; }
  .nav-right { gap: 6px; }
  .nav-btn { padding: 7px 10px; font-size: 11px; }
}

/* ── paired sections ───────────────────────────────────────── */
/* Two half-width sections share a row. Inside a split, sections drop their
   own .wrap/.sec padding — the row owns the spacing instead. */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
  padding: 12px 0;
}
.split-col { display: flex; flex-direction: column; min-width: 0; }
.split-col > section,
.split-col > .in-split { flex: 1; padding: 0 !important; }
.split-col > section > .wrap { padding: 0 !important; max-width: none !important; }

/* Cards inside a split should fill their column's height */
.split-col .about,
.split-col .hl,
.split-col .story,
.split-col .veh-box,
.split-col .steps-box,
.split-col .share { height: 100%; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
}

/* ── RTL (Urdu) ────────────────────────────────────────────── */
/* margin-left is a physical property — it doesn't flip with dir="rtl" on
   its own, so .nav-right (pushed to the far edge via margin-left:auto) and
   .nav-links (offset from the logo) need an explicit mirrored override. */
[dir="rtl"] .nav-links { margin-left: 0; margin-right: 10px; }
[dir="rtl"] .nav-right { margin-left: 0; margin-right: auto; }