/*
* Route Tas-met-attributen -- .ss-route-tas
*
* Per-route ACF-blok dat alleen rendert bij heeft_tas=true.
* Verschijnt in main-col tussen pull-quote en "Het verhaal van deze route".
* 5 routes hebben tas (Freules/Hoonhorst/Kernhem/Ootmarsum/Winterswijk).
*
* Spec: dev/docs/tas-attributen-feature-spec-2026-05-16.md
*
* Tokens (bron: tokens.css):
* --color-bg #FFFFFF Pill-bg (contrast op perkament-card)
* --color-bg-perkament #F5F0E8 Card-bg
* --color-verfstreep #D4763A 4px accent-bar links (matcht nieuws-hero)
* --color-primary #013440 Titel + icoon + pill-tekst (deep-teal)
* --color-text #2D2D2D Body-tekst + meta-regel (WCAG-fix, zie hieronder)
* --color-border #E5E1D8 Pill-border + card-border
* --font-heading Playfair -- titel
* --font-body Lato -- intro + pills + meta
* --font-size-h3/h3-desktop 22px/28px
* --font-size-base/lg 16px/18px
* --radius-lg Card-corners
* --radius-full 9999px pill-shape
* --space-sm/md/lg/xl Spacing
*
* WCAG-contrast (gemeten via WebAIM Contrast Checker API 2026-05-16, Pixel R-09 lesson):
* #013440 op #FFFFFF = 13.4:1 AA + AAA pass (pill-tekst)
* #013440 op #F5F0E8 = 11.8:1 AA + AAA pass (titel + icoon)
* #2D2D2D op #F5F0E8 = 12.1:1 AA + AAA pass (body + meta)
*
* AFWIJKING VAN PIXEL-SPEC sec.3.3: meta-paragraph color is --color-text (#2D2D2D)
* in plaats van --color-text-muted (#6B7280). Gemeten ratio #6B7280 op #F5F0E8 =
* 4.26:1 -- onder de AA-drempel (4.5:1) voor normal text. Pixel-spec sec.AC-13
* eist ">=4.5:1" voor de meta-regel; --color-text-muted haalt dat niet. Pixel
* R-09 lesson: tool-meting wint van schatting. --color-text geeft 12.1:1 (PASS)
* en behoudt de visuele "secundair-onder-pills"-hierarchie via kleiner font-size
* (13px/14px) + geen border + geen achtergrond. De meta-label blijft als-spec
* --color-text (was al PASS).
*
* AC-13 verifiering: alle 3 spec-paren PASS, plus de meta-fix bovenstaand.
*
* Geen !important. Geen entrance-animaties. prefers-reduced-motion: geen change
* nodig (er staan geen transitions of animations).
*/
/* =============================================================================
SECTIE -- vertical rhythm in main-col
============================================================================= */
.ss-route-tas {
margin-block: 32px;
}
@media (min-width: 1024px) {
.ss-route-tas {
margin-block: 40px;
}
}
/* =============================================================================
INNER CARD met verfstreep-anchor links (matcht nieuws-hero pattern)
Pixel-spec sec.3.2 anatomy: bg-perkament + 4px verfstreep-accent links,
border + radius. Padding-left extra zodat tekst niet over de streep loopt.
============================================================================= */
.ss-route-tas__inner {
position: relative;
background-color: var(--color-bg-perkament);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-lg) var(--space-lg) var(--space-lg) calc(var(--space-lg) + 8px);
}
@media (min-width: 1024px) {
.ss-route-tas__inner {
padding: var(--space-xl) var(--space-xl) var(--space-xl) calc(var(--space-xl) + 8px);
}
}
/* Verfstreep-accent: 4px breed, hele card-hoogte, links anker.
border-radius matcht inner-card aan de linkse zijde. */
.ss-route-tas__inner::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background-color: var(--color-verfstreep);
border-top-left-radius: var(--radius-lg);
border-bottom-left-radius: var(--radius-lg);
}
/* =============================================================================
ICON + TITEL
Webby's render-block plaatst .ss-route-tas__icon en .ss-route-tas__title
direct als siblings binnen .ss-route-tas__inner -- geen wrapper-div.
Pixel-spec sec.2.3 had nog een .ss-route-tas__header flex-wrapper, maar
Webby heeft die in implementatie weggelaten. CSS-rule daarvoor was dood
en is verwijderd (Checker cleanup 2026-05-16).
============================================================================= */
.ss-route-tas__icon {
color: var(--color-primary); /* #013440 -- deep-teal */
flex-shrink: 0;
display: inline-flex;
align-items: center;
}
.ss-route-tas__icon svg {
display: block; /* voorkomt inline-baseline whitespace */
width: 26px;
height: 26px;
}
@media (min-width: 1024px) {
.ss-route-tas__icon svg {
width: 28px;
height: 28px;
}
}
/* Specificity-bump met `.ss-premium-cpt`-prefix (preventief).
.ss-premium-cpt h1, h2, h3 { color:#2D2D2D; font-family:Playfair } (0,1,1)
en .ss-premium-cpt h2 { font-size:28/40px; font-weight:600 } (0,1,1) zouden
anders winnen van een platte .ss-route-tas__title (0,1,0) -- title is een
. Met prefix (0,2,0) winnen onze deep-teal color + h3-size-tokens.
Les uit USP-rij specificity-bump 2026-05-16 (zelfde dag). */
.ss-premium-cpt .ss-route-tas__title {
font-family: var(--font-heading); /* Playfair Display */
font-size: var(--font-size-h3); /* 22px mobile */
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
color: var(--color-primary); /* #013440 -- 11.8:1 op perkament */
margin: 0;
}
@media (min-width: 1024px) {
.ss-premium-cpt .ss-route-tas__title {
font-size: var(--font-size-h3-desktop); /* 28px */
}
}
/* =============================================================================
INTRO TEKST (Yvette's vloeiende beschrijving)
wpautop levert
-tags vanuit ACF -- styling op de intro-paragraphs.
============================================================================= */
.ss-route-tas__intro {
font-family: var(--font-body);
font-size: var(--font-size-base); /* 16px */
line-height: var(--line-height-relaxed); /* 1.7 */
color: var(--color-text); /* #2D2D2D -- 12.1:1 op perkament */
margin-bottom: var(--space-md);
}
.ss-route-tas__intro p {
margin: 0 0 var(--space-sm) 0;
}
.ss-route-tas__intro p:last-child {
margin-bottom: 0;
}
@media (min-width: 1024px) {
.ss-route-tas__intro {
font-size: var(--font-size-lg); /* 18px */
}
}
/* =============================================================================
PILLS (attributen) -- statisch, geen interaction-affordance (anti-AI Pixel sec.8)
Wit op perkament-card voor contrast. Deep-teal tekst = 13.4:1 (AAA pass).
Geen cursor:pointer, geen hover, geen focus-ring -- de pills zijn pure
visuele samenvattingen, niet klikbaar.
============================================================================= */
.ss-route-tas__pills {
list-style: none;
margin: 0 0 var(--space-md) 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.ss-route-tas__pill {
display: inline-flex;
align-items: center;
padding: 6px 12px;
background-color: var(--color-bg); /* #FFFFFF -- contrast op perkament-card */
border: 1px solid var(--color-border);
border-radius: var(--radius-full); /* 9999px pill-shape */
font-family: var(--font-body);
font-size: 13px;
font-weight: var(--font-weight-semibold);
line-height: 1.2;
color: var(--color-primary); /* #013440 -- 13.4:1 op wit */
}
@media (min-width: 1024px) {
.ss-route-tas__pill {
padding: 6px 14px;
font-size: 14px;
}
}
/* =============================================================================
META (ophaalpunt + kosten) -- klein onder pills
Body-color is --color-text (NIET --color-text-muted): WCAG-fix zie file-header.
De visuele "secundair"-hierarchie wordt geleverd door kleiner font-size +
geen background + geen border. Meta-label = bold zelfde color (al PASS).
============================================================================= */
.ss-route-tas__meta {
font-family: var(--font-body);
font-size: 13px;
line-height: 1.5;
color: var(--color-text); /* WCAG-fix: #2D2D2D ipv #6B7280 (4.26:1 FAIL) */
margin: 0;
}
/* .ss-route-tas__meta-label en .ss-route-tas__meta-sep stonden in Pixel-spec
maar Webby's render-block gebruikt ze niet -- dode CSS verwijderd (Checker
cleanup 2026-05-16). Bij vervolg-iteratie staan ze in git-historie van deze
file (commit pre-cleanup). */
@media (min-width: 1024px) {
.ss-route-tas__meta {
font-size: 14px;
}
}