/* ---------- Base ---------- */
:root{
  --brand:#1c6fb8;      /* primary blue */
  --brand-dark:#155a93;
  --accent:#e53935;     /* red for phone */
  --text:#1f2937;       /* slate-800 */
  --muted:#6b7280;      /* gray-500 */
  --bg:#ffffff;
  --ring:rgba(28,111,184,0.35);
  --radius:999px;
  --content-max:1350px; /* overall max width for top & bottom navs */
}

* { box-sizing: border-box; }
html,body { margin:0; padding:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--text); background:var(--bg); }
a { color:inherit; text-decoration:none; }

/* Global container (used for topbar + header rows) */
.container { width:100%; max-width:var(--content-max); margin:0 auto; padding:0 16px; }

/* ---------- Top Bar ---------- */
.topbar{
  background:#fff;
  border-bottom:1px solid #eef2f7;
  font-size:14px;
}
.topbar .container{
  display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:40px;
}
.topbar-link{ color:var(--brand); font-weight:600; }
.topbar-right{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.topbar .promo{ color:#111827; font-weight:600; }
.topbar .phone{ color:var(--accent); font-weight:700; font-size:16px; }

/* ---------- Header (bottom navigation row) ---------- */
.site-header{
  position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid #ffffff; margin-bottom: 10px;
}
.site-header .container{
  display:flex; align-items:center; gap:16px; min-height:64px;
}

/* Logo */
.logo{ display:flex; align-items:center; min-width:165px; }
.logo img{ width:165px; height:auto; display:block; }

/* Mobile hamburger */
.nav-toggle{ display:none; }
.hamburger{
  margin-left:auto; width:40px; height:40px; display:flex; flex-direction:column; justify-content:center; gap:5px;
  padding:8px; border-radius:12px; cursor:pointer; border:1px solid #e5e7eb; z-index:9991;
}
.hamburger span{ display:block; height:2px; background:#111827; border-radius:2px; }

/* Mobile nav sheet (base) */
.nav{
  position:fixed; inset:0 0 auto auto; top:64px;
  transform:translateY(-110%); transition:.25s ease; background:#fff; border-bottom:1px solid #eef2f7; width:100%;
}
.nav .nav-list{
  list-style:none; margin:0; padding:12px 16px; display:flex; flex-direction:column; gap:4px;
}
.nav .nav-list > li > a,
.nav .submenu-toggle{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:12px 10px; border-radius:10px; font-weight:600;
}
.nav .nav-list > li > a:hover, .nav .submenu-toggle:hover{ background:#f8fafc; }

/* Submenus */
.has-sub{ position:relative; }
.submenu-toggle{ background:none; border:0; width:100%; text-align:left; font:inherit; color:inherit; cursor:pointer; }
.submenu{ list-style:none; margin:0; padding:0 0 8px 0; display:none; }
.has-sub.open > .submenu{ display:block; }
.submenu li a{     display: block;
    padding: 10px 10px 10px 10px;
    color: var(--muted);
    font-weight: 500;
    border-radius: 2px; }
.submenu li a:hover{ background:#ff0000; color:#ffffff; }


/* CTAs */
.cta-wrap{ display:flex; gap:10px; padding:12px 16px 16px; border-top:1px dashed #e5e7eb; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:40px; padding:0 16px; border-radius:999px; font-weight:700; border:2px solid transparent;
  outline-offset:2px; text-transform:uppercase; letter-spacing:.02em; font-size:14px;
}
.btn.primary{ background:#fff; color:#1a466f;border-color: #1a466f; }
.btn.primary:hover{ background:#1a466f; color:#ffff;border-color: #ef1b28; }

.btn.outline{ background:#ef1b28; color:#fff; border-color:#ef1b28; }
.btn.outline:hover{ background:#ffffff; color:#ef1b28; border-color:#ef1b28;  }

/* Toggle open */
.nav-toggle:checked ~ .nav{ transform:translateY(0); }

/* --- Make mobile sheet sit under topbar+header --- */
:root{ --topbar-h:40px; --header-h:64px; }
.topbar .container{ min-height:var(--topbar-h); }
.site-header .container{ min-height:var(--header-h); }
.nav{
  position:fixed; top:calc(var(--topbar-h) + var(--header-h)); left:0; right:0;
  z-index:9990; max-height:calc(100dvh - (var(--topbar-h) + var(--header-h))); overflow:auto;
  transform:translateY(-110%); transition:transform .25s ease;
}

/* Tablet/phone bar heights */
@media (max-width:600px){
  :root{ --topbar-h:32px; --header-h:52px; }
}

/* ---------- Desktop (>= 992px) ---------- */
@media (min-width: 992px){
  .hamburger{ display:none; }

  .site-header .container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    max-width: var(--content-max);
  }

  .logo{ flex:0 0 auto; }

  .nav{
    position:static;
    transform:none;
    max-height:none;
    overflow:visible;
    background:transparent;
    border:0;
    display:flex;
    align-items:center;
    margin-left:24px;
  }

  .nav .nav-list{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:18px;
    margin:0;
    padding:0;
  }

  .nav .nav-list > li > a,
  .nav .submenu-toggle{
    padding:15px 18px;
    border-radius:8px;
  }

  .cta-wrap{
    flex:0 0 auto;
    margin-left:auto;
    display:flex;
    gap:10px;
    padding:0;
    border:0;
  }

  .btn{ min-height:38px; }

  /* Hoverable submenus on desktop */
  .has-sub { position:relative; }
  .has-sub .submenu{
    position:absolute;
    top:100%; left:0;
    display:none;
    min-width:265px;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:2px;
    padding:6px;
    box-shadow:0 8px 24px rgba(0,0,0,.06);
  }
  .has-sub:hover .submenu{ display:block; }

  /* Phone larger on desktop */
  .topbar .phone{ font-size:22px; }
}

/* ---------- Mobile tweaks (≤ 600px) ---------- */
@media (max-width: 600px) {
  .site-header .container { min-height: 90px; gap: 10px; }
  .logo img { width:100px; height:auto; }

  .hamburger { width:32px; height:32px; padding:6px; gap:4px; }
  .hamburger span { height:2px; }

  .nav .nav-list > li > a, .nav .submenu-toggle { padding:10px 8px; font-size:14px; }
  .submenu li a { padding:8px 12px 8px 16px; font-size:13px; }

  .btn { min-height:34px; padding:0 12px; font-size:13px; }

  .cta-wrap { gap:8px; padding:10px 12px 14px; flex-direction:column; align-items:stretch; }
  .btn{ width:100%; }

  .topbar { font-size:12px; }
  .topbar .container { min-height:32px; gap:8px; }
  .topbar .phone{ font-size:16px; }
}

/* ---------- Keep both top & bottom navs aligned ---------- */
@media (min-width: 1400px){
  .topbar .container,
  .site-header .container{
    max-width: var(--content-max) !important;
    padding-left: 16px;
    padding-right: 16px;
  }
}