/* Lettertypen: zelf gehost als @font-face, zodat de pagina niet op een extern stijlblad van Google wacht */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/publicsans/v21/ijwRs572Xtc6ZYQws9YVwnNGfJ4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/publicsans/v21/ijwRs572Xtc6ZYQws9YVwnNIfJ7Cww.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/spacegrotesk/v22/V8mDoQDjQSkFtoMM3T6r8E7mPbF4Cw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/spacegrotesk/v22/V8mDoQDjQSkFtoMM3T6r8E7mPb94C-s0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/*
  site.css -- basis-stylesheet: kleurtokens, reset, typografie, containers,
  knoppen en generieke layout-hulpklassen die op meerdere pagina's/onderdelen
  worden hergebruikt.

  Kleur aanpassen? Doe dat HIER (de --color-* variabelen), nooit door een
  hex-waarde ergens anders in een los bestand te overschrijven -- dat leidt
  precies tot de dubbele waarden die we willen vermijden. Componenten
  (assets/css/components/*.css) en paginaspecifieke stijlen
  (assets/css/pages/*.css) mogen alleen via var(--color-...) naar kleur
  verwijzen.
*/

:root {
  --color-blue: #1055C8;
  --color-blue-tint: #EAF1FC;
  --color-navy: #1F2328;
  --color-grey-body: #444B54;
  --color-grey-light-bg: #F8F9FA;
  --color-border: #DADCE0;
  --color-footer-grey: #5F6368;
  --color-purple: #4C1D95;
  --color-purple-dark: #3B1466;
  --color-green-call: #188038;
  --color-green-call-hover: #146C2E;
  --color-white: #ffffff;

  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Public Sans', system-ui, sans-serif;

  --container-max-width: 1180px;
}

/* Reset & basistypografie */
* { box-sizing: border-box; }
html { overflow-x: hidden; }
body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--font-body);
  color: var(--color-navy);
  background: var(--color-white);
}
h1, h2, h3 {
  font-family: var(--font-display);
  margin: 0;
  letter-spacing: -0.01em;
}
a { color: var(--color-navy); text-decoration: none; }
a:hover { color: var(--color-blue); }

.container { max-width: var(--container-max-width); margin: 0 auto; padding: 0 40px; }

.eyebrow {
  font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-blue);
}

/* Knoppen */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px; border-radius: 10px; font-weight: 700; font-size: 15px;
  white-space: nowrap; background: var(--color-blue); color: var(--color-white);
}
.btn-primary:hover { color: var(--color-white); }

.btn-book {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 14px 26px;

  border-radius: 10px;

  font-weight: 700;
  font-size: 15px;

  white-space: nowrap;

  background: var(--color-blue);
  color: var(--color-white);
}

.btn-book:hover {
  background: #0C46A8;
  color: var(--color-white);
}
.btn-call {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px; border-radius: 10px; font-weight: 700; font-size: 15px;
  white-space: nowrap; background: var(--color-green-call); color: var(--color-white);
}
.btn-call:hover { background: var(--color-green-call-hover); color: var(--color-white); }
button.btn-call { font-family: inherit; cursor: pointer; }

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px; border-radius: 10px; font-weight: 700; font-size: 15px;
  border: 1.5px solid #d8e2ea; color: var(--color-navy); white-space: nowrap;
}
button.btn-secondary, button.btn-book { font-family: inherit; cursor: pointer; }
button.btn-secondary { background: var(--color-white); }

/* Generieke UI-elementen */
.pill {
  display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--color-navy); background: #f3f8fa;
  border: 1px solid #e3edf1;
}
.card { border: 1px solid var(--color-border); border-radius: 16px; padding: 28px; }
.step-num {
  width: 34px; height: 34px; border-radius: 999px; display: flex; align-items: center;
  justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 15px;
  color: var(--color-white); background: var(--color-blue); flex-shrink: 0;
}

/* Toegankelijkheid */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link:focus {
  position: fixed; top: 12px; left: 12px; width: auto; height: auto; clip: auto;
  z-index: 999; background: var(--color-blue); color: var(--color-white); padding: 12px 20px;
  border-radius: 8px; font-weight: 700; font-size: 14px;
}
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
  outline: 2.5px solid var(--color-blue); outline-offset: 2px; border-radius: 4px;
}

/* Overige gedeelde hulpklassen */
.footer-link-btn {
  font-family: inherit; font-size: 14px; color: var(--color-footer-grey); background: none;
  border: 0; padding: 0; cursor: pointer; text-decoration: none;
}
.footer-link-btn:hover { color: var(--color-blue); }

/* Generieke grid/layout-hulpklassen, gebruikt op veel verschillende pagina's
   (niet aan één component gebonden -- vandaar hier en niet in components/) */
@media (max-width: 960px) {
  .container { padding: 0 24px; }
  .hero-grid, .two-col { grid-template-columns: 1fr !important; gap: 40px !important; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  h1 { font-size: 32px !important; }
}
@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; }
  .container { padding: 0 20px; }
  h1 { font-size: 27px !important; }
  h2 { font-size: 22px !important; }
}

/* =========================================================
   COOKIE MELDING ALTIJD BOVEN MOBIELE ACTIEBALK
   ========================================================= */

.cookie-banner,
.cookie-consent,
#cookie-banner,
#cookie-consent {
  position: fixed !important;
  z-index: 20000 !important;
}

/* Eventuele donkere achtergrond van cookievenster */
.cookie-banner__backdrop,
.cookie-consent__backdrop,
.cookie-overlay {
  position: fixed !important;
  z-index: 19999 !important;
}

/* Mobiele actieknoppen blijven daaronder */
.mobile-action-bar {
  z-index: 900 !important;
}
/* =========================================================
   COOKIE CTA'S - TAXI TILBURG BLAUW
   ========================================================= */

.cookie-banner button,
.cookie-consent button,
.cookie-banner .btn,
.cookie-consent .btn,
.cookie-accept,
.cookie-settings,
.cookie-save {
  background: #1055C8 !important;
  border-color: #1055C8 !important;
  color: #ffffff !important;
}

.cookie-banner button:hover,
.cookie-consent button:hover,
.cookie-banner .btn:hover,
.cookie-consent .btn:hover,
.cookie-accept:hover,
.cookie-settings:hover,
.cookie-save:hover {
  background: #0C46A8 !important;
  border-color: #0C46A8 !important;
  color: #ffffff !important;
}
/* Kruimelpad in de hero (op alle pagina's, hoort bij pages/airports.css) */
.airport-breadcrumb a { color: inherit; text-decoration: none; }
.airport-breadcrumb a:hover { text-decoration: underline; }

/* Fotogalerij met bijschriften */
.photo-gallery { padding-top: 56px; padding-bottom: 24px; }
.photo-gallery h2 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 8px; }
.photo-gallery > p { margin: 0 0 24px; color: var(--color-grey-body); max-width: 44em; }
.photo-gallery__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.photo-gallery__item { margin: 0; overflow: hidden; border-radius: 16px; background: var(--color-grey-light-bg); border: 1px solid var(--color-border); }
.photo-gallery__item img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.photo-gallery__item figcaption { padding: 12px 14px; font-size: 14px; font-weight: 600; color: var(--color-navy); }
@media (max-width: 960px) { .photo-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .photo-gallery__grid { grid-template-columns: 1fr; } .photo-gallery { padding-top: 40px; } }

/* KAARTEN: de hele kaart is klikbaar als de kop een link heeft */
.card { position: relative; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.card:has(h2 a[href]), .card:has(h3 a[href]) { cursor: pointer; }
.card:has(h2 a[href]):hover, .card:has(h3 a[href]):hover,
.card:has(h2 a[href]:focus-visible), .card:has(h3 a[href]:focus-visible) {
  transform: translateY(-4px);
  border-color: var(--color-blue);
  box-shadow: 0 14px 34px rgba(16, 85, 200, .14);
}
.card h2 a[href]::after, .card h3 a[href]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card h2 a[href]:focus-visible, .card h3 a[href]:focus-visible { outline: none; }
.card:has(h2 a[href]:focus-visible), .card:has(h3 a[href]:focus-visible) { outline: 3px solid var(--color-blue); outline-offset: 2px; }
.card p a[href], .card li a[href], .card .card-inline-link { position: relative; z-index: 1; }
.card:has(h2 a[href])::after, .card:has(h3 a[href])::after {
  content: "\2192"; position: absolute; right: 22px; bottom: 16px;
  color: var(--color-blue); font-size: 20px; font-weight: 700; line-height: 1;
  opacity: .45; transition: opacity .16s ease, transform .16s ease;
}
.card:has(h2 a[href]):hover::after, .card:has(h3 a[href]):hover::after { opacity: 1; transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .card, .card::after { transition: none; } .card:has(h3 a[href]):hover { transform: none; } }

/* CONTENTBLOKKEN (teruggezette en aanvullende tekst, in de stijl van de site) */
.content-block { padding: 68px 0; background: #ffffff; }
.content-block--muted { background: #F6F8FB; border-top: 1px solid #E5EAF0; border-bottom: 1px solid #E5EAF0; }
.content-block__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 56px; align-items: start; }
.content-block__head { position: sticky; top: 96px; }
.content-kicker { display: block; margin-bottom: 10px; color: #1055C8; font-size: 12px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.content-block__head h2 { margin: 0; color: #182334; font-size: clamp(26px, 3vw, 38px); line-height: 1.12; letter-spacing: -.025em; }
.content-block__body { max-width: 46em; }
.content-block__body > :last-child { margin-bottom: 0; }
.content-block__body p { margin: 0 0 16px; color: #4A5566; font-size: 16.5px; line-height: 1.8; }
.content-block__body a { color: #1055C8; font-weight: 600; }
.content-block__body h3 { margin: 28px 0 10px; color: #182334; font-size: 19px; line-height: 1.3; }
.content-block--intro { padding: 56px 0 8px; }
.content-block--intro .content-block__body { max-width: 52em; }
.content-block--intro .content-block__body p { color: #39445A; font-size: 18px; }
.check-list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.check-list li { position: relative; padding: 15px 16px 15px 52px; background: #ffffff; border: 1px solid #E2E7ED; border-radius: 14px; color: #3F4A59; font-size: 15px; line-height: 1.55; box-shadow: 0 6px 18px rgba(31, 35, 40, .04); }
.content-block--muted .check-list li { background: #ffffff; }
.check-list li::before { content: "\2713"; position: absolute; left: 15px; top: 14px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: #E9F9FF; color: #087CA5; font-size: 13px; font-weight: 900; }
.content-faq { overflow: hidden; margin: 0 0 22px; border: 1px solid #E0E6EC; border-radius: 18px; background: #ffffff; }
.content-faq .faq-item { border: 0; border-bottom: 1px solid #E9EDF1; background: #ffffff; }
.content-faq .faq-item:last-child { border-bottom: 0; }
.content-faq .faq-item summary { padding: 18px 22px; color: #182334; font-weight: 700; }
.content-faq .faq-answer { padding: 0 22px 18px; }
.content-faq .faq-answer p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.7; }
.content-callout { margin: 0 0 22px; padding: 14px 18px; border-left: 4px solid #B06000; border-radius: 8px; background: #FFF6E0; color: #1F2328; font-size: 15px; line-height: 1.65; }
.content-block__body table { font-size: 14.5px; }
@media (max-width: 960px) {
  .content-block { padding: 52px 0; }
  .content-block__grid { grid-template-columns: 1fr; gap: 20px; }
  .content-block__head { position: static; }
}
@media (max-width: 620px) { .check-list { grid-template-columns: 1fr; } .content-block--intro .content-block__body p { font-size: 17px; } }