/* =========================================================================
   nav-footer.css — Shared site navigation (header.site-nav) + navy-footer
   typography refinements. Loaded by every public page AFTER styles.css.

   ALL navigation rules and their tokens are scoped under `.site-nav`, and the
   footer refinements under `.footer--navy`, so nothing in this file can leak
   into page-body content. Values are extracted verbatim from the approved
   homepage navigation and footer.
   ========================================================================= */

/* --- Navigation tokens, scoped to the nav element so they can't leak globally */
.site-nav {
  --sn-ink:      #0B2147;   /* nav text (was homepage --h-ink) */
  --sn-navy:     #19478C;   /* hover accent (was --h-navy-3) */
  --sn-red:      #C9253E;   /* phone icon (was --h-red-1) */
  --sn-hover-bg: #F3F6FB;
}

/* --- Bar --- */
.site-nav {
  position: relative;
  z-index: 40;
  background: #fff;
  border-bottom: 1px solid var(--border-muted);
}
.site-nav__bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
  height: 76px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 1024px) { .site-nav__bar { padding: 0 32px; } }
.site-nav__logo { flex-shrink: 0; display: inline-flex; align-items: center; }
.site-nav__logo img { height: 30px; width: auto; display: block; }

/* --- Desktop link row — absolutely centered over the bar --- */
.site-nav__links { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.site-nav__links > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.site-nav__item { position: relative; }
.site-nav__link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 10px 14px; border: none; background: transparent; cursor: pointer;
  font-family: var(--font-sans); font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: 0.01em;
  color: var(--sn-ink); white-space: nowrap; border-radius: var(--radius-md);
  transition: color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.site-nav__link:hover { color: var(--sn-navy); background: var(--sn-hover-bg); text-decoration: none; }
.site-nav__chev { transition: transform var(--dur-fast) var(--ease-standard); }
.site-nav__item.is-open .site-nav__chev { transform: rotate(180deg); }

/* --- Desktop dropdown (toggled via display; opens on hover or click) --- */
.site-nav__dropdown {
  display: none;
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
  min-width: 236px; list-style: none; margin: 0; padding: 8px;
  background: #fff; border: 1px solid var(--border-muted); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.site-nav__item.is-open .site-nav__dropdown { display: block; }
.site-nav__dropdown a {
  display: block; padding: 9px 12px; border-radius: var(--radius-sm);
  font-family: var(--font-sans); font-size: 14px; font-weight: 500; line-height: 1.45;
  color: var(--fg-default); white-space: nowrap;
}
.site-nav__dropdown a:hover { background: var(--sn-hover-bg); color: var(--sn-navy); text-decoration: none; }
.site-nav__divider { list-style: none; height: 1px; margin: 6px 6px; background: var(--border-muted); }
.site-nav__dropdown a.site-nav__viewall { display: flex; align-items: center; gap: 6px; color: var(--fg-brand); font-weight: 700; }
.site-nav__dropdown a.site-nav__viewall:hover { background: var(--sn-hover-bg); color: var(--sn-navy); }

/* --- Phone (far right) --- */
.site-nav__phone {
  flex-shrink: 0; margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0.01em;
  color: var(--sn-ink); white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-standard);
}
.site-nav__phone:hover { color: var(--sn-navy); text-decoration: none; }
.site-nav__phone svg { color: var(--fg-brand); flex-shrink: 0; }
.site-nav__phone:not(.site-nav__phone--mobile) svg { color: var(--sn-red); }

/* --- Desktop: pin the shared nav to the top on scroll, consistently across
   all public interior pages. `position: sticky` keeps the bar in normal flow
   (no content jump, unlike `fixed`) and its existing z-index:40 + white
   background carry over unchanged, so nothing is redesigned. The homepage is
   excluded — it keeps its own scroll behavior (HomeStickyZip) so it stays
   exactly as-is. Mobile (<1024) is untouched. --- */
@media (min-width: 1024px) {
  .site-nav { position: sticky; top: 0; }
  .home-page .site-nav { position: relative; top: auto; }
  /* Texas Rates page uses the homepage's scroll behavior instead (the compact
     HomeStickyZip bar slides in on scroll), so its main nav scrolls away like the
     homepage rather than pinning — otherwise the pinned nav and the sticky ZIP bar
     would stack. The nav content/links/drawer are unchanged; only the pinning is
     dropped. Anchor offset (scroll-padding below) is kept to clear the sticky bar. */
  [data-screen-label="Texas Electricity Rates"] .site-nav { position: relative; top: auto; }
  /* Offset in-page anchor targets so they don't land beneath the pinned nav
     (nav bar is 76px). Scoped to sticky-nav pages only (not the homepage). */
  html:not(:has(.home-page)) { scroll-padding-top: 92px; }
}

/* --- Hamburger + drawer hidden on desktop --- */
.site-nav__burger { display: none; padding: 8px; border: none; background: transparent; color: var(--sn-ink); cursor: pointer; }
.site-nav__backdrop,
.site-nav__drawer { display: none; }

@media (max-width: 1023px) {
  /* Mobile: logo left, hamburger right; desktop links + phone hidden */
  .site-nav__links,
  .site-nav__phone:not(.site-nav__phone--mobile) { display: none; }
  .site-nav__burger { display: inline-flex; align-items: center; margin-left: auto; }

  .site-nav__backdrop {
    display: block; position: fixed; inset: 0; z-index: 60; background: rgba(11, 33, 71, 0.45);
  }
  .site-nav__drawer {
    display: flex; flex-direction: column;
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
    width: min(86vw, 340px); background: #fff;
    box-shadow: -8px 0 32px rgba(15, 23, 42, 0.18);
    transform: translateX(100%); transition: transform var(--dur-slow) var(--ease-out);
    padding: 16px 20px 24px; overflow-y: auto;
  }
  .site-nav__drawer.is-open { transform: translateX(0); }
  .site-nav__drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--border-muted); }
  .site-nav__drawer-head img { height: 28px; width: auto; }
  .site-nav__close { border: none; background: transparent; color: var(--sn-ink); cursor: pointer; padding: 6px; }
  .site-nav__mlist { list-style: none; margin: 0; padding: 0; }
  .site-nav__mlink {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
    padding: 14px 4px; border: none; border-bottom: 1px solid var(--border-muted); background: transparent; cursor: pointer;
    font-family: var(--font-sans); font-size: 16px; font-weight: 600; color: var(--sn-ink); text-align: left;
  }
  .site-nav__mlink:hover { color: var(--sn-navy); text-decoration: none; }
  .site-nav__mtoggle.is-open .site-nav__chev { transform: rotate(180deg); }
  .site-nav__msub { list-style: none; margin: 0; padding: 4px 0 8px 12px; }
  .site-nav__msub a { display: block; padding: 9px 4px; font-size: 15px; font-weight: 500; color: var(--fg-muted); }
  .site-nav__msub a:hover { color: var(--sn-navy); text-decoration: none; }
  .site-nav__msub a.site-nav__mviewall { color: var(--fg-brand); font-weight: 700; }
  .site-nav__phone--mobile {
    display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%;
    margin-top: 24px; padding-top: 20px; padding-left: 4px; border-top: 1px solid var(--border-muted);
    font-size: 17px; font-weight: 700; color: var(--sn-ink);
  }
  /* Phone icon in Power Texas red (text stays navy). */
  .site-nav__phone--mobile svg { color: var(--sn-red); }
}
@media (min-width: 1024px) { .site-nav__phone--mobile { display: none; } }

/* =========================================================================
   Navy-footer typography refinements (approved homepage footer), scoped to
   .footer--navy so page bodies are never touched. Values match the homepage.
   ========================================================================= */
.footer--navy .footer-col-h {
  font-family: var(--font-sans); font-size: 12px; line-height: 1; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
}
.footer--navy .footer-tagline,
.footer--navy .footer-col-list a,
.footer--navy .footer-bottom-left,
.footer--navy .footer-bottom-center,
.footer--navy .footer-bottom-center a,
.footer--navy .footer-privacy-badge {
  font-family: var(--font-sans); font-size: 14px; line-height: 1.45; font-weight: 400; letter-spacing: 0;
}
.footer--navy .footer-view-all {
  font-family: var(--font-sans); font-size: 14px; line-height: 1.45; font-weight: 600; letter-spacing: 0;
}

/* =========================================================================
   Non-clickable city items — cities in the canonical launch set whose Power
   Texas page is not built yet. Rendered as muted, non-interactive text (same
   box/typography as the sibling links) instead of dead links. Built cities
   remain real links. Mirrors the city-directory built-vs-unbuilt pattern.
   ========================================================================= */
.site-nav__dropdown .site-nav__static {
  display: block; padding: 9px 12px; border-radius: var(--radius-sm);
  font-family: var(--font-sans); font-size: 14px; font-weight: 500; line-height: 1.45;
  color: var(--fg-muted); white-space: nowrap; cursor: default;
}
.site-nav__msub .site-nav__static {
  display: block; padding: 9px 4px;
  font-family: var(--font-sans); font-size: 15px; font-weight: 500; line-height: 1.45;
  color: var(--fg-muted); cursor: default;
}
.footer--navy .footer-col-list .footer-static {
  font-family: var(--font-sans); font-size: 14px; line-height: 1.45; font-weight: 400; letter-spacing: 0;
  color: rgba(200, 214, 236, 0.42); cursor: default;
}