/*
 * zapp.css — Zwanger! app brand layer
 *
 * Loaded *after* plaza.css so it can override key zp-* tokens with the
 * warm cream / coral / sage palette, and introduce zapp-* tokens for the
 * new marketing site components.
 *
 * Companion docs: brand/brand-book.md, brand/styleguide.md.
 */

@import url('https://fonts.bunny.net/css?family=fraunces:400,500,600|inter:400,500,600,700&display=swap');

/* ============================================================
 * 1. Brand tokens
 * ============================================================ */

:root {
  /* --- Primary palette ---
     Berry coral stays as the action color (consistent across LinkORB).
     What sets Zwanger! app apart visually is the SAGE-tinted neutrals
     below — deliberately distinct from 24baby's warm cream/purple bed.
     See brand/brand-book.md §4.0 for the rationale. */
  --zapp-primary:         #E0476A;  /* Berry coral */
  --zapp-primary-dark:    #B0334F;  /* Berry deep */
  --zapp-primary-soft:    #FBE3E9;  /* Berry blush */
  --zapp-secondary:       #2F6B5D;  /* Sage (deeper than v1) */
  --zapp-secondary-soft:  #DCE9E3;  /* Sage haze */
  --zapp-accent:          #1E8F86;  /* Verdant teal — replaces honey */

  /* --- Neutrals (sage-mist, not warm cream) --- */
  --zapp-bg:              #F2F6F3;  /* Mist — sage-tinted page background */
  --zapp-surface:         #FFFFFF;
  --zapp-surface-alt:     #E8EFE9;  /* Sage haze surface */
  --zapp-line:            #D7E0D9;  /* Sage-grey line */
  --zapp-muted:           #5C6B6C;  /* Cool slate */
  --zapp-ink:             #152226;  /* Forest ink */
  --zapp-ink-soft:        #3A4A4C;  /* Forest ink soft */

  /* Reserved ivory tone — used only inside the brand mark (letters on
     coral badge). Do NOT use as page or surface background; that would
     reintroduce the visual overlap with 24baby. */
  --zapp-ivory:           #FBF6EF;

  /* Warm tint specifically for cross-promo tiles (Zwangerenportaal
     weekmail / 24baby app). Visually signals "not the care
     environment" by stepping outside our sage neutrals on purpose. */
  --zapp-cross-bg:        #F7F1E6;

  /* --- Functional --- */
  --zapp-success:         #2F8A60;
  --zapp-warning:         #D29F2A;
  --zapp-danger:          #C8443B;
  --zapp-info:            #4671B0;

  /* --- Typography --- */
  --zapp-font-display:    'Fraunces', 'Newsreader', Georgia, 'Times New Roman', serif;
  --zapp-font-body:       'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* --- Geometry --- */
  --zapp-radius-sm:       8px;
  --zapp-radius-md:       12px;
  --zapp-radius-lg:       20px;
  --zapp-radius-pill:     999px;
  --zapp-shadow-sm:       0 1px 2px rgba(27, 35, 48, 0.06);
  --zapp-shadow-md:       0 4px 12px rgba(27, 35, 48, 0.08);
  --zapp-shadow-lg:       0 12px 32px rgba(27, 35, 48, 0.12);
  --zapp-maxw:            1180px;

  /* --- Override key plaza tokens so existing zp-* components inherit
         the warmer Zwanger! app look without rewriting every template. --- */
  --zp-primary:           var(--zapp-primary);
  --zp-primary-dark:      var(--zapp-primary-dark);
  --zp-primary-light:     var(--zapp-primary-soft);
  --zp-secondary-100:     var(--zapp-bg);
  --zp-secondary-200:     var(--zapp-surface-alt);
  --zp-secondary-300:     var(--zapp-primary-soft);
  --zp-secondary-400:     var(--zapp-secondary);

  --zp-blue:              var(--zapp-secondary);
  --zp-light-blue:        var(--zapp-secondary-soft);
  --zp-green:             var(--zapp-success);
  --zp-yellow:            var(--zapp-accent);

  /* Warm neutral scale — was cool blue-tinted in plaza.css. Re-mapping the
     scale here means every zp-* component that touches a neutral token
     (cards, borders, tile backgrounds, profile bar, ...) instantly adopts
     the cream/sand palette without needing per-component overrides. */
  --zp-neutral-000:       #FFFFFF;
  --zp-neutral-100:       var(--zapp-bg);
  --zp-neutral-200:       var(--zapp-line);
  --zp-neutral-300:       #D8D2C5;
  --zp-neutral-400:       #B6AE9C;
  --zp-neutral-500:       var(--zapp-muted);
  --zp-neutral-600:       var(--zapp-ink-soft);
  --zp-neutral-700:       var(--zapp-ink-soft);
  --zp-neutral-800:       var(--zapp-ink);
  --zp-neutral-900:       var(--zapp-ink);

  --zp-care-accent:       var(--zapp-secondary);
  --zp-care-accent-soft:  var(--zapp-secondary-soft);
  --zp-care-bg:           var(--zapp-bg);

  --zp-font:              var(--zapp-font-body);
  --zp-radius:            var(--zapp-radius-md);
}

/* ============================================================
 * 2. Body / global typography
 * ============================================================ */

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

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

body {
  font-family: var(--zapp-font-body);
  background: var(--zapp-bg);
  color: var(--zapp-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  overflow-x: hidden;
}

img, video, svg { max-width: 100%; height: auto; }

h1, h2, h3, h4, .zapp-display {
  font-family: var(--zapp-font-display);
  font-weight: 500;
  color: var(--zapp-ink);
  letter-spacing: -0.015em;
  line-height: 1.15;
}

a {
  color: var(--zapp-primary);
}
a:hover {
  color: var(--zapp-primary-dark);
}

::selection {
  background: var(--zapp-primary-soft);
  color: var(--zapp-ink);
}

/* ============================================================
 * 3. Marketing site components
 *    Used by templates under templates/site/.
 * ============================================================ */

/* --- Layout shell --- */

.zapp-site {
  background: var(--zapp-bg);
  color: var(--zapp-ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.zapp-container {
  width: 100%;
  max-width: var(--zapp-maxw);
  margin: 0 auto;
  padding: 0 24px;
}

@media (max-width: 480px) {
  .zapp-container { padding: 0 16px; }
}

/* --- Header / top nav --- */

.zapp-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(242, 246, 243, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--zapp-line);
}

.zapp-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 16px;
}

.zapp-header__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}
.zapp-header__brand img {
  height: 32px;
  width: auto;
  display: block;
}

@media (min-width: 821px) {
  .zapp-header__inner { height: 72px; }
  .zapp-header__brand img { height: 36px; }
}

.zapp-header__nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.zapp-header__nav a {
  color: var(--zapp-ink-soft);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  transition: color 0.15s ease;
}
.zapp-header__nav a:hover,
.zapp-header__nav a[aria-current="page"] {
  color: var(--zapp-primary);
}

.zapp-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .zapp-header__actions .zapp-btn--ghost { font-size: 13px; padding: 8px 10px; }
}

/* --- Mobile toggle + nav drawer --- */

.zapp-header__toggle {
  display: none;
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: var(--zapp-ink);
  line-height: 0;
}

.zapp-mobile-nav {
  display: none;
  flex-direction: column;
  padding: 0 24px 18px;
  gap: 2px;
  border-bottom: 1px solid var(--zapp-line);
}
.zapp-mobile-nav a {
  display: block;
  padding: 10px 12px;
  color: var(--zapp-ink-soft);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  border-radius: var(--zapp-radius-sm);
  transition: background 0.12s, color 0.12s;
}
.zapp-mobile-nav a:hover,
.zapp-mobile-nav a[aria-current="page"] {
  color: var(--zapp-primary);
  background: var(--zapp-primary-soft);
}

@media (max-width: 820px) {
  .zapp-header__nav { display: none; }
  .zapp-header__demo { display: none; }
  .zapp-header__toggle { display: block; }
  .zapp-header--open .zapp-mobile-nav { display: flex; }
}

/* --- Buttons --- */

.zapp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 12px;
  font-family: var(--zapp-font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s,
              box-shadow 0.2s, transform 0.1s;
  min-height: 46px;
}
.zapp-btn:active { transform: translateY(1px); box-shadow: none; }

.zapp-btn--primary {
  background: linear-gradient(160deg, var(--zapp-primary) 0%, var(--zapp-primary-dark) 100%);
  color: var(--zapp-surface);
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(224, 71, 106, 0.25);
}
.zapp-btn--primary:hover {
  background: linear-gradient(160deg, var(--zapp-primary-dark) 0%, #8E2740 100%);
  color: var(--zapp-surface);
  box-shadow: 0 4px 16px rgba(224, 71, 106, 0.35);
  transform: translateY(-1px);
}

.zapp-btn--outline {
  background: var(--zapp-surface);
  color: var(--zapp-ink);
  border-color: var(--zapp-line);
  box-shadow: 0 1px 3px rgba(27, 35, 48, 0.06);
}
.zapp-btn--outline:hover {
  border-color: var(--zapp-primary);
  color: var(--zapp-primary);
  background: var(--zapp-primary-soft);
  box-shadow: 0 2px 8px rgba(224, 71, 106, 0.12);
  transform: translateY(-1px);
}

.zapp-btn--ghost {
  background: transparent;
  color: var(--zapp-ink-soft);
  border-color: transparent;
  padding: 10px 16px;
  min-height: 0;
}
.zapp-btn--ghost:hover {
  color: var(--zapp-primary);
  background: var(--zapp-primary-soft);
  border-radius: 10px;
}

/* --- Hero --- */

.zapp-hero {
  padding: 56px 0 72px;
}
.zapp-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px;
  align-items: center;
}
.zapp-hero__eyebrow {
  display: inline-block;
  font-size: 14px;
  color: var(--zapp-secondary);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.zapp-hero h1 {
  font-size: clamp(36px, 5.2vw, 60px);
  font-weight: 500;
  margin: 0 0 20px;
  letter-spacing: -0.02em;
}
.zapp-hero__lead {
  font-size: 19px;
  line-height: 1.55;
  color: var(--zapp-ink-soft);
  margin-bottom: 28px;
  max-width: 540px;
}
.zapp-hero__cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.zapp-hero__visual {
  position: relative;
  border-radius: var(--zapp-radius-lg);
  overflow: hidden;
  box-shadow: var(--zapp-shadow-lg);
}
.zapp-hero__visual img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.zapp-hero__visual--placeholder {
  aspect-ratio: 4 / 5;
  background: linear-gradient(140deg, var(--zapp-primary-soft) 0%, var(--zapp-secondary-soft) 100%);
  display: flex;
  align-items: flex-end;
  padding: 28px;
}
.zapp-hero__visual--placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.55), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(224,71,106,0.20), transparent 60%);
  pointer-events: none;
}
.zapp-hero__caption {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 1;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--zapp-radius-md);
  padding: 14px 18px;
  font-size: 14px;
  color: var(--zapp-ink);
  max-width: 75%;
}

@media (max-width: 820px) {
  .zapp-hero { padding: 32px 0 40px; }
  .zapp-hero__grid { grid-template-columns: 1fr; gap: 24px; }
  .zapp-hero h1 { font-size: clamp(28px, 7vw, 42px); }
  .zapp-hero__lead { font-size: 16px; }
}

@media (max-width: 480px) {
  .zapp-hero { padding: 24px 0 32px; }
  .zapp-hero__caption { font-size: 13px; padding: 10px 14px; max-width: 85%; bottom: 12px; left: 12px; }
}

/* --- Sections --- */

.zapp-section {
  padding: 72px 0;
}
.zapp-section--alt {
  background: var(--zapp-surface-alt);
}
.zapp-section--mist {
  background: var(--zapp-bg);
}
.zapp-section__head {
  max-width: 720px;
  margin: 0 auto 40px;
  text-align: center;
}
.zapp-section__head--start {
  text-align: left;
  margin-left: 0;
}
.zapp-section__eyebrow {
  display: inline-block;
  font-size: 13px;
  color: var(--zapp-secondary);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.zapp-section h2 {
  font-size: clamp(28px, 3.8vw, 40px);
  margin: 0 0 14px;
  font-weight: 500;
}
.zapp-section__intro {
  font-size: 17px;
  line-height: 1.6;
  color: var(--zapp-ink-soft);
}

@media (max-width: 640px) {
  .zapp-section { padding: 48px 0; }
}

/* --- Pillar strip (4 icons under hero) --- */

.zapp-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 28px;
  background: var(--zapp-surface);
  border: 1px solid var(--zapp-line);
  border-radius: var(--zapp-radius-lg);
  box-shadow: var(--zapp-shadow-sm);
  margin-top: -32px;
  position: relative;
  z-index: 2;
}
.zapp-pillar {
  text-align: left;
}
.zapp-pillar__icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--zapp-secondary);
  margin-bottom: 10px;
}
.zapp-pillar__icon svg {
  width: 100%;
  height: 100%;
}
.zapp-pillar__label {
  font-weight: 600;
  font-size: 15px;
  color: var(--zapp-ink);
  margin-bottom: 4px;
}
.zapp-pillar__sub {
  font-size: 13px;
  color: var(--zapp-muted);
  line-height: 1.45;
}

@media (max-width: 820px) {
  .zapp-pillars { grid-template-columns: repeat(2, 1fr); margin-top: 0; padding: 20px; gap: 12px; }
}
@media (max-width: 480px) {
  .zapp-pillars { grid-template-columns: 1fr; padding: 16px; }
}

/* --- Feature columns (3-col) --- */

.zapp-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.zapp-feature {
  background: var(--zapp-surface);
  border: 1px solid var(--zapp-line);
  border-radius: var(--zapp-radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
}
.zapp-feature__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--zapp-radius-md);
  background: var(--zapp-secondary-soft);
  color: var(--zapp-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.zapp-feature__icon svg { width: 24px; height: 24px; }
.zapp-feature h3 {
  font-size: 22px;
  margin: 0 0 10px;
  font-weight: 500;
}
.zapp-feature p {
  margin: 0;
  color: var(--zapp-ink-soft);
  font-size: 15px;
  line-height: 1.6;
}
.zapp-feature ul {
  margin: 12px 0 0;
  padding-left: 18px;
  color: var(--zapp-ink-soft);
  font-size: 15px;
  line-height: 1.6;
}

.zapp-features--2col {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 820px) {
  .zapp-features,
  .zapp-features--2col { grid-template-columns: 1fr; gap: 16px; }
  .zapp-feature { padding: 22px; }
  .zapp-feature h3 { font-size: 19px; }
}

/* --- Praktijk-huisstijl band --- */

.zapp-praktijk {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 56px;
  align-items: center;
}
.zapp-praktijk__visual {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.zapp-praktijk-card {
  border-radius: var(--zapp-radius-lg);
  overflow: hidden;
  background: var(--zapp-surface);
  box-shadow: var(--zapp-shadow-md);
  border: 1px solid var(--zapp-line);
  aspect-ratio: 9 / 16;
  display: flex;
  flex-direction: column;
}
.zapp-praktijk-card__hero {
  flex: 0 0 38%;
  padding: 16px;
  color: #fff;
  display: flex;
  align-items: flex-end;
  font-weight: 600;
  font-size: 14px;
}
.zapp-praktijk-card__hero--linde {
  background: linear-gradient(135deg, rgba(46,93,79,.55) 0%, rgba(79,142,125,.45) 100%),
              url('/images/site/praktijk-linde.jpg') center/cover no-repeat;
}
.zapp-praktijk-card__hero--zwaluw {
  background: linear-gradient(135deg, rgba(106,75,130,.55) 0%, rgba(151,120,179,.45) 100%),
              url('/images/site/praktijk-zwaluw.jpg') center/cover no-repeat;
}
.zapp-praktijk-card__body {
  flex: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.zapp-praktijk-card__tile {
  border-radius: var(--zapp-radius-sm);
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 500;
  background: var(--zapp-bg);
  color: var(--zapp-ink-soft);
}
.zapp-praktijk-card__tile--accent-linde {
  background: rgba(46, 93, 79, 0.10);
  color: #2E5D4F;
}
.zapp-praktijk-card__tile--accent-zwaluw {
  background: rgba(106, 75, 130, 0.10);
  color: #6A4B82;
}

.zapp-praktijk__subhead {
  font-family: var(--zapp-font-display);
  font-size: 21px;
  margin: 28px 0 10px;
}
.zapp-praktijk__list {
  margin: 0 0 0 22px;
  color: var(--zapp-ink-soft);
  line-height: 1.7;
}

@media (max-width: 820px) {
  .zapp-praktijk { grid-template-columns: 1fr; gap: 28px; }
  .zapp-praktijk__visual { gap: 12px; }
  .zapp-praktijk-card { aspect-ratio: auto; }
  .zapp-praktijk-card__hero { flex: 0 0 auto; min-height: 80px; }
  .zapp-praktijk-card__body { padding: 12px; gap: 8px; }
}

/* --- FAQ accordion --- */

.zapp-faq {
  max-width: 760px;
  margin: 0 auto;
}
.zapp-faq details {
  background: var(--zapp-surface);
  border: 1px solid var(--zapp-line);
  border-radius: var(--zapp-radius-md);
  padding: 18px 22px;
  margin-bottom: 12px;
  transition: box-shadow 0.15s;
}
.zapp-faq details[open] {
  box-shadow: var(--zapp-shadow-sm);
  border-color: color-mix(in srgb, var(--zapp-primary) 30%, var(--zapp-line));
}
.zapp-faq summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--zapp-ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.zapp-faq summary::-webkit-details-marker { display: none; }
.zapp-faq summary::after {
  content: "+";
  font-size: 22px;
  font-weight: 400;
  color: var(--zapp-primary);
  transition: transform 0.15s;
  line-height: 1;
}
.zapp-faq details[open] summary::after {
  content: "−";
}
.zapp-faq__category {
  font-family: var(--zapp-font-display);
  font-size: 24px;
  margin: 40px 0 14px;
}
.zapp-faq__category:first-of-type {
  margin-top: 0;
}
.zapp-faq__body {
  margin-top: 12px;
  color: var(--zapp-ink-soft);
  line-height: 1.6;
  font-size: 15px;
}

@media (max-width: 480px) {
  .zapp-faq details { padding: 14px 16px; }
  .zapp-faq summary { font-size: 15px; }
}

/* --- CTA strip --- */

.zapp-cta-strip {
  background: var(--zapp-primary);
  color: var(--zapp-surface);
  border-radius: var(--zapp-radius-lg);
  padding: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.zapp-cta-strip h2 {
  color: var(--zapp-surface);
  font-size: clamp(24px, 3vw, 32px);
  margin: 0;
  max-width: 600px;
}

@media (max-width: 640px) {
  .zapp-cta-strip { padding: 28px 22px; gap: 20px; flex-direction: column; align-items: flex-start; }
  .zapp-cta-strip h2 { font-size: 22px; }
}
.zapp-cta-strip .zapp-btn--primary {
  background: var(--zapp-surface);
  color: var(--zapp-primary);
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}
.zapp-cta-strip .zapp-btn--primary:hover {
  background: var(--zapp-bg);
  color: var(--zapp-primary-dark);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.zapp-cta-strip .zapp-btn--outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--zapp-surface);
  box-shadow: none;
}
.zapp-cta-strip .zapp-btn--outline:hover {
  border-color: var(--zapp-surface);
  background: rgba(255, 255, 255, 0.1);
  color: var(--zapp-surface);
}

/* --- Footer --- */

.zapp-footer {
  background: var(--zapp-ink);
  color: rgba(255, 255, 255, 0.85);
  padding: 56px 0 32px;
  margin-top: auto;
}
.zapp-footer__grid {
  display: grid;
  grid-template-columns: 1.2fr repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 40px;
}
.zapp-footer__brand img {
  height: 32px;
  margin-bottom: 14px;
}
.zapp-footer__tagline {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  max-width: 280px;
  line-height: 1.5;
}
.zapp-footer h4 {
  color: var(--zapp-surface);
  font-family: var(--zapp-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.zapp-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.zapp-footer li { margin-bottom: 8px; }
.zapp-footer a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  font-size: 14px;
}
.zapp-footer a:hover { color: var(--zapp-surface); }
.zapp-footer__legal {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  flex-wrap: wrap;
}

@media (max-width: 820px) {
  .zapp-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .zapp-footer__grid { grid-template-columns: 1fr; }
}

/* --- Section image (photo strip between content blocks) --- */

.zapp-section-image {
  border-radius: var(--zapp-radius-lg);
  overflow: hidden;
  box-shadow: var(--zapp-shadow-md);
  max-width: 820px;
  margin: 0 auto;
}
.zapp-section-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* --- Content (prose) — used on veiligheid, over-ons --- */

.zapp-prose {
  max-width: 760px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.7;
  color: var(--zapp-ink-soft);
}
.zapp-prose h1 {
  font-size: clamp(32px, 4.4vw, 48px);
  color: var(--zapp-ink);
  margin: 0 0 20px;
}
.zapp-prose h2 {
  font-size: 28px;
  color: var(--zapp-ink);
  margin: 36px 0 14px;
  padding-top: 24px;
  border-top: 1px solid var(--zapp-line);
}
.zapp-prose h3 {
  font-size: 21px;
  color: var(--zapp-ink);
  margin: 28px 0 8px;
}
.zapp-prose p { margin: 0 0 14px; }
.zapp-prose ul, .zapp-prose ol {
  margin: 0 0 18px 22px;
}
.zapp-prose li { margin-bottom: 6px; }
.zapp-prose strong { color: var(--zapp-ink); }
.zapp-prose blockquote {
  border-left: 4px solid var(--zapp-primary);
  background: var(--zapp-primary-soft);
  padding: 12px 18px;
  margin: 18px 0;
  border-radius: 0 var(--zapp-radius-md) var(--zapp-radius-md) 0;
  color: var(--zapp-ink-soft);
}
.zapp-prose code {
  background: var(--zapp-surface-alt);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.92em;
}

/* ============================================================
 * 4. Dashboard re-skin
 *    These ride on top of plaza.css to soften the existing zp-*
 *    shell. Markup unchanged; this is purely a paint job.
 * ============================================================ */

/* --- Care banner ("Beveiligde zorgomgeving" strip at the very top) ---
   Soft sage background with dark sage text. Crucially, override the
   sub-text color too — plaza.css sets it to rgba(255,255,255,...) which
   is invisible on the new soft background. */
.zp-care-banner {
  background: var(--zapp-secondary-soft) !important;
  color: var(--zapp-secondary) !important;
  border-bottom: 1px solid var(--zapp-line) !important;
}
.zp-care-banner-text strong {
  color: var(--zapp-secondary) !important;
}
.zp-care-banner-text .zp-care-banner-sub {
  color: color-mix(in srgb, var(--zapp-secondary) 75%, transparent) !important;
}
.zp-care-banner-text .zp-care-banner-sub::before {
  color: color-mix(in srgb, var(--zapp-secondary) 45%, transparent) !important;
}
.zp-care-banner-icon {
  color: var(--zapp-secondary) !important;
}

/* --- Profile bar (zp-bar — user avatar + phase + provider strip) ---
   Was full-width neutral-100 strip; now a contained warm card so it
   sits naturally between the practice hero and the tile grid. */
.zp-bar {
  background: var(--zapp-surface) !important;
  border: 1px solid var(--zapp-line) !important;
  border-radius: var(--zapp-radius-md) !important;
  max-width: 700px !important;
  margin: 16px auto 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-shadow: var(--zapp-shadow-sm);
}
.zp-bar-inner {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 14px 18px !important;
}
.zp-bar-name {
  color: var(--zapp-ink) !important;
  font-family: var(--zapp-font-display);
  font-weight: 500;
  font-size: 16px !important;
  letter-spacing: -0.005em;
}
.zp-bar-edit {
  color: var(--zapp-primary) !important;
}
.zp-bar-label {
  color: var(--zapp-muted) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.zp-bar-value,
.zp-bar-link {
  color: var(--zapp-ink) !important;
  font-weight: 600 !important;
}
.zp-bar-link:hover {
  color: var(--zapp-primary) !important;
}
.zp-bar-avatar {
  border: 1px solid var(--zapp-line) !important;
}
.zp-bar-logout-link {
  color: var(--zapp-muted) !important;
  font-weight: 500 !important;
}
.zp-bar-logout-link:hover {
  color: var(--zapp-primary) !important;
}

/* --- Practice hero (welcome-card linking to the praktijk page) ---
   Original used a cool blue→white gradient with a blue accent rail.
   Re-skin to warm cream-on-surface with a coral→sage rail. */
.zp-practice-hero {
  background:
    linear-gradient(135deg,
      var(--zapp-surface) 0%,
      var(--zapp-surface) 55%,
      var(--zapp-primary-soft) 100%) !important;
  border-color: var(--zapp-line) !important;
  box-shadow: var(--zapp-shadow-sm) !important;
  border-radius: var(--zapp-radius-md) !important;
}
.zp-practice-hero::before {
  background: linear-gradient(180deg,
    var(--zapp-primary) 0%,
    var(--zapp-secondary) 100%) !important;
}
.zp-practice-hero:hover {
  box-shadow: var(--zapp-shadow-md) !important;
  border-color: color-mix(in srgb, var(--zapp-primary) 30%, var(--zapp-line)) !important;
}
.zp-practice-hero-mark {
  border-color: var(--zapp-line) !important;
}
.zp-practice-hero-mark--fallback {
  background: linear-gradient(135deg,
    var(--zapp-secondary-soft) 0%,
    var(--zapp-primary-soft) 100%) !important;
}
.zp-practice-hero-initials,
.zp-practice-hero-eyebrow,
.zp-practice-hero-chevron {
  color: var(--zapp-primary) !important;
}
.zp-practice-hero-name {
  font-family: var(--zapp-font-display);
  font-weight: 500;
  color: var(--zapp-ink) !important;
  letter-spacing: -0.015em;
}
.zp-practice-hero-sub {
  color: var(--zapp-ink-soft) !important;
}

/* --- Tiles ---
   Make them warm and inviting; raise slightly on hover. */
.zp-tile {
  border-radius: var(--zapp-radius-md) !important;
  background: var(--zapp-surface) !important;
  border: 1px solid var(--zapp-line) !important;
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s !important;
}
.zp-tile:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--zapp-primary) 35%, var(--zapp-line)) !important;
  box-shadow: var(--zapp-shadow-sm) !important;
}
.zp-tile-label {
  color: var(--zapp-ink) !important;
}
.zp-tiles-heading {
  font-family: var(--zapp-font-display);
  font-weight: 500;
  color: var(--zapp-ink) !important;
  font-size: 22px !important;
  letter-spacing: -0.01em;
}

/* Cross-promo tiles — visually distinct from care tiles. */
.zp-cross-tile {
  background: var(--zapp-cross-bg) !important;
  border-style: dashed !important;
  border-color: var(--zapp-line) !important;
}

.zp-cross-tile .zp-tile-icon--brand {
  width: 64px !important;
  height: 46px !important;
  border-radius: var(--zapp-radius-sm) !important;
  border: 1px solid var(--zapp-line);
  background: var(--zapp-surface) !important;
  box-shadow: var(--zapp-shadow-sm);
}

.zp-cross-tile .zp-tile-icon--brand-zwp {
  color: var(--zapp-primary) !important;
}

.zp-cross-tile .zp-tile-icon--brand-zwp img {
  width: 30px !important;
  height: 30px !important;
  object-fit: contain;
}

.zp-cross-tile .zp-tile-icon--brand-24baby {
  padding: 9px 7px !important;
}

.zp-cross-tile .zp-tile-icon--brand-24baby img {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-height: 24px;
  object-fit: contain;
}

.zp-tiles-section--cross {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px dashed var(--zapp-line);
}

.zp-tiles-subheading {
  margin: -6px 0 14px;
  font-size: 13px;
  color: var(--zapp-muted);
  line-height: 1.4;
}

.zp-tile-sub {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--zapp-muted);
  margin-top: 4px;
}

/* --- Buttons (zp-button web component) ---
   Match the marketing-site .zapp-btn look. */
zp-button {
  font-family: var(--zapp-font-body) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 13px 26px !important;
  border-radius: 12px !important;
  border-width: 1.5px !important;
  min-height: 46px;
  letter-spacing: 0.01em;
}
zp-button[variant="primary"],
zp-button:not([variant]) {
  background: linear-gradient(160deg, var(--zapp-primary) 0%, var(--zapp-primary-dark) 100%) !important;
  color: var(--zapp-surface) !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(224, 71, 106, 0.25) !important;
}
zp-button[variant="primary"]:hover,
zp-button:not([variant]):hover {
  background: linear-gradient(160deg, var(--zapp-primary-dark) 0%, #8E2740 100%) !important;
  border-color: transparent !important;
  color: var(--zapp-surface) !important;
  box-shadow: 0 4px 16px rgba(224, 71, 106, 0.35) !important;
}
zp-button[variant="secondary"] {
  background: var(--zapp-secondary) !important;
  color: var(--zapp-surface) !important;
  border-color: var(--zapp-secondary) !important;
}
zp-button[variant="secondary"]:hover {
  background: color-mix(in srgb, var(--zapp-secondary) 80%, black) !important;
  border-color: color-mix(in srgb, var(--zapp-secondary) 80%, black) !important;
}
zp-button[variant="outline"] {
  background: var(--zapp-surface) !important;
  color: var(--zapp-ink) !important;
  border-color: var(--zapp-line) !important;
  box-shadow: 0 1px 3px rgba(27, 35, 48, 0.06) !important;
}
zp-button[variant="outline"]:hover {
  background: var(--zapp-primary-soft) !important;
  color: var(--zapp-primary) !important;
  border-color: var(--zapp-primary) !important;
  box-shadow: 0 2px 8px rgba(224, 71, 106, 0.12) !important;
}

/* --- Logout link on the dashboard bottom --- */
.zp-welcome-logout {
  color: var(--zapp-muted) !important;
  font-family: var(--zapp-font-body);
  font-weight: 500 !important;
  border-radius: 10px !important;
}
.zp-welcome-logout:hover {
  color: var(--zapp-primary) !important;
  background: var(--zapp-primary-soft) !important;
}

/* --- Care footer pills + zp-link --- */
.zp-care-pill {
  background: var(--zapp-secondary-soft) !important;
  color: var(--zapp-secondary) !important;
}
zp-link a, zp-link > span {
  color: var(--zapp-primary) !important;
}
zp-link a:hover {
  color: var(--zapp-primary-dark) !important;
}

/* --- Bottom-nav: warm-up + coral active state --- */
zp-bottom-nav {
  background: var(--zapp-surface) !important;
  box-shadow: 0 -1px 0 var(--zapp-line) !important;
}
zp-bottom-nav .zp-bottom-nav-item {
  color: var(--zapp-muted) !important;
  font-family: var(--zapp-font-body);
}
zp-bottom-nav .zp-bottom-nav-item:hover,
zp-bottom-nav .zp-bottom-nav-item.active {
  color: var(--zapp-primary) !important;
}

/* --- Header: keep clean white below the care banner --- */
zp-header {
  background: var(--zapp-surface) !important;
  box-shadow: inset 0 -1px 0 var(--zapp-line) !important;
}
zp-header .zp-header-icon:hover {
  background: var(--zapp-primary-soft) !important;
}
zp-header .zp-header-avatar:hover {
  border-color: var(--zapp-primary) !important;
}
zp-header .zp-header-nav a {
  font-family: var(--zapp-font-body) !important;
  color: var(--zapp-ink-soft) !important;
}
zp-header .zp-header-nav a:hover {
  color: var(--zapp-primary) !important;
}
zp-header .zp-header-nav a.active {
  color: var(--zapp-primary) !important;
  border-bottom-color: var(--zapp-primary) !important;
}
zp-header .zp-header-brand-mark {
  border: 1px solid var(--zapp-line) !important;
}
zp-header .zp-header-brand-initials {
  color: var(--zapp-primary) !important;
}
zp-header .zp-header-care-pill {
  background: var(--zapp-secondary-soft) !important;
  color: var(--zapp-secondary) !important;
}

/* --- Footer (zp-footer) --- */
zp-footer {
  background: var(--zapp-surface-alt) !important;
}
zp-footer .zp-footer-column-title {
  font-family: var(--zapp-font-display);
  font-weight: 500;
  color: var(--zapp-ink) !important;
}
zp-footer .zp-footer-menu a {
  color: var(--zapp-ink-soft) !important;
}
zp-footer .zp-footer-menu a:hover {
  color: var(--zapp-primary) !important;
}

/* --- AI Assistant card surface (used on /dashboard/.../ai) --- */
.zp-ai-card,
.zp-card {
  background: var(--zapp-surface);
  border: 1px solid var(--zapp-line);
  border-radius: var(--zapp-radius-md);
}

/* ============================================================
 * 5. Praktijk-huisstijl (white-label) hook
 *
 * Per request the dashboard sets style="--zapp-practice-primary: #xxx"
 * on a body wrapper; if set, the brand primary is overridden for that
 * session. Falls back to the Zwanger! app default berry coral.
 *
 * Set by templates/base.html.twig using PracticeBrandingResolver data.
 * ============================================================ */

[data-practice-branded="1"] {
  --zapp-primary: var(--zapp-practice-primary, #E0476A);
  --zapp-primary-dark: var(--zapp-practice-primary-dark, #B0334F);
  --zapp-primary-soft: var(--zapp-practice-primary-soft, #FBE3E9);
  --zapp-secondary: var(--zapp-practice-secondary, #2F6B5D);
  --zapp-secondary-soft: var(--zapp-practice-secondary-soft, #DCE9E3);

  /* Re-cascade into legacy zp tokens so existing zp-* components follow. */
  --zp-primary: var(--zapp-primary);
  --zp-primary-dark: var(--zapp-primary-dark);
  --zp-primary-light: var(--zapp-primary-soft);
  --zp-care-accent: var(--zapp-secondary);
  --zp-care-accent-soft: var(--zapp-secondary-soft);
}