/* ==========================================================================
   Toffeeblik — components for blauwtoffie.nl
   Load after tokens.css. Every class starts with tb-.
   See styleguide.html for each one drawn, and README.md for when to use it.
   ========================================================================== */

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

body {
  margin: 0;
  background: var(--tb-tin);
  color: var(--tb-on-tin);
  font-family: var(--tb-font-body);
  font-size: var(--tb-size-body);
  line-height: var(--tb-leading-body);
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }
.tb-on-label a, a.tb-link { color: var(--tb-ink); font-weight: 600; }
.tb-on-label a:hover, a.tb-link:hover { color: var(--tb-ink-toffee); }
a.tb-link { display: inline-flex; align-items: center; min-height: var(--tb-touch); }

:focus-visible { outline: 3px solid var(--tb-gold); outline-offset: 3px; border-radius: 4px; }

.tb-container { max-width: var(--tb-page-max); margin: 0 auto; padding-inline: var(--tb-gutter); }
.tb-container--text { max-width: var(--tb-text-max); }

.tb-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---- Type --------------------------------------------------------------- */
.tb-hero-title, .tb-title, .tb-h2, .tb-h3, .tb-h4 {
  margin: 0;
  overflow-wrap: break-word;
  font-family: var(--tb-font-display);
  font-weight: 400;
  line-height: var(--tb-leading-tight);
}
.tb-hero-title { font-size: var(--tb-size-hero); }
.tb-title { font-size: var(--tb-size-title); }
.tb-h2 { font-size: var(--tb-size-h2); }
.tb-h3 { font-size: var(--tb-size-h3); }
.tb-h4 { font-size: var(--tb-size-h4); }

.tb-lead { margin: 0; font-size: var(--tb-size-lead); color: var(--tb-ink-body); max-width: 560px; }
.tb-small { font-size: var(--tb-size-small); }
.tb-fine { font-size: var(--tb-size-fine); }

.tb-eyebrow {
  display: inline-flex; align-items: center; gap: var(--tb-space-4);
  font-size: var(--tb-size-eyebrow); font-weight: 700;
  letter-spacing: var(--tb-tracking-eyebrow); text-transform: uppercase;
  color: var(--tb-ink-toffee);
}

/* A four-point gold star. Decoration only: give it aria-hidden="true". */
.tb-star {
  display: inline-block; flex: none; width: 14px; height: 14px; background: var(--tb-gold);
  clip-path: polygon(50% 0, 62.5% 37.5%, 100% 50%, 62.5% 62.5%, 50% 100%, 37.5% 62.5%, 0 50%, 37.5% 37.5%);
}
.tb-rule { width: 220px; max-width: 60%; height: 3px; background: var(--tb-gold); border: 0; margin: 0; }

/* Section title sitting straight on the navy tin */
.tb-on-tin-title { color: var(--tb-on-tin); text-align: center; }

/* ---- Header and navigation --------------------------------------------- */
.tb-header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--tb-space-4); padding-block: 20px;
}
.tb-brand {
  display: flex; align-items: center; gap: var(--tb-space-3); min-height: var(--tb-touch);
  color: var(--tb-on-tin); text-decoration: none;
  font-family: var(--tb-font-display); font-size: 22px; letter-spacing: 0.02em;
}
.tb-brand img, .tb-brand svg { height: 36px; width: auto; }
.tb-nav { display: flex; flex-wrap: wrap; gap: var(--tb-space-1); }
.tb-nav a {
  display: inline-flex; align-items: center; min-height: var(--tb-touch); padding: 0 14px;
  color: var(--tb-on-tin); text-decoration: none; font-weight: 600; font-size: var(--tb-size-fine);
  text-transform: uppercase; letter-spacing: var(--tb-tracking-nav);
  border-bottom: 2px solid transparent;
}
.tb-nav a:hover { color: var(--tb-gold-light); }
.tb-nav a[aria-current="page"] { color: var(--tb-gold); border-bottom-color: var(--tb-gold); }

.tb-back {
  display: inline-flex; align-items: center; min-height: var(--tb-touch);
  color: var(--tb-on-tin); font-weight: 600;
}

/* ---- The label: cream panel with a triple gold edge -------------------- */
/* <div class="tb-label"><div class="tb-label__trim"><div class="tb-label__inner">…</div></div></div> */
.tb-label { position: relative; background: var(--tb-label); color: var(--tb-ink); border-radius: var(--tb-radius-label); padding: 10px; }
.tb-label__trim { border: var(--tb-border-trim) solid var(--tb-gold); border-radius: 20px; padding: 6px; }
.tb-label__inner {
  border: 1px solid var(--tb-gold); border-radius: 15px;
  padding: var(--tb-space-8) clamp(24px, 5vw, 48px);
  display: flex; flex-direction: column; gap: 18px;
}
.tb-label__inner--center { align-items: center; text-align: center; }
/* For a hero with a phone that runs off the bottom edge */
.tb-label__inner--split {
  flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: var(--tb-space-7);
  padding-bottom: 0; overflow: hidden;
}
.tb-label__inner--split > .tb-label__copy { flex: 999 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 18px; padding-bottom: var(--tb-space-8); }
.tb-label__inner--split > .tb-label__visual { flex: 1 1 440px; min-width: 0; display: flex; justify-content: center; }

/* ---- Seal: the round gold sticker -------------------------------------- */
/* Short words only: two lines at most. Never over app content. */
.tb-seal {
  width: 120px; height: 120px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: var(--tb-gold); color: var(--tb-on-gold);
  box-shadow: 0 0 0 5px var(--tb-tin), 0 0 0 7px var(--tb-gold);
  transform: rotate(10deg);
}
.tb-seal__big { font-family: var(--tb-font-display); font-size: 22px; line-height: 1.1; }
.tb-seal__small { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 4px; line-height: 1.25; }
.tb-seal--corner { position: absolute; top: -28px; right: 40px; }

/* ---- Buttons ------------------------------------------------------------ */
.tb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 28px; border: 0; border-radius: var(--tb-radius-pill);
  background: var(--tb-tin); color: var(--tb-on-tin);
  font: inherit; font-weight: 700; font-size: var(--tb-size-small);
  text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; cursor: pointer;
}
.tb-btn:hover { background: var(--tb-tin-raised); }
.tb-btn--gold { background: var(--tb-gold); color: var(--tb-on-gold); }
.tb-btn--gold:hover { background: var(--tb-gold-light); }
.tb-btn--plain { text-transform: none; letter-spacing: 0; font-size: var(--tb-size-lead); }

/* Two-line store or open-app button */
.tb-store {
  display: inline-flex; flex-direction: column; justify-content: center;
  min-height: 56px; padding: 0 24px; border-radius: var(--tb-radius-store);
  background: var(--tb-tin); color: var(--tb-on-tin); text-decoration: none; line-height: 1.2; text-align: left;
}
.tb-store:hover { background: var(--tb-tin-raised); }
.tb-store__small { font-size: 12px; opacity: 0.85; }
.tb-store__big { font-weight: 700; font-size: 18px; }
.tb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }

/* ---- Ticket: an app card ----------------------------------------------- */
.tb-ticket { background: var(--tb-label); color: var(--tb-ink); border-radius: var(--tb-radius-ticket); padding: 8px; }
.tb-ticket__inner {
  height: 100%; border: var(--tb-border-dash) dashed var(--tb-gold); border-radius: 18px;
  padding: clamp(24px, 3vw, 40px); display: flex; flex-wrap: wrap; gap: var(--tb-space-5);
}
.tb-ticket__copy { flex: 999 1 230px; min-width: 0; display: flex; flex-direction: column; gap: var(--tb-space-3); }
.tb-ticket__copy > :last-child { margin-top: auto; }
.tb-ticket__shot { flex: 1 1 140px; max-width: 170px; align-self: center; border-radius: 18px; border: 2px solid var(--tb-tin); }
.tb-app-name { display: flex; align-items: center; gap: 14px; }
.tb-app-icon { width: 56px; height: 56px; border-radius: 13px; }
.tb-app-icon--large { width: 80px; height: 80px; border-radius: 18px; }

.tb-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: var(--tb-space-5); }

/* Small fact list inside a ticket */
.tb-mini-facts {
  margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 16px;
  font-size: var(--tb-size-small); border-top: 1px solid var(--tb-gold); padding-top: var(--tb-space-3);
}
.tb-mini-facts dt { color: var(--tb-ink-toffee); font-weight: 600; }
.tb-mini-facts dd { margin: 0; }

/* ---- Ingredients: a feature list with gold stars ----------------------- */
.tb-ingredients {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px 28px;
  font-size: 16px; color: var(--tb-ink);
}
.tb-ingredients--single { grid-template-columns: 1fr; }
.tb-ingredients li { display: flex; gap: 12px; align-items: baseline; }
.tb-ingredients li::before {
  content: ""; flex: none; width: 12px; height: 12px; background: var(--tb-gold);
  clip-path: polygon(50% 0, 62.5% 37.5%, 100% 50%, 62.5% 62.5%, 50% 100%, 37.5% 62.5%, 0 50%, 37.5% 37.5%);
}

/* ---- What's in the tin: the facts panel -------------------------------- */
/* Plain facts only, each one true and checkable. No ratings, no claims. */
.tb-facts { background: var(--tb-paper); color: var(--tb-ink); border: 3px solid var(--tb-tin); border-radius: var(--tb-radius-panel); padding: 20px 24px; }
.tb-facts__title { margin: 0; font-family: var(--tb-font-display); font-weight: 400; font-size: 30px; line-height: 1.1; border-bottom: 10px solid var(--tb-tin); padding-bottom: 10px; }
.tb-facts dl { margin: 0; font-size: 16px; }
.tb-facts__row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--tb-tin); }
.tb-facts__row:last-child { border-bottom-width: 4px; }
.tb-facts dt { font-weight: 700; }
.tb-facts dd { margin: 0; text-align: right; }
.tb-facts__note { margin: 12px 0 0; font-size: var(--tb-size-fine); color: var(--tb-ink-body); }

/* ---- "Does not" list: drawn crosses, never emoji ----------------------- */
.tb-does-not { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 6px 24px; }
.tb-does-not li { display: flex; gap: 10px; align-items: center; }
.tb-does-not li::before {
  content: ""; flex: none; width: 13px; height: 13px; background: var(--tb-cross);
  clip-path: polygon(20% 0, 50% 30%, 80% 0, 100% 20%, 70% 50%, 100% 80%, 80% 100%, 50% 70%, 20% 100%, 0 80%, 30% 50%, 0 20%);
}

/* ---- House rule: a gold-edged box on the tin --------------------------- */
.tb-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--tb-space-4); }
.tb-rule-box { border: 2px solid var(--tb-gold); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 6px; }
.tb-rule-box__title { font-family: var(--tb-font-display); font-size: 22px; color: var(--tb-gold); }
.tb-rule-box__text { color: var(--tb-on-tin-muted); }

/* ---- Band: a cream section across the page, with a dashed gold edge ---- */
.tb-band { background: var(--tb-label); color: var(--tb-ink); }
.tb-band::before {
  content: ""; display: block; height: 12px;
  background: repeating-linear-gradient(90deg, var(--tb-gold) 0 24px, var(--tb-label) 24px 36px);
}
.tb-band__inner { padding-block: var(--tb-space-9); }

/* ---- Phones ------------------------------------------------------------- */
/* A phone cut off at the bottom edge of the label, top half showing. */
.tb-phone {
  background: var(--tb-phone-light); border: 6px solid var(--tb-phone-bezel); border-bottom: 0;
  border-radius: var(--tb-radius-phone) var(--tb-radius-phone) 0 0; padding: 18px 6px 0; overflow: hidden;
}
.tb-phone--dark { background: var(--tb-phone-dark); }
.tb-phone img { width: 100%; border-radius: 22px 22px 0 0; }
/* Inside a pair or single, the frame has a fixed shape and shows the top of any screenshot. */
.tb-phone-pair > .tb-phone, .tb-phone-single > .tb-phone { aspect-ratio: 0.8; display: flex; }
.tb-phone-pair > .tb-phone img, .tb-phone-single > .tb-phone img { height: 100%; object-fit: cover; object-position: top; }

/* Light phone in front, dark phone behind and higher. */
.tb-phone-pair { position: relative; width: 100%; max-width: 600px; aspect-ratio: 1.42; }
.tb-phone-pair > .tb-phone { position: absolute; width: 56%; }
.tb-phone-pair > .tb-phone--back { right: 0; bottom: 0; }
.tb-phone-pair > .tb-phone--front { left: 0; bottom: -12%; box-shadow: 12px 0 0 rgba(15, 39, 71, 0.18); }

/* One phone on its own */
.tb-phone-single { position: relative; width: 100%; max-width: 600px; aspect-ratio: 1.3; }
.tb-phone-single > .tb-phone { position: absolute; right: 8%; bottom: 0; width: 62%; }

/* ---- Screenshot gallery ------------------------------------------------- */
.tb-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 20px; }
.tb-shot { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.tb-shot__frame { background: var(--tb-phone-light); border: 5px solid var(--tb-gold); border-radius: 30px; padding: 12px 4px 4px; overflow: hidden; }
.tb-shot__frame--dark { background: var(--tb-phone-dark); }
.tb-shot__frame img { width: 100%; border-radius: var(--tb-radius-shot); }
.tb-shot figcaption { color: var(--tb-on-tin-muted); font-size: var(--tb-size-small); text-align: center; }

/* Light / Dark switch: real buttons with aria-pressed */
.tb-toggle { display: inline-flex; padding: 4px; gap: 4px; border: 2px solid var(--tb-gold); border-radius: var(--tb-radius-pill); }
.tb-toggle button {
  min-height: var(--tb-touch); padding: 0 22px; border: 0; border-radius: var(--tb-radius-pill);
  background: transparent; color: var(--tb-on-tin); font: inherit; font-weight: 700; cursor: pointer;
}
.tb-toggle button[aria-pressed="true"] { background: var(--tb-gold); color: var(--tb-on-gold); }

/* ---- Footer ------------------------------------------------------------- */
.tb-footer {
  display: flex; flex-wrap: wrap; gap: var(--tb-space-4); justify-content: space-between; align-items: center;
  padding-block: var(--tb-space-5); font-size: var(--tb-size-small); color: var(--tb-on-tin-muted);
}
.tb-footer nav { display: flex; flex-wrap: wrap; gap: var(--tb-space-1); }
.tb-footer a { display: inline-flex; align-items: center; min-height: var(--tb-touch); padding: 0 12px; color: var(--tb-on-tin); }

/* ---- Section spacing ---------------------------------------------------- */
.tb-section { padding-block: 0 var(--tb-space-8); display: flex; flex-direction: column; gap: var(--tb-space-6); }
.tb-stack { display: flex; flex-direction: column; gap: var(--tb-space-4); }

/* ---- Prose: long text such as a privacy policy, inside a label -------- */
.tb-prose { color: var(--tb-ink-body); }
.tb-prose h1 { margin: 0; font-family: var(--tb-font-display); font-weight: 400; font-size: clamp(26px, 6.5vw, 52px); line-height: 1.1; color: var(--tb-ink); overflow-wrap: anywhere; }
.tb-prose h2 { margin: var(--tb-space-6) 0 0; font-family: var(--tb-font-display); font-weight: 400; font-size: var(--tb-size-h4); line-height: 1.2; color: var(--tb-ink); }
.tb-prose h3 { margin: var(--tb-space-4) 0 0; font-size: 19px; font-weight: 700; color: var(--tb-ink); }
.tb-prose p, .tb-prose ul, .tb-prose ol { margin: var(--tb-space-3) 0 0; }
.tb-prose ul:not(.tb-does-not) { padding-left: 22px; }
.tb-prose li + li { margin-top: 6px; }
.tb-prose strong { color: var(--tb-ink); }
.tb-prose a { color: var(--tb-ink); font-weight: 600; }
.tb-prose .date, .tb-prose .tb-date { display: block; margin-top: var(--tb-space-3); font-size: var(--tb-size-small); font-weight: 600; color: var(--tb-ink-toffee); }
.tb-prose .tb-does-not { background: var(--tb-paper); border: 3px solid var(--tb-tin); border-radius: var(--tb-radius-panel); padding: 16px 20px; color: var(--tb-ink); }
.tb-prose .tb-does-not li + li { margin-top: 0; }

/* ---- Small screens ------------------------------------------------------ */
@media (max-width: 600px) {
  .tb-seal--corner { width: 92px; height: 92px; top: -36px; right: 12px; }
  .tb-seal--corner .tb-seal__big { font-size: 17px; }
  .tb-seal--corner .tb-seal__small { font-size: 10px; letter-spacing: 0.06em; }
  .tb-label__inner--split { gap: var(--tb-space-6); }
  .tb-label__inner--split > .tb-label__copy { padding-bottom: 0; }
}