/* ─── Systeem Keizer site — pages on the "Systeem Keizer" template ───────────
   Uploaded to wp-content/uploads/sk-apps/sk-site.css and loaded by
   mu-plugins/sk-site.php on pages that use the template; Avada's own CSS is
   not loaded there, so this file styles the whole page: header, menu,
   sections, components and footer.

   Same design as the apps (src/theme/primitives.ts, light mode): parchment
   background, cream cards, trophy gold buttons with dark-brown labels,
   brick red accent band; Quicksand for all text, Fraunces only for the app
   names and the price. Fonts are self-hosted — no visitor IP goes to Google. */

@font-face { font-family: "SK Quicksand"; font-weight: 400; font-display: swap; src: url("/wp-content/uploads/sk-apps/fonts/quicksand-400.woff2") format("woff2"); }
@font-face { font-family: "SK Quicksand"; font-weight: 500; font-display: swap; src: url("/wp-content/uploads/sk-apps/fonts/quicksand-500.woff2") format("woff2"); }
@font-face { font-family: "SK Quicksand"; font-weight: 600; font-display: swap; src: url("/wp-content/uploads/sk-apps/fonts/quicksand-600.woff2") format("woff2"); }
@font-face { font-family: "SK Quicksand"; font-weight: 700; font-display: swap; src: url("/wp-content/uploads/sk-apps/fonts/quicksand-700.woff2") format("woff2"); }
@font-face { font-family: "SK Fraunces"; font-weight: 600; font-display: swap; src: url("/wp-content/uploads/sk-apps/fonts/fraunces-600.woff2") format("woff2"); }

:root {
  --sk-parchment: #F0EBD8;
  --sk-cream: #FFF9F0;
  --sk-tint: #F5E4A8;
  --sk-text: #2A1508;
  --sk-text-2: #5A3C24;
  --sk-gold: #AD7C16;
  --sk-gold-pressed: #A67512;
  --sk-on-gold: #1E0E00;
  --sk-link: #7D5A10;
  --sk-red: #8B2323;
  --sk-on-red: #FDF5E6;
  --sk-border: #D9CBAE;
  --sk-border-strong: #8C7050;
  --sk-font: "SK Quicksand", "Quicksand", system-ui, sans-serif;
  --sk-serif: "SK Fraunces", "Fraunces", Georgia, serif;
  --sk-gutter: 56px;
}

body.sk-site { margin: 0; background: var(--sk-parchment); color: var(--sk-text); font-family: var(--sk-font); font-size: 17px; line-height: 1.6; font-weight: 500; -webkit-font-smoothing: antialiased; }
.sk-site *, .sk-site *::before, .sk-site *::after { box-sizing: border-box; }
.sk-site img { max-width: 100%; }
.sk-site p, .sk-site li { color: var(--sk-text-2); font-size: 17px; line-height: 1.6; font-weight: 500; }
.sk-site p { margin: 0 0 14px; }
.sk-site h1, .sk-site h2, .sk-site h3 { font-family: var(--sk-font); color: var(--sk-text); font-weight: 700; letter-spacing: -0.01em; margin: 0 0 14px; text-transform: none; }
.sk-site h1 { font-size: 48px; line-height: 1.1; }
.sk-site h2 { font-size: 34px; line-height: 1.2; }
.sk-site h3 { font-size: 21px; line-height: 1.3; }
.sk-site a { color: var(--sk-link); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sk-site a:focus-visible, .sk-site .sk-menu-toggle:focus-visible + .sk-menu-btn { outline: 3px solid var(--sk-link); outline-offset: 3px; }

.sk-skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--sk-cream); padding: 10px 16px; border-radius: 12px; }
.sk-skip:focus { top: 12px; }

/* ── Header and menu ─────────────────────────────────────────────────────── */
.sk-header { position: sticky; top: 0; z-index: 50; background: var(--sk-cream); border-bottom: 1px solid var(--sk-border); }
.admin-bar .sk-header { top: 32px; }
.sk-header-inner { max-width: 1140px; margin: 0 auto; padding: 10px var(--sk-gutter); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.sk-site .sk-brand { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; color: var(--sk-text); text-decoration: none; }
.sk-brand img { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--sk-border); display: block; }
.sk-brand span { font-family: var(--sk-serif); font-weight: 600; font-size: 22px; letter-spacing: 0; }
.sk-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.sk-site .sk-nav-link { display: flex; align-items: center; min-height: 44px; padding: 8px 14px; border-radius: 12px; color: var(--sk-text-2); text-decoration: none; font-weight: 600; font-size: 16px; }
.sk-site .sk-nav-link:hover { background: var(--sk-parchment); color: var(--sk-text); }
.sk-site .sk-nav-link[aria-current="page"] { background: var(--sk-tint); color: var(--sk-text); }

/* A checkbox opens the menu on a phone — no script needed. */
.sk-menu-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.sk-menu-btn { display: none; }

@media (max-width: 960px) {
  .sk-menu-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--sk-link); border-radius: 12px; color: var(--sk-link); font-weight: 600; cursor: pointer; }
  .sk-menu-icon, .sk-menu-icon::before, .sk-menu-icon::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 1px; position: relative; }
  .sk-menu-icon::before, .sk-menu-icon::after { content: ""; position: absolute; left: 0; }
  .sk-menu-icon::before { top: -6px; }
  .sk-menu-icon::after { top: 6px; }
  .sk-nav { display: none; flex-basis: 100%; padding-bottom: 8px; }
  .sk-menu-toggle:checked ~ .sk-nav { display: block; }
  .sk-nav ul { flex-direction: column; }
  .sk-site .sk-nav-link { font-size: 17px; }
}

/* ── Sections and columns ───────────────────────────────────────────────── */
.sk-sec { padding: 72px var(--sk-gutter); }
.sk-sec.sk-pad-l { padding-top: 80px; padding-bottom: 80px; }
.sk-sec.sk-pad-s { padding-top: 16px; padding-bottom: 16px; }
.sk-bg-parchment { background: var(--sk-parchment); }
.sk-bg-cream { background: var(--sk-cream); }
.sk-bg-red { background: var(--sk-red); }
.sk-row { max-width: 1140px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 40px 56px; }
.sk-col { min-width: 0; }
.sk-col-1_1 { flex: 1 1 100%; }
.sk-col-1_2 { flex: 1 1 calc(50% - 28px); }
.sk-align-stretch { align-self: stretch; }
.sk-align-start { align-self: flex-start; }
.sk-prose { max-width: 46em; margin: 0 auto; }
.sk-site .sk-legal h2 { font-size: 26px; margin-top: 36px; }
.sk-site .sk-legal h3 { font-size: 19px; margin-top: 22px; margin-bottom: 8px; }

/* ── Components ─────────────────────────────────────────────────────────── */
.sk-site .sk-wordmark { font-family: var(--sk-serif); font-weight: 600; letter-spacing: 0; }
.sk-site .sk-eyebrow { display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sk-red); margin-bottom: 10px; }
.sk-site .sk-lead { font-size: 19px; color: var(--sk-text-2); max-width: 36em; }
.sk-site .sk-small { font-size: 14px; }

.sk-site .sk-btn { display: inline-block; min-height: 48px; padding: 13px 24px; border-radius: 12px; font-weight: 600; font-size: 17px; line-height: 22px; text-decoration: none; background: var(--sk-gold); color: var(--sk-on-gold); border: 1px solid var(--sk-gold); }
.sk-site .sk-btn:hover, .sk-site .sk-btn:focus { background: var(--sk-gold-pressed); color: var(--sk-on-gold); }
.sk-site .sk-btn-ghost { background: transparent; color: var(--sk-link); border-color: var(--sk-link); }
.sk-site .sk-btn-ghost:hover, .sk-site .sk-btn-ghost:focus { background: var(--sk-tint); color: var(--sk-link); }
.sk-site .sk-btn small { display: block; font-size: 13px; font-weight: 500; line-height: 18px; }
.sk-site .sk-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.sk-site .sk-actions + .sk-small { margin-top: 14px; }

/* Official store badges. Google's PNG carries its own padding. */
.sk-site .sk-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 22px; }
.sk-site .sk-badges a { display: inline-block; text-decoration: none; }
.sk-site .sk-badge-apple { height: 48px; width: auto; display: block; }
.sk-site .sk-badge-google { height: 70px; width: auto; display: block; margin: -11px -10px; }
/* Before release: a message where the badges will go, beside a button to the
   sign-up form. .sk-badges centres them on one line. */
.sk-site .sk-soon { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; color: var(--sk-text); font-weight: 700; font-size: 17px; line-height: 1.3; }
.sk-site .sk-soon::before { content: "♔"; font-size: 18px; color: var(--sk-link); }
.sk-site .sk-bg-red .sk-soon, .sk-site .sk-bg-red .sk-soon::before { color: var(--sk-on-red); }
.sk-site .sk-bg-red .sk-btn:not(.sk-btn-ghost) { color: var(--sk-on-gold); }

/* Interest form (mu-plugins/sk-interest.php). */
.sk-site .sk-interest { max-width: 640px; margin: 0 auto; scroll-margin-top: 96px; }
.sk-site .sk-interest-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; margin: 18px 0; }
.sk-site .sk-field { flex: 1 1 220px; display: flex; flex-direction: column; gap: 6px; }
.sk-site .sk-field label { font-weight: 600; font-size: 15px; color: var(--sk-text); }
.sk-site .sk-field input { min-height: 48px; padding: 10px 14px; border: 1px solid var(--sk-border-strong); border-radius: 12px; background: var(--sk-cream); color: var(--sk-text); font: 500 17px var(--sk-font); }
.sk-site .sk-field input:focus-visible { outline: 3px solid var(--sk-link); outline-offset: 2px; }
.sk-site .sk-interest-form .sk-btn { cursor: pointer; font-family: var(--sk-font); }
.sk-site .sk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sk-site .sk-interest-msg { margin: 18px 0; padding: 16px 18px; border-radius: 12px; background: var(--sk-tint); border: 1px solid var(--sk-link); color: var(--sk-text); }
.sk-site .sk-interest-error { color: var(--sk-red); font-weight: 600; }

/* Screenshots: rounded like the device, hairline + soft shadow. */
.sk-site .sk-shot { display: block; width: 100%; height: auto; border-radius: 28px; border: 1px solid var(--sk-border); box-shadow: 0 18px 40px rgba(42, 21, 8, 0.14); background: var(--sk-cream); }
.sk-site .sk-shot-phone { max-width: 270px; margin: 0 auto; }
.sk-site .sk-shot-ipad { border-radius: 22px; }
.sk-site .sk-shot-watch { max-width: 160px; border-radius: 40px; margin: 0 auto; }
.sk-site figure { margin: 0; }
.sk-site figcaption { margin-top: 12px; text-align: center; font-size: 14px; font-weight: 600; color: var(--sk-text-2); }
.sk-site .sk-icon-large { display: block; width: 160px; height: 160px; margin: 0 auto; border-radius: 36px; border: 1px solid var(--sk-border); box-shadow: 0 18px 40px rgba(42, 21, 8, 0.14); }

.sk-site .sk-gallery { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 20px; }
.sk-site .sk-gallery > figure { flex: 0 1 170px; }
.sk-site .sk-gallery-ipad > figure { flex-basis: 330px; }
.sk-site .sk-gallery-watch > figure { flex-basis: 160px; }

/* Cards — the app's raised surface. */
.sk-site .sk-card { background: var(--sk-cream); border: 1px solid var(--sk-border); border-radius: 20px; padding: 28px; height: 100%; }
.sk-site .sk-bg-cream .sk-card { background: var(--sk-parchment); }
.sk-site .sk-card > :last-child { margin-bottom: 0; }
.sk-site .sk-card-selected, .sk-site .sk-bg-cream .sk-card-selected { background: var(--sk-tint); border-color: var(--sk-link); }
.sk-site .sk-card .sk-shot-phone { max-width: 220px; margin-bottom: 24px; }
/* The two app cards on De apps: the store row and the buttons sit centred under the centred screenshot. */
.sk-site .sk-card-app .sk-badges, .sk-site .sk-card-app .sk-actions { justify-content: center; }
.sk-site .sk-price { font-family: var(--sk-serif); font-weight: 600; font-size: 40px; line-height: 1; color: var(--sk-text); margin: 6px 0 14px; display: block; }
.sk-site ul.sk-list { list-style: none; padding: 0; margin: 0 0 14px; }
.sk-site ul.sk-list li { position: relative; padding-left: 26px; margin: 0 0 8px; }
.sk-site ul.sk-list li::before { content: "♔"; position: absolute; left: 0; top: 0; color: var(--sk-link); font-size: 15px; }
.sk-site ol.sk-steps { padding-left: 1.4em; margin: 0 0 14px; }
.sk-site ol.sk-steps li { margin: 0 0 10px; padding-left: 4px; }
.sk-site .sk-iban { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 700; color: var(--sk-text); }

/* Brick red band, as the app's brand sidebar. */
.sk-bg-red h2, .sk-bg-red p, .sk-site .sk-bg-red a { color: var(--sk-on-red); }
.sk-site .sk-bg-red .sk-btn-ghost { color: var(--sk-on-red); border-color: var(--sk-on-red); }
.sk-site .sk-bg-red .sk-btn-ghost:hover, .sk-site .sk-bg-red .sk-btn-ghost:focus { background: rgba(253, 245, 230, 0.14); color: var(--sk-on-red); }
.sk-site .sk-bg-red a:focus-visible { outline-color: var(--sk-on-red); }
.sk-center { text-align: center; }
.sk-center .sk-actions, .sk-center .sk-badges { justify-content: center; }
.sk-site .sk-center .sk-lead { margin-left: auto; margin-right: auto; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.sk-footer { background: var(--sk-text); padding: 48px var(--sk-gutter) 56px; }
.sk-footer-inner { max-width: 1140px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 32px 56px; }
.sk-footer-brand { flex: 1 1 280px; }
.sk-footer-col { flex: 0 1 200px; }
.sk-site .sk-footer .sk-brand { color: var(--sk-on-red); }
.sk-site .sk-footer p, .sk-site .sk-footer li { color: #E3D6BE; font-size: 15px; }
.sk-site .sk-footer h2 { color: var(--sk-on-red); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin: 6px 0 12px; }
.sk-footer ul { list-style: none; margin: 0; padding: 0; }
.sk-footer li { margin: 0; }
.sk-site .sk-footer li a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sk-on-red); font-weight: 600; text-decoration: none; }
.sk-site .sk-footer li a:hover { text-decoration: underline; }
.sk-site .sk-footer a:focus-visible { outline-color: var(--sk-on-red); }

/* ── Cookie consent (sk-site/footer.html) ──────────────────────────────── */
.sk-consent[hidden] { display: none; }
.sk-consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; }
.sk-consent-inner { max-width: 760px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 18px 22px; background: var(--sk-cream); border: 1px solid var(--sk-border-strong); border-radius: 20px; box-shadow: 0 18px 40px rgba(42, 21, 8, 0.22); }
.sk-site .sk-consent-inner p { flex: 1 1 320px; margin: 0; font-size: 15px; }
.sk-consent-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.sk-site .sk-consent .sk-btn { cursor: pointer; font-family: var(--sk-font); }
.sk-site .sk-footer .sk-consent-open { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--sk-on-red); font: 600 15px var(--sk-font); cursor: pointer; }
.sk-site .sk-footer .sk-consent-open:hover { text-decoration: underline; }
.sk-site .sk-footer .sk-consent-open:focus-visible { outline: 3px solid var(--sk-on-red); outline-offset: 3px; }
#branda-cookie-notice-wrap { display: none !important; }

/* ── Narrower screens ───────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --sk-gutter: 36px; }
  .sk-col-1_2 { flex-basis: 100%; }
  .sk-site h1 { font-size: 40px; }
  .sk-site h2 { font-size: 30px; }
  /* Stacked: heading and text first, then the picture, on every feature. */
  .sk-feature-text { order: -1; }
}

@media (max-width: 800px) {
  :root { --sk-gutter: 20px; }
  .sk-sec { padding-top: 56px; padding-bottom: 56px; }
  .sk-site h1 { font-size: 34px; }
  .sk-site h2 { font-size: 27px; }
  .sk-site .sk-card { padding: 22px; }
  .sk-site .sk-card .sk-badge-apple { height: 40px; }
  .sk-site .sk-card .sk-badge-google { height: 58px; margin: -9px -8px; }
}

@media (max-width: 600px) {
  .sk-site .sk-gallery > figure { flex-basis: calc(50% - 10px); }
  .sk-site .sk-gallery-ipad > figure { flex-basis: 100%; }
  .sk-brand span { font-size: 20px; }
}

@media (max-width: 782px) {
  .admin-bar .sk-header { top: 46px; }
}