/* =========================================================
   footer.css — D-Detailerz
   Subtiele footer voor 3 blokken
   ========================================================= */

/* =========================================================
   01. Design tokens
   ========================================================= */
:root{
  --footer-bg:#0b1016;
  --footer-surface:rgba(255,255,255,.03);
  --footer-surface-hover:rgba(255,255,255,.045);
  --footer-border:rgba(255,255,255,.06);

  --footer-text:#d8dfeb;
  --footer-muted:#97a3b8;
  --footer-heading:#f8fbff;
  --footer-link:#e9eef7;
  --footer-link-hover:#7ed1ff;

  --footer-radius:22px;
  --footer-radius-sm:16px;

  --footer-shadow:0 10px 28px rgba(0,0,0,.12);
  --footer-logo-shadow:0 10px 22px rgba(0,0,0,.18);

  --footer-gap:clamp(18px, 2.2vw, 28px);
  --footer-pad:clamp(18px, 2vw, 26px);
  --footer-logo-size:72px;

  --footer-ring:0 0 0 3px rgba(176,80,255,.18);
}

/* =========================================================
   02. Helper
   ========================================================= */
.visually-hidden{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* =========================================================
   03. Footer base
   ========================================================= */
.footer{
  position:relative;
  background:var(--footer-bg);
  color:var(--footer-text);
  border-top:1px solid var(--footer-border);
}

.footer .container{
  display:grid;
  gap:clamp(24px, 3vw, 34px);
}

.footer h3{
  margin:0 0 .8rem;
  color:var(--footer-heading);
  font-size:clamp(1.04rem, 1.4vw, 1.2rem);
  line-height:1.15;
}

.footer p{
  margin:0;
  color:var(--footer-text);
}

.footer .tiny{
  font-size:.94rem;
  color:var(--footer-muted);
}

.footer a{
  color:var(--footer-link);
  text-decoration:none;
  transition:
    color .18s ease,
    opacity .18s ease,
    transform .18s ease;
}

.footer a:hover{
  color:var(--footer-link-hover);
}

/* =========================================================
   04. Grid layout
   ========================================================= */
.foot{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--footer-gap);
}

.footer-block{
  display:grid;
  align-content:start;
  gap:12px;
  min-width:0;
  padding:var(--footer-pad);
  border-radius:var(--footer-radius);
  border:1px solid var(--footer-border);
  background:linear-gradient(180deg, var(--footer-surface), rgba(255,255,255,.015));
  box-shadow:var(--footer-shadow);
}

.footer-block > *{
  min-width:0;
}

/* =========================================================
   05. Brand block
   ========================================================= */
.footer-logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--footer-logo-size);
  height:var(--footer-logo-size);
  border-radius:20px;
  overflow:hidden;
  background:rgba(255,255,255,.04);
  border:1px solid var(--footer-border);
  box-shadow:var(--footer-logo-shadow);
}

.footer-logo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.footer-block:first-child p{
  max-width:28ch;
}

/* =========================================================
   06. Contact / list styles
   ========================================================= */
.footer address{
  margin:0;
  font-style:normal;
  display:grid;
  gap:10px;
}

.footer ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}

.footer li{
  margin:0;
}

.footer address a,
.footer-block ul a,
.footer-block > p a{
  display:inline-flex;
  align-items:center;
  width:fit-content;
}

.footer address a:hover,
.footer-block ul a:hover,
.footer-block > p a:hover{
  transform:translateX(2px);
}

/* =========================================================
   07. Cookie button
   ========================================================= */
#open-cookie-settings{
  appearance:none;
  border:1px solid rgba(176,80,255,.18);
  background:rgba(255,255,255,.04);
  color:var(--footer-link);
  font:inherit;
  font-weight:700;
  line-height:1;
  padding:.85rem 1.1rem;
  border-radius:999px;
  cursor:pointer;
  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    transform .14s ease,
    box-shadow .18s ease;
}

#open-cookie-settings:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(176,80,255,.28);
  color:var(--footer-link-hover);
}

#open-cookie-settings:active{
  transform:translateY(1px);
}

/* =========================================================
   08. Footer bottom
   ========================================================= */
.footer-bottom{
  display:grid;
  gap:14px;
  align-items:center;
  padding-top:18px;
  border-top:1px solid var(--footer-border);
}

.footer-bottom .tiny{
  margin:0;
}

/* Scoped site badge */
.footer .site-badge{
  position:static;
  left:auto;
  right:auto;
  bottom:auto;
  transform:none;
  z-index:auto;

  display:inline-flex;
  align-items:center;
  gap:10px;
  justify-self:start;
  width:fit-content;
  max-width:100%;

  padding:9px 13px;
  border-radius:999px;

  background:rgba(255,255,255,.08);
  color:#e9eef7;
  border:1px solid var(--footer-border);
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;

  font:600 12px/1.2 Poppins, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  text-decoration:none;
  opacity:.96;
  transition:
    background .18s ease,
    color .18s ease,
    transform .18s ease,
    border-color .18s ease;
}

.footer .site-badge:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.12);
  color:#ffffff;
}

.footer .site-badge img{
  width:18px;
  height:18px;
  border-radius:50%;
  box-shadow:none;
}

.footer .site-badge span{
  color:inherit;
}

/* =========================================================
   09. Focus
   ========================================================= */
.footer a:focus-visible,
#open-cookie-settings:focus-visible,
.footer .site-badge:focus-visible{
  outline:none;
  box-shadow:var(--footer-ring);
  border-radius:14px;
}

/* =========================================================
   10. Responsive
   ========================================================= */
@media (min-width: 640px){
  .foot{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .footer-block:first-child{
    grid-column:1 / -1;
  }
}

@media (min-width: 980px){
  .foot{
    grid-template-columns:1.15fr 1fr .95fr;
  }

  .footer-block:first-child{
    grid-column:auto;
  }

  .footer-bottom{
    grid-template-columns:1fr auto;
  }

  .footer .site-badge{
    justify-self:end;
  }
}

@media (min-width: 1280px){
  .footer .container{
    gap:38px;
  }
}

/* =========================================================
   11. Light theme
   ========================================================= */
body[data-theme="light"]{
  --footer-bg:#f2edf8;
  --footer-surface:rgba(255,255,255,.42);
  --footer-surface-hover:rgba(255,255,255,.62);
  --footer-border:rgba(106,92,255,.10);

  --footer-text:#4c4466;
  --footer-muted:#7a7293;
  --footer-heading:#20183a;
  --footer-link:#5b39db;
  --footer-link-hover:#0284c7;

  --footer-shadow:0 8px 20px rgba(76,54,140,.05);
  --footer-logo-shadow:0 8px 18px rgba(76,54,140,.08);

  --footer-ring:0 0 0 3px rgba(106,92,255,.14);
}

body[data-theme="light"] .footer-logo{
  background:rgba(255,255,255,.58);
}

body[data-theme="light"] #open-cookie-settings{
  background:rgba(255,255,255,.52);
  color:#4c4466;
  border-color:rgba(106,92,255,.14);
  box-shadow:none;
}

body[data-theme="light"] #open-cookie-settings:hover{
  background:rgba(255,255,255,.76);
  color:#20183a;
}

body[data-theme="light"] .footer .site-badge{
  background:rgba(255,255,255,.72);
  color:#7c2d5f;
  border-color:rgba(106,92,255,.10);
}

body[data-theme="light"] .footer .site-badge:hover{
  background:rgba(255,255,255,.92);
  color:#6f2555;
}

/* =========================================================
   12. Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .footer a,
  #open-cookie-settings,
  .footer .site-badge{
    transition:none;
  }
}

/* =========================================================
   13. Print
   ========================================================= */
@media print{
  .footer{
    background:#ffffff !important;
    color:#000000 !important;
    border-top:1px solid #d8d8d8;
  }

  .footer-block{
    background:transparent !important;
    box-shadow:none !important;
    border:1px solid #dddddd !important;
  }

  .footer .site-badge,
  #open-cookie-settings{
    display:none !important;
  }
}