/* o-header.css — the shared OATS header. Byte-identical on oats.lv,
   oats.lv/tame/, pension.oats.lv and bmx.oats.lv; only the link list
   inside it differs, because bmx and the estimator navigate their own
   pages from here and have nowhere else to do it.

   56px sticky bar. Below 768px the hamburger opens a right-side
   drawer; at 768px and above the links sit inline and the hamburger
   is redundant, so it goes.

   The language pill stays in the bar at every width, immediately left
   of the hamburger, and is repeated at the drawer's bottom. It used to
   live only in the drawer below 768px, which put a language switch two
   taps away on exactly the devices where switching is most common. */

/* One z-index scale for every OATS property. Layering used to be
   decided per file: pension's sticky result bar sat at 100 and drew its
   "Download report PDF" button straight over the drawer's backdrop.
   Fixed chrome shares tier 40 because the top bar and a bottom result
   bar never overlap each other; both must sit under the backdrop.

   Above 60 sit only things that must clear an open drawer, and there
   are two: the skip link (100), which is the keyboard escape hatch,
   and pension's copy toast (110), which can only be triggered from the
   page behind the drawer and so never coincides with one. Nothing else
   may go above 60. */
:root {
  --z-bar: 40;
  --z-drawer-backdrop: 50;
  --z-drawer: 60;
}

.o-hdr {
  position: sticky;
  top: 0;
  z-index: var(--z-bar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 56px;
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
  /* env() falls back to 0 off-notch, so max() keeps the 24px floor. */
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
  box-sizing: border-box;
}

.o-hdr-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: #0a0a0b;
  text-decoration: none;
}
.o-hdr-brand svg {
  display: block;
  flex: none;
  width: 22px;
  height: 22px;
  color: #9d2235;
}
.o-hdr-word {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.o-hdr-r {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
}

/* Inline links, 768px and up. Below that the drawer takes over. */
.o-hdr-links {
  display: none;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.o-hdr-links a {
  color: #2d3138;
  text-decoration: none;
  white-space: nowrap;
}
.o-hdr-links a:hover { color: #9d2235; }

.o-hdr-burger {
  /* flex, not grid: grid stretches its auto rows to fill the 44px box,
     which pushed the bars 16px apart and left the close-state X open.
     flex sizes to content, so the pitch is the 2px bar + 4px gap the
     transforms below are tuned for. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.o-hdr-burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: #0a0a0b;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
body.o-drawer-open .o-hdr-burger span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
body.o-drawer-open .o-hdr-burger span:nth-child(2) { opacity: 0; }
body.o-drawer-open .o-hdr-burger span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

@media (min-width: 768px) {
  .o-hdr-links { display: flex; gap: 22px; }
  .o-hdr-burger { display: none; }
  .o-hdr-r { gap: 18px; }
}


/* ---- Drawer ------------------------------------------------------
   Right-side panel below 768px. It sits outside .o-hdr so the header's
   own stacking context cannot trap it, and so a sticky header that
   scrolls cannot drag the drawer with it. */

/* The backdrop covers the whole visual viewport, safe areas included.
   dvw/dvh rather than vw/vh so it still reaches the bottom edge while
   a mobile browser's toolbar is retracting; inset stays as the
   fallback for engines without the dynamic units. */
.o-drawer-backdrop {
  position: fixed;
  inset: 0;
  top: 0;
  left: 0;
  width: 100dvw;
  height: 100dvh;
  z-index: var(--z-drawer-backdrop);
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-out;
}

/* Fixed page chrome a property wants the drawer to cover. Hidden
   rather than restacked: a bar left visible under a 40% backdrop still
   reads as a live control and invites a tap that lands on the
   backdrop. visibility keeps its space, so nothing reflows. */
.o-bar { z-index: var(--z-bar); }
body.o-drawer-open .o-bar { visibility: hidden; }
body.o-drawer-open .o-drawer-backdrop {
  opacity: 1;
  pointer-events: auto;
}

.o-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  width: 280px;
  /* 280px is wider than the smallest phones once the safe area is
     taken out, so cap it and let the backdrop stay tappable. */
  max-width: 86vw;
  height: 100dvh;
  background: #fff;
  transform: translateX(100%);
  transition: transform 0.2s ease-out;
  /* Keeps a scroll gesture inside the panel from chaining to the page
     underneath once the list hits its end. */
  overscroll-behavior: contain;
  box-sizing: border-box;
}
body.o-drawer-open .o-drawer { transform: translateX(0); }

/* The panel is display:none until first open so its links stay out of
   the tab order and the accessibility tree without needing inert. */
.o-drawer[hidden],
.o-drawer-backdrop[hidden] { display: none; }

.o-drawer-nav {
  flex: 1 1 auto;
  overflow-y: auto;
  padding-top: max(0px, env(safe-area-inset-top));
}
.o-drawer-nav a {
  display: flex;
  align-items: center;
  height: 52px;
  padding: 0 24px;
  padding-right: max(24px, env(safe-area-inset-right));
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 18px;
  color: #0a0a0b;
  text-decoration: none;
  border-bottom: 0.5px solid #e5e5e5;
  box-sizing: border-box;
}
.o-drawer-nav a[aria-current] { color: #9d2235; }

/* Group break. The rule above it is the previous row's own border, so
   this is pure space: two lines stacked 8px apart would read as a
   mistake rather than a section. */
.o-drawer-sep { height: 8px; }

.o-drawer-foot {
  flex: none;
  border-top: 0.5px solid #e5e5e5;
  padding: 16px max(24px, env(safe-area-inset-right)) 16px 24px;
  /* max(), not 12px + inset: on a phone with a home indicator the sum
     pushed the pill further from the edge than the rest of the panel's
     spacing, and off-notch the inset is 0 so a bare inset would leave
     the pill flush against the bottom. */
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

/* LV/EN pill. One component, used both in the bar (768px and up) and
   pinned to the drawer's bottom below that. Each property builds the
   two children from its own routing (links on the Jinja sites, a link
   and a button in the estimator), so the styling targets any child
   rather than a fixed tag.

   Square by design: no border-radius anywhere in the house style. */
.o-lang {
  display: inline-flex;
  height: 32px;
  border: 1px solid #e5e5e5;
  border-radius: 0;
  box-sizing: border-box;
  flex: none;
}
:is(.o-hdr, .o-drawer) .o-lang > * {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  /* 44px minimum width per segment, from padding rather than a fixed
     width, so a longer code than EN/LV still fits. */
  min-width: 44px;
  padding: 0 12px;
  box-sizing: border-box;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #626974;
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
}
/* The visible pill is 32px, which is shorter than a comfortable touch
   target. Rather than inflate the control, each segment carries an
   invisible 44px-tall hit area centred on it. Width stays at 100% of
   the segment so neighbouring targets never overlap. */
:is(.o-hdr, .o-drawer) .o-lang > *::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 44px;
  transform: translateY(-50%);
}
:is(.o-hdr, .o-drawer) .o-lang > .is-on {
  color: #fff;
  background: #9d2235;
  cursor: default;
}

@media (min-width: 768px) {
  .o-drawer,
  .o-drawer-backdrop { display: none; }
}

/* Reduced motion: the panel still appears and still dims the page, it
   just arrives without the slide. */
@media (prefers-reduced-motion: reduce) {
  .o-drawer,
  .o-drawer-backdrop,
  .o-hdr-burger span { transition: none; }
}