/* ============================================================
   Feedwrk - cookie consent banner (JUR-240)
   ------------------------------------------------------------
   Styles for the banner consent.js injects, plus the footer
   "Cookie settings" control. Token-driven only - every colour,
   spacing step, radius and font resolves against tokens.css /
   landing-tokens.css. Loaded by index, auditor (public + /dev)
   and /cookies, after the design-system chain.
   ============================================================ */

/* ---- banner shell: fixed + non-modal, so it never shifts layout or traps focus.
   The wrapper is click-transparent; only the card takes pointer events. ---- */
.fw-consent{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-toast);
  padding:0 var(--s-4) calc(var(--s-4) + env(safe-area-inset-bottom,0px));
  pointer-events:none}
.fw-consent[hidden]{display:none}

.fw-consent__card{pointer-events:auto;box-sizing:border-box;margin:0 auto;max-width:720px;
  display:flex;align-items:center;gap:var(--s-5);
  background:var(--surface);border:1px solid var(--rule-strong);border-radius:var(--r-3);
  box-shadow:var(--shadow-pop);padding:var(--s-4) var(--s-5)}
@media (prefers-reduced-motion: no-preference){
  .fw-consent__card{animation:fw-consent-rise var(--l-dur-micro,300ms) var(--l-ease-micro,ease) both}
}
@keyframes fw-consent-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* banner text is prose: Inter, body ink; the policy link is keyboard-visible
   with the same focus treatment the pages use (index.html A4 gate rules) */
.fw-consent__txt{margin:0;flex:1;min-width:0;font-family:var(--font-sans);font-size:14px;
  line-height:1.55;color:var(--ink-2)}
.fw-consent__txt a{color:var(--voltage);text-decoration:underline;text-underline-offset:2px}
.fw-consent__txt a:hover{color:var(--voltage-hover)}
.fw-consent__txt a:focus-visible{outline:2px solid var(--voltage);outline-offset:3px;border-radius:var(--r-1)}

/* actions: Accept is the banner's ONE primary (voltage); Reject is secondary.
   Both stay at least 44px tall - touch first. fw-btn brings its own
   :focus-visible ring (feedwrk-ui.css). */
.fw-consent__actions{display:flex;gap:var(--s-3);flex:none}
.fw-consent__actions .fw-btn{min-height:44px;white-space:nowrap}

/* narrow widths: text above, buttons stacked full-width (Accept first) */
@media(max-width:560px){
  .fw-consent{padding-inline:var(--s-3)}
  .fw-consent__card{flex-direction:column;align-items:stretch;gap:var(--s-4)}
  .fw-consent__actions{flex-direction:column;width:100%}
  .fw-consent__actions .fw-btn{width:100%}
}

/* ---- footer "Cookie settings": a button posing as its sibling footer links.
   A control recast as a <button> carries its own reset in the component CSS
   (L-078); type mirrors .fw-l-footer2 .legal a (landing-real.css). No vertical
   padding: the .lx flex row stretches it to whatever height the page's own
   anchor rules produce, and the UA centres button text, so it stays aligned
   with the links on every page (index pads links 9px, auditor 6px, legal 0). ---- */
.fw-l-footer2 .legal button[data-fw-cookie-settings]{
  appearance:none;-webkit-appearance:none;border:0;background:transparent;margin:0;padding:0;
  cursor:pointer;font-family:var(--font-sans);font-size:12px;color:var(--ink-3);text-align:left;
  position:relative}
.fw-l-footer2 .legal button[data-fw-cookie-settings]:hover{color:var(--voltage)}
.fw-l-footer2 .legal button[data-fw-cookie-settings]:focus-visible{
  outline:2px solid var(--voltage);outline-offset:3px;border-radius:var(--r-1)}
@media (max-width:768px),(hover:none){
  /* invisible 44px hit area on touch - grows the target without moving the text */
  .fw-l-footer2 .legal button[data-fw-cookie-settings]::after{
    content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
  /* the inline policy-page control (a small secondary fw-btn) meets 44px too */
  main.legal .fw-btn[data-fw-cookie-settings]{min-height:44px}
}