/* =======================
   base.css (clean + no unasked visual changes)
   ======================= */

/* Global */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
  font-family: 'Segoe UI', sans-serif;
  background-color: #f5f5f5;
  color: #333;
}

/* =======================
   Navbar
   ======================= */
.navbar {
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 1rem 0;                 /* keep your original bar height */
}

/* Center container */
.nav-wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: center;         /* center menu on desktop */
}

/* === Logo: keep your original size/pos === */
.logo {
  position: absolute;
  top: -10px;
  left: 1px;
  z-index: 10;
}
.logo-img {
  height: 150px;                   /* unchanged */
  width: auto;
}

/* Base menu list */
#siteMenu,
.nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Base link look (no orange hover) */
#siteMenu a,
.nav-links a {
  display: block;
  color: #333;
  font-weight: bold;
  font-size: 1.1rem;
  text-decoration: none;
  padding: .25rem .75rem;          /* link padding controls perceived bar height */
  line-height: 1.3;
}
#siteMenu a:hover,
.nav-links a:hover {
  color: inherit;                   /* no color change on hover */
}

/* =======================
   Hamburger (mobile)
   ======================= */
.menu-toggle-site {
  position: absolute;
  top: 12px;
  right: 16px;
  width: 36px;
  height: 28px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: none;                    /* shown only on mobile */
  z-index: 1002;                    /* above navbar content */
}
.menu-toggle-site span {
  display: block;
  height: 3px;
  margin: 6px 0;
  background: #333;                 /* dark bars for light header */
  border-radius: 2px;
}

/* Backdrop for mobile menu */
#siteBackdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 1001;
  opacity: 0;
  display: none;                    /* JS toggles display + .show */
  pointer-events: none;
  transition: opacity .18s ease;
}
#siteBackdrop.show{ opacity: 1; pointer-events: auto; }

/* =======================
   Desktop (>= 993px)
   ======================= */
@media (min-width: 993px){
  /* Horizontal, centered menu with spacing between items */
  #siteMenu,
  .nav-links{
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center;
    gap: 3rem;                      /* spacing between words; adjust if needed */
    position: static !important;    /* not floating */
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Hide hamburger on desktop */
  .menu-toggle-site{ display: none !important; }
}

/* =======================
   Mobile (<= 992px)
   ======================= */
@media (max-width: 992px){
  .menu-toggle-site{ display: block; }

  /* dropdown panel — use FIXED so it sits above all page content */
  #siteMenu{
    display: none;                  /* hidden by default; JS adds .open */
    position: fixed;
    top: 64px;                      /* approx navbar height; tweak if needed */
    right: 16px;
    width: min(80vw, 260px);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
    padding: 12px 14px;
    flex-direction: column;
    gap: 6px;
    transform: translateY(-6px);
    opacity: 0;
    transition: transform .18s ease, opacity .18s ease;
    z-index: 2000;                  /* above backdrop and any page hero */
    pointer-events: auto;
  }
  #siteMenu.open{
    display: flex;
    transform: translateY(0);
    opacity: 1;
  }

  /* prevent page scroll while menu is open */
  body.nav-open{
    overflow: hidden;
    touch-action: none;
  }
}

/* =======================
   Ensure page sections never sit above the menu
   (prevents untappable links on About/Services/Blog)
   ======================= */
.hero, .featured-banner, .page-hero, .banner, .cover,
.hero::before, .hero::after,
.featured-banner::before, .featured-banner::after,
main, .content {
  position: relative;
  z-index: 0;                       /* keep these below menu/backdrop */
}

/* =======================
   Home inverse (white links over hero)
   ======================= */
.navbar.navbar--inverse{ background: transparent; }
.navbar.navbar--inverse #siteMenu a{ color: #fff !important; }

/* =======================
   Site-wide typography (match index.css look)
   ======================= */

/* Base text */
body {
  font-size: 1rem;             /* same as index paragraphs */
  line-height: 1.6;
}

/* Headings */
h1 {
  font-size: 3rem;             /* same as .hero h1 on desktop */
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: 1rem;
}
h2 {
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 1.3;
  margin-bottom: 1rem;
}
h3 {
  font-size: 1.6rem;
  font-weight: bold;
  margin-bottom: 0.75rem;
}
h4, h5, h6 {
  font-weight: bold;
  margin-bottom: 0.5rem;
}

/* Paragraphs */
p {
  font-size: 1.25rem;          /* matches index hero/body text */
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

/* Links */
a {
  color: inherit;
  text-decoration: none;
  font-weight: bold;
}
a:hover {
  text-decoration: underline;
  color: #e67300;              /* keep hover from index */
}

/* Responsive tweaks to mirror index.css */
@media (max-width: 768px) {
  h1 { font-size: 2rem; }
  p  { font-size: 1rem; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  h1 { font-size: 2.5rem; }
  p  { font-size: 1.15rem; }
}

/* === Mobile menu tap fix (non-destructive) === */
@media (max-width: 992px) {
  /* Keep the header and toggle on top */
  .navbar { position: sticky; top: 0; z-index: 9999 !important; }
  .nav-wrapper { position: relative; z-index: 9999 !important; }
  .menu-toggle-site { position: relative; z-index: 10000 !important; }

  /* Ensure the dropdown panel renders above page heroes/overlays */
  #siteMenu,
  .nav-links {
    position: absolute;            /* stays anchored to the navbar */
    top: calc(100% + 6px);         /* drop just below the bar */
    right: 16px;
    z-index: 10001 !important;     /* higher than anything below the header */
  }

  /* If your menu is a column on mobile, this won’t change visuals */
  #siteMenu.open,
  .nav-links.open { display: flex; flex-direction: column; }

  /* Common culprits: page banners with big z-index stacking above the menu.
     Lower them only on mobile so taps reach the dropdown. */
  .hero, .featured-banner, .page-hero, .banner, .cover,
  .hero::before, .hero::after,
  .featured-banner::before, .featured-banner::after {
    position: relative;
    z-index: 0 !important;
  }
}

/* Safety: make menu links solid tap targets without changing style */
#siteMenu a,
.nav-links a {
  position: relative;
  display: block;
  padding: .5rem .75rem;           /* keeps your current look */
  line-height: 1.3;
  pointer-events: auto;            /* explicit, in case of odd inheritance */
}

/* === Fix: keep hamburger pinned to the right on ALL pages (mobile only) === */
@media (max-width: 992px) {
  /* ensure the absolute anchor exists */
  .nav-wrapper { position: relative; }

  /* some pages are overriding position/margins; force correct placement */
  .menu-toggle-site {
    position: absolute !important;
    right: 16px !important;
    left: auto !important;
    margin: 0 !important;

    /* vertically center within the bar, regardless of its height */
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  /* keep the dropdown aligned under the button */
  #siteMenu {
    right: 16px !important;
    left: auto !important;
  }
}

/* === Mobile navbar thickness & perfect centering === */
:root {
  /* tweak this value to taste (56–64px works well) */
  --nav-h-mobile: 18px;
}

@media (max-width: 992px) {
  .navbar,
  .nav-wrapper {
    min-height: var(--nav-h-mobile);
  }

  /* keep the button centered vertically regardless of bar height */
  .menu-toggle-site {
    height: 28px;                 /* your current hamburger height */
    top: 50%;
    transform: translateY(-50%);
    right: 16px;                  /* stays pinned to the right */
  }

  /* optional: small line spacing inside the icon */
  .menu-toggle-site span { margin: 5px 0; }
}

/* === Desktop navbar thickness controls === */
:root{
  /* adjust these to taste */
  --nav-pad-y-desktop: 0.5rem;      /* was 1rem */
  --nav-link-pad-y-desktop: 0.25rem;/* was .25rem already; lower to thin more */
}

@media (min-width: 993px) {
  /* 1) overall bar height */
  header.navbar {
    padding: var(--nav-pad-y-desktop) 0;
  }

  /* 2) space around each link (affects perceived height) */
  #siteMenu a,
  .nav-links a {
    padding: var(--nav-link-pad-y-desktop) .75rem;
    line-height: 1.2;               /* optional: keeps links compact */
  }
}

/* === Uniform mobile navbar height across ALL pages === */
:root { --nav-h-mobile: 50px; }  /* tweak to 60/64 if you want thicker */

@media (max-width: 992px) {
  /* Force a consistent bar height and vertical centering */
  header.navbar[data-desktop-bp] {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: var(--nav-h-mobile) !important;
    display: flex;
    align-items: center;
  }
  header.navbar[data-desktop-bp] .nav-wrapper {
    min-height: var(--nav-h-mobile) !important;
    display: flex;
    align-items: center;
    position: relative; /* anchor for the absolute toggle */
  }
  /* Toggle pinned right & centered */
  header.navbar[data-desktop-bp] .menu-toggle-site {
    position: absolute !important;
    right: 16px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    height: 28px;
    margin: 0 !important;
  }
  /* Keep dropdown aligned under the button */
  header.navbar[data-desktop-bp] #siteMenu {
    right: 16px !important;
    left: auto !important;
  }
}