/* /assets/css/girvi-nav.css */

:root{
  --bd: rgba(255,255,255,.14);
  --shadow2: 0 14px 38px rgba(0,0,0,.45);
  --navH: 78px;
  --padX: clamp(14px, 3.2vw, 20px);
}

/* Top fixed nav */
.topnav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  height: var(--navH);
  min-height: var(--navH);
  padding: 0 var(--padX);
  background: linear-gradient(180deg, rgba(0,0,0,.60), rgba(0,0,0,.14));
  border-bottom: 1px solid rgba(255,255,255,.08);
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap: 12px;
}
@supports ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))){
  .topnav{backdrop-filter: blur(12px);-webkit-backdrop-filter: blur(12px);}
}

.brand{display:flex;align-items:center;gap:12px;min-width:200px;justify-self:start}
.brandLogo{
  width:66px;height:66px;
  border-radius:0;border:none;background:transparent;box-shadow:none;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;flex:0 0 auto;
}
.brandLogo img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  transform:scale(1.15);
  background:transparent;
  display:block;
}
.markFallback{
  width:66px;height:66px;border-radius:14px;
  background:
    radial-gradient(circle at 30% 30%, rgba(32,211,255,.50), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(255,59,212,.45), transparent 55%),
    rgba(255,255,255,.10);
  display:none;
  border:1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow2);
}
.brandText{display:flex;flex-direction:column;line-height:1.05}
.brandText b{font-size:15px;letter-spacing:.2px}
.brandText small{
  font-size:11px;color: rgba(255,255,255,.70);
  font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-top:3px;
}

.nav{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  justify-content:center;
  justify-self:center;
}
.nav a{
  opacity:.88;font-weight:800;font-size:13px;
  padding:10px 12px;border-radius:999px;
  white-space:nowrap;
  color: rgba(255,255,255,.92);
  text-decoration:none;
}
.nav a:hover{background:rgba(255,255,255,.08);opacity:1}
.pill{
  border:1px solid var(--bd);
  background:rgba(0,0,0,.18);
}

.rightControls{display:flex;align-items:center;gap:10px;justify-self:end}
.menuBtn{
  width:44px;height:44px;border-radius:999px;
  border:1px solid var(--bd);
  background:rgba(0,0,0,.18);
  display:none;
  place-items:center;
  cursor:pointer;
  user-select:none;
  font-weight:950;
  line-height:1;
  color: rgba(255,255,255,.92);
}
@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))){
  .menuBtn{backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);}
}

/* Mobile drawer */
.navDrawer{
  display:none;
  position: fixed;
  top: calc(var(--navH) + env(safe-area-inset-top, 0px));
  right: var(--padX);
  left: var(--padX);
  z-index: 60;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.58);
  box-shadow: var(--shadow2);
  padding: 10px;
}
@supports ((-webkit-backdrop-filter: blur(14px)) or (backdrop-filter: blur(14px))){
  .navDrawer{backdrop-filter: blur(14px);-webkit-backdrop-filter: blur(14px);}
}
.navDrawer a{
  display:flex;
  padding: 12px 12px;
  border-radius: 14px;
  font-weight:900;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  margin: 8px 0;
  color: rgba(255,255,255,.92);
  text-decoration:none;
}
.navDrawer a:hover{background: rgba(255,255,255,.10)}
.navMask{
  display:none;
  position:fixed;inset:0;z-index:55;
  background: rgba(0,0,0,.45);
}

/* Theme FAB (left side center) */
.themeFab{
  position: fixed;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--bd);
  background: rgba(0,0,0,.28);
  box-shadow: var(--shadow2);
  cursor: pointer;
  user-select: none;
  font-weight: 950;
  letter-spacing: .02em;
  color: rgba(255,255,255,.92);
  -webkit-tap-highlight-color: transparent;
}
.themeFab .ic{
  width: 30px; height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  font-size: 14px;
}
.themeFab .tx{ font-size: 12px; font-weight: 950; }

@media (max-width: 980px){
  :root{ --navH: 72px; }
  .brandText small{display:none}
  .brandLogo{width:56px;height:56px}
  .markFallback{width:56px;height:56px}
  .nav{display:none}
  .menuBtn{display:grid}
}
/* ==========================================================
   GIRVI NAV — LIGHT THEME OVERRIDES (FINAL)
   Put this at the VERY END of /assets/css/girvi-nav.css
========================================================== */

/* When theme is light, redefine nav tokens locally */
html[data-theme="light"]{
  --bd: rgba(60,45,40,.14);
  --shadow2: 0 12px 30px rgba(38,26,22,.12);
}

/* Top nav surface */
html[data-theme="light"] .topnav{
  background: linear-gradient(180deg, rgba(251,246,242,.94), rgba(251,246,242,.70)) !important;
  border-bottom: 1px solid rgba(60,45,40,.10) !important;
}

/* Brand subtitle */
html[data-theme="light"] .brandText small{
  color: rgba(143,107,90,.92) !important;
}

/* Normal nav links */
html[data-theme="light"] .nav a{
  color: rgba(45,36,33,.92) !important;
  opacity: 1 !important;
  background: transparent !important;
}

/* Hover (desktop) */
html[data-theme="light"] .nav a:hover{
  background: rgba(60,45,40,.06) !important;
}

/* ✅ IMPORTANT: Pill buttons must NOT remain dark */
html[data-theme="light"] .nav a.pill,
html[data-theme="light"] .pill{
  background: linear-gradient(
    135deg,
    rgba(215,154,134,.42),
    rgba(205,176,163,.32)
  ) !important;
  border: 1px solid rgba(60,45,40,.14) !important;
  color: rgba(45,36,33,.92) !important;
  box-shadow: 0 10px 22px rgba(38,26,22,.10) !important;
}

/* Pill hover */
html[data-theme="light"] .nav a.pill:hover,
html[data-theme="light"] .pill:hover{
  background: linear-gradient(
    135deg,
    rgba(215,154,134,.52),
    rgba(205,176,163,.40)
  ) !important;
}

/* Mobile menu button */
html[data-theme="light"] .menuBtn{
  background: rgba(255,255,255,.76) !important;
  border-color: rgba(60,45,40,.14) !important;
  color: rgba(45,36,33,.92) !important;
}

/* Drawer surface */
html[data-theme="light"] .navDrawer{
  background: rgba(255,255,255,.88) !important;
  border-color: rgba(60,45,40,.12) !important;
  box-shadow: 0 14px 34px rgba(38,26,22,.14) !important;
}

/* Drawer links */
html[data-theme="light"] .navDrawer a{
  color: rgba(45,36,33,.92) !important;
  background: rgba(255,255,255,.82) !important;
  border-color: rgba(60,45,40,.12) !important;
}

/* Drawer hover */
html[data-theme="light"] .navDrawer a:hover{
  background: rgba(255,255,255,.94) !important;
}

/* Drawer pill links (Login/Call Now) */
html[data-theme="light"] .navDrawer a.pill{
  background: linear-gradient(
    135deg,
    rgba(215,154,134,.42),
    rgba(205,176,163,.32)
  ) !important;
  border-color: rgba(60,45,40,.14) !important;
  color: rgba(45,36,33,.92) !important;
}