/*
Theme Name: Sipnificant
Theme URI: https://proefkaart.nl
Author: RV Internet Marketing
Description: Bier- en wijnadvies op basis van je gerecht. Custom frontend dashboard met OpenAI analyse en een deterministische matching engine.
Version: 1.2.2
Requires at least: 6.2
Requires PHP: 7.4
Text Domain: proefkaart
*/

/* ==========================================================================
   Design tokens
   Palet: kelderdonker warm zwart, granaatrood (wijn), amber (bier),
   gedempt messing voor lijnwerk, linnen voor tekst.
   ========================================================================== */
:root {
  --ink: #14100f;
  --ink-2: #1c1715;
  --panel: #221c1a;
  --panel-2: #2a2320;
  --line: #3a302c;
  --line-soft: #2e2724;

  --linen: #ede7dd;
  --linen-dim: #b8ada0;
  --linen-faint: #8a7d71;

  --garnet: #7a1f2b;
  --garnet-lift: #a02c3c;
  --amber: #c8873a;
  --amber-lift: #dda355;
  --brass: #a8935f;
  --moss: #5f7355;

  --font-display: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --font-body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --step-0: 1rem;
  --step-1: 1.125rem;
  --step-2: clamp(1.35rem, 1.1rem + 1.2vw, 1.75rem);
  --step-3: clamp(1.8rem, 1.3rem + 2.4vw, 2.9rem);
  --step-4: clamp(2.6rem, 1.4rem + 5.4vw, 5.4rem);

  --gut: clamp(1.25rem, 4vw, 2.5rem);
  --radius: 2px;
  --shell: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--linen);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--amber-lift); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--amber-lift);
  outline-offset: 3px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 0.6em;
}

.pk-shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* Eyebrow: mono, gespatieerd. Draagt informatie (stap, categorie), geen sier. */
.pk-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 1rem;
}

.pk-rule {
  border: 0;
  border-top: 1px solid var(--line-soft);
  margin: 0;
}

/* ==========================================================================
   Header
   ========================================================================== */
.pk-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}

.pk-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 72px;
}

.pk-logo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: var(--linen);
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
}
.pk-logo:hover { text-decoration: none; }

/* Het logo is 919 bij 191, dus bijna vijf keer zo breed als hoog. We zetten de
   hoogte vast en laten de breedte volgen: zo blijft hij scherp op elk scherm en
   springt de header niet op tijdens het laden. */
.pk-logo img {
  display: block;
  height: 32px;
  width: auto;
  max-width: 100%;
}

@media (max-width: 600px) {
  .pk-logo img {
    height: 26px;
  }
}
.pk-logo span {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
}

.pk-nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  font-size: 0.9rem;
}
.pk-nav a { color: var(--linen-dim); }
.pk-nav a:hover { color: var(--linen); text-decoration: none; }

.pk-nav__toggle { display: none; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.pk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border: 1px solid var(--brass);
  border-radius: var(--radius);
  background: transparent;
  color: var(--linen);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.pk-btn:hover { background: var(--brass); color: var(--ink); text-decoration: none; }
.pk-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.pk-btn--solid { background: var(--garnet); border-color: var(--garnet); }
.pk-btn--solid:hover { background: var(--garnet-lift); border-color: var(--garnet-lift); color: var(--linen); }

.pk-btn--ghost { border-color: var(--line); color: var(--linen-dim); }
.pk-btn--ghost:hover { border-color: var(--linen-dim); background: transparent; color: var(--linen); }

.pk-btn--sm { padding: 0.55rem 1.1rem; font-size: 0.68rem; }

/* ==========================================================================
   Hero: de thesis is de vraag zelf, gezet als menukaart-regel
   ========================================================================== */
.pk-hero {
  position: relative;
  padding: clamp(4rem, 12vh, 8rem) 0 clamp(3rem, 8vh, 5rem);
  overflow: hidden;
}

.pk-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

.pk-hero__glow {
  position: absolute;
  top: -30%;
  right: -10%;
  width: 60vw;
  height: 60vw;
  max-width: 720px;
  max-height: 720px;
  background: radial-gradient(circle, rgba(122, 31, 43, 0.28), transparent 62%);
  pointer-events: none;
}

.pk-hero__inner { position: relative; max-width: 46rem; }

.pk-hero h1 {
  font-size: var(--step-4);
  margin-bottom: 1.5rem;
}
.pk-hero h1 em {
  font-style: italic;
  color: var(--amber-lift);
}

.pk-hero__lead {
  font-size: var(--step-1);
  color: var(--linen-dim);
  max-width: 34rem;
  margin: 0 0 2.5rem;
}

.pk-hero__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* Signature: vloeistofkolommen. Kleuren zijn echte SRM/wijntinten. */
.pk-columns {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  height: 180px;
  margin-top: clamp(3rem, 7vw, 5rem);
  align-items: end;
}
.pk-columns__bar {
  border-radius: 1px 1px 0 0;
  position: relative;
  animation: pk-rise 1.1s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.pk-columns__bar::after {
  content: attr(data-label);
  position: absolute;
  bottom: -1.6rem;
  left: 0;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--linen-faint);
  white-space: nowrap;
}
@keyframes pk-rise {
  from { transform: scaleY(0); transform-origin: bottom; }
  to { transform: scaleY(1); transform-origin: bottom; }
}

/* ==========================================================================
   Secties
   ========================================================================== */
.pk-section { padding: clamp(3.5rem, 9vw, 6.5rem) 0; }
.pk-section--alt { background: var(--ink-2); }

.pk-section__head { max-width: 40rem; margin-bottom: 3rem; }
.pk-section__head h2 { font-size: var(--step-3); }
.pk-section__head p { color: var(--linen-dim); margin: 0; }

.pk-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}

.pk-card {
  background: var(--ink);
  padding: clamp(1.6rem, 3vw, 2.4rem);
}
.pk-card h3 { font-size: var(--step-2); margin-bottom: 0.5rem; }
.pk-card p { color: var(--linen-dim); margin: 0; font-size: 0.95rem; }
.pk-card__mark {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--brass);
  display: block;
  margin-bottom: 1.2rem;
}

/* Menukaart-lijst: gerecht met stippellijn naar de drank */
.pk-menu { list-style: none; margin: 0; padding: 0; }
.pk-menu li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.pk-menu li:first-child { border-top: 1px solid var(--line-soft); }
.pk-menu__dish { font-family: var(--font-display); font-size: 1.2rem; }
.pk-menu__dots {
  flex: 1;
  border-bottom: 1px dotted var(--line);
  transform: translateY(-4px);
}
.pk-menu__drink {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber-lift);
  text-align: right;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.pk-footer {
  border-top: 1px solid var(--line-soft);
  padding: 3rem 0 2.5rem;
  color: var(--linen-faint);
  font-size: 0.85rem;
}
.pk-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: space-between;
  align-items: center;
}
.pk-footer a { color: var(--linen-dim); }

.pk-footer__note {
  margin: 0;
}

/* De juridische links staan tussen de regel eronder en de leeftijdsmelding.
   Goudkleurig, want ze mogen gevonden worden, maar rustig genoeg om niet af te
   leiden van waar de pagina over gaat. */
.pk-footer__links {
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pk-footer__links a {
  position: relative;
  color: var(--brass);
  text-decoration: none;
  padding-bottom: 3px;
}

/* Een streepje dat vanuit het midden uitloopt. Dat leest rustiger dan een lijn
   die er ineens staat. */
.pk-footer__links a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--brass);
  transition: width 0.22s ease, left 0.22s ease;
}
.pk-footer__links a:hover,
.pk-footer__links a:focus-visible {
  color: var(--linen);
  text-decoration: none;
}
.pk-footer__links a:hover::after,
.pk-footer__links a:focus-visible::after {
  width: 100%;
  left: 0;
  background: var(--linen);
}

@media (max-width: 700px) {
  .pk-footer__inner {
    flex-direction: column;
    text-align: center;
    gap: 1.25rem;
  }
  .pk-footer__links {
    order: -1;
  }
}

.pk-agecheck {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  padding: 0.4rem 0.7rem;
  color: var(--brass);
}

/* ==========================================================================
   Auth
   ========================================================================== */
.pk-auth { min-height: 70vh; display: grid; place-items: center; padding: 4rem 0; }
.pk-auth__box {
  width: 100%;
  max-width: 26rem;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  padding: clamp(1.75rem, 4vw, 2.75rem);
}
.pk-auth__box h1 { font-size: var(--step-2); }
.pk-auth__switch { margin-top: 1.75rem; font-size: 0.85rem; color: var(--linen-faint); }
.pk-auth__hint { margin-top: 1rem; font-size: 0.8rem; color: var(--linen-faint); }

/* Honeypot. Uit het beeld geschoven in plaats van display none, want een deel
   van de bots slaat velden met display none over. */
.pk-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.pk-field { margin-bottom: 1.1rem; }
.pk-field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--linen-faint);
  margin-bottom: 0.45rem;
}
.pk-field input, .pk-field textarea, .pk-field select {
  width: 100%;
  padding: 0.8rem 0.9rem;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--linen);
  font-family: inherit;
  font-size: 0.95rem;
}
.pk-field input:focus, .pk-field textarea:focus {
  border-color: var(--brass);
  outline: none;
}

.pk-notice {
  border-left: 2px solid var(--garnet-lift);
  background: rgba(122, 31, 43, 0.12);
  padding: 0.8rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.88rem;
}
.pk-notice--ok { border-left-color: var(--moss); background: rgba(95, 115, 85, 0.14); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 720px) {
  .pk-nav { gap: 1rem; font-size: 0.82rem; }
  .pk-columns { grid-template-columns: repeat(4, 1fr); height: 120px; }
  .pk-columns__bar:nth-child(n+5) { display: none; }
  .pk-menu li { flex-wrap: wrap; }
  .pk-menu__dots { display: none; }
  .pk-menu__drink { text-align: left; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ==========================================================================
   Vaste balk onderaan op de telefoon.

   Deze stijlen horen hier en niet in dashboard.css, want de balk staat in de
   voettekst en dus op elke pagina. Op een pagina zonder dashboard.css was er
   geen regel die hem verbergt, en dan stond hij ook op een breed scherm. Daar is je duim, en dat is waar mensen
   navigatie verwachten in een app.
   ========================================================================== */

.pk-tabbar {
  display: none;
}

@media (max-width: 780px) {
  .pk-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    /*
     * minmax(0, 1fr) en niet 1fr. Een kolom van 1fr is minmax(auto, 1fr), en
     * die auto is de breedte van het langste label. Bij Bij een fles werd de
     * balk daardoor breder dan het scherm, ging de pagina horizontaal scrollen
     * en leek de balk niet meer vast te staan.
     */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: var(--ink);
    border-top: 1px solid var(--line);
    z-index: 80;

    /*
     * Ruimte voor de systeembalk onderaan het scherm.
     *
     * Staat er een advertentiebanner onder de app, dan raakt dit venster de
     * onderkant van het scherm niet meer en is die ruimte er dubbel: de banner
     * zit ertussen. De app zet dan de klasse hieronder, en dan valt het weg.
     */
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .pk-heeft-banner .pk-tabbar {
    padding-bottom: 0;
  }

  .pk-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.65rem 0.25rem 0.7rem;
    text-decoration: none;
    color: var(--linen-faint);
    transition: color 0.15s ease;
  }
  .pk-tab:hover,
  .pk-tab:focus {
    color: var(--linen-dim);
    text-decoration: none;
  }
  .pk-tab.is-active {
    color: var(--brass);
  }
  .pk-tab__icon {
    font-size: 1.05rem;
    line-height: 1;
  }
  .pk-tab__label {
    font-family: var(--font-mono);
    font-size: 0.52rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;

    /* Past het label toch niet, dan afkappen in plaats van de balk oprekken. */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Op een smal toestel is er geen ruimte voor lange woorden. */
  @media (max-width: 360px) {
    .pk-tab__label {
      font-size: 0.48rem;
      letter-spacing: 0;
    }
    .pk-tab {
      padding-left: 0.1rem;
      padding-right: 0.1rem;
    }
  }

  /* Ruimte onderaan, anders valt de laatste knop onder de balk. */
  body {
    padding-bottom: 4.5rem;
  }

  /* Het menu bovenin is dan overbodig. */
  .pk-nav a:not(.pk-btn) {
    display: none;
  }

  /* Grotere raakvlakken op een telefoon. */
  .pk-btn {
    min-height: 44px;
  }
  .pk-seg__btn,
  .pk-diet__btn,
  .pk-share__btn {
    min-height: 40px;
  }
}

@media print {
  .pk-tabbar {
    display: none !important;
  }
}

/* ==========================================================================
   Pro-pagina
   ========================================================================== */

.pk-pro {
  max-width: 760px;
  padding-bottom: 5rem;
}
.pk-pro__head {
  text-align: center;
  margin-bottom: 2.5rem;
}
.pk-pro__head h1 {
  margin: 0.3rem 0 0;
}
.pk-pro__sub {
  margin: 0.9rem auto 0;
  max-width: 34rem;
  color: var(--linen-dim);
  line-height: 1.65;
}

.pk-compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.pk-compare th,
.pk-compare td {
  padding: 0.9rem 0.7rem;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.pk-compare thead th {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--linen-faint);
  border-bottom-color: var(--line);
}
.pk-compare thead th.is-pro,
.pk-compare td.is-pro {
  color: var(--brass);
}
.pk-compare tbody th {
  font-weight: normal;
}
.pk-compare tbody th strong {
  display: block;
  color: var(--linen);
  font-weight: 500;
}
.pk-compare tbody th span {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.8rem;
  color: var(--linen-faint);
  line-height: 1.5;
}
.pk-compare td {
  white-space: nowrap;
  color: var(--linen-dim);
}
.pk-compare__no {
  color: var(--linen-faint);
  opacity: 0.6;
}

.pk-pro__cta {
  text-align: center;
  margin-top: 3rem;
  padding: 2rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.pk-pro__price {
  margin: 0 0 1.5rem;
}
.pk-pro__price strong {
  font-size: 2.1rem;
  color: var(--linen);
  display: block;
  line-height: 1.1;
}
.pk-pro__price span {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--linen-faint);
}
.pk-btn--wide {
  width: 100%;
  max-width: 20rem;
}

.pk-pro__waitlist p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--linen-dim);
  max-width: 30rem;
  margin: 0 auto 1.25rem;
}
#pk-waitlist-form {
  display: flex;
  gap: 0.5rem;
  max-width: 26rem;
  margin: 0 auto;
  flex-wrap: wrap;
}
#pk-waitlist-email {
  flex: 1 1 12rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--linen);
  padding: 0.6rem 0.75rem;
  font-size: 0.92rem;
  font-family: inherit;
}
#pk-waitlist-email:focus {
  outline: none;
  border-color: var(--brass);
}

.pk-pro__usage {
  margin-top: 2rem;
}
.pk-pro__usage h2 {
  font-size: 1.05rem;
  margin: 0 0 1.25rem;
}
.pk-pro__bars {
  display: grid;
  gap: 1.1rem;
}
.pk-bar__top {
  display: flex;
  justify-content: space-between;
  font-size: 0.88rem;
  color: var(--linen-dim);
  margin-bottom: 0.4rem;
}
.pk-bar__count {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--linen-faint);
}
.pk-bar__track {
  height: 4px;
  background: var(--line-soft);
  border-radius: 2px;
  overflow: hidden;
}
.pk-bar__fill {
  height: 100%;
  background: var(--brass);
}

@media (max-width: 600px) {
  .pk-compare th,
  .pk-compare td {
    padding: 0.75rem 0.4rem;
    font-size: 0.85rem;
  }
  .pk-compare tbody th span {
    display: none;
  }
}

.pk-cellar-card--empty .pk-cellar-card__note {
  max-width: 32rem;
}
.pk-pro__compare {
  overflow-x: auto;
}

.pk-pro__viaapp {
  font-size: 0.88rem;
  color: var(--linen-dim);
  margin: 0 0 1rem;
}

/* De vierde tab valt op zolang iemand geen Pro heeft. */
.pk-tab.is-accent {
  color: var(--brass);
}
.pk-tab.is-accent .pk-tab__icon svg {
  fill: rgba(198, 156, 90, 0.15);
}
.pk-tab.is-accent .pk-tab__label {
  font-weight: 600;
}
.pk-tab__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
}



/* Balk die eraan herinnert dat je als gratis gebruiker kijkt. */
.pk-preview-bar {
  background: var(--brass);
  color: var(--ink);
  padding: 0.55rem 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.pk-preview-bar a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   De knop naar de Play Store.

   Staat in style.css en niet in dashboard.css, want hij komt op de homepage,
   in de voettekst, op het dashboard en op de accountpagina. Alles wat overal
   voorkomt hoort hier.

   De regel die hem in de app verbergt is de belangrijkste van dit blok: de app
   is deze website in een venster, en daar zou de knop betekenen dat je iemand
   vraagt te installeren wat hij al open heeft.
   -------------------------------------------------------------------------- */
.pk-in-app .pk-play,
.pk-in-app .pk-play-blok,
.pk-in-app .pk-play-na,
.pk-in-app .pk-play-naast,
.pk-in-app .pk-play-blok-hoes,
.pk-in-app .pk-footer__app {
  display: none !important;
}

.pk-play {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1rem;
  color: var(--linen);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.15s, background 0.15s;
}
.pk-play:hover {
  color: var(--linen);
  text-decoration: none;
  border-color: var(--brass);
  background: rgba(180, 145, 85, 0.1);
}
.pk-play__icon {
  display: flex;
  align-items: center;
}
.pk-play__tekst {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.pk-play__klein {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--linen-faint);
}
.pk-play__groot {
  font-size: 0.95rem;
  font-weight: 600;
}
.pk-play--klein {
  padding: 0.45rem 0.8rem;
}
.pk-play--klein .pk-play__groot {
  font-size: 0.85rem;
}

/* Naast de hoofdknop in het slotblok van de homepage. */
.pk-play-naast {
  margin-top: 1.2rem;
}

/*
 * De uitnodiging na een advies.
 *
 * Pas zichtbaar wanneer er iets staat, want daarvoor leidt hij af van waar
 * iemand voor kwam.
 */
.pk-play-blok {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 2rem 0;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--brass);
  border-radius: var(--radius);
}
.pk-play-blok strong {
  display: block;
  margin-bottom: 0.2rem;
}
.pk-play-blok p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--linen-dim);
}

/* --------------------------------------------------------------------------
   De taalkiezer in de voettekst.

   Een rij met de vijf talen, waarbij de huidige geen link is. Minder gedoe dan
   een uitklapmenu en op een telefoon makkelijker te raken.
   -------------------------------------------------------------------------- */
.pk-taalkiezer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.15rem 0.9rem;
  margin-top: 1.1rem;
  font-size: 0.78rem;
}
.pk-taalkiezer a {
  color: var(--linen-faint);
  text-decoration: none;
}
.pk-taalkiezer a:hover {
  color: var(--brass);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pk-taalkiezer__nu {
  color: var(--linen);
  font-weight: 600;
}