/* OIAS — site-essentials baseline (shared across public pages)
   Additive only: reuses each page's own CSS vars (--bg, --ink, --brown, --border, --mono, --sans).
   No dark-mode toggle. See ~/.claude/skills/site-essentials/SKILL.md */

/* 11 Skip to content */
.skip-link{position:absolute;left:8px;top:-100px;z-index:1000;padding:10px 16px;
  background:var(--brown,#E0814A);color:var(--ink-inv,#161009);border-radius:8px;
  font-family:var(--sans,system-ui,sans-serif);font-weight:600;font-size:14px;transition:top .15s}
.skip-link:focus{top:8px}

/* 6 Focus-visible fallback (pages/stylesheets that don't already define it) */
:focus-visible{outline:2px solid var(--brown,#E0814A);outline-offset:3px;border-radius:4px}

/* 3 Back to top + 19 floating WhatsApp contact — stacked, never overlap */
.fab-stack{position:fixed;right:16px;bottom:16px;z-index:55;display:flex;flex-direction:column;
  gap:10px;align-items:flex-end}
.fab-stack .fab{display:flex;align-items:center;justify-content:center;width:48px;height:48px;
  border-radius:50%;background:var(--bg-card,#211910);border:1px solid var(--border-strong,rgba(244,237,225,.2));
  color:var(--ink,#F4EDE1);box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .2s,background-color .2s}
.fab-stack .fab:hover{background:var(--brown,#E0814A);color:var(--ink-inv,#161009)}
.fab-stack .fab svg{width:22px;height:22px}
.back-to-top[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){.fab-stack .fab{transition:transform .2s,background-color .2s}}

/* 7 Scroll progress (blog / long-read pages only — element opted in per page) */
.scroll-progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:60;
  background:var(--brown,#E0814A);transform-origin:0 50%;transform:scaleX(0)}
@media (prefers-reduced-motion:reduce){.scroll-progress{display:none}}

/* 15 Form field errors */
.field-error{color:#ff8a7a;font-size:13px;margin-top:6px;font-family:var(--sans,system-ui,sans-serif)}
[aria-invalid="true"]{border-color:#ff8a7a!important}

/* 18 FAQ marker (only used where page doesn't already style its own) */
.faq-essentials summary{cursor:pointer}

/* 9 Print stylesheet — hide floating / nav chrome, readable on paper */
@media print{
  .skip-link,.fab-stack,.scroll-progress,.nav,.nav__burger,.cookie-banner{display:none!important}
  body{background:#fff!important;color:#000!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em}
  main,.container{max-width:100%!important}
  .card,figure,table,pre,details{break-inside:avoid}
}

/* Pages with the rotating "Talk to OIAS" badge: lift the WhatsApp/back-to-top stack above it so it is never covered */
body:has(a.badge) .fab-stack{bottom:156px}
@media (max-width:600px){body:has(a.badge) .fab-stack{bottom:120px}}