/* Wildlyfolk — Consent UI
   Include on all pages, after brand CSS vars are defined (or this block's
   own fallback vars below will be used). */

:root{
  --wf-brown:#362213;
  --wf-blue:#4D7BBE;
  --wf-white:#F2ECE1;
  --wf-moss:#67662D;
  --wf-grey:#B0A997;
  --wf-peach:#EAAF89;
}

#wf-eu-banner{
  position:fixed; left:0; right:0; bottom:0;
  background:var(--wf-white);
  border-top:1px solid rgba(54,34,19,.2);
  padding:18px clamp(20px,4vw,44px);
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  transform:translateY(100%);
  transition:transform .4s cubic-bezier(.4,0,.2,1);
  z-index:9999;
  font-family:'Cousine','Andale Mono','Courier New',monospace;
}
#wf-eu-banner.wf-show{ transform:translateY(0); }
.wf-eu-copy{
  flex:1 1 340px; font-size:13px; line-height:1.55; color:var(--wf-brown);
}
.wf-eu-actions{ display:flex; gap:10px; flex-shrink:0; flex-wrap:wrap; }

.wf-btn{
  font-family:'Cousine','Andale Mono','Courier New',monospace;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  padding:12px 18px; cursor:pointer; border:1px solid var(--wf-brown);
  background:transparent; color:var(--wf-brown); transition:.25s; white-space:nowrap;
}
.wf-btn.wf-primary{ background:var(--wf-blue); border-color:var(--wf-blue); color:var(--wf-white); }
.wf-btn.wf-primary:hover{ background:var(--wf-brown); border-color:var(--wf-brown); }
.wf-btn:not(.wf-primary):hover{ background:rgba(54,34,19,.08); }

.wf-panel-overlay{
  position:fixed; inset:0; background:rgba(54,34,19,.45);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .3s; z-index:10000;
}
.wf-panel-overlay.wf-show{ opacity:1; pointer-events:auto; }
.wf-panel{
  background:var(--wf-white); width:min(90%,380px); padding:28px 26px;
  border:1px solid rgba(54,34,19,.2); position:relative;
  font-family:'Cousine','Andale Mono','Courier New',monospace;
}
.wf-panel h3{
  font-family:'hardcover-vf',Georgia,serif; font-size:18px; margin:0 0 10px; color:var(--wf-brown);
}
.wf-panel p{ font-size:12.5px; line-height:1.6; color:var(--wf-brown); margin:0 0 20px; }

.wf-toggle-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 0; border-top:1px solid rgba(54,34,19,.12);
}
.wf-toggle-row:last-of-type{ border-bottom:1px solid rgba(54,34,19,.12); margin-bottom:20px; }
.wf-toggle-label{ font-size:12px; letter-spacing:.06em; color:var(--wf-brown); }
.wf-toggle-label small{ display:block; font-size:10px; color:var(--wf-moss); margin-top:2px; }

.wf-switch{
  width:40px; height:22px; border-radius:12px; background:var(--wf-grey);
  position:relative; cursor:pointer; flex-shrink:0; transition:.25s; border:none;
}
.wf-switch.wf-on{ background:var(--wf-blue); }
.wf-switch.wf-disabled{ background:var(--wf-moss); opacity:.5; cursor:not-allowed; }
.wf-switch::after{
  content:""; position:absolute; top:3px; left:3px; width:16px; height:16px;
  border-radius:50%; background:var(--wf-white); transition:.25s;
}
.wf-switch.wf-on::after{ left:21px; }

.wf-panel-actions{ display:flex; gap:10px; }
.wf-panel-actions .wf-btn{ flex:1; text-align:center; }
.wf-panel-close{
  position:absolute; top:14px; right:16px; background:none; border:none;
  font-size:16px; color:var(--wf-brown); cursor:pointer; opacity:.5;
}
.wf-panel-close:hover{ opacity:1; }

/* US — quiet corner link, not a footer redesign. Move into your real
   footer markup later if preferred; this is a safe drop-in default. */
#wf-us-link{
  position:fixed; left:16px; bottom:12px; z-index:9998;
  font-family:'Cousine','Andale Mono','Courier New',monospace;
  font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--wf-grey); text-decoration:underline; cursor:pointer;
  background:var(--wf-white); padding:4px 8px; opacity:.85;
}
#wf-us-link:hover{ color:var(--wf-blue); opacity:1; }

@media(max-width:768px){
  #wf-eu-banner{ padding:14px 20px; }
  .wf-eu-actions{ width:100%; justify-content:stretch; }
  .wf-eu-actions .wf-btn{ flex:1; text-align:center; }
}