/*
Theme Name: Overwatch Safety Products
Theme URI: https://overwatch-safety.com/
Author: Global Partners, LLC
Description: Theme for overwatch-safety.com (main site) and store.overwatch-safety.com
  (WooCommerce shop) — one theme, deployed to both containers, so the brand is
  consistent whether WooCommerce is active or not. Ports the design tokens and
  layout from the prior static-HTML site (site/assets/css/site.css) unchanged.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: overwatch-safety
*/

/* =====================================================================
   Overwatch Safety Products — stylesheet
   Rev. A · 20 August 2026 (ported into WP theme 8 September 2026, unchanged)

   Deliberately LIGHT. Two reasons, both practical rather than aesthetic:

     1. The buyers are federal contracting staff reading on office
        monitors and older adults reading on whatever they have. Light,
        high-contrast, large type serves both.
     2. It has to print. Federal buyers print catalog pages and staple
        them to a purchase request.

   Base size is 17px, not 16px, on purpose.
   ===================================================================== */

:root{
  --bg:#ffffff; --bg-2:#f0f5fc; --panel:#ffffff; --line:#e2e6ee;
  --ink:#1a1f27; --ink-2:#41505f; --ink-3:#5c6b7d;

  /* Palette adopted from glblpartners.com so the portfolio reads as one
     company. Navy + red is also, conveniently, the right register for a
     veteran-owned brand without resorting to flag clip-art. */
  --navy:#002b66; --navy-deep:#001a40; --navy-mid:#0a3c86;
  --red:#d1232a; --red-dk:#a81a20; --tint:#e8eef8;

  /* --blue/--blue-dk are kept as ALIASES onto navy. Roughly forty rules
     already reference them (buttons, links, focus rings, the skip link).
     Repointing the alias recolours all of them at once and makes it
     impossible to miss one, which a find-and-replace would not. */
  --blue:#002b66; --blue-dk:#0a3c86;

  --ok:#1a7f4b; --warn:#8a5a00; --warn-bg:#fdf6e7;

  /* Was a flat 1140px, which is ~44% of a 1440p display — the "only half the
     screen" complaint. clamp() rather than a bare 80vw: the lower bound stops
     phones rendering an 80%-wide column with dead margins, because max-width
     never forces width, it only caps it. */
  --max:clamp(1140px,80vw,2040px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink);
  font:17px/1.62 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
a{color:var(--blue-dk)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.narrow{max-width:840px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.13em;text-transform:uppercase;font-size:11.5px;font-weight:600}
.skip{position:absolute;left:-9999px}
.skip:focus{left:24px;top:12px;z-index:99;background:var(--blue);color:#fff;padding:11px 17px;border-radius:4px}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:22px;height:76px}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{height:46px;width:auto}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:24px}
.nav-links a{text-decoration:none;color:var(--ink-2);font-size:15px;font-weight:550}
.nav-links a:hover{color:var(--ink)}
.nav-links a.btn-primary,.nav-links a.btn-primary:hover{color:#fff}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--line);
  color:var(--ink);border-radius:4px;padding:9px 13px;font-size:17px}

/* ---------- buttons ---------- */
.btn{display:inline-block;padding:13px 24px;border-radius:4px;text-decoration:none;
  font-weight:650;font-size:15px;border:1.5px solid transparent;cursor:pointer;font-family:inherit}
.btn-primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn-primary:hover{background:var(--blue-dk);border-color:var(--blue-dk)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:#fff}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue-dk)}
.btn-sm{padding:9px 15px;font-size:14px}

/* ---------- hero ---------- */
.hero{position:relative;padding:76px 0 64px;color:#fff;border-bottom:none;
  background:linear-gradient(157deg,var(--navy-deep) 0%,var(--navy) 52%,#0a3f8a 100%)}
.hero::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;
  background:linear-gradient(90deg,var(--red) 0%,var(--red) 62%,var(--red-dk) 100%)}
.hero h1{color:#fff}
.hero .lede{color:rgba(255,255,255,.84)}
.hero .eyebrow{color:#8fbaff}
.hero a{color:#bcd4ff}
.hero .btn-ghost{background:transparent;border-color:rgba(255,255,255,.42);color:#fff}
.hero .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.1);color:#fff}
.hero .btn-primary{background:var(--red);border-color:var(--red)}
.hero .btn-primary:hover{background:var(--red-dk);border-color:var(--red-dk)}

.hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(340px,.65fr);
  gap:56px;align-items:center}
.eyebrow{color:var(--blue-dk);margin-bottom:18px}
h1{font-size:clamp(33px,5vw,52px);line-height:1.09;letter-spacing:-.022em;font-weight:750;max-width:17ch}
.lede{color:var(--ink-2);font-size:clamp(17px,1.9vw,20px);max-width:60ch;margin-top:20px}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}

.creds{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px;padding-top:28px;
  border-top:1px solid rgba(255,255,255,.16)}
.cred{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  border-radius:7px;padding:12px 17px;backdrop-filter:blur(4px)}
.cred-icon{display:inline-flex;color:#bcd4ff;margin-bottom:8px}
.cred-icon svg{width:19px;height:19px}
.cred b{display:block;font-size:14px;font-weight:650;line-height:1.35;color:#fff}
.cred span:not(.cred-icon){font-size:12.5px;color:rgba(255,255,255,.68)}

/* ---------- sections ---------- */
section{padding:66px 0;border-bottom:1px solid var(--line)}
section[id],.cat-group[id]{scroll-margin-top:92px}
section:last-of-type{border-bottom:0}
.alt{background:var(--bg-2)}
.sec-head{max-width:62ch;margin-bottom:38px}
.sec-head-icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:9px;background:var(--tint);color:var(--blue-dk);margin-bottom:16px}
.sec-head-icon svg{width:23px;height:23px}
h2{font-size:clamp(24px,3.1vw,33px);line-height:1.2;letter-spacing:-.012em;font-weight:720}
h3{font-size:18px;font-weight:650;margin-bottom:9px}
.sec-head p{color:var(--ink-2);margin-top:13px}

.grid{display:grid;gap:20px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:24px;
  transition:border-color .15s,box-shadow .15s}
.card p{color:var(--ink-2);font-size:15.5px}
.card .who{color:var(--blue-dk);font-weight:650;font-size:13px;margin-bottom:8px}
.num{color:var(--blue-dk);font-weight:700;margin-bottom:11px}

.card:has(.tile-head){padding-top:22px}
.card:has(.tile-head):hover{border-color:#b9cdff;box-shadow:0 3px 14px rgba(0,43,102,.08)}
.tile-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.tile-icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:9px;background:var(--tint);color:var(--blue-dk);flex:none}
.tile-icon svg{width:24px;height:24px}
.tile-head .num{margin-bottom:0}

.card-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;
  height:36px;border-radius:8px;background:var(--tint);color:var(--blue-dk);margin-bottom:13px}
.card-icon svg{width:19px;height:19px}

/* ---------- callouts ---------- */
.note{border-left:4px solid var(--blue);background:var(--bg-2);padding:17px 21px;
  border-radius:0 5px 5px 0;margin:22px 0;font-size:15.5px;color:var(--ink-2)}
.note strong{color:var(--ink)}
.note.warn{border-left-color:#d9a441;background:var(--warn-bg);color:var(--warn)}
.note.warn strong{color:#6b4600}

/* ---------- prose ---------- */
.prose h2{margin:40px 0 14px;padding-top:26px;border-top:1px solid var(--line)}
.prose h2:first-child{border-top:0;padding-top:0;margin-top:0}
.prose h3{margin:26px 0 8px}
.prose p,.prose li{color:var(--ink-2);font-size:16px;margin-bottom:13px}
.prose ul,.prose ol{margin:0 0 16px 24px}
.prose li{margin-bottom:8px}
.prose strong{color:var(--ink);font-weight:650}
.prose table{width:100%;border-collapse:collapse;margin:18px 0;font-size:15px}
.prose th,.prose td{border:1px solid var(--line);padding:11px 13px;text-align:center}
.prose th{background:var(--bg-2);font-weight:650;font-size:13.5px}
.prose td{color:var(--ink-2)}
.prose th:first-child,.prose td:first-child{text-align:left}
.updated{color:var(--ink-3);font-size:14px;margin-top:8px}

/* ---------- catalog ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:26px;
  padding-bottom:22px;border-bottom:1px solid var(--line)}
.chip{border:1.5px solid var(--line);background:#fff;color:var(--ink-2);border-radius:100px;
  padding:8px 16px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}
.chip[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.chip:hover{border-color:var(--blue)}
.filter-label{font-size:13px;color:var(--ink-3);font-weight:650;margin-right:2px}

.cat-group{margin-bottom:44px}
.cat-group-head{display:flex;align-items:center;gap:13px;margin-bottom:4px}
.cat-group-head h3{font-size:21px;margin-bottom:0}
.cat-group-icon.item-icon{flex:none;width:42px;height:42px;border:1px solid var(--line);
  border-radius:9px}
.cat-group-icon.item-icon svg{width:23px;height:23px}
.cat-group > p{color:var(--ink-3);font-size:15px;margin-bottom:18px;margin-left:55px}

.item{border:1px solid var(--line);border-radius:9px;padding:0;background:#fff;
  display:grid;grid-template-columns:64px 1fr auto;gap:0;align-items:stretch;
  margin-bottom:14px;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.item:hover{border-color:#b9cdff;box-shadow:0 3px 14px rgba(0,43,102,.08)}
.item-icon{display:flex;align-items:center;justify-content:center;
  background:var(--tint);border-right:1px solid var(--line);color:var(--blue-dk)}
.item-icon svg{width:28px;height:28px}
.item-body{padding:18px 20px}
.item h4{font-size:17px;font-weight:700;margin-bottom:6px;color:var(--ink)}
.item .meta{font-size:13.5px;color:var(--ink-3);margin-bottom:9px}
.item .notes{font-size:14px;color:var(--ink-2);max-width:74ch}
.item .sku{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:var(--ink-3)}
.item-actions{display:flex;flex-direction:column;gap:8px;align-items:flex-end;
  justify-content:flex-start;padding:18px 18px 18px 4px}

.tag{display:inline-block;padding:3px 9px;border-radius:4px;font-size:11.5px;font-weight:650;
  letter-spacing:.04em;border:1px solid;white-space:nowrap}
.tag-a{color:var(--ok);border-color:#a8d7bd;background:#eefaf3}
.tag-b{color:var(--warn);border-color:#e0c98a;background:var(--warn-bg)}
.tag-unv{color:var(--ink-3);border-color:var(--line);background:var(--bg-2)}
.tag-usa{color:var(--blue-dk);border-color:#b9cdff;background:#eef3ff}

.empty{color:var(--ink-3);padding:30px 0;text-align:center;font-size:15px}

/* ---------- forms ---------- */
form.panel{background:var(--bg-2);border:1px solid var(--line);border-radius:6px;padding:28px}
.field{margin-bottom:18px}
label{display:block;font-size:13.5px;font-weight:620;color:var(--ink-2);margin-bottom:7px}
input,select,textarea{width:100%;background:#fff;border:1.5px solid var(--line);border-radius:4px;
  padding:12px 13px;color:var(--ink);font:inherit;font-size:16px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue)}
textarea{min-height:104px;resize:vertical}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hint{font-size:13px;color:var(--ink-3);margin-top:6px;line-height:1.5;display:block}
.submit{width:100%;padding:15px;font-size:16px}
.msg{padding:14px 17px;border-radius:5px;font-size:15px;margin:16px 0;display:none}
.msg.show{display:block}
.msg-ok{background:#eefaf3;border:1px solid #a8d7bd;color:#12603a}
.msg-err{background:#fdeaea;border:1px solid #eeb4b4;color:#8f2b2b}
.msg-info{background:var(--bg-2);border:1px solid var(--line);color:var(--ink-2)}

/* ---------- capability statement ---------- */
.capsheet{border:1px solid var(--line);border-radius:6px;padding:32px;background:#fff}
.capgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:1px solid var(--line);
  border-radius:5px;margin:20px 0}
.capgrid div{padding:12px 16px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.capgrid div:nth-child(2n){border-right:0}
.capgrid div:nth-last-child(-n+2){border-bottom:0}
.capgrid dt{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:650;margin-bottom:3px}
.capgrid dd{font-size:15px;font-weight:600}
.capgrid dd.code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.03em;color:var(--blue-dk);background:var(--tint);display:inline-block;
  padding:2px 8px;border-radius:4px;font-size:14px}

/* ---------- footer ---------- */
footer{padding:52px 0 32px;color:var(--ink-3);font-size:14.5px;background:var(--bg-2);border-top:1px solid var(--line)}
.f-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:34px;margin-bottom:36px}
.f-grid h4{color:var(--ink);font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;margin-bottom:14px;font-weight:650}
.f-grid a{display:block;text-decoration:none;color:var(--ink-3);margin-bottom:9px}
.f-grid a:hover{color:var(--blue-dk)}
.f-logo{height:40px;margin-bottom:16px}
.legal{border-top:1px solid var(--line);padding-top:24px;font-size:13px;line-height:1.7}
.legal p{margin-bottom:9px}

@media(max-width:960px){
  .g3,.g2,.g4,.row,.f-grid,.capgrid{grid-template-columns:1fr}
  .nav-links{display:none}
  .menu-btn{display:block}
  .nav-links.open{display:flex;position:absolute;top:76px;left:0;right:0;background:#fff;
    border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 20px}
  .nav-links.open a{padding:14px 0;border-bottom:1px solid var(--line)}
  .item{grid-template-columns:48px 1fr}
  .item-icon svg{width:22px;height:22px}
  .item-body{padding:14px 16px}
  .item-actions{grid-column:1/-1;flex-direction:row;align-items:center;
    padding:0 16px 16px}
}

@media print{
  header,.filters,.cta-row,footer .f-grid,.skip,.menu-btn{display:none}
  .vet-bar{background:none!important;color:#000;font-size:9.5pt;
    border-bottom:1.5pt solid #000}
  .vet-bar .vet-star,.vet-bar .vet-rest,.vet-bar strong{color:#000}
  .vet-bar a{display:none}
  .hero{background:none!important;color:#000}
  .hero h1,.hero .lede,.hero .eyebrow{color:#000}
  .hero-badge{border:1pt solid #000;box-shadow:none;background:none}
  .hero-badge .bdg-mark,.hero-badge .bdg-full,.hero-badge .bdg-sub,
  .hero-badge .bdg-eyebrow{color:#000}
  body{font-size:11pt}
  .item{break-inside:avoid;page-break-inside:avoid;box-shadow:none;grid-template-columns:34px 1fr auto}
  .item-icon{background:none;border-right:1pt solid #000;color:#000}
  .item-icon svg{width:18px;height:18px}
  .cat-group-icon.item-icon{border:1pt solid #000}
  a{color:var(--ink);text-decoration:none}
}

/* =====================================================================
   VETERAN-OWNED THEMING  ·  added 21 August 2026

   Brief was "yell loudly veteran owned, and theme it through the pages."
   The load-bearing word is THROUGH. A single badge on the home page is a
   decoration; the identity has to survive someone landing on /catalog from
   a search result, which is how most people will arrive.

   So it lives in three places that appear on all pages: a bar above
   the header, the navy hero, and the footer. Claims are limited verbatim to
   language already cleared and in use on the site — "SBA-certified SDVOSB"
   and "service-disabled veteran-owned small business". Nothing here asserts
   VA endorsement, and nothing asserts blanket set-aside eligibility, which
   per CLAUDE.md §3.3 turns on the nonmanufacturer rule per line rather than
   on our status.
   ===================================================================== */

.vet-bar{background:var(--navy-deep);color:#fff;font-size:13px;
  border-bottom:3px solid var(--red)}
.vet-bar .wrap{display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  min-height:40px;padding-top:8px;padding-bottom:8px}
.vet-bar strong{font-weight:680;letter-spacing:.01em}
.vet-star{color:var(--red);font-size:14px;line-height:1}
.vet-sep{color:rgba(255,255,255,.34)}
.vet-bar .vet-rest{color:rgba(255,255,255,.74)}
.vet-bar a{color:#bcd4ff;text-decoration:none;margin-left:auto;font-weight:600}
.vet-bar a:hover{color:#fff;text-decoration:underline}

.hero-badge{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);
  border-radius:13px;padding:30px 28px;text-align:center;position:relative;
  backdrop-filter:blur(6px);box-shadow:0 18px 46px rgba(0,10,32,.34)}
.hero-badge::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;
  border-radius:13px 13px 0 0;background:var(--red)}
.hero-badge .bdg-eyebrow{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.19em;text-transform:uppercase;font-size:11px;font-weight:700;
  color:var(--red);display:block;margin-bottom:14px}
.hero-badge .bdg-mark{font-size:clamp(38px,4.6vw,54px);font-weight:800;line-height:1;
  letter-spacing:-.03em;color:#fff;display:block}
.hero-badge .bdg-full{display:block;margin-top:13px;font-size:14.5px;line-height:1.45;
  color:rgba(255,255,255,.9);font-weight:600}
.hero-badge .bdg-sub{display:block;margin-top:15px;padding-top:15px;font-size:13px;
  color:rgba(255,255,255,.66);border-top:1px solid rgba(255,255,255,.17)}
.hero-badge .bdg-link{display:inline-block;margin-top:15px;font-size:14px;font-weight:650;
  color:#bcd4ff;text-decoration:none}
.hero-badge .bdg-link:hover{color:#fff;text-decoration:underline}

@media(max-width:1040px){
  .hero-grid{grid-template-columns:1fr;gap:38px}
  .hero-badge{text-align:left}
}
@media(max-width:620px){
  .vet-bar{font-size:12.2px}
  .vet-bar .wrap{gap:8px}
  .vet-bar a,.vet-bar .vet-rest{display:none}
}

.hero .updated{color:rgba(255,255,255,.68)}

.capsheet{position:relative;overflow:hidden}
.capsheet::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;
  background:var(--red)}

.hero .btn-primary{color:#fff}
.hero .btn-primary:hover{color:#fff}

.hero-badge .bdg-eyebrow{color:#ffb3b8}

.vet-star{color:#ff4d55}

.searchbar{margin-bottom:18px}
.searchbar label{display:block;font-size:13px;color:var(--ink-3);font-weight:650;
  margin-bottom:7px}
.searchbar input{width:100%;max-width:520px;font:inherit;font-size:16px;
  padding:13px 16px;border:1.5px solid var(--line);border-radius:7px;
  background:#fff;color:var(--ink)}
.searchbar input:focus{border-color:var(--navy);outline:3px solid var(--blue);
  outline-offset:2px}
.searchbar input::placeholder{color:var(--ink-3)}

.item .returns{font-size:13.5px;line-height:1.5;color:var(--ink-2);max-width:74ch;
  margin-top:9px;padding:8px 12px;border-left:3px solid var(--line);
  background:var(--bg-2);border-radius:0 5px 5px 0}
.item .returns strong{color:var(--ink);font-weight:650}
.item .returns-firm{border-left-color:var(--red);background:#fdf3f3}
.returns-asof{color:var(--ink-3)}
@media print{
  .item .returns{background:none;border-left:1.5pt solid #000;font-size:9pt}
}

/* =====================================================================
   WooCommerce — minimal integration so shop/product pages read as part of
   the same site rather than a bolted-on plugin default. Layout, not colors:
   WooCommerce's own markup is used as-is (not a pixel recreation of the old
   .item catalog list — that is a known, flagged gap, see wp-theme/README.md).
   ===================================================================== */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  background:var(--panel);border:1px solid var(--line);border-radius:8px;
  padding:18px;transition:border-color .15s,box-shadow .15s;
}
.woocommerce ul.products li.product:hover{border-color:#b9cdff;box-shadow:0 3px 14px rgba(0,43,102,.08)}
.woocommerce ul.products li.product .price{color:var(--blue-dk);font-weight:700}
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit{
  background:var(--blue);color:#fff;border-radius:4px;font-weight:650;
  border:1.5px solid var(--blue);padding:13px 24px;
}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover{
  background:var(--blue-dk);border-color:var(--blue-dk);
}
.ows-b2b-note{max-width:60ch}
.ows-b2b-link.button{background:#fff;color:var(--blue-dk);border-color:var(--line)}