/*
  BritainCarParks — "Soft & Friendly" body theme (Design C)
  ==========================================================
  Load AFTER bcp-design-system.css, bcp-feature-locate.css and any
  inline <style> block. Scoped to the page BODY only:
    - <main> on every content page
    - the homepage's .section / .reviews-strip blocks
  Header (.site-nav), hero (.page-hero-*, .trust-hero, .widget-strip,
  search widget), .stats-bar and footer are deliberately untouched.
*/
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800&display=swap');

/* ── Tokens (only inside the body scope, so header/hero/footer keep theirs) ── */
main, body > .section, body > .reviews-strip {
  --sf-ink:      #122238;   /* headings */
  --sf-text:     #454C57;   /* running text */
  --sf-muted:    #5E6672;
  --sf-link:     #0060DF;
  --sf-sky:      #9BD3EC;
  --sf-sky-pale: #E6F3FA;
  --sf-page:     #F6F8FF;
  --sf-tint:     #F4F7FE;
  --sf-line:     #E3E8F2;
  --sf-shadow:   0 9px 15px rgba(22,35,51,.07);
  --sf-radius:   8px;
  --sf-display:  'Nunito', 'Plus Jakarta Sans', system-ui, sans-serif;
  --charcoal: var(--sf-ink); --body-text: var(--sf-text); --slate: var(--sf-muted);
  --border: var(--sf-line); --arctic: var(--sf-tint);
  --r-sm: 6px; --r-md: 8px; --r-lg: 8px;
  --shadow-card: var(--sf-shadow);
  font-size: 1.125rem; line-height: 1.7;
}
main { display: block; background: var(--sf-page); color: var(--sf-text); }
body { background: var(--sf-page, #F6F8FF); }
main { padding-bottom: 24px; }

/* ── Type ── */
main :is(h1,h2,h3,h4),
body > .section :is(h1,h2,h3,h4),
body > .reviews-strip :is(h2,h3) { font-family: var(--sf-display); color: var(--sf-ink); }
main h2, main .content-body h2, main .feat-title, main .how-title,
body > .section .section-title {
  font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 800; line-height: 1.15; letter-spacing: -.01em;
}
main h3 { font-size: 1.4rem; font-weight: 700; line-height: 1.25; }
main h4 { font-size: 1.15rem; font-weight: 700; }
main .content-body p, main .content-body li { font-size: 1.125rem; line-height: 1.8; }
main .content-body h3 { margin: 28px 0 10px; }
main strong { color: var(--sf-ink); }
main a:not([class]) { color: var(--sf-link); text-decoration: underline; text-underline-offset: 2px; }
main .eyebrow, main .feat-eyebrow, main .how-eyebrow, body > .section .eyebrow {
  display: inline-block; background: var(--sf-sky-pale); color: #1E3F6B;
  padding: 4px 12px; border-radius: 999px; font-size: .85rem; font-weight: 600;
  text-transform: none; letter-spacing: 0;
}

/* Minimum readable sizes for small components */
main .extractive-answer, main .faq-answer p { font-size: 1.0625rem; line-height: 1.75; }
main :is(.ic-card p, .feature-item.fx p, .gtk-item p, .callout p, .info-box p,
  .price-highlight p, .process-box p, .step p, .card p) { font-size: 1rem; line-height: 1.6; }
main :is(.ic-card strong, .feature-item.fx strong) { font-size: 1.05rem; }
main .data-table { font-size: 1rem; }
main .data-table td { padding: 14px 16px; }
main .data-table th { letter-spacing: 0; font-size: .95rem; font-family: var(--sf-display); }
main .badge { white-space: nowrap; border-radius: 999px; }
main .badge-navy { background: var(--sf-sky-pale); }
main .go-card .go-meta, main .feat-meta { font-size: .9rem; }

/* ── Long-form content sits in white cards on the pale page ── */
main .content-layout { gap: 32px; grid-template-columns: minmax(0,1fr) 290px; }
main .content-body > section,
main .content-body:not(:has(> section)),
main .content-body:has(> h2) {
  background: #fff; border-radius: var(--sf-radius); box-shadow: var(--sf-shadow);
  padding: 36px 40px; margin-bottom: 24px;
}
main .content-body > section { scroll-margin-top: 90px; }
main .content-body section h2,
main .content-body section h2:first-of-type,
main .content-body > h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; margin-bottom: 18px; }
main .content-body:not(:has(> section)) h2,
main .content-body:has(> h2) h2 { border-top: none; padding-top: 0; margin-top: 44px; }
main .content-body:has(> h2) > h2:first-child { margin-top: 0; }
main .content-body:has(> h2) > section { background: none; box-shadow: none; padding: 0; margin: 0; }
main .feat-section { background: #fff; border-radius: var(--sf-radius); box-shadow: var(--sf-shadow); padding: 36px 40px; }

/* ── Cards ── */
main :is(.card, .feat-card, .go-card, .contact-card, .blog-card, .cf-panel, .mb-panel, .process-step, .terminal-card),
body > .section :is(.card, .airport-tile) {
  border-radius: var(--sf-radius); border: 1px solid var(--sf-line); box-shadow: var(--sf-shadow); background: #fff;
}
main .feat-card.popular { transform: none; border: 2px solid var(--sf-ink); }
main .feat-ribbon { background: var(--sf-ink); color: #fff; }
main .feat-meta { text-transform: none; letter-spacing: 0; font-weight: 600; color: #1E3F6B; }
main .feat-name { font-size: 1.3rem; }
main .feat-list li { font-size: 1rem; }
main .feat-list li svg { color: #1F9D55; }
main .feat-btn { border-radius: 6px; }
main .feat-btn.outline { border: 0; color: var(--sf-link); text-align: left; padding: 8px 0; }
main .feat-btn.outline::after { content: " \2192"; }
main .btn { border-radius: 6px; }
main .ic-card { border: none; background: var(--sf-tint); border-radius: var(--sf-radius); padding: 20px; }
main .ic-card .ic { background: var(--sf-sky-pale); color: var(--sf-ink); }
main :is(.feature-item svg, .go-pins svg, .callout .ci, .split .process-box h4 svg, .security-checklist li svg) { color: #1E3F6B; }
main .go-card img, main .feat-logo { border-radius: 6px; }
main .tile { border-radius: var(--sf-radius); background: var(--sf-sky-pale); }

/* Inline-styled "recommended" rows (service / discount pages) */
main .feat-section div[style*="flex-direction:column"] > div[style*="border"] { border: 1px solid var(--sf-line) !important; border-radius: 8px !important; box-shadow: var(--sf-shadow); background: #fff; }
main .feat-section div[style*="flex-direction:column"] > div[style*="var(--amber)"] { border: 2px solid var(--sf-ink) !important; }
main .feat-section span[style*="background:var(--amber)"] { background: var(--sf-ink) !important; color: #fff !important; }

/* ── Answer boxes & callouts ── */
main .extractive-answer { background: var(--sf-sky-pale); border-left: none; border-radius: var(--sf-radius); padding: 20px 24px; color: var(--sf-ink); }
main .page-lead { border-left: none; padding-left: 0; font-size: 1.3rem; line-height: 1.55; font-family: var(--sf-display); font-weight: 600; color: var(--sf-ink); }
main :is(.price-highlight, .info-box, .worth-it-box, .callout, .guide-cta, .contact-box, .rep-box) { background: var(--sf-tint); border: none; border-radius: var(--sf-radius); }
main .callout.warn { background: #FFF1EF; }

/* ── Tables ── */
main .table-wrap, main #car-park-comparison, main .compare-wrap { border: 1px solid var(--sf-line); border-radius: var(--sf-radius); }
main .data-table th, main .cmp-table thead th { font-family: var(--sf-display); }
main .data-table tr:nth-child(even) td { background: #FAFBFE; }

/* ── Sidebar ── */
main .toc-card, main .sidebar-related { background: #fff; border: none; box-shadow: var(--sf-shadow); border-radius: var(--sf-radius); }
main .toc-card-heading, main .sidebar-related h4 { text-transform: none; letter-spacing: 0; font-size: 1rem; font-weight: 700; color: var(--sf-ink); font-family: var(--sf-display); }
main .toc-link::before { display: none; }
main .toc-link { color: var(--sf-link); padding: 7px 4px; font-size: .95rem; }
main .toc-link::after { content: " \2192"; }
main .sidebar-contact { border-radius: var(--sf-radius); }
main .sidebar-image { border-radius: var(--sf-radius) !important; }
main .toc-mobile { background: #fff; border: none; box-shadow: var(--sf-shadow); border-radius: var(--sf-radius); }

/* ── FAQ: white rounded boxes ── */
main .faq-item, main .faq-item:first-child,
body > .section .faq-item, body > .section .faq-item:first-child {
  background: #fff; border: 1px solid var(--sf-line); border-radius: var(--sf-radius); margin-bottom: 12px; padding: 0 24px;
}
main .faq-question, body > .section .faq-question { font-family: var(--sf-display); font-size: 1.1rem; font-weight: 700; }
main .faq-icon, body > .section .faq-icon { background: var(--sf-sky-pale); }

/* ── Trust stats (reviews / about pages) ── */
main .trust-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin: 20px 0 32px; }
main .trust-stat { background: var(--sf-sky-pale); border-radius: var(--sf-radius); padding: 18px 12px; text-align: center; display: flex; flex-direction: column; gap: 4px; }
main .trust-stat .num { font-family: var(--sf-display); font-size: 1.75rem; font-weight: 800; color: var(--sf-ink); line-height: 1.1; }
main .trust-stat .lbl { font-size: .9rem; color: var(--sf-muted); }
@media (max-width: 640px) { main .trust-stat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ── Form panels keep their compact headings ── */
main .content-body :is(.mb-panel, .cf-panel) h2 { font-size: 1.35rem; margin: 0 0 20px; }

/* ── Operator links strip ── */
main .op-feature { background: transparent; border-top: none; }
main .op-feature-list li a { border-radius: 999px; color: var(--sf-link); }

/* ── Homepage content sections ── */
body > .section { padding: 72px 0; }
body > .section.section-bg { background: #fff; }
body > .section .section-title { font-size: clamp(2rem, 3.5vw, 2.75rem); }
body > .section .section-subtitle { font-size: 1.0625rem; }
body > .section .airport-tile .name { font-size: .95rem; }
body > .section .airport-tile .from { color: var(--sf-link); font-size: .85rem; }
body > .section .service-card { border-top: 6px solid var(--sf-sky); }
body > .section .card p { font-size: 1rem; }
body > .section .step-icon { background: var(--sf-sky); color: var(--sf-ink); box-shadow: 0 0 0 6px var(--sf-page); }
body > .section .step p { font-size: 1rem; }
body > .reviews-strip .review-text { font-size: 1rem; }
body > .reviews-strip .reviews-heading span { color: var(--sf-sky); }
body > .reviews-strip .reviews-heading { color: #fff; }
body > .reviews-strip .review-card { border-radius: var(--sf-radius); }

/* ── Responsive ── */
@media (max-width: 900px) {
  main .content-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  main .content-body > section,
  main .content-body:not(:has(> section)),
  main .content-body:has(> h2),
  main .feat-section { padding: 24px 20px; }
  main h2, main .content-body h2, main .feat-title { font-size: 1.6rem; }
  main .page-lead { font-size: 1.15rem; }
  main .extractive-answer { padding: 14px 16px; font-size: 1rem; }
  main .content-body p, main .content-body li { font-size: 1.0625rem; }
  main .content-layout { gap: 20px; }
  main .faq-item, main .faq-item:first-child { padding: 0 16px; }
  body > .section { padding: 48px 0; }
}

/* ── Featured car park cards: name links to the car park page ── */
main a.cp-link { color: inherit; text-decoration: none; }
main a.cp-link:hover, main a.cp-link:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* ── "View & book" buttons jump to the quote form; clear the sticky header ── */
#quote { scroll-margin-top: 72px; }

/* ── Blog posts: readable intro line on the dark guide hero, and real bullets in article lists ── */
.guide-hero .hero-subtitle { color: rgba(255,255,255,.8); font-size: 1.05rem; margin-top: 8px; max-width: 720px; }
main .content-body ul:not([class]) { list-style: disc; padding-left: 1.4em; margin: 0 0 18px; }
main .content-body ol:not([class]) { list-style: decimal; padding-left: 1.5em; margin: 0 0 18px; }
main .content-body ul:not([class]) li, main .content-body ol:not([class]) li { margin-bottom: 6px; }
main .content-body img { max-width: 100%; height: auto; border-radius: 12px; margin: 0 0 20px; }