/* =========================
   Header (JJBD)
   ========================= */

/* --- Sizing tokens --- */
:root{
  --navH: 72px;
  --navH-scrolled: 64px;
  --logoH: 50px;
  --logoH-scrolled: 42px;
}

/* --- Bar --- */
.navbar{
  position: relative;                      /* stacking context */
  min-height: var(--navH);
  padding-block: 12px;
  transition: min-height .25s ease, padding .25s ease;
}
.navbar.scrolled{
  min-height: var(--navH-scrolled);
  padding-block: 10px;
}

/* --- 3 columns: logo | nav (centered) | CTA --- */
.nav-container{
  position: relative;                      /* for absolute children */
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: 2rem;
  display: grid;
  grid-template-columns: auto 1fr auto;    /* left | middle | right */
  align-items: center;
  gap: 1rem;
}

/* --- Logo --- */
.logo-link{ display:inline-flex; align-items:center; text-decoration:none; min-width:0; }
.logo-img{
  width:auto; height:var(--logoH); max-height:var(--logoH);
  object-fit:contain; display:block;
  transition: height .25s ease, max-width .25s ease;
}
.navbar.scrolled .logo-img{
  height:var(--logoH-scrolled);
  max-width: clamp(100px, 12vw, 150px);
}

/* --- Primary nav (center column) --- */
.nav-links{
  grid-column: 2;                          /* middle column */
  justify-self: center;                    /* center within middle column */
  display:flex; align-items:center; gap:2.2rem;
  list-style:none; margin:0; padding:0;
}
.nav-links a{
  text-decoration:none;
  color:var(--text-light);
  font-weight:600;
}
.nav-links a:hover{ color: var(--white); }
.nav-links a:focus-visible{
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* --- CTA (right column on desktop) --- */
.cta-desktop{ grid-column: 3; }
.cta-nav{
  display:inline-flex; align-items:center; gap:.4rem;
  text-decoration:none; color:var(--white);
  background:transparent; border:1px solid rgba(255,255,255,.12);
  padding:.6rem .9rem; border-radius:.75rem; font-weight:700;
}

/* --- Dropdown (desktop) --- */
.has-dropdown{
  position:relative; display:flex; align-items:center; gap:.35rem;
}

/* Make "Web Services" match others by default (no extra brightness/bold) */
.nav-links li.has-dropdown > .top-link{
  white-space:nowrap;
  color: var(--text-light);
  font-weight: 600;                        /* same as other links */
}
@media (hover:hover){
  .nav-links li.has-dropdown:hover > .top-link,
  .nav-links li.has-dropdown:focus-within > .top-link{
    color: var(--white);                   /* only brighten on hover/focus */
  }
}

/* caret button like a link */
.nav-links li.has-dropdown > .dropdown-toggle{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background:transparent; border:0; color:var(--text-light);
  font:inherit; cursor:pointer; line-height:1; padding:0;
}
.nav-links li.has-dropdown > .dropdown-toggle:hover{ color:var(--white); }
.nav-links li.has-dropdown > .dropdown-toggle:focus-visible{
  outline:2px solid var(--primary); outline-offset:2px;
}

/* Hover bridge to stop gap flicker into submenu */
.has-dropdown::after{
  content:""; position:absolute; top:100%; left:-12px; right:-12px; height:10px;
}

/* --- Desktop submenu (ROOMIER) --- */
.submenu{
  position:absolute; top:100%; margin-top:10px;
  left:50%; transform:translateX(-50%);
  min-width: 320px;                        /* wider */
  background:var(--panel);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  padding:.6rem;                            /* more breathing room */
  display:none;
  box-shadow:0 12px 28px rgba(0,0,0,0.35);
  z-index:1000;
  list-style:none; margin-inline:0;
}
.submenu li{ list-style:none; }
.submenu a{
  display:block; padding:.75rem 1rem;       /* roomier items */
  border-radius:8px;
  color:var(--text-light); text-decoration:none; font-weight:500; line-height:1.35;
}
.submenu a:hover{ background:rgba(var(--primary-rgb), .12); color:var(--white); }

/* Desktop pointer interactions */
@media (hover:hover){
  .has-dropdown:hover .submenu,
  .has-dropdown:focus-within .submenu{ display:block; }
}

/* Click/keyboard open (mobile-safe) */
.has-dropdown .dropdown-toggle[aria-expanded="true"] + .submenu{ display:block; }

/* --- Hamburger (hidden on desktop) --- */
.nav-toggle{
  grid-column: 3;                           /* right column */
  background:transparent; border:0; color:var(--text-light);
  cursor:pointer; display:none; padding:.25rem;
  width:40px; height:40px; position:relative; z-index:2000; /* above panel */
}

/* =========================
   Mobile & Tablet (≤1024px)
   ========================= */
@media (max-width: 1024px){
  .nav-container{ padding-inline:1rem; }

  /* Show burger, hide desktop CTA */
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  .cta-desktop{ display:none; }

  /* Compact panel, right-anchored under header */
  .nav-links{
    position:absolute;
    top: 100%;                               /* no header gap */
    right: 1rem; left: auto;
    margin-top: 0;
    width: min(92vw, 360px);                 /* not full width */
    max-height: calc(100vh - var(--navH) - 24px); /* small headroom prevents flicker */
    overflow-y: auto; overflow-x: hidden;
    scrollbar-gutter: stable both-edges;     /* reserve scrollbar space */
    -webkit-overflow-scrolling: touch;
    display:none;
    flex-direction:column; align-items:stretch;
    gap:0;
    background:var(--panel);
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    padding:.25rem;                           /* compact but not cramped */
    z-index:1200;
    box-shadow:0 14px 40px rgba(0,0,0,.38);
  }
  .navbar.open .nav-links{ display:flex; }

  /* Tight but readable item spacing; keep size stable on hover */
  .nav-links > li > a,
  .has-dropdown > .top-link,
  .has-dropdown > .dropdown-toggle{
    display:block; width:100%;
    padding:.7rem 1rem;
    line-height:1.25;
    box-sizing:border-box;
    border:0; outline:0;
  }

  /* Dropdown row on one line (no wrap) */
  .has-dropdown{
    width:100%;
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap: nowrap;                        /* keep caret on same line */
    gap:.25rem; min-width:0;
  }
  .has-dropdown > .top-link{ padding-right:.5rem; }
  .has-dropdown > .dropdown-toggle{ padding-left:.5rem; }

  /* Mobile submenu: more breathing room than before */
  .has-dropdown::after{ display:none; }      /* bridge not needed on mobile */
  .submenu{
    position:static; transform:none; margin:0; min-width:0;
    width:100%;
    box-shadow:none; border:0;
    padding:.25rem 0 .35rem 0; display:none;
  }
  .submenu a{ padding:.7rem 1rem; line-height:1.25; }

  .has-dropdown .dropdown-toggle[aria-expanded="true"] + .submenu{ display:block; }
}

/* --- Tablet/phone header size adjustments --- */
@media (max-width:1024px){
  :root{ --navH:64px; --logoH:42px; }
}
@media (max-width:768px){
  :root{ --navH:60px; --logoH:26px; }
}

/* ===== Header isolation from index.css ===== */

/* 1) Force grid centering (beats index.css flex) */
#navbar .nav-container{
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  justify-content: initial !important;
  align-items: center;
}

/* 2) Make "Web Services" match other items by default */
#navbar .has-dropdown > .top-link{
  color: var(--text-gray);
  font-weight: 500;         /* same as .nav-links a in index.css */
}
@media (hover:hover){
  #navbar .has-dropdown:hover > .top-link,
  #navbar .has-dropdown:focus-within > .top-link{
    color: var(--white);
  }
}

/* 3) Keep your hamburger/mobile panel visible when toggled */
@media (max-width:1024px){
  #navbar.open .nav-links{ display: flex !important; }
}

/* 4) Remove underline effect from submenu (coming from index.css .nav-links a::after) */
#navbar .submenu a::after{ content: none !important; }
@media (max-width:1024px){
  /* Disable underlines for all items inside the mobile panel */
  #navbar .nav-links a::after{ content: none !important; }
}

/* 5) Desktop submenu: roomier spacing */
@media (min-width:1025px){
  #navbar .submenu{
    min-width: 320px;
    padding: .6rem;
  }
  #navbar .submenu a{
    padding: .75rem 1rem;
    line-height: 1.35;
  }
}

/* 6) Mobile panel polish: keep "Web Services" row on ONE line & stable scroll */
@media (max-width:1024px){
  #navbar .has-dropdown{
    flex-wrap: nowrap;       /* caret stays on same line */
    gap: .25rem;
  }
  #navbar .nav-links{
    scrollbar-gutter: stable both-edges;
    overflow-y: auto;
    overflow-x: hidden;
  }
  #navbar .submenu{
    padding: .25rem 0 .35rem 0;   /* a touch more breathing room than before */
  }
  #navbar .submenu a{
    padding: .7rem 1rem;          /* not cramped */
    line-height: 1.25;
  }
}

/* === Mobile dropdown fix & isolation (put at very end of header.css) === */
@media (max-width: 1024px){
  /* Allow the submenu to wrap to the next line under the row */
  #navbar .has-dropdown{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .25rem;
    flex-wrap: wrap !important;      /* <— critical: lets submenu go to next line */
    min-width: 0;
  }

  /* Keep label + caret on the same line, submenu below */
  #navbar .has-dropdown > .top-link{
    padding: .7rem 1rem;
    flex: 1 1 auto;                  /* takes remaining space on the row */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #navbar .has-dropdown > .dropdown-toggle{
    padding: .7rem 1rem;
    flex: 0 0 auto;                  /* caret stays on the same row, right side */
  }

  /* Submenu: hidden by default, full width under the row, INSIDE the panel */
  #navbar .submenu{
    display: none;                   /* hidden until toggled */
    position: relative !important;   /* not absolute; lives inside the panel */
    left: 0 !important; right: auto !important; top: auto !important;
    transform: none !important;
    width: 100% !important;
    flex-basis: 100%;                /* new line under label/caret */
    margin: 0;
    padding: .35rem 0 .4rem 0;       /* a bit more breathing room */
    border: 0; box-shadow: none;     /* tidy in-panel look */
  }
  #navbar .has-dropdown > .dropdown-toggle[aria-expanded="true"] + .submenu{
    display: block;                  /* reveal on toggle; then it pushes items below */
  }

  /* Panel tweaks: compact, no underline effect from index.css, stable scrollbar */
  #navbar .nav-links{
    width: min(92vw, 360px);
    max-height: calc(100vh - var(--navH) - 24px);
    overflow-y: auto; overflow-x: hidden;
    scrollbar-gutter: stable both-edges;
  }
  #navbar .nav-links a::after{ content: none !important; } /* kill index.css underline in panel */
}

/* Desktop parity: "Web Services" style + roomy submenu preserved */
@media (min-width: 1025px){
  #navbar .has-dropdown > .top-link{ color: var(--text-gray); font-weight: 500; }
  #navbar .has-dropdown:hover > .top-link,
  #navbar .has-dropdown:focus-within > .top-link{ color: var(--white); }

  #navbar .submenu{
    min-width: 320px;
    padding: .6rem;
  }
  #navbar .submenu a{ padding: .75rem 1rem; line-height: 1.35; }
}

/* Stop index.css from re-laying out the header container */
#navbar .nav-container{
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  justify-content: initial !important;
  align-items: center;
}

/* Ensure open state always wins over index.css' "display:none" at small sizes */
@media (max-width: 1024px){
  #navbar.open .nav-links{ display: flex !important; }
}

/* === Compact mobile nav + submenu (no 100% width, tighter line-height) === */
@media (max-width:1024px){
  /* Keep row layout; submenu drops below */
  #navbar .has-dropdown{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;         /* submenu moves to next line */
    gap:.25rem;
    min-width:0;
  }

  /* Tighter items; don't force full width */
  #navbar .nav-links > li > a,
  #navbar .has-dropdown > .top-link,
  #navbar .has-dropdown > .dropdown-toggle{
    width:auto;             /* was 100% */
    line-height:1;          /* tighter vertical rhythm */
    padding:1rem 2rem;    /* keeps ~40–44px tap target with body font */
    box-sizing:border-box;
    border:0; outline:0;
  }

  /* Submenu appears under the row, not full width */
  #navbar .submenu{
    display:none;
    position:relative !important;
    left:auto !important; right:auto !important; top:auto !important;
    transform:none !important;
    width:auto !important;             /* was 100% */
    min-width:260px;                   /* compact box */
    margin:0 0 .25rem 1rem;            /* align with text; slight indent */
    padding:.35rem 0;                  /* tighter container padding */
    border:0; box-shadow:none;         /* in-panel look on mobile */
  }
  #navbar .has-dropdown > .dropdown-toggle[aria-expanded="true"] + .submenu{
    display:block;
  }

  /* Submenu links: compact too */
  #navbar .submenu a{
    line-height:1;                     /* tighter */
    padding:.60rem 1rem;               /* readable, not cramped */
  }

  /* Panel polish (keep from fighting with index.css) */
  #navbar .nav-links{
    width:min(92vw, 360px);
    max-height:calc(100vh - var(--navH) - 24px);
    overflow-y:auto; overflow-x:hidden;
    scrollbar-gutter:stable both-edges;
  }
  #navbar .nav-links a::after{ content:none !important; } /* kill index.css underline in panel */
  #navbar.open .nav-links{ display:flex !important; }     /* ensure open state wins */
}

/* Desktop parity (still roomy, neutral color on "Web Services") */
@media (min-width:1025px){
  #navbar .submenu{ min-width:320px; padding:.6rem; }
  #navbar .submenu a{ padding:.75rem 2rem; line-height:1.35; }
  #navbar .has-dropdown > .top-link{ color:var(--text-gray); font-weight:500; }
  #navbar .has-dropdown:hover > .top-link,
  #navbar .has-dropdown:focus-within > .top-link{ color:var(--white); }
}

/* Keep header layout from being overridden by index.css */
#navbar .nav-container{
  display:grid !important;
  grid-template-columns:auto 1fr auto;
  justify-content:initial !important;
  align-items:center;
}
/* Keep mobile panel visible when burger toggled, even if index.css loads after */
@media (max-width:1024px){
  #navbar.open .nav-links{ display:flex !important; }
  /* kill the underline effect inside the mobile panel */
  #navbar .nav-links a::after{ content:none !important; }
}

/* Kill underline effect inside desktop submenu (from index.css) */
#navbar .submenu a::after{ content:none !important; }

/* Ensure CTA hides on mobile/tablet regardless of index.css */
@media (max-width:1024px){
  .cta-desktop{ display:none !important; }
}

@media (max-width:1024px){
  #navbar.open .nav-links{ display:flex !important; }
}

@media (max-width:1024px){
  #navbar.open .nav-links{ display:flex !important; }
}