/*
 * Portage skin for the umbrella theme.
 *
 * The two sites share a brand but not a codebase: this theme is still on
 * PowerGo's #siteHeader / #mainnav markup with umbrella.css overriding it in
 * !important, while the store themes were rebuilt on their own components. So
 * the component CSS could not be copied across — what transfers is the design
 * language: the palette, the type, the button and card treatment.
 *
 * This file loads last and speaks in the same tokens the store sites use, so a
 * future colour change is one edit here rather than a hunt through 29KB of
 * overrides. It matches those overrides' !important where it has to; that is a
 * property of what it sits on top of, not a preference.
 */

:root {
  --header-bg:#0B1F3A; --header-ink:#FFFFFF; --header-ink-dim:#A9BBD0;
  --nav-bg:#F1F4F7;    --nav-ink:#1B2836;    --nav-ink-active:#0B1F3A;
  --bg:#FFFFFF;        --surface:#FFFFFF;    --surface-2:#F4F6F9;
  --ink:#10151C;       --ink-muted:#5A6472;  --line:#E3E7EC;
  --brand:#0B1F3A;     --accent:#0E9BD1;     --on-accent:#FFFFFF;
  --band-bg:#141A22;   --band-ink:#E8EDF3;
  --foot-bg:#101720;   --foot-ink:#C2CCD8;   --foot-head:#5FC0E8;
  --radius:10px;       --radius-lg:14px;
  --shadow:0 1px 2px rgba(16,21,28,.06), 0 8px 24px rgba(16,21,28,.08);
  --display:'Archivo','Lato',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

/* Lato stops at 700, so every heading asking for 800 fell back to Bold. */
@font-face {
  font-family:'Archivo';
  src:url('../fonts/archivo/archivo-latin-var.woff2') format('woff2-variations'),
      url('../fonts/archivo/archivo-latin-var.woff2') format('woff2');
  font-weight:400 800; font-stretch:75% 112%; font-style:normal; font-display:swap;
}

/* ---- header band and the four-location strip ---- */
body.bl-umbrella #siteHeader,
body.bl-umbrella #siteHeader .site-branding { background:var(--header-bg) !important; }
body.bl-umbrella #siteHeader.bl-header.umbrella .umbrella-locations li { border-color:rgba(255,255,255,.16) !important; }
body.bl-umbrella #siteHeader.bl-header.umbrella .umbrella-locations .name {
  font-family:var(--display) !important; font-weight:700 !important;
  letter-spacing:.1em !important; color:var(--header-ink) !important; }
body.bl-umbrella #siteHeader.bl-header.umbrella .umbrella-locations .phone {
  font-family:var(--display) !important; font-weight:600 !important; color:var(--accent) !important; }

/* ---- nav ---- */
body.bl-umbrella #mainnav { background:var(--nav-bg) !important; border-bottom:1px solid var(--line) !important; }
body.bl-umbrella #mainnav a { background:transparent !important; color:var(--nav-ink) !important;
  font-family:var(--display) !important; font-weight:600 !important; letter-spacing:.06em !important; }
body.bl-umbrella #mainnav a:hover,
body.bl-umbrella #mainnav li.current-menu-item > a { color:var(--nav-ink-active) !important; }

/* ---- type ---- */
body.bl-umbrella { color:var(--ink); }
body.bl-umbrella h1, body.bl-umbrella h2, body.bl-umbrella h3 {
  font-family:var(--display) !important; font-weight:700 !important; font-stretch:90% !important;
  letter-spacing:-.01em !important; }
body.bl-umbrella h2 { font-size:26px !important; }
body.bl-umbrella a { color:var(--accent); }

/* ---- store cards ---- */
body.bl-umbrella .store-card { border:1px solid var(--line) !important; border-radius:var(--radius-lg) !important;
  box-shadow:var(--shadow) !important; }
body.bl-umbrella .store-card .phone a { color:var(--accent) !important; font-weight:700 !important; }
body.bl-umbrella .store-card-title-link:hover { color:var(--accent) !important; }
body.bl-umbrella .store-card-cta { font-family:var(--display) !important; font-weight:700 !important;
  border-radius:6px !important; padding:11px 16px !important; }
body.bl-umbrella .store-card-cta.primary { background:var(--brand) !important; border-color:var(--brand) !important; }
body.bl-umbrella .store-card-cta.primary:hover { background:#123055 !important; border-color:#123055 !important; }
body.bl-umbrella .store-card-cta.secondary { color:var(--brand) !important; border-color:var(--line) !important; }
body.bl-umbrella .store-card-cta.secondary:hover { background:transparent !important;
  color:var(--accent) !important; border-color:var(--accent) !important; }

/* ---- the dark band under the hero ---- */
body.bl-umbrella .bl-skip-link { background:var(--brand) !important; }

/* ---- buttons, wherever they appear ----
   The theme's own .btn was grey on grey; these are the store sites' two: a solid
   navy primary and a quiet outline beside it. */
body.bl-umbrella .btn,
body.bl-umbrella a.btn { font-family:var(--display) !important; font-weight:700 !important;
  border-radius:6px !important; padding:12px 20px !important; letter-spacing:.02em !important;
  text-transform:none !important; transition:background .15s ease, color .15s ease, border-color .15s ease; }
body.bl-umbrella .btn.primary, body.bl-umbrella a.btn.primary {
  background:var(--accent) !important; border:1px solid var(--accent) !important; color:var(--on-accent) !important; }
body.bl-umbrella .btn.primary:hover, body.bl-umbrella a.btn.primary:hover { filter:brightness(1.08); }
body.bl-umbrella .btn.secondary, body.bl-umbrella a.btn.secondary {
  background:transparent !important; border:1px solid rgba(255,255,255,.55) !important; color:#fff !important; }
body.bl-umbrella .btn.secondary:hover, body.bl-umbrella a.btn.secondary:hover {
  border-color:var(--accent) !important; color:var(--accent) !important; }

/* A secondary button on a light section needs the dark outline instead. */
body.bl-umbrella .bl-light .btn.secondary,
body.bl-umbrella section:not([class*="dark"]) .store-card .btn.secondary {
  border-color:var(--line) !important; color:var(--brand) !important; }

/* ---- the intro band under the hero ----
   A linear-gradient on .bl-hero, in warm greys; the store sites' band is a cooler
   near-black that reads as part of the navy header's family rather than beside
   it. Scoped to .bl-hero on purpose: the footer also has a .main and repainting
   that from here would be an accident. */
body.bl-umbrella section.bl-hero {
  background-image:linear-gradient(var(--band-bg) 0%, var(--band-bg) 100%) !important; }
body.bl-umbrella section.bl-hero h1,
body.bl-umbrella section.bl-hero h2 { color:var(--band-ink) !important; }
body.bl-umbrella section.bl-hero p { color:var(--hero-sub, #C3D2E2) !important; }

/* ---- the mobile bar ----
   Two things this file's own rules above are responsible for, at phone widths.

   1. #mainnav is forced to 60px tall (umbrella.css) but collapses to the
      hamburger's 50px width once the nav items move into the drawer. The
      --nav-bg fill and the --line bottom border above then paint a pale 50x10
      block that hangs below the bar, over the top-left corner of the Morden
      tile — the white line. It also sat on top of that tile's link. Nothing in
      the mobile bar wants the nav's colour, so it is dropped here and the bar
      is cut to the 50px the hamburger actually occupies.

   2. PowerGo builds the mobile bar as ul.menu.singleCTA and gives every item
      the cyan CTA fill. That is right for the wrench, chat and phone buttons
      and wrong for the logo: logo-umbrella-v3.png is a white wordmark with a
      cyan POWERSPORTS tab, drawn for the navy header, so on cyan the tab
      disappears into the background and the mark washes out. The logo's slot
      goes back to transparent and shows the navy behind it, the same ground
      the desktop logo sits on. */
@media (max-width:768px) {
  body.bl-umbrella #mainnav {
    height:50px !important;
    background:transparent !important;
    border-bottom:0 !important;
  }
  /* The bar's inner wrappers are pinned to 60px by umbrella.css too, and they
     overflow the box above rather than following it. Transparent now, so they
     no longer show — but they still sat over the Morden tile's top-left corner
     and ate taps meant for its phone number. */
  body.bl-umbrella #mainnav > .inner,
  body.bl-umbrella #mainnav > .inner > nav { height:50px !important; }
  body.bl-umbrella #siteHeader .mobilebtns .logo-item > a,
  body.bl-umbrella #mobilebtns .logo-item > a {
    background:transparent !important;
  }
}

/* ---- the "Have a Question?" chat band ----
   The one dark surface this file never reached: umbrella.css paints it with its
   own --navy (#001B5E), a royal blue that predates the skin and matches nothing
   else on the page — the header is #0B1F3A, the hero band #141A22, the footer
   #101720. The store sites' equivalent full-width band (.bl-band) is --band-bg,
   so this takes the same pair, which also makes the page's two dark bands agree.
   The teal .btn.primary above then reads as the system accent instead of as a
   second blue fighting the first. */
body.bl-umbrella section.bl-chat-cta { background:var(--band-bg) !important; color:var(--band-ink) !important; }
body.bl-umbrella section.bl-chat-cta h2 { color:var(--band-ink) !important; }
body.bl-umbrella section.bl-chat-cta p { color:var(--header-ink-dim) !important; }