/* Site header / primary navigation — fixed, gains backdrop + shadow on scroll, mobile drawer.
   NOTE: .nav__drawer must stay a sibling of .site-header in the DOM (not nested inside it) —
   backdrop-filter on an ancestor creates a new containing block for position:fixed descendants,
   which would break the drawer's full-viewport positioning once the header is in its scrolled state. */

.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-nav);
  padding-block: var(--space-5);
  border-bottom: 1px solid transparent;
  transition: padding var(--duration-fast) var(--ease-premium),
    background-color var(--duration-fast) var(--ease-premium),
    backdrop-filter var(--duration-fast) var(--ease-premium),
    border-color var(--duration-fast) var(--ease-premium);
}

.site-header.is-scrolled {
  padding-block: var(--space-3);
  background: rgb(10 12 16 / 85%);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-color: var(--color-border);
}

/* WordPress's own admin toolbar (visible to logged-in staff/QA testers) is
   ALSO position:fixed at the true viewport top, with z-index:99999 — far
   above .site-header's z-index. WordPress adds "admin-bar" to body_class()
   automatically whenever the toolbar is showing (see header.php's
   body_class() call), so without this offset the header — and everything in
   it, including the "Markalar" row — renders underneath/overlapping the
   toolbar. 32px/46px match the toolbar's own height at its two responsive
   states (WordPress core's own breakpoint is 782px, not this theme's 900px). */
body.admin-bar .site-header {
  inset-block-start: 32px;
}

@media (max-width: 782px) {
  body.admin-bar .site-header {
    inset-block-start: 46px;
  }
}

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

.nav__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  color: var(--color-text);
  transition: opacity var(--duration-fast) var(--ease-premium);
}

.nav__logo:hover {
  opacity: 0.85;
}

.nav__logo-mark {
  flex-shrink: 0;
}

.nav__logo strong {
  color: var(--color-accent);
}

.nav__links {
  display: none;
  align-items: center;
  gap: var(--space-6);
}

.nav__links > li {
  position: relative;
}

.nav__link {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-dim);
  position: relative;
  padding-block: var(--space-1);
  transition: color var(--duration-fast) var(--ease-premium);
}

/* "menu-item-has-children" is added automatically by WordPress core
   (Walker_Nav_Menu) to any <li> with a submenu — no theme code assigns it.
   Small caret so a dropdown parent (e.g. "Markalar") is visually
   distinguishable before it's opened. */
.nav__links > .menu-item-has-children > .nav__link::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-inline-start: var(--space-2);
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--duration-fast) var(--ease-premium);
}

.nav__links > .menu-item-has-children:hover > .nav__link::before,
.nav__links > .menu-item-has-children:focus-within > .nav__link::before {
  transform: translateY(0) rotate(225deg);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-fast) var(--ease-premium);
}

.nav__link:hover,
.nav__link[aria-current="page"] {
  color: var(--color-text);
}

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

/* Dropdown submenu (e.g. "Markalar" > "Wilo Servisi" / "Hidrofor Servisi").
   Desktop-only — .nav__links itself is display:none below 900px, and the
   mobile drawer override further down replaces this positioning entirely so
   the same markup renders as a plain expanded list inside the drawer. */
.sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
  min-width: 220px;
  margin: 0;
  padding: var(--space-2);
  list-style: none;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity var(--duration-fast) var(--ease-premium),
    transform var(--duration-fast) var(--ease-premium),
    visibility 0s linear var(--duration-fast);
}

.nav__links > .menu-item-has-children:hover > .sub-menu,
.nav__links > .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}

.sub-menu .nav__link {
  display: block;
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-sm);
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  border-radius: var(--radius-sm);
}

.sub-menu .nav__link:hover,
.sub-menu .nav__link:focus-visible {
  color: var(--color-text);
  background: var(--color-surface);
}

.sub-menu .nav__link::after {
  display: none;
}

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

.nav__actions .btn {
  display: none;
}

.nav__toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
}

.nav__toggle span {
  width: 22px;
  height: 2px;
  background: var(--color-text);
  border-radius: var(--radius-pill);
  transition: transform var(--duration-fast) var(--ease-premium),
    opacity var(--duration-fast) var(--ease-premium);
}

.nav__toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav__toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav__toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.nav__drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--color-black);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  transform: translateY(-100%);
  transition: transform var(--duration-base) var(--ease-premium);
}

/* Same admin-bar collision as .site-header (see the body.admin-bar rule
   above) — the drawer is also position:fixed with inset:0, so without this
   its top edge (and everything painted at the very top of the full-viewport
   overlay) sits underneath WordPress's toolbar for logged-in staff/QA. Only
   overrides the top inset; left/right/bottom stay at 0 from the shorthand
   above. Doesn't affect the "closed" translateY(-100%) state's off-screen
   direction, only the resting position it animates to/from. */
body.admin-bar .nav__drawer {
  inset-block-start: 32px;
}

@media (max-width: 782px) {
  body.admin-bar .nav__drawer {
    inset-block-start: 46px;
  }
}

.nav__drawer.is-open {
  transform: translateY(0);
}

/* .nav__links ships display:none by default and only becomes flex at the
   desktop breakpoint further below (it's shared markup/class with the
   desktop menu) — without this, the drawer's own copy of the menu never
   becomes visible at any mobile width, leaving only the "HEMEN ARA" button.
   flex-direction:column stacks the links vertically instead of the desktop
   row; align-items/gap are already inherited from the base .nav__links rule. */
.nav__drawer .nav__links {
  display: flex;
  flex-direction: column;
}

.nav__drawer .nav__link {
  font-size: var(--fs-lg);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
  color: var(--color-text);
}

.nav__drawer .btn {
  margin-top: var(--space-4);
}

/* Cancel the desktop hover-dropdown positioning inside the mobile drawer —
   touch devices have no hover, so "Markalar" and its children (Wilo Servisi,
   Hidrofor Servisi) must render as a plain, always-visible indented list
   instead of an absolutely-positioned popover. */
.nav__drawer .sub-menu {
  position: static;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  min-width: 0;
  margin-block-start: var(--space-3);
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  text-align: center;
}

.nav__drawer .sub-menu .nav__link {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--color-text-dim);
  padding-block: var(--space-2);
}

.nav__drawer .menu-item-has-children > .nav__link::before {
  display: none;
}

@media (min-width: 900px) {
  .nav__links {
    display: flex;
  }

  .nav__actions .btn {
    display: inline-flex;
  }

  .nav__toggle {
    display: none;
  }

  .nav__drawer {
    display: none;
  }
}

/* Mobile brand-name word-break fix (2026-08-17):
*    Avril parent theme's theme.css sets "a, a:hover, a:active, button:focus { word-break: break-word; }"
   globally. Since .nav__logo is an <a> and is laid out with display:flex, that inherited
   word-break value let narrow mobile widths split words mid-character (e.g. "Merk"/"ez", "Is"/"ı")
   instead of wrapping at whole-word boundaries. This override restores normal word wrapping
   (breaks only between words, never inside a word) without touching the parent theme file.
   Class-selector specificity here is already higher than the parent's plain "a" selector,
   so this wins regardless of stylesheet load order. Desktop layout (>=900px) is unaffected
   since the logo fits on one line there regardless of this property. */
.nav__logo {
	  word-break: normal;
	  overflow-wrap: normal;
}