/* ===================================================================
   header.css — Grid-only header with left hamburger + page title
   =================================================================== */

/* Root tokens (adjust to your theme if you like) */
:root {
  --header-h: 70px; /*56px;*/
  --bg-header: #0f172a;       /* slate-900-ish */
  --fg-header: #ffffff;
  --fg-muted: rgba(255,255,255,0.7);
  --accent: #e67e00;          /* subtle orange (matches your other UI bits) */
  --drawer-w: 380px;
  --overlay-bg: rgba(0,0,0,0.5);
  --focus: 3px solid #e67e00;
}

html, body { margin: 0 !important; padding: 0 !important; }

/* Header shell */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--header-h);
  background: var(--bg-header);
  color: var(--fg-header);
}

/* Grid layout for header content (hamburger | title | right-slot) */
.header-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 0px 12px;
}

/* Hamburger button */
.hamburger {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  border-radius: 10px;
}
.hamburger:focus-visible {
  outline: var(--focus);
}
.hamburger-icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

/* Page title (kept close to hamburger, truncates gracefully) */
.page-title {
  text-align: center;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  line-height: 1.25;                 /* give descenders room */
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;

  /* prevent vertical clipping while still truncating horizontally */
  overflow-x: hidden;
  overflow-y: visible;

  /* tiny nudge so glyphs like g, p, y never touch the edge */
  padding-block: 2px 3px;
}



/* Right area placeholder */
.header-right {
  width: 40px; /* visually balances the layout for now */
  height: 40px;
}

/* Overlay (click to close) */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  backdrop-filter: blur(2px);
  z-index: 999;
  opacity: 0;
  transition: opacity 160ms ease;
}

/* Drawer */
.nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--drawer-w);
  height: 100dvh;
  background: #111827; /* slate-800 */
  color: var(--fg-header);
  z-index: 1000;
  transform: translateX(-100%);
  transition: transform 200ms ease;
  display: grid;
  align-content: start;
  padding-top: var(--header-h);
  box-shadow: 2px 0 12px rgba(0,0,0,0.3);
}

/* Open state is toggled by JS via [data-open] on body */
body.nav-open .nav-overlay {
  opacity: 1;
}
body.nav-open #siteNav {
  transform: translateX(0);
}

/* Hide/show through [hidden] attribute with smoothness preserved */
[hidden] { display: none !important; }

/* List */
.nav-list {
  list-style: none;
  margin: 0;
  padding: 12px;
  display: grid;
  gap: 4px;
}
.nav-list a {
  display: block;
  padding: 12px 14px;
  border-radius: 10px;
  color: #e5e7eb; /* slate-200 */
  text-decoration: none;
  font-weight: 500;
}
.nav-list a:hover {
  background: #1f2937; /* slate-700 */
  color: #fff;
}
.nav-list a:focus-visible {
  outline: var(--focus);
}

/* Reduced motion friendly */
@media (prefers-reduced-motion: reduce) {
  .nav-overlay,
  .nav-drawer {
    transition: none !important;
  }
}


/* ================ Responsive column layout ================ */
@media (max-width: 1300px) {
	:root {
		--header-h: 110px !Important;
	}
	.hamburger-icon {width: 46px !Important; height: 46px !Important;}
	.page-title {
		font-size: 2.6rem !Important;
	}
	.nav-list a {
		font-size: 2.6rem !Important;
		line-height: 3.6rem !Important;
	}

}