/* KGT look: header controls (header.php): icon buttons, language menu, search overlay, menu drawer. */

html.kgt-locked { overflow: hidden; }

/* Round icon buttons (search, menu, close). */
.kgt-iconbtn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid #D5DCE7; border-radius: 50%; background: #fff; color: var(--kgt-ink); cursor: pointer; transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.kgt-iconbtn:hover { background: var(--kgt-ink); border-color: var(--kgt-ink); color: #fff; }
.kgt-iconbtn:active { transform: scale(0.95); }
.kgt-iconbtn:focus-visible { outline: 3px solid var(--kgt-primary); outline-offset: 2px; }
.kgt-ico { width: 20px; height: 20px; }

/* Sign in (desktop): a quiet pill beside the language menu. */
.kgt-signin { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 12px; box-sizing: border-box; border: 1px solid #D5DCE7; border-radius: 999px; background: #fff; color: var(--kgt-ink); font: 600 16px var(--kgt-font-ui); text-decoration: none; white-space: nowrap; transition: background-color var(--t-hover) ease, color var(--t-hover) ease, border-color var(--t-hover) ease; }
.kgt-signin .kgt-ico { width: 18px; height: 18px; }
.kgt-signin:hover { background: var(--kgt-ink); border-color: var(--kgt-ink); color: #fff; }
.kgt-signin:focus-visible { outline: 3px solid var(--kgt-primary); outline-offset: 2px; }

/* Header layout: the full menu where it fits on one line (measured: Dutch needs ~1221px, English ~1293px, with
   "Home" and the language name already folded away); below that logo, search and the hamburger. */
.kgt-menu-open { display: none; }
@media (max-width: 1260px) {
  html .cb-hdr_nav, html .cb-hdr_lang, html .cb-hdr_cta, html .cb-hdr_signin { display: none; }
  .kgt-menu-open { display: inline-flex; }
  html .kgt-header-tools { gap: 10px; }
}
@media (max-width: 1340px) {
  html[lang|="en"] .cb-hdr_nav, html[lang|="en"] .cb-hdr_lang, html[lang|="en"] .cb-hdr_cta, html[lang|="en"] .cb-hdr_signin { display: none; }
  html[lang|="en"] .kgt-menu-open { display: inline-flex; }
  html[lang|="en"] .kgt-header-tools { gap: 10px; }
}

/* Language menu: flag + name, the other languages in a small card. */
.kgt-langdd { position: relative; font-family: var(--kgt-font-ui); }
.kgt-langdd > summary { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px 0 10px; box-sizing: border-box; border: 1px solid #D5DCE7; border-radius: 12px; background: #fff; color: var(--kgt-ink); font-size: 16px; font-weight: 500; cursor: pointer; list-style: none; transition: border-color var(--t-hover) ease; }
.kgt-langdd > summary::-webkit-details-marker { display: none; }
.kgt-langdd > summary:hover { border-color: var(--kgt-ink); }
.kgt-langdd > summary:focus-visible { outline: 3px solid var(--kgt-primary); outline-offset: 2px; }
.kgt-langdd__flag { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex: none; }
.kgt-langdd__caret { width: 16px; height: 16px; transition: transform var(--t-ui) var(--ease-out); }
.kgt-langdd[open] .kgt-langdd__caret { transform: rotate(180deg); }
.kgt-langdd__list { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 180px; margin: 0; padding: 6px; list-style: none; border: 1px solid #E3E8F0; border-radius: 12px; background: #fff; box-shadow: 0 16px 40px rgba(31, 42, 68, .16); transform-origin: top right; animation: kgt-pop 180ms var(--ease-out); }
.kgt-langdd__list a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; color: var(--kgt-ink); font-size: 16px; text-decoration: none; }
.kgt-langdd__list a:hover, .kgt-langdd__list a:focus-visible { background: var(--kgt-sand); }
@keyframes kgt-pop { from { opacity: 0; transform: scale(0.97) translateY(-4px); } to { opacity: 1; transform: none; } }

/* Dialog base: full control over size and backdrop. */
.kgt-finder, .kgt-drawer { max-width: none; max-height: none; padding: 0; border: 0; color: var(--kgt-ink); font-family: var(--kgt-font-ui); }
.kgt-finder::backdrop, .kgt-drawer::backdrop { background: rgba(31, 42, 68, .55); }

/* Search window (finder): centred, filters left, result cards right; full screen on phones. */
.kgt-finder { width: min(1320px, calc(100vw - 48px)); height: min(880px, calc(100dvh - 48px)); margin: auto; border-radius: 24px; background: #fff; overflow: hidden; }
.kgt-finder[open] { display: grid; grid-template-columns: 320px minmax(0, 1fr); animation: kgt-fade-up 260ms var(--ease-out); }
.kgt-finder__side { display: flex; flex-direction: column; min-height: 0; background: var(--kgt-sand); }
.kgt-finder__top { display: flex; align-items: center; gap: 10px; padding: 20px 20px 12px; }
.kgt-finder__form { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 54px; padding: 0 18px 0 16px; border: 1px solid #D5DCE7; border-radius: 999px; background: #fff; }
.kgt-finder__form:focus-within { border-color: var(--kgt-primary); box-shadow: 0 0 0 3px var(--kgt-primary-soft); }
.kgt-finder__form input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: 500 17px var(--kgt-font-ui); color: var(--kgt-ink); }
.kgt-finder__form input::-webkit-search-cancel-button { display: none; } /* one close button only: the window's */
.kgt-finder__filters { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 20px 28px; overscroll-behavior: contain; }
.kgt-finder__group + .kgt-finder__group { margin-top: 22px; }
.kgt-finder__label { margin: 0 0 10px; font-size: 14px; font-weight: 700; letter-spacing: 0; color: var(--kgt-ink-muted); }
.kgt-finder__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kgt-chipbtn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid #D5DCE7; border-radius: 999px; background: #fff; color: var(--kgt-ink); font: 600 15px var(--kgt-font-ui); cursor: pointer; transition: background-color var(--t-hover) ease, border-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.kgt-chipbtn:hover { border-color: var(--kgt-ink); }
.kgt-chipbtn:active { transform: scale(0.96); }
.kgt-chipbtn .kgt-cat__icon { width: 18px; height: 18px; padding: 0; background: none; color: var(--kgt-primary); }
.kgt-chipbtn[aria-pressed="true"] { background: var(--kgt-ink); border-color: var(--kgt-ink); color: #fff; }
.kgt-chipbtn[aria-pressed="true"] .kgt-cat__icon { color: var(--kgt-field-sun); }
.kgt-finder__main { min-height: 0; overflow-y: auto; padding: 20px 28px 32px; overscroll-behavior: contain; }
.kgt-finder__count { margin: 4px 0 16px; font-size: 15px; font-weight: 700; color: var(--kgt-ink-muted); }
.kgt-finder__results { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; transition: opacity 160ms ease; }
.kgt-finder.is-loading .kgt-finder__results { opacity: .55; }
.kgt-finder__more { margin: 24px 0 0; font-size: 17px; }
/* Cards: the photo is the card, title and line on a dark band at its foot. */
.kgt-scard { position: relative; display: block; aspect-ratio: 5 / 6; overflow: clip; border-radius: 18px; background: var(--kgt-field-navy); color: #fff; text-decoration: none; }
.kgt-scard img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease-out); }
.kgt-scard::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(to bottom, rgba(16, 22, 38, 0), rgba(16, 22, 38, .82)); pointer-events: none; }
.kgt-scard__type { position: absolute; top: 12px; right: 12px; z-index: 1; padding: 4px 10px; border-radius: 999px; background: rgba(31, 42, 68, .82); font-size: 13px; font-weight: 600; }
.kgt-scard__text { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; display: flex; flex-direction: column; gap: 3px; }
.kgt-scard__title { font-size: 20px; font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; }
.kgt-scard__sub { font-size: 14px; color: rgba(255, 255, 255, .88); }
@media (hover: hover) and (pointer: fine) { .kgt-scard:hover img { transform: scale(1.05); } }
.kgt-scard:focus-visible { outline: 3px solid var(--kgt-primary); outline-offset: 3px; }
/* 'Meer filters' only exists on phones. */
.kgt-finder__morefilters { display: none; }
/* Phones (like the example the owner gave): search field and close on top, two rows of chips that scroll sideways
   (country, kind of outing; age behind 'Meer filters'), a small count line, then two columns of photo cards. */
@media (max-width: 800px) {
  .kgt-finder { width: 100vw; height: 100dvh; border-radius: 0; }
  .kgt-finder[open] { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .kgt-finder__side { min-width: 0; }
  .kgt-finder__top { gap: 12px; padding: 14px 16px 12px; }
  .kgt-finder__form { height: 52px; }
  .kgt-finder__top .kgt-iconbtn { flex: none; width: 48px; height: 48px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px #D5DCE7; }
  .kgt-finder__filters { min-width: 0; overflow: visible; padding: 0 0 14px; text-align: center; }
  .kgt-finder__group { min-width: 0; overflow-x: auto; padding: 0 16px; scrollbar-width: none; overscroll-behavior-x: contain; text-align: left; }
  .kgt-finder__group::-webkit-scrollbar { display: none; }
  .kgt-finder__group + .kgt-finder__group { margin-top: 10px; }
  .kgt-finder__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .kgt-finder__chips { flex-wrap: nowrap; width: max-content; gap: 10px; }
  .kgt-chipbtn { flex: none; height: 46px; padding: 0 16px; border-radius: 14px; font-size: 16px; }
  .kgt-finder__group--age { display: none; }
  .kgt-finder__filters.is-more .kgt-finder__group--age { display: block; }
  .kgt-finder__morefilters { display: inline-flex; align-items: center; gap: 6px; height: 40px; margin-top: 14px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--kgt-primary-soft); color: var(--kgt-ink); font: 700 15px var(--kgt-font-ui); cursor: pointer; }
  .kgt-finder__morefilters .kgt-ico { width: 16px; height: 16px; transition: transform var(--t-hover) ease; }
  .kgt-finder__morefilters[aria-expanded="true"] .kgt-ico { transform: rotate(180deg); }
  .kgt-finder__main { padding: 16px 16px 28px; }
  .kgt-finder__count { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
  .kgt-finder__results { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .kgt-scard { aspect-ratio: 4 / 5; border-radius: 16px; }
  .kgt-scard__type { top: 10px; right: 10px; font-size: 12px; }
  .kgt-scard__text { left: 12px; right: 12px; bottom: 12px; }
  .kgt-scard__title { font-size: 17px; }
  .kgt-scard__sub { font-size: 13px; line-height: 1.3; }
}

@keyframes kgt-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Menu drawer: from the right, full height. */
.kgt-drawer { width: min(440px, 100vw); height: 100dvh; margin: 0 0 0 auto; background: #fff; }
.kgt-drawer[open] { display: flex; flex-direction: column; animation: kgt-slide-in 280ms cubic-bezier(0.32, 0.72, 0, 1); }
.kgt-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 14px var(--kgt-gutter); }
.kgt-drawer__logo { display: block; width: auto; height: 44px; }
.kgt-drawer__body { flex: 1; overflow-y: auto; padding: 4px var(--kgt-gutter) 32px; overscroll-behavior: contain; }
.kgt-drawer__search { display: flex; align-items: center; gap: 12px; width: 100%; height: 56px; padding: 0 18px; border: 1px solid #D5DCE7; border-radius: 16px; background: #fff; color: var(--kgt-ink-muted); font: 500 17px var(--kgt-font-ui); text-align: left; cursor: pointer; box-shadow: 0 6px 18px rgba(31, 42, 68, .06); }
.kgt-drawer__nav { list-style: none; margin: 12px 0 0; padding: 0; }
.kgt-drawer__row { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; border-bottom: 1px solid #E3E8F0; color: var(--kgt-ink); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; text-decoration: none; }
.kgt-drawer__row .kgt-ico { width: 20px; height: 20px; transition: transform var(--t-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .kgt-drawer__row:hover .kgt-ico { transform: translateX(3px); } }
.kgt-drawer__row.is-current { color: var(--kgt-primary); }
.kgt-drawer__title { margin: 28px 0 6px; font-size: 14px; font-weight: 700; letter-spacing: 0; color: var(--kgt-ink-muted); }
.kgt-drawer__group { border-bottom: 1px solid #E3E8F0; }
.kgt-drawer__group > summary { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; font-size: 20px; font-weight: 700; color: var(--kgt-ink); cursor: pointer; list-style: none; }
.kgt-drawer__group > summary::-webkit-details-marker { display: none; }
.kgt-drawer__meta { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--kgt-ink-muted); }
.kgt-drawer__meta .kgt-ico { width: 18px; height: 18px; transition: transform var(--t-ui) var(--ease-out); }
.kgt-drawer__group[open] .kgt-drawer__meta .kgt-ico { transform: rotate(180deg); }
.kgt-drawer__chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kgt-drawer__chip { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; border-radius: 999px; background: var(--kgt-sand); color: var(--kgt-ink); font-size: 16px; font-weight: 600; text-decoration: none; }
.kgt-drawer__chip span { font-size: 13px; font-weight: 600; color: var(--kgt-ink-muted); }
.kgt-drawer__chip:hover { background: var(--kgt-primary-soft); }
.kgt-drawer__all { display: flex; align-items: center; justify-content: space-between; padding: 16px 4px 18px; color: var(--kgt-ink); font-size: 17px; text-decoration: none; }
.kgt-drawer__alldest { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; height: 52px; border: 1px solid #D5DCE7; border-radius: 999px; color: var(--kgt-ink); font-size: 16px; font-weight: 700; text-decoration: none; }
.kgt-drawer__alldest .kgt-ico { width: 18px; height: 18px; }
.kgt-drawer__langs { display: flex; gap: 10px; }
.kgt-drawer__lang { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px; border: 1px solid #D5DCE7; border-radius: 12px; color: var(--kgt-ink); font-size: 16px; font-weight: 500; text-decoration: none; }
.kgt-drawer__lang img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.kgt-drawer__lang.is-current { border-color: var(--kgt-ink); font-weight: 700; }
.kgt-drawer__contact { display: flex; justify-content: center; width: 100%; box-sizing: border-box; margin-top: 28px; }
.kgt-drawer__signin { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; height: 56px; border-radius: 999px; background: var(--kgt-ink); color: #fff; font-size: 17px; font-weight: 700; text-decoration: none; transition: background-color var(--t-hover) ease; }
.kgt-drawer__signin:hover { background: var(--kgt-primary-dark); }
.kgt-drawer__note { margin: 10px 4px 0; font-size: 14px; color: var(--kgt-ink-muted); text-align: center; }
@keyframes kgt-slide-in { from { transform: translateX(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .kgt-finder[open], .kgt-drawer[open], .kgt-langdd__list { animation: none; }
}

/* Skip link (semantics.php): hidden until a keyboard user tabs to it. */
.kgt-skip { position: fixed; top: 12px; left: 12px; z-index: 1000; padding: 12px 18px; border-radius: 999px; background: var(--kgt-ink); color: #fff; font: 700 16px var(--kgt-font-ui); text-decoration: none; transform: translateY(-160%); } /* no transition: only reached by keyboard */
.kgt-skip:focus { transform: none; outline: 3px solid var(--kgt-field-sun); outline-offset: 2px; }

/* Newsletter card (newsletter.php): bottom right, small; a sheet along the bottom on phones. */
.kgt-nl { position: fixed; right: 24px; bottom: 24px; z-index: 90; width: min(380px, calc(100vw - 32px)); padding: 24px 24px 20px; border-radius: 22px; background: #fff; color: var(--kgt-ink); box-shadow: 0 24px 60px rgba(31, 42, 68, .22), 0 0 0 1px rgba(31, 42, 68, .06); opacity: 0; transform: translateY(16px); transition: opacity 160ms ease, transform 160ms var(--ease-out, ease-out); }
/* Arrives unhurried (seen rarely), leaves fast (the visitor asked it to go). */
.kgt-nl.is-open { opacity: 1; transform: none; transition: opacity 280ms ease, transform 380ms var(--ease-out, ease-out); }
.kgt-nl[hidden] { display: none; }
.kgt-nl__close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; }
.kgt-nl__art { width: 52px; height: 52px; margin-bottom: 10px; }
.kgt-nl__title { margin: 0 44px 6px 0; font: 800 22px/1.15 var(--kgt-font-ui); letter-spacing: -0.02em; color: var(--kgt-ink); }
.kgt-nl__title:focus { outline: none; }
.kgt-nl__lead { margin: 0 0 16px; font-size: 16px; line-height: 1.45; color: var(--kgt-ink); }
.kgt-nl__form { display: flex; gap: 8px; }
.kgt-nl__form input[type=email] { flex: 1; min-width: 0; height: 48px; padding: 0 16px; border: 1px solid #D5DCE7; border-radius: 999px; font: 500 16px var(--kgt-font-ui); color: var(--kgt-ink); }
.kgt-nl__form input[type=email]:focus { outline: 0; border-color: var(--kgt-primary); box-shadow: 0 0 0 3px var(--kgt-primary-soft); }
.kgt-nl__form .kgt-btn { flex: none; min-height: 48px; padding: 0 18px; }
.kgt-nl__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.kgt-nl__msg { margin: 8px 0 0; font-size: 14px; font-weight: 600; color: #B4452A; }
.kgt-nl__msg:empty { display: none; }
.kgt-nl__small { margin: 10px 0 0; font-size: 13px; color: var(--kgt-ink-muted); }
.kgt-nl__small a { color: inherit; text-decoration: underline; }
@media (max-width: 600px) {
  .kgt-nl { right: 12px; bottom: 12px; left: 12px; width: auto; padding: 20px 18px 16px; }
  .kgt-nl__art { display: none; }
  .kgt-nl__title { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .kgt-nl, .kgt-nl.is-open { transform: none; transition: opacity 200ms ease; } }

/* Pause/play for the moving rows (kgt_motion_toggle): shows the action it will do; hidden without script and under
   reduced motion (nothing moves there). */
.kgt-motion-toggle { display: none; }
.js .kgt-motion-toggle { display: inline-flex; }
.kgt-motion-toggle .kgt-ico { width: 18px; height: 18px; }
.kgt-motion-toggle__play { display: none; }
.kgt-motion-toggle[aria-pressed="true"] .kgt-motion-toggle__pause { display: none; }
.kgt-motion-toggle[aria-pressed="true"] .kgt-motion-toggle__play { display: block; }
.kgt-motion-held .kgt-band__track, .kgt-motion-held .kgt-sfeed__track { animation-play-state: paused; }
.kgt-bands { position: relative; }
.kgt-bands__toggle { position: absolute; top: 0; right: var(--kgt-gutter); z-index: 3; box-shadow: 0 6px 18px rgba(31, 42, 68, .14); }
@media (prefers-reduced-motion: reduce) { .js .kgt-motion-toggle { display: none; } }

/* ---------- UI polish (CHG-045) ---------- */
/* The scrollbar's room stays reserved, so locking the page under the search window or menu does not shift it. */
html { scrollbar-gutter: stable; -webkit-tap-highlight-color: transparent; }
::selection { background: var(--kgt-field-sun); color: var(--kgt-ink); }

/* One focus ring for every control; on navy it turns sun-yellow so it stays visible. */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--kgt-primary); outline-offset: 2px; }
:where(footer, .kgt-section-navy, .kgt-hero) :where(a, button, summary, [tabindex]):focus-visible { outline-color: var(--kgt-field-sun); }
.kgt-section-navy .kgt-tipcard:focus-visible { outline-color: var(--kgt-field-sun); }

/* Headings break into even lines, running text avoids a lone last word. */
html :is(h1, h2, h3, .kgt-card-title, .kgt-scard__title, .kgt-tipcard__title, .kgt-nl__title) { text-wrap: balance; } /* beats the theme's h1-h6 { text-wrap: pretty } */
:where(p, li, .kgt-lead) { text-wrap: pretty; }
/* Numbers that change while you type or filter keep their width. */
.kgt-finder__count, .kgt-bfind__count, .kgt-bfind__n, .kgt-scard__sub, .kgt-band sup, .kgt-sfeed__handle { font-variant-numeric: tabular-nums; }

/* Press feedback for the pill-shaped controls (the main buttons and chips already have it). */
:is(.kgt-signin, .kgt-jump__chip, .kgt-sfeed__net, .kgt-drawer__signin, .kgt-drawer__search, .kgt-finder__morefilters, .kgt-langdd > summary) {
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease, border-color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
:is(.kgt-signin, .kgt-jump__chip, .kgt-sfeed__net, .kgt-drawer__signin, .kgt-drawer__search, .kgt-finder__morefilters, .kgt-langdd > summary):active { transform: scale(0.97); }
.kgt-faq summary { transition: background-color var(--t-press) ease; border-radius: inherit; }
.kgt-faq summary:active { background-color: var(--kgt-primary-soft); }

/* Photo-row arrows at the end of the row. */
.kgt-iconbtn[aria-disabled="true"] { opacity: 0.4; cursor: default; }
.kgt-iconbtn[aria-disabled="true"]:active { transform: none; }

/* Search window opened with "/": no opening animation. */
.kgt-finder.kgt-instant[open] { animation: none; }

/* Header: sticks for the whole page, slides away on the way down, back on a scroll up (look.js). */
body > header { position: sticky; top: 0; z-index: 50; transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1), box-shadow 200ms ease; }
.kgt-hdr-floating body > header { box-shadow: 0 1px 0 rgba(31, 42, 68, .08), 0 8px 24px rgba(31, 42, 68, .06); }
.kgt-hdr-hidden body > header { transform: translateY(-100%); box-shadow: none; }
.cb-el:has(> .kgt-jump) { transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1); }
.cb-el.kgt-under-hdr { transform: translateY(var(--kgt-hdr-h, 76px)); }

/* Menu drawer and the newsletter sheet follow a finger (look.js). */
.kgt-drawer { touch-action: pan-y; }
@media (max-width: 600px) {
  .kgt-nl { touch-action: none; padding-top: 26px; }
  .kgt-nl::before { content: ""; position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: #D5DCE7; }
}

@media (prefers-reduced-motion: reduce) {
  body > header, .cb-el:has(> .kgt-jump) { transition: none; }
}

/* Cookie banner (CookieYes) in the site's own type and buttons. Reject and Accept look the same on purpose: refusing
   must be as easy as agreeing. Its colours come as inline styles, hence !important. */
.cky-consent-container, .cky-preference-center, .cky-modal { font-family: var(--kgt-font-ui) !important; }
.cky-consent-container .cky-title, .cky-preference-center .cky-preference-title { font-weight: 800 !important; letter-spacing: -0.02em; color: var(--kgt-ink) !important; }
.cky-consent-container .cky-notice-des, .cky-consent-container .cky-notice-des p { color: var(--kgt-ink) !important; font-size: 15px !important; }
.cky-btn { min-height: 44px; padding: 0 20px !important; border-radius: 999px !important; font: 700 15px var(--kgt-font-ui) !important; transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.cky-btn:active { transform: scale(0.97); }
.cky-btn-accept, .cky-btn-reject, .cky-btn-preferences { background-color: var(--kgt-ink) !important; border-color: var(--kgt-ink) !important; color: #fff !important; }
.cky-btn-customize { background-color: transparent !important; border-color: var(--kgt-ink) !important; color: var(--kgt-ink) !important; }
.cky-consent-container .cky-consent-bar { border-color: #E3E8F0 !important; box-shadow: 0 -8px 30px rgba(31, 42, 68, .08); }

/* ---------- Audit fixes (CHG-046) ---------- */
/* Header up to 1440px: the menu used to spill over the logo at 1280. Items stay on one line, "Home" goes
   (the logo is the home link), the language button shows its flag only (the name stays for screen readers). */
.cb-hdr_nav .pb-nav__link { white-space: nowrap; }
@media (max-width: 1440px) {
  .cb-hdr_nav .pb-nav__list > .pb-nav__item:first-child { display: none; }
  .cb-hdr_nav .pb-nav__list > .pb-nav__item > .pb-nav__link { padding-inline: 9px; }
}
@media (max-width: 1400px) {
  .kgt-langdd > summary > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .kgt-langdd > summary { padding-inline: 10px 8px; }
}

/* Blog articles: a visible way back to the blog (the old label above the title was hidden). */
.kgt-backlink { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--kgt-ink); text-decoration: none; }
.kgt-backlink::before { content: ""; width: 18px; height: 18px; background: currentColor; transition: transform var(--t-hover) ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 18l-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 18l-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
.kgt-backlink:hover { text-decoration: underline; text-underline-offset: 0.2em; }
@media (hover: hover) and (pointer: fine) { .kgt-backlink:hover::before { transform: translateX(-3px); } }

/* ---------- Accessibility pass (CHG-048) ---------- */
/* Focus not obscured (WCAG 2.4.11): a focused element scrolled into view lands clear of the sticky header (and the
   Tips jump chips), and above the newsletter card or cookie bar while those are on screen. */
html { scroll-padding-top: calc(var(--kgt-hdr-h, 76px) + 16px); }
html:has(.kgt-jump) { scroll-padding-top: calc(var(--kgt-hdr-h, 76px) + 84px); }
html:has(.kgt-nl.is-open) { scroll-padding-bottom: 300px; }
html:has(.cky-consent-container:not(.cky-hide)) { scroll-padding-bottom: 180px; }
/* The ebook video's pause button (WCAG 2.2.2), top right of the section. */
.kgt-feature__toggle { position: absolute; top: 20px; right: 20px; z-index: 3; }