/*
Theme Name: Fixentra
Theme URI: https://fixentra.nl
Author: Fixentra
Author URI: https://fixentra.nl
Description: Fixentra maatwerk thema – header met centered nav, CTA rechts, mobiel overlaymenu met vaste CTA, premium gradient-animaties en decoratieve lijnen.
Version: 1.6.0
License: GNU GPL v2 or later
Text Domain: fixentra
*/

/* Fonts worden via functions.php ge-enqueued (geen @import hier). */
@layer base, components, utilities;

/* =========================
   1) VARIABELEN & BASIS
========================= */
@layer base {
  :root{
    /* Layout */
    --fx-container: 1240px;
    --fx-gap: 24px;

    /* Randen / schaduw */
    --fx-radius: 16px;
    --fx-radius-lg: 32px;
    --fx-shadow: 0 8px 24px rgba(0,0,0,.25);

    /* Kleuren */
    --fx-bg-0:#000000;
    --fx-bg-1:#1a1a1a;
    --fx-text:#ffffff;
    --fx-text-muted:#cfcfcf;
    --fx-border:rgba(255,255,255,.12);

    /* Gradients (Fixentra) */
    --fx-cta-a:#8c52ff;
    --fx-cta-b:#ffde59;

    /* Header / interactie */
    --fx-header-h:100px;
    --fx-tap:48px;

    /* Timing / easing */
    --fx-ease:cubic-bezier(.22,.61,.36,1);
    --fx-speed:.35s;
    --fx-speed-fast:.2s;
    --fx-speed-slow:.6s;

    /* Font */
    --fx-font:"Rubik Rounded",system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Noto Sans",Arial,sans-serif;

    /* Z-index schaal */
    --z-bg: 0;
    --z-content: 1;
    --z-header: 1200;
    --z-deco: 1200;
    --z-overlay: 1300;
    --z-cta-fixed: 1400;
    --z-toggle: 9999;
  }

  /* Reset / basis */
  *,*::before,*::after{ box-sizing:border-box; }
  html,body{ min-height:100%; margin:0; padding:0; }

  html{
    background:#000;
    background-image: radial-gradient(circle at 45% 28%, #1a1a1a 0%, #0d0d0d 60%, #000 100%);
    background-repeat:no-repeat;
    background-size:cover;
  }
  @media (max-width:767px){
    html{ background-image: radial-gradient(circle at 50% 20%, #1f1f1f 0%, #0e0e0e 70%, #000 100%); }
  }

  body{
    font-family:var(--fx-font);
    color:var(--fx-text);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }

  /* Decoratieve diagonale gradientlijnen (subtiel, site-breed) */
  body::before,
  body::after{
    content:"";
    position:fixed;
    left:-55%;
    width:210%;
    height:6px;
    background:linear-gradient(90deg,var(--fx-cta-a),var(--fx-cta-b));
    transform:rotate(-8deg);
    opacity:.18;
    z-index:var(--z-bg);
    pointer-events:none;
  }
  body::before{ top:26%; }
  body::after { top:64%; opacity:.12; }

  /* Content boven de strepen */
  body > *{ position:relative; z-index:var(--z-content); }

  /* Container */
  .fx-container,
  .wp-block-group.is-layout-constrained{
    max-width:var(--fx-container);
    margin-inline:auto;
    padding-inline:var(--fx-gap);
  }

  /* Koppelingen: nooit standaard onderstreept; alleen bij hover op content-links.
     CTA’s en navigatie blijven altijd zonder underline. */
  a{ color:inherit; text-decoration:none; }
  .entry-content a:not(.button):not(.wp-block-button__link):not(.no-underline){
    text-decoration:none;
  }
  .entry-content a:not(.button):not(.wp-block-button__link):not(.no-underline):hover{
    text-decoration:underline;
    text-underline-offset:3px;
    text-decoration-thickness:1.5px;
  }

  /* Media */
  img{ max-width:100%; height:auto; border:0; }

  /* Typografie & Gutenberg */
  h1,h2,h3,h4,h5,h6{ margin:.6em 0 .3em; line-height:1.2; }
  h1{ font-size:clamp(2rem,3.5vw,3rem); }
  h2{ font-size:clamp(1.75rem,2.8vw,2.3rem); }
  h3{ font-size:clamp(1.3rem,2.2vw,1.6rem); }
  p{ margin:0 0 1em; }

  .entry-content>*{ max-width:var(--fx-container); margin-inline:auto; padding-inline:var(--fx-gap); }
  .alignwide{ max-width:calc(var(--fx-container) + 2*var(--fx-gap)); }
  .alignfull,.entry-content .alignfull{
    max-width:none; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding:0;
  }

  .entry-content img{ border-radius:var(--fx-radius); }
  .entry-content table{
    width:100%; border-collapse:collapse; border:1px solid var(--fx-border);
    border-radius:var(--fx-radius); overflow:auto;
  }
  .entry-content th,.entry-content td{ padding:12px; border-bottom:1px solid var(--fx-border); }
  .entry-content tr:nth-child(even){ background:rgba(255,255,255,.03); }
}

/* =========================
   2) HEADER
========================= */
@layer components {
  .site-header{
    position:sticky; top:0; z-index:var(--z-header);
    background:rgba(0,0,0,.35);
    border-bottom:1px solid var(--fx-border);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
  }
  @supports not ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))){
    .site-header{ background:rgba(18,18,18,.9); }
  }

  /* WP adminbar */
  @media (min-width:783px){
    .admin-bar .site-header{ top:32px; }
    .admin-bar .nav-toggle{ top:calc(28px + 32px); }
  }
  @media (max-width:782.98px){
    .admin-bar .site-header{ top:46px; }
    .admin-bar .nav-toggle{ top:calc(28px + 46px); }
  }

  .header-inner{
    min-height:var(--fx-header-h);
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:var(--fx-gap);
    max-width:var(--fx-container);
    margin-inline:auto;
    padding-inline:var(--fx-gap);
  }

  /* Logo */
  .brand a{ display:inline-flex; align-items:center; gap:12px; }
  .custom-logo-link img,.site-logo,.custom-logo{
    display:block;
    max-height:clamp(56px,8vw,84px);
    width:auto;
  }
  @media (min-width:992px){
    .custom-logo-link img,.site-logo,.custom-logo{ max-height:clamp(72px,9vw,100px); }
  }

  /* Desktop nav (gecentreerd) */
  .site-nav-desktop{ justify-self:center; }
  .site-nav-desktop .menu{
    display:flex; gap:36px; margin:0; padding:0; list-style:none;
  }
  .site-nav-desktop .menu li{ list-style:none; }
  .site-nav-desktop .menu a{
    color:#fff; font-weight:700;
    text-decoration:none; position:relative;
    padding:10px 0;
    transition:color var(--fx-speed) var(--fx-ease);
  }
  .site-nav-desktop .menu a::after{
    content:""; position:absolute; left:0; right:0; bottom:-4px; height:3px;
    background:linear-gradient(90deg,var(--fx-cta-a),var(--fx-cta-b));
    transform:scaleX(0); transform-origin:left;
    transition:transform var(--fx-speed) var(--fx-ease);
  }
  .site-nav-desktop .menu a:hover{
    background:linear-gradient(90deg,var(--fx-cta-a),var(--fx-cta-b));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .site-nav-desktop .menu a:hover::after,
  .site-nav-desktop .menu .current-menu-item > a::after{ transform:scaleX(1); }

  /* CTA (nooit onderstreept) */
  .header-cta{ justify-self:end; }
  .header-cta .button{
    display:inline-flex; align-items:center; justify-content:center;
    min-height:48px; padding:14px 32px;
    border-radius:var(--fx-radius-lg);
    font-weight:800; font-size:1rem;
    color:#fff;
    text-decoration:none;
    background:linear-gradient(135deg,var(--fx-cta-a),var(--fx-cta-b));
    border:none;
    box-shadow:0 0 24px rgba(140,82,255,.35), 0 0 18px rgba(255,222,89,.25);
    transition:transform .3s var(--fx-ease), box-shadow .3s var(--fx-ease);
    position:relative; overflow:hidden;
  }
  .header-cta .button:hover{
    transform:scale(1.07);
    box-shadow:0 0 32px rgba(140,82,255,.55), 0 0 22px rgba(255,222,89,.35);
  }
  .header-cta .button::after{
    content:""; position:absolute; inset:-6px; border-radius:inherit;
    background:radial-gradient(circle, rgba(255,255,255,.25) 0%, rgba(255,255,255,0) 70%);
    opacity:0; animation:fx-pulse 2.8s ease-in-out infinite;
  }

  /* Hamburger (rechtsboven, geen wit blok) */
  .nav-toggle{
    position:fixed;
    top:28px;
    right:var(--fx-gap);
    z-index:var(--z-toggle);
    inline-size:48px; block-size:48px;
    display:none; place-items:center;
    background:transparent;
    border:0; cursor:pointer;
    -webkit-appearance:none; appearance:none;
    -webkit-tap-highlight-color:transparent;
    outline:none;
    transition:transform .3s var(--fx-ease);
  }
  .nav-toggle::-moz-focus-inner{ border:0; }
  .nav-toggle:focus{ outline:none; }
  .nav-toggle:focus-visible{
    box-shadow:0 0 0 2px rgba(255,255,255,.25);
    border-radius:10px;
  }
  .nav-toggle:active{ transform:scale(1.1); }

  .nav-toggle .bars{ inline-size:26px; block-size:18px; position:relative; }
  .nav-toggle .bars span{
    position:absolute; inset-inline:0; block-size:3px; border-radius:2px;
    background:linear-gradient(90deg,var(--fx-cta-a),var(--fx-cta-b));
    transition: top .3s var(--fx-ease), transform .3s var(--fx-ease), opacity .3s var(--fx-ease);
  }
  .nav-toggle .bars span:nth-child(1){ top:0; }
  .nav-toggle .bars span:nth-child(2){ top:7px; }
  .nav-toggle .bars span:nth-child(3){ top:14px; }

  .nav-toggle.open .bars span:nth-child(1){ top:7px; transform:rotate(45deg); }
  .nav-toggle.open .bars span:nth-child(2){ opacity:0; }
  .nav-toggle.open .bars span:nth-child(3){ top:7px; transform:rotate(-45deg); }

  /* Zichtbaarheid desktop/mobiel */
  @media (min-width:992px){
    .site-nav-desktop{ display:block; }
    .nav-toggle{ display:none; }
    .header-cta{ display:block; }
  }
  @media (max-width:991.98px){
    .site-nav-desktop{ display:none; }
    .header-cta{ display:none; }
    .nav-toggle{ display:grid; }
  }
}

/* =========================
   3) OVERLAY MENU (mobiel)
========================= */
@layer components {
  .menu-overlay{
    position:fixed; inset:0; pointer-events:none; z-index:var(--z-overlay);
  }
  .menu-overlay::before{
    content:""; position:absolute; inset:0;
    background:linear-gradient(135deg, rgba(0,0,0,.8), rgba(30,30,30,.8));
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
    opacity:0; transition:opacity var(--fx-speed) var(--fx-ease);
  }
  .menu-panel{
    position:absolute; top:0; right:0; bottom:0;
    inline-size:min(400px,80vw);
    background:rgba(20,20,20,.95);
    border-left:1px solid var(--fx-border);
    box-shadow:-24px 0 48px rgba(0,0,0,.35);
    transform:translateX(100%);
    transition:transform var(--fx-speed) var(--fx-ease);
    padding: calc(env(safe-area-inset-top,0) + 32px) 28px 160px 36px;
    overflow-y:auto;
  }

  /* Open-state */
  .menu-overlay.is-open{ pointer-events:auto; }
  .menu-overlay.is-open::before{ opacity:1; }
  .menu-overlay.is-open .menu-panel{ transform:translateX(0); }

  /* Lijst */
  .menu-list{
    list-style:none; margin:0; padding:0; display:grid; gap:20px;
  }
  .menu-list li{ list-style:none; }
  .menu-list a{
    color:#fff; font-weight:800; font-size:1.6rem; line-height:1.25;
    position:relative; border-radius:6px;
    padding:6px 0;
    text-decoration:none; /* nooit underline */
  }
  .menu-list a:hover{
    background:linear-gradient(90deg,var(--fx-cta-a),var(--fx-cta-b));
    -webkit-background-clip:text; background-clip:text; color:transparent;
    text-decoration:none;
  }
  .menu-list a::after{
    content:""; position:absolute; left:0; right:0; bottom:-6px; height:3px;
    background:linear-gradient(90deg,var(--fx-cta-a),var(--fx-cta-b));
    transform:scaleX(0); transform-origin:left;
    transition:transform var(--fx-speed) var(--fx-ease);
  }
  .menu-list a:hover::after{ transform:scaleX(1); }

  /* Focusstijl */
  .menu-list a:focus{ outline:none; box-shadow:none; }
  .menu-list a:focus-visible{
    outline:none;
    box-shadow:0 0 0 2px rgba(255,255,255,.25);
    border-radius:8px;
  }

  /* Vaste CTA onderin overlay */
  .menu-cta{
    position:fixed; inset-inline:0; bottom:0;
    display:flex; justify-content:center; align-items:center;
    background:linear-gradient(90deg, rgba(20,20,20,0), rgba(20,20,20,.9) 40%, rgba(20,20,20,1) 80%);
    padding:24px 0 28px;
    z-index:var(--z-cta-fixed);
  }
  .menu-cta .button{
    background:linear-gradient(135deg,var(--fx-cta-a),var(--fx-cta-b));
    color:#fff;
    font-weight:800;
    border-radius:var(--fx-radius-lg);
    padding:16px 38px;
    border:none;
    text-decoration:none; /* expliciet nooit underline */
    box-shadow:0 0 20px rgba(140,82,255,.4), 0 0 16px rgba(255,222,89,.25);
    transition:transform .3s var(--fx-ease);
    position:relative; overflow:hidden;
  }
  .menu-cta .button:hover{ transform:scale(1.07); }
  .menu-cta .button::after{
    content:""; position:absolute; inset:-6px; border-radius:inherit;
    background:radial-gradient(circle, rgba(255,255,255,.25) 0%, rgba(255,255,255,0) 70%);
    opacity:0; animation:fx-pulse 2.8s ease-in-out infinite;
  }

  /* Decoratieve lijnen (parallax via JS) */
  .menu-deco{
    position:fixed; left:0; right:0; bottom:0; height:160px;
    pointer-events:none; z-index:var(--z-deco); opacity:.85;
    transform:translateZ(0);
    will-change: transform;
  }
  .menu-deco .deco-svg{
    inline-size:100%; block-size:100%; display:block;
    filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));
  }
}

/* =========================
   4) FORMULIEREN & FOOTER
========================= */
@layer components {
  input,textarea,select{
    width:100%; padding:12px 14px;
    border:1px solid var(--fx-border);
    border-radius:var(--fx-radius);
    background:rgba(255,255,255,.04); color:#fff;
  }
  input::placeholder,textarea::placeholder{ color:var(--fx-text-muted); }

  .site-footer{
    border-top:1px solid var(--fx-border);
    padding-block:32px; margin-top:48px; color:var(--fx-text-muted);
  }
  .footer-inner{
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
    max-width:var(--fx-container); margin-inline:auto; padding-inline:var(--fx-gap);
  }
  .footer-nav .menu{ list-style:none; display:flex; gap:16px; margin:0; padding:0; }
  .footer-nav .menu a{ color:var(--fx-text-muted); text-decoration:none; }
  .footer-nav .menu a:hover{ color:#fff; text-decoration:none; } /* nooit underline */
}

/* =========================
   5) UTILITIES & ACCESSIBILITY
========================= */
@layer utilities {
  /* Reveal-animaties (JS zet .is-visible) */
  .reveal{ opacity:0; transform:translateY(12px); transition:opacity .5s var(--fx-ease), transform .5s var(--fx-ease); }
  .reveal.is-visible{ opacity:1; transform:none; }

  /* No-JS fallback: toon reveal-elementen zichtbaar */
  .no-js .reveal{
    opacity:1 !important;
    transform:none !important;
  }

  /* Focus */
  :focus-visible{ outline:2px solid var(--fx-cta-a); outline-offset:2px; }

  /* Scroll lock voor overlay */
  html.no-scroll, body.no-scroll{ overflow:hidden; }

  /* Toetsen / tap targets */
  a.button, button, .nav-toggle{
    min-inline-size: var(--fx-tap);
    min-block-size: var(--fx-tap);
  }

  /* CTA/knoppen nooit onderstreept */
  .header-cta .button,
  .menu-cta .button,
  .button { text-decoration:none; }

  /* Navigatie-links nooit tekst-underline (we gebruiken ::after) */
  .site-nav-desktop .menu a,
  .menu-list a { text-decoration:none; }

  /* Reduced motion respecteren */
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
    .header-cta .button::after,
    .menu-cta .button::after{ animation:none !important; opacity:.12; }
  }

  /* Print */
  @media print{
    .site-header, .menu-overlay, .menu-cta, .menu-deco{ display:none !important; }
    a{ text-decoration:underline; }
    body{ background:#fff; color:#000; }
  }
}

/* =========================
   6) KEYFRAMES
========================= */
@keyframes fx-pulse{
  0%{opacity:0; transform:scale(1);}
  40%{opacity:.5; transform:scale(1.1);}
  100%{opacity:0; transform:scale(1.2);}
}

/* =========================
   7) COMPAT HOTFIXES
========================= */
a,button{ -webkit-tap-highlight-color:transparent; }
.nav-toggle::-moz-focus-inner{ border:0; }

@supports(padding:max(0px)){
  .menu-panel{ padding-bottom: max(160px, calc(env(safe-area-inset-bottom,0) + 120px)); }
}

/* =======================================
   8) GLOBAL LINK POLICY – onderstreping
======================================= */
/* Alle links standaard zonder streep */
a, a:link, a:visited{
  text-decoration:none !important;
  border-bottom:none !important;
}
/* Alleen content-links bij hover subtiel onderstreept */
.entry-content a:not(.button):not(.wp-block-button__link):not(.no-underline):hover{
  text-decoration:underline !important;
  text-underline-offset:3px;
  text-decoration-thickness:1.5px;
}
/* CTA’s, menu’s, buttons: nooit onderstreept (ook bij hover) */
.header-cta .button,
.menu-cta .button,
.button,
.site-nav-desktop .menu a,
.menu-list a,
.footer-nav .menu a{
  text-decoration:none !important;
  border-bottom:none !important;
}
.footer-nav .menu a:hover{
  color:#fff;
  text-decoration:none !important;
}