/**
 * @file
 * Site header responsive styles and sticky functionality.
 *
 * Fixes:
 * 1. Mobile header layout - logo becomes tiny, needs proper wrapping
 * 2. Sticky header functionality (inherit from Olivero)
 * 3. Modal branding on mobile
 *
 * Breakpoints align with tokens.css:
 * - --breakpoint-tablet: 900px
 * - --breakpoint-mobile: 600px
 * - --breakpoint-small:  480px
 */

/* ========================================
   Mobile Header Layout
   ======================================== */

/* Desktop: default Olivero layout */

.site-header,
.site-branding {
  min-height: 0 !important;
}

.site-branding {
  padding: 0.75rem !important;
}

.site-header__inner__container {
margin: 0 auto;
}

/* Tablet and below: Restructure header for better mobile UX */
@media (max-width: 900px) {
  /* Make header inner container use flexbox for better wrapping */
  .site-header__inner__container {
    position: relative !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem !important;
    width:100%;
  }

  /* Row 1: Logo + theme switcher + mobile menu button */
  .site-branding {
    flex: 0 0 auto;
    order: 1;
    /* No max-width - let site name fill width when it wraps to row 2 */
  }

  .site-branding__inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .site-branding__logo {
    flex-shrink: 0;
    width: 100px;
    height: auto;
  }

  .site-branding__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .site-branding__text {
    flex: 1;
    min-width: 0; /* Allow text to shrink */
  }

  /* Mobile buttons - fixed position on right */
  .mobile-buttons {
    position: absolute !important;
    top: 0.75rem !important;
    right: 1rem !important;
    display: flex !important;
    gap: 0.5rem !important;
    align-items: center !important;
    z-index: 10 !important;
  }

  /* Row 2: Site baseline (name) wraps to second line */
  .site-branding__name {
    font-size: 0.875rem !important;
    line-height: 1.3 !important;
    order: 3;
    flex: 0 0 100%;
    width: 100%;
    padding-right: 120px !important; /* Space for fixed buttons */
  }

  .site-branding__name a {
    /* Allow natural wrapping without truncation */
  }

  /* Hide sticky toggle on mobile - auto-sticky instead */
  .sticky-header-toggle {
    display: none !important;
  }
}

/* Very small mobile: Even more compact */
@media (max-width: 600px) {
  .site-header__inner__container {
    padding: 0.5rem 0.75rem !important;
  }

  .site-branding__logo {
    width: 80px;
    height: auto;
  }

  .site-branding__name {
    font-size: 0.75rem !important;
    padding-right: 100px !important; /* Adjust for smaller buttons */
  }

  .mobile-buttons {
    top: 0.5rem !important;
    right: 0.75rem !important;
    gap: 0.25rem !important;
  }
}

/* ========================================
   Smart Sticky Header Functionality
   ======================================== */

/* Default: Header scrolls normally with page */
.site-header {
  position: relative;
  z-index: 500;
  background-color: var(--color-surface);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* When sticky is activated (after scrolling past header) */
.site-header.is-sticky {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 500 !important;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--color-fg) 12%, transparent);
}

/* Account for admin toolbar */
body.toolbar-fixed .site-header.is-sticky {
  top: 39px !important;
}

body.toolbar-fixed.toolbar-horizontal.toolbar-tray-open .site-header.is-sticky {
  top: 79px !important;
}

/* Shrunk state - ultra-compact header, strip all Olivero defaults */
.site-header.is-sticky.is-shrunk {
  box-shadow: 0 2px 16px color-mix(in srgb, var(--color-fg) 18%, transparent);
}

/* Override Olivero's min-height restrictions */
.site-header.is-sticky.is-shrunk {
  min-height: 0 !important;
}

.site-header.is-sticky.is-shrunk .site-branding {
  min-height: 0 !important;
}

/* Remove ALL vertical spacing from sticky header */
.site-header.is-sticky.is-shrunk .site-header__fixable,
.site-header.is-sticky.is-shrunk .site-header__initial,
.site-header.is-sticky.is-shrunk .site-header__inner {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  width: 100%;
}

/* CRITICAL: Hide navigation menus in sticky mode - access via mobile menu button */
.site-header.is-sticky.is-shrunk .header-nav,
.site-header.is-sticky.is-shrunk .primary-nav,
.site-header.is-sticky.is-shrunk .secondary-nav,
.site-header.is-sticky.is-shrunk .region--primary-menu,
.site-header.is-sticky.is-shrunk .region--secondary-menu {
  display: none !important;
}

/* Ensure mobile menu button is visible in sticky mode */
.site-header.is-sticky.is-shrunk .mobile-buttons {
  display: flex !important;
}

/* Hide the sticky toggle button in sticky mode */
.site-header.is-sticky.is-shrunk .sticky-header-toggle {
  display: none !important;
}

.site-header.is-sticky.is-shrunk .site-header__initial {
  display: none !important;
}

.site-header.is-sticky.is-shrunk .site-header__inner__container {
  padding: 0.25rem 1rem !important;
  margin: 0 auto !important;
  gap: 0.5rem !important;
  min-height: 0 !important;
}

.site-header.is-sticky.is-shrunk .region-header,
.site-header.is-sticky.is-shrunk .site-branding {
  padding: 0 !important;
  margin: 0 !important;
}

.site-header.is-sticky.is-shrunk .site-branding__inner {
  gap: 0.5rem !important;
  padding: 0 !important;
  margin: 0 !important;
}

.site-header.is-sticky.is-shrunk .site-branding__logo {
  width: 100px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 5px !important;
}

.site-header.is-sticky.is-shrunk .site-branding__text {
  padding: 0 !important;
  margin: 0 !important;
}

/* Make site name LARGER and single line in sticky mode */
.site-header.is-sticky.is-shrunk .site-branding__name {
  font-size: 1rem !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.site-header.is-sticky.is-shrunk .site-branding__name a {
  /* Allow natural wrapping without truncation */
}

/* Compact mobile buttons */
.site-header.is-sticky.is-shrunk .mobile-buttons {
  margin: 0 !important;
  padding: 0 !important;
}

/* Compact theme toggle and mobile nav buttons */
.site-header.is-sticky.is-shrunk .theme-toggle,
.site-header.is-sticky.is-shrunk .mobile-nav-button {
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0.375rem !important;
}

.site-header.is-sticky.is-shrunk .mobile-nav-button {
  padding: 0.375rem 0.75rem !important;
}

/* Tablet and mobile: Even more compact */
@media (max-width: 900px) {
  .site-header.is-sticky.is-shrunk .site-header__inner__container {
    padding: 0.2rem 0.75rem !important;
  }

  .site-header.is-sticky.is-shrunk .site-branding__logo {
    width: 50px !important;
    height: auto !important;
    padding: 4px !important;
  }

  .site-header.is-sticky.is-shrunk .site-branding__name {
    font-size: 0.85rem !important;
  }

  .site-header.is-sticky.is-shrunk .mobile-buttons {
    gap: 0.25rem !important;
  }

  .site-header.is-sticky.is-shrunk .theme-toggle,
  .site-header.is-sticky.is-shrunk .mobile-nav-button {
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0.25rem !important;
  }

  .site-header.is-sticky.is-shrunk .mobile-nav-button {
    padding: 0.25rem 0.5rem !important;
  }
}

@media (max-width: 600px) {
  /*
   * 0.15rem/0.5rem left the shrunk logo jammed into the top-left corner with
   * ~2px of breathing room. Keep the bar compact, but give it a real gutter
   * on both axes.
   */
  .site-header.is-sticky.is-shrunk .site-header__inner__container {
    padding: 0.35rem 0.875rem !important;
  }

  /* The buttons are absolutely positioned, so they need the same gutter
     spelled out or the left and right insets stop matching. */
  .site-header.is-sticky.is-shrunk .mobile-buttons {
    top: 0.5rem !important;
    right: 0.875rem !important;
  }

  .site-header.is-sticky.is-shrunk .site-branding__logo {
    width: 40px !important;
    height: auto !important;
    padding: 3px !important;
  }

  .site-header.is-sticky.is-shrunk .site-branding__name {
    display: none !important;
  }

  .site-header.is-sticky.is-shrunk .site-branding {
    max-width: none;
  }

  .site-header.is-sticky.is-shrunk .theme-toggle,
  .site-header.is-sticky.is-shrunk .mobile-nav-button {
    min-width: 28px !important;
    min-height: 28px !important;
    padding: 0.2rem !important;
  }

  .site-header.is-sticky.is-shrunk .mobile-nav-button {
    padding: 0.2rem 0.4rem !important;
  }
}

/* ========================================
   Modal Branding on Mobile
   ======================================== */

/* Add logo to modal header on mobile for brand visibility */
@media (max-width: 900px) {
  .sse-modal__header {
    grid-template-columns: auto 1fr auto; /* logo | title | close */
    grid-template-rows: auto auto auto; /* title + meta + location */
    gap: 0.75rem;
  }

  /* Add logo before title */
  .sse-modal__header::before {
    content: '';
    display: block;
    width: 50px;
    height: auto;
    background-image: url('/sites/default/files/SIMPPS-CdT_0.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #fff;
    border-radius: 8px;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    flex-shrink: 0;
  }

  /* Adjust title position to accommodate logo */
  .sse-modal__title {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    font-size: 1.125rem;
  }

  /* Close button stays in top right */
  .sse-modal__close {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
  }

  /* Meta and location span full width below */
  .sse-modal__meta {
    grid-column: 1 / 4;
    grid-row: 2 / 3;
  }

  .sse-modal__location {
    grid-column: 1 / 4;
    grid-row: 3 / 4;
  }
}

@media (max-width: 600px) {
  .sse-modal__header::before {
    width: 32px;
    height: 32px;
  }

  .sse-modal__title {
    font-size: 1rem;
  }

  /*
   * Keep the theme toggle and the burger side by side.
   *
   * They used to stack (column-reverse), which made .mobile-buttons ~65px
   * tall. The sticky/shrunk header is only ~48px, so the toggle spilled out
   * of the header and floated over the breadcrumb band underneath it.
   * A row fits: 2 x 44px + gap < the 100px reserved by the site name's
   * padding-inline-end below.
   */
  .mobile-buttons {
    flex-direction: row;
    align-items: center;
  }

  /* Trim both buttons so the row always clears the shrunk header height. */
  .mobile-buttons .theme-toggle,
  .mobile-buttons .mobile-nav-button {
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0.375rem !important;
  }
}

/* ========================================
   Theme Switcher Responsive
   ======================================== */

/* Ensure theme toggle is visible and properly sized on mobile */
.theme-toggle {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
}

.theme-toggle__icon {
  width: 24px;
  height: 24px;
}

.theme-toggle__label {
  display: none;
}

@media (min-width: 901px) {
  .theme-toggle {
    padding: 0.5rem 1rem;
    gap: 0.5rem;
  }

  .theme-toggle__label {
    display: inline;
  }
}

/* ========================================
   Mobile Menu Button
   ======================================== */

/* Fix invisible mobile menu button - override Olivero defaults */
.mobile-nav-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  width: auto !important; /* Override Olivero's var(--sp2) */
  height: auto !important; /* Override Olivero's var(--sp2) */
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0.5rem 1rem !important;
  margin-inline-start: auto !important;
  margin-inline-end: 0 !important;
  background-color: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 4px !important;
  color: var(--color-fg) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.mobile-nav-button:hover,
.mobile-nav-button:focus {
  background-color: var(--color-elevated) !important;
  border-color: var(--color-link) !important;
}

.mobile-nav-button[aria-expanded="true"] {
  background-color: var(--color-link) !important;
  color: var(--color-bg) !important;
  border-color: var(--color-link) !important;
}

/* Button label */
.mobile-nav-button__label {
  font-size: 0.875rem;
  font-weight: 500;
  color: inherit;
}

/* Simple hamburger icon using mask for proper color inheritance */
.mobile-nav-button__icon {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
  background-color: currentColor !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='2' rx='1'/%3E%3Crect x='3' y='11' width='18' height='2' rx='1'/%3E%3Crect x='3' y='17' width='18' height='2' rx='1'/%3E%3C/svg%3E") !important;
  mask-size: contain !important;
  mask-repeat: no-repeat !important;
  mask-position: center !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='2' rx='1'/%3E%3Crect x='3' y='11' width='18' height='2' rx='1'/%3E%3Crect x='3' y='17' width='18' height='2' rx='1'/%3E%3C/svg%3E") !important;
  -webkit-mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
}

/* Close icon when expanded */
.mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='11' width='14' height='2' rx='1' transform='rotate(45 12 12)'/%3E%3Crect x='5' y='11' width='14' height='2' rx='1' transform='rotate(-45 12 12)'/%3E%3C/svg%3E") !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='11' width='14' height='2' rx='1' transform='rotate(45 12 12)'/%3E%3Crect x='5' y='11' width='14' height='2' rx='1' transform='rotate(-45 12 12)'/%3E%3C/svg%3E") !important;
}

/* Hide label on very small screens */
@media (max-width: 600px) {
  .mobile-nav-button {
    padding: 0.5rem;
  }

  .mobile-nav-button__label {
    display: none;
  }
}

/* ========================================
   Header Navigation Responsiveness
   ======================================== */

/* Prevent scroll jump when mobile nav opens */
body.is-overlay-active {
  position: fixed !important;
  width: 100% !important;
  overflow: hidden !important;
}

/* On mobile, ensure the nav overlay properly covers content */
@media (max-width: 900px) {
  .header-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 499;
  }

  .header-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    max-width: 320px;
    width: 85%;
    z-index: 501;
    overflow-y: auto;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Global off-canvas drawer — DS treatment (SSE Formation Design System).
   The theme runs in Olivero's "always mobile nav" mode, so the hamburger
   + slide-in drawer are active at ALL viewports. Olivero owns the
   open/close mechanism (aria-expanded + transform); these rules give the
   drawer the DS look: surface panel + big arrowed menu entries.
   ════════════════════════════════════════════════════════════════════ */
.header-nav {
  background-color: var(--color-surface);
  border-inline-start: 1px solid var(--color-border);
  box-shadow: var(--shadow-modal);
  overflow-x: hidden;
  /* Collapse Olivero's large off-canvas padding to a single sane inset so the
     menu links span the drawer instead of being squeezed into a column. */
  padding: 28px 32px 40px !important;
}

/* Roomier drawer on wide screens (DS: 33vw, min 360px) */
@media (min-width: 901px) {
  .header-nav {
    width: 33vw;
    min-width: 360px;
    max-width: 92vw;
  }
}

/* Force a full-width vertical list at ALL widths (override Olivero's
   horizontal desktop nav, which otherwise squeezes the drawer links into a
   narrow content-width column). Block layout guarantees children fill width. */
.header-nav .primary-nav,
.header-nav .primary-nav__menu,
.header-nav .primary-nav__menu--level-1,
.header-nav .primary-nav__menu-item,
.header-nav .primary-nav__menu-item--level-1 {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  float: none !important;
}

/* No inner padding on the menu block — the .header-nav panel provides the
   inset, so the links use the full drawer width. */
.header-nav .primary-nav {
  padding: 0 !important;
}

/* Big arrowed menu entries — full width, large type */
.header-nav .primary-nav__menu-link {
  display: flex !important;
  align-items: center;
  gap: 14px;
  width: 100% !important;
  box-sizing: border-box;
  padding: 18px 4px;
  border-block-end: 1px solid var(--color-border);
  color: var(--color-fg);
  font-size: 28px;
  font-weight: var(--font-weight-bold, 700);
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: normal;
  hyphens: none;
  text-decoration: none;
  background-image: none; /* opt out of the animated underline */
  transition: color 0.18s ease, padding-inline-start 0.18s ease;
}
.header-nav .primary-nav__menu-link-inner {
  display: inline;
  padding: 0;
  margin: 0;
  border: 0;
}
.header-nav .primary-nav__menu-link::before {
  content: "\2192";
  flex: none;
  color: var(--color-link);
  font-size: 0.72em;
  transition: transform 0.18s ease;
}
.header-nav .primary-nav__menu-link:hover,
.header-nav .primary-nav__menu-link:focus-visible,
.header-nav .primary-nav__menu-link.is-active {
  color: var(--color-link);
  padding-inline-start: 8px;
}
.header-nav .primary-nav__menu-link:hover::before,
.header-nav .primary-nav__menu-link:focus-visible::before {
  transform: translateX(5px);
}

/* Trim the drawer entries down a touch on phones — 28px reads oversized on a
   narrow screen. (The arrow ::before is 0.72em so it scales automatically.) */
@media (max-width: 600px) {
  .header-nav .primary-nav__menu-link {
    font-size: 22px;
    padding-block: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .header-nav .primary-nav__menu-link,
  .header-nav .primary-nav__menu-link::before {
    transition: none;
  }
}