/* ============================================================
   ANDOMIR — brand primitives
   The component layer described in section 5 of the brand
   handoff ("Implementation patterns"), expressed once here so
   pages never re-declare a colour, radius or duration.

   Depends on tokens.css. Load that first.

   Rule zero: corners are sharp. `border-radius: 0` everywhere
   except avatars and status dots. It is the single most
   brand-defining declaration in this file — do not soften it
   per-component.
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--an-ink);
  color: var(--an-wool);
  font-family: var(--an-font-body);
  font-size: var(--an-text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Romanian body copy: ș/ț must render with comma-below, and paragraphs
   should not leave orphans. Both families cover the diacritics. */
p { margin: 0; text-wrap: pretty; }

/* height:auto is load-bearing — every brand asset carries intrinsic width/height
   attributes, so without it a constrained width squashes the artwork and the
   mark stops being square. */
img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--an-ochre); text-decoration: none; transition: color var(--an-dur-fast) var(--an-ease); }
a:hover { color: var(--an-ochre-700); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--an-focus);
}

/* ── Layout ───────────────────────────────────────────────── */
.an-container {
  width: 100%;
  max-width: var(--an-container);
  margin-inline: auto;
  padding-inline: var(--an-space-5);
}

/* 12-column grid. Children opt in with `--span`. */
.an-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--an-space-5);
}
.an-grid > * { grid-column: span var(--span, 12); }

/* Sections are separated by a 1px rule, never by a colour block —
   the brand has exactly one background colour. */
.an-section {
  padding-block: var(--an-space-9);
  border-bottom: var(--an-border);
}
.an-section:last-child { border-bottom: 0; }

/* Every section opens: mono eyebrow → H2 → body. */
.an-section-head {
  display: flex;
  flex-direction: column;
  gap: var(--an-space-3);
  max-width: 64ch;
  margin-bottom: var(--an-space-7);
}

/* ── Type ─────────────────────────────────────────────────── */
.an-hero, .an-h1, .an-h2, .an-h3 {
  margin: 0;
  font-family: var(--an-font-display);
  font-weight: 600;
  color: var(--an-wool);
}
.an-hero { font-size: var(--an-text-hero); letter-spacing: -2px;   line-height: 1.05; }
.an-h1   { font-size: var(--an-text-h1);   letter-spacing: -1px;   line-height: 1.1; }
.an-h2   { font-size: var(--an-text-h2);   letter-spacing: -0.5px; line-height: 1.2; }
.an-h3   { font-size: var(--an-text-h3);   letter-spacing: 0;      line-height: 1.3; }

.an-body  { font-size: var(--an-text-body);  line-height: 1.6;  color: var(--an-wool-dim); }
.an-small { font-size: var(--an-text-small); line-height: 1.55; color: var(--an-wool-dim); }

/* Eyebrow uses clay-300, not full clay: at 12px the solid clay
   (#A8443C, 2.9:1) fails AA and cannot reach the large-text exemption. */
.an-eyebrow {
  font-family: var(--an-font-mono);
  font-weight: 500;
  font-size: var(--an-text-label);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--an-clay-300);
  line-height: 1.4;
}
.an-eyebrow--wool { color: var(--an-wool); }

.an-mono { font-family: var(--an-font-mono); font-size: 13px; color: var(--an-wool-dim); }

/* ── Buttons ──────────────────────────────────────────────── */
.an-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--an-space-2);
  min-height: 44px; /* hit target */
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: var(--an-radius-0);
  font-family: var(--an-font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-align: center;
  transition: background var(--an-dur-fast) var(--an-ease),
              border-color var(--an-dur-fast) var(--an-ease),
              color var(--an-dur-fast) var(--an-ease);
}

/* No lift, no shadow, no scale on hover — the brand is flat. */
.an-btn--primary {
  background: var(--an-ochre);
  color: var(--an-ink);
}
.an-btn--primary:hover { background: var(--an-ochre-700); color: var(--an-ink); }

.an-btn--secondary {
  background: transparent;
  border-color: var(--an-wool-dim);
  color: var(--an-wool);
  font-weight: 400;
}
.an-btn--secondary:hover { border-color: var(--an-ochre); color: var(--an-ochre); }

.an-btn--ghost {
  padding: 0 0 6px;
  min-height: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--an-ochre);
  color: var(--an-ochre);
  font-weight: 400;
}
.an-btn--ghost:hover { color: var(--an-ochre-700); border-bottom-color: var(--an-ochre-700); }


/* Hit targets. The brand sets a 44px minimum, but the nav link and the ghost
   button are visually 24px and 23px. Rather than pad them — which would move the
   ghost's underline and loosen the nav's rhythm — an invisible pseudo-element
   extends the *clickable* area vertically. Nothing moves; the target grows.
   Vertical-only, so it can never overlap a neighbour in a horizontal row. */
.an-nav__link, .an-btn--ghost { position: relative; }
.an-nav__link::after, .an-btn--ghost::after {
  content: '';
  position: absolute;
  inset-block: -11px;
  inset-inline: 0;
}

/* ── Tag ──────────────────────────────────────────────────── */
/* Solid clay is legitimate here: it's a fill behind wool text, not text on ink. */
.an-tag {
  display: inline-block;
  padding: 6px 12px;
  background: var(--an-clay);
  color: var(--an-wool);
  font-family: var(--an-font-mono);
  font-size: var(--an-text-label);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: var(--an-radius-0);
}

/* ── Cards ────────────────────────────────────────────────── */
.an-card {
  display: flex;
  flex-direction: column;
  gap: var(--an-space-4);
  padding: var(--an-space-5);
  background: var(--an-ink-raised);
  border: var(--an-border);
  border-radius: var(--an-radius-0);
  transition: border-color var(--an-dur) var(--an-ease);
}
/* Hover moves the border to ochre at 60% — no scale, no shadow. */
.an-card:hover { border-color: color-mix(in srgb, var(--an-ochre) 60%, transparent); }
.an-card__icon { color: var(--an-ochre); }
.an-card__icon svg { width: 28px; height: 28px; }

/* ── Forms ────────────────────────────────────────────────── */
.an-field { display: flex; flex-direction: column; gap: var(--an-space-2); }
.an-label {
  font-family: var(--an-font-mono);
  font-size: var(--an-text-label);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--an-wool-dim);
}
.an-input {
  width: 100%;
  padding: 14px;
  background: var(--an-ink-raised);
  border: var(--an-border);
  border-radius: var(--an-radius-0);
  color: var(--an-wool);
  font-family: var(--an-font-body);
  font-size: 16px;
  transition: border-color var(--an-dur-fast) var(--an-ease);
}
.an-input::placeholder { color: var(--an-wool-dim); }
.an-input:hover { border-color: var(--an-wool-dim); }
.an-input:focus-visible { border-color: var(--an-ochre); }
.an-input[aria-invalid='true'] { border-color: var(--an-danger); }

.an-error {
  font-family: var(--an-font-mono);
  font-size: var(--an-text-label);
  color: var(--an-danger);
}

/* ── Nav ──────────────────────────────────────────────────── */
.an-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--an-space-6);
  padding-block: var(--an-space-4);
  border-bottom: var(--an-border);
}
.an-nav__logo { width: 190px; }
.an-nav__links { display: flex; align-items: center; gap: var(--an-space-6); }
.an-nav__link {
  font-size: var(--an-text-small);
  color: var(--an-wool-dim);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: color var(--an-dur-fast) var(--an-ease),
              border-color var(--an-dur-fast) var(--an-ease);
}
.an-nav__link:hover { color: var(--an-wool); }
.an-nav__link[aria-current='page'] { color: var(--an-wool); border-bottom-color: var(--an-ochre); }

/* ── Altiță band ──────────────────────────────────────────── */
/* 96px repeating strip: above the footer, on invoice headers. */
.an-band {
  height: 96px;
  background-image: url('assets/pattern-altita-band.svg?v=2');
  background-repeat: repeat-x;
  background-size: 96px 96px;
}
/* Hero texture: full-bleed at 6–10% opacity, behind content only.
   Never over body copy. */
.an-band--hero {
  position: absolute;
  inset: 0;
  height: auto;
  background-repeat: repeat;
  opacity: 0.08;
  pointer-events: none;
}

/* ── Icons ────────────────────────────────────────────────── */
.an-icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

/* ── Motion ───────────────────────────────────────────────── */
/* Allowed: opacity, 8–16px translateY on scroll-in, colour transitions.
   Never: bounce, spring overshoot, parallax, rotation of the mark. */
.an-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--an-dur-slow) var(--an-ease),
              transform var(--an-dur-slow) var(--an-ease);
}
.an-reveal.is-visible { opacity: 1; transform: none; }

/* The mark's four nodes fade in sequentially, 120ms apart, on hero load. */
.an-mark__node { opacity: 0; animation: an-node-in var(--an-dur) var(--an-ease) forwards; }
.an-mark__node:nth-child(1) { animation-delay: 0ms; }
.an-mark__node:nth-child(2) { animation-delay: 120ms; }
.an-mark__node:nth-child(3) { animation-delay: 240ms; }
.an-mark__node:nth-child(4) { animation-delay: 360ms; }
@keyframes an-node-in { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .an-reveal { opacity: 1; transform: none; }
  .an-mark__node { opacity: 1; }
}

/* ── Responsive — 640 / 900 / 1200 ────────────────────────── */
@media (max-width: 900px) {
  .an-section { padding-block: var(--an-space-8); }
  .an-grid > * { grid-column: span var(--span-md, 12); }
  /* Below 900px the horizontal lockup drops its tagline line. */
  .an-nav__logo { width: 170px; }
}

@media (max-width: 640px) {
  .an-section { padding-block: var(--an-space-6); }
  .an-container { padding-inline: var(--an-space-4); }
  .an-hero { letter-spacing: -1px; }
  .an-nav__links { display: none; } /* replaced by the page's own menu affordance */
}