/* Shared centered desktop canvas. The mobile layout remains full width. */
@media (min-width: 600px) {
  body > .wp-site-blocks {
    width: min(calc(100% - 64px), 1920px);
    margin-inline: auto;
  }

  body > .wp-site-blocks .alignfull {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Match the homepage header order on desktop: logo | title | links.
   The links start after the title instead of being placed in a right-hand grid. */
@media (min-width: 1200px) {
  body.page.inner-header-legacy > .wp-site-blocks > header.wp-block-template-part > .wp-block-group > .alignfull {
    display: grid !important;
    grid-template-columns: auto minmax(220px, 25vw) minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(20px, 3vw, 56px);
  }

  body.page.inner-header-legacy > .wp-site-blocks > header .wp-block-site-logo {
    justify-self: start;
  }

  body.page.inner-header-legacy > .wp-site-blocks > header .wp-block-site-title {
    justify-self: stretch;
    text-align: center !important;
    white-space: nowrap;
  }

  body.page.inner-header-legacy > .wp-site-blocks > header nav.wp-block-navigation {
    justify-self: stretch;
    justify-content: flex-start !important;
    min-width: 0;
  }

  body.page.inner-header-legacy > .wp-site-blocks > header nav .wp-block-navigation__container {
    justify-content: flex-start !important;
    gap: clamp(12px, 1.5vw, 24px) !important;
  }
}

/* All desktop pages use the homepage's horizontal navigation. WordPress's
   responsive-menu state is reserved for screens below 1200px. */
@media (min-width: 1200px) {
  /* Keep the desktop header on one row without forcing a horizontal scroll. */
  body > .wp-site-blocks > header.wp-block-template-part > .wp-block-group > header.wp-container-3 {
    display: flex !important;
    flex-wrap: nowrap !important;
    min-width: 0;
  }

  body > .wp-site-blocks > header.wp-block-template-part > .wp-block-group > header.wp-container-3 > * {
    flex: 0 0 auto !important;
    min-width: 0;
  }

  body > .wp-site-blocks > header.wp-block-template-part > .wp-block-group > header.wp-container-3 > figure:last-child {
    flex-shrink: 0 !important;
  }

  body > .wp-site-blocks > header.wp-block-template-part nav .wp-block-navigation__responsive-container-open,
  body > .wp-site-blocks > header.wp-block-template-part nav .wp-block-navigation__responsive-container-close {
    display: none !important;
  }

  body > .wp-site-blocks > header.wp-block-template-part nav .wp-block-navigation__responsive-container {
    position: static !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: transparent !important;
    color: inherit !important;
  }

  body > .wp-site-blocks > header.wp-block-template-part nav .wp-block-navigation__responsive-close,
  body > .wp-site-blocks > header.wp-block-template-part nav .wp-block-navigation__responsive-dialog,
  body > .wp-site-blocks > header.wp-block-template-part nav .wp-block-navigation__responsive-container-content,
  body > .wp-site-blocks > header.wp-block-template-part nav .wp-block-navigation__container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 20px !important;
  }

  body > .wp-site-blocks > header.wp-block-template-part nav .wp-block-navigation__responsive-close {
    width: auto !important;
  }

  body > .wp-site-blocks > header.wp-block-template-part nav .wp-block-navigation-item {
    display: flex !important;
    flex: 0 0 auto !important;
    white-space: nowrap;
  }
}

/* Shared-home-header.js replaces the inner-page header with the homepage header.
   Restore the homepage flex structure after the generic inner-page rules above. */
@media (min-width: 1200px) {
  body.page.inner-header-legacy > .wp-site-blocks > header.wp-block-template-part > .wp-block-group > header.alignfull {
    display: flex !important;
    grid-template-columns: none !important;
    gap: initial !important;
    justify-content: space-between !important;
    position: static !important;
    top: auto !important;
  }

  body.page.inner-header-legacy > .wp-site-blocks > header.wp-block-template-part > .wp-block-group > header.alignfull nav.wp-block-navigation {
    width: auto !important;
    max-width: none !important;
    flex-shrink: 0 !important;
  }

  body.page.inner-header-legacy > .wp-site-blocks > header.wp-block-template-part > .wp-block-group > header.alignfull nav .wp-block-navigation__container {
    gap: 20px !important;
  }

  body.page.inner-header-legacy > .wp-site-blocks > header.wp-block-template-part > .wp-block-group > header.alignfull nav .wp-block-navigation-item__content {
    font-size: 20px !important;
    letter-spacing: 2px !important;
  }

  body.page.inner-header-legacy > .wp-site-blocks > header.wp-block-template-part > .wp-block-group > header.alignfull > .wp-block-group:first-child {
    box-sizing: border-box;
    padding: 0 0 0 8px !important;
    margin: 0 !important;
  }

  body.page.inner-header-legacy > .wp-site-blocks > header.wp-block-template-part > .wp-block-group {
    margin-top: 20px !important;
  }
}

/* Keep the homepage links visible as soon as the HTML/CSS is painted.
   This prevents the navigation module from making them appear late. */
@media (min-width: 1200px) {
  body:not(.page) > .wp-site-blocks > header.wp-block-template-part > .wp-block-group > header nav .wp-block-navigation__responsive-container-open {
    display: none !important;
  }

  body:not(.page) > .wp-site-blocks > header.wp-block-template-part > .wp-block-group > header nav .wp-block-navigation__responsive-container,
  body:not(.page) > .wp-site-blocks > header.wp-block-template-part > .wp-block-group > header nav .wp-block-navigation__responsive-container-content,
  body:not(.page) > .wp-site-blocks > header.wp-block-template-part > .wp-block-group > header nav .wp-block-navigation__container {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Keep the top navigation visible and fixed while scrolling on inner pages. */
@media (min-width: 1200px) {
  body.page.inner-header-legacy > .wp-site-blocks > header.wp-block-template-part > .wp-block-group > .alignfull {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--wp--preset--color--base, #f4f5ef);
  }

  /* Inner pages: logo | title | page links in one top row. */
  body.page.inner-header-legacy > .wp-site-blocks > header.wp-block-template-part > .wp-block-group > .alignfull {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(12px, 1.5vw, 28px);
    flex-wrap: nowrap !important;
  }

  body.page.inner-header-legacy > .wp-site-blocks > header .wp-block-site-logo {
    justify-self: start;
  }

  body.page.inner-header-legacy > .wp-site-blocks > header .wp-block-site-title {
    justify-self: center;
    white-space: nowrap;
  }

  body.page.inner-header-legacy > .wp-site-blocks > header nav.wp-block-navigation {
    justify-self: end;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    width: auto !important;
    max-width: 100%;
    flex-shrink: 1;
  }

  body.page.inner-header-legacy > .wp-site-blocks > header nav .wp-block-navigation__responsive-container-open,
  body.page.inner-header-legacy > .wp-site-blocks > header nav .wp-block-navigation__responsive-container-close,
  body.page.inner-header-legacy > .wp-site-blocks > header nav .wp-block-navigation-item > .wp-block-site-logo {
    display: none !important;
  }

  body.page.inner-header-legacy > .wp-site-blocks > header nav .wp-block-navigation__responsive-container {
    position: static !important;
    display: flex !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: transparent !important;
    color: inherit !important;
  }

  body.page.inner-header-legacy > .wp-site-blocks > header nav .wp-block-navigation__responsive-close,
  body.page.inner-header-legacy > .wp-site-blocks > header nav .wp-block-navigation__responsive-dialog,
  body.page.inner-header-legacy > .wp-site-blocks > header nav .wp-block-navigation__responsive-container-content {
    display: flex !important;
    align-items: center;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.page.inner-header-legacy > .wp-site-blocks > header nav .wp-block-navigation__responsive-container-content,
  body.page.inner-header-legacy > .wp-site-blocks > header nav .wp-block-navigation__container {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: clamp(8px, 1vw, 18px) !important;
  }

  body.page.inner-header-legacy > .wp-site-blocks > header nav .wp-block-navigation-item {
    display: flex !important;
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
  }

  body.page.inner-header-legacy > .wp-site-blocks > header nav .wp-block-navigation-item__content {
    font-size: clamp(12px, 1.1vw, 16px) !important;
    letter-spacing: .08em !important;
    white-space: nowrap;
  }
}

/* Final desktop override: place inner-page links directly after the title,
   matching the homepage instead of right-aligning the whole menu. */
@media (min-width: 1200px) {
  body.page.inner-header-legacy > .wp-site-blocks > header.wp-block-template-part > .wp-block-group > .alignfull {
    grid-template-columns: auto minmax(220px, 25vw) minmax(0, 1fr) !important;
    column-gap: clamp(20px, 3vw, 56px) !important;
  }

  body.page.inner-header-legacy > .wp-site-blocks > header .wp-block-site-title {
    justify-self: stretch !important;
    text-align: center !important;
  }

  body.page.inner-header-legacy > .wp-site-blocks > header nav.wp-block-navigation {
    justify-self: stretch !important;
    justify-content: flex-start !important;
    width: auto !important;
    max-width: none !important;
  }

  body.page.inner-header-legacy > .wp-site-blocks > header nav .wp-block-navigation__container {
    justify-content: flex-start !important;
    gap: clamp(12px, 1.5vw, 24px) !important;
  }
}

/*
 * The cloned WordPress header switches its menu behavior at 600px, while its
 * desktop header needs considerably more space. Keep the mobile menu through
 * 1199px so phones in landscape and tablets never inherit the 1500px desktop
 * header. The accompanying site-mobile-nav.js provides the interaction on a
 * static host such as Cloudflare Pages.
 */
@media (max-width: 1199px) {
  html.afei-menu-open,
  body.afei-menu-open {
    overflow: hidden;
  }

  body > .wp-site-blocks > header.wp-block-template-part nav.wp-block-navigation .wp-block-navigation__responsive-container-open {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
  }

  body > .wp-site-blocks > header.wp-block-template-part nav.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }

  body > .wp-site-blocks > header.wp-block-template-part nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100000 !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    overflow-y: auto !important;
    background: var(--wp--preset--color--base, #f4f5ef) !important;
    color: var(--wp--preset--color--contrast, #292929) !important;
  }

  body > .wp-site-blocks > header.wp-block-template-part nav.wp-block-navigation .wp-block-navigation__responsive-close,
  body > .wp-site-blocks > header.wp-block-template-part nav.wp-block-navigation .wp-block-navigation__responsive-dialog,
  body > .wp-site-blocks > header.wp-block-template-part nav.wp-block-navigation .wp-block-navigation__responsive-container-content {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  body > .wp-site-blocks > header.wp-block-template-part nav.wp-block-navigation .wp-block-navigation__responsive-dialog {
    box-sizing: border-box;
    min-height: 100%;
    padding: max(2rem, env(safe-area-inset-top)) max(6vw, env(safe-area-inset-right)) max(2rem, env(safe-area-inset-bottom)) max(6vw, env(safe-area-inset-left));
  }

  body > .wp-site-blocks > header.wp-block-template-part nav.wp-block-navigation .wp-block-navigation__responsive-container-close {
    position: absolute;
    top: max(1.25rem, env(safe-area-inset-top));
    right: max(1.25rem, env(safe-area-inset-right));
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
  }

  body > .wp-site-blocks > header.wp-block-template-part nav.wp-block-navigation .wp-block-navigation__responsive-container-content {
    box-sizing: border-box;
    padding-top: clamp(5.5rem, 16vh, 8rem) !important;
  }

  body > .wp-site-blocks > header.wp-block-template-part nav.wp-block-navigation .wp-block-navigation__container {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body > .wp-site-blocks > header.wp-block-template-part nav.wp-block-navigation .wp-block-navigation-item {
    display: block !important;
    width: 100%;
    margin: 0 !important;
    border-bottom: 1px solid rgba(41, 41, 41, .16);
  }

  body > .wp-site-blocks > header.wp-block-template-part nav.wp-block-navigation .wp-block-navigation-item__content {
    display: block;
    padding: 1rem 0 !important;
    font-size: clamp(1.15rem, 4vw, 1.45rem) !important;
    letter-spacing: .12em !important;
    line-height: 1.35;
  }
}

/* The contact block is the only desktop header item that cannot fit beside
   the full navigation on compact laptop widths. It remains available in the
   footer and returns to the header once there is sufficient room. */
@media (min-width: 1200px) and (max-width: 1439px) {
  .afei-header-contact {
    display: none !important;
  }
}