/*
  ============================================================
  GEPVOLT Header - Topbar, Logo, Header structure
  ============================================================
  Navigation (wp-block-navigation) lives in gp-wp-bridge.css.
  Mobile-first: base = smartphone; desktop via min-width.
  All values exclusively from gp-variables.css.
*/

/* ===== Skip link (a11y) =====
   Clip pattern instead of left:-9999px -> creates no horizontal scroll width. */
.gp-skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.gp-skip-link:focus,
.gp-skip-link:focus-visible {
  position: fixed;
  left: var(--gp-space-xs);
  top: var(--gp-space-xs);
  z-index: 1000;
  width: auto;
  height: auto;
  margin: 0;
  clip: auto;
  padding: var(--gp-space-s) var(--gp-space-m);
  background: var(--gp-navy);
  color: var(--gp-text-on-dark);
  border-radius: var(--gp-radius-md);
  text-decoration: none;
  font-weight: 600;
  outline: var(--gp-focus-width) solid var(--gp-bg-white);
  outline-offset: var(--gp-focus-offset);
}

/* ===== Sticky Header ===== */
.gp-site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--gp-bg-light);
  border-bottom: 3px solid var(--gp-green);
  box-shadow: var(--gp-shadow-header);
  overflow: visible;
}

.gp-site-header + main {
  margin-block-start: 0;
}

/* ===== Topbar =====
   Vertical padding is set inline in the block markup (0) on purpose: otherwise
   WP applies a 1.25em default padding via .wp-block-group.has-background, which
   a plain .gp-topbar rule (lower specificity) would not beat. Bar height =
   touch target (44px) of the links. For font size see .gp-topbar-inner. */
.gp-topbar {
  background: var(--gp-bg-light);
  border-bottom: 1px solid var(--gp-border);
}

/* Mobile-first: utility bar split into two groups -- contact icons left,
   language switcher right (the upper-right corner is where users look for the
   language selector). Contact links are icon-only (label hidden via
   .gp-topbar-label, kept for screen readers); from 1024px (desktop nav) the
   text is added and the whole row is right-aligned (see media query). */
.gp-topbar-inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gp-space-2xs);
  font-size: var(--gp-topbar-fs);
  color: var(--gp-text-heading);
}


.gp-topbar-inner .gp-topbar-link {
  margin: 0;
  line-height: 1.2;
}

.gp-topbar-inner .gp-topbar-link a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem; /* icon-to-label spacing; no matching token available */
  min-height: var(--gp-touch);
  min-width: var(--gp-touch); /* square touch target in icon-only mode */
  color: var(--gp-text-heading);
  text-decoration: none;
  transition: color var(--gp-trans-fast);
}

/* Contact icons: tinted via mask -> follow currentColor (hover/focus) */
.gp-topbar-inner .gp-topbar-link a::before {
  content: '';
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  background-color: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}

.gp-topbar-inner .gp-topbar-link--mail a::before {
  -webkit-mask-image: var(--gp-icon-mail);
  mask-image: var(--gp-icon-mail);
}

.gp-topbar-inner .gp-topbar-link--phone a::before {
  -webkit-mask-image: var(--gp-icon-phone);
  mask-image: var(--gp-icon-phone);
}

.gp-topbar-inner .gp-topbar-link a:hover,
.gp-topbar-inner .gp-topbar-link a:focus-visible {
  color: var(--gp-green);
}

/* Underline only on interaction -> clear link affordance */
.gp-topbar-inner .gp-topbar-link a:hover .gp-topbar-label,
.gp-topbar-inner .gp-topbar-link a:focus-visible .gp-topbar-label {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.gp-topbar-inner .gp-topbar-link a:focus-visible {
  outline: var(--gp-focus-width) solid var(--gp-focus-color);
  outline-offset: var(--gp-focus-offset);
  border-radius: var(--gp-radius-sm);
}

/* Label hidden on mobile (icon-only), but kept for screen readers */
.gp-topbar-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Language switcher (DE | EN).
   margin-inline-start:auto pushes it to the right edge (contact group left,
   language right); margin-block:0 instead of margin:0 so the auto inline
   margin survives. */
.gp-topbar-inner .gp-lang-switch,
.gp-topbar-inner nav.gp-lang-switch {
  margin-block: 0;
  margin-inline-start: auto;
  margin-inline-end: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem; /* separator-glyph spacing; no matching token available */
  font-weight: 600;
  min-height: var(--gp-touch);
}

/* Globe glyph before the language switch -- the language-agnostic cue that
   this control changes the site language. Mobile only; on desktop the row has
   enough context (see media query, where it is hidden). */
.gp-topbar-inner .gp-lang-switch::before {
  content: '';
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin-inline-end: var(--gp-space-2xs);
  background-color: currentColor;
  -webkit-mask: center / contain no-repeat var(--gp-icon-globe);
  mask: center / contain no-repeat var(--gp-icon-globe);
}

.gp-topbar-inner .gp-lang-switch a {
  display: inline-flex;
  align-items: center;
  min-height: var(--gp-touch);
  padding-inline: var(--gp-space-2xs);
  color: var(--gp-text-heading);
  text-decoration: none;
  transition: color var(--gp-trans-fast);
}

.gp-topbar-inner .gp-lang-switch a:hover {
  color: var(--gp-green);
}

.gp-topbar-inner .gp-lang-switch a:focus-visible {
  color: var(--gp-green);
  outline: var(--gp-focus-width) solid var(--gp-focus-color);
  outline-offset: var(--gp-focus-offset);
  border-radius: var(--gp-radius-sm);
}

.gp-topbar-inner .gp-lang-switch [aria-current="true"] {
  color: var(--gp-green);
  font-weight: 700;
}

.gp-topbar-inner .gp-lang-switch [aria-hidden="true"] {
  color: var(--gp-text-muted);
  font-weight: 400;
}

/* ===== Header main row ===== */
.gp-header-main {
  background: var(--gp-bg-white);
  padding-top: var(--gp-space-s);
  padding-bottom: var(--gp-space-s);
  overflow: visible;
}

/* Mobile-first: logo left, burger right */
.gp-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: var(--gp-space-m);
}

.gp-logo {
  margin: 0;
  flex: 0 0 auto;
  /* Center the image precisely in the figure box - otherwise it sticks to the
     top edge, since the figure can end up taller than the <img> due to the flex row */
  display: flex;
  align-items: center;
}

/* Logo width via CSS; height:auto -> the width/height attributes on the <img>
   only provide the aspect ratio (reserves space, avoids CLS). */
.gp-logo img {
  display: block;
  width: 150px;
  height: auto;
}

/* Nav block fills the remaining width */
.gp-header-row > .wp-block-navigation.gp-nav {
  flex: 1 1 auto;
  min-width: 0;
}

/* ===== From 1024px (desktop nav): topbar right-aligned, contact links with label =====
   Up to 1024px the topbar stays icon-only on purpose: it saves space, avoids
   showing the full number twice (topbar + call CTA in the flyout) and keeps
   the utility row calm. On mobile the flyout CTA handles the call action. */
@media (min-width: 1024px) {
  .gp-topbar-inner {
    justify-content: flex-end;
    gap: var(--gp-space-s) var(--gp-space-m);
  }

  /* Label visible -> icon + text */
  .gp-topbar-label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  /* No more square minimum size; icon and text left-aligned */
  .gp-topbar-inner .gp-topbar-link a {
    min-width: 0;
    justify-content: flex-start;
  }

  /* The whole row is right-aligned on desktop, so drop the mobile auto-margin
     (would otherwise stretch the contact group away from the language switch)
     and the globe glyph (the labelled row is self-explanatory). */
  .gp-topbar-inner .gp-lang-switch,
  .gp-topbar-inner nav.gp-lang-switch {
    margin-inline-start: 0;
    padding-inline-start: var(--gp-space-m);
  }

  .gp-topbar-inner .gp-lang-switch::before {
    display: none;
  }
}

/* ===== Desktop from 1024px ===== */
@media (min-width: 1024px) {
  .gp-header-main {
    padding-top: var(--gp-space-m);
    padding-bottom: var(--gp-space-m);
  }

  /* Nav vertically centered to the (two-line) logo */
  .gp-header-row {
    align-items: center;
    gap: var(--gp-space-l);
  }

  .gp-logo img {
    width: 180px;
  }

  .gp-header-row > .wp-block-navigation.gp-nav {
    justify-content: flex-end;
  }
}