/* ===========================
   VARIABLES & RESET
=========================== */
:root {
  --navy: #1a2244;
  --navy-mid: #222d57;
  --blue: #D42B2B;
  --blue-light: #e03e3e;
  --accent: #F5A623;
  --accent-hover: #d98e10;
  --bg: #f4f7fb;
  --bg-white: #ffffff;
  --text: #2c2c2c;
  --text-mid: #555;
  --text-light: #888;
  --radius: 10px;
  --shadow: 0 4px 20px rgba(0,0,0,0.08);
  --shadow-hover: 0 10px 36px rgba(0,0,0,0.14);
  --transition: 0.25s ease;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Lato', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  font-size: 16px;
}

img { display: block; max-width: 100%; }
a { text-decoration: none; }
ul { list-style: none; }

.container {
  width: 92%;
  max-width: 1160px;
  margin: 0 auto;
}

/* ===========================
   TYPOGRAPHY
=========================== */
h1, h2, h3, h4 {
  font-family: 'Nunito', sans-serif;
  line-height: 1.25;
}

h1 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; margin-bottom: 0.4em; }
h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.4em; }

.section-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  background: rgba(212,43,43,0.1);
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 10px;
}

/* ===========================
   BUTTONS
=========================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: 6px;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: var(--transition);
  border: 2px solid transparent;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(245,166,35,0.35);
}

.btn-outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.6);
}
.btn-outline:hover {
  background: rgba(255,255,255,0.1);
  border-color: #fff;
}

.btn-white {
  background: #fff;
  color: var(--navy);
  border-color: #fff;
  font-weight: 700;
}
.btn-white:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: translateY(-2px);
}

/* ===========================
   HEADER
=========================== */
.header {
  background: var(--navy);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 12px rgba(0,0,0,0.2);
}

.nav-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  max-width: 1220px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 1.2rem;
}
.logo i { color: var(--accent); font-size: 1.4rem; }

#main-nav ul {
  display: flex;
  gap: 3px;
}

#main-nav a {
  color: rgba(255,255,255,0.85);
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  padding: 7px 12px;
  border-radius: 5px;
  transition: var(--transition);
}
#main-nav a:hover {
  color: #fff;
  background: rgba(255,255,255,0.1);
}

/* Hamburger */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: var(--transition);
}

/* Nav Drawer */
.nav-drawer {
  position: fixed;
  top: 0; right: -280px;
  width: 280px;
  height: 100%;
  background: var(--navy);
  z-index: 2000;
  transition: right 0.3s ease;
  padding: 70px 30px 30px;
}
.nav-drawer.open { right: 0; }

.nav-drawer ul { display: flex; flex-direction: column; gap: 4px; }
.nav-drawer a {
  display: block;
  color: rgba(255,255,255,0.85);
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  padding: 11px 16px;
  border-radius: 6px;
  transition: var(--transition);
}
.nav-drawer a:hover { background: rgba(255,255,255,0.1); color: #fff; }

.drawer-close {
  position: absolute;
  top: 18px; right: 18px;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
  padding: 6px 10px;
}

.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1500;
}
.nav-overlay.active { display: block; }

/* ===========================
   NAV CTA (Contact button)
=========================== */
#main-nav a.nav-cta {
  background: var(--accent);
  color: #fff;
  padding: 9px 22px;
  margin-left: 6px;
  font-weight: 700;
}
#main-nav a.nav-cta:hover {
  background: var(--accent-hover);
  color: #fff;
}

.nav-drawer a.nav-cta {
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  text-align: center;
  margin-top: 10px;
}
.nav-drawer a.nav-cta:hover {
  background: var(--accent-hover);
  color: #fff;
}

/* Logo shrink narrowed to a tight zone right above the hamburger
   cutoff - investigated and rolled out sitewide 8th September 2026.
   Empirically measured (real browser, real CSS, not isolated) that
   the full 85px logo only
   needs to shrink to 52px between 1121-1190px; above 1190px the
   full-size logo fits fine alongside the 6-item nav and Contact
   button, so long as item padding/gap stay tightened up to 1230px
   (full padding is fine again above that). A separate attempt to
   remove this shrink zone entirely, based on an earlier isolated
   `!important`-forced test that suggested full-size logo + tight
   padding alone worked down to 1121px, was tried and reverted: with
   the real cascade (not isolated), the genuine wrap threshold is
   1185-1187px, not 1121px, so removing this rule caused real
   text-wrapping in the nav from 1121-1186px. This 52px shrink zone
   is required, not leftover. */
@media (min-width: 1121px) and (max-width: 1190px) {
  .logo svg { height: 52px; width: auto; }
}

@media (min-width: 1191px) and (max-width: 1600px) {
  .logo svg { height: 85px; width: auto; }
}

@media (min-width: 1121px) and (max-width: 1230px) {
  #main-nav a { padding: 7px 9px; }
  #main-nav ul { gap: 2px; }
}

@media (min-width: 1121px) and (max-width: 1130px) {
  #main-nav { display: block; }
  .menu-toggle { display: none; }
}

@media (max-width: 1120px) {
  #main-nav { display: none; }
  .menu-toggle { display: flex; }
}

/* ===========================
   HERO
=========================== */
.hero {
  position: relative;
  background: var(--navy);
  overflow: hidden;
  padding: 100px 0 0;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: url('/assets/images/hero-learner-driver-car.jpg') center/cover no-repeat;
  opacity: 0.12;
}

.hero-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-bottom: 80px;
  color: #fff;
}

.hero-badge {
  display: inline-block;
  background: rgba(245,166,35,0.15);
  color: var(--accent);
  border: 1px solid rgba(245,166,35,0.4);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom: 20px;
}

.hero h1 {
  margin-bottom: 18px;
  color: #fff;
}
.hero h1 span { color: var(--accent); }

.hero p {
  max-width: 580px;
  margin: 0 auto 30px;
  color: rgba(255,255,255,0.8);
  font-size: 1.05rem;
}

.hero-buttons {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.wave {
  position: relative;
  line-height: 0;
  margin-top: 40px;
}
.wave svg { width: 100%; height: 60px; display: block; }

/* ===========================
   TRUST BAR
=========================== */
.trust-bar {
  background: var(--bg-white);
  border-bottom: 1px solid #e8edf4;
  padding: 28px 0;
}

.trust-inner {
  display: flex;
  gap: 40px;
  justify-content: center;
  flex-wrap: wrap;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-mid);
}
.trust-item i {
  color: var(--blue);
  font-size: 1.2rem;
}

/* ===========================
   FEATURES
=========================== */
.features {
  padding: 80px 0;
  background: var(--bg);
}

.features .container { text-align: center; }
.features h2 { margin-bottom: 40px; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 24px;
  text-align: left;
}

.feature-card {
  background: var(--bg-white);
  border-radius: var(--radius);
  padding: 30px 26px;
  box-shadow: var(--shadow);
  transition: var(--transition);
  border: 1px solid #e8edf4;
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.feature-icon {
  width: 52px; height: 52px;
  background: rgba(212,43,43,0.08);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.feature-icon i { color: var(--blue); font-size: 1.3rem; }

.feature-card p {
  color: var(--text-mid);
  font-size: 0.93rem;
  margin-bottom: 16px;
}

.link-arrow {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap var(--transition);
}
.link-arrow:hover { gap: 10px; }

/* ===========================
   GUIDES
=========================== */
.guides {
  padding: 80px 0;
  background: var(--bg-white);
}

.guides .container { text-align: center; }
.guides h2 { margin-bottom: 40px; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  text-align: left;
}

.card {
  background: var(--bg-white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid #e8edf4;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }

.card-img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  flex-shrink: 0;
}

.card-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  background: rgba(212,43,43,0.08);
  padding: 3px 9px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 10px;
}

.card-body h3 { font-size: 1.05rem; margin-bottom: 7px; }
.card-body p { color: var(--text-mid); font-size: 0.9rem; flex: 1; }

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--blue);
  margin-top: 14px;
  transition: gap var(--transition);
}
.card-link:hover { gap: 10px; }

/* ===========================
   INSIGHT SECTION
=========================== */
.insight {
  padding: 80px 0;
  background: var(--bg);
}

.insight-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

.insight-text h2 { margin-bottom: 16px; }
.insight-text > p { color: var(--text-mid); margin-bottom: 24px; }

.insight-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}
.insight-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.93rem;
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
}
.insight-list i { color: var(--blue); font-size: 1rem; flex-shrink: 0; }

.insight-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.insight-quote {
  background: var(--bg-white);
  border-radius: var(--radius);
  padding: 26px 28px;
  box-shadow: var(--shadow);
  border-left: 4px solid var(--blue);
  position: relative;
}

.insight-quote > i {
  color: var(--blue);
  opacity: 0.15;
  font-size: 2rem;
  position: absolute;
  top: 16px; right: 20px;
}

.insight-quote p {
  color: var(--text-mid);
  font-size: 0.93rem;
  line-height: 1.7;
  margin-bottom: 12px;
}

.insight-quote span {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ===========================
   CTA
=========================== */
.cta-section {
  background: linear-gradient(135deg, var(--navy-mid) 0%, var(--navy) 100%);
  padding: 80px 0;
}

.cta-inner {
  text-align: center;
  color: #fff;
}
.cta-inner h2 { color: #fff; margin-bottom: 14px; }
.cta-inner p {
  color: rgba(255,255,255,0.78);
  max-width: 520px;
  margin: 0 auto 30px;
}

/* ===========================
   FOOTER
=========================== */
.footer {
  background: var(--navy);
  color: rgba(255,255,255,0.75);
  padding: 60px 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 50px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  margin-bottom: 14px;
}
.footer-logo i { color: var(--accent); }

.footer-brand p { font-size: 0.9rem; line-height: 1.65; }

.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
  font-size: 1.1rem;
  transition: var(--transition);
}
.footer-social a:hover {
  background: var(--accent);
  color: #fff;
}

.footer-col h4 {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  color: #fff;
  font-size: 0.95rem;
  margin-bottom: 14px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 8px; }
.footer-col a {
  color: rgba(255,255,255,0.65);
  font-size: 0.88rem;
  transition: color var(--transition);
}
.footer-col a:hover { color: var(--accent); }

.footer-bottom {
  text-align: center;
  padding: 18px 0;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.4);
}

/* ===========================
   COOKIE BANNER
=========================== */
.cookie-banner {
  position: fixed;
  bottom: 24px;
  left: 24px;
  width: 320px;
  background: #fff;
  color: var(--text);
  padding: 22px 24px;
  border-radius: var(--radius);
  z-index: 9999;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  border-top: 4px solid var(--blue);
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.cookie-banner.hidden {
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
}

.cookie-banner p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-mid);
  margin: 0 0 14px;
}

.cookie-banner a {
  color: var(--accent);
  text-decoration: underline;
  font-weight: 600;
}
.cookie-banner a:hover {
  color: var(--navy);
}

.cookie-buttons {
  display: flex;
  gap: 10px;
}

.cookie-accept,
.cookie-decline {
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  flex: 1;
  transition: var(--transition);
}

.cookie-accept {
  background: var(--accent);
  color: #fff;
}
.cookie-accept:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

.cookie-decline {
  background: #fff;
  color: var(--text-mid);
  border: 2px solid #d8dee6;
}
.cookie-decline:hover {
  background: var(--bg);
  border-color: var(--blue);
  transform: translateY(-1px);
}

/* ===========================
   CONTENT SECTIONS (shared)
   .content-section base rules are defined per-page in each
   page's own <style> block. This rule is centralised here so
   every page's last content-section is treated consistently
   without needing a local override.
=========================== */
.content-section:last-child {
  border-bottom: none;
  padding-bottom: 1.5rem;
}

/* ===========================
   ARTICLE IMAGES (shared)
   .article-lead-img: top-of-page lead image, after the H1
   and before the intro paragraph.
   .article-inline-img: lighter-weight variant for images
   placed next to specific content within a section.
   Centralised here since the pattern is shared across
   multiple advice article pages.
=========================== */
.article-lead-img {
  display: block;
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin: 0 0 1.75rem;
}

.article-inline-img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin: 1.25rem 0;
}

/* ===========================
   CONTENT DISCLAIMER (shared)
   Standing disclaimer shown on every /advice/ guide page, sitting
   directly above .content-meta. Kept visually muted/smaller since
   it's a content caveat, not page metadata like the last-updated
   date. Hand-duplicated per page, same propagation model as
   header/footer/cookie banner - see CLAUDE.md §4.
=========================== */
.content-disclaimer {
  background: #fff8ea;
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
  padding: 0.85rem 1.1rem;
  margin: 2rem 0 1.25rem;
}
.content-disclaimer p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-light);
}

/* ===========================
   CONTENT META / SHARE BUTTON (shared)
   .content-meta wraps the "Last updated" line and the native
   share button on guide pages so they sit on one row, wrapping
   on narrow screens. Centralised here since the pattern is
   shared across multiple advice article pages.
=========================== */
.content-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 0.25rem;
}

.content-meta .last-updated {
  margin: 0;
}

.share-btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 20px;
  border: 2px solid #d8dee6;
  background: #fff;
  color: var(--text-mid);
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: var(--transition);
}
.share-btn:hover {
  background: var(--bg);
  border-color: var(--blue);
  color: var(--blue);
}

/* ===========================
   RESPONSIVE
=========================== */
@media (max-width: 900px) {
  .insight-inner { grid-template-columns: 1fr; gap: 40px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .hero { padding: 70px 0 0; }
  .hero-inner { padding-bottom: 60px; }

  .trust-inner { gap: 20px; }
  .trust-item span { display: none; }

  .article-lead-img { height: 220px; }
  .article-inline-img { height: 180px; }

  .features, .guides, .insight, .cta-section { padding: 60px 0; }

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

@media (max-width: 480px) {
  .card-grid, .feature-grid { grid-template-columns: 1fr; }
  .hero-buttons { flex-direction: column; align-items: center; }
  .cookie-banner { left: 16px; right: 16px; width: auto; }
}