/* =========================================================
   FM — Header Styles (Stabilized)
   Purpose:
   - Governed custom header for FlairMatrix
   - Desktop: classic header + mega menu
   - Mobile/Tablet: compact bar + full-screen drilldown overlay

   Notes for future maintenance:
   - Desktop starts at 1025px+
   - Mobile/Tablet runs from 0–1024px
   - Overlay header intentionally uses the symbol-only logo
   - Mobile menu uses dedicated mobile classes; do not reuse
     desktop link/item classes inside overlay rows
   ========================================================= */

/* =========================================================
   Header tokens
   ========================================================= */

:root {
  --fm-header-mobile-height: 64px;
  --fm-header-mobile-padding-x: 16px;
  --fm-header-mobile-padding-y: 12px;
  --fm-header-mobile-control-size: 44px;
  --fm-header-desktop-height: 80px;
  --fm-header-max-width: var(--wp--style--global--wide-size, 1120px);
  --fm-header-z: 100;
  --fm-header-mega-z: 200;
  --fm-header-overlay-z: 1000;
}

/* =========================================================
   Header shell
   ========================================================= */

.fm-site-header {
  width: 100%;
  border-bottom: 1px solid var(--wp--preset--color--fm-border, #e5e7eb);
  background: var(--wp--preset--color--fm-surface-base, #f7f6f3);
}

.fm-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 32px;
  max-width: var(--fm-header-max-width);
  margin: 0 auto;
  padding: 0 16px;
  min-height: var(--fm-header-mobile-height);
  position: relative;
}

/* =========================================================
   Brand
   ========================================================= */

.fm-header__brand,
.fm-mobile-overlay__brand {
  display: flex;
  align-items: center;
}

.fm-header__brand {
  min-width: 0;
}

.fm-header__brand-link,
.fm-mobile-overlay__brand-link {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
}

.fm-site-header .fm-header__brand-link:hover,
.fm-site-header .fm-header__brand-link:focus-visible,
.fm-mobile-overlay__brand-link:hover,
.fm-mobile-overlay__brand-link:focus-visible {
  text-decoration: none;
}

.fm-header__logo {
  width: 140px;
  height: auto;
  display: block;
}

/* Overlay intentionally uses the symbol-only logo. */
.fm-mobile-overlay__logo {
  width: 24px;
  height: auto;
  display: block;
}

/* =========================================================
   Desktop navigation
   ========================================================= */

.fm-header__nav {
  display: none;
  justify-self: center;
  min-width: 0;
}

.fm-header__menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.fm-header__menu-item {
  display: flex;
  align-items: center;
}

.fm-header__menu-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  white-space: nowrap;
  text-decoration: none;
  color: var(--wp--preset--color--fm-text-primary, #2e3440);
  font-weight: 500;
  position: relative;
  transition:
    color 0.18s ease,
    opacity 0.18s ease;
}

/* =========================================================
   Desktop underline system
   Applies only to the desktop header navigation.
   ========================================================= */

.fm-site-header a:focus:not(:focus-visible),
.fm-site-header button:focus:not(:focus-visible),
.fm-site-header a:active,
.fm-site-header button:active {
  outline: none;
  box-shadow: none;
}

.fm-site-header .fm-header__menu-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(0.6);
  transform-origin: center;
  transition:
    transform 0.22s ease,
    opacity 0.22s ease;
}

.fm-site-header .fm-header__menu-link:hover::after,
.fm-site-header .fm-header__menu-link:focus-visible::after {
  opacity: 0.6;
  transform: scaleX(1);
}

.fm-site-header .fm-header__menu-item--active > .fm-header__menu-link::after,
.fm-site-header .fm-header__menu-link[aria-current="page"]::after,
.fm-site-header .fm-header__menu-item.is-mega-open > .fm-header__menu-link::after {
  opacity: 0.8;
  transform: scaleX(1);
}

/* =========================================================
   Header controls
   ========================================================= */

.fm-header__controls {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 16px;
}

/* Shared base control styling.
   Keep specific sizing overrides below per control type. */
.fm-header__search-toggle,
.fm-header__mobile-toggle,
.fm-mobile-overlay__close,
.fm-mobile-menu__toggle,
.fm-mobile-menu__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--wp--preset--color--fm-text-primary, #2e3440);
  font: inherit;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
}

.fm-site-header .fm-header__search-toggle:hover,
.fm-site-header .fm-header__search-toggle:focus-visible {
  opacity: 0.75;
  text-decoration: none;
}

/* =========================================================
   Icon system
   ========================================================= */

.fm-header__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.fm-header__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.fm-header__mobile-toggle {
  min-width: var(--fm-header-mobile-control-size);
}

.fm-header__mobile-toggle .fm-header__icon {
  width: 26px;
  height: 26px;
}

.fm-mobile-overlay__close {
  width: var(--fm-header-mobile-control-size);
  height: var(--fm-header-mobile-control-size);
  min-width: var(--fm-header-mobile-control-size);
  min-height: var(--fm-header-mobile-control-size);
  flex: 0 0 auto;
}

.fm-mobile-overlay__close .fm-header__icon {
  width: 20px;
  height: 20px;
}

.fm-mobile-menu__toggle {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
}

.fm-mobile-menu__toggle .fm-header__icon {
  width: 18px;
  height: 18px;
}

.fm-header__search-toggle:hover,
.fm-header__mobile-toggle:hover,
.fm-mobile-overlay__close:hover,
.fm-mobile-menu__toggle:hover,
.fm-mobile-menu__back:hover {
  opacity: 0.75;
}

.fm-header__search-toggle:focus-visible,
.fm-header__mobile-toggle:focus-visible,
.fm-mobile-overlay__close:focus-visible,
.fm-mobile-menu__toggle:focus-visible,
.fm-mobile-menu__back:focus-visible {
  outline: 2px solid var(--wp--preset--color--fm-text-primary, #111827);
  outline-offset: 2px;
}

.fm-mobile-menu__toggle .fm-header__icon {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.fm-mobile-menu__toggle:hover .fm-header__icon {
  transform: translateX(2px);
}

.fm-mobile-menu__back .fm-header__icon {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.fm-mobile-menu__back:hover .fm-header__icon {
  transform: translateX(-2px);
}

/* =========================================================
   Mobile hamburger morph
   ========================================================= */

.fm-icon-menu svg {
  width: 26px;
  height: 26px;
}

.fm-icon-menu .fm-line {
  transition: transform 0.22s ease, opacity 0.18s ease;
  transform-origin: center;
}

.fm-header__mobile-toggle.is-active .fm-line-1 {
  transform: translateY(5px) rotate(45deg);
}

.fm-header__mobile-toggle.is-active .fm-line-2 {
  opacity: 0;
}

.fm-header__mobile-toggle.is-active .fm-line-3 {
  transform: translateY(-5px) rotate(-45deg);
}

/* =========================================================
   Screen reader
   ========================================================= */

.fm-screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   Mobile/Tablet overlay
   ========================================================= */

.fm-mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--fm-header-overlay-z);
  overflow: hidden;
  background: var(--wp--preset--color--fm-surface-base, #f7f6f3);
}

.fm-mobile-overlay[hidden] {
  display: none;
}

.fm-mobile-overlay__inner {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  background: inherit;
}

/* Important: overlay header matches live HTML.
   There is no .fm-mobile-overlay__header-inner wrapper. */
.fm-mobile-overlay__header {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: var(--fm-header-mobile-height);
  padding: 0 var(--fm-header-mobile-padding-x);
  box-sizing: border-box;
  background: var(--wp--preset--color--fm-surface-base, #f7f6f3);
  border-bottom: 1px solid var(--wp--preset--color--fm-border, #e5e7eb);
}

.fm-mobile-overlay__brand {
  flex: 0 0 auto;
  min-width: 24px;
}

.fm-mobile-overlay__menu {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 8px 16px 40px;
  background: var(--wp--preset--color--fm-surface-soft, #f2f3f1);
}

body.fm-mobile-overlay-is-open {
  overflow: hidden;
}

/* =========================================================
   Mobile menu panels
   ========================================================= */

.fm-mobile-menu {
  width: 100%;
  height: 100%;
}

.fm-mobile-menu__viewport {
  position: relative;
  width: 100%;
  min-height: 100%;
  background: transparent;
}

.fm-mobile-menu__panel,
.fm-mobile-menu__panel.is-active {
  width: 100%;
  min-height: 100%;
  background: var(--wp--preset--color--fm-surface-soft, #f2f3f1);
}

.fm-mobile-menu__panel[hidden] {
  display: none;
}

.fm-mobile-menu__panel-header {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background: transparent;
}

.fm-mobile-menu__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 40px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--wp--preset--color--fm-text-primary, #111827);
  font: inherit;
  cursor: pointer;
}

.fm-mobile-menu__back-text {
  font-size: 15px;
  line-height: 1;
}

.fm-mobile-menu__panel-title {
  font-weight: 600;
}

.fm-mobile-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: transparent;
}

.fm-mobile-menu__item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background: transparent;
}

.fm-mobile-menu__item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  background: transparent;
}

/* Mobile links intentionally wrap and own their own styling.
   Do not use desktop .fm-header__menu-link inside overlay rows. */
.fm-mobile-menu__link {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  padding: 16px 0;
  text-decoration: none;
  color: var(--wp--preset--color--fm-text-primary, #111827);
  font-weight: 500;
  white-space: normal;
  overflow-wrap: anywhere;
}

.fm-mobile-menu__link:hover,
.fm-mobile-menu__link:focus-visible,
.fm-mobile-menu__link:active {
  text-decoration: none;
}

.fm-mobile-menu__item-row:active {
  background: rgba(0, 0, 0, 0.04);
}

/* =========================================================
   Mobile search
   ========================================================= */

.fm-mobile-overlay__search {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 0;
  background: transparent;
}

.fm-mobile-search {
  position: relative;
}

.fm-mobile-search__input {
  width: 100%;
  height: 48px;
  padding: 0 56px 0 16px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  font-size: 16px;
  outline: none;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.fm-mobile-search__input::-webkit-search-cancel-button {
  display: none;
}

.fm-mobile-search__input::-ms-clear {
  display: none;
}

.fm-mobile-search__input::placeholder {
  color: #6b7280;
}

.fm-mobile-search__input:focus {
  border-color: var(--wp--preset--color--fm-text-primary, #111827);
}

.fm-mobile-search__submit {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #6b7280;
}

.fm-mobile-search__submit:hover {
  color: #111827;
}

.fm-mobile-search__submit:active {
  transform: translateY(-50%) scale(0.96);
}

/* =========================================================
   Header responsive ownership
   Mobile + Tablet: 0–1024px
   Desktop: 1025px+
   ========================================================= */

/* =========================================================
   Desktop only
   ========================================================= */

@media (min-width: 1025px) {
  .fm-header {
    min-height: var(--fm-header-desktop-height);
    column-gap: 40px;
    z-index: var(--fm-header-z);
  }

  .fm-header__logo {
    width: 172px;
  }

  .fm-header__nav {
    display: block;
  }

  .fm-header__mobile-toggle {
    display: none;
  }

  .fm-header__search-toggle {
    display: inline-flex;
  }

  .fm-header__controls {
    gap: 20px;
  }

  .fm-site-header .fm-header__menu-link {
    font-size: 0.97rem;
    font-weight: 500;
    line-height: 1.35;
  }

  .fm-mobile-overlay {
    display: none !important;
  }

  /* Mega menu shell */
  .fm-header__mega-menu-shell {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    width: 100%;
    z-index: var(--fm-header-mega-z);
    pointer-events: none;
  }

  .fm-header__mega-menu-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    border-top: 1px solid var(--wp--preset--color--fm-border, #e5e7eb);
    background: var(--wp--preset--color--fm-surface-base, #f7f6f3);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
    transition:
      opacity 0.22s ease,
      transform 0.22s ease,
      visibility 0s linear 0.22s;
  }

  .fm-header__mega-menu-panel[hidden] {
    display: block;
  }

  .fm-header__mega-menu-panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition:
      opacity 0.22s ease,
      transform 0.22s ease,
      visibility 0s linear 0s;
  }

  .fm-header__mega-menu-panel-inner {
    width: 100%;
  }

  .fm-header__mega-menu-panel--full-width {
    left: 0;
    right: 0;
  }

  .fm-header__mega-menu-panel--condensed {
    width: auto;
    min-width: 320px;
    max-width: min(640px, calc(100vw - 32px));
  }
}

/* =========================================================
   Mobile + Tablet only
   ========================================================= */

@media (max-width: 1024px) {
  .fm-header {
    grid-template-columns: auto 1fr auto;
    column-gap: 16px;
    min-height: var(--fm-header-mobile-height);
    padding-left: var(--fm-header-mobile-padding-x);
    padding-right: var(--fm-header-mobile-padding-x);
  }

  .fm-header__brand-link,
  .fm-header__mobile-toggle {
    min-height: var(--fm-header-mobile-control-size);
  }

  .fm-header__logo {
    width: 140px;
  }

  .fm-header__nav {
    display: none;
  }

  .fm-header__search-toggle {
    display: none;
  }

  .fm-header__mobile-toggle {
    display: inline-flex;
  }
}

/* =========================================================
   Reduced motion support
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .fm-header__menu-link,
  .fm-site-header .fm-header__menu-link::after,
  .fm-mobile-menu__toggle .fm-header__icon,
  .fm-mobile-menu__back .fm-header__icon,
  .fm-icon-menu .fm-line,
  .fm-header__mega-menu-panel {
    transition: none !important;
  }
}


/* =========================================================
   FlairMatrix Header — Final Hardening Layer
   Add near the end of fm-header.css
   Notes:
   - body.fm-menu-open will be toggled by JS later
   - Uses current live header selectors
   ========================================================= */

/* 1) Sticky site header */
/* Sticky ONLY for mobile + portrait */
@media (max-width: 781px) and (orientation: portrait) {
  .fm-site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
  }
}

/* Disable sticky in landscape (mobile/tablet) */
@media (max-width: 1024px) and (orientation: landscape) {
  .fm-site-header {
    position: relative;
  }
}

/* 2) Mobile overlay layering */
.fm-mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
}

.fm-mobile-overlay__inner {
  position: relative;
  z-index: 1101;
}

/* 3) Prevent background scroll when mobile menu is open
   JS layer should add/remove body.fm-menu-open */
body.fm-menu-open {
  overflow: hidden;
}

/* 4) Mobile overlay symbol/logo consistency */
.fm-mobile-overlay__brand {
  display: flex;
  align-items: center;
  min-width: 0;
}

.fm-mobile-overlay__brand-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.fm-mobile-overlay__logo {
  width: 24px;
  height: auto;
  display: block;
}

/* 5) Mobile close button tap target */
.fm-mobile-overlay__close {
  width: 44px;
  height: 44px;
  min-height: 44px;
  flex: 0 0 auto;
}

/* 6) Mobile menu tap area + row rhythm */
.fm-mobile-menu__item-row {
  min-height: 48px;
}

.fm-mobile-menu__link {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 0;
  text-decoration: none;
}

/* 7) Keep mobile submenu and back controls comfortable */
.fm-mobile-menu__toggle,
.fm-mobile-menu__back {
  min-width: 44px;
  min-height: 44px;
}

/* 8) Divider consistency in overlay menu */
.fm-mobile-menu__item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* 9) Desktop current/active state hardening */
.fm-header__menu-item.current-menu-item > .fm-header__menu-link,
.fm-header__menu-item.current_page_item > .fm-header__menu-link,
.fm-header__menu-item.current-menu-ancestor > .fm-header__menu-link,
.fm-header__menu-link[aria-current="page"] {
  text-decoration: none;
}

/* 10) Mega menu layer hardening
   Adjust selector only if your live panel class differs */
.fm-header [data-fm-mega-menu-panel] {
  z-index: 1050;
}

/* 11) Motion safety */
@media (prefers-reduced-motion: reduce) {
  .fm-mobile-overlay,
  .fm-mobile-overlay__inner,
  .fm-mobile-menu__panel,
  .fm-header [data-fm-mega-menu-panel] {
    transition: none !important;
    animation: none !important;
  }
}

/* 12) Keyboard focus visibility */
.fm-site-header a:focus-visible,
.fm-site-header button:focus-visible {
  outline: 2px solid var(--wp--preset--color--fm-accent, #5f7a92);
  outline-offset: 2px;
}



/* =========================================================
   FlairMatrix Mega Menu Content System
   Scoped Gutenberg styling inside mega menu panels only
   Works with:
   - .fm-header__mega-menu-panel
   - .fm-section
   - .fm-content / .fm-wide
   ========================================================= */

/* ---------------------------------------------------------
   1) Panel content wrapper rhythm reset
   --------------------------------------------------------- */

.fm-header__mega-menu-panel .fm-section,
.fm-header__mega-menu-panel .fm-content,
.fm-header__mega-menu-panel .fm-wide {
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.fm-header__mega-menu-panel .fm-section > *:first-child,
.fm-header__mega-menu-panel .fm-content > *:first-child,
.fm-header__mega-menu-panel .fm-wide > *:first-child {
  margin-top: 0;
}

.fm-header__mega-menu-panel .fm-section > *:last-child,
.fm-header__mega-menu-panel .fm-content > *:last-child,
.fm-header__mega-menu-panel .fm-wide > *:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------
   2) Gutenberg block spacing normalization
   Mega menu should feel tighter than page content
   --------------------------------------------------------- */

.fm-header__mega-menu-panel .wp-block-heading,
.fm-header__mega-menu-panel p,
.fm-header__mega-menu-panel ul,
.fm-header__mega-menu-panel ol,
.fm-header__mega-menu-panel .wp-block-columns,
.fm-header__mega-menu-panel .wp-block-group {
  margin-top: 0;
}

.fm-header__mega-menu-panel .wp-block-group {
  margin-bottom: 0;
}

/* ---------------------------------------------------------
   3) H2 — Panel title
   Use for top-level panel heading only
   --------------------------------------------------------- */

.fm-header__mega-menu-panel h2,
.fm-header__mega-menu-panel .wp-block-heading:is(h2) {
  margin-bottom: var(--wp--preset--spacing--fm-three);
  font-size: clamp(1.75rem, 1.55rem + 0.8vw, 2.25rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ---------------------------------------------------------
   4) Paragraph directly after H2 — Panel intro
   Important: p tag styling considered here
   --------------------------------------------------------- */

.fm-header__mega-menu-panel h2 + p,
.fm-header__mega-menu-panel .wp-block-heading:is(h2) + p {
  margin-bottom: var(--wp--preset--spacing--fm-five);
  max-width: 70ch;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--wp--preset--color--fm-text-primary, #2e3440);
}

/* ---------------------------------------------------------
   5) Columns layout
   Let Gutenberg decide count; we normalize gap/rhythm
   --------------------------------------------------------- */

.fm-header__mega-menu-panel .wp-block-columns {
  margin-bottom: 0;
  gap: var(--wp--preset--spacing--fm-five);
  align-items: start;
}

.fm-header__mega-menu-panel .wp-block-column {
  min-width: 0;
}

/* ---------------------------------------------------------
   6) H3 — Column title
   --------------------------------------------------------- */

.fm-header__mega-menu-panel .wp-block-column h3,
.fm-header__mega-menu-panel .wp-block-column .wp-block-heading:is(h3) {
  margin-bottom: var(--wp--preset--spacing--fm-two);
  font-size: 1.125rem;
  line-height: 1.25;
  font-weight: 650;
  letter-spacing: -0.01em;
}

/* ---------------------------------------------------------
   7) Paragraph directly after H3 — Column intro
   p tag styling for column summaries
   --------------------------------------------------------- */

.fm-header__mega-menu-panel .wp-block-column h3 + p,
.fm-header__mega-menu-panel .wp-block-column .wp-block-heading:is(h3) + p {
  margin-bottom: var(--wp--preset--spacing--fm-three);
  font-size: 0.975rem;
  line-height: 1.55;
  color: var(--wp--preset--color--fm-text-primary, #2e3440);
  opacity: 0.9;
}

/* ---------------------------------------------------------
   8) H4 — Optional subgroup heading inside a column
   --------------------------------------------------------- */

.fm-header__mega-menu-panel .wp-block-column h4,
.fm-header__mega-menu-panel .wp-block-column .wp-block-heading:is(h4) {
  margin-top: var(--wp--preset--spacing--fm-four);
  margin-bottom: var(--wp--preset--spacing--fm-two);
  font-size: 0.975rem;
  line-height: 1.35;
  font-weight: 650;
}

/* Optional paragraph after H4 */
.fm-header__mega-menu-panel .wp-block-column h4 + p,
.fm-header__mega-menu-panel .wp-block-column .wp-block-heading:is(h4) + p {
  margin-bottom: var(--wp--preset--spacing--fm-two);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--wp--preset--color--fm-text-primary, #2e3440);
  opacity: 0.9;
}

/* ---------------------------------------------------------
   9) Lists — no bullets, no default left indent
   --------------------------------------------------------- */

.fm-header__mega-menu-panel .wp-block-list,
.fm-header__mega-menu-panel ul,
.fm-header__mega-menu-panel ol {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

/* Space between items */
.fm-header__mega-menu-panel .wp-block-list li,
.fm-header__mega-menu-panel ul li,
.fm-header__mega-menu-panel ol li {
  margin: 0 0 var(--wp--preset--spacing--fm-two) 0;
  padding: 0;
}

.fm-header__mega-menu-panel .wp-block-list li:last-child,
.fm-header__mega-menu-panel ul li:last-child,
.fm-header__mega-menu-panel ol li:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------
   10) Links — primary navigation layer
   No bullets, spacing + underline carry the interaction
   --------------------------------------------------------- */

.fm-header__mega-menu-panel .wp-block-list a,
.fm-header__mega-menu-panel ul a,
.fm-header__mega-menu-panel ol a {
  display: inline;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--wp--preset--color--fm-text-primary, #2e3440);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em;
  text-decoration-color: currentColor;
  transition:
    color 180ms ease,
    text-decoration-color 180ms ease;
  overflow-wrap: anywhere;
}

.fm-header__mega-menu-panel .wp-block-list a:hover,
.fm-header__mega-menu-panel .wp-block-list a:focus-visible,
.fm-header__mega-menu-panel ul a:hover,
.fm-header__mega-menu-panel ul a:focus-visible,
.fm-header__mega-menu-panel ol a:hover,
.fm-header__mega-menu-panel ol a:focus-visible {
  color: var(--wp--preset--color--fm-accent, #5f7a92);
  text-decoration-color: currentColor;
}

/* ---------------------------------------------------------
   11) Generic p tag fallback inside mega menu
   For paragraphs not directly attached to headings
   --------------------------------------------------------- */

.fm-header__mega-menu-panel p {
  margin-bottom: var(--wp--preset--spacing--fm-three);
  font-size: 0.975rem;
  line-height: 1.55;
  color: var(--wp--preset--color--fm-text-primary, #2e3440);
}

/* Last paragraph in a column or wrapper should not create loose tail spacing */
.fm-header__mega-menu-panel .wp-block-column p:last-child,
.fm-header__mega-menu-panel .wp-block-group p:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------
   12) Optional subtle vertical separators for wider menus
   Add class .fm-mega-menu--divided on panel shell only when needed
   --------------------------------------------------------- */

.fm-header__mega-menu-panel.fm-mega-menu--divided .wp-block-columns > .wp-block-column:not(:last-child) {
  padding-right: var(--wp--preset--spacing--fm-four);
  border-right: 1px solid rgba(0, 0, 0, 0.05);
}


/* =========================================================
   FlairMatrix Mega Menu Content System (FINAL)
   Scoped ONLY inside mega menu panels

   Structure:
   Outer: .fm-mega-menu-panel (+ optional fm-mmp-*)
   Inner: .fm-full-width OR .fm-condensed

   Content roles:
   - .fm-mmp-intro        → intro paragraph
   - .fm-mmp-title-link   → heading used as link

   Notes:
   - No h2 + p dependency
   - No Gutenberg wrapper dependency
   - All links unified
   ========================================================= */


/* ---------------------------------------------------------
   1) Panel wrapper
   --------------------------------------------------------- */

.fm-header__mega-menu-panel .fm-mega-menu-panel {
  display: block;
  width: 100%;
}


/* ---------------------------------------------------------
   2) Layout variants
   --------------------------------------------------------- */

.fm-header__mega-menu-panel .fm-full-width {
  max-width: var(--wp--style--global--wide-size, 1120px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--fm-gutter);
  padding-right: var(--fm-gutter);
}

.fm-header__mega-menu-panel .fm-condensed {
  max-width: 760px;
  margin-left: 0;
  margin-right: auto;
  padding-left: var(--fm-gutter);
  padding-right: var(--fm-gutter);
}


/* ---------------------------------------------------------
   3) Panel heading (H2)
   --------------------------------------------------------- */

.fm-header__mega-menu-panel .fm-mega-menu-panel h2,
.fm-header__mega-menu-panel .fm-mega-menu-panel .wp-block-heading:is(h2) {
  font-size: var(--wp--preset--font-size--fm-three-xl);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: var(--wp--preset--spacing--fm-three);
  color: var(--wp--preset--color--fm-text-primary, #2e3440);
}


/* ---------------------------------------------------------
   4) Intro paragraph (explicit role)
   --------------------------------------------------------- */

.fm-header__mega-menu-panel .fm-mega-menu-panel .fm-mmp-intro {
  width: min(100%, 62ch);
  max-width: 62ch;
  margin-top: 0;
  margin-bottom: var(--wp--preset--spacing--fm-five);

  font-size: var(--wp--preset--font-size--fm-sm);
  font-weight: 400;
  line-height: 1.55;
  color: var(--wp--preset--color--fm-text-primary, #2e3440);
}

/* Condensed variant */
.fm-header__mega-menu-panel .fm-condensed .fm-mmp-intro {
  width: min(100%, 54ch);
  max-width: 54ch;
  margin-bottom: var(--wp--preset--spacing--fm-four);
}


/* ---------------------------------------------------------
   5) Column layout (Gutenberg columns)
   --------------------------------------------------------- */

.fm-header__mega-menu-panel .fm-mega-menu-panel .wp-block-columns {
  margin-bottom: 0;
  gap: var(--wp--preset--spacing--fm-six);
}

.fm-header__mega-menu-panel .fm-mega-menu-panel .wp-block-column {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--fm-two);
}


/* ---------------------------------------------------------
   6) Column headings (H3 / H4)
   --------------------------------------------------------- */

.fm-header__mega-menu-panel .fm-mega-menu-panel h3,
.fm-header__mega-menu-panel .fm-mega-menu-panel .wp-block-heading:is(h3) {
  font-size: var(--wp--preset--font-size--fm-two-xl);
  font-weight: 500;
  line-height: 1.35;
  margin-bottom: var(--wp--preset--spacing--fm-one);
  color: var(--wp--preset--color--fm-text-primary, #2e3440);
}

.fm-header__mega-menu-panel .fm-mega-menu-panel h4,
.fm-header__mega-menu-panel .fm-mega-menu-panel .wp-block-heading:is(h4) {
  font-size: var(--wp--preset--font-size--fm-md);
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: var(--wp--preset--spacing--fm-one);
  color: var(--wp--preset--color--fm-text-primary, #2e3440);
}


/* ---------------------------------------------------------
   7) Paragraph text (general)
   --------------------------------------------------------- */

.fm-header__mega-menu-panel .fm-mega-menu-panel p {
  font-size: var(--wp--preset--font-size--fm-sm);
  font-weight: 400;
  line-height: 1.55;
  margin: 0;
  color: var(--wp--preset--color--fm-text-primary, #2e3440);
}


/* ---------------------------------------------------------
   8) Links — unified system (ALL links)
   --------------------------------------------------------- */

.fm-header__mega-menu-panel .fm-mega-menu-panel a {
  font-size: var(--wp--preset--font-size--fm-sm);
  font-weight: 400;
  line-height: 1.5;
  color: var(--wp--preset--color--fm-text-secondary, #5f6b7a);
  text-decoration: none;
  transition:
    color 180ms ease,
    text-decoration-color 180ms ease;
  overflow-wrap: anywhere;
}

.fm-header__mega-menu-panel .fm-mega-menu-panel a:hover,
.fm-header__mega-menu-panel .fm-mega-menu-panel a:focus-visible {
  color: var(--wp--preset--color--fm-text-primary, #2e3440);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.12em;
  text-decoration-color: currentColor;
}


/* ---------------------------------------------------------
   9) Heading as link (explicit role)
   --------------------------------------------------------- */

.fm-header__mega-menu-panel .fm-mega-menu-panel .fm-mmp-title-link {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  text-decoration: none;
}

.fm-header__mega-menu-panel .fm-mega-menu-panel .fm-mmp-title-link:hover,
.fm-header__mega-menu-panel .fm-mega-menu-panel .fm-mmp-title-link:focus-visible {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.12em;
}


/* ---------------------------------------------------------
   10) Lists (no bullets — spacing only)
   --------------------------------------------------------- */

.fm-header__mega-menu-panel .fm-mega-menu-panel ul,
.fm-header__mega-menu-panel .fm-mega-menu-panel ol,
.fm-header__mega-menu-panel .fm-mega-menu-panel .wp-block-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fm-header__mega-menu-panel .fm-mega-menu-panel li {
  margin-bottom: var(--wp--preset--spacing--fm-one);
}

.fm-header__mega-menu-panel .fm-mega-menu-panel li:last-child {
  margin-bottom: 0;
}


/* ---------------------------------------------------------
   11) Panel identity hooks (for future overrides)
   --------------------------------------------------------- */

/* Example test colors — REMOVE after testing */

.fm-header__mega-menu-panel .fm-mmp-services h2 {
  /* color: red; */
}

.fm-header__mega-menu-panel .fm-mmp-about-us h2 {
  /* color: green; */
}

.fm-header__mega-menu-panel .fm-mmp-insights h2 {
  /* color: blue; */
}



/* =========================================================
   Desktop Search
   Desktop only
   ========================================================= */

@media (min-width: 1025px) {
  .fm-header__desktop-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
  }

  .fm-header__desktop-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--wp--preset--color--fm-text-primary, #2e3440);
    cursor: pointer;
    line-height: 1;
  }

  .fm-header__desktop-search-panel {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: min(360px, 90vw);
    padding: 16px;
    background: var(--wp--preset--color--fm-surface-base, #f7f6f3);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    z-index: 1060;
  }

  .fm-header__desktop-search-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
    margin: 0;
  }

  .fm-header__desktop-search-input {
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 8px;
    background: #fff;
    color: var(--wp--preset--color--fm-text-primary, #2e3440);
    font: inherit;
  }

  .fm-header__desktop-search-input::placeholder {
    color: var(--wp--preset--color--fm-text-secondary, #5f6b7a);
    opacity: 1;
  }

  .fm-header__desktop-search-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 8px;
    color: var(--wp--preset--color--fm-text-primary, #2e3440);
    cursor: pointer;
    line-height: 1;
  }

  .fm-header__desktop-search-toggle:focus-visible,
  .fm-header__desktop-search-input:focus-visible,
  .fm-header__desktop-search-submit:focus-visible {
    outline: 2px solid var(--wp--preset--color--fm-accent, #5f7a92);
    outline-offset: 2px;
  }
}

/* Remove native clear (X) button in search inputs */

/* Chrome, Edge, Safari */
.fm-header__desktop-search-input::-webkit-search-cancel-button {
  display: none;
  -webkit-appearance: none;
}

/* Safari extra */
.fm-header__desktop-search-input::-webkit-search-decoration {
  display: none;
}

/* Firefox (just in case) */
.fm-header__desktop-search-input[type="search"] {
  appearance: textfield;
}

.fm-header__desktop-search-input {
  border: 1px solid rgba(0, 0, 0, 0.12);
  outline: none;
}

.fm-header__desktop-search-input:focus {
  border-color: rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
}
.fm-header__desktop-search-submit {
  background: transparent;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
}
.fm-header__desktop-search-input {
  min-height: 40px;
}
.fm-header__desktop-search-panel {
  margin-top: 8px; /* reduce if needed */
}
/* =========================================================
   Desktop search visibility
   ========================================================= */

@media (max-width: 1024px) {
  .fm-header__desktop-search {
    display: none !important;
  }
}