/* =============================================================================
   ZWF Components
   Header, navigation, footer, buttons, hero, icons. Every value is a token.
   Depends on tokens.css + layout.css.
   ============================================================================= */

/* Icons ------------------------------------------------------------------------ */
.zwf-icon {
  display: inline-block;
  inline-size: 1em;
  block-size: 1em;
  fill: currentColor;
  stroke: currentColor;
  vertical-align: -0.125em;
  flex: none;
}
.zwf-icon--lg { inline-size: 1.5em; block-size: 1.5em; }

/* Buttons -------------------------------------------------------------------- */
.zwf-btn {
  --_bg: var(--zwf-color-primary);
  --_fg: var(--zwf-color-primary-contrast);
  --_border: var(--zwf-color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--zwf-space-2xs);
  padding: 0.7rem 1.35rem;
  font-size: var(--zwf-text-sm);
  font-weight: var(--zwf-weight-semibold);
  line-height: 1;
  letter-spacing: var(--zwf-tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--_fg);
  background-color: var(--_bg);
  border: 1px solid var(--_border);
  border-radius: var(--zwf-radius-sm);
  transition: background-color var(--zwf-transition-fast) var(--zwf-ease-standard),
    border-color var(--zwf-transition-fast) var(--zwf-ease-standard),
    color var(--zwf-transition-fast) var(--zwf-ease-standard),
    transform var(--zwf-transition-fast) var(--zwf-ease-standard);
}
.zwf-btn:hover { --_bg: var(--zwf-color-primary-hover); --_border: var(--zwf-color-primary-hover); color: var(--_fg); }
.zwf-btn:active { transform: translateY(1px); }

.zwf-btn--secondary {
  --_bg: transparent;
  --_fg: var(--zwf-color-primary);
  --_border: var(--zwf-color-border-strong);
}
.zwf-btn--secondary:hover { --_bg: var(--zwf-color-primary-subtle); --_fg: var(--zwf-color-primary-hover); --_border: var(--zwf-color-primary); }

.zwf-btn--ghost {
  --_bg: transparent;
  --_fg: currentColor;
  --_border: currentColor;
}
.zwf-btn--ghost:hover { --_bg: color-mix(in srgb, currentColor 12%, transparent); --_fg: currentColor; }

.zwf-btn--sm { padding: 0.5rem 1rem; font-size: var(--zwf-text-xs); }
.zwf-btn--lg { padding: 0.9rem 1.75rem; font-size: var(--zwf-text-base); }

/* =============================================================================
   Header
   ============================================================================= */
.zwf-header {
  position: relative;
  z-index: var(--zwf-z-header);
  background-color: var(--zwf-color-paper);
  border-bottom: 1px solid var(--zwf-color-border);
}
.zwf-header[data-sticky="true"] {
  position: sticky;
  top: 0;
}
.zwf-header[data-variant="transparent"] {
  background-color: transparent;
  border-bottom-color: transparent;
  color: var(--zwf-color-ink-inverse);
}
.zwf-header[data-variant="transparent"] .zwf-nav__link,
.zwf-header[data-variant="transparent"] .zwf-header__brandtext { color: inherit; }

.zwf-header__inner {
  display: flex;
  align-items: center;
  gap: var(--zwf-space-lg);
  width: 100%;
  max-width: var(--zwf-size-2xl);
  margin-inline: auto;
  padding: var(--zwf-space-xs) var(--zwf-gutter);
}

.zwf-header__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  flex: none;
}
.zwf-header__logo { block-size: 2.25rem; width: auto; }
.zwf-header__brandtext {
  font-family: var(--zwf-font-heading);
  font-weight: var(--zwf-weight-bold);
  font-size: var(--zwf-text-lg);
  letter-spacing: var(--zwf-tracking-tight);
  color: var(--zwf-color-ink);
}

.zwf-header__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  margin-inline-start: auto;
  color: inherit;
  border-radius: var(--zwf-radius-sm);
}
.zwf-header__toggle .zwf-icon { inline-size: 1.5rem; block-size: 1.5rem; }
.zwf-header__toggle[aria-expanded="true"] .zwf-icon--menu { display: none; }
.zwf-header__toggle:not([aria-expanded="true"]) .zwf-icon--close { display: none; }

.zwf-header__actions {
  display: flex;
  align-items: center;
  gap: var(--zwf-space-md);
  margin-inline-start: auto;
}

/* =============================================================================
   Primary navigation
   ============================================================================= */
.zwf-nav__list {
  display: flex;
  align-items: center;
  gap: var(--zwf-space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}
.zwf-nav__item { position: relative; display: flex; align-items: center; }

.zwf-nav__link {
  display: inline-flex;
  align-items: center;
  padding: var(--zwf-space-2xs) var(--zwf-space-2xs);
  font-size: var(--zwf-text-sm);
  font-weight: var(--zwf-weight-medium);
  text-decoration: none;
  color: var(--zwf-color-ink);
  border-radius: var(--zwf-radius-sm);
  transition: color var(--zwf-transition-fast) var(--zwf-ease-standard);
}
.zwf-nav__link:hover { color: var(--zwf-color-primary); }
.zwf-nav__link[aria-current] {
  color: var(--zwf-color-primary);
  font-weight: var(--zwf-weight-semibold);
}

.zwf-nav__disclosure {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--zwf-space-3xs);
  color: var(--zwf-color-ink-muted);
  border-radius: var(--zwf-radius-sm);
}
.zwf-nav__disclosure .zwf-icon {
  transition: transform var(--zwf-transition-fast) var(--zwf-ease-standard);
}
.zwf-nav__disclosure[aria-expanded="true"] .zwf-icon { transform: rotate(180deg); }

.zwf-nav__submenu {
  position: absolute;
  inset-block-start: calc(100% + 0.5rem);
  inset-inline-start: 0;
  min-inline-size: 14rem;
  padding: var(--zwf-space-2xs);
  list-style: none;
  margin: 0;
  background-color: var(--zwf-color-paper);
  border: 1px solid var(--zwf-color-border);
  border-radius: var(--zwf-radius-md);
  box-shadow: var(--zwf-shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.35rem);
  transition: opacity var(--zwf-transition-fast) var(--zwf-ease-standard),
    transform var(--zwf-transition-fast) var(--zwf-ease-standard),
    visibility 0s linear var(--zwf-transition-fast);
  z-index: var(--zwf-z-dropdown);
}
.zwf-nav__item--has-children:hover .zwf-nav__submenu,
.zwf-nav__item--has-children:focus-within .zwf-nav__submenu,
.zwf-nav__disclosure[aria-expanded="true"] + .zwf-nav__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
.zwf-nav__sublink {
  display: block;
  padding: var(--zwf-space-2xs) var(--zwf-space-xs);
  font-size: var(--zwf-text-sm);
  text-decoration: none;
  color: var(--zwf-color-ink);
  border-radius: var(--zwf-radius-sm);
}
.zwf-nav__sublink:hover { background-color: var(--zwf-color-surface); color: var(--zwf-color-primary); }
.zwf-nav__sublink[aria-current] { color: var(--zwf-color-primary); font-weight: var(--zwf-weight-semibold); }

/* Utility nav + language selector ---------------------------------------------- */
.zwf-utilnav__list,
.zwf-langselector__list {
  display: flex;
  align-items: center;
  gap: var(--zwf-space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}
.zwf-utilnav__link,
.zwf-langselector a {
  font-size: var(--zwf-text-xs);
  font-weight: var(--zwf-weight-medium);
  text-decoration: none;
  color: var(--zwf-color-ink-muted);
}
.zwf-utilnav__link:hover,
.zwf-langselector a:hover { color: var(--zwf-color-primary); }
.zwf-langselector { border-left: 1px solid var(--zwf-color-border); padding-left: var(--zwf-space-md); }
.zwf-langselector a[aria-current] { color: var(--zwf-color-primary); font-weight: var(--zwf-weight-bold); }

/* =============================================================================
   Mobile navigation
   ============================================================================= */
.zwf-mobile-nav {
  display: none;
  border-bottom: 1px solid var(--zwf-color-border);
  background-color: var(--zwf-color-paper);
}
.zwf-mobile-nav:not([hidden]) { display: block; }
.zwf-mobile-nav > nav {
  max-width: var(--zwf-size-2xl);
  margin-inline: auto;
  padding: var(--zwf-space-sm) var(--zwf-gutter) var(--zwf-space-md);
}
.zwf-mobile-nav__list, .zwf-mobile-nav__sublist { list-style: none; margin: 0; padding: 0; }
.zwf-mobile-nav__list > li { border-bottom: 1px solid var(--zwf-color-border); }
.zwf-mobile-nav__list > li:last-child { border-bottom: 0; }
.zwf-mobile-nav a {
  display: block;
  padding: var(--zwf-space-xs) 0;
  font-size: var(--zwf-text-base);
  font-weight: var(--zwf-weight-medium);
  text-decoration: none;
  color: var(--zwf-color-ink);
}
.zwf-mobile-nav__sublist { padding-left: var(--zwf-space-sm); padding-bottom: var(--zwf-space-2xs); }
.zwf-mobile-nav__sublist a { font-size: var(--zwf-text-sm); font-weight: var(--zwf-weight-regular); color: var(--zwf-color-ink-muted); }

/* =============================================================================
   Breadcrumbs
   ============================================================================= */
.zwf-breadcrumbs {
  border-bottom: 1px solid var(--zwf-color-border);
  background-color: var(--zwf-color-surface);
}
.zwf-breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--zwf-space-2xs);
  list-style: none;
  margin: 0;
  max-width: var(--zwf-size-2xl);
  margin-inline: auto;
  padding: var(--zwf-space-2xs) var(--zwf-gutter);
  font-size: var(--zwf-text-xs);
  color: var(--zwf-color-ink-muted);
}
.zwf-breadcrumbs__item { display: flex; align-items: center; gap: var(--zwf-space-2xs); }
.zwf-breadcrumbs__item + .zwf-breadcrumbs__item::before {
  content: "";
  inline-size: 0.34em;
  block-size: 0.34em;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.6;
}
.zwf-breadcrumbs a { color: inherit; text-decoration: none; }
.zwf-breadcrumbs a:hover { color: var(--zwf-color-primary); text-decoration: underline; }
.zwf-breadcrumbs [aria-current="page"] { color: var(--zwf-color-ink); font-weight: var(--zwf-weight-medium); }

/* =============================================================================
   Hero
   Variants via data-variant: centered | split | image-background | minimal
   ============================================================================= */
.zwf-hero {
  position: relative;
  padding-block: clamp(var(--zwf-space-2xl), 6vw, var(--zwf-space-4xl));
  background-color: var(--zwf-color-surface);
  overflow: hidden;
}
.zwf-hero__inner {
  position: relative;
  z-index: var(--zwf-z-base);
  width: 100%;
  max-width: var(--zwf-container);
  margin-inline: auto;
  padding-inline: var(--zwf-gutter);
}
.zwf-hero__heading {
  font-size: var(--zwf-text-display);
  line-height: var(--zwf-leading-tight);
  max-width: 20ch;
}
.zwf-hero__subheading {
  margin-top: var(--zwf-space-sm);
  font-size: var(--zwf-text-xl);
  color: var(--zwf-color-ink-muted);
  max-width: 52ch;
}
.zwf-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zwf-space-sm);
  margin-top: var(--zwf-space-lg);
}

.zwf-hero[data-variant="centered"] { text-align: center; }
.zwf-hero[data-variant="centered"] .zwf-hero__heading,
.zwf-hero[data-variant="centered"] .zwf-hero__subheading { margin-inline: auto; }
.zwf-hero[data-variant="centered"] .zwf-hero__actions { justify-content: center; }

.zwf-hero[data-variant="minimal"] {
  padding-block: var(--zwf-space-xl);
  background-color: transparent;
}

.zwf-hero[data-variant="image-background"] { color: var(--zwf-color-ink-inverse); background-color: var(--zwf-color-surface-inverse); }
.zwf-hero[data-variant="image-background"] .zwf-hero__heading { color: inherit; }
.zwf-hero[data-variant="image-background"] .zwf-hero__subheading { color: rgba(255, 255, 255, 0.82); }
.zwf-hero__bg {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  opacity: 0.35;
}
.zwf-hero[data-variant="image-background"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.55));
}

@media (min-width: 48em) {
  .zwf-hero[data-variant="split"] .zwf-hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--zwf-space-xl);
    align-items: center;
  }
}

/* =============================================================================
   Footer
   ============================================================================= */
.zwf-footer {
  flex: none;
  margin-top: var(--zwf-space-3xl);
  background-color: var(--zwf-color-surface-inverse);
  color: var(--zwf-color-ink-inverse);
}
.zwf-footer a { color: inherit; text-decoration: none; }
.zwf-footer a:hover { text-decoration: underline; }

.zwf-footer__inner {
  display: grid;
  gap: var(--zwf-space-xl);
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  max-width: var(--zwf-size-2xl);
  margin-inline: auto;
  padding: var(--zwf-space-2xl) var(--zwf-gutter);
}
.zwf-footer__org {
  font-family: var(--zwf-font-heading);
  font-weight: var(--zwf-weight-bold);
  font-size: var(--zwf-text-lg);
}
.zwf-footer__address { margin-top: var(--zwf-space-2xs); color: rgba(255, 255, 255, 0.7); white-space: pre-line; }
.zwf-footer__contact { list-style: none; margin: var(--zwf-space-sm) 0 0; padding: 0; display: grid; gap: var(--zwf-space-3xs); }
.zwf-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--zwf-space-2xs); }
.zwf-footer__nav :is(h2, h3) { font-size: var(--zwf-text-sm); text-transform: uppercase; letter-spacing: var(--zwf-tracking-wide); color: rgba(255, 255, 255, 0.6); margin-bottom: var(--zwf-space-xs); }

.zwf-footer__bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zwf-space-sm);
  justify-content: space-between;
  align-items: center;
  max-width: var(--zwf-size-2xl);
  margin-inline: auto;
  padding: var(--zwf-space-sm) var(--zwf-gutter);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--zwf-text-xs);
  color: rgba(255, 255, 255, 0.6);
}
.zwf-footer__legal { display: flex; flex-wrap: wrap; gap: var(--zwf-space-md); list-style: none; margin: 0; padding: 0; }

/* Social links ------------------------------------------------------------------ */
.zwf-social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zwf-space-2xs);
  list-style: none;
  margin: var(--zwf-space-md) 0 0;
  padding: 0;
}
.zwf-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--zwf-radius-full);
  color: inherit;
  transition: background-color var(--zwf-transition-fast) var(--zwf-ease-standard),
    border-color var(--zwf-transition-fast) var(--zwf-ease-standard);
}
.zwf-social__link:hover { background-color: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.4); }
.zwf-social__link .zwf-icon { inline-size: 1.1rem; block-size: 1.1rem; }

/* Newsletter placeholder slot ------------------------------------------------ */
.zwf-footer__newsletter:empty { display: none; }

/* =============================================================================
   Responsive: collapse the desktop nav below the medium breakpoint
   ============================================================================= */
@media (max-width: 47.999em) {
  .zwf-header__inner { gap: var(--zwf-space-sm); }
  .zwf-header__toggle { display: inline-flex; }
  .zwf-nav,
  .zwf-header__actions { display: none; }
}