/* App-layer additions on top of the frozen design CSS (_design is never
   edited). Everything here is interaction-state only or hidden-by-default
   overlay chrome — zero impact on the static pixel baselines.

   1) Focus visibility: the design zeroes outlines on its underline-style
      inputs with no replacement (.footer-cta-form input:focus sets
      outline:none and keeps the same 30%-white underline), so keyboard users
      get no focus cue. Restore a design-consistent one: solid white underline
      on the blue footer CTA, and the design's own blue (#1E25C7) elsewhere. */
.footer-cta-form input:focus {
  border-bottom-color: #ffffff;
}

.newsletter-form .form-control:focus {
  border-color: #1e25c7;
  box-shadow: 0 0 0 0.25rem rgba(30, 37, 199, 0.25);
}

/* 2) The design's CTA <button>s (.blue-btn / .text-btn) don't set a pointer
      cursor; anchors get it for free, buttons don't. */
.blue-btn,
.text-btn,
button.btn {
  cursor: pointer;
}

/* 3) TEDxCluj photo credit (owner 2026-07-02; emitted by design.ts
      placeSpeakingPhoto under the design's vision-image-main slot). Below
      992px the design absolutely positions .vision-image-main at the
      column's bottom-right (responsive.css) — pin the credit just under the
      photo there so the attribution stays visibly attached to it. At lg+ the
      credit sits in normal flow under the image (ms-5 matches the image's
      48px margin-left). */
@media (max-width: 991px) {
  .vision-photo-credit {
    position: absolute;
    right: 20px;
    bottom: -148px;
  }
}

/* 4) The home hero's decorative bottom wordmark (.hero-alt-bottom-logo) is a
      full-size absolutely-positioned image box (style.css: width/height 100%,
      bottom:-350px, z-index:9) whose transparent area lies OVER the footer at
      1440x900 and swallowed every footer link click on the lander (found
      2026-07-02 wiring the legal links). Decorative chrome must never eat
      clicks; zero pixel impact. */
.hero-alt-bottom-logo {
  pointer-events: none;
}

/* 5) Legal drawer (owner directive 2026-07-02; src/components/LegalDrawer.tsx).
      A right-side overlay sheet: pure white, black text, the design's blue
      (#1E25C7) for links, Zwizz headings over the FragmentMono body the site
      already uses. Closed by default — off-canvas AND visibility:hidden — so
      it contributes zero pixels to the visual baselines. Stacks above the
      mobile menu (z-index 9999 in responsive.css). */
.legal-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(27, 31, 26, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  z-index: 10000;
}

.legal-drawer-root.is-open .legal-drawer-overlay {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease;
}

.legal-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(520px, 100vw);
  background: #fff;
  color: #000;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.35s ease, visibility 0s linear 0.35s;
  z-index: 10001;
  display: flex;
  flex-direction: column;
}

.legal-drawer-root.is-open .legal-drawer {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.35s ease;
}

.legal-drawer-head {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  padding: 20px 24px 0;
}

/* the design's close-btn.svg idiom; style.css hides .close-btn outside the
   mobile menu, so the drawer uses its own class */
.legal-drawer-close {
  background: none;
  border: 0;
  padding: 8px;
  line-height: 0;
  cursor: pointer;
}

.legal-drawer-close:focus-visible {
  outline: 2px solid #1e25c7;
  outline-offset: 2px;
}

.legal-drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px 40px 48px;
  -webkit-overflow-scrolling: touch;
}

.legal-doc-title {
  font-family: "Zwizz", sans-serif;
  font-size: 32px;
  line-height: 1.2;
  color: #000;
  margin-bottom: 8px;
}

.legal-doc-updated {
  font-size: 13px;
  color: #000;
  opacity: 0.6;
  margin-bottom: 28px;
}

.legal-doc h3 {
  font-family: "Zwizz", sans-serif;
  font-size: 20px;
  color: #000;
  margin: 32px 0 12px;
}

.legal-doc p,
.legal-doc li {
  font-size: 15px;
  line-height: 1.7;
  color: #000;
}

.legal-doc p {
  margin-bottom: 16px;
}

.legal-doc ul {
  padding-left: 20px;
  margin-bottom: 16px;
}

.legal-doc a {
  color: #1e25c7;
  text-decoration: underline;
}

.legal-doc-permalink {
  margin-top: 32px;
}

@media (max-width: 767px) {
  .legal-drawer-body {
    padding: 4px 24px 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .legal-drawer,
  .legal-drawer-overlay {
    transition: none;
  }
}