/* ====== Theme (uses global tokens) ====== */
:root{
  --bg:#ffffff; --bg-alt:#f8f8f6; --card:#ffffff;
  --ink:#191917; --ink-strong:#101010; --ink-muted:#666;
  --accent:#98cb32; --accent-2:#3b4b1b;
  --line:#e6e6e6; --shadow:0 12px 28px rgba(0,0,0,.08);
  --radius:12px;
}
html[data-theme="dark"]{
  --bg:#0f1113; --bg-alt:#13161a; --card:#0f1113;
  --ink:#e9ecef; --ink-strong:#ffffff; --ink-muted:#b0b3b8;
  --line:#262b30; --shadow:0 12px 28px rgba(0,0,0,.45);
}

/* ====== Global overflow guard (fix side white space) ====== */
html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;        /* ✅ kill horizontal scroll/white gap */
}
*{ box-sizing:border-box }
img, video, iframe{ max-width:100%; height:auto }  /* ✅ prevent wide child overflow */

/* ====== Header base ====== */
.header{
  position:sticky; top:0; z-index:1000;
  background:var(--card);
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(1.2) blur(3px)
}
.header-container{
  max-width:1200px; margin:0 auto;
  padding:14px 20px; display:flex; align-items:center; justify-content:space-between
}
.logo{display:flex;align-items:center;text-decoration:none}
.logo.small img{height:36px}
.brand-logo{height:44px;width:auto;display:block}
.logo-dark{ display:none }                       /* default light */
html[data-theme="dark"] .logo-light{ display:none }
html[data-theme="dark"] .logo-dark{ display:block }

/* desktop primary nav */
.nav-desktop{display:flex;align-items:center;gap:28px}
.btnlink{background:none;border:0;padding:0;margin:0;cursor:pointer;font:inherit;color:inherit;display:inline-flex;align-items:center;gap:6px}
.nav-link{font-weight:700;color:var(--ink);text-decoration:none}
.nav-item{position:relative;display:flex;align-items:center;gap:6px}
.nav-item:hover>.nav-link{color:var(--accent)}
.dropdown-arrow{width:12px;height:12px;transition:.2s;fill:currentColor;color:var(--ink)}
.nav-item:hover .dropdown-arrow{transform:rotate(180deg)}

.header-actions{display:flex;align-items:center;gap:12px}
.icon-btn{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:var(--card);cursor:pointer;display:grid;place-items:center;color:var(--ink)}
.icon-btn svg{width:18px;height:18px;fill:none}
.book-btn{background:var(--accent);color:#fff;border-radius:10px;padding:10px 16px;font-weight:700;text-decoration:none;border:1px solid transparent}
.book-btn:hover{background:var(--accent-2)}
.mobile-menu-btn{display:none;background:none;border:0;cursor:pointer;padding:6px}
.hamburger-icon{width:26px;height:26px;color:var(--ink)}

/* Simple dropdown */
.dropdown.menu{
  position:absolute;top:calc(100% + 14px);left:0;background:var(--card);
  border:1px solid var(--line);box-shadow:var(--shadow);border-radius:12px;
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:.2s;min-width:240px;overflow:hidden
}
.nav-item:hover>.dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown-item{display:block;padding:12px 14px;border-bottom:1px solid var(--bg-alt);color:var(--ink);text-decoration:none}
.dropdown-item:last-child{border-bottom:0}
.dropdown-item:hover{background:var(--bg-alt);color:var(--accent)}

/* MEGA menu (Services) */
.mega-holder .dropdown.mega{min-width:780px}
.dropdown.mega{
  position:absolute;top:calc(100% + 14px);left:0;background:var(--card);
  border:1px solid var(--line);box-shadow:var(--shadow);border-radius:14px;
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:.2s
}
.mega-holder:hover .dropdown.mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega-wrap{display:grid;grid-template-columns:260px 1fr;min-height:260px}

/* Left column */
.mega-left{border-right:1px solid var(--line);background:var(--bg-alt);padding:8px}
.mega-link {width:100%;text-align:left;background:transparent;border:0;padding:12px 14px;border-radius:10px;font-weight:700;color:var(--ink);cursor:pointer}
.mega-link.active,.mega-link:hover{background:linear-gradient(90deg, rgba(152,203,50,.15), transparent 80%);color:var(--accent-2);outline:2px solid rgba(152,203,50,.25)}

/* Right panels */
.mega-right{padding:10px 8px}
.mega-panel{display:none;gap:8px;grid-template-columns:repeat(2,minmax(240px,1fr))}
.mega-panel.active{display:grid}
.panel-item{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:10px;text-decoration:none;color:var(--ink);border:1px solid var(--line);background:var(--card)}
.panel-item:hover{border-color:var(--accent);box-shadow:0 8px 20px rgba(152,203,50,.18)}
.panel-item::before{content:"▸";opacity:.6}

/* Mobile sidebar (drawer) */
.mobile-sidebar{
  position:fixed;top:0;left:-320px;width:320px;height:100vh;background:var(--card);
  box-shadow:2px 0 16px rgba(0,0,0,.15);transition:left .3s;z-index:1200;overflow-y:auto;border-right:1px solid var(--line)
}
.mobile-sidebar.open{left:0}
.sidebar-header{padding:12px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.close-btn{background:none;border:0;cursor:pointer}
.close-icon{width:22px;height:22px}
.sidebar-nav{padding:4px 0 20px}
.sidebar-item{width:100%;text-align:left;background:none;border:0;display:block;padding:14px 18px;font-weight:700;color:var(--ink);cursor:pointer}
.sidebar-item:hover{background:var(--bg-alt)}
.has-sub::after{content:"▸";float:right;opacity:.7}
.sidebar-item.open::after{content:"▾"}
.sidebar-dropdown{display:none;background:var(--bg-alt)}
.sidebar-dropdown.open{display:block}
.sidebar-dropdown-item{display:block;padding:12px 34px;color:var(--accent);text-decoration:none}
.sidebar-dropdown-item:hover{background:#eaeaea}

/* Overlay */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;visibility:hidden;transition:.3s;z-index:1100}
.overlay.active{opacity:1;visibility:visible}

/* ===== Modern bottom nav (floating glass pill) ===== */
.bottom-nav{
  position:fixed;
  inset-block-end:12px;        /* bottom:12px */
  inset-inline:12px;           /* ✅ side padding; avoids overflow on tiny screens */
  z-index:1050; display:flex; gap:8px; justify-content:space-between;
  padding:8px;
  background: color-mix(in oklab, var(--card) 70%, transparent);
  border:1px solid color-mix(in oklab, var(--line) 70%, transparent);
  border-radius:16px;
  box-shadow: 0 14px 36px rgba(0,0,0,.12);
  backdrop-filter: saturate(1.15) blur(14px);
  -webkit-backdrop-filter: saturate(1.15) blur(14px);
  transform: translateY(120%);       /* hidden by default on desktop */
  transition: transform .25s ease;
  padding-left: calc(env(safe-area-inset-left,0) + 8px);
  padding-right: calc(env(safe-area-inset-right,0) + 8px);
  padding-bottom: calc(env(safe-area-inset-bottom,0) + 8px);
  will-change: transform;            /* ✅ smoother hide/show */
}
.bottom-nav .btab{
  flex:1; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; padding:10px 6px; border-radius:12px;
  color:var(--ink); text-decoration:none; font-weight:700; font-size:.8rem;
  background: transparent; border:0; cursor:pointer;
  transition: background .18s ease, color .18s ease, transform .12s ease;
}
.bottom-nav .btab svg{display:block;}
.bottom-nav .btab .label{opacity:.9; letter-spacing:.1px}
.bottom-nav .btab.active{
  color:var(--accent);
  background: color-mix(in oklab, var(--accent) 14%, transparent);
  box-shadow: 0 6px 18px rgba(152,203,50,.18) inset;
}
.bottom-nav .btab:active{ transform: translateY(1px); }

/* Theme toggle icon swap */
#bottomThemeToggle .icon-moon{ display:none; }
html[data-theme="dark"] #bottomThemeToggle .icon-sun{ display:none; }
html[data-theme="dark"] #bottomThemeToggle .icon-moon{ display:block; }

/* ====== Responsive rules ====== */
@media (max-width: 1020px){
  .nav-desktop{display:none}
  .mobile-menu-btn{display:inline-grid}
  .book-btn{display:none}
}
@media (max-width: 820px){
  .header{display:none}          /* hide top bar on mobile */
  .bottom-nav{transform: translateY(0);}  /* show bottom bar on mobile */
}
@media (max-width: 360px){
  .bottom-nav .btab .label{ display:none; }
}