/* ============================================
   ERT HEADER - CLEAN ARCHITECTURE
   ============================================
   1. RESET & BASE
   2. LAYOUT
   3. COMPONENTS
   4. MOBILE (< 768px)
   5. DESKTOP (>= 768px)
   6. UTILITIES
   ============================================ */

/* ============================================
   1. RESET & BASE
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

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

body {
  font-family: var(--wp--preset--font-family--aspekta, 'Aspekta', sans-serif);
  background-color: var(--wp--preset--color--contrast, black);
  color: var(--wp--preset--color--base, white);
}

/* Load Aspekta font faces explicitly (ensure front-end parity with Hugo site)
   These map to the files declared in theme.json but adding explicit @font-face
   guarantees the fonts are available early and used across all pages. */
@font-face {
  font-family: 'Aspekta';
  src: url('/wp-content/themes/ert/assets/fonts/Aspekta-200.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aspekta';
  src: url('/wp-content/themes/ert/assets/fonts/Aspekta-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aspekta';
  src: url('/wp-content/themes/ert/assets/fonts/Aspekta-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aspekta';
  src: url('/wp-content/themes/ert/assets/fonts/Aspekta-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Force Aspekta site-wide to avoid flash of wrong font on pages that
   previously fell back to a different family */
html, body {
  font-family: 'Aspekta', sans-serif !important;
}

/* Register the rest of the Aspekta weights we ship so browsers can use
   the exact weight requested by page styles (prevents synthetic weights
   or fallback fonts on some pages). Files exist in assets/fonts/*.woff2 */
@font-face { font-family: 'Aspekta'; src: url('/wp-content/themes/ert/assets/fonts/Aspekta-50.woff2') format('woff2'); font-weight: 50; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aspekta'; src: url('/wp-content/themes/ert/assets/fonts/Aspekta-100.woff2') format('woff2'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aspekta'; src: url('/wp-content/themes/ert/assets/fonts/Aspekta-150.woff2') format('woff2'); font-weight: 150; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aspekta'; src: url('/wp-content/themes/ert/assets/fonts/Aspekta-200.woff2') format('woff2'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aspekta'; src: url('/wp-content/themes/ert/assets/fonts/Aspekta-250.woff2') format('woff2'); font-weight: 250; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aspekta'; src: url('/wp-content/themes/ert/assets/fonts/Aspekta-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aspekta'; src: url('/wp-content/themes/ert/assets/fonts/Aspekta-350.woff2') format('woff2'); font-weight: 350; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aspekta'; src: url('/wp-content/themes/ert/assets/fonts/Aspekta-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aspekta'; src: url('/wp-content/themes/ert/assets/fonts/Aspekta-450.woff2') format('woff2'); font-weight: 450; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aspekta'; src: url('/wp-content/themes/ert/assets/fonts/Aspekta-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aspekta'; src: url('/wp-content/themes/ert/assets/fonts/Aspekta-550.woff2') format('woff2'); font-weight: 550; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aspekta'; src: url('/wp-content/themes/ert/assets/fonts/Aspekta-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aspekta'; src: url('/wp-content/themes/ert/assets/fonts/Aspekta-650.woff2') format('woff2'); font-weight: 650; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aspekta'; src: url('/wp-content/themes/ert/assets/fonts/Aspekta-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aspekta'; src: url('/wp-content/themes/ert/assets/fonts/Aspekta-750.woff2') format('woff2'); font-weight: 750; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aspekta'; src: url('/wp-content/themes/ert/assets/fonts/Aspekta-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aspekta'; src: url('/wp-content/themes/ert/assets/fonts/Aspekta-850.woff2') format('woff2'); font-weight: 850; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aspekta'; src: url('/wp-content/themes/ert/assets/fonts/Aspekta-900.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aspekta'; src: url('/wp-content/themes/ert/assets/fonts/Aspekta-950.woff2') format('woff2'); font-weight: 950; font-style: normal; font-display: swap; }
@font-face { font-family: 'Aspekta'; src: url('/wp-content/themes/ert/assets/fonts/Aspekta-1000.woff2') format('woff2'); font-weight: 1000; font-style: normal; font-display: swap; }

/* Remove WP admin bar gap */
#wpadminbar {
  position: fixed !important;
}

/* ============================================
   2. LAYOUT - Header Container
   ============================================ */
.header {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  min-height: 100svh;
  background-color: var(--wp--preset--color--contrast, black);
  overflow: hidden;
}

.header > video,
.header > .background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.header > .background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

.header > .navbar,
.header > .header-content-wrapper {
  margin: 0 !important;
}

/* ============================================
   3. COMPONENTS - Navbar
   ============================================ */

/* Navbar: align with Hugo header styles for pixel parity */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 60px; /* Hugo uses a fixed navbar height */
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  box-shadow: 0px 4px 6px rgba(0,0,0,0.12);
  z-index: 10000;
  display: flex;
  align-items: center;
  padding: 0 20px;
  margin: 0; /* ensure no external margin */
}

.navbar-list {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Logo */
.navbar-logo {
  height: 36px;
  width: auto;
  display: block;
}

/* Nav Links */

.navbar-list a {
  color: var(--wp--preset--color--base, #f6f6f6);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  padding: 10px 12px;
  display: block;
}

/* .navbar-list a:hover {
  background: var(--wp--preset--color--base, white);
  color: var(--wp--preset--color--contrast, black);
}
 */
/* Submenus */

/* Submenus match Hugo: full-width dropdowns under item */
.navbar-list .submenu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%); /* center under parent */
  background: var(--wp--preset--color--base, white);
  list-style: none;
  padding: 8px 0;
  margin: 0;
  min-width: 180px; /* narrow, centered dropdown like Hugo */
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  overflow: hidden;
  z-index: 10001;
}

.navbar-list .submenu a {
  color: var(--wp--preset--color--contrast, black);
  display: block;
  padding: 10px 18px;
  font-size: 0.95rem;
}

.navbar-list .submenu a:hover {
  background: #ff4a3d;
  color: var(--wp--preset--color--base, white);
}

.navbar-list li:hover > .submenu {
  display: block;
}

/* Logo placement to match Hugo: left aligned, menu items to the right */
.navbar-list-item-logo {
  margin-left: 12px;
  margin-right: auto;
}

/* Desktop menu item spacing and active/hover styles */
.desktop-menu-item {
  margin: 0 15px;
  position: relative;
  padding: 0;
  height: 60px;
  display: flex;
  align-items: center;
}

.desktop-menu-item > a {
  line-height: 1;
  padding: 12px 10px;
}

/* Highlight the parent item (orange) when hovered/active like Hugo */
.desktop-menu-item:hover > a,
.desktop-menu-item.x-active > a {
  background: #ff4a3d;
  color: #fff;
  border-radius: 4px;
}

.wp-block-navigation-item:hover {
  background-color: #ff4a3d;
  color: var(--wp--preset--color--contrast, black);
}

.desktop-menu-item:hover {
  background: transparent; /* anchors handle hover visuals */
}

.desktop-menu-item .submenu {
  display: none;
}

.desktop-menu-item:hover > .submenu {
  display: block;
}

.submenu-item a {
  display: block;
  text-decoration: none;
}

/* ============================================
   4. MOBILE (< 768px)
   ============================================ */
@media (max-width: 767px) {

  /* Navbar */
  .navbar {
    height: 50px;
    padding: 0 10px;
  }

  .navbar-list {
    height: 50px;
  }

  /* Hide desktop nav on mobile */
  .navbar-list > li:not(.mobile-menu-trigger) {
    display: none;
  }

  /* Custom Hamburger Button */
  .mobile-menu-trigger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--wp--preset--color--base, white);
    font-size: 22px;
    cursor: pointer;
    padding: 5px 10px;
    margin: 0;
  }

  /* Hamburger → X toggle */
  .mobile-menu-trigger.x-active {
    color: #ff4a3d;
  }

  /* Mobile Menu Overlay */
  .mobile-menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.98);
    z-index: 9998;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 60px 20px;
  }

  /* Show overlay when active */
  .mobile-menu-overlay.is-open {
    display: flex;
  }

  /* Mobile menu links */
  .mobile-menu-overlay a {
    color: var(--wp--preset--color--base, white);
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
    padding: 15px;
    text-align: center;
  }

  .mobile-menu-overlay a:hover {
    text-decoration: underline;
    color: #ff4a3d;
  }
}

/* ============================================
   5. DESKTOP (>= 768px)
   ============================================ */
@media (min-width: 768px) {

  /* Hide mobile elements on desktop */
  .mobile-menu-trigger,
  .mobile-menu-overlay {
    display: none !important;
  }

  /* Show desktop nav */
  .navbar-list > li {
    display: flex;
    align-items: center;
    height: 60px;
  }

  /* Nav items with arrows for submenus */
  .navbar-list > li.has-submenu > a::after {
    content: ' ▾';
    font-size: 0.8em;
  }
}

/* ============================================
   6. HEADER CONTENT (Hero Text)
   ============================================ */
.header-content-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 30px;
  margin-left: 30px;
  margin-right: 30px;
  width: auto;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
}

.header-content-flex-container {
  display: flex;
  gap: 0;
  width: auto;
}

.header-content-left {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}

.header-title-container {
  display: inline-block;
  text-align: left;
}

.header-content {
  position: absolute;
  bottom: 30px;
  left: 30px;
  right: 30px;
}

.header-title {
  font-family: 'Aspekta-600', sans-serif;
  font-size: clamp(40px, 8vw, 120px);
  line-height: 1.1;
  color: var(--wp--preset--color--base, white);
  margin: 0;
  letter-spacing: -1px;
}

.header-title-hr {
  border: none;
  border-top: 1px solid var(--wp--preset--color--base, white);
  margin: 10px 0;
  width: 100%;
}

.header-subtitle {
  /* subtitle should be a small uppercase label using the Aspekta family */
  font-family: var(--wp--preset--font-family--aspekta, 'Aspekta'), sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--wp--preset--color--base, white);
  text-transform: uppercase;
  margin: 0 0 6px 0; /* reduce spacing under subtitle */
  letter-spacing: 1px;
}

.header-text {
  font-family: 'Aspekta-200', sans-serif;
  font-size: 20px;
  color: var(--wp--preset--color--base, white);
  max-width: 60ch;
  line-height: 1.5;
}

/* ============================================
   7. UTILITIES
   ============================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Ensure main content on pages has proper spacing below header/navbar */
main.wp-block-group {
  margin-top: var(--wp--preset--spacing--60, 60px);
  padding-top: var(--wp--preset--spacing--60, 60px);
}

/* Editor adjustments */
.editor-styles-wrapper .header {
  height: auto;
  min-height: 100vh;
}

.editor-styles-wrapper .navbar {
  position: relative;
  background-color: var(--wp--preset--color--contrast, #111);
}

/* The large Hugo stylesheet block has been removed.
   We keep only the focused header / mobile menu rules above and the
   final overrides below to avoid global side-effects from importing
   the full Hugo stylesheet into the WordPress theme. If you want the
   full Hugo stylesheet re-applied, tell me and I'll import it again
   but scope it carefully. */

header.header > nav.navbar,
.wp-site-blocks header.header > .navbar,
.wp-site-blocks .wp-block-group.header > .navbar {
  height: 60px !important; /* ensure fixed navbar height */
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 20px !important;
}

.wp-site-blocks .navbar-list {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  height: 60px !important;
}

.wp-site-blocks .navbar-list > li.desktop-menu-item {
  height: 60px !important;
  display: flex !important;
  align-items: center !important;
}

/* Position dropdown relative to its parent (centered under the link) */
.wp-site-blocks .desktop-menu-item > .submenu {
  left: 50% !important;
  transform: translateX(-50%) !important;
  top: calc(100% + 6px) !important;
}

/* Ensure the logo sits left and doesn't get pushed by body padding */
.wp-site-blocks .navbar-list-item-logo {
  margin-left: 12px !important;
  margin-right: auto !important;
}

/* Final header-title override to ensure Hugo import doesn't override our desired styling */
.wp-site-blocks .header-title,
.header-title {
  font-family: var(--wp--preset--font-family--aspekta, 'Aspekta', sans-serif) !important;
  font-weight: 700 !important;
  font-size: 8vw !important;
  line-height: 8vw !important;
  margin: 0 !important;
}

/* Final subtitle override to ensure Hugo import doesn't override our desired styling */
.wp-site-blocks .header-subtitle,
.header-subtitle {
  font-family: var(--wp--preset--font-family--aspekta, 'Aspekta'), sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.95rem !important;
  margin: 0 0 6px 0 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

/* Mobile overlay final override: ensure full-viewport coverage and top stacking */
.mobile-menu-overlay.is-open {
  display: flex !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 10002 !important; /* above navbar */
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 60px 20px !important;
  background-color: rgba(0,0,0,0.98) !important;
}

/* Prevent page from scrolling when mobile menu open (optional) */
.mobile-menu-overlay.is-open ~ * {
  /* legacy selector kept for cases where overlay remains inside header - safe no-op when overlay is moved to body */
  pointer-events: none;
}

/* Add a body-level lock to prevent scroll when menu is open (handled by JS) */
body.menu-open {
  overflow: hidden !important;
  touch-action: none !important;
}

/* Ensure header doesn't clip the mobile overlay (header had overflow:hidden) */
.header {
  overflow: visible !important;
}

/* Make sure mobile overlay children don't get a white background from other rules.
   Note: do NOT force the overlay itself transparent — the overlay must keep its dark background. */
.mobile-menu-overlay * {
  background: transparent !important;
  color: var(--wp--preset--color--base, white) !important;
}

/* Ensure links remain clearly visible */
.mobile-menu-overlay a {
  background: transparent !important;
  color: var(--wp--preset--color--base, white) !important;
}

/* === Map Hugo mobile menu styles to our overlay for pixel parity === */
/* Hugo uses .mobile-menu-items; map the same visual rules to .mobile-menu-overlay */
.mobile-menu-overlay {
  /* behave like Hugo's mobile-menu-items but as a viewport overlay */
  display: none;
  position: fixed !important;
  inset: 0 !important; /* top/right/bottom/left:0 */
  width: 100vw !important;
  height: 100vh !important;
  color: #f6f6f6 !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 20px !important;
  padding: 15px 20px !important;
  font-family: 'Aspekta', sans-serif !important;
  background-color: rgba(0,0,0,0.98) !important;
  z-index: 10002 !important;
}

.mobile-menu-overlay.is-open {
  display: flex !important;
}

.mobile-menu-overlay a {
  font-family: 'Aspekta', sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: bold !important;
  color: #f6f6f6 !important;
  text-decoration: none !important;
  padding: 10px 0 !important;
  text-align: center !important;
}

/* ensure any Hugo-specific mobile rules that reference .mobile-menu-items also apply */
.mobile-menu-items, .mobile-menu-overlay {
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Add top padding to main content to account for fixed header */
main {
  margin-top: 50px;
  padding-top: 30px;
}