/* ==========================================================================
   AstroConnect — Designsysteem
   --------------------------------------------------------------------------
   Additief bestand. Overschrijft niets: laad dit ná css/rebuild*.css.
   Alle kleuren zijn gemeten tegen de echte AstroConnect-achtergrond (#0c071d)
   en halen WCAG 2.1 AA (>= 4.5:1 voor tekst, >= 3:1 voor UI-randen).

   Herkomst van het merk:
   - Achtergrond #0c071d is de exacte waarde uit de originele homepage.
   - Barlow was de originele huisletter (de rebuild verving die door Manrope).
   - DM Serif Display stond óók in het origineel, maar had daar één rol:
     het roze beeldcitaat. Die rol houden we; los cursief in koppen niet.
   - De zes thema-accenten komen uit de originele voordeel-orbs. Blauw is
     opgehelderd van #2b4e8f (2,43:1 — onleesbaar) naar #6ba6ee (7,82:1).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Oppervlakken -------------------------------------------------------- */
  --ac-void:        #070512;   /* footer, diepste laag                    */
  --ac-ink:         #0c071d;   /* basisachtergrond (origineel)            */
  --ac-ink-2:       #14102a;   /* opgetilde sectie                        */
  --ac-ink-3:       #1d1636;   /* kaart / paneel                          */
  --ac-paper:       #ffffff;   /* lichte sectie (netwerk, bewijs)         */
  --ac-paper-2:     #f7f5fb;

  /* Tekst --------------------------------------------------------------- */
  --ac-text:        #ffffff;   /* 19,7:1                                  */
  --ac-text-body:   #e6e1f2;   /* 15,4:1  lopende tekst op donker         */
  --ac-text-muted:  #b3aac6;   /*  8,9:1  secundair                       */
  --ac-text-faint:  #8f86a6;   /*  5,8:1  meta, labels — nooit lager      */
  --ac-text-on-paper:      #17122b;
  --ac-text-on-paper-muted:#544c66;

  /* Merkroze — twee rollen, niet uitwisselbaar -------------------------- */
  --ac-pink:        #ff3d7f;   /* tekst, links, accent op donker  5,85:1  */
  --ac-pink-solid:  #d01155;   /* gevulde button mét witte tekst  5,39:1  */
  --ac-pink-hover:  #e21460;
  --ac-pink-soft:   rgba(255, 61, 127, .12);

  /* Thema-accenten: één per voordeel, hergebruikt op de clusterpagina's - */
  --ac-thuiswerk:   #ff6b8a;   /*  7,26:1 */
  --ac-geld:        #ffb457;   /* 11,20:1 */
  --ac-werkdruk:    #b6a8e0;   /*  9,09:1 */
  --ac-talent:      #e070c0;   /*  6,81:1 */
  --ac-stress:      #9d8cf0;   /*  7,00:1 */
  --ac-promotie:    #6ba6ee;   /*  7,82:1 */

  /* Lijnen & schaduw ---------------------------------------------------- */
  --ac-line:        rgba(255,255,255,.13);
  --ac-line-strong: rgba(255,255,255,.26);
  --ac-line-paper:  #e4dff0;
  --ac-glow:        0 0 60px rgba(255, 61, 127, .18);
  --ac-lift:        0 18px 44px rgba(4, 2, 12, .55);

  /* Typografie ---------------------------------------------------------- */
  --ac-sans:    'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --ac-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;

  /* Fluide schaal, 1,22-ratio, 360px → 1440px viewport                   */
  --ac-fs-eyebrow: .6875rem;                        /* 11px, uppercase   */
  --ac-fs-meta:    .8125rem;                        /* 13px              */
  --ac-fs-body:    clamp(1rem, .97rem + .12vw, 1.0625rem);
  --ac-fs-lead:    clamp(1.0625rem, 1rem + .34vw, 1.25rem);
  --ac-fs-h4:      clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  --ac-fs-h3:      clamp(1.25rem, 1.14rem + .5vw, 1.5rem);
  --ac-fs-h2:      clamp(1.75rem, 1.35rem + 1.7vw, 2.75rem);
  --ac-fs-h1:      clamp(2.125rem, 1.5rem + 2.6vw, 3.75rem);
  --ac-fs-hero:    clamp(2.375rem, 1.5rem + 3.6vw, 4.5rem);

  --ac-lh-tight: 1.08;
  --ac-lh-snug:  1.22;
  --ac-lh-body:  1.65;

  /* Ruimte: 4px-basis --------------------------------------------------- */
  --ac-1: .25rem;  --ac-2: .5rem;   --ac-3: .75rem;  --ac-4: 1rem;
  --ac-5: 1.5rem;  --ac-6: 2rem;    --ac-7: 2.5rem;  --ac-8: 3rem;
  --ac-9: 4rem;    --ac-10: 5rem;   --ac-11: 6rem;   --ac-12: 7.5rem;

  /* Sectieritme: één bron van waarheid. Secties raken elkaar — de holtes
     van ~200px op de huidige homepage komen van dubbel gezette padding.  */
  --ac-section-y:  clamp(3.5rem, 2rem + 5vw, 6.5rem);
  --ac-section-x:  clamp(1.25rem, .5rem + 2.5vw, 1.75rem);
  --ac-shell:      75rem;   /* 1200px inhoudsbreedte */
  --ac-measure:    34rem;   /* max. leesbreedte lopende tekst (~68 tekens) */

  --ac-radius:    4px;      /* het origineel is hoekig; niet verzachten   */
  --ac-radius-lg: 10px;
  --ac-radius-pill: 999px;
  --ac-ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   2. BASIS
   -------------------------------------------------------------------------- */
.ac { color: var(--ac-text-body); font-family: var(--ac-sans); font-size: var(--ac-fs-body); line-height: var(--ac-lh-body); }
.ac :where(h1,h2,h3,h4) { color: var(--ac-text); font-weight: 600; letter-spacing: -.015em; margin: 0 0 var(--ac-4); text-wrap: balance; }
.ac h1 { font-size: var(--ac-fs-h1); line-height: var(--ac-lh-tight); }
.ac h2 { font-size: var(--ac-fs-h2); line-height: var(--ac-lh-snug); }
.ac h3 { font-size: var(--ac-fs-h3); line-height: var(--ac-lh-snug); }
.ac h4 { font-size: var(--ac-fs-h4); line-height: var(--ac-lh-snug); }
.ac p  { margin: 0 0 var(--ac-4); max-width: var(--ac-measure); }
.ac p:last-child { margin-bottom: 0; }

/* Merkkop: uppercase mét spatiëring. Alléén voor 1–3 woorden zonder punt.
   "MAAK RUIMTE VOOR WAT JE KAN." hoort hier dus niet — dat is een zin. */
.ac-h-brand { text-transform: uppercase; letter-spacing: .02em; font-weight: 600; }
.ac-h-sentence { text-transform: none; letter-spacing: -.02em; }

/* Het beeldcitaat: de enige plek voor DM Serif Display. */
.ac-quote {
  font-family: var(--ac-display); font-size: clamp(1.125rem, 1rem + .7vw, 1.5rem);
  line-height: 1.3; font-style: normal; color: var(--ac-text);
  background: var(--ac-pink-solid); padding: var(--ac-4) var(--ac-5);
  display: inline-block; max-width: 22rem;
}

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.ac-section { padding-block: var(--ac-section-y); padding-inline: var(--ac-section-x); }
.ac-section > * { max-width: var(--ac-shell); margin-inline: auto; }
.ac-section--ink   { background: var(--ac-ink); }
.ac-section--ink2  { background: var(--ac-ink-2); }
.ac-section--paper { background: var(--ac-paper); color: var(--ac-text-on-paper); }
.ac-section--paper :where(h1,h2,h3,h4) { color: var(--ac-text-on-paper); }
.ac-section--paper p { color: var(--ac-text-on-paper-muted); }

/* Kosmische laag: brand-achtergrond zonder de tekst te verzwakken. */
.ac-cosmos { position: relative; isolation: isolate; overflow: hidden; }
.ac-cosmos::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url('../images/astroconnect_bg.jpg') center / cover no-repeat;
  opacity: .3;
}
.ac-cosmos::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(70% 55% at 68% 30%, rgba(255,61,127,.20), transparent 70%),
    radial-gradient(55% 45% at 22% 18%, rgba(107,166,238,.14), transparent 70%),
    linear-gradient(180deg, rgba(12,7,29,.55), rgba(12,7,29,.90));
}

/* Twee kolommen die op mobiel netjes stapelen, beeld altijd eerst zichtbaar. */
.ac-story { display: grid; gap: clamp(var(--ac-5), 4vw, var(--ac-9)); align-items: center; }
@media (min-width: 62rem) {
  .ac-story { grid-template-columns: 1fr 1fr; }
  .ac-story--flip > :first-child { order: 2; }
}
.ac-story__art { margin: 0; }
.ac-story__art img { display: block; width: 100%; height: auto; border-radius: var(--ac-radius-lg); }

/* --------------------------------------------------------------------------
   4. EYEBROW — categoriseert, herhaalt de kop nooit
   -------------------------------------------------------------------------- */
.ac-eyebrow {
  display: block; font-size: var(--ac-fs-eyebrow); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ac-pink); margin: 0 0 var(--ac-3);
}
.ac-section--paper .ac-eyebrow { color: var(--ac-pink-solid); }

/* --------------------------------------------------------------------------
   5. BUTTONS — minimaal 44px, witte tekst alleen op --ac-pink-solid
   -------------------------------------------------------------------------- */
.ac-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ac-3);
  min-height: 2.75rem; padding: var(--ac-3) var(--ac-5);
  border: 1px solid transparent; border-radius: var(--ac-radius);
  font: inherit; font-size: .8125rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; transition: background-color .2s var(--ac-ease), transform .2s var(--ac-ease), border-color .2s var(--ac-ease);
}
.ac-btn--primary { background: var(--ac-pink-solid); color: #fff; }
.ac-btn--primary:hover { background: var(--ac-pink-hover); transform: translateY(-2px); }
.ac-btn--ghost { background: transparent; color: var(--ac-text); border-color: var(--ac-line-strong); }
.ac-btn--ghost:hover { border-color: var(--ac-pink); color: var(--ac-pink); transform: translateY(-2px); }
.ac-btn--quiet {
  min-height: 2.75rem; padding: 0; background: none; border: 0;
  color: var(--ac-pink); text-transform: none; letter-spacing: 0;
  font-size: var(--ac-fs-body); font-weight: 600;
}
.ac-btn--quiet:hover { text-decoration: underline; text-underline-offset: .25em; }
.ac-btn--wide { width: 100%; }

/* Zichtbare focus op álles wat focusbaar is. */
.ac :where(a, button, summary, input, select, textarea):focus-visible {
  outline: 3px solid #f6c3dc; outline-offset: 3px; border-radius: 2px;
}

/* --------------------------------------------------------------------------
   6. ICONEN — echte SVG's. Vervangt ⌂ ▤ ◷ ✧ ✦ ↗ als button-icoon.
   Gebruik: <svg class="ac-ico" aria-hidden="true"><use href="#ac-i-home"/></svg>
   -------------------------------------------------------------------------- */
.ac-ico {
  width: 1.25em; height: 1.25em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -.15em;
}
.ac-ico--lg { width: 1.75em; height: 1.75em; }
.ac-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --------------------------------------------------------------------------
   7. ORB — de ronde voordeeliconen, het handelsmerk van de site
   -------------------------------------------------------------------------- */
.ac-orbs { display: grid; gap: clamp(var(--ac-5), 3vw, var(--ac-8)); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 34rem) { .ac-orbs { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 74rem) { .ac-orbs { grid-template-columns: repeat(6, 1fr); } }
.ac-orb {
  display: grid; justify-items: center; gap: var(--ac-3);
  text-align: center; text-decoration: none; color: inherit;
  padding: var(--ac-2); border-radius: var(--ac-radius-lg);
  transition: transform .25s var(--ac-ease), background-color .25s var(--ac-ease);
}
.ac-orb:hover { transform: translateY(-4px); background: rgba(255,255,255,.03); }
.ac-orb__ring {
  position: relative; display: grid; place-items: center;
  inline-size: clamp(4.75rem, 7.5vw, 7.5rem); aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(from 210deg, var(--orb, var(--ac-pink)), rgba(255,255,255,.08) 62%, var(--orb, var(--ac-pink)));
  box-shadow: 0 0 40px -12px var(--orb, var(--ac-pink));
}
.ac-orb__ring::after {
  content: ""; position: absolute; inset: 9px; border-radius: 50%;
  background: var(--ac-ink);
}
.ac-orb__ring .ac-ico { position: relative; z-index: 1; width: 2.5rem; height: 2.5rem; color: var(--orb, var(--ac-pink)); }
.ac-orb__title { font-size: var(--ac-fs-h4); font-weight: 600; color: var(--orb, var(--ac-pink)); margin: 0; }
.ac-orb__text  { font-size: var(--ac-fs-meta); color: var(--ac-text-muted); margin: 0; max-width: 18rem; }

.ac-orb--thuiswerk { --orb: var(--ac-thuiswerk); }
.ac-orb--geld      { --orb: var(--ac-geld); }
.ac-orb--werkdruk  { --orb: var(--ac-werkdruk); }
.ac-orb--talent    { --orb: var(--ac-talent); }
.ac-orb--stress    { --orb: var(--ac-stress); }
.ac-orb--promotie  { --orb: var(--ac-promotie); }

/* --------------------------------------------------------------------------
   8. BEWIJSSTROOK — de laag die nu volledig mist op de site
   -------------------------------------------------------------------------- */
.ac-proof {
  display: grid; gap: var(--ac-5);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  padding: var(--ac-6); border: 1px solid var(--ac-line);
  border-radius: var(--ac-radius-lg); background: var(--ac-ink-3);
}
.ac-proof__item { display: grid; gap: var(--ac-1); }
.ac-proof__num {
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); font-weight: 700;
  line-height: 1; color: var(--ac-text); letter-spacing: -.03em;
}
.ac-proof__label { font-size: var(--ac-fs-meta); color: var(--ac-text-muted); margin: 0; }
.ac-proof__src { font-size: .75rem; color: var(--ac-text-faint); margin: 0; }

/* --------------------------------------------------------------------------
   9. TARIEVENTABEL — donker. Vervangt de witte kaarten die nu
   ongestyled op de donkere achtergrond staan geplakt.
   -------------------------------------------------------------------------- */
.ac-rates { border: 1px solid var(--ac-line); border-radius: var(--ac-radius-lg); overflow: hidden; background: var(--ac-ink-2); }
.ac-rates table { width: 100%; border-collapse: collapse; }
.ac-rates :where(th, td) { padding: var(--ac-4) var(--ac-5); text-align: left; border-bottom: 1px solid var(--ac-line); }
.ac-rates thead th {
  font-size: var(--ac-fs-eyebrow); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ac-text-faint); background: rgba(255,255,255,.02);
}
.ac-rates tbody tr:last-child :where(td) { border-bottom: 0; }
.ac-rates .ac-rate__amount { font-size: 1.375rem; font-weight: 700; color: var(--ac-text); letter-spacing: -.02em; }
.ac-rates .ac-rate__unit { font-size: var(--ac-fs-meta); color: var(--ac-text-muted); }
.ac-rates tr[data-featured] { background: var(--ac-pink-soft); box-shadow: inset 3px 0 0 var(--ac-pink); }
.ac-rates__note { padding: var(--ac-3) var(--ac-5); font-size: .75rem; color: var(--ac-text-faint); background: rgba(0,0,0,.2); margin: 0; }
@media (max-width: 44rem) {
  .ac-rates thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ac-rates :where(tr) { display: grid; gap: var(--ac-1); padding: var(--ac-4) var(--ac-5); border-bottom: 1px solid var(--ac-line); }
  .ac-rates :where(td) { display: flex; justify-content: space-between; gap: var(--ac-4); padding: var(--ac-1) 0; border: 0; }
  .ac-rates :where(td)::before { content: attr(data-label); font-size: var(--ac-fs-meta); color: var(--ac-text-faint); }
}

/* --------------------------------------------------------------------------
   10. FAQ
   -------------------------------------------------------------------------- */
.ac-faq { border-top: 1px solid var(--ac-line); }
.ac-faq details { border-bottom: 1px solid var(--ac-line); }
.ac-faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--ac-4);
  min-height: 3.5rem; padding: var(--ac-4) 0; cursor: pointer; list-style: none;
  font-size: var(--ac-fs-h4); font-weight: 600; color: var(--ac-text);
}
.ac-faq summary::-webkit-details-marker { display: none; }
.ac-faq summary::after {
  content: ""; flex: none; inline-size: 1.5rem; aspect-ratio: 1;
  background: var(--ac-pink); clip-path: polygon(45% 12%,55% 12%,55% 45%,88% 45%,88% 55%,55% 55%,55% 88%,45% 88%,45% 55%,12% 55%,12% 45%,45% 45%);
  transition: transform .25s var(--ac-ease);
}
.ac-faq details[open] summary::after { transform: rotate(45deg); }
.ac-faq details > :not(summary) { padding-bottom: var(--ac-5); color: var(--ac-text-muted); }

/* --------------------------------------------------------------------------
   11. CTA-BAND
   -------------------------------------------------------------------------- */
.ac-cta {
  display: grid; gap: var(--ac-5); align-items: center;
  padding: clamp(var(--ac-6), 4vw, var(--ac-9));
  border: 1px solid var(--ac-line); border-radius: var(--ac-radius-lg);
  background: linear-gradient(115deg, #2a1140, var(--ac-ink) 62%);
  box-shadow: var(--ac-glow);
}
@media (min-width: 56rem) { .ac-cta { grid-template-columns: 1fr auto; gap: var(--ac-8); } }
.ac-cta h2 { margin-bottom: var(--ac-2); }
.ac-cta p { color: var(--ac-text-muted); margin: 0; }

/* --------------------------------------------------------------------------
   12. HULPKLASSEN
   -------------------------------------------------------------------------- */
.ac-lead { font-size: var(--ac-fs-lead); color: var(--ac-text-body); max-width: var(--ac-measure); }
.ac-stack > * + * { margin-top: var(--ac-4); }
.ac-cluster { display: flex; flex-wrap: wrap; gap: var(--ac-4); align-items: center; }
.ac-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .ac *, .ac *::before, .ac *::after { transition: none !important; animation: none !important; }
}

/* --------------------------------------------------------------------------
   13. BRUG NAAR DE BESTAANDE REBUILD-CSS
   css/rebuild.css definieert zelf --sans en --display en zet die op Manrope.
   Door die twee variabelen op body-niveau te herdefiniëren krijgt álles wat
   in de oude CSS var(--sans) gebruikt óók Barlow, zonder één regel oude CSS
   te wijzigen. De kleurvariabelen van rebuild.css laten we bewust staan,
   zodat nog niet herbouwde pagina's onveranderd blijven werken.
   -------------------------------------------------------------------------- */
body.ac {
  --sans: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  background: var(--ac-ink);
}
/* rebuild.css zet padding op bare details; onze accordeon regelt dat zelf. */
.ac-faq details { padding: 0; }
.ac-faq details > :not(summary) { margin-top: 0; }