/* ==========================================================================
   LEGACY BRIDGE
   --------------------------------------------------------------------------
   The older product and guide pages carry their own inline stylesheet, written
   against the original palette (navy/red) and typefaces (Oswald/Inter). Rather
   than rewrite those pages, this sheet is injected AFTER their inline <style>
   and pulls them onto the current system:

     - remaps their design tokens to the current palette
     - swaps Oswald for Libre Franklin and Inter for Public Sans
     - drops the uppercase headline treatment the old design used
     - flattens the rounded corners to the drawn, squarer shapes
     - keeps flag red for the primary action only; everything their CSS used
       red for decoratively becomes gold

   Loaded only on those pages. Delete it when a page is rebuilt properly.
   ========================================================================== */

:root{
  --navy:#1E3A5F;
  --navy-deep:#16293F;
  --navy-soft:#2A4A73;
  --red:#8A6218;          /* their accent becomes gold, cut dark enough for text */
  --paper:#FBF8F3;
  --line:rgba(169,156,139,.42);
  --ink:#1E3A5F;
  --muted:#6B6154;
}

/* ---- typography ---- */
body,button,input,select,textarea,.btn,.pcard-btn{
  font-family:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,sans-serif;
}
body{background:var(--paper);color:var(--ink);font-variant-numeric:tabular-nums}

h1,h2,h3,h4,h5,
.brand-text,.pcard-name,.lhero h1,.ghero h1,.gcard h3,.tool-head h3{
  font-family:'Libre Franklin',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,sans-serif!important;
  text-transform:none!important;
  letter-spacing:-.011em!important;
  font-weight:700!important;
  line-height:1.16;
}
h1{letter-spacing:-.018em!important}

/* small all-caps labels stay in the UI face, where uppercase belongs */
.sec-label,.kicker,.tag,.pcard-model,.eder-badge span,
.prod-flag,.label{
  font-family:'Public Sans',sans-serif!important;
  text-transform:uppercase!important;
  letter-spacing:.18em!important;
  font-weight:600!important;
  color:#8A6218;
}
.pcard-model{font-family:ui-monospace,Menlo,monospace!important;letter-spacing:.03em!important;text-transform:none!important}

/* ---- shapes: drawn, not rounded ---- */
.btn,.pcard,.pcard-btn,.gcard,.lform-card,.tool-head,.prod,.card,
input,select,textarea,.result,.cfg-card{border-radius:3px!important}
.pcard-img,.prod-img{border-radius:0!important}

/* ---- flag red is reserved for the one primary action ---- */
.btn-primary,.pcard-btn,#submitbtn,button[type="submit"]{
  background:#B22234!important;border-color:#B22234!important;color:#fff!important;
}
.btn-primary:hover,.pcard-btn:hover,#submitbtn:hover,button[type="submit"]:hover{
  background:#8C1A29!important;border-color:#8C1A29!important;
}

/* ---- photographs keep the flag in frame ---- */
.pcard-img img,.prod-img img,.gcard img,.lhero img,img.shot{
  object-fit:cover;object-position:center 14%;
}

/* ---- the shared chrome always wins over their old header/footer rules ---- */
header.site,header.site *,footer.site,footer.site *,.topbar,.topbar *,.callbar,.callbar *{
  font-family:inherit;
}
header.site .brand-text{font-family:'Libre Franklin',Helvetica,sans-serif!important}

/* ---- headings inherit again ----
   site.css gives every heading a default ink colour. On these pages that broke
   the original cascade: a heading inside one of their dark heroes stopped
   inheriting the light colour set on the container. A bare `inherit` at the
   same specificity, loaded after site.css, hands control back to their own
   rules, which already got this right for both their light and dark grounds. */
h1,h2,h3,h4,h5,h6{color:inherit}

/* the old light-blue second line, retuned to sand on the two heroes we have
   confirmed are dark */
.lhero-size,.ghero h1 span{color:#C9BBA6}
.lhero-promise{border-left-color:#B22234}

/* their dark form and message panels: site.css gives headings a default ink
   colour, which wins over the light colour these panels inherit down */
.lform-card h2,.lform-card h3,.lform-head h2,.lform-head h3,
.formcard-dark h2,.formcard-dark h3,.sent h3,
.tool-head h3,.contact-dark h2,.contact-dark h3{color:inherit}

/* gold as text on a light ground needs the darker cut */
.tag,.catcard-price,.pcard-price,.sec-label,.kicker{color:#8A6218}

/* ---- gold surfaces on the older pages ----
   Their inline CSS sets white text on what used to be red. Gold is lighter than
   red was, so filled gold chips take dark text, and gold used AS text on a light
   ground takes the darker cut. */
.nav-cta{color:#1E3A5F!important;background:#C9BBA6!important}
.nav-cta:hover{background:#E6DDCF!important}
.catcard-price,.pcard-price,.tag,.sec-label,.kicker{color:#8A6218!important}
/* these appear on their dark heroes, where the lighter brass reads better */
.ghero .kicker,.lhero .kicker,.rhero .kicker,.ty-head .kicker,.ghero .sec-label,
.lhero .sec-label,.sec-navy .sec-label,.sec-navy .kicker,.supply .sec-label,
.guides-strip .sec-label,.flaghero .sec-label{color:#D9A741!important}

/* ---- bare hex values ----
   A handful of their rules write the old navy and red straight into a gradient
   or a background rather than going through a token, so the token remap above
   cannot reach them. These are all of them. */
.sec-navy{
  background:linear-gradient(180deg,#1E3A5F 0%,#16293F 100%)!important;
  color:#FBF8F3;
}
.sizes thead th,.gtable th{background:#1E3A5F!important;color:#FBF8F3!important}
.flag-img{background:#1E3A5F!important}
.selbar-go:hover,.hero-cta-top:hover{background:#8C1A29!important}
.selbar{background:#1E3A5F!important}

/* ---------- HEADER CONTROLS BELOW THE NAV BREAKPOINT ----------
   These pages set .nav-tel inline with no media guard, so it stayed visible on
   a phone and overlapped the hamburger. site.css hides both at 1000px; this
   restates it at a specificity their inline rules cannot beat. */
@media(max-width:1000px){
  header.site .nav-tel,
  header.site .nav-cta { display: none !important }
}
@media(max-width:1200px){
  header.site .nav-tel{display:none!important}
}
header.site .brand-text small{display:none!important}