/*
 * Klasse-equivalenten van ID-gebonden Oxygen-regels (oxygen-page-home.css).
 *
 * Oxygen stijlde elk herhaald item via een eigen ID (#div_block-54-11, #div_block-96-11, ...).
 * In Wagtail is het aantal items variabel, dus dezelfde declaraties staan hier op klassen.
 * Waarden zijn 1-op-1 overgenomen; wijzig ze alleen samen met een visuele controle.
 */

/* "Why Tuners Trust": kenmerkrij (#div_block-54-11, -96, -101, -106) */
.tf-feature-row { flex-direction: row; display: flex; align-items: flex-start; padding-top: 16px; padding-bottom: 16px; }
/* tekstkolom (#div_block-79-11, -98, -103, -108) */
.tf-feature-body { flex-direction: column; display: flex; text-align: left; gap: 10px; }
/* icoon (#fancy_icon-55-11 > svg) */
.tf-feature-icon > svg { width: var(--text-5xl); height: var(--text-5xl); }
/* titel (#text_block-56-11) */
.tf-feature-title { color: var(--placeholder-alt-color); }

/* Opsommingen met vinkje (#div_block-259-11 e.a.) */
.tf-check-row { flex-direction: row; display: flex; align-items: flex-start; padding-top: 8px; padding-bottom: 8px; }
.tf-check-body { flex-direction: column; display: flex; text-align: left; gap: 10px; }
.tf-check-icon { color: var(--primary-color); }
.tf-check-icon > svg { width: var(--text-xl); height: var(--text-xl); }

/* "How it works": rij met twee stappen (#div_block-580-11, -619) */
.tf-step-row { display: flex; align-items: center; justify-content: center; flex-direction: row; gap: 25px; }
/* stap (#div_block-594-11: 33.33%, #div_block-599-11: 33%) */
.tf-step { width: 33.33%; }
.tf-step-row > .tf-step:last-child { width: 33%; }
/* pijl tussen de stappen (#div_block-597-11, #fancy_icon-598-11 > svg) */
.tf-step-arrow { width: auto; }
.tf-step-arrow-icon > svg { width: 55px; height: 55px; }
/* groot achtergrondicoon (#fancy_icon-595-11) */
.tf-step-icon { color: rgba(244, 102, 0, 0.25); position: absolute; }
.tf-step-icon > svg { width: var(--text-9xl); height: var(--text-9xl); }

/*
 * Correctie t.o.v. het origineel: de vrijstaande auto's in de banner op /ecu-tuning-services/
 * (#image-458-46) en op /contact/ (#image-755-114) steken buiten het scherm uit, waardoor de
 * live site horizontaal scrollt. Afknippen op sectieniveau; het zichtbare beeld blijft gelijk.
 */
#section-6-46, #section-674-114 { overflow-x: clip; }

/*
 * Tekstpagina's (/terms/, /privacy/): koppen in de stijl van .terms-section-head uit
 * oxygen-universal.css (oranje, vet, 20px boven/onder). Het origineel toonde Terms als
 * doorlopende tekst zonder alinea's; hier krijgt elke regel uit de bron een eigen alinea.
 */
.tf-legal h2, .tf-legal h3 { color: var(--primary-color); font-weight: 700; padding-top: 20px; padding-bottom: 0; margin: 0 0 10px; font-size: var(--text-lg); line-height: 1.4; }
.tf-legal h3 { font-size: inherit; padding-top: 10px; }
.tf-legal > h2:first-child { padding-top: 0; }
.tf-legal p { margin: 0 0 10px; }
.tf-legal ul, .tf-legal ol { margin: 0 0 10px; padding-left: 2.4rem; }
.tf-legal li { margin-bottom: 4px; }
.tf-legal a { color: var(--primary-color); }
.tf-legal a:hover { text-decoration: underline; }

/*
 * Nieuwsbericht: "OUR NEWS" was in Oxygen een tweede <h1>; nu een div met dezelfde h1-regels uit
 * oxygen-universal.css (h1, h2, … { font-family: Orbitron; font-size: var(--h1); … }), zodat de
 * berichttitel de enige H1 is.
 */
.tf-h1 { font-family: 'Orbitron'; font-size: var(--h1); font-weight: var(--h-font-weight); line-height: var(--lh-h1); margin: 0; }
/* <article> rond het bericht zonder eigen box: de Oxygen-flexlayout blijft gelijk. */
.tf-article { display: contents; }
/* Zichtbare publicatiegegevens (gelijk aan de structured data). */
.tf-article-meta { font-size: var(--text-sm); opacity: 0.8; margin: 0 0 1.6rem; }
/* De Oxygen code-block-CSS van template 109 haalt opsommingstekens weg (li { list-style: none }); in de
   berichttekst zijn ze nodig voor leesbare lijsten. */
.tf-article-body ul { list-style: disc; padding-left: 2.4rem; margin: 0 0 1.2rem; }
.tf-article-body ol { list-style: decimal; padding-left: 2.4rem; margin: 0 0 1.2rem; }
.tf-article-body ul li, .tf-article-body ol li { list-style: inherit; }
.tf-article-body a, .tf-related a { color: var(--primary-color); }
/* Subkop (H3) in de berichttekst: zoals de kopregels van de WordPress-updatelijsten (vet, x-large in de
   lopende tekst, zonder witruimte eromheen). De import maakt van die regels een H3. */
.tf-article-body h3 { font-family: inherit; font-size: x-large; font-weight: 700; line-height: 1.61; margin: 0; }
.tf-article-body h3 + p { margin-top: 0; }
.tf-article-body p:has(+ h3) { margin-bottom: 0; }
.tf-article-intro { margin-bottom: 1.6rem; }
.tf-related { margin-top: 3.2rem; }
.tf-related h2 { font-size: var(--text-xl); color: var(--primary-color); margin-bottom: 0.8rem; }
.tf-related ul { list-style: none; padding: 0; margin: 0; }
.tf-related li { margin-bottom: 6px; }
/* Paginering nieuwsoverzicht (Oxygen hield de paginering verborgen; hier zichtbaar en klikbaar). */
.tf-pagination { margin-top: 3.2rem; text-align: center; }
.tf-pagination .page-numbers { display: inline-block; min-width: 3.6rem; padding: 0.6rem 1rem; margin: 0 0.4rem; color: #fff; border: 1px solid var(--primary-color); border-radius: 3px; }
.tf-pagination .page-numbers.current, .tf-pagination a.page-numbers:hover { background: var(--primary-color); }

/* Voertuigselector: foutmelding bij onbereikbare voertuigdatabase (nieuw; origineel gebruikte alert()). */
.ecars-tuning-error { color: #fff; background: rgba(206, 76, 76, 0.9); border-radius: 4px; padding: 8px 12px; margin: 12px auto 0; max-width: 720px; font-size: 1.4rem; }
.ecars-tuning-error[hidden] { display: none; }

/* Voertuigpagina /tuning-details/<slug>/: de voertuigtitel is de H1 (in de plugin een H2). De plugin-CSS
   stijlt #ecars-tuning-title op id; alleen de Oxygen-regelhoogte van h1/h2 verschilt. */
h1#ecars-tuning-title { line-height: var(--lh-h2); }
/* Melding bij een tijdelijke storing van de voertuigdatabase. */
.tf-tuning-unavailable { max-width: 760px; margin: 2rem auto; text-align: center; }
.tf-tuning-unavailable h2 { font-size: var(--h4); margin-bottom: 1rem; }
.tf-tuning-unavailable a { color: var(--primary-color); }
/* Lijst met voertuigpagina's op /tuning-details/ (beheerd in Snippets → Voertuigpagina's). */
.tf-vehicle-list { max-width: 1100px; margin: 3.2rem auto 0; }
.tf-vehicle-list h2 { font-size: var(--h4); margin-bottom: 1.2rem; }
.tf-vehicle-list h3 { font-family: inherit; font-size: var(--text-lg); font-weight: 700; margin: 1.6rem 0 0.6rem; }
.tf-vehicle-list ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px 24px; }
.tf-vehicle-list a { color: var(--primary-color); }

/* Terms/Privacy: zichtbare H1 boven de juridische tekst. */
.tf-legal-title { font-family: 'Orbitron', sans-serif; font-size: var(--h2); line-height: var(--lh-h2); margin: 0 0 1.6rem; width: 100%; }

/* Contrast oranje knoppen (WCAG 2.2, 1.4.3): witte tekst op #f46600 is 2,96:1, donkere tekst #111 is 6,07:1
   (#f66000: 5,9:1; #ff6600: 6,4:1). Zoals op de voertuigpagina blijft de oranje huiskleur; alleen de tekst
   wordt donker. Hover: lichter oranje (#ff7f24, 7,5:1) in plaats van het oorspronkelijke donkere oranje
   (#c15000 haalt met donkere tekst maar 3,97:1). Toetsenbordfocus: witte ring met donkere rand, zichtbaar op
   lichte en donkere achtergronden. Gemeten met tools/check_contrast.py. */
.btn-primary, .btn-primary:visited { color: #111; }
.btn-primary:hover { background-color: #ff7f24; color: #111; }
.btn-primary svg, .btn-primary .ct-fancy-icon { color: #111; fill: currentColor; }
.ecars-tuning-selector button#ecars-tuning-show-details { color: #111 !important; }
.ecars-tuning-selector button#ecars-tuning-show-details.ecars-btn-active:hover { background-color: #ff7f24 !important; }
.wpforms-submit { color: #111 !important; }
.wpforms-submit:hover { background-color: #ff7f24 !important; }
.tf-service-request .color-white { color: #111; }
.tf-service-request .hover-opacity-50:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.btn-primary:focus-visible, .tf-service-request:focus-visible, .wpforms-submit:focus-visible,
.ecars-tuning-selector button#ecars-tuning-show-details:focus-visible {
    outline: 3px solid #fff !important; outline-offset: 2px; box-shadow: 0 0 0 5px #111 !important;
}

/* Hero van /tuning-details/ (LCP): op smalle schermen een 800 px brede WebP (±50 KiB) in plaats van de 1590 px
   brede variant (216 KiB). Zelfde uitsnede (cover, 80% 53%); de preload in tuning_details_base.html gebruikt
   dezelfde media query, zodat de browser maar één variant laadt. Gemeten 29-10-2026, zie docs/review/productie-gereed.md. */
@media (max-width: 767px) {
    #section-6-164 {
        background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
            image-set(url("../img/uploads/2025/05/pexels-derice-jason-fahnkow-745824-4392657-800.ac59815939ec.webp") type("image/webp"),
                      url("../img/uploads/2025/05/pexels-derice-jason-fahnkow-745824-4392657-scaled.d618014a333c.jpg") type("image/jpeg"));
    }
}