/* SFR Warehouse Hub — shared stylesheet.
   Consolidates the per-page :root + components from the PM Call Scripts template.
   NOTE: this file lives in assets/, so font URLs are relative to assets/ → ../fonts/. */

@font-face { font-family: 'VV Ruby Sans'; src: url('../fonts/VVTheRubySans-MedReg.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'VV Ruby Sans'; src: url('../fonts/VVTheRubySans-MedSemiBold.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'VV Ruby Sans'; src: url('../fonts/VVTheRubySans-MedBold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('../fonts/Figtree-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('../fonts/Figtree-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('../fonts/Figtree-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }

:root{
  --navy:#1E2A3B;--honey:#EAB33F;--pale:#F1ECBE;--bg:#fff;--bg-secondary:#f7f5ef;
  --text:#1E2A3B;--text-secondary:#5a6472;--text-tertiary:#9aa1ab;
  --border:rgba(30,42,59,0.12);--border-secondary:rgba(30,42,59,0.20);
  --radius-md:8px;--radius-lg:12px;
  --font-title:'VV Ruby Sans',-apple-system,sans-serif;--font-body:'Figtree',-apple-system,'Segoe UI',sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#16202e;--bg-secondary:#1E2A3B;--text:#f2f0e8;--text-secondary:#a9b2bf;--text-tertiary:#6e7886;
  --border:rgba(241,236,190,0.12);--border-secondary:rgba(241,236,190,0.22);}}
:root[data-theme="dark"]{
  --bg:#16202e;--bg-secondary:#1E2A3B;--text:#f2f0e8;--text-secondary:#a9b2bf;--text-tertiary:#6e7886;
  --border:rgba(241,236,190,0.12);--border-secondary:rgba(241,236,190,0.22);}
:root[data-theme="light"]{
  --bg:#fff;--bg-secondary:#f7f5ef;--text:#1E2A3B;--text-secondary:#5a6472;--text-tertiary:#9aa1ab;
  --border:rgba(30,42,59,0.12);--border-secondary:rgba(30,42,59,0.20);}

*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);line-height:1.5;padding:0 16px 64px;max-width:860px;margin:0 auto;-webkit-font-smoothing:antialiased;}

/* Shared header (injected by assets/nav.js) */
.topbar{height:4px;background:var(--honey);margin:0 -16px;}
header.site-header{padding:26px 0 4px;}
.brand{display:flex;align-items:center;gap:10px;}
.brand-mark{width:46px;height:46px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;border:1px solid var(--border);padding:7px;}
.brand-mark img{width:100%;height:100%;object-fit:contain;display:block;}
.wordmark{font-family:var(--font-title);font-size:22px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--text);}

/* Manual theme toggle button (injected by assets/nav.js) */
.theme-toggle{background:var(--bg-secondary);border:1px solid var(--border);border-radius:999px;padding:6px 12px;font-size:13px;cursor:pointer;color:var(--text);line-height:1;font-family:var(--font-body);}
.theme-toggle:hover{border-color:var(--honey);}

/* Top nav with active honey underline */
nav.nav{display:flex;gap:4px;margin:18px 0 24px;border-bottom:1px solid var(--border);flex-wrap:wrap;}
.navlink{padding:9px 16px;font-size:13px;font-weight:600;color:var(--text-secondary);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;}
.navlink:hover{color:var(--text);}
.navlink.active{color:var(--text);border-bottom-color:var(--honey);}

/* Page body */
.wrap{margin:0 auto;}
h1{font-family:var(--font-title);font-size:26px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;margin-bottom:6px;}
h2{font-family:var(--font-title);font-size:18px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;margin:24px 0 10px;}
p{font-size:15px;color:var(--text-secondary);line-height:1.6;}
.placeholder{font-size:14px;color:var(--text-tertiary);margin-top:8px;font-style:italic;}

/* Reusable section label */
.sectlabel{font-family:var(--font-title);font-size:12px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.1em;padding:6px 2px;border-bottom:1px solid var(--honey);margin:8px 0 14px;}

/* Reusable card */
.card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 18px;transition:border-color .15s,background .15s;}
.card:hover{border-color:var(--honey);background:var(--bg-secondary);}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;}
.card-title{font-size:15px;font-weight:600;color:var(--text);}
.card-desc{font-size:12.5px;color:var(--text-secondary);margin-top:3px;}

@media (max-width:520px){
  body{padding:0 14px 56px;}
  .wordmark{font-size:19px;}
  h1{font-size:22px;}
}