/* ==========================================================================
   MIEDEMA ASSISTANCE — FOOTER COMPONENT
   /assets/css/ma-footer.css

   Minimal editorial footer. Geen social bar — alleen main (4 kolommen als
   accordion/grid) en bottom (copyright + legal).

   Structuur (zie ma-footer-block.html)
   -----------------------------------
     .ma-footer-root
     ├── .ma-footer-main
     │   └── .gb-accordion.ma-footer-acc
     │       └── .gb-accordion__item.ma-footer-col (×4)
     │           ├── .gb-accordion__toggle.ma-footer-col-h
     │           │   ├── .gb-text.ma-footer-col-h-text
     │           │   └── .gb-accordion__toggle-icon.ma-footer-col-h-icon
     │           └── .gb-accordion__content.ma-footer-col-body
     │               └── (hard-coded markup OF query-loop die
     │                    <li class="ma-footer-link-wrap"><a>…</a></li>
     │                    rendert via {{post_title link:post}})
     └── .ma-footer-bottom
         └── .ma-footer-bottom-inner
             ├── .ma-footer-company
             └── .ma-footer-meta

   Link-styling
   ------------
   De query-looper gebruikt {{post_title link:post}} dat een naakte <a>
   rendert zonder class. We targeten die <a> via
   `.ma-footer-link-wrap a`. De .ma-footer-link class blijft bestaan als
   escape-hatch voor hardcoded <a>-tags (bv. de tel/mail regels gebruiken
   .ma-footer-contact-line — niet deze).

   Gedrag
   ------
   < 40em   GP Pro accordion. Compacte toggle-padding, chevron zichtbaar.
   ≥ 40em   2-koloms grid, content geforceerd open, chevron weg.
   ≥ 64em   4 kolommen.

   Dependencies: ma-root.css (tokens)
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. ROOT
   -------------------------------------------------------------------------- */

.ma-footer-root {
  background-color: var(--ma-surface-inverse);
  color: var(--ma-ink-inverse);
  margin-block-start: clamp(3rem, 2rem + 3vw, 5rem);
  border-block-start: 1px solid color-mix(in srgb, var(--ma-white) 8%, transparent);
}

.ma-footer-main,
.ma-footer-bottom {
  inline-size: 100%;
}


/* --------------------------------------------------------------------------
   2. MAIN — accordion-wrapper wordt op desktop een grid
   -------------------------------------------------------------------------- */

.ma-footer-main {
  padding-block: clamp(1.5rem, 1rem + 2vw, 3.5rem);
}

.ma-footer-acc {
  max-inline-size: var(--ma-wrap-max);
  margin-inline: auto;
  padding-inline: var(--ma-wrap-gutter);
  display: block;
}

@media (min-width: 40em) {
  .ma-footer-acc {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    row-gap:    clamp(1.5rem, 1rem + 2vw, 2.5rem);
  }
}

@media (min-width: 64em) {
  .ma-footer-acc {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}


/* --------------------------------------------------------------------------
   3. ACCORDION ITEM (= kolom)
   -------------------------------------------------------------------------- */

.ma-footer-acc .ma-footer-col {
  /* Neutraliseer GP Pro defaults (1em margin, 1em padding, black border) */
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  min-inline-size: 0;
}

/* Mobile: scheidingslijnen tussen items voor accordion-look */
@media (max-width: 39.99em) {
  .ma-footer-acc .ma-footer-col {
    border-block-start: 1px solid color-mix(in srgb, var(--ma-white) 8%, transparent);
  }
  .ma-footer-acc .ma-footer-col:last-child {
    border-block-end: 1px solid color-mix(in srgb, var(--ma-white) 8%, transparent);
  }
}


/* --------------------------------------------------------------------------
   4. TOGGLE (= kolom-kop)
   --------------------------------------------------------------------------
   GP Pro genereert een eigen .gb-accordion__toggle-{uniqueId} selector
   met default 'color: #000000'. Om die te overrulen targeten we zowel de
   toggle als de .gb-text span erbinnen met !important.
   -------------------------------------------------------------------------- */

.ma-footer-acc .ma-footer-col-h {
  /* Reset GP Pro defaults */
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;

  /* Mobile layout: full-width tap-target, compacte padding */
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 1em;
  inline-size: 100%;
  padding-block: clamp(0.6rem, 0.5rem + 0.3vw, 0.85rem);

  font-size: var(--ma-text-2xs);
  font-weight: var(--ma-weight-semibold);
  letter-spacing: var(--ma-tracking-widest);
  text-transform: uppercase;
  line-height: 1.2;
  text-align: start;

  cursor: pointer;
  transition: color var(--ma-duration-fast) var(--ma-ease);
}

/* Wint van GP Pro's auto-gegenereerde 'color: #000000' */
.ma-footer-acc .ma-footer-col-h,
.ma-footer-acc .ma-footer-col-h > .gb-text,
.ma-footer-acc .ma-footer-col-h .ma-footer-col-h-text {
  color: var(--ma-white) !important;
}

@media (hover: hover) {
  .ma-footer-acc .ma-footer-col-h:hover,
  .ma-footer-acc .ma-footer-col-h:hover > .gb-text,
  .ma-footer-acc .ma-footer-col-h:hover .ma-footer-col-h-text {
    color: var(--ma-accent) !important;
  }
}

.ma-footer-acc .ma-footer-col-h:focus-visible {
  outline: 2px solid var(--ma-focus-ring);
  outline-offset: 2px;
}

/* Tekstspan erft typografie van de toggle */
.ma-footer-acc .ma-footer-col-h-text {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  line-height: inherit;
}


/* --------------------------------------------------------------------------
   5. CHEVRON (toggle-icon)
   --------------------------------------------------------------------------
   Target zowel de globalClass (.ma-footer-col-h-icon) als de GP Pro
   default (.gb-accordion__toggle-icon) voor robuustheid — werkt ook als
   de globalClass niet geregistreerd is in de GB Style Library.
   -------------------------------------------------------------------------- */

.ma-footer-acc .gb-accordion__toggle-icon,
.ma-footer-acc .ma-footer-col-h-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ma-accent);
}

.ma-footer-acc .gb-accordion__toggle-icon svg,
.ma-footer-acc .ma-footer-col-h-icon svg {
  display: block;
  inline-size: 16px;
  block-size: 16px;
  stroke: currentColor;
  fill: none;
}

/* GP Pro JS toggelt .gb-block-is-current op het item om open/close state
   te regelen. De inner spans (-open / -close) horen al door GP Pro's eigen
   CSS gemanaged te worden, dus we laten die met rust. */


/* --------------------------------------------------------------------------
   6. CONTENT (= kolom-body)
   -------------------------------------------------------------------------- */

.ma-footer-acc .ma-footer-col-body {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;

  display: flex;
  flex-direction: column;
  gap: clamp(0.35rem, 0.25rem + 0.2vw, 0.5rem);
  padding-block:
    clamp(0.25rem, 0.2rem + 0.2vw, 0.5rem)
    clamp(0.75rem, 0.6rem + 0.4vw, 1rem);
}


/* --------------------------------------------------------------------------
   7. DESKTOP OVERRIDE — geforceerd open, toggle wordt statische kop
   -------------------------------------------------------------------------- */

@media (min-width: 40em) {

  /* Content altijd zichtbaar — override GP Pro animation state */
  .ma-footer-acc .gb-accordion__content,
  .ma-footer-acc .ma-footer-col-body {
    display: flex !important;
    flex-direction: column !important;
    block-size: auto !important;
    max-block-size: none !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: clamp(0.35rem, 0.25rem + 0.2vw, 0.5rem);
  }

  /* Kolom-kop = statische heading met korte accent-underline */
  .ma-footer-acc .ma-footer-col-h {
    display: inline-flex;
    inline-size: auto;
    align-self: flex-start;

    padding-block: 0 clamp(0.4rem, 0.3rem + 0.25vw, 0.6rem);
    margin-block-end: clamp(0.75rem, 0.6rem + 0.4vw, 1rem);
    border-block-end: 2px solid var(--ma-accent);

    cursor: default;
    pointer-events: none;
  }

  /* Chevron weg op desktop */
  .ma-footer-acc .gb-accordion__toggle-icon,
  .ma-footer-acc .ma-footer-col-h-icon {
    display: none !important;
  }
}


/* --------------------------------------------------------------------------
   8. FOOTER LINK LIJST — looper output + link styling
   --------------------------------------------------------------------------
   Rendered DOM (van boven naar onder):
     <ul class="gb-query ma-footer-list">
       <div>                                  ← looper
         <li class="gb-text ma-footer-link-wrap">
           <a href="…">Post Title</a>         ← van {{post_title link:post}}
         </li>
         …
       </div>
     </ul>

   Hardcoded variant (bv. extra links in Contact-kolom gebruikt NIET deze
   lijst, maar .ma-footer-contact-line in §9). Mochten hardcoded <a>-tags
   met class="ma-footer-link" worden toegevoegd, dan werken die ook.
   -------------------------------------------------------------------------- */

.ma-footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ma-footer-list > div,
.ma-footer-list {
  display: flex;
  flex-direction: column;
  gap: clamp(0.35rem, 0.25rem + 0.2vw, 0.5rem);
}

.ma-footer-list > div {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ma-footer-list li,
.ma-footer-list .gb-loop-item,
.ma-footer-link-wrap {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* De <a> — gerendered binnen .ma-footer-link-wrap door de dynamic tag,
   óf handmatig met class="ma-footer-link" */
.ma-footer-link-wrap a,
.ma-footer-link,
.ma-footer-col a.ma-footer-link {
  display: inline-block;
  color: color-mix(in srgb, var(--ma-white) 72%, transparent);
  text-decoration: none;
  font-size: var(--ma-text-sm);
  line-height: var(--ma-leading-snug);
  letter-spacing: var(--ma-tracking-body);
  transition: color var(--ma-duration-fast) var(--ma-ease);
}

.ma-footer-link-wrap a:is(:link, :visited),
.ma-footer-link:is(:link, :visited) {
  color: color-mix(in srgb, var(--ma-white) 72%, transparent);
  text-decoration: none;
}

@media (hover: hover) {
  .ma-footer-link-wrap a:hover,
  .ma-footer-link:hover {
    color: var(--ma-white);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
  }
}

.ma-footer-link-wrap a:focus-visible,
.ma-footer-link:focus-visible {
  color: var(--ma-white);
  outline: 2px solid var(--ma-focus-ring);
  outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   9. CONTACT-KOLOM — address + tel/mail regels
   -------------------------------------------------------------------------- */

.ma-footer-address {
  margin: 0;
  font-style: normal;
  font-size: var(--ma-text-sm);
  line-height: var(--ma-leading-snug);
  letter-spacing: var(--ma-tracking-body);
  color: color-mix(in srgb, var(--ma-white) 82%, transparent);
}

.ma-footer-address strong {
  display: block;
  color: var(--ma-white);
  font-weight: var(--ma-weight-semibold);
  margin-block-end: 0.2rem;
}

.ma-footer-contact-line {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  color: color-mix(in srgb, var(--ma-white) 72%, transparent);
  text-decoration: none;
  font-size: var(--ma-text-sm);
  line-height: var(--ma-leading-snug);
  letter-spacing: var(--ma-tracking-body);
  transition: color var(--ma-duration-fast) var(--ma-ease);
}

.ma-footer-contact-line:is(:link, :visited) {
  color: color-mix(in srgb, var(--ma-white) 72%, transparent);
  text-decoration: none;
}

@media (hover: hover) {
  .ma-footer-contact-line:hover {
    color: var(--ma-white);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
  }
}

.ma-footer-contact-line:focus-visible {
  color: var(--ma-white);
  outline: 2px solid var(--ma-focus-ring);
  outline-offset: 2px;
}

.ma-footer-contact-label {
  display: inline-block;
  min-inline-size: 3rem;
  color: color-mix(in srgb, var(--ma-white) 55%, transparent);
  font-size: var(--ma-text-3xs);
  font-weight: var(--ma-weight-semibold);
  letter-spacing: var(--ma-tracking-wider);
  text-transform: uppercase;
}


/* --------------------------------------------------------------------------
   10. KEURMERK
   -------------------------------------------------------------------------- */

.ma-footer-keurmerk {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-block-start: clamp(0.5rem, 0.4rem + 0.3vw, 0.75rem);
  padding-block-start: clamp(0.5rem, 0.4rem + 0.3vw, 0.75rem);
  border-block-start: 1px solid color-mix(in srgb, var(--ma-white) 8%, transparent);
}

.ma-footer-keurmerk-img {
  max-inline-size: 6rem;
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
  background-color: var(--ma-white);
  padding: 4px 6px;
}

.ma-footer-keurmerk-code {
  margin: 0;
  font-size: var(--ma-text-xs);
  color: color-mix(in srgb, var(--ma-white) 72%, transparent);
  letter-spacing: var(--ma-tracking-body);
  line-height: var(--ma-leading-snug);
}

.ma-footer-keurmerk-code strong {
  display: block;
  color: var(--ma-white);
  font-weight: var(--ma-weight-semibold);
  font-size: var(--ma-text-sm);
}


/* --------------------------------------------------------------------------
   11. BOTTOM — copyright + legal links
   -------------------------------------------------------------------------- */

.ma-footer-bottom {
  padding-block: clamp(1rem, 0.85rem + 0.6vw, 1.5rem);
  border-block-start: 1px solid color-mix(in srgb, var(--ma-white) 8%, transparent);
}

.ma-footer-bottom-inner {
  max-inline-size: var(--ma-wrap-max);
  margin-inline: auto;
  padding-inline: var(--ma-wrap-gutter);
  display: flex;
  flex-direction: column;
  gap: clamp(0.4rem, 0.3rem + 0.3vw, 0.6rem);
}

@media (min-width: 48em) {
  .ma-footer-bottom-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: clamp(1rem, 0.75rem + 1vw, 2rem);
  }
}

.ma-footer-company {
  margin: 0;
  font-size: var(--ma-text-xs);
  color: color-mix(in srgb, var(--ma-white) 82%, transparent);
  font-weight: var(--ma-weight-semibold);
  letter-spacing: var(--ma-tracking-body);
  line-height: var(--ma-leading-snug);
}

.ma-footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.4rem, 0.3rem + 0.3vw, 0.6rem) clamp(0.85rem, 0.6rem + 0.75vw, 1.25rem);
  margin: 0;
  font-size: var(--ma-text-xs);
  color: color-mix(in srgb, var(--ma-white) 55%, transparent);
  letter-spacing: var(--ma-tracking-body);
  line-height: var(--ma-leading-snug);
}

.ma-footer-meta a {
  color: inherit;
  text-decoration: none;
  transition: color var(--ma-duration-fast) var(--ma-ease);
}

@media (hover: hover) {
  .ma-footer-meta a:hover {
    color: var(--ma-white);
  }
}

.ma-footer-meta a:focus-visible {
  color: var(--ma-white);
  outline: 2px solid var(--ma-focus-ring);
  outline-offset: 2px;
}

/* Iubenda — strip eventuele residue-styling. iubenda-black class is bewust
   weggelaten in de HTML zodat geen pill-button rendert. */
.ma-footer-meta a[class*="iubenda"] {
  color: inherit !important;
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  font: inherit !important;
}

@media (hover: hover) {
  .ma-footer-meta a[class*="iubenda"]:hover {
    color: var(--ma-white) !important;
  }
}


/* --------------------------------------------------------------------------
   12. RESET — scherpe hoeken in de hele footer
   -------------------------------------------------------------------------- */

.ma-footer-root *,
.ma-footer-root *::before,
.ma-footer-root *::after {
  border-radius: 0 !important;
}