/* autoiasi.ro — evolved soft UI: soft multi-layer shadows, calm depth, motion
   only where it explains something. Warm ground, one orange CTA, blue for links.
   Every colour pair below clears WCAG AA on text.

   No inline style attributes anywhere: the CSP is style-src 'self' with no
   unsafe-inline, so stagger delays live here, in nth-child rules. */

@view-transition { navigation: auto; }

:root {
  --bg: #fff8f1;
  --bg-tint: #fdeee0;
  --surface: #ffffff;
  --surface-2: #fffdfb;
  --fg: #12161f;
  --muted: #5b5349;
  --line: #f0e0d2;
  --line-strong: #dfc8b3;
  --brand: #c2410c;          /* 5.2:1 with white text */
  --brand-hover: #9a3412;
  --brand-soft: #ea580c;     /* decorative only, never behind text */
  --brand-wash: #fff1e6;
  --on-brand: #ffffff;
  --link: #2563eb;
  --danger: #b91c1c;
  --ok-bg: #ecfdf5;
  --ok-line: #a7f3d0;
  --err-bg: #fef2f2;
  --err-line: #fecaca;
  --ring: #ea580c;

  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  /* Multi-layer and soft: clearer than neumorphism, softer than flat. */
  --shadow-1: 0 1px 2px rgb(18 22 31 / 5%), 0 2px 6px -2px rgb(18 22 31 / 8%);
  --shadow-2: 0 2px 4px rgb(18 22 31 / 5%), 0 12px 24px -12px rgb(18 22 31 / 18%);
  --shadow-3: 0 4px 8px rgb(18 22 31 / 6%), 0 20px 40px -20px rgb(18 22 31 / 26%);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);   /* ease-out, for things arriving */
  --fast: 180ms;
  --base: 240ms;

  --font-head: "EB Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --header-h: 58px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131017;
    --bg-tint: #1d1720;
    --surface: #1d1922;
    --surface-2: #241f29;
    --fg: #f4f0ec;
    --muted: #b6aca4;
    --line: #322a35;
    --line-strong: #473c4a;
    --brand: #fb923c;         /* 8:1 with the dark ink below */
    --brand-hover: #fdba74;
    --brand-soft: #fb923c;
    --brand-wash: #2a1c16;
    --on-brand: #1a1207;
    --link: #93c5fd;
    --danger: #fca5a5;
    --ok-bg: #10241c;
    --ok-line: #1f5142;
    --err-bg: #2a1516;
    --err-line: #5c2626;
    --ring: #fb923c;
    --shadow-1: 0 1px 2px rgb(0 0 0 / 40%), 0 2px 6px -2px rgb(0 0 0 / 50%);
    --shadow-2: 0 2px 4px rgb(0 0 0 / 40%), 0 14px 28px -14px rgb(0 0 0 / 70%);
    --shadow-3: 0 4px 8px rgb(0 0 0 / 45%), 0 24px 48px -24px rgb(0 0 0 / 80%);
  }
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
}

h1, h2, h3 { font-family: var(--font-head); font-weight: 600; line-height: 1.15; }

a { color: var(--link); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

/* Fara border-radius aici: ar rescrie forma elementului la focus, iar colturile
   ar sari (input 10px -> 4px, chips rotunde -> aproape drepte). Outline-ul
   urmeaza oricum raza proprie a elementului. */
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

svg { width: 18px; height: 18px; flex: none; }

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

.skip {
  position: absolute; left: -9999px; top: var(--space-2); z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
.skip:focus { left: var(--space-4); }

main, .site-footer { max-width: 64rem; margin-inline: auto; padding-inline: var(--space-4); }

/* ------------------------------------------------------------------ header */

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border-bottom: 1px solid var(--line);
}
@supports (backdrop-filter: blur(1px)) {
  .site-header { backdrop-filter: blur(14px) saturate(1.4); }
}

.bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  max-width: 64rem; margin-inline: auto;
  padding: var(--space-2) var(--space-4);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-head); font-size: 1.4rem; font-weight: 600;
  color: var(--fg); text-decoration: none; letter-spacing: -0.01em;
}
.brand strong { color: var(--brand); font-weight: 700; }
.brand-tld { color: var(--muted); font-weight: 500; }
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--brand-wash); color: var(--brand);
}

/* Category rail: reachable from every page, scrolls sideways on small screens. */
.catbar { border-top: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.catbar::-webkit-scrollbar { display: none; }

.catbar-track {
  display: flex; gap: var(--space-1);
  max-width: 64rem; margin-inline: auto;
  padding: var(--space-2) var(--space-4);
}

.catbar-item {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); min-height: 40px;
  border-radius: var(--radius-pill);
  color: var(--muted); text-decoration: none; white-space: nowrap;
  font-size: 0.9rem; font-weight: 700;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.catbar-item:hover { background: var(--bg-tint); color: var(--fg); }
.catbar-item.is-active { background: var(--brand-wash); color: var(--brand); }
.catbar-icon { display: inline-flex; }
.catbar-icon svg { width: 16px; height: 16px; }

/* -------------------------------------------------------------------- hero */

.hero {
  position: relative;
  margin-block: var(--space-5) var(--space-6);
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 1.5);
  background:
    radial-gradient(80% 120% at 8% 0%, var(--brand-wash) 0%, transparent 55%),
    radial-gradient(60% 100% at 100% 10%, var(--bg-tint) 0%, transparent 60%),
    var(--surface);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}

.hero-inner { max-width: 40rem; }

/* Pe acasa cautarea e unealta principala, deci titlul sta pe un rand si nu
   impinge caseta sub linia de plutire pe telefon. */
.hero-home h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.6rem); margin-bottom: var(--space-2); }
.hero-home .lede { margin-bottom: var(--space-4); font-size: 1.02rem; }

.hero-compact {
  margin-block: var(--space-5) var(--space-5);
  padding: var(--space-6);
}

.eyebrow {
  margin: 0 0 var(--space-3);
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--brand);
}

h1 {
  margin: 0 0 var(--space-4);
  font-size: clamp(2rem, 1.3rem + 3.4vw, 3.4rem);
  letter-spacing: -0.015em;
}
.h1-accent { color: var(--muted); }

.lede {
  margin: 0 0 var(--space-5); max-width: 34rem;
  color: var(--muted); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
}

.section-title {
  display: flex; align-items: center; gap: var(--space-4);
  margin: var(--space-7) 0 var(--space-4);
  font-family: var(--font-body); font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.section-title::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }

.crumbs { padding-top: var(--space-5); font-size: 0.9rem; color: var(--muted); }
.crumbs span[aria-hidden] { margin-inline: var(--space-1); }

/* ------------------------------------------------------------------ search */

.search { margin: 0 0 var(--space-4); }

.search-row { display: flex; align-items: stretch; gap: var(--space-2); }

.search-field { position: relative; display: flex; flex: 1 1 auto; min-width: 0; }

.search-icon {
  position: absolute; left: var(--space-4); top: 50%; transform: translateY(-50%);
  display: flex; color: var(--muted); pointer-events: none;
}

.search input {
  flex: 1 1 auto; min-width: 0; min-height: 56px;
  padding: var(--space-2) var(--space-4) var(--space-2) 3rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--fg);
  font-family: var(--font-body); font-size: 16px;
  box-shadow: var(--shadow-1);
  appearance: none;   /* iOS deseneaza input[type=search] ca pastila, cu alt padding */
  transition: border-color var(--fast) var(--ease);
}
.search input::-webkit-search-decoration { appearance: none; }
.search input:hover { border-color: var(--muted); }

/* Fara salt de umbra sau de raza la focus: doar inelul, in forma campului. */
.search input:focus-visible { border-color: var(--brand); outline-offset: 1px; }

.search button { flex: 0 0 auto; min-height: 56px; padding-inline: var(--space-5); }

.popular { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.popular-label {
  color: var(--muted); font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
}

/* -------------------------------------------------------------- categories */

.cats {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

.cat {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5); min-height: 84px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-1);
  color: var(--fg); text-decoration: none;
  transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease),
              border-color var(--base) var(--ease);
}
.cat:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); border-color: var(--line-strong); }
.cat:active { transform: translateY(-1px); }

.cat-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 13px;
  background: var(--brand-wash); color: var(--brand);
  transition: transform var(--base) var(--ease);
}
.cat:hover .cat-icon { transform: scale(1.06); }
.cat-icon svg { width: 22px; height: 22px; }

.cat-body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }
.cat-name { font-family: var(--font-head); font-size: 1.2rem; font-weight: 600; }
.cat-count { color: var(--muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.cat-arrow { color: var(--line-strong); transition: transform var(--base) var(--ease), color var(--base) var(--ease); }
.cat:hover .cat-arrow { transform: translateX(3px); color: var(--brand); }

.soon { margin-top: var(--space-4); color: var(--muted); font-size: 0.92rem; }

/* ------------------------------------------------------------------- cards */

.cards {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
}

.card {
  display: flex; flex-direction: column;
  padding: var(--space-5);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-1);
  transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.card[id] { scroll-margin-top: calc(var(--header-h) + var(--space-5)); }

.card-name { margin: 0 0 var(--space-2); font-size: 1.3rem; }
.card-cat { margin: 0 0 var(--space-3); font-size: 0.78rem; }
.card-cat a {
  padding: 2px var(--space-2); border-radius: var(--radius-pill);
  background: var(--bg-tint); color: var(--muted); text-decoration: none;
}
.card-cat a:hover { color: var(--brand); }

.meta {
  display: flex; gap: var(--space-2); align-items: flex-start;
  margin: 0 0 var(--space-2); color: var(--muted); font-size: 0.95rem;
}
.meta svg { margin-top: 4px; color: var(--line-strong); }
.meta-unknown span { font-style: italic; }

.area {
  display: inline-block; margin-left: var(--space-1);
  padding: 1px var(--space-2); border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill); font-size: 0.76rem; white-space: nowrap;
}

.details {
  margin: var(--space-3) 0 0; padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--brand-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--bg-tint); color: var(--fg);
  font-size: 0.9rem; overflow-wrap: anywhere;
}

.actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; padding-top: var(--space-4); }

.provenance {
  margin: var(--space-4) 0 0; padding-top: var(--space-3);
  border-top: 1px dashed var(--line);
  color: var(--muted); font-size: 0.79rem; line-height: 1.45;
}

.empty { padding: var(--space-6) 0; color: var(--muted); }

/* ----------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2); min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--fg);
  font-family: var(--font-body); font-size: 0.95rem; font-weight: 700;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease),
              transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.btn:hover { border-color: var(--brand); box-shadow: var(--shadow-1); }
.btn:active { transform: scale(0.975); }

.btn-call {
  background: var(--brand); border-color: var(--brand); color: var(--on-brand);
  font-variant-numeric: tabular-nums; box-shadow: var(--shadow-1);
}
.btn-call:hover { background: var(--brand-hover); border-color: var(--brand-hover); box-shadow: var(--shadow-2); }

.btn-ghost { background: transparent; border-color: var(--line-strong); font-size: 0.9rem; }
.btn-danger { color: var(--danger); }
.btn-danger:hover { border-color: var(--danger); }
.btn-submit { width: 100%; min-height: 54px; font-size: 1.05rem; }

/* ------------------------------------------------------------------- chips */

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  display: inline-flex; align-items: center; min-height: 38px;
  padding: 0 var(--space-4);
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--fg);
  font-size: 0.88rem; font-weight: 700; text-decoration: none;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease),
              border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.chip:hover { background: var(--brand-wash); border-color: var(--brand); color: var(--brand); transform: translateY(-1px); }
.chip-n {
  margin-left: var(--space-2); padding: 0 var(--space-2);
  border-radius: var(--radius-pill); background: var(--bg-tint);
  font-size: 0.76rem; color: var(--muted); font-variant-numeric: tabular-nums;
}

.related { margin-top: var(--space-8); }
.freshness { margin: var(--space-2) 0 0; color: var(--muted); font-size: 0.85rem; }

/* -------------------------------------------------------------------- form */

/* Fara cutie: formularul foloseste toata latimea paginii, iar campurile stau
   intr-o grila de doua coloane pe ecran larg. Un input singur intins pe 64rem
   ar fi mai greu de citit, nu mai usor. */
.form {
  margin-bottom: var(--space-8);
  display: grid; gap: var(--space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .form { grid-template-columns: 1fr 1fr; column-gap: var(--space-6); }
  .field-wide { grid-column: 1 / -1; }
}

.field { margin-bottom: 0; min-width: 0; }
.field label { display: block; margin-bottom: var(--space-1); font-weight: 700; font-size: 0.95rem; }
.req { color: var(--danger); }
.hint { margin: 0 0 var(--space-2); color: var(--muted); font-size: 0.85rem; }

.field input, .field select, .field textarea {
  width: 100%; min-height: 48px;
  padding: var(--space-3);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--fg);
  font-family: var(--font-body); font-size: 16px; /* 16px stops iOS zoom-on-focus */
  transition: border-color var(--fast) var(--ease);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--muted); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--brand); }
.field-error input, .field-error select, .field-error textarea { border-color: var(--danger); border-width: 2px; }

.field textarea { min-height: 92px; resize: vertical; line-height: 1.5; font-family: var(--font-body); }

.error { margin: var(--space-2) 0 0; color: var(--danger); font-size: 0.88rem; font-weight: 700; }
.fineprint { margin: 0; color: var(--muted); font-size: 0.82rem; }

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.notice {
  margin-bottom: var(--space-5); padding: var(--space-4);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  font-size: 0.95rem;
}
.notice p { margin: 0 0 var(--space-2); }
.notice ul { margin: 0; padding-left: var(--space-5); }
.notice-ok { background: var(--ok-bg); border-color: var(--ok-line); }
.notice-error { background: var(--err-bg); border-color: var(--err-line); }

.empty-state { padding-block: var(--space-4) var(--space-7); }
.empty-state p { color: var(--muted); }
.empty-state .empty {
  padding: 0 0 var(--space-2);
  color: var(--fg); font-size: 1.2rem; font-family: var(--font-head);
}

/* ------------------------------------------------------------------- admin */

.count-pill {
  display: inline-block; margin-left: var(--space-2); padding: 0 var(--space-2);
  border-radius: var(--radius-pill); background: var(--surface);
  border: 1px solid var(--line-strong);
  font-size: 0.8rem; color: var(--fg); font-variant-numeric: tabular-nums;
}
.admin-row { margin-bottom: var(--space-3); }

/* ------------------------------------------------------------------ footer */

.site-footer {
  margin-top: var(--space-8); padding-block: var(--space-6) var(--space-7);
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: 0.9rem;
}
.footer-grid { display: grid; gap: var(--space-4); }
.footer-grid p { margin: 0 0 var(--space-2); }
.footer-brand { font-family: var(--font-head); font-size: 1.15rem; color: var(--fg); }
.footer-brand strong { color: var(--brand); }
.footer-grid nav { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); align-content: start; }
.footer-grid nav a { display: inline-flex; align-items: center; min-height: 36px; }
.footer-note {
  margin-top: var(--space-5); padding-top: var(--space-4);
  border-top: 1px solid var(--line); font-size: 0.84rem;
}

/* ------------------------------------------------------------------ motion */

/* One arrival animation, staggered across a grid. Everything else is hover
   feedback. The rule from the design guidance: animate one or two things per
   view, not everything that moves. */
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.cats > *, .cards > * { animation: rise var(--base) var(--ease) backwards; }
.cats > :nth-child(1),   .cards > :nth-child(1)   { animation-delay: 0ms; }
.cats > :nth-child(2),   .cards > :nth-child(2)   { animation-delay: 40ms; }
.cats > :nth-child(3),   .cards > :nth-child(3)   { animation-delay: 80ms; }
.cats > :nth-child(4),   .cards > :nth-child(4)   { animation-delay: 120ms; }
.cats > :nth-child(5),   .cards > :nth-child(5)   { animation-delay: 160ms; }
.cats > :nth-child(6),   .cards > :nth-child(6)   { animation-delay: 200ms; }
.cats > :nth-child(7),   .cards > :nth-child(7)   { animation-delay: 240ms; }
.cats > :nth-child(n+8), .cards > :nth-child(n+8) { animation-delay: 280ms; }

.hero-inner > * { animation: rise var(--base) var(--ease) backwards; }
.hero-inner > :nth-child(2) { animation-delay: 50ms; }
.hero-inner > :nth-child(3) { animation-delay: 100ms; }
.hero-inner > :nth-child(4) { animation-delay: 150ms; }
.hero-inner > :nth-child(5) { animation-delay: 200ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .cat:hover, .card:hover, .chip:hover, .btn:active { transform: none; }
}

/* ------------------------------------------------------------- small screen */

@media (max-width: 40rem) {
  .hero { padding: var(--space-5) var(--space-4); margin-block: var(--space-3) var(--space-5); }
  .hero-compact { padding: var(--space-5) var(--space-4); }
  .section-title { margin-top: var(--space-6); }
}

@media (max-width: 30rem) {
  .search-row { flex-wrap: wrap; }
  .search-field, .search button { flex: 1 1 100%; }
}

/* ------------------------------------------------------------------- legal */

.legal { max-width: 44rem; }          /* text lung: lungime de rand lizibila */
.legal-section { margin-bottom: var(--space-6); }
.legal-section h2 {
  margin: 0 0 var(--space-3);
  font-size: 1.25rem;
}
.legal-section p { margin: 0 0 var(--space-3); }
.legal-section ul { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
.legal-section li { margin-bottom: var(--space-2); }
.legal-links { list-style: none; padding-left: 0; }

.footer-legal { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); align-content: start; }
.footer-legal a { display: inline-flex; align-items: center; min-height: 36px; font-weight: 700; }