/* SPAR Alkmaar — tijdelijke website
   Kleuren volgens "SPAR Alkmaar Digitale kleurenrichtlijnen". */

/* Fonts zonder de defecte "kern"-tabel (die gaf in Safari o.a. "boodscha ppen") */
@font-face {
  font-family: "Omnes Spar";
  src: url("../fonts/OmnesSpar-Regular-nokern.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  /* Omnes heeft veel ruimte boven de letters: dit centreert tekst verticaal in knoppen en labels */
  ascent-override: 95%;
  descent-override: 12%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Omnes Spar";
  src: url("../fonts/OmnesSpar-SemiBold-nokern.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  /* Omnes heeft veel ruimte boven de letters: dit centreert tekst verticaal in knoppen en labels */
  ascent-override: 95%;
  descent-override: 12%;
  line-gap-override: 0%;
}

:root {
  --spar-green: #007a3d;
  --deep-green: #004b35;
  --footer-green: #003f2d;
  --spar-red: #e51b35;     /* knoppen: wit erop haalt WCAG AA (4,6:1) */
  --cta-red: #f3263f;
  --red-hover: #c8102e;
  --green-hover: #00672f;
  --cream: #f8f5ed;
  --soft-green: #eef5e6;
  --soft-red: #fce6e3;
  --soft-yellow: #fff1c9;
  --charcoal: #202622;
  --muted: #4d5a52;
  --white: #fff;

  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-pill: 999px;
  --shadow: 0 18px 50px -24px rgba(0, 63, 45, .35);
  --container: 1200px;
  --gutter: clamp(20px, 5vw, 48px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --header-h: 76px;   /* hoogte sticky header */
  --peek: 190px;      /* hoeveel van de kaarten boven de vouw zichtbaar is */
  --font: "Omnes Spar", "Omnes", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 20px); }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--charcoal);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
a { color: inherit; }

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Toegankelijkheid ---------- */
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 12px 18px; border-radius: 12px;
  background: var(--deep-green); color: var(--white); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 16px; }

:focus-visible {
  outline: 3px solid var(--spar-green);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Typografie ---------- */
.eyebrow {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--spar-green);
  margin-bottom: 12px;
}
.eyebrow--light { color: #cfe8d3; }
.eyebrow--red { color: #c3132b; }

.section-title {
  font-size: clamp(1.875rem, 1.3rem + 2.4vw, 3rem);
  line-height: 1.08;
  font-weight: 600;
  color: var(--deep-green);
  letter-spacing: -.01em;
  text-wrap: balance;
}

/* ---------- Knoppen ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px;
  padding: 14px 24px;
  border-radius: var(--radius-pill);
  font-family: inherit; font-size: 1.0625rem; font-weight: 600; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  border: 0; cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.btn--sm { min-height: 44px; padding: 10px 18px; font-size: .9375rem; }
.btn__arrow { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.btn:hover .btn__arrow, .btn:focus-visible .btn__arrow { transform: translateX(3px); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--green { background: var(--spar-green); color: var(--white); }
.btn--green:hover { background: var(--green-hover); }
.btn--red { background: var(--spar-red); color: var(--white); }
.btn--red:hover { background: var(--red-hover); }
.btn--white { background: var(--white); color: var(--deep-green); }
.btn--white:hover { background: var(--soft-green); }
.btn--light { background: var(--white); color: var(--deep-green); box-shadow: inset 0 0 0 2px rgba(0, 122, 61, .22); }
.btn--light:hover { box-shadow: inset 0 0 0 2px var(--spar-green); }
.btn--red, .btn--green { box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .45); }

.btn__short { display: none; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  transition: box-shadow .25s var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 6px 24px -12px rgba(0, 63, 45, .28); }

.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 76px; padding-block: 12px;
}

.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.brand__logo { width: auto; height: 34px; }

.header-actions { display: flex; gap: 10px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 70% at 78% 48%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, var(--soft-green) 0%, #f4f9ef 62%, var(--white) 100%);
}

/* De kaarten beginnen net boven de vouw: hero = viewport − header − peek */
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  min-height: clamp(480px, calc(100vh - var(--header-h) - var(--peek)), 720px);
  min-height: clamp(480px, calc(100svh - var(--header-h) - var(--peek)), 720px);
  padding-block: 40px 32px;
}
.hero__content { max-width: 600px; }

.hero__title {
  font-size: clamp(2.25rem, min(1.4rem + 4vw, 7.6vh), 4.25rem);
  line-height: 1.03;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--deep-green);
  text-wrap: balance;
  margin-bottom: 18px;
}
.hero__intro {
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.3125rem);
  line-height: 1.5;
  max-width: 36ch;
  color: var(--muted);
  margin-bottom: 28px;
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }

.hero__visual {
  position: relative;
  align-self: stretch;
  display: grid; place-items: center;
}
.hero__glow {
  position: absolute; inset: 8% 6% 4%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 55%, rgba(196, 215, 187, .55) 0%, rgba(196, 215, 187, 0) 68%);
  z-index: 0;
}
.hero__basket {
  position: relative; z-index: 1;
  width: 100%; max-width: 720px;
  max-height: calc(100% - 8px);
  object-fit: contain;
}

.leaf { position: absolute; z-index: 2; width: 40px; height: 40px; color: var(--spar-green); opacity: .85; }
.leaf svg { width: 100%; height: 100%; fill: currentColor; }
.leaf--1 { top: 6%; left: 10%; transform: rotate(-18deg); }
.leaf--2 { bottom: 12%; right: 4%; width: 28px; height: 28px; opacity: .6; transform: rotate(140deg); }

/* ---------- Vier blokken ---------- */
.routes { padding-bottom: clamp(56px, 8vw, 96px); }
.routes__grid { display: grid; gap: 20px; grid-template-columns: 1fr; }

.route {
  display: flex; flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--soft-yellow);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.route--bezorgd { background: var(--soft-red); }
.route--foodclub { background: var(--soft-green); }
.route--lokaal { background: #f6eddc; }
.route:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -30px rgba(0, 48, 34, .4); }

.route__media {
  display: flex; align-items: center; justify-content: center;
  height: 190px;
  padding: 18px 18px 0;
}
.route__media img {
  width: auto; height: auto; max-width: 100%; max-height: 100%;
  transition: transform .7s var(--ease);
}
.route:hover .route__media img { transform: scale(1.06) rotate(-1.5deg); }

.route__body { padding: 18px 24px 24px; display: flex; flex-direction: column; align-items: flex-start; flex: 1; }
.route__body .eyebrow { font-size: .75rem; margin-bottom: 8px; }
.route__title {
  font-size: clamp(1.3125rem, 1.1rem + .6vw, 1.5rem);
  line-height: 1.12; font-weight: 600; color: var(--deep-green);
  letter-spacing: -.01em; text-wrap: balance;
  margin-bottom: 8px;
}
.route__text { color: var(--muted); font-size: .96875rem; line-height: 1.5; margin-bottom: 20px; }
.route__body > .btn, .route__body > .link-arrow { margin-top: auto; }
.btn--card { min-height: 46px; padding: 11px 18px; font-size: .9375rem; }

/* ---------- Winkels ---------- */
.stores { background: var(--cream); padding-block: clamp(56px, 8vw, 104px); }
.stores__head { margin-bottom: clamp(28px, 4vw, 48px); }
.stores__grid { display: grid; gap: 24px; grid-template-columns: 1fr; }

.store {
  display: flex; flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--white);
  padding: clamp(20px, 3vw, 28px);
}
.store__logo { height: 64px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; margin-bottom: 20px; }
.store__media { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 16 / 10; margin-bottom: 22px; background: var(--soft-green); }
.store__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.store:hover .store__media img { transform: scale(1.04); }
.store__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-inline: 4px; }
.store__name { font-size: 1.5rem; line-height: 1.15; font-weight: 600; color: var(--deep-green); }
.store__address { color: var(--muted); }
.store__today { font-size: 1.0625rem; }
.store__today span { color: var(--muted); }

.status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 10px;
  border-radius: var(--radius-pill);
  background: #e6e9e7; color: var(--charcoal);
  font-size: .9375rem;
}
.status__label { line-height: 1.2; }
.status strong { font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: .8125rem; }
.status__icon {
  width: 18px; height: 18px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--muted); color: var(--white);
  font-size: 11px; font-weight: 700; line-height: 1;
}
.status.is-open { background: #dcefdf; color: #0b5a31; }
.status.is-open .status__icon { background: var(--spar-green); }
.status.is-open .status__icon::before { content: "\2713"; }
.status.is-closed { background: var(--soft-red); color: #9e0f22; }
.status.is-closed .status__icon { background: var(--spar-red); }
.status.is-closed .status__icon::before { content: "\2715"; }

.week { width: 100%; }
.week summary {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; cursor: pointer;
  font-weight: 600; color: var(--spar-green);
  list-style: none;
}
.week summary::-webkit-details-marker { display: none; }
.week summary::after {
  content: ""; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0;
  transform: translateY(-2px) rotate(45deg); transition: transform .2s var(--ease);
}
.week[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.week__list { margin: 4px 0 8px; max-width: 360px; }
.week__row { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-bottom: 1px solid #ece8de; }
.week__row dd { font-variant-numeric: tabular-nums; }
.week__row.is-today { font-weight: 600; color: var(--deep-green); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px;
  font-weight: 600; color: var(--deep-green);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
  text-decoration-color: rgba(0, 122, 61, .35);
}
.link-arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.link-arrow:hover { text-decoration-color: var(--spar-green); }
.link-arrow:hover svg { transform: translateX(3px); }

.noscript { margin-top: 20px; color: var(--muted); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--footer-green);
  color: rgba(255, 255, 255, .9);
  padding-block: 28px;
  font-size: .9375rem;
  text-align: center;
}

.site-footer__links { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 24px; margin-top: 8px; }
.site-footer a, .linklike {
  color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, .45);
}
.site-footer a:hover, .site-footer .linklike:hover { text-decoration-color: currentColor; }
.linklike { background: none; border: 0; padding: 0; cursor: pointer; }
.site-footer :focus-visible { outline-color: var(--white); }

/* ---------- Cookiemelding ---------- */
.cookie {
  position: fixed; z-index: 60;
  left: var(--gutter); bottom: 20px;
  width: min(460px, calc(100% - 2 * var(--gutter)));
  padding: 22px 24px 24px;
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: 0 24px 60px -20px rgba(0, 48, 34, .45), 0 0 0 1px rgba(0, 75, 53, .08);
  animation: rise .5s var(--ease) both;
}
.cookie[hidden] { display: none; }
.cookie__title { font-size: 1.1875rem; font-weight: 600; color: var(--deep-green); margin-bottom: 6px; }
.cookie__text { font-size: .9375rem; line-height: 1.5; color: var(--muted); margin-bottom: 16px; }
.cookie__text a { color: var(--deep-green); font-weight: 600; text-underline-offset: 3px; }
.cookie__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cookie__actions .btn { width: 100%; }

/* ---------- Privacypagina ---------- */
.site-header--simple .site-header__inner { flex-direction: row; }
.link-arrow--back { text-decoration: none; }
.link-arrow--back:hover svg { transform: translateX(-3px); }
.legal { background: linear-gradient(180deg, var(--soft-green) 0, var(--white) 320px); }
.legal__inner { max-width: calc(760px + 2 * var(--gutter)); padding-block: clamp(40px, 6vw, 72px) clamp(56px, 8vw, 96px); }
.legal__title { font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem); line-height: 1.05; font-weight: 600; color: var(--deep-green); letter-spacing: -.02em; }
.legal__meta { color: var(--muted); margin: 10px 0 8px; }
.legal h2 { font-size: 1.375rem; line-height: 1.2; font-weight: 600; color: var(--deep-green); margin: 36px 0 10px; }
.legal p, .legal li { line-height: 1.65; }
.legal p + p { margin-top: 12px; }
.legal ul { padding-left: 1.2em; margin: 10px 0 0; }
.legal .legal__contacts { list-style: none; padding: 0; display: grid; gap: 12px; margin-top: 14px; }
.legal .legal__contacts li { margin: 0; padding: 14px 18px; border-radius: 14px; background: var(--soft-green); line-height: 1.55; }
@media (min-width: 640px) { .legal .legal__contacts { grid-template-columns: 1fr 1fr; } }
.legal li + li { margin-top: 8px; }
.legal a { color: var(--deep-green); font-weight: 600; text-underline-offset: 3px; }
.legal .linklike--inline { color: var(--deep-green); font-weight: 600; text-decoration-color: rgba(0, 122, 61, .45); }
.legal__table-wrap { overflow-x: auto; margin: 14px 0 16px; border-radius: 14px; border: 1px solid #e3e8e1; }
.legal__table { width: 100%; border-collapse: collapse; font-size: .9375rem; min-width: 560px; }
.legal__table th, .legal__table td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid #e3e8e1; }
.legal__table th { background: var(--soft-green); color: var(--deep-green); font-weight: 600; }
.legal__table tr:last-child td { border-bottom: 0; }
.legal code { font-size: .875em; background: var(--cream); padding: 2px 6px; border-radius: 6px; }
mark.todo { background: #fff1c9; color: #7a4b00; padding: 1px 4px; border-radius: 4px; font-weight: 600; }

/* ---------- Animatie ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes drop { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }
@keyframes basket-in { from { opacity: 0; transform: translateX(60px) scale(.92) rotate(3deg); } to { opacity: 1; transform: none; } }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes sway { 0%, 100% { rotate: 0deg; translate: 0 0; } 50% { rotate: 8deg; translate: 0 -6px; } }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(0, 122, 61, .45); }
  70% { box-shadow: 0 0 0 8px rgba(0, 122, 61, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 122, 61, 0); }
}

/* "backwards": na de animatie neemt de gewone CSS (zoals hover) het weer over */
.js .site-header { animation: drop .7s var(--ease) backwards; }
.js .anim { animation: rise .8s var(--ease) backwards; animation-delay: var(--d, 0ms); }
.js .anim--card { animation-duration: .9s; }
.js .anim--visual { animation: basket-in 1.1s cubic-bezier(.16, .8, .24, 1) backwards; animation-delay: var(--d, 0ms); }
.hero__basket { animation: float 6s ease-in-out 1.4s infinite; }
.leaf--1 { animation: sway 5s ease-in-out infinite; }
.leaf--2 { animation: sway 6.5s ease-in-out 1s infinite; }

.js [data-reveal] {
  opacity: 0; transform: translateY(32px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }
.js .store[data-reveal] .store__media img { transform: scale(1.1); }
.js .store[data-reveal].is-visible .store__media img { transform: none; }
.js .store[data-reveal].is-visible:hover .store__media img { transform: scale(1.04); }

.status.is-open .status__icon { animation: pulse 2.4s ease-out infinite; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .store[data-reveal] .store__media img { transform: none; }
  .route:hover, .route:hover .route__media img, .btn:hover { transform: none; }
}

/* ---------- Responsive ---------- */
@media (min-width: 760px) {
  .routes__grid, .stores__grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1100px) {
  .routes__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 760px) and (max-width: 1023px) {
  .brand__logo { height: 24px; }
  .btn__long { display: none; }
  .btn__short { display: inline; }
}

@media (max-width: 899px) {
  .hero__inner { grid-template-columns: 1fr; min-height: 0; padding-block: 36px 24px; gap: 8px; }
  .hero__visual { order: 2; }
  .hero__basket { max-width: 460px; max-height: none; }
  .hero { background:
    radial-gradient(ellipse 80% 40% at 50% 78%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, var(--soft-green) 0%, #f4f9ef 70%, var(--white) 100%); }
}

@media (max-width: 759px) {
  /* Mobiel: alleen het logo over de volle breedte; de bestelknoppen staan direct eronder in de hero */
  :root { --header-h: 62px; }
  .site-header__inner { min-height: 0; padding-block: 16px; }
  .header-actions { display: none; }
  .brand { flex: 1; }
  .brand__logo { width: 100%; height: auto; max-width: 420px; margin-inline: auto; }
  .site-header--simple .brand { flex: 0 1 50%; }
  .site-header--simple .back__long { display: none; }
  .cookie { left: 12px; bottom: 12px; width: calc(100% - 24px); padding: 18px 18px 20px; }
  .route__media { height: 170px; }
  .hero__basket { max-height: 250px; width: auto; }
}

@media (max-width: 420px) {
  .hero__ctas { flex-direction: column; }
  .hero__ctas .btn { width: 100%; }
  .leaf { display: none; }
}