/*
 * AERISIO Website 2.0 chrome — sticky announcement banner + header stack, header
 * CTA button, and the 2.0 four-row footer. Loaded ONLY by base-v2.hubl.html, so
 * the live 1.0 pages (global.css only) are unaffected. Reuses the shared
 * .site-header / .site-header__* / .langdd classes; this file adds v2-only bits
 * and overrides positioning under body.aerisio-v2.
 */

/* ── Sticky top stack (banner + header) ──────────────────────────────────── */
.v2-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* The v2 header sits inside the sticky stack, so it must NOT be fixed like the
   1.0 header. Neutralize the fixed positioning + the body padding the 1.0 layout
   relies on (global.css sets #content padding-top for the fixed bar). */
body.aerisio-v2 .site-header {
  position: static;
}

body.aerisio-v2 #content {
  padding-top: 0;
}

/* Full-bleed 2.0 navbar (end-to-end like aerisio.com). The shared header markup
   wraps its row in .container (capped at content-width), which cramps the nine
   links + switcher + CTA. Drop the cap for the v2 header so the bar spans the
   viewport; keep the gutter padding from .container for edge breathing room. */
.site-header--v2 .site-header__inner {
  max-width: none;
  position: relative;
}

/* Three-zone bar: logo in the left corner, nav links centered, language switcher +
   CTA in the right corner. Desktop only — below 768px the nav is the shared
   hamburger overlay (global.css), which must keep its fixed positioning. The nav
   is absolutely centered so it sits dead-centre regardless of the logo / right-
   group widths; the right group is pushed to the corner with margin-left:auto. */
@media (min-width: 768px) {
  .site-header--v2 .site-header__nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .site-header--v2 .site-header__lang {
    margin-left: auto;
  }
}

/* CTA button in the header — compact so it sits neatly in the bar. */
.site-header__cta.btn {
  padding: 9px 18px;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
}

/* Centered links sit between the two corners, so keep the spacing compact enough
   to avoid crowding the logo / right group on mid-size desktops. */
.site-header--v2 .site-header__nav ul {
  gap: 20px;
}

.site-header--v2 .site-header__nav a {
  font-size: 15px;
}

@media (max-width: 767px) {
  /* On mobile the nav collapses into the shared hamburger overlay; keep the CTA
     out of the top bar so it doesn't crowd the logo + hamburger. It reappears
     inside the overlay via the nav list, and Contact is already a nav link. */
  .site-header__cta.btn {
    display: none;
  }
}

/* ── Announcement banner ─────────────────────────────────────────────────── */
.v2-announce {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 9px var(--gutter);
  background: var(--brand-color);
  color: var(--background-color);
  font-size: 14px;
  text-align: center;
  position: relative;
}

.v2-announce:hover {
  text-decoration: none;
}

.v2-announce__text {
  display: inline;
}

/* The link cue underlines on hover; the arrow is part of it (spec). */
.v2-announce:hover .v2-announce__cue {
  text-decoration: underline;
}

.v2-announce__close {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.15s ease;
}

.v2-announce__close:hover {
  opacity: 1;
}

@media (max-width: 600px) {
  .v2-announce {
    font-size: 13px;
    padding-right: 40px;
    padding-left: 16px;
  }
}

/* ── Footer (Website 2.0) ────────────────────────────────────────────────── */
.v2-footer__inner {
  display: flex;
  flex-direction: column;
  /* FR-2026-08-17 #9: footer flush-left (was centered). */
  align-items: flex-start;
  gap: 22px;
  text-align: left;
}

.v2-footer__tagline {
  margin: 0;
  max-width: 40ch;
  font-size: 17px;
  font-weight: 600;
}

.v2-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  /* FR-2026-08-17 #9: footer nav flush-left. */
  justify-content: flex-start;
  gap: 10px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.v2-footer__nav a {
  color: var(--brand-color);
  font-size: 14px;
}

.v2-footer__contact {
  margin: 0;
  font-size: 14px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.v2-footer__contact a:hover {
  text-decoration: underline;
}

/* Sub-groups (contact + address / registration + trademark): tight internal
   spacing so each reads as one unit, while the footer column's 22px gap
   separates the groups. */
.v2-footer__group {
  display: grid;
  gap: 4px;
}

.v2-footer__legal {
  margin: 0;
  max-width: 70ch;
  color: var(--muted-text-color);
  font-size: 13px;
  line-height: 1.6;
}

.v2-footer__address {
  margin: 0;
  font-style: normal;
  color: var(--muted-text-color);
  font-size: 13px;
  line-height: 1.6;
}

/* Wrap-safe dot-separated meta rows: each item is an unbreakable unit and the
   `·` is generated at the END of the preceding item, so lines wrap only at
   item boundaries and a wrapped line never opens with a separator. */
.v2-footer__items {
  display: flex;
  flex-wrap: wrap;
  column-gap: 8px;
  row-gap: 2px;
  /* The 70ch prose cap (.v2-footer__legal) would force early wraps here; item
     rows are short metadata and should wrap only when space runs out. */
  max-width: none;
}

.v2-footer__items > * {
  white-space: nowrap;
}

.v2-footer__items > *:not(:last-child)::after {
  content: '·';
  margin-left: 8px;
}

/* ── Gallery lightbox (Website 2.0) ──────────────────────────────────────────
   Simple overlay for the Gallery module's optional image lightbox, injected by
   the enhancer in base-v2.hubl.html. Click anywhere / Esc to close. */
.v2-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vmin;
  background: rgba(0, 0, 0, 0.82);
  cursor: zoom-out;
}

.v2-lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}