/*
 * V3 site-shell module: site-header
 *
 * CSS isolation: every selector rooted under
 *   .pd-section--site-header[data-pd-module]
 *
 * Class/attribute selectors only - no element selectors.
 *
 * Canonical tokens used:
 *   --pd-color-surface, --pd-color-surface-alt, --pd-color-text,
 *   --pd-color-muted, --pd-color-border, --pd-color-primary,
 *   --pd-color-on-dark, --pd-shadow-sm
 *   --pd-font-heading, --pd-font-body
 *   --pd-radius-sm, --pd-radius-md
 *   --pd-space-2, --pd-space-3, --pd-space-4, --pd-space-5,
 *   --pd-space-6
 *
 * Variants:
 *   simple        logo left, nav right, optional CTA right
 *   centered-nav  logo left, nav centered, optional CTA right
 *   split-cta     logo left, nav middle, prominent CTA right
 *   minimal       logo left, compact links right, no CTA emphasis
 *
 * Mobile pattern: native <details>/<summary> drawer; no JS dependency.
 * The desktop nav is hidden under 48rem; the <summary> hamburger
 * toggles the mobile <details> open/closed via the browser's native
 * details semantics. prefers-reduced-motion respected by construction
 * (no animations defined here).
 */

.pd-section--site-header[data-pd-module] {
  display: block;
  width: 100%;
  background: var(--pd-color-surface);
  color: var(--pd-color-text);
  font-family: var(--pd-font-body);
  box-sizing: border-box;
}

.pd-section--site-header[data-pd-module][data-surface="surface-alt"] {
  background: var(--pd-color-surface-alt);
}

.pd-section--site-header[data-pd-module][data-surface="transparent"] {
  background: transparent;
}

.pd-section--site-header[data-pd-module][data-sticky="true"] {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--pd-color-border);
  box-shadow: var(--pd-shadow-sm);
}

.pd-section--site-header[data-pd-module] .pd-site-header__inner {
  display: grid;
  align-items: center;
  gap: var(--pd-space-4);
  min-height: 4rem;
  padding-block: var(--pd-space-3);
}

.pd-section--site-header[data-pd-module] .pd-site-header__identity {
  display: inline-flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.pd-section--site-header[data-pd-module] .pd-site-header__name {
  overflow-wrap: anywhere;
}

.pd-section--site-header[data-pd-module] .pd-site-header__cta {
  white-space: nowrap;
}

.pd-section--site-header[data-pd-module] .pd-site-header__cta--mobile {
  margin-top: var(--pd-space-3);
}

.pd-section--site-header[data-pd-module] .pd-site-header__menu {
  justify-self: end;
  display: none;
}

/* Desktop layout per variant. The grid columns are configured per
 * variant; mobile breakpoint collapses to a 1fr | auto layout below
 * 48rem with the desktop nav hidden and the <details> visible. */

@media (min-width: 48rem) {
  .pd-section--site-header[data-pd-module] .pd-site-header__menu {
    display: none;
  }
  .pd-section--site-header[data-pd-module] .pd-site-header__nav--desktop {
    display: flex;
  }

  .pd-section--site-header[data-pd-module][data-pd-variant="simple"] .pd-site-header__inner {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "brand nav cta";
  }
  .pd-section--site-header[data-pd-module][data-pd-variant="simple"][data-has-cta="false"] .pd-site-header__inner {
    grid-template-columns: auto 1fr;
    grid-template-areas: "brand nav";
  }
  .pd-section--site-header[data-pd-module][data-pd-variant="simple"] .pd-site-header__nav--desktop {
    justify-content: flex-end;
  }

  .pd-section--site-header[data-pd-module][data-pd-variant="centered-nav"] .pd-site-header__inner {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "brand nav cta";
  }
  .pd-section--site-header[data-pd-module][data-pd-variant="centered-nav"][data-has-cta="false"] .pd-site-header__inner {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "brand nav .";
  }
  .pd-section--site-header[data-pd-module][data-pd-variant="centered-nav"] .pd-site-header__nav--desktop {
    justify-content: center;
  }
  .pd-section--site-header[data-pd-module][data-pd-variant="centered-nav"] .pd-site-header__cta {
    justify-self: end;
  }

  .pd-section--site-header[data-pd-module][data-pd-variant="split-cta"] .pd-site-header__inner {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "brand nav cta";
  }
  .pd-section--site-header[data-pd-module][data-pd-variant="split-cta"][data-has-cta="false"] .pd-site-header__inner {
    grid-template-columns: auto 1fr;
    grid-template-areas: "brand nav";
  }
  .pd-section--site-header[data-pd-module][data-pd-variant="split-cta"] .pd-site-header__nav--desktop {
    justify-content: center;
  }
  .pd-section--site-header[data-pd-module][data-pd-variant="split-cta"] .pd-site-header__cta {
    background: var(--pd-color-primary);
    color: var(--pd-color-on-dark);
    padding: var(--pd-space-3) var(--pd-space-5);
    font-weight: 700;
  }

  .pd-section--site-header[data-pd-module][data-pd-variant="minimal"] .pd-site-header__inner {
    grid-template-columns: auto 1fr;
    grid-template-areas: "brand nav";
    min-height: 3.25rem;
  }
  .pd-section--site-header[data-pd-module][data-pd-variant="minimal"] .pd-site-header__nav--desktop {
    justify-content: flex-end;
  }
  .pd-section--site-header[data-pd-module][data-pd-variant="minimal"] .pd-site-header__cta {
    display: none;
  }
  .pd-section--site-header[data-pd-module][data-pd-variant="minimal"] .pd-site-header__nav-list [href] {
    padding-inline: var(--pd-space-2);
    font-size: 0.9375rem;
    font-weight: 500;
  }

  .pd-section--site-header[data-pd-module] .pd-site-header__brand { grid-area: brand; }
  .pd-section--site-header[data-pd-module] .pd-site-header__nav--desktop { grid-area: nav; display: flex; }
  .pd-section--site-header[data-pd-module] .pd-site-header__cta { grid-area: cta; }
  .pd-section--site-header[data-pd-module] .pd-site-header__social { grid-area: cta; justify-self: end; align-self: center; }

  .pd-section--site-header[data-pd-module][data-pd-variant="socials-right"] .pd-site-header__inner {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "brand nav cta";
  }
  .pd-section--site-header[data-pd-module][data-pd-variant="socials-right"][data-has-social="false"] .pd-site-header__inner {
    grid-template-columns: auto 1fr;
    grid-template-areas: "brand nav";
  }
  .pd-section--site-header[data-pd-module][data-pd-variant="socials-right"] .pd-site-header__nav--desktop {
    justify-content: flex-end;
  }

  .pd-section--site-header[data-pd-module][data-pd-variant="topbar-social"] .pd-site-header__inner {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "brand nav cta";
  }
  .pd-section--site-header[data-pd-module][data-pd-variant="topbar-social"] .pd-site-header__nav--desktop {
    justify-content: flex-end;
  }
}

/* Topbar above the main header (topbar-social variant). Always rendered
 * by PHP regardless of viewport - on narrow viewports the topbar wraps
 * its content rather than disappearing so phone/email stay reachable. */
.pd-section--site-header[data-pd-module] .pd-site-header__topbar {
  background: var(--pd-color-primary);
  color: var(--pd-color-on-dark);
  font-size: 0.8125rem;
}
.pd-section--site-header[data-pd-module] .pd-site-header__topbar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pd-space-2) var(--pd-space-3);
  padding-block: var(--pd-space-2);
}
.pd-section--site-header[data-pd-module] .pd-site-header__topbar-info {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pd-space-2) var(--pd-space-3);
}
.pd-section--site-header[data-pd-module] .pd-site-header__topbar-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.pd-section--site-header[data-pd-module] .pd-site-header__topbar-link:hover,
.pd-section--site-header[data-pd-module] .pd-site-header__topbar-link:focus-visible {
  border-bottom-color: currentColor;
}
.pd-section--site-header[data-pd-module] .pd-site-header__topbar-social .pd-social-link {
  width: 2rem;
  height: 2rem;
}
.pd-section--site-header[data-pd-module] .pd-site-header__topbar-social .pd-social-link__icon {
  width: 1.125rem;
  height: 1.125rem;
}

/* Desktop social slot in socials-right has the icon-row sized to align
 * with nav baseline. */
.pd-section--site-header[data-pd-module] .pd-site-header__social {
  display: inline-flex;
  align-items: center;
}

/* Mobile drawer carries the social row beneath the menu/CTA so icons
 * never overflow the horizontal header on narrow viewports. */
.pd-section--site-header[data-pd-module] .pd-site-header__social--mobile {
  display: none;
}

/* Mobile (under 48rem): collapse to brand + hamburger row. The
 * <details> mobile drawer holds nav + the (optional) CTA. */
@media (max-width: 47.999rem) {
  .pd-section--site-header[data-pd-module] .pd-site-header__inner {
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand toggle";
  }
  .pd-section--site-header[data-pd-module] .pd-site-header__nav--desktop {
    display: none;
  }
  .pd-section--site-header[data-pd-module] > .pd-container > .pd-site-header__cta {
    display: none;
  }
  .pd-section--site-header[data-pd-module] > .pd-container > .pd-site-header__social {
    display: none;
  }
  .pd-section--site-header[data-pd-module] .pd-site-header__social--mobile {
    display: flex;
    justify-content: center;
    margin-top: var(--pd-space-2);
  }
  .pd-section--site-header[data-pd-module] .pd-site-header__topbar-inner {
    justify-content: center;
    text-align: center;
  }
  .pd-section--site-header[data-pd-module] .pd-site-header__menu {
    display: block;
    grid-area: toggle;
  }
  .pd-section--site-header[data-pd-module] .pd-site-header__menu-toggle {
    display: inline-flex;
  }
  .pd-section--site-header[data-pd-module] .pd-site-header__nav--mobile {
    display: flex;
    flex-direction: column;
    gap: var(--pd-space-2);
    padding: var(--pd-space-3) 0;
  }
  .pd-section--site-header[data-pd-module] .pd-site-header__nav-list--mobile {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .pd-section--site-header[data-pd-module] .pd-site-header__nav-list--mobile [href] {
    padding: var(--pd-space-3) var(--pd-space-2);
    font-size: 1rem;
  }
  .pd-section--site-header[data-pd-module] .pd-site-header__cta--mobile {
    align-self: stretch;
    text-align: center;
    justify-content: center;
  }
}