nav {
  position: sticky;   /* stays fixed at top as user scrolls */
  top: 0;
  z-index: 1000;      /* above ALL page content */

  /* Horizontal flex row: logo | links | actions | hamburger */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;

  padding: 0 7%;      /* 5% side padding matches section padding */
  height: 68px;

  /* ── LIGHT MODE: white navbar ── */
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;   /* subtle divider from page content */

  /* Powers smooth theme switch + scroll shadow animation */
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
}

/* ── Scroll shadow: JS adds .pro-nav-scrolled after 10px of scroll ── */
nav.pro-nav-scrolled {
  box-shadow: 0 2px 16px rgba(0, 0, 0, .10);
  border-bottom-color: transparent;   /* shadow replaces the border visually */
}

/* ── DARK MODE: dark navbar ── */
[data-theme="dark"] nav {
  background: #111827;
  border-bottom-color: #1f2937;
}
[data-theme="dark"] nav.pro-nav-scrolled {
  box-shadow: 0 2px 20px rgba(0, 0, 0, .5);
}


/* ================================================================
   LOGO
   ================================================================
   ALWAYS BLUE — in both light and dark mode.
   Matches your screenshot exactly: bright blue brand name.
   flex-shrink: 0 → logo never shrinks when space is tight.
================================================================ */
.nav-logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  letter-spacing: .5px;
  text-decoration: none;
  flex-shrink: 0;

  /* ── ALWAYS BLUE (light and dark mode) ── */
  color: #3b5bdb;   /* vibrant blue — matches screenshot */
}

/* "Self" part of the logo — same blue (whole logo is one color) */
.nav-logo span {
  color: #3b5bdb;   /* same blue — overrides the gold from style.css */
}

/* Optional: subtle logo icon (the ✳ in your screenshot) */
.nav-logo::before {
  content: '✳ ';
  font-size: 1.7rem;
  opacity: .85;
}


/* ================================================================
   DESKTOP NAV LINKS
   ================================================================
   LIGHT MODE: dark text (#374151) — readable on white background.
   DARK MODE:  light text (#d1d5db) — readable on dark background.

   Hover/active: blue (#3b5bdb) to match the logo color.
   Underline animation: grows from center on hover.
================================================================ */
.nav-links {
  display: flex;
  align-items: center;
  gap: 0;           /* spacing handled by link padding */
  list-style: none;
  margin: 0 auto; 
  
}

/* Individual link */
.nav-links a {
  position: relative;    /* needed for ::after underline */
  display: inline-block;
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: .2px;
  padding: .4rem .9rem;

  /* ── LIGHT MODE: dark text ── */
  color: #374151;

  transition: color .2s ease;
}

/* ── DARK MODE: light text ── */
[data-theme="dark"] .nav-links a {
  color: #d1d5db;
}

/* ── Animated underline (hidden by default) ──
   Grows from the center outward on hover and when active.
── */
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);   /* grow from center */
  width: 0;
  height: 2px;
  background: #3b5bdb;           /* blue underline matches logo */
  border-radius: 2px;
  transition: width .25s ease;
}

/* Hover: blue text + underline grows */
.nav-links a:hover {
  color: #3b5bdb;
}
.nav-links a:hover::after {
  width: 70%;
}

/* Active (current section) — set by scroll spy in navbar.js */
.nav-links a.pro-active {
  color: #3b5bdb;
  font-weight: 600;
}
.nav-links a.pro-active::after {
  width: 70%;
}


/* ================================================================
   RIGHT-SIDE ACTIONS GROUP
   ================================================================
   Wraps the toggle switch + CTA button together so they never
   separate or wrap awkwardly on medium-width screens.
================================================================ */



/* ================================================================
   THEME TOGGLE SWITCH (iOS-style)
   ================================================================
   WHAT IT LOOKS LIKE:
     A rounded pill track (grey in light mode, blue in dark mode)
     with a white circle inside that slides left ↔ right.

   HOW IT WORKS (pure CSS, no JS needed for the visual):
     The <button class="theme-toggle"> has no visible styling.
     Inside it: <span class="pro-switch-track">
                  <span class="pro-switch-thumb"></span>
                </span>

     Light mode (default):
       Track: grey (#d1d5db)
       Thumb: white circle on the LEFT

     Dark mode ([data-theme="dark"]):
       Track: blue (#3b5bdb)
       Thumb: white circle on the RIGHT (translate moves it)

   JS still calls toggleTheme() on click — same as before.
   Only the HTML inside the button changes (see index.html update).
================================================================ */
.theme-toggle {
  /* Reset button styles */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .5rem;

  /* Focus ring for keyboard accessibility */
  border-radius: 50px;
  outline: none;
}
.theme-toggle:focus-visible {
  outline: 2px solid #3b5bdb;
  outline-offset: 3px;
}

/* ── The pill-shaped track ── */
.pro-switch-track {
  display: inline-flex;
  align-items: center;
  width: 44px;        /* track width */
  height: 24px;       /* track height */
  border-radius: 50px;
  padding: 2px;
  position: relative;

  /* LIGHT MODE: grey track (switch is "off") */
  background: #9ca3af;

  /* Smooth color transition when theme changes */
  transition: background .3s ease;
}

/* DARK MODE: blue track (switch is "on") */
[data-theme="dark"] .pro-switch-track {
  background: #3b5bdb;
}

/* ── The sliding white circle ── */
.pro-switch-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);

  /* LIGHT MODE: circle sits on the LEFT */
  transform: translateX(0);

  /* Smooth slide animation */
  transition: transform .3s ease;
}

/* DARK MODE: circle slides to the RIGHT */
[data-theme="dark"] .pro-switch-thumb {
  transform: translateX(20px);   /* track width(44) - thumb width(20) - padding(2*2) = 20 */
}


/* ================================================================
   DESKTOP CTA BUTTON ("Free Consultation")
   ================================================================
   LIGHT MODE: blue background, white text — stands out on white nav.
   DARK MODE:  same blue (it always pops on dark background too).
   Hover: slightly darker blue + lift.
================================================================ */
.nav-cta {
  position: relative;
  overflow: hidden;
  background: #3b5bdb;    /* blue — matches logo */
  color: #ffffff;
  padding: .55rem 1.3rem;
  border-radius: 7px;
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}

/* Shimmer sweep on hover */
.nav-cta::after {
  content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,.25) 50%,
    transparent 100%
  );
  transform: skewX(-15deg);
  transition: left .4s ease;
}
.nav-cta:hover {
  background: #2f4ac4;   /* slightly darker blue */
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(59,91,219,.35);
}
.nav-cta:hover::after {
  left: 125%;
}
.nav-cta:focus-visible {
  outline: 2px solid #3b5bdb;
  outline-offset: 3px;
}


/* ================================================================
   HAMBURGER ICON (mobile only)
   ================================================================
   LIGHT MODE: dark bars (#374151) on white background.
   DARK MODE:  light bars (#f1f5f9) on dark background.

   When JS adds .pro-open → bars animate into ✕ shape.
================================================================ */
.hamburger {
  display: none;          /* hidden on desktop */
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  padding: .35rem;
  border-radius: 4px;
  transition: background .2s;
}
.hamburger:hover {
  background: rgba(0,0,0,.06);
}
[data-theme="dark"] .hamburger:hover {
  background: rgba(255,255,255,.1);
}

/* The three bars */
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;

  /* LIGHT MODE: dark bars */
  background: #374151;

  transition: transform .3s ease, opacity .2s ease, width .3s ease;
  transform-origin: center;
}

/* DARK MODE: light bars */
[data-theme="dark"] .hamburger span {
  background: #f1f5f9;
}

/* ✕ animation when menu is open */
.hamburger.pro-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger.pro-open span:nth-child(2) {
  opacity: 0;
  width: 0;
}
.hamburger.pro-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ================================================================
   MOBILE MENU (slide-down dropdown)
   ================================================================
   LIGHT MODE: white background, dark link text.
   DARK MODE:  dark (#111827) background, light link text.

   Animation: max-height: 0 → 400px (the max-height trick).
================================================================ */
@media (max-width: 768px) {

  /* Show hamburger, hide desktop CTA */
  .hamburger { display: flex; }
  .nav-cta   { display: none; }

  /* Transform nav-links into dropdown panel */
  .nav-links {
    position: fixed;
    top: 68px;
    left: 0;
    right: 0;
    z-index: 999;

    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;

    /* LIGHT MODE: white dropdown */
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;

    /* Slide animation */
    overflow: hidden;
    max-height: 0;
    transition: max-height .35s cubic-bezier(.4, 0, .2, 1);
  }

  /* Menu open state */
  .nav-links.pro-open {
    max-height: 400px;
  }

  /* Each link row */
  .nav-links li {
    width: 100%;
    border-bottom: 1px solid #f3f4f6;
  }

  .nav-links a {
    display: block;
    padding: .95rem 5%;
    font-size: .95rem;

    /* LIGHT MODE: dark text */
    color: #374151;

    border-left: 3px solid transparent;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
  }

  /* Hover on mobile */
  .nav-links a:hover {
    background: #f0f4ff;   /* very light blue tint */
    color: #3b5bdb;
    border-left-color: #3b5bdb;
  }

  /* Active section link on mobile */
  .nav-links a.pro-active {
    color: #3b5bdb;
    border-left-color: #3b5bdb;
    background: #f0f4ff;
    font-weight: 600;
  }

  /* No underline in mobile (use left-border instead) */
  .nav-links a::after,
  .nav-links a.pro-active::after {
    display: none;
  }

  /* ── Mobile CTA row ── */
  .pro-mobile-cta {
    padding: 1rem 5%;
    border-top: 1px solid #e5e7eb;
  }
  .pro-mobile-cta a {
    display: block !important;
    text-align: center;
    background: #3b5bdb !important;
    color: #ffffff !important;
    border-radius: 7px;
    padding: .8rem 1rem !important;
    font-weight: 600 !important;
    border-left: none !important;
    transition: background .2s ease !important;
  }
  .pro-mobile-cta a:hover {
    background: #2f4ac4 !important;
  }

  /* ── DARK MODE mobile menu ── */
  [data-theme="dark"] .nav-links {
    background: #111827;
    border-top-color: #1f2937;
    border-bottom-color: #1f2937;
  }
  [data-theme="dark"] .nav-links li {
    border-bottom-color: #1f2937;
  }
  [data-theme="dark"] .nav-links a {
    color: #d1d5db;
  }
  [data-theme="dark"] .nav-links a:hover {
    background: rgba(59,91,219,.15);
    color: #93c5fd;
    border-left-color: #93c5fd;
  }
  [data-theme="dark"] .nav-links a.pro-active {
    color: #93c5fd;
    border-left-color: #93c5fd;
    background: rgba(59,91,219,.15);
  }
  [data-theme="dark"] .pro-mobile-cta {
    border-top-color: #1f2937;
  }
}