/* ==========================================================
   AI Frame — Gast-header (nieuw thema, standaard) v1.0
   Gedeeld door /home/, /inloggen/, /registreren/ en alle
   overige gastpagina's. Markup: templates/partials/guest-header.php
   ========================================================== */

:root {
  --af-ink:        #1E1C19;
  --af-bg:         #FAFAF7;
  --af-bg-2:       #F5F3EF;
  --af-line:       #E8E3DB;
  --af-line-2:     #DDD8D0;
  --af-accent:     #C8A24B;
  --af-accent-dim: #B49A3E;
  --af-header-h:   64px;
}

/* ── Body-offset: contentpagina's krijgen ruimte onder de header;
     full-bleed pagina's (home, auth) zetten .af-flush via body_class. ── */
body.imgx-fullpage.af-guest-header { padding-top: var(--af-header-h); }
body.imgx-fullpage.af-guest-header.af-flush { padding-top: 0; }

/* ── Film grain ── */
.af-grain {
  position: fixed; inset: -50%; z-index: 9998; pointer-events: none;
  opacity: 0.018; mix-blend-mode: multiply;
  background: repeating-conic-gradient(rgba(30,28,25,0.12) 0% 25%, transparent 0% 50%) 0 0 / 4px 4px;
  animation: afGrain 0.4s steps(3) infinite;
}

/* ── Header ── */
#af-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--af-header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(20px, 4vw, 48px);
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition: background .4s, backdrop-filter .4s, border-color .4s, box-shadow .4s;
}
#af-header.af-scrolled {
  background: rgba(250,250,247,0.9);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom-color: var(--af-line);
  box-shadow: 0 1px 8px rgba(0,0,0,0.04);
}

/* ── Logo woordmerk: AI [Frame] met crop marks ── */
.af-logo { display: flex; align-items: center; gap: 6px; text-decoration: none; }
.af-logo-ai,
.af-logo-frame {
  font-family: 'Archivo', sans-serif;
  font-weight: 800; font-size: 18px;
  color: var(--af-ink); letter-spacing: 0.04em;
  line-height: 1;
}
.af-logo-frame { position: relative; padding: 5px 10px; }
.af-crop { position: absolute; width: 10px; height: 10px; }
.af-crop-tl { top: 0; left: 0;   border-top: 2px solid var(--af-accent);    border-left: 2px solid var(--af-accent); }
.af-crop-tr { top: 0; right: 0;  border-top: 2px solid var(--af-accent);    border-right: 2px solid var(--af-accent); }
.af-crop-bl { bottom: 0; left: 0;  border-bottom: 2px solid var(--af-accent); border-left: 2px solid var(--af-accent); }
.af-crop-br { bottom: 0; right: 0; border-bottom: 2px solid var(--af-accent); border-right: 2px solid var(--af-accent); }

/* ── Nav ── */
#af-nav { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); }
.af-navlink { font-size: 14px; color: rgba(30,28,25,0.55); transition: color .2s; text-decoration: none; }
.af-navlink:hover { color: var(--af-ink); }
.af-nav-login {
  font-size: 14px; color: var(--af-ink); text-decoration: none;
  padding: 8px 16px; border: 1px solid var(--af-line-2); border-radius: 6px;
}
.af-nav-cta {
  font-size: 14px; font-weight: 600; color: var(--af-bg); text-decoration: none;
  background: var(--af-ink); padding: 8px 20px; border-radius: 6px;
}
#af-menu-btn {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; background: none;
  border: 1px solid var(--af-line-2); border-radius: 6px;
  color: var(--af-ink); cursor: pointer; line-height: 1;
  transition: color .3s, border-color .3s;
}
#af-menu-btn svg { display: block; }

/* ── Mobiel menu — JT-patroon: paneel direct onder de header ── */
#af-mobile-menu {
  display: none;
  position: fixed;
  top: var(--af-header-h); left: 0; right: 0; bottom: 0;
  z-index: 99;
  background: rgba(250,250,247,0.98);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  flex-direction: column;
  overflow-y: auto;
  border-top: 1px solid var(--af-line);
}
#af-mobile-menu.af-open { display: flex; }
body.af-menu-open { overflow: hidden; }
/* Header krijgt vaste lichte achtergrond zodra het menu open is */
body.af-menu-open #af-header {
  background: rgba(250,250,247,0.98);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom-color: var(--af-line);
}
.af-mobile-nav {
  display: flex; flex-direction: column;
  padding: 12px 20px;
}
.af-mobile-link {
  display: flex; align-items: center;
  font-family: 'Archivo', sans-serif; font-size: 18px; font-weight: 700;
  color: var(--af-ink); text-decoration: none;
  padding: 16px 8px;
  border-bottom: 1px solid var(--af-line);
  transition: color .15s;
}
.af-mobile-link:last-child { border-bottom: none; }
.af-mobile-link:active,
.af-mobile-link:hover { color: #7A5C1A; }
.af-mobile-foot {
  margin-top: auto;
  padding: 16px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--af-line);
  background: var(--af-bg);
}
.af-mobile-cta {
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 600; color: var(--af-bg); text-decoration: none;
  background: var(--af-ink); padding: 15px 32px; border-radius: 8px;
}
@media (max-width: 768px) {
  #af-nav { display: none; }
  #af-menu-btn { display: flex; }
}
@media (min-width: 769px) {
  #af-menu-btn { display: none; }
  #af-mobile-menu { display: none !important; }
  body.af-menu-open { overflow: auto; }
}

/* ── Header-variant op donkere hero (homepage) ──
   Zolang niet gescrold: lichte tekst, gouden CTA. Menu open telt als 'licht'. */
body.af-hero-dark:not(.af-menu-open) #af-header:not(.af-scrolled) .af-logo-ai,
body.af-hero-dark:not(.af-menu-open) #af-header:not(.af-scrolled) .af-logo-frame { color: #F4F1EC; }
body.af-hero-dark:not(.af-menu-open) #af-header:not(.af-scrolled) .af-navlink { color: rgba(244,241,236,0.55); }
body.af-hero-dark:not(.af-menu-open) #af-header:not(.af-scrolled) .af-navlink:hover { color: #F4F1EC; }
body.af-hero-dark:not(.af-menu-open) #af-header:not(.af-scrolled) .af-nav-login {
  color: #F4F1EC; border-color: rgba(244,241,236,0.2);
}
body.af-hero-dark:not(.af-menu-open) #af-header:not(.af-scrolled) .af-nav-login:hover { border-color: var(--af-accent); }
body.af-hero-dark:not(.af-menu-open) #af-header:not(.af-scrolled) .af-nav-cta {
  color: #14140F; background: var(--af-accent);
}
body.af-hero-dark:not(.af-menu-open) #af-header:not(.af-scrolled) .af-nav-cta:hover { background: #d4af5a; }
body.af-hero-dark:not(.af-menu-open) #af-header:not(.af-scrolled) #af-menu-btn {
  color: #F4F1EC; border-color: rgba(244,241,236,0.2);
}

/* ── Legacy kill: oude gast-topbar mag nooit meer renderen ── */
.imgx-nav--guest,
.imgx-nav-drawer--guest { display: none !important; }

/* ── Gedeelde knoppen (thema-breed) ── */
.af-btn-dark {
  font-size: 15px; font-weight: 600; color: var(--af-bg);
  background: var(--af-ink); padding: 12px 28px; border-radius: 8px;
  transition: background .2s, transform .2s; border: none; cursor: pointer;
  text-decoration: none;
}
.af-btn-dark:hover { background: #3a3632; }
.af-btn-ghost {
  font-size: 15px; font-weight: 500; color: var(--af-ink);
  padding: 12px 28px; border-radius: 8px;
  border: 1px solid rgba(30,28,25,0.15);
  background: rgba(250,250,247,0.65);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: border-color .2s;
  text-decoration: none;
}
.af-btn-ghost:hover { border-color: var(--af-accent); }
/* Header-varianten behouden hun compacte padding */
.af-nav-login.af-btn-ghost { font-size: 14px; padding: 8px 16px; border-radius: 6px; border-color: var(--af-line-2); background: transparent; }
.af-nav-cta.af-btn-dark { font-size: 14px; padding: 8px 20px; border-radius: 6px; }

/* ── Gedeelde frame-hoekjes (crop marks op grote elementen) ── */
.af-frame-corner { position: absolute; width: 32px; height: 32px; }
.af-frame-tl { top: -1px; left: -1px;   border-top: 2.5px solid var(--af-accent);    border-left: 2.5px solid var(--af-accent);  border-radius: 8px 0 0 0; }
.af-frame-tr { top: -1px; right: -1px;  border-top: 2.5px solid var(--af-accent);    border-right: 2.5px solid var(--af-accent); border-radius: 0 8px 0 0; }
.af-frame-bl { bottom: -1px; left: -1px;  border-bottom: 2.5px solid var(--af-accent); border-left: 2.5px solid var(--af-accent);  border-radius: 0 0 0 8px; }
.af-frame-br { bottom: -1px; right: -1px; border-bottom: 2.5px solid var(--af-accent); border-right: 2.5px solid var(--af-accent); border-radius: 0 0 8px 0; }

/* ── Animaties ── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes afGrain { 0%,100% { transform: translate(0,0); } 10% { transform: translate(-5%,-10%); } 30% { transform: translate(3%,-15%); } 50% { transform: translate(12%,9%); } 70% { transform: translate(9%,4%); } 90% { transform: translate(-1%,7%); } }
}
@media (prefers-reduced-motion: reduce) {
  .af-grain { animation: none; }
}