/* ==========================================================================
   Cents Precision — navigation, styled to match the existing site's header
   --------------------------------------------------------------------------
   Revision 2. The first version used a copper accent on dark ink. The client asked for
   white and blue, bright throughout, and for the navigation to follow the existing site's
   header - so the palette is now the site's own blue, and the quote button is the same
   rounded blue pill the old header uses.

   Kept from revision 1, because these are what make it read as considered rather than templated:
     - 93px bar with a 60px logo (scale reads as confidence)
     - uppercase condensed menu type with wide tracking
     - a full-width panel under Products holding the three product families
     - a hairline under the bar, and a shadow only once the page is scrolled
   ========================================================================== */

:root {
  --cn-ink: #14181C;
  --cn-graphite: #2A2F35;
  --cn-muted: #6B7480;
  --cn-blue: #0274BE;          /* the site's existing link blue */
  --cn-blue-dark: #015C97;
  --cn-blue-cta: #39A2F0;      /* the light blue of the existing Get A Quote pill */
  --cn-blue-pale: #EAF4FD;
  --cn-line: #E3E8ED;
  --cn-paper: #F4F8FC;
  --cn-max: 1360px;
}

/* --- hide the Astra header this replaces (kept in the DOM, never removed) --- */
#masthead, header.site-header, .ast-above-header, .ast-mobile-header-wrap { display: none !important; }
body { padding-top: 0 !important; }

/* --- shell --- */
.cn-header {
  position: sticky; top: 0; z-index: 99999;
  background: #fff;
  border-bottom: 1px solid var(--cn-line);
  transition: box-shadow .25s ease;
}
.cn-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--cn-blue-cta) 0%, var(--cn-blue-cta) 26%,
                              rgba(57, 162, 240, .26) 62%, rgba(57, 162, 240, 0) 100%);
}
.cn-header.is-scrolled { box-shadow: 0 6px 28px rgba(2, 116, 190, .12); }

.cn-header__inner {
  display: flex; align-items: center; gap: 44px;
  height: 93px; max-width: var(--cn-max); margin: 0 auto; padding: 0 24px;
}

/* --- logo --- */
.cn-logo { display: flex; align-items: center; flex: 0 0 auto; }
.cn-logo img { height: 60px; width: auto; display: block; }

/* --- primary nav --- */
.cn-nav { display: flex; align-items: center; gap: 34px; margin-left: auto; }
.cn-nav__link {
  font-family: "Barlow Condensed", "Inter", system-ui, sans-serif;
  font-size: 17px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--cn-graphite); text-decoration: none; white-space: nowrap;
  position: relative; padding: 12px 0; background: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
}
.cn-nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px;
  background: var(--cn-blue); transform: scaleX(0); transform-origin: left;
  transition: transform .22s ease;
}
.cn-nav__link:hover { color: var(--cn-blue); text-decoration: none; }
.cn-nav__link:hover::after,
.cn-nav__link.is-current::after { transform: scaleX(1); }
.cn-nav__link.is-current { color: var(--cn-blue); }

.cn-caret {
  width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform .22s ease;
}
.cn-item.is-open .cn-caret { transform: rotate(225deg) translateY(-1px); }

/* --- CTA: same rounded blue pill as the existing header --- */
.cn-cta {
  flex: 0 0 auto;
  font-family: "Barlow Condensed", "Inter", system-ui, sans-serif;
  font-size: 16px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  background: var(--cn-blue-cta); color: #fff; text-decoration: none;
  padding: 14px 30px; border-radius: 50px;
  box-shadow: 0 4px 14px rgba(57, 162, 240, .32);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.cn-cta:hover {
  background: var(--cn-blue); color: #fff; text-decoration: none;
  transform: translateY(-1px); box-shadow: 0 6px 18px rgba(2, 116, 190, .38);
}

/* --- mega menu: the three product families --- */
.cn-item { position: relative; }
.cn-mega {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-6px);
  width: min(920px, calc(100vw - 48px));
  background: #fff; border: 1px solid var(--cn-line); border-radius: 8px;
  box-shadow: 0 24px 60px rgba(2, 60, 100, .16);
  padding: 26px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  opacity: 0; visibility: hidden; transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.cn-item.is-open .cn-mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

.cn-card {
  display: flex; flex-direction: column;   /* the children are <span>s: without this they stay
                                              inline, the media box collapses and text is clipped */
  text-decoration: none; border: 1px solid var(--cn-line); border-radius: 6px;
  overflow: hidden; background: #fff; transition: border-color .18s ease, transform .18s ease;
}
.cn-card:hover { border-color: var(--cn-blue-cta); transform: translateY(-2px); text-decoration: none; }
.cn-card__media { display: block; flex: 0 0 auto; height: 186px; background: var(--cn-paper); overflow: hidden; }
.cn-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cn-card__body { display: block; flex: 1 1 auto; padding: 16px 18px 20px; }
.cn-card__body strong {
  display: block;
  font-family: "Barlow Condensed", "Inter", system-ui, sans-serif;
  font-size: 20px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--cn-ink); margin-bottom: 6px;
}
.cn-card__body span { display: block; font-size: 13px; line-height: 1.5; color: var(--cn-muted); }
.cn-card__body em {
  display: inline-block; margin-top: 12px; font-style: normal;
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cn-blue);
}

/* --- burger --- */
.cn-burger {
  display: none; margin-left: auto;
  background: none; border: 1px solid var(--cn-line); border-radius: 6px;
  padding: 11px 12px; cursor: pointer;
}
.cn-burger span { display: block; width: 22px; height: 2px; background: var(--cn-graphite); }
.cn-burger span + span { margin-top: 5px; }

/* --- responsive --- */
@media (max-width: 1180px) {
  .cn-nav { gap: 22px; }
  .cn-nav__link { font-size: 15px; letter-spacing: .1em; }
  .cn-header__inner { gap: 26px; }
}
@media (max-width: 1024px) {
  .cn-header__inner { height: 77px; }
  .cn-logo img { height: 46px; }
  .cn-cta { display: none; }
  .cn-burger { display: block; }
  .cn-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-top: 1px solid var(--cn-line);
    flex-direction: column; align-items: stretch; gap: 0; padding: 8px 24px 24px;
    max-height: calc(100vh - 77px); overflow-y: auto;
  }
  .cn-nav.is-open { display: flex; }
  .cn-nav__link { padding: 16px 0; border-bottom: 1px solid var(--cn-line); justify-content: space-between; }
  .cn-nav__link::after { display: none; }
  .cn-mega {
    position: static; transform: none; width: 100%; box-shadow: none; border: 0;
    border-radius: 0; padding: 0 0 12px; grid-template-columns: 1fr; gap: 12px;
    display: none; opacity: 1; visibility: visible;
  }
  .cn-item.is-open .cn-mega { display: grid; transform: none; }
  .cn-card { flex-direction: row; }
  .cn-card__media { width: 40%; height: auto; align-self: stretch; min-height: 104px; }
  .cn-card__body { padding: 14px 16px; }
  .cn-card__body strong { font-size: 18px; }
}

/* The theme ships a GTranslate floating switcher that sat above everything and covered the
   quote button on desktop and the burger on mobile. Hidden rather than deleted so the markup
   stays available; a language switcher belongs inside the nav, not floating over it. */
.gtranslate_wrapper,
#gt_float_wrapper,
.gt_container--gtranslate,
[class*="gtranslate_wrapper"] { display: none !important; visibility: hidden !important; }

@media (prefers-reduced-motion: reduce) {
  .cn-header, .cn-nav__link, .cn-caret, .cn-mega, .cn-cta, .cn-card { transition: none !important; }
}