/* ============================================================================
   BERIDZE BASE, v1
   Reset plus the shared page shell. Reads tokens.css and adds nothing new.
   Load order is always: tokens.css, then base.css, then the page's own CSS.
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }

/* [hidden] must win, everywhere, on every surface.
   The browser's own rule is `[hidden] { display: none }`, a single attribute
   selector, so ANY class rule that sets display beats it. That is not a
   theoretical risk: it shipped the reset dialog onto the beat 8 reveal screen
   on page load, complete with a destructive "Clear responses" button, and it
   shipped the send confirmation onto the cockpit. Both were the first thing
   on screen. One rule here protects every panel, modal and overlay in the
   build. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Fluid steps are absolute so a user's browser zoom still wins over them. */
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-sm);
  text-wrap: balance;
}

h1 { font-size: var(--text-2xl); line-height: var(--leading-tight); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); }

p, li { max-width: var(--measure); text-wrap: pretty; }
p { margin: 0 0 var(--space-sm); }

a {
  color: var(--saperavi);
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.18em;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--saperavi-deep); }

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-xs);
}

button, input, select, textarea { font: inherit; color: inherit; }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.page  { max-width: var(--page-max);    margin-inline: auto; padding-inline: var(--gutter); }
.prose { max-width: var(--page-narrow); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--space-2xl); }
.section--tight { padding-block: var(--space-xl); }
.stack > * + * { margin-top: var(--space-sm); }
.stack-lg > * + * { margin-top: var(--space-lg); }

.surface-dark {
  background: var(--qvevri);
  color: var(--ink-inverse);
}

/* --------------------------------------------------------------------------
   Type helpers
   -------------------------------------------------------------------------- */

.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--bus-ink);
  margin: 0 0 var(--space-2xs);
}

.lede {
  font-size: var(--text-md);
  line-height: var(--leading-loose);
  color: var(--ink-soft);
  max-width: var(--measure-tight);
}

.meta {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--ink-faint);
}

.ui { font-family: var(--font-ui); }

/* A Georgian word gets translated in line, once. */
.geo { font-style: italic; }
.geo-gloss { color: var(--ink-faint); font-style: normal; }

/* --------------------------------------------------------------------------
   Buttons. Minimum target size is a thumb in bad light.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: var(--tap);
  padding: var(--space-2xs) var(--space-md);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-snug);
  border: 2px solid transparent;
  border-radius: var(--radius-full);
  background: var(--brand-fill);
  color: var(--brand-on-fill);
  cursor: pointer;
  text-decoration: none;
  transition:
    transform var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.btn:hover { background: var(--brand-fill-hover); color: var(--brand-on-fill); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(1px); }

.btn--ghost {
  background: transparent;
  color: var(--saperavi);
  border-color: var(--saperavi);
}
.btn--ghost:hover { background: var(--saperavi-wash); color: var(--saperavi-deep); }

/* The ghost button on a --qvevri section. --btn--ghost uses --saperavi, which
   is a dark red and disappears on a dark background. Use this instead on any
   dark surface, or flip the whole block with .on-dark.

   NOTE: it uses --brand-on-fill, not --paper. --paper FLIPS under .on-dark
   and would go dark on dark. Only the non-flipping tokens are safe here. */
.btn--ghost-invert {
  background: transparent;
  color: var(--brand-on-fill);
  border-color: rgba(255, 251, 244, 0.55);
}
.btn--ghost-invert:hover,
.btn--ghost-invert:focus-visible {
  background: rgba(255, 251, 244, 0.12);
  color: var(--brand-on-fill);
  border-color: var(--brand-on-fill);
  box-shadow: none;
}

.btn--bus { background: var(--bus-ink); }
.btn--bus:hover { background: #8E3714; }

.btn--lg { min-height: 4.25rem; font-size: var(--text-md); padding-inline: var(--space-lg); }
.btn--block { display: flex; width: 100%; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
  background: var(--paper-raised);
  border: var(--border-hair);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
}

.rule { border: 0; border-top: var(--border-hair); margin-block: var(--space-lg); }

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--space-sm); top: -10rem;
  z-index: var(--z-toast);
  background: var(--ink); color: var(--paper);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-family: var(--font-ui); font-size: var(--text-xs);
}
.skip-link:focus { top: var(--space-sm); color: var(--paper); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}