/* ==========================================================================
   HexCapScrews.com — shared styles
   Palette: navy structure, red accent, steel secondary, off-white canvas
   Type:    Barlow Semi Condensed (headings) + Inter (body)
   ========================================================================== */

:root{
  --navy:#37424E;
  --navy-deep:#2A333C;
  --red:#CB7A12;
  --red-dark:#AD6710;
  --steel:#5A6472;
  --canvas:#F4F6F9;
  --ink:#1A2233;
  --line:#DCE1E9;
  --ph:#BCC3CC;              /* placeholder tone */
  --bs-body-font-family:'Inter',system-ui,sans-serif;
  --bs-body-color:var(--ink);
}

body{background:var(--canvas);color:var(--ink);}
h1,h2,h3,h4,h5,.head{font-family:'Barlow Semi Condensed',sans-serif;letter-spacing:.01em;}
a{color:var(--navy);}

/* ---- utility bar ---- */
.utility{background:var(--navy-deep);color:#C2C9D2;font-size:.82rem;}
.utility a{color:#C2C9D2;text-decoration:none;}
.utility a:hover{color:#fff;}

/* ---- navbar ---- */
.navbar-main{background:var(--navy);}
.brand-mark{font-family:'Barlow Semi Condensed',sans-serif;font-weight:700;font-size:1.5rem;color:#fff;line-height:1;}
.brand-mark .dot{color:var(--red);}
.brand-sub{font-size:.66rem;color:#A9B4C0;letter-spacing:.14em;text-transform:uppercase;}
.navbar-main .nav-link{color:#DBE0E6;font-family:'Barlow Semi Condensed',sans-serif;font-weight:600;font-size:1rem;letter-spacing:.02em;padding:.35rem .8rem;border-bottom:2px solid transparent;}
.navbar-main .nav-link:hover{color:#fff;}
.navbar-main .nav-link.active{color:#fff;border-bottom-color:var(--red);}

/* ---- hero (home) ---- */
.hero{background:linear-gradient(180deg,var(--navy) 0%,var(--navy-deep) 100%);color:#fff;position:relative;overflow:hidden;}
.hero .eyebrow{color:#A9B4C0;font-family:'Barlow Semi Condensed',sans-serif;font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:.8rem;}
.hero h1{font-weight:700;font-size:clamp(2.1rem,4.5vw,3.4rem);line-height:1.02;}
.hero p.lead{color:#CDD4DC;max-width:34rem;}
.btn-red{background:var(--red);border:none;color:#fff;font-family:'Barlow Semi Condensed',sans-serif;font-weight:600;letter-spacing:.03em;padding:.6rem 1.4rem;}
.btn-red:hover{background:var(--red-dark);color:#fff;}
.btn-ghost{border:1px solid #5E6B7A;color:#fff;font-family:'Barlow Semi Condensed',sans-serif;font-weight:600;padding:.6rem 1.4rem;}
.btn-ghost:hover{background:rgba(255,255,255,.08);color:#fff;}

/* grade head-marking plates */
.grade-plate{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:.5rem;padding:1.1rem 1rem .9rem;text-align:center;}
.grade-plate .head-svg{width:64px;height:64px;margin:0 auto .5rem;display:block;}
.grade-plate .g-name{font-family:'Barlow Semi Condensed',sans-serif;font-weight:700;color:#fff;font-size:1.05rem;}
.grade-plate .g-spec{font-size:.72rem;color:#A9B4C0;letter-spacing:.04em;}

/* ---- page banner (interior pages) ---- */
.page-banner{background:linear-gradient(180deg,var(--navy) 0%,var(--navy-deep) 100%);color:#fff;}
.page-banner .eyebrow{color:#A9B4C0;font-family:'Barlow Semi Condensed',sans-serif;font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:.78rem;}
.page-banner h1{font-weight:700;font-size:clamp(1.9rem,4vw,2.8rem);}
.page-banner p{color:#CDD4DC;max-width:46rem;margin-bottom:0;}
.breadcrumb-nav{font-size:.8rem;color:#A9B4C0;}
.breadcrumb-nav a{color:#A9B4C0;text-decoration:none;}
.breadcrumb-nav a:hover{color:#fff;}

/* ---- section headers ---- */
.sec-label{font-family:'Barlow Semi Condensed',sans-serif;font-weight:700;color:var(--navy);font-size:1.6rem;}
.sec-rule{width:44px;height:3px;background:var(--red);margin-top:.4rem;margin-bottom:1rem;}

/* ---- spec cards ---- */
.spec-card{background:#fff;border:1px solid var(--line);border-radius:.5rem;height:100%;transition:border-color .15s ease;text-decoration:none;color:inherit;display:block;}
.spec-card:hover{border-color:var(--navy);}
.spec-card .card-body{padding:1.25rem 1.35rem;}
.spec-card h3{font-weight:700;color:var(--navy);font-size:1.22rem;margin-bottom:.35rem;}
.spec-card p{color:var(--steel);font-size:.9rem;margin-bottom:.75rem;}
.spec-card ul{list-style:none;padding:0;margin:0;font-size:.85rem;color:var(--ink);}
.spec-card ul li{padding:.15rem 0;border-top:1px solid var(--line);}
.spec-card ul li:first-child{border-top:none;}
.spec-card .idx{font-family:'Barlow Semi Condensed',sans-serif;color:var(--red);font-weight:700;font-size:.8rem;letter-spacing:.1em;}

/* ---- data tables ---- */
.chart-wrap{background:#fff;border:1px solid var(--line);border-radius:.5rem;overflow:hidden;}
table.grade-chart{margin:0;}
table.grade-chart thead th{background:var(--navy);color:#fff;font-family:'Barlow Semi Condensed',sans-serif;font-weight:600;letter-spacing:.03em;font-size:.9rem;vertical-align:middle;border:none;}
table.grade-chart td{vertical-align:middle;font-size:.9rem;border-color:var(--line);}
table.grade-chart tbody tr:hover{background:#F0F3F8;}
.g-badge{font-family:'Barlow Semi Condensed',sans-serif;font-weight:700;color:var(--navy);}
.marking svg{width:34px;height:34px;}

/* placeholder cell — shows a faint dash until real data is entered */
td.ph,th.ph{color:var(--ph);}
td.ph:empty::after,td.ph.blank::after{content:"—";color:var(--ph);}

/* ---- source / status callout ---- */
.source-note{background:#EEF2F8;border:1px solid var(--line);border-left:3px solid var(--navy);border-radius:.35rem;padding:.7rem .9rem;font-size:.82rem;color:var(--steel);}
.source-note strong{color:var(--navy);font-family:'Barlow Semi Condensed',sans-serif;letter-spacing:.02em;}
.status-pill{display:inline-block;background:#FBEFD8;color:var(--red);border:1px solid #EBD3A3;border-radius:2rem;padding:.05rem .6rem;font-size:.7rem;font-family:'Barlow Semi Condensed',sans-serif;font-weight:600;letter-spacing:.06em;text-transform:uppercase;vertical-align:middle;}

/* ---- fill-in prose placeholder block ---- */
.fillin{background:#fff;border:1px dashed var(--ph);border-radius:.5rem;padding:1.1rem 1.25rem;color:var(--steel);font-size:.9rem;}
.fillin .fillin-label{font-family:'Barlow Semi Condensed',sans-serif;font-weight:700;color:var(--navy);letter-spacing:.04em;font-size:.8rem;text-transform:uppercase;display:block;margin-bottom:.35rem;}

/* ---- prose ---- */
.prose p{max-width:70ch;color:var(--ink);}
.prose h2{color:var(--navy);font-weight:700;font-size:1.35rem;margin-top:1.75rem;}

/* ---- footer ---- */
footer.site{background:var(--navy-deep);color:#B4BBC4;}
footer.site h5{color:#fff;font-weight:600;font-size:.9rem;letter-spacing:.05em;text-transform:uppercase;}
footer.site a{color:#B4BBC4;text-decoration:none;font-size:.9rem;}
footer.site a:hover{color:#fff;}
footer.site .foot-brand{font-family:'Barlow Semi Condensed',sans-serif;font-weight:700;color:#fff;font-size:1.35rem;}
footer.site .foot-brand .dot{color:var(--red);}
.foot-legal{background:#1D242B;color:#8A929E;font-size:.8rem;}

@media (max-width:575.98px){
  .hero{text-align:center;}
  .hero p.lead{margin-left:auto;margin-right:auto;}
}

/* ---- compare-all banner (home) ---- */
.compare-banner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-deep) 100%);
  color:#fff;border-radius:.5rem;padding:1.5rem 1.75rem;text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease;}
.compare-banner:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(20,53,107,.25);color:#fff;}
.compare-banner .cb-eyebrow{font-family:'Barlow Semi Condensed',sans-serif;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;font-size:.72rem;color:#A9B4C0;}
.compare-banner .cb-title{font-family:'Barlow Semi Condensed',sans-serif;font-weight:700;
  font-size:1.5rem;line-height:1.1;margin:.15rem 0 .3rem;color:#fff;}
.compare-banner .cb-sub{color:#CDD4DC;font-size:.9rem;max-width:52ch;margin:0;}
.compare-banner .cb-arrow{font-size:1.9rem;line-height:1;color:var(--red);flex-shrink:0;
  font-family:'Barlow Semi Condensed',sans-serif;}
@media (max-width:575.98px){
  .compare-banner{flex-direction:column;align-items:flex-start;text-align:left;}
  .compare-banner .cb-arrow{align-self:flex-end;margin-top:.25rem;}
}

/* ---- spec-sheet download cards ---- */
.dl-card{background:#fff;border:1px solid var(--line);border-radius:.5rem;height:100%;
  display:flex;flex-direction:column;padding:1.35rem 1.45rem;transition:border-color .15s ease;}
.dl-card:hover{border-color:var(--navy);}
.dl-icon{flex-shrink:0;}
.dl-card h3{font-weight:700;color:var(--navy);font-size:1.18rem;margin:0 0 .25rem;}
.dl-card .dl-desc{color:var(--steel);font-size:.9rem;margin:0;}
.dl-meta{color:var(--steel);font-size:.78rem;font-family:'Barlow Semi Condensed',sans-serif;
  letter-spacing:.06em;text-transform:uppercase;}
.dl-card .btn-red{padding:.45rem 1.1rem;font-size:.95rem;}

/* ---- cookie / no-tracking notice ---- */
.cookie-notice{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:1080;max-width:640px;
  margin:0 auto;background:var(--navy);color:#E9ECEF;border:1px solid var(--navy-deep);
  border-radius:.5rem;box-shadow:0 8px 30px rgba(14,38,80,.35);
  padding:.85rem 1rem;display:none;align-items:center;gap:1rem;font-size:.86rem;line-height:1.4;}
.cookie-notice.is-visible{display:flex;}
.cookie-notice>span{flex:1 1 auto;min-width:0;}
.cookie-notice a{color:#fff;text-decoration:underline;}
.cookie-notice strong{color:#fff;}
.cookie-notice button{flex:0 0 auto;white-space:nowrap;background:var(--red);color:#fff;border:none;border-radius:.35rem;
  font-family:'Barlow Semi Condensed',sans-serif;font-weight:600;letter-spacing:.02em;
  padding:.4rem 1rem;cursor:pointer;}
.cookie-notice button:hover{background:var(--red-dark);}
@media (max-width:575.98px){.cookie-notice{flex-direction:column;align-items:stretch;text-align:left;}
  .cookie-notice button{align-self:flex-end;}}

/* ---- legal / prose pages ---- */
.legal{max-width:760px;}
.legal h2{color:var(--navy);font-weight:700;font-size:1.25rem;margin-top:1.75rem;}
.legal p, .legal li{color:var(--ink);font-size:.95rem;line-height:1.65;}
.legal ul{padding-left:1.2rem;}
.legal .updated{color:var(--steel);font-size:.85rem;}

/* ---- Tools dropdown ---- */
.navbar-main .dropdown-toggle::after{vertical-align:.18em;border-top-width:.28em;border-right-width:.28em;border-left-width:.28em;opacity:.8}
.navbar-main .tools-menu{background:#2A333C;border:1px solid #3A444F;border-radius:.5rem;padding:.35rem;min-width:14rem;box-shadow:0 14px 30px rgba(0,0,0,.28);margin-top:.35rem}
.navbar-main .tools-menu .dropdown-item{color:#DBE0E6;font-family:'Barlow Semi Condensed',sans-serif;font-weight:600;font-size:1rem;letter-spacing:.02em;border-radius:.35rem;padding:.45rem .8rem;border-left:3px solid transparent}
.navbar-main .tools-menu .dropdown-item:hover,.navbar-main .tools-menu .dropdown-item:focus{background:#37424E;color:#fff}
.navbar-main .tools-menu .dropdown-item.active{background:transparent;color:#fff;border-left-color:var(--red)}
@media (max-width:991.98px){.navbar-main .tools-menu{box-shadow:none;margin:.2rem 0 .4rem .8rem;background:transparent;border:0;padding:0}}