/* ============================================================
   SITE CSS — save as /assets/css/site.css
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  overflow: hidden;
  height: 100%;
}

:root {
  --bg: #f6f6f6;
  --fg: #1a1a1a;
  --accent: #555;
  --border: 1px solid rgba(0,0,0,0.08);
  --transition: 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
  --sidebar-w: 220px;
  --sidebar-bg: #f6f6f6;
}

body {
  background: var(--bg);
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  overflow: hidden;
  height: 100vh;
  display: flex;
}

/* ── SIDEBAR ─────────────────────────────────────────────── */

#sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto;
  z-index: 100;
  position: relative;
}

#sidebar-logo { padding: 28px 24px 20px; }
#sidebar-logo img { width: 70%; height: auto; }

#sidebar-nav { flex: 1; padding: 16px 0; }
#sidebar-nav a {
  display: block;
  padding: 9px 24px;
  font-family: 'Raleway', sans-serif;
  font-style: normal;
  font-size: 13px;
  color: #a7a7a7;
  text-decoration: none;
  text-transform: lowercase;
  transition: color 0.15s, background 0.15s;
}
#sidebar-nav a:hover { color: #555d62; }
#sidebar-nav a.active { color: #555d62; }

.nav-section {
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  color: #a7a7a7;
  padding: 18px 24px 6px;
  text-transform: uppercase;
}

/* ── SIDEBAR DROPDOWN ────────────────────────────────────── */

.nav-dropdown { position: relative; }

.nav-dropdown-toggle {
  display: block;
  padding: 9px 24px;
  font-family: 'Raleway', sans-serif;
  font-style: normal;
  font-size: 13px;
  color: #a7a7a7;
  text-decoration: none;
  text-transform: lowercase;
  transition: color 0.15s, background 0.15s;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.nav-dropdown-toggle:hover { color: #555d62; }
.nav-dropdown-toggle::after { content: " +"; font-size: 11px; }
.nav-dropdown-toggle.open::after { content: " \2212"; }

.nav-dropdown-menu { display: none; }
.nav-dropdown-menu.open { display: block; }
.nav-dropdown-menu a { padding-left: 36px !important; font-size: 12px !important; }

/* ── MOBILE SIDEBAR TOGGLE ───────────────────────────────── */

#sidebar-toggle {
  display: none;
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 200;
  background: var(--sidebar-bg);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
#sidebar-toggle svg { stroke: #555; fill: none; stroke-width: 1.5; }
#sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 90;
}

/* ── MAIN CONTENT AREA ───────────────────────────────────── */

#main {
  flex: 1;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

/* ── FOOTER ──────────────────────────────────────────────── */

.site-footer {
  background: var(--bg);
  padding: 15px 0 10px;
  margin: 0;
}
.site-footer .footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
}
.site-footer h5 {
  font-size: 11px;
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  color: gray;
  margin: 0;
  white-space: nowrap;
}

/* ── TABLET LANDSCAPE ────────────────────────────────────── */
@media (max-width: 1199px) and (min-width: 1025px) {
  :root { --sidebar-w: 160px; }
  #sidebar-logo { padding: 28px 20px 20px; }
  #sidebar-logo img { width: 75%; }
  #sidebar-nav a { padding: 9px 20px; font-size: 12px; }
  .nav-dropdown-toggle { padding: 9px 20px; font-size: 12px; }
  .nav-dropdown-menu a { padding-left: 30px !important; font-size: 11px !important; }
}

/* ── MOBILE HEADER (logo + hamburger, visible ≤1024px only) ─ */

#mobile-header {
  display: none; /* hidden on desktop */
}

#mobile-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  background: var(--bg);
  position: relative;
  z-index: 200;
}

#mobile-header-logo { display: block; line-height: 0; }
#mobile-header-logo img { height: auto; width: 100px; }

#mobile-header-toggle-wrap { position: relative; }

#mobile-header-toggle {
  background: none;
  border: none;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 4px;
  outline: none;
}
#mobile-header-toggle:focus { outline: none; }
#mobile-header-toggle svg { stroke: #555; fill: none; stroke-width: 1.5; }
#mobile-header-toggle:hover svg { stroke: #333; }

#mobile-nav-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: rgba(246,246,246,0.95);
  z-index: 200;
  padding: 20px 0 28px;
  min-width: 150px;
}
#mobile-nav-menu.open { display: block; }

#mobile-nav-menu a {
  display: block;
  padding: 8px 11px 8px 24px;
  font-family: 'Raleway', sans-serif;
  font-size: 12px;
  font-weight: 300;
  color: #555d62;
  text-decoration: none;
  text-transform: lowercase;
  transition: color 0.15s;
  text-align: right;
}
#mobile-nav-menu a:hover { color: #1a1a1a; }
#mobile-nav-menu a.active { color: #1a1a1a; }

#mobile-nav-menu .mobile-nav-dropdown-toggle {
  display: block;
  padding: 8px 11px 8px 24px;
  font-family: 'Raleway', sans-serif;
  font-size: 12px;
  font-weight: 300;
  color: #555d62;
  text-decoration: none;
  text-transform: lowercase;
  transition: color 0.15s;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: right;
}
#mobile-nav-menu .mobile-nav-dropdown-toggle:hover { color: #1a1a1a; }
#mobile-nav-menu .mobile-nav-dropdown-toggle::after { content: " +"; font-size: 11px; }
#mobile-nav-menu .mobile-nav-dropdown-toggle.open::after { content: " \2212"; }

#mobile-nav-menu .mobile-nav-dropdown-children { display: none; }
#mobile-nav-menu .mobile-nav-dropdown-children.open { display: block; }
#mobile-nav-menu .mobile-nav-dropdown-children a { padding-right: 11px; padding-left: 24px; font-size: 11px; }

#mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 190;
}
#mobile-nav-overlay.open { display: block; }

/* ── MOBILE RESPONSIVE ───────────────────────────────────── */
@media (max-width: 1024px) {
  body {
    overflow: auto;
    height: auto;
    flex-direction: column;
  }

  /* Hide desktop sidebar and old toggle */
  #sidebar { display: none; }
  #sidebar-toggle { display: none !important; }
  #sidebar-overlay { display: none !important; }

  /* Show mobile header — fixed at top */
  #mobile-header { display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 200; }

  #main {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 100;
  }
  .site-footer .footer-inner {
    flex-direction: column;
    text-align: center;
    gap: 4px;
  }
  .site-footer h5 { font-size: 9px; -webkit-text-size-adjust: 100%; }
}

/* ── NOSCRIPT ────────────────────────────────────────────── */

noscript {
  display: block;
  padding: 20px;
  text-align: center;
  font-size: 14px;
  color: var(--accent);
}