/**
 * Header styles
 */

/* Main header container */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: var(--spacing-md) 0;
  background-color: transparent;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

/* For pages without hero section, make header fixed with background from start */
.page:not(.home) .site-header {
  position: fixed;
  background-color: var(--color-blue);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Add padding to page content to account for fixed header */
.page:not(.home) .tst-page-wrapper {
  padding-top: 70px;
}

/* Header inner container */
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Site branding (logo) */
.site-branding {
  flex: 0 0 auto;
  position: relative;
  z-index: 2002;
}

.site-branding img,
.custom-logo {
  height:65px;
  width:auto;
  transition: height 0.3s ease;
}

/* Responsive logo size */
@media (max-width: 992px) {
  .site-branding img,
  .custom-logo {
    height: 55px;
  }
}

.site-title {
  margin: 0;
  font-size: 1.5rem;
}

.site-title a {
  color: var(--color-sky-blue);
  text-decoration: none;
}

/* Main navigation */
.main-navigation {
  flex: 1 0 auto;
  display: flex;
  justify-content: flex-end;
}

.primary-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.primary-menu li {
  position: relative;
  margin-left: var(--spacing-md);
}

.primary-menu a {
  color: var(--color-sky-blue);
  text-decoration: none;
  font-weight: 500;
  padding: var(--spacing-xs) 0;
  display: block;
  transition: color var(--transition-speed) var(--transition-timing);
}

.primary-menu a:hover,
.primary-menu .current-menu-item > a {
  color: var(--color-gold);
}


/* Sticky header styles - applied when scrolled past hero */
.site-header.sticky {
  position: fixed;
  background-color: var(--color-blue);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 2000;
}

/* Hidden sticky header - when not scrolling */
.site-header.sticky-hidden {
  transform: translateY(-100%);
  transition: transform 0.15s ease;
}

/* Ensure logo and menu toggle stay visible in sticky header mobile menu */
.site-header.sticky .site-branding,
.site-header.sticky .menu-toggle {
  position: relative;
  z-index: 2003;
}

/* Fix for mobile menu in sticky header */
@media (max-width: 992px) {
  .site-header{
    padding: var(--spacing-sm) 0;
  }
  /* Prevent sticky header from hiding when mobile menu is active */
  .site-header.sticky.mobile-menu-open {
    transform: translateY(0) !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Override sticky-hidden when mobile menu is open */
  .site-header.sticky-hidden.mobile-menu-open {
    transform: translateY(0) !important;
  }
  
  /* Mobile menu open state - ensure logo and menu toggle are visible and properly sized */
  .site-header.mobile-menu-open .site-branding,
  .site-header.mobile-menu-open .menu-toggle {
    position: fixed !important;
    z-index: 2010 !important;
    visibility: visible !important;
    opacity: 1 !important;
    transition: all 0.3s ease !important;
  }

  .site-header.mobile-menu-open .site-branding {
    top: 25px !important;
    left: 20px !important;
    transform: none !important;
  }

  .site-header.mobile-menu-open .menu-toggle {
    top: 25px !important;
    right: 20px !important;
    width: 30px !important;
    height: 30px !important;
    transform: none !important;
  }
  
  /* Ensure mobile menu overlay has lower z-index */
  .site-header.sticky .primary-menu.active {
    z-index: 1999 !important;
  }
}


/* Menu toggle button (mobile) */
.menu-toggle {
  display: none;
  background: transparent;
  border: none;
  padding: 0;
  width: 30px;
  height: 30px;
  position: relative;
  cursor: pointer;
  z-index: 2002;
}

.menu-toggle-icon,
.menu-toggle-icon::before,
.menu-toggle-icon::after {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-sky-blue);
  position: absolute;
  transition: all 0.3s ease;
}

.menu-toggle-icon {
  top: 50%;
  transform: translateY(-50%);
}

.menu-toggle-icon::before {
  content: "";
  top: -8px;
}

.menu-toggle-icon::after {
  content: "";
  bottom: -8px;
}

.menu-toggle[aria-expanded="true"] .menu-toggle-icon {
  background-color: transparent;
}

.menu-toggle[aria-expanded="true"] .menu-toggle-icon::before {
  transform: rotate(45deg) translate(1px, 8px);
  top: -8px;
}

.menu-toggle[aria-expanded="true"] .menu-toggle-icon::after {
  transform: rotate(-45deg) translate(-1px, -8px);
  bottom: -8px;
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* Responsive styles */
@media (max-width: 992px) {
  .menu-toggle {
    display: block;
  }
  
  .primary-menu-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--color-blue);
    z-index: 2001;
    padding: 80px 0 0; /* Add top padding to make room for the header/logo */
    margin: 0;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    overflow-y: auto;
  }
  
  .primary-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0;
    margin: 0 0 20px 0; /* Add bottom margin to separate from button */
  }
  
  /* Mobile menu button wrapper */
  .mobile-menu-report-button-wrapper {
    margin-top: 30px;
    margin-bottom: 30px;
    width: 100%;
    text-align: center;
    display: none; /* Hidden by default */
  }
  
  /* Show button only in mobile menu - stronger selectors */
  .primary-menu-container.active .mobile-menu-report-button-wrapper,
  .site-header.mobile-menu-open .mobile-menu-report-button-wrapper,
  body.menu-is-active .mobile-menu-report-button-wrapper,
  .main-navigation .primary-menu-container.active .mobile-menu-report-button-wrapper {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
  }
  
  /* Mobile-only styles to ensure button is visible */
  @media (max-width: 992px) {
    .primary-menu-container.active .mobile-menu-report-button-wrapper {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
    }
  }
  
  /* Hide button in desktop view - stronger selectors */
  @media (min-width: 993px) {
    .mobile-menu-report-button-wrapper,
    .primary-menu-container .mobile-menu-report-button-wrapper,
    .site-header .mobile-menu-report-button-wrapper,
    .main-navigation .mobile-menu-report-button-wrapper,
    body:not(.menu-is-active) .mobile-menu-report-button-wrapper {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
      pointer-events: none !important;
      position: absolute !important;
      left: -9999px !important;
      height: 0 !important;
      width: 0 !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      margin: 0 !important;
      padding: 0 !important;
    }
  }
  
  .primary-menu-container.active {
    display: flex;
    opacity: 1;
  }
  
  .primary-menu li {
    margin: 0;
    margin-left: 0;
    text-align: center;
  }
  
  .primary-menu a {
    padding: var(--spacing-sm) 0;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 1px;
    transition: transform 0.2s ease;
    display: inline-block;
  }
  
  .primary-menu a:hover {
    transform: scale(1.05);
  }
  
  /* When menu is active, change toggle button appearance */
  .menu-toggle[aria-expanded="true"] .menu-toggle-icon {
    background-color: transparent;
  }
  
  .menu-toggle[aria-expanded="true"] .menu-toggle-icon::before {
    transform: rotate(45deg) translate(6px, 6px);
  }
  
  .menu-toggle[aria-expanded="true"] .menu-toggle-icon::after {
    transform: rotate(-45deg) translate(5px, -5px);
  }
}