/* Super Stubborn — Footer
   GEGENEREERD uit de mockup (sectie `footer`) door port_to_wp.py.
   Gedeelde componenten en tokens staan in assets/css/superstubborn.css. */

.ssx-footer{
  background:var(--ss-ground);
  padding-top:0;
  padding-bottom:var(--ss-sp-7);
  overflow-x:clip;
}

/* ---- Signature brand marquee band ---- */
.ssx-footer-marquee{
  --ss-marquee-dur:46s;
  padding-block:var(--ss-sp-7) var(--ss-sp-5);
  border-bottom:1px solid var(--ss-hairline);
  -webkit-user-select:none;
  user-select:none;
}
.ssx-footer-marquee .ss-marquee__item{
  font-size:clamp(2rem, 5vw, 4.5rem);
  color:var(--ss-beige);
}
.ssx-footer-marquee .ss-marquee__item--outline{
  color:transparent;
  -webkit-text-stroke:1px var(--ss-text-faint);
}

.ssx-footer-rule{ margin-block:var(--ss-sp-6); }

/* ---- Top grid ---- */
.ssx-footer-top{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--ss-sp-8) var(--ss-sp-7);
  padding-top:var(--ss-sp-2);
}
@media (min-width:720px){
  .ssx-footer-top{ grid-template-columns:1fr 1fr; }
}
@media (min-width:1080px){
  .ssx-footer-top{ grid-template-columns:minmax(0,1.15fr) minmax(0,1.85fr); }
}

.ssx-footer-story{ margin-top:var(--ss-sp-5); }
.ssx-footer-note{ margin-top:var(--ss-sp-4); }

/* ---- Social ---- */
.ssx-footer-social{
  list-style:none;
  margin:var(--ss-sp-6) 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:var(--ss-sp-5);
}
.ssx-footer-social-link{
  display:inline-flex;
  align-items:center;
  gap:var(--ss-sp-3);
  color:var(--ss-text-muted);
  font-size:var(--ss-fs-label);
  text-transform:uppercase;
  letter-spacing:0.2em;
  font-weight:600;
  transition:color var(--ss-dur-1) var(--ss-ease);
}
.ssx-footer-social-link svg{
  transition:transform var(--ss-dur-2) var(--ss-ease), color var(--ss-dur-1) var(--ss-ease);
}
.ssx-footer-social-link:hover{ color:var(--ss-beige); }
.ssx-footer-social-link:hover svg{ color:var(--ss-orange); transform:translateY(-2px); }

/* ---- Link columns ---- */
.ssx-footer-cols{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--ss-sp-7) var(--ss-sp-5);
}
@media (min-width:560px){
  .ssx-footer-cols{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width:1080px){
  .ssx-footer-cols{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
.ssx-footer-col--news{ grid-column:1 / -1; }
@media (min-width:1080px){
  .ssx-footer-col--news{ grid-column:auto; }
}

.ssx-footer-col-title{
  font-family:var(--ss-body);
  font-size:var(--ss-fs-label);
  text-transform:uppercase;
  letter-spacing:0.28em;
  font-weight:700;
  color:var(--ss-beige);
  margin:0 0 var(--ss-sp-5);
}
.ssx-footer-links{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:var(--ss-sp-3);
}
.ssx-footer-links a{
  font-size:var(--ss-fs-small);
  color:var(--ss-text-muted);
  letter-spacing:0.02em;
  background:linear-gradient(var(--ss-orange),var(--ss-orange)) no-repeat left bottom / 0% 1px;
  padding-bottom:2px;
  transition:color var(--ss-dur-1) var(--ss-ease), background-size var(--ss-dur-2) var(--ss-ease);
}
.ssx-footer-links a:hover{
  color:var(--ss-beige);
  background-size:100% 1px;
}

/* ---- Newsletter ---- */
.ssx-footer-news-copy{ margin:0 0 var(--ss-sp-4); }
.ssx-footer-news{
  display:flex;
  gap:var(--ss-sp-3);
  align-items:stretch;
  max-width:340px;
}
.ssx-footer-news-input{
  flex:1;
  min-width:0;
  background:transparent;
  border:1px solid var(--ss-hairline);
  border-radius:var(--ss-r-pill);
  padding:0.65rem 1.05rem;
  font-size:var(--ss-fs-small);
  color:var(--ss-beige);
  transition:border-color var(--ss-dur-2) var(--ss-ease);
}
.ssx-footer-news-input::placeholder{ color:var(--ss-text-faint); }
.ssx-footer-news-input:focus-visible{ border-color:var(--ss-hairline-accent); }
.ssx-footer-news-btn{ flex:0 0 auto; }

/* ---- Bottom row ---- */
.ssx-footer-bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--ss-sp-4) var(--ss-sp-6);
  padding-top:var(--ss-sp-2);
}
.ssx-footer-copy{
  margin:0;
  margin-right:auto;
  font-size:var(--ss-fs-small);
  color:var(--ss-text-faint);
  letter-spacing:0.04em;
}

/* Region selector (visual only) */
.ssx-footer-region{
  display:inline-flex;
  align-items:center;
  gap:var(--ss-sp-2);
  border:1px solid var(--ss-hairline);
  border-radius:var(--ss-r-pill);
  padding:0.4rem 0.5rem 0.4rem 0.85rem;
  color:var(--ss-text-muted);
  transition:border-color var(--ss-dur-2) var(--ss-ease);
}
.ssx-footer-region:hover{ border-color:var(--ss-hairline-accent); }
.ssx-footer-region-glyph{ display:inline-flex; color:var(--ss-copper); }
.ssx-footer-region-select{
  appearance:none;
  -webkit-appearance:none;
  max-width:100%;
  background:transparent;
  border:none;
  color:var(--ss-beige);
  font-family:var(--ss-body);
  font-size:var(--ss-fs-small);
  letter-spacing:0.06em;
  padding-right:1.1rem;
  cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ss-text-muted) 50%),
                   linear-gradient(135deg,var(--ss-text-muted) 50%,transparent 50%);
  background-position:right 4px center, right 0 center;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}
.ssx-footer-region-select option{
  background:var(--ss-brown-1);
  color:var(--ss-beige);
}

/* Payment glyphs */
.ssx-footer-pay{
  display:inline-flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--ss-sp-2);
}
.ssx-footer-pay-glyph{
  font-size:0.62rem;
  font-weight:700;
  letter-spacing:0.12em;
  color:var(--ss-text-faint);
  border:1px solid var(--ss-hairline);
  border-radius:var(--ss-r-sm);
  padding:0.3rem 0.5rem;
  line-height:1;
}

/* Legal */
.ssx-footer-legal{
  list-style:none;
  margin:0;
  padding:0;
  display:inline-flex;
  flex-wrap:wrap;
  gap:var(--ss-sp-5);
}
.ssx-footer-legal a{
  font-size:var(--ss-fs-small);
  color:var(--ss-text-muted);
  letter-spacing:0.04em;
  transition:color var(--ss-dur-1) var(--ss-ease);
}
.ssx-footer-legal a:hover{ color:var(--ss-orange); }

/* Visually-hidden labels */
.ssx-footer-visually-hidden{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

@media (prefers-reduced-motion: reduce){
  .ssx-footer-social-link:hover svg{ transform:none; }
}