/* ─────────────────────────────────────────────────────────────
   Toegankelijkheidslaag (WCAG 2.2 AA / European Accessibility Act)

   Waarom een apart bestand: elke pagina heeft een eigen inline <style>-blok
   dat NA css/style.css komt en daardoor dezelfde selectors overschrijft. Dit
   bestand staat als laatste stylesheet in de <head>, zodat de correcties
   hieronder op alle 34 pagina's winnen zonder 34 inline blokken te bewerken.

   Het probleem dat hier vooral wordt opgelost: het logo-goud #B8893E haalt op
   de twee crèmekleuren van de site maar 2,74:1 (op #F5EFE3) en 2,93:1 (op
   #FBF7EC). Dat is te weinig voor tekst (4,5:1), en zelfs voor grote koppen
   (3:1). Voor goud ALS TEKST OP CRÈME gebruiken we daarom het al bestaande
   donkere huisstijlgoud --logo-gold-dk (#8B6529, 4,59:1 en 4,92:1). Goud op
   de donkerrode vlakken blijft ongemoeid, want daar is het wel leesbaar.
   ───────────────────────────────────────────────────────────── */

:root {
  --gold-tekst: var(--logo-gold-dk, #8B6529);   /* goud als tekst op crème */
  --gold-op-donker: #D4AD6A;                    /* goud als tekst op delft-deep, 6,1:1 */
}

/* ── Goud als tekst op crème ── */
.hero-welcome,
.intro-script .gold,
.loc-preview .section-title em,
.home-faq-inner h2 em,
.insta-strip .section-title em,
.loc-single-hero h1 em,
.loc-page-hero h1 em,
.loc-info-block a,
.loc-other-inner h2 em,
.faq-a a,
.menu-hero h1 em,
.menu-card-head .sub,
.menu-section-head .sub,
.menu-item .price,
.menu-item .tag,
.fotos-hero h1 em,
.team-head h2 em,
.team-grid figcaption,
.privacy-content a,
.res-hero h1 em,
.loc-pick-big .lp-script,
.sp-hero-eyebrow,
.sp-hero h1 em,
.sp-intro-text h2 em,
.sp-intro-quote cite,
.sp-gerechten-title h2 em,
.sp-gerecht-num,
.story-hero h1 em,
.tl-item .yr-script,
.sp-loc-card-name,
.sp-kennis-inner h2 em,
.menu-footer .gold-line,
#hm-bb-overlay .hm-bb-script {
  color: var(--gold-tekst);
}
/* "Prijzen incl. BTW" op de menukaart heeft de kleur in een style-attribuut. */
.menu-footer p[style*="logo-gold"] { color: var(--gold-tekst) !important; }

/* Plus-tekens van de uitklapvragen zijn een bedieningselement: 3:1 nodig. */
.home-faq-q::after,
.faq-q::after,
.sp-faq-q::after {
  color: var(--gold-tekst);
}

/* ── Knoppen met goud als achtergrond ── */
.nav-links a.nav-cta.active {
  background: var(--gold-tekst);
}
#hm-cookie-accept { background: var(--gold-tekst); }
#hm-cookie-accept:hover { background: var(--delft, #92341D); }

/* ── Links in lopende tekst: niet alleen op kleur te herkennen ── */
#hm-cookie-bar a {
  color: var(--gold-op-donker);
  text-decoration: underline;
}
.footer-bottom a,
.loc-info-block a,
.faq-a a,
.privacy-content a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* ── Footerkoppen: waren <h4> direct na <h2>'s (koppenvolgorde), nu <h2>
      met exact de oude opmaak ── */
.footer h2.footer-heading {
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--logo-cream);
  margin: 0 0 22px;
}

/* ── Taalwisselaar: groepje zonder eigen box, zodat de flex-opmaak van
      .nav-left gelijk blijft ── */
.lang-switch { display: contents; }

/* ── Skiplink: onzichtbaar tot hij focus krijgt ── */
.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 10000;
  padding: 12px 20px;
  background: var(--delft-deep, #5A1F0E);
  color: #F5EFE3;
  font-family: var(--f-ui, sans-serif);
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ── Zichtbare focus voor toetsenbordgebruikers ── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--delft, #92341D);
  outline-offset: 3px;
}
.footer a:focus-visible,
#hm-cookie-bar a:focus-visible,
#hm-cookie-bar button:focus-visible {
  outline-color: #F5EFE3;
}
main:focus { outline: none; }

/* Het grote "404" op de foutpagina is decoratie (aria-hidden) in een bijna
   onzichtbare tint. Als CSS-inhoud telt het niet als tekst, wat het ook niet is. */
.notfound-script[data-deco]::before { content: attr(data-deco); }
