/* =============================================================
   BCC Supplies — Shared Site Stylesheet
   Extracted from inline <style> blocks (Phase 2 optimization)
   ============================================================= */

/* ── 1. CSS Custom Properties ─────────────────────────────── */
:root{
  --ink:#14213D;
  --ink-2:#0D172E;
  --paper:#F4EFE3;
  --paper-2:#EAE3D2;
  --brass:#B9812F;
  --brass-light:#D9A24C;
  --green:#2F6844;
  --green-light:#7bd39a;
  --charcoal:#22201B;
  --line:rgba(20,33,61,0.16);

  /* Type scale — rem so text respects the visitor's browser/OS zoom
     and font-size settings, unlike the raw px this replaces. Named
     by their current px-equivalent so the mapping stays obvious. */
  --text-105:0.65625rem;  /* 10.5px */
  --text-115:0.71875rem;  /* 11.5px */
  --text-12:0.75rem;      /* 12px   */
  --text-125:0.78125rem;  /* 12.5px */
  --text-13:0.8125rem;    /* 13px   */
  --text-135:0.84375rem;  /* 13.5px */
  --text-14:0.875rem;     /* 14px   */
  --text-15:0.9375rem;    /* 15px   */
  --text-16:1rem;         /* 16px   */
  --text-17:1.0625rem;    /* 17px   */
  --text-18:1.125rem;     /* 18px   */
  --text-20:1.25rem;      /* 20px   */
  --text-h2:clamp(1.625rem,3.2vw,2.25rem); /* 26px–36px */

  /* Spacing scale — same value-preserving rem conversion, applied to
     layout rhythm (section gaps, container padding, footer spacing). */
  --space-2:0.125rem;   /* 2px  */
  --space-3:0.1875rem;  /* 3px  */
  --space-5:0.3125rem;  /* 5px  */
  --space-6:0.375rem;   /* 6px  */
  --space-7:0.4375rem;  /* 7px  */
  --space-8:0.5rem;     /* 8px  */
  --space-9:0.5625rem;  /* 9px  */
  --space-10:0.625rem;  /* 10px */
  --space-12:0.75rem;   /* 12px */
  --space-14:0.875rem;  /* 14px */
  --space-16:1rem;      /* 16px */
  --space-20:1.25rem;   /* 20px */
  --space-22:1.375rem;  /* 22px */
  --space-24:1.5rem;    /* 24px */
  --space-26:1.625rem;  /* 26px */
  --space-28:1.75rem;   /* 28px */
  --space-32:2rem;      /* 32px */
  --space-36:2.25rem;   /* 36px */
  --space-40:2.5rem;    /* 40px */
  --space-48:3rem;      /* 48px */
  --space-52:3.25rem;   /* 52px */
}

/* ── 2. Reset & Base ──────────────────────────────────────── */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
}
html{scroll-behavior:auto;overflow-x:clip;overflow-y:auto;max-width:100%;}
body{
  overflow-x:clip;overflow-y:visible;max-width:100%;position:relative;
  margin:0;background:var(--paper);color:var(--charcoal);
  font-family:'IBM Plex Sans',sans-serif;-webkit-font-smoothing:antialiased;
  line-height:1.6;overflow-wrap:break-word;word-break:break-word;
}
img,video{max-width:100%;height:auto;}
a{color:var(--brass);}
button{font-family:inherit;}
h1,h2,h3{font-family:'Fraunces',serif;font-weight:600;letter-spacing:-.01em;margin:0;}
.mono{font-family:'Space Mono',monospace;}

/* ── 3. Focus & Touch ─────────────────────────────────────── */
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--brass-light);outline-offset:2px;
}
a,button,.btn-primary,.btn-secondary,.nav-cta,[role="button"]{touch-action:manipulation;}
nav,button,.btn-primary,.btn-secondary,.nav-links,.bottom-tabs{
  -webkit-user-select:none;user-select:none;
}

/* ── 4. Skip Link ─────────────────────────────────────────── */
.skip-link{
  position:absolute;top:0;left:0;z-index:200;
  background:var(--brass-light);color:var(--ink-2);padding:var(--space-12) var(--space-20);
  font-weight:700;font-size:var(--text-14);text-decoration:none;border-radius:0 0 8px 0;
  clip-path:inset(50%);overflow:hidden;white-space:nowrap;width:1px;height:1px;
}
.skip-link:focus{clip-path:none;overflow:visible;white-space:normal;width:auto;height:auto;}

/* ── 5. Layout Wrappers ───────────────────────────────────── */
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--space-32);}
.wrap-narrow{max-width:800px;margin:0 auto;padding:0 var(--space-32);}
@media(max-width:640px){.wrap,.wrap-narrow{padding:0 var(--space-20);}}
@media(max-width:400px){.wrap{padding:0 var(--space-14);}}

/* ── 6. Navigation (see section 16 for nav-row/brand/nav-links/nav-cta/etc. — verified against real nav.njk output) ── */
header.nav{position:static;top:0;z-index:50;background:var(--ink);border-bottom:1px solid rgba(217,162,76,.25);}
@media(min-width:901px){header.nav{position:sticky;}}
.logo-img{height:48px;width:auto;display:block;}
.logo-img-mini{height:22px;width:auto;display:block;}
.logo-img-footer{height:42px;width:auto;display:block;margin-bottom:12px;}
.logo-img-final{height:48px;width:auto;margin:0 auto var(--space-22);display:block;}
.nav-actions{display:flex;align-items:center;gap:var(--space-14);flex-shrink:0;}

/* ── 7. Nav Icons ─────────────────────────────────────────── */
.nav-icon{width:17px;height:17px;display:inline-block;vertical-align:-4px;margin-right:6px;object-fit:contain;}
.icon-gif{display:inline-block;vertical-align:middle;object-fit:contain;}
@media(min-width:901px){
  .icon-gif{width:34px!important;height:34px!important;}
  footer .nav-icon{width:22px;height:22px;vertical-align:-6px;margin-right:7px;}
}
/* header .nav-links keeps a compact icon size at every width (see section 16) — a row of
   6-7 labels has to stay tight even at desktop widths, and longer translations (e.g. Spanish)
   need every spare pixel. */
.mobile-nav-panel a .nav-icon{vertical-align:-2px;}

/* ── 8. Bottom Tab Bar (mobile) ───────────────────────────── */
.bottom-tabs{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:90;
  background:rgba(15,15,20,.7);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);
  border-top:1px solid rgba(217,162,76,.25);
  padding:var(--space-6) var(--space-3) calc(var(--space-6) + env(safe-area-inset-bottom));
}
@media(max-width:768px){.bottom-tabs{display:flex;}body{padding-bottom:76px;}}
.bottom-tab{
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:var(--space-3);text-decoration:none;color:rgba(244,239,227,.6);
  font-size:var(--text-105);font-family:'IBM Plex Sans',sans-serif;padding:var(--space-8) var(--space-2);
  min-height:48px;transition:transform .12s ease;
}
.bottom-tab:active{transform:scale(.93);}
.bottom-tab .tab-icon{font-size:var(--text-18);line-height:1;}
.tab-icon-gif{width:23px;height:23px;display:block;object-fit:contain;}
.bottom-tab .tab-icon .icon-gif{width:23px;height:23px;}
.bottom-tab.active,.bottom-tab.cta-tab{color:var(--brass-light);}
.bottom-tab.cta-tab .tab-icon-wrap{background:var(--ink);border-radius:10px;padding:var(--space-3) var(--space-10) 4px;margin-top:-2px;}

/* ── 9. Buttons ───────────────────────────────────────────── */
.btn-primary{
  background:var(--brass-light);color:var(--ink-2);padding:var(--space-16) var(--space-26);font-size:var(--text-15);
  font-weight:600;border:none;cursor:pointer;text-decoration:none;display:inline-block;
  transition:transform .15s ease,background .15s ease;
}
.btn-primary:hover{background:#e8b563;transform:translateY(-1px);}
.btn-secondary{
  background:transparent;color:var(--paper);padding:var(--space-16) var(--space-22);font-size:var(--text-15);
  font-weight:500;border:1px solid rgba(244,239,227,.35);cursor:pointer;
  text-decoration:none;display:inline-block;
}
.btn-secondary:hover{border-color:var(--paper);}
.btn-primary:active,.btn-secondary:active,button:active{transform:scale(.96);}

/* ── 10. Reveal Animation ─────────────────────────────────── */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

/* ── 11. Footer ───────────────────────────────────────────── */
footer{background:var(--ink-2);color:rgba(244,239,227,.55);padding:var(--space-48) 0 var(--space-36);font-size:var(--text-125);line-height:1.7;}
.foot-top{
  display:flex;justify-content:space-between;gap:var(--space-40);flex-wrap:wrap;
  padding-bottom:var(--space-28);border-bottom:1px solid rgba(244,239,227,.12);margin-bottom:var(--space-24);
}
.foot-brand{font-family:'Fraunces',serif;color:var(--paper);font-size:var(--text-17);font-weight:600;max-width:300px;}
.foot-links{display:flex;gap:var(--space-48);flex-wrap:wrap;}
.foot-col a{display:block;text-decoration:none;color:rgba(244,239,227,.55);margin-bottom:var(--space-9);font-size:var(--text-13);}
.foot-col a:hover{color:var(--paper);}
.foot-col h5{
  color:rgba(244,239,227,.85);font-size:var(--text-12);letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:var(--space-12);font-family:'Space Mono',monospace;font-weight:400;
}
.fine-print{max-width:920px;}
.fine-print p{margin:0 0 var(--space-10);}

/* ── 12. Back-to-top button ───────────────────────────────── */
.back-to-top{
  position:fixed;bottom:var(--space-26);right:var(--space-26);width:46px;height:46px;border-radius:50%;
  background:var(--ink);border:1.5px solid var(--brass-light);color:var(--brass-light);
  font-size:var(--text-18);display:flex;align-items:center;justify-content:center;cursor:pointer;
  opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;
  z-index:60;box-shadow:0 10px 24px rgba(0,0,0,.25);text-decoration:none;
}
.back-to-top.show{opacity:1;pointer-events:auto;}
.back-to-top:hover{transform:translateY(-3px);}
@media(max-width:768px){.back-to-top{bottom:84px;}}

/* ── 13. Recently Viewed ──────────────────────────────────── */
.recently-viewed-section{background:var(--paper-2);padding:var(--space-22) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.recently-viewed-label{font-family:'Space Mono',monospace;font-size:var(--text-115);letter-spacing:.08em;text-transform:uppercase;color:rgba(34,32,27,.55);margin-bottom:var(--space-12);}
.recently-viewed-row{display:flex;gap:var(--space-10);overflow-x:auto;padding-bottom:var(--space-2);}
.recently-viewed-chip{
  flex-shrink:0;background:var(--paper);border:1px solid var(--line);border-radius:20px;
  padding:var(--space-9) var(--space-16);font-size:var(--text-13);color:var(--ink);text-decoration:none;white-space:nowrap;
  transition:border-color .15s ease,background .15s ease;
}
.recently-viewed-chip:hover{border-color:var(--brass);background:rgba(217,162,76,.08);}

/* ── 14. Read Progress Bar ────────────────────────────────── */
.read-progress{position:fixed;top:0;left:0;height:3px;background:var(--brass-light);z-index:100;width:0%;}

/* ── 15. Eyebrow / Section Tags ──────────────────────────── */
.eyebrow{
  font-family:'Space Mono',monospace;font-size:var(--text-12);letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass-light);display:flex;align-items:center;gap:var(--space-10);margin-bottom:var(--space-22);
}
.eyebrow::before{content:'';width:var(--space-26);height:1px;background:var(--brass-light);}
.section-tag{font-family:'Space Mono',monospace;font-size:var(--text-12);letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin-bottom:var(--space-14);}
.section-head{max-width:660px;margin-bottom:var(--space-52);}
.section-head h2{font-size:var(--text-h2);line-height:1.15;}
.section-head p{margin-top:var(--space-16);font-size:var(--text-16);line-height:1.65;color:rgba(34,32,27,.72);}

/* ── 16. Shared page chrome (extracted from per-page duplicates — see brand-guideline.html) ── */
a, button, .btn-primary, .btn-secondary, .nav-cta, [role="button"]{ touch-action:manipulation; }
html{scroll-behavior:auto;}
html{ overflow-x:clip; overflow-y:auto; max-width:100%; }
body{ overflow-x:clip; overflow-y:visible; max-width:100%; position:relative; }
img{ max-width:100%; height:auto; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--brass-light); outline-offset:2px; }
body{margin:0;background:var(--paper);color:var(--charcoal);font-family:'IBM Plex Sans', sans-serif;-webkit-font-smoothing:antialiased;line-height:1.6;overflow-wrap:break-word;word-break:break-word;}
h1,h2,h3{font-family:'Fraunces', serif;font-weight:600;letter-spacing:-0.01em;margin:0;}
a{color:var(--brass);}
@media (prefers-reduced-motion: reduce){ *{animation-duration:0.001ms !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;} }
header.nav{position:static; top:0; z-index:50; background:var(--ink); border-bottom:1px solid rgba(217,162,76,0.25);}
@media (min-width:901px){ header.nav{ position:sticky; } }
.nav-row{display:flex; align-items:center; justify-content:space-between; padding:var(--space-14) var(--space-24); max-width:1180px; margin:0 auto; gap:var(--space-12);}
.brand{display:flex; align-items:center; gap:var(--space-10); flex-shrink:0;}
.logo-img{ height:40px; width:auto; display:block; }
.nav-links{display:flex; align-items:center; gap:var(--space-6); font-size:var(--text-20); flex-shrink:0;}
.nav-links a{color:rgba(244,239,227,0.75); text-decoration:none; white-space:nowrap; display:inline-flex; align-items:center;}
.nav-links a:hover{color:var(--paper);}
.nav-links a[aria-current="page"]{color:var(--brass-light); font-weight:600;}
.nav-links .nav-icon{ width:18px; height:18px; margin-right:3px; vertical-align:-3.5px; }
.lang-switch{
    border:1px solid rgba(244,239,227,0.3); border-radius:999px; padding:var(--space-2) var(--space-7) !important;
    font-size:var(--text-105) !important; font-weight:700; letter-spacing:0.03em; align-self:center;
  }
.lang-switch:hover{ border-color:rgba(244,239,227,0.6); color:var(--paper) !important; }
.nav-cta{
    background:var(--brass-light); color:var(--ink-2); padding:var(--space-8) var(--space-16); font-size:var(--text-125); font-weight:700;
    border:1.5px solid var(--brass-light); cursor:pointer; text-decoration:none; border-radius:999px; white-space:nowrap;
    display:inline-flex; align-items:center; flex-shrink:0; transition:background .18s ease, border-color .18s ease, transform .18s ease;
  }
.nav-cta:hover{background:#e8b563; border-color:#e8b563; transform:translateY(-1.5px);}
.nav-cta:active{transform:translateY(0);}
.nav-signin{
    background:transparent; color:rgba(244,239,227,0.85); padding:var(--space-7) var(--space-14); font-size:var(--text-125); font-weight:600;
    border:1.5px solid rgba(244,239,227,0.3); cursor:pointer; text-decoration:none; border-radius:999px; white-space:nowrap;
    display:inline-flex; align-items:center; flex-shrink:0; transition:border-color .15s ease, color .15s ease, background .15s ease;
  }
.nav-signin:hover{ color:var(--paper); border-color:rgba(244,239,227,0.6); background:rgba(244,239,227,0.06); }
.nav-burger{
    display:none; width:44px; height:44px; border:1px solid rgba(217,162,76,0.35); background:none;
    cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:var(--space-5); flex-shrink:0;
  }
.nav-burger span{ display:block; width:18px; height:1.5px; background:var(--brass-light); transition:transform .2s ease, opacity .2s ease; }
.nav-burger.open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2){ opacity:0; }
.nav-burger.open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
.mobile-nav-panel{
    display:none; max-height:0; overflow:hidden; background:var(--ink);
    border-bottom:1px solid rgba(217,162,76,0.25); transition:max-height .3s ease;
  }
.mobile-nav-panel.open{ max-height:380px; overflow-y:auto; }
.mobile-nav-panel a{
    display:block; padding:var(--space-14) var(--space-32); color:rgba(244,239,227,0.8); text-decoration:none;
    font-size:var(--text-15); border-top:1px solid rgba(244,239,227,0.08);
  }
.mobile-nav-panel a:hover{ color:var(--paper); background:rgba(244,239,227,0.04); }
.mobile-signin{ font-weight:700; color:var(--brass-light) !important; border-top:1.5px solid rgba(217,162,76,0.25) !important; }
.breadcrumb{ padding:var(--space-16) 0 0; background:var(--paper); }
.breadcrumb ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--space-6); align-items:center; }
.breadcrumb li{ font-size:var(--text-125); color:rgba(34,32,27,0.68); display:flex; align-items:center; gap:var(--space-6); }
.breadcrumb li:not(:last-child)::after{ content:'/'; margin-left:var(--space-6); color:rgba(34,32,27,0.3); }
.breadcrumb a{ color:var(--brass); text-decoration:none; }
.breadcrumb a:hover{ text-decoration:underline; }
.breadcrumb li[aria-current="page"]{ color:rgba(34,32,27,0.75); }

@media (max-width:1200px){
    .nav-links{display:none;}
    .nav-cta{display:none;}
    .nav-signin{display:none;}
    .nav-burger{display:flex;}
    .mobile-nav-panel{display:block;}
  }