/* ==========================================================================
   BUSIGEEK — SHARED HEADER / NAVIGATION
   Single source of truth for the utility bar, site header and primary nav.
   Load this LAST on every page, after the page-specific stylesheet.

   Do not redefine .utility-bar, .site-header, .header-inner, .brand-lockup,
   .brand-logo-image, .nav, .nav-cta, .mobile-header-cta or .skip-link in any
   page stylesheet. Edit them here so every page stays in sync.

   Values below match the homepage header exactly (it is the reference design).
   ========================================================================== */
/* --------------------------------------------------------------------------
   1. Shared layout token
   The content rail every page aligns to. Previously 1280px on home/about and
   1240px on services/contact, which is why the logo sat 20px further in on
   those pages. One value now.
   -------------------------------------------------------------------------- */
:root {
  --container: min(1280px, calc(100% - 64px));
}

@media (max-width: 780px) {
  :root {
    --container: calc(100% - 36px);
  }
}

#busigeek-site .container {
  width: var(--container);
  margin: 0 auto;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   2. Skip link
   NOTE: this element sits OUTSIDE #busigeek-site in the markup, so it must be
   styled with an unscoped selector. Scoping it to "#busigeek-site .skip-link"
   is what made it render as a visible link and push the page down 19px.
   -------------------------------------------------------------------------- */
.skip-link {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 2000;
  transform: translateY(-180%);
  padding: 10px 14px;
  border-radius: 10px;
  background: #fff;
  color: #07130f;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(7, 19, 15, .18);
  transition: transform .18s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   3. Utility bar
   -------------------------------------------------------------------------- */
#busigeek-site .utility-bar {
  background: #08110e;
  color: rgba(255, 255, 255, .8);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#busigeek-site .utility-bar .container {
  display: flex;
  justify-content: center;
  text-align: center;
  padding: 11px 0;
}

/* --------------------------------------------------------------------------
   4. Site header shell
   -------------------------------------------------------------------------- */
#busigeek-site .site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 248, 244, .92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(7, 19, 15, .08);
}

#busigeek-site .site-header .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 12px;
  min-height: 0;
}

/* --------------------------------------------------------------------------
   5. Brand lockup
   -------------------------------------------------------------------------- */
#busigeek-site .brand-lockup {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

#busigeek-site .site-header .brand-logo-image {
  display: block;
  width: auto;
  height: 42px;
  max-width: 220px;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   6. Primary navigation
   -------------------------------------------------------------------------- */
#busigeek-site .nav {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
}

/* font-weight carries !important purely to out-rank the page-level
   ".btn,.text-link{font-weight:800!important}" rule in busigeek-home.css.
   Nothing else here needs it. If that page rule is ever dropped, drop this
   !important too. */
#busigeek-site .nav a {
  font-size: 15px;
  font-weight: 700 !important;
  color: var(--text, #26352d);
  text-decoration: none;
}

#busigeek-site .nav > a:not(.btn):hover,
#busigeek-site .nav > a:not(.btn):focus-visible,
#busigeek-site .nav > a:not(.btn)[aria-current="page"] {
  color: var(--green-2, #0c9f5a);
}

/* Header CTA. ".nav a" above already outranks ".btn" on specificity, so the
   pill inherits the 15px/700 nav treatment rather than the 16px/900 body
   button treatment. That is intentional and matches the homepage. */
#busigeek-site .nav .nav-cta {
  margin-left: 6px;
}

/* The inner-page stylesheets give .btn a 1px transparent border and the
   homepage one does not, which made the header pill 2px wider on 3 of 4
   pages. Declared here so the header CTA is identical everywhere, without
   touching body buttons. */
#busigeek-site .nav .nav-cta,
#busigeek-site .mobile-header-cta {
  border: 1px solid transparent;
}

/* --------------------------------------------------------------------------
   7. Mobile CTA (replaces the nav under 780px)
   -------------------------------------------------------------------------- */
#busigeek-site .mobile-header-cta {
  display: none;
}

@media (max-width: 780px) {
  #busigeek-site .nav {
    display: none;
  }
  #busigeek-site .mobile-header-cta {
    display: inline-flex;
    width: auto;
    min-width: 0;
    min-height: 44px;
    padding: 10px 16px;
    font-size: 14px;
    flex: 0 0 auto;
  }
  #busigeek-site .site-header .header-inner {
    gap: 14px;
    padding-block: 10px;
  }
  #busigeek-site .site-header .brand-logo-image {
    height: 36px;
    max-width: 190px;
  }
  #busigeek-site .utility-bar {
    font-size: 11px;
    letter-spacing: .06em;
  }
  #busigeek-site .utility-bar .container {
    padding: 9px 0;
  }
}

@media (max-width: 430px) {
  #busigeek-site .site-header .brand-logo-image {
    height: 32px;
    max-width: 150px;
  }
  #busigeek-site .mobile-header-cta {
    font-size: 13px;
    padding-inline: 13px;
  }
}

/* --------------------------------------------------------------------------
   8. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .skip-link {
    transition: none;
  }
}