/* dark-inner.css — Dark theme override for /cars, /areas, /blog
   Loaded AFTER each page's inline styles to flip the light palette to dark
   while preserving layout, spacing, and card structure.
   Deploy: 2026-05-20 — Σάκης (style consistency pass) */

/* ---- Page containers ---- */
.vehicle-page,
.area-page,
.blog-page {
    background: var(--black);
    color: var(--white);
}

/* ---- Hero sections — already dark via overlay; only ensure text is light ---- */
.cars-hero,
.area-hero,
.blog-hero,
.article-hero {
    color: var(--white);
}

/* ---- Cards (white → dark surface with gold-tinted border) ---- */
.car-card,
.area-card,
.blog-card,
.highlight-card,
.nearby-card,
.area-rec-card,
.rec-card,
.vehicle-photo,
.vehicle-spec,
.area-faq details {
    background: var(--dark);
    border-color: rgba(212, 175, 55, 0.2);
    color: var(--white);
}

.car-card *,
.area-card *,
.blog-card *,
.highlight-card *,
.nearby-card *,
.area-rec-card *,
.rec-card *,
.vehicle-spec * {
    color: inherit;
}

/* Card hover: gold-tinted glow instead of dark drop shadow */
.car-card:hover,
.area-card:hover,
.blog-card:hover,
.highlight-card:hover,
.nearby-card:hover,
.area-rec-card:hover,
.rec-card:hover {
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.15);
    border-color: rgba(212, 175, 55, 0.45);
}

/* ---- Section backgrounds ---- */
/* Cream alt sections → slightly raised dark */
.vehicle-bestfor,
.vehicle-pricing,
.vehicle-final-cta,
.area-highlights,
.area-faq,
.article-related {
    background: var(--darker);
    color: var(--white);
}

/* Pure white body sections → continuous black */
.vehicle-body,
.vehicle-recs,
.area-intro,
.area-distances,
.area-nearby,
.area-recs,
.article-body {
    background: var(--black);
    color: var(--white);
}

/* ---- Article body typography ---- */
.article-body p,
.article-body li,
.article-body td {
    color: #d0d0d0;
}

.article-body h1,
.article-body h2,
.article-body h3,
.article-body strong {
    color: var(--white);
}

.article-body a {
    color: var(--gold);
}

/* ---- Breadcrumbs ---- */
.vehicle-breadcrumbs,
.area-breadcrumbs,
.article-breadcrumbs {
    background: var(--black) !important;
    color: var(--silver) !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2) !important;
}

.vehicle-breadcrumbs a,
.area-breadcrumbs a,
.article-breadcrumbs a {
    color: var(--silver);
}

.vehicle-breadcrumbs a:hover,
.area-breadcrumbs a:hover,
.article-breadcrumbs a:hover {
    color: var(--gold);
}

/* ---- Buttons ---- */
/* Primary (gold-filled): black text matches home hero CTA */
.vehicle-cta:not(.secondary),
.area-cta:not(.secondary),
.article-cta-btn {
    background: var(--gold-light);
    color: var(--black) !important;
}

/* Secondary (outlined): white border + white text (was navy/navy) */
.vehicle-cta.secondary,
.area-cta.secondary {
    background: transparent;
    color: var(--white) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
}

.vehicle-cta.secondary:hover,
.area-cta.secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--white) !important;
}

/* ---- Image placeholders that used cream/navy ---- */
.car-card-img,
.blog-card-img,
.area-rec-img,
.area-card-img,
.rec-card-img {
    background-color: var(--darker);
}

/* ---- Tables ---- */
.price-table,
.distance-table {
    background: var(--dark);
    color: var(--white);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.price-table th,
.distance-table th {
    background: var(--black) !important;
    color: var(--gold) !important;
}

.price-table td,
.distance-table td {
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--white);
}

/* ---- Final CTA sections (were #0a1f3d navy) ---- */
.area-final,
.article-cta {
    background: var(--black);
    border-top: 1px solid rgba(212, 175, 55, 0.25);
    color: var(--white);
}

/* ---- Inline-styled blog article elements (legacy hardcoded hex) ---- */
/* TLDR card */
.tldr-card[style] {
    background: var(--dark) !important;
    color: var(--white) !important;
    border-left-color: var(--gold) !important;
}

/* TOC */
.article-toc[style] {
    background: var(--dark) !important;
    border-color: rgba(212, 175, 55, 0.2) !important;
    color: var(--white) !important;
}
.article-toc[style] a {
    color: var(--silver);
}
.article-toc[style] a:hover {
    color: var(--gold);
}

/* Generic inline-styled div boxes (4-quarter grid, info cards) */
.article-body div[style] {
    background: var(--dark) !important;
    border-color: rgba(212, 175, 55, 0.2) !important;
    color: var(--white) !important;
}
.article-body div[style] strong[style] {
    color: var(--gold) !important;
}
.article-body div[style] p,
.article-body div[style] p[style] {
    color: var(--silver) !important;
}

/* Inline-styled tables inside articles */
.article-body table[style] thead tr[style] {
    background: var(--black) !important;
    color: var(--gold) !important;
}
.article-body table[style] thead th[style] {
    color: inherit !important;
}

/* The "Ready to book?" navy footer paragraph in articles */
.article-body p[style*="#0a1f3d"] {
    background: var(--black) !important;
    border: 1px solid rgba(212, 175, 55, 0.4) !important;
    color: var(--white) !important;
}

/* ---- Areas page final CTA (was navy block, keep dark) ---- */
.area-final h2,
.article-cta h2 {
    color: var(--white);
}
.area-final p,
.article-cta p {
    color: var(--silver);
}

/* ============================================================
   PATCH v2 — Catch all the navy text + body text colors
   ============================================================ */

/* Headings: section titles, card names, body h2/h3 (were #0a1f3d navy) */
.cars-section-title,
.vehicle-headline h1,
.vehicle-body h2,
.vehicle-bestfor h3,
.vehicle-pricing h2,
.vehicle-recs h2,
.vehicle-final-cta h2,
.area-intro h2,
.area-highlights h2,
.area-distances h2,
.area-faq h2,
.area-nearby-inner > h2,
.area-recs h2,
.highlight-card h3,
.nearby-card h3,
.car-card-name,
.area-card-name,
.blog-card-title,
.rec-card-name,
.area-rec-name,
.article-body-inner h2,
.article-body-inner h3,
.article-body-inner p.lead {
    color: var(--white) !important;
}

/* Card-name gold "(2026)" / suffix highlight (was #b3811c dark gold) */
.vehicle-headline h1 span,
.area-final h2 span,
.cars-hero h1 span,
.area-hero h1 span,
.blog-hero h1 span,
.article-hero h1 span {
    color: var(--gold) !important;
}

/* "From €30 / day" — price line was navy, strong was dark gold */
.car-card-price {
    color: var(--silver) !important;
}
.car-card-price strong {
    color: var(--gold) !important;
}

/* Card category "ECONOMY · MANUAL / AUTOMATIC" was #5a5a5a */
.car-card-cat,
.blog-card-meta {
    color: var(--silver) !important;
}

/* Card "VIEW DETAILS" / "READ AREA GUIDE" / "READ ARTICLE" links */
.car-card-link,
.area-card-link,
.blog-card-link,
.rec-card-link,
.area-rec-link {
    color: var(--white) !important;
}
.car-card:hover .car-card-link,
.area-card:hover .area-card-link,
.blog-card:hover .blog-card-link,
.rec-card:hover .rec-card-link,
.area-rec:hover .area-rec-link {
    color: var(--gold) !important;
}

/* "4 seats · 1 luggage · Petrol" specs (was #666) */
.car-card-specs {
    color: var(--silver) !important;
}

/* Card body text + excerpt */
.blog-card-excerpt,
.rec-card-why,
.area-rec-why {
    color: var(--silver) !important;
}

/* Body paragraphs across all inner pages (were #2c2c2c / #555 / #5a5a5a) */
.vehicle-body p,
.vehicle-tagline,
.area-intro p,
.highlight-card p,
.area-distances .sub,
.area-nearby-inner > p.sub,
.vehicle-pricing .sub,
.vehicle-final-cta p,
.pricing-note,
.area-faq .ans,
.nearby-card p,
.article-body-inner,
.article-body-inner p {
    color: #d0d0d0 !important;
}

/* Bestfor checklist items (were #2c2c2c) */
.vehicle-bestfor li {
    color: #d0d0d0 !important;
}

/* Vehicle spec card inner (was #2c2c2c on #fff) */
.vehicle-spec {
    color: var(--white) !important;
}

/* FAQ summary clickable (was #0a1f3d navy) */
.area-faq summary,
.article-body-inner details summary {
    color: var(--white) !important;
}

/* Breadcrumb links (current page span stays gold, links become silver→gold) */
.vehicle-breadcrumbs a,
.area-breadcrumbs a,
.article-breadcrumbs a {
    color: var(--silver) !important;
}

/* Nearby-link "Visit guide →" (was dark gold #8b6516) */
.nearby-card .nearby-link {
    color: var(--gold) !important;
}

/* Distance table secondary columns */
.distance-table td:first-child {
    color: var(--white) !important;
}
.distance-table td:nth-child(2),
.distance-table td:nth-child(3) {
    color: var(--silver) !important;
}
.price-table .price {
    color: var(--gold) !important;
}

/* Inline-styled blog content — strong dark-gold accents → bright gold */
.article-body-inner strong[style*="#8b6516"],
.article-body-inner strong[style*="#0a1f3d"] {
    color: var(--gold) !important;
}

/* Inline-styled blog FAQ details summary (was navy) */
.article-body-inner details[style] summary[style] {
    color: var(--white) !important;
}

/* Hero overlay safety: ensure hero h1/h2/p stay light */
.cars-hero h1,
.area-hero h1,
.blog-hero h1,
.article-hero h1,
.cars-hero p,
.area-hero p,
.blog-hero p,
.article-hero p,
.cars-hero h2,
.area-hero h2,
.blog-hero h2,
.article-hero h2 {
    color: var(--white) !important;
}

/* Breadcrumb current-page <strong> with inline style="color:#0a1f3d" — beat inline */
.vehicle-breadcrumbs strong[style],
.area-breadcrumbs strong[style],
.article-breadcrumbs strong[style] {
    color: var(--gold) !important;
}

/* "Available areas" / similar gold-underlined section title on /areas */
.areas-list-title,
.area-page .areas-list h2 {
    color: var(--white) !important;
}