/* =========================================================
   ALPEKIN HEADER
   ---------------------------------------------------------
   Purpose:
   Global site header for the public brand shell.

   Brand direction:
   Ceremonial, structured, restrained, premium.
   The logo carries the identity; the UI supports it quietly.

   Rules:
   - Header-specific selectors only.
   - Use foundation tokens from tokens.css.
   - Avoid broad element selectors like header.
   - Avoid excessive glow/animation.
   ========================================================= */


/* =========================================================
   1. Header Shell
   ========================================================= */

.site-header {
  --header-logo-size: var(--logo-size-desktop);
  --border: color-mix(in srgb, var(--ivory-bone) 22%, transparent);
  --focus-color: var(--ivory-bone);

  position: relative;
  z-index: var(--z-header);

  min-height: 56px;
  padding-block: max(var(--space-2), var(--safe-top));
  padding-inline-start: calc(var(--container-pad-inline) + var(--safe-left));
  padding-inline-end: calc(var(--container-pad-inline) + var(--safe-right));

  background: var(--grad-earth-forest);
  color: var(--text);

  border-block-end: var(--border-width) solid color-mix(in srgb, var(--tree-gold) 18%, transparent);
  box-shadow: var(--elevation-md);

  -webkit-tap-highlight-color: transparent;
}


/* Inner grid container.
   First row: logo + right actions.
   Second row: primary service navigation. */
.header-container {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-3);
  max-width: var(--container-max);
  margin-inline: auto;
}


/* Small vertical separator used between compact header groups. */
.header-divider {
  display: inline-block;
  width: var(--divider-thickness);
  height: var(--divider-height-desktop);
  margin-inline: var(--space-2);
  background: var(--border);
}


/* =========================================================
   2. Brand
   ========================================================= */

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text);
  text-decoration: none;
}

.brand:hover {
  text-decoration: none;
}

.brand__logo {
  display: block;
  width: var(--header-logo-size);
  height: var(--header-logo-size);
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.brand__name {
  display: inline;
  color: var(--text);
  font-family: var(--font-heading);
  font-size: clamp(1rem, 0.35vw + 1rem, 1.25rem);
  font-weight: var(--weight-bold);
  letter-spacing: 0.03em;
}


/* =========================================================
   3. Right Actions
   ---------------------------------------------------------
   Contains utility links and language switcher.
   ========================================================= */

.right-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  gap: var(--cluster-gap-desktop);
}

/* Site-wide theme switch. Its label communicates the current mode. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding: var(--space-1) var(--space-3);
  border: var(--border-width) solid var(--border-gold-soft);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: var(--weight-semibold);
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  border-color: var(--tree-gold);
  color: var(--link-on-dark);
}

.theme-toggle__mark {
  width: 0.85rem;
  height: 0.85rem;
  border: var(--border-width-strong) solid currentColor;
  border-radius: 50%;
  background: var(--tree-gold);
  box-shadow: inset -0.3rem 0 0 var(--deep-moss);
}

[data-theme="light"] .theme-toggle__mark {
  box-shadow: none;
}


/* =========================================================
   4. Utility Links
   ========================================================= */

.utility-links {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}

.utility-links__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  padding-block: 2px;
  color: var(--text);
  font-size: var(--fs-small);
  font-weight: var(--weight-medium);
  letter-spacing: 0.035em;
  text-decoration: none;
  transition:
    color var(--duration-standard) ease,
    opacity var(--duration-standard) ease;
}

.utility-links__item:hover,
.utility-links__item:focus-visible {
  color: var(--link-on-dark);
  text-decoration: none;
}


/* Restrained underline: gold as signal, not decoration. */
.utility-links__item::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -2px;
  height: 1px;
  background: var(--tree-gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--duration-standard) ease;
}

.utility-links__item:hover::after,
.utility-links__item:focus-visible::after,
.utility-links__item[aria-current="page"]::after {
  transform: scaleX(1);
}

.utility-links__item[aria-current="page"] {
  color: var(--link-on-dark);
  font-weight: var(--weight-semibold);
}


/* =========================================================
   5. Language Switcher
   ---------------------------------------------------------
   Compact visible badge with an invisible native select above it.
   This keeps the control accessible while preserving the brand UI.
   ========================================================= */

.language-switcher {
  display: inline-flex;
  align-items: center;
}

.language-switcher__control {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: auto;
}


/* Compact visible language badge. */
.language-switcher--compact .lang-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: var(--touch-min);
  padding: 2px var(--space-2);

  border: var(--border-width) solid var(--border-gold-soft);
  border-radius: var(--radius-interactive);

  background: transparent;
  color: var(--text);

  font-size: clamp(var(--fs-utility-min), 0.2vw + 0.85rem, var(--fs-utility-max));
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  line-height: 1.2;

  cursor: pointer;
  user-select: none;

  transition:
    background var(--duration-standard) ease,
    border-color var(--duration-standard) ease,
    color var(--duration-standard) ease,
    box-shadow var(--duration-standard) ease;
}

.language-switcher--compact .lang-badge:hover {
  background: color-mix(in srgb, var(--ivory-bone) 8%, transparent);
  border-color: var(--tree-gold);
  color: var(--link-on-dark);
}


/* Native select overlay.
   It remains interactive but visually hidden. */
.language-switcher--compact select {
  position: absolute;
  inset: 0;
  z-index: 2;

  width: 100%;
  height: 100%;

  opacity: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: transparent !important;
  box-shadow: none !important;

  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.language-switcher--compact select:focus-visible + .lang-badge {
  border-color: var(--focus-color);
  box-shadow: var(--focus-ring);
  outline: var(--focus-outline);
  outline-offset: 3px;
}


/* Non-compact fallback, kept for future safety. */
.language-switcher:not(.language-switcher--compact) select {
  box-sizing: border-box;
  padding-block: 0.35rem;
  padding-inline: var(--space-2);

  border: var(--border-width) solid var(--tree-gold);
  border-radius: var(--radius-interactive);

  background: transparent;
  color: var(--text);

  font: inherit;
  font-size: 0.9rem;
  font-weight: var(--btn-font-weight);
  line-height: 1.2;

  appearance: none;
  -webkit-appearance: none;

  transition:
    background var(--duration-standard) ease,
    border-color var(--duration-standard) ease,
    box-shadow var(--duration-standard) ease;
}

.language-switcher:not(.language-switcher--compact) select:hover,
.language-switcher:not(.language-switcher--compact) select:focus-visible {
  background: color-mix(in srgb, var(--ivory-bone) 8%, transparent);
  border-color: var(--tree-gold);
  box-shadow: var(--focus-ring);
}


/* Page-specific language availability, separate from the global header menu. */
.page-languages {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-2) var(--space-4);
  border-block-end: var(--border-width) solid var(--border-gold-soft);
  background: var(--deep-moss);
  color: var(--ivory-bone);
  font-size: var(--fs-small);
}

.page-languages a,
.page-languages [aria-current="page"] {
  color: var(--ivory-bone);
  font-weight: var(--weight-semibold);
}

.page-languages [aria-current="page"] {
  color: var(--link-on-dark);
}


/* =========================================================
   6. Primary Row
   ---------------------------------------------------------
   Dedicated service navigation row.
   Left: Core / Journal.
   Right: Profile menu.
   ========================================================= */

.primary-row {
  grid-column: 1 / -1;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);

  padding-block: var(--space-3);

  border-block-start: var(--border-width) solid var(--border);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ivory-bone) 8%, transparent);
}


/* =========================================================
   7. Primary Navigation
   ========================================================= */

.primary-nav {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-7);
}

.primary-nav__item {
  position: relative;

  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  padding: 2px 4px 6px;

  color: var(--text);
  font-family: var(--font-heading);
  font-size: clamp(var(--fs-primary-min), 0.6vw + 1rem, var(--fs-primary-max));
  font-weight: var(--weight-bold);
  letter-spacing: 0.015em;
  text-decoration: none;

  transition:
    color var(--duration-standard) ease,
    transform var(--duration-standard) ease;
}

a.primary-nav__item:hover,
a.primary-nav__item:focus-visible {
  color: var(--link-on-dark);
  text-decoration: none;
  transform: translateY(-1px);
}


/* Double-line ceremonial underline.
   Kept restrained; no constant glow. */
.primary-nav__item::after,
.primary-nav__item::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 1px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--duration-standard) ease;
}

.primary-nav__item::after {
  inset-block-end: -2px;
  background: var(--tree-gold);
}

.primary-nav__item::before {
  inset-block-end: -4px;
  background: var(--border);
}

.primary-nav__item:hover::after,
.primary-nav__item:hover::before,
.primary-nav__item:focus-visible::after,
.primary-nav__item:focus-visible::before,
.primary-nav__item[aria-current="page"]::after,
.primary-nav__item[aria-current="page"]::before {
  transform: scaleX(1);
}

.primary-nav__item[aria-current="page"],
.primary-nav__item--active {
  color: var(--link-on-dark);
}


/* =========================================================
   8. Profile Menu
   ========================================================= */

.profile-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.profile-trigger {
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-text-fill-color: currentColor;
}

.profile-trigger:hover,
.profile-trigger:focus-visible,
.profile-trigger[aria-expanded="true"] {
  color: var(--link-on-dark);
}


/* Button should not inherit nav underline pseudo-elements. */
.profile-trigger::before,
.profile-trigger::after {
  display: none;
}


/* Dropdown panel. */
.profile-dropdown {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-end: 0;
  z-index: var(--z-dropdown);

  min-width: 210px;
  margin-block-start: var(--space-2);
  padding: var(--space-2);

  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);

  background: var(--surface-elevated);
  color: var(--text);

  box-shadow: var(--elevation-lg);
}

.profile-dropdown[hidden] {
  display: none !important;
}

.profile-dropdown form {
  margin: 0;
}


/* Dropdown items. */
.profile-dropdown .profile-item,
.profile-dropdown form button.profile-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);

  width: 100%;
  min-height: var(--touch-min);
  padding: 10px 12px;

  border: 0;
  border-radius: var(--radius-interactive);

  background: transparent;
  color: var(--text);

  font: inherit;
  text-align: start;
  text-decoration: none;

  cursor: pointer;

  transition:
    background var(--duration-standard) ease,
    color var(--duration-standard) ease;
}

.profile-dropdown .profile-item:hover,
.profile-dropdown .profile-item:focus-visible {
  background: color-mix(in srgb, var(--ivory-bone) 10%, transparent);
  color: var(--link-on-dark);
  text-decoration: none;
}


/* Destructive action, used for logout. */
.profile-dropdown .profile-item--danger {
  color: color-mix(in srgb, var(--ritual-fire-glow) 85%, var(--ivory-bone));
}

.profile-dropdown .profile-item--danger:hover,
.profile-dropdown .profile-item--danger:focus-visible {
  background: color-mix(in srgb, var(--ritual-fire-glow) 22%, transparent);
  color: var(--ivory-bone);
}


/* =========================================================
   9. Responsive Adjustments
   ========================================================= */

@media (max-width: 1280px) {
  .right-actions {
    gap: calc(var(--cluster-gap-desktop) - var(--space-1));
  }

  .primary-nav {
    gap: calc(var(--space-7) - var(--space-1));
  }
}


@media (max-width: 1024px) {
  .site-header {
    --header-logo-size: var(--logo-size-tablet);
  }

  .right-actions {
    gap: var(--cluster-gap-tablet);
  }

  .utility-links {
    gap: var(--space-3);
  }

  .primary-row {
    padding-block: var(--space-2);
  }

  .primary-nav {
    gap: var(--space-5);
  }
}


@media (max-width: 640px) {
  .site-header {
    --header-logo-size: var(--logo-size-mobile);
  }

  .header-container {
    grid-template-columns: auto 1fr;
  }

  .right-actions {
    justify-self: end;
    gap: var(--cluster-gap-mobile);
  }

  .utility-links {
    gap: var(--space-2);
  }

  .utility-links__item {
    min-height: var(--touch-min);
    padding-inline: 2px;
    font-size: clamp(var(--fs-utility-min), 1vw + 0.8rem, var(--fs-utility-max));
  }

  .header-divider {
    display: none;
  }

  .language-switcher--compact .lang-badge {
    min-height: var(--touch-min);
  }

  .theme-toggle {
    min-height: var(--touch-min);
    padding-inline: var(--space-2);
  }

  .theme-toggle [data-theme-label] {
    display: none;
  }

  .primary-row {
    gap: var(--space-3);
    padding-block: var(--space-2);
  }

  .primary-nav {
    gap: var(--space-4);
  }

  .primary-nav__item {
    min-height: var(--touch-min);
    font-size: clamp(var(--fs-primary-min), 1vw + 0.95rem, var(--fs-primary-max));
  }
}

@media (max-width: 480px) {
  .header-container {
    grid-template-columns: 1fr;
  }

  .brand {
    justify-self: center;
  }

  .right-actions {
    justify-self: stretch;
    justify-content: center;
  }
}


@media (max-width: 400px) {
  .right-actions,
  .utility-links {
    gap: var(--space-1);
  }

  .primary-nav {
    gap: var(--space-3);
  }
}


@media (max-height: 480px) and (max-width: 768px) {
  .site-header {
    padding-block: max(var(--space-1), var(--safe-top));
  }

  .primary-row {
    padding-block: var(--space-1);
  }
}


/* Touch devices should not rely on hover movement. */
@media (hover: none) {
  a.primary-nav__item:hover,
  a.primary-nav__item:focus-visible,
  .utility-links__item:hover,
  .utility-links__item:focus-visible {
    transform: none;
  }
}

:lang(ar) .site-header,
:lang(fa) .site-header {
  letter-spacing: 0;
}

/* Shared language selector enhancement. */
.language-picker {
  position: relative;
}

.language-picker summary,
.language-picker__single {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  padding: var(--space-1) var(--space-3);
  border: var(--border-width) solid var(--border-gold-soft);
  border-radius: var(--radius-interactive);
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
  list-style: none;
}

.language-picker summary::-webkit-details-marker {
  display: none;
}

.language-picker summary::after {
  content: "+";
  margin-inline-start: var(--space-2);
  color: var(--accent-highlight);
}

.language-picker[open] summary::after {
  content: "−";
}

.language-picker summary:hover,
.language-picker summary:focus-visible,
.language-picker[open] summary {
  border-color: var(--accent-highlight);
  color: var(--link-on-dark);
}

.language-picker__single {
  cursor: default;
}

.language-picker__menu {
  position: absolute;
  inset-block-start: calc(100% + var(--space-2));
  inset-inline-end: 0;
  z-index: var(--z-dropdown);
  display: grid;
  min-width: 210px;
  padding: var(--space-2);
  border: var(--border-width) solid var(--border-gold-soft);
  border-radius: var(--radius-md);
  background: var(--surface-elevated);
  box-shadow: var(--shadow-lg);
}

.language-picker__menu a,
.language-picker__menu span {
  display: flex;
  align-items: center;
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-small);
  text-decoration: none;
}

.language-picker__menu a:hover,
.language-picker__menu a:focus-visible,
.language-picker__menu span[aria-current="page"] {
  background: color-mix(in srgb, var(--text) 10%, transparent);
  color: var(--link-on-dark);
}

.language-picker__menu span[aria-disabled="true"] {
  color: var(--text-muted);
}