/* Gruppo Mercati — fundația comună a redesignului (oct. 2026).
   Culorile și tipografia vin din designul clientului (HTML-ul de onboarding și
   capturile homepage-ului; aceeași paletă, capturile erau în Display P3).
   Se încarcă pe homepage, pe /page/onboarding și, prin header, pe tot site-ul,
   deci aici stau doar variabile și componente sub prefixul .gm — nimic care să
   atingă clasele temei. Fonturile se declară în snippets/custom/gm-fonts.html.twig,
   cu adresele date de asset(). */

:root {
  --gm-ink: #00211C;
  --gm-text: #3E4145;
  --gm-text-2: #5C5F63;
  --gm-text-3: #8A8D91;
  --gm-green: #006D55;
  --gm-green-deep: #00543E;
  --gm-teal: #0B7C62;
  --gm-sage: #2F8A72;
  --gm-orange: #DA4A0C;
  --gm-orange-light: #F47B42;
  --gm-rust: #B83C08;
  --gm-peach: #FFC9A8;
  --gm-bg: #F3F1EC;
  --gm-cream: #FAF9F6;
  --gm-white: #FFFFFF;
  --gm-line: #DAD6CE;
  --gm-line-2: #E6E2DA;
  --gm-stone: #E6E2DA;
  --gm-stone-2: #EBE8E1;
  --gm-mint: #EDF5F1;
  --gm-blush: #FBEFE8;
  --gm-wood: #B89366;
  --gm-wood-dark: #8A6B47;
  --gm-dark: #00211C;
  --gm-dark-2: #062A23;
  --gm-dark-3: #0A2E27;
  --gm-dark-line: #123D34;
  --gm-dark-line-2: #1E4B41;
  --gm-footer: #001612;
  --gm-on-dark: #A9C2BA;
  --gm-on-dark-2: #DCEBE6;
  --gm-on-green: #DCEBE6;

  --gm-font: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --gm-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --gm-container: 1320px;
  --gm-gutter: 28px;
  --gm-radius-sm: 12px;
  --gm-radius: 20px;
  --gm-radius-lg: 28px;
  --gm-shadow: 0 18px 50px rgba(20, 21, 23, .16);
  --gm-ease: cubic-bezier(.22, .9, .3, 1);
}

@media (max-width: 767.98px) {
  :root { --gm-gutter: 16px; }
}

/* Rădăcina unei zone redesenate.
   CSS-ul personalizat din admin pune pe tot site-ul, cu !important,
   font-family: var(--font-secundar) pe body/p/li/label/input și
   var(--font-principal) pe h1–h6/nav/button. Redefinind variabilele aici,
   aceleași reguli dau Archivo în interiorul zonei, fără luptă de specificitate.
   Tot de acolo vin greutăți fixe, tot cu !important: h1/h2 800, h3–h6 700,
   nav/button 700, body/p/li 400. Componentele de mai jos care cer altă
   greutate pe aceste elemente o declară pe clasă, cu !important. */
.gm {
  --font-principal: var(--gm-font);
  --font-secundar: var(--gm-font);
  font-family: var(--gm-font);
  color: var(--gm-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.gm *, .gm *::before, .gm *::after { box-sizing: border-box; }
.gm :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote) { margin: 0; }
.gm :where(ul, ol) { padding: 0; list-style: none; }
.gm :where(img, svg) { display: block; max-width: 100%; }
.gm :where(a) { color: inherit; text-decoration: none; }
.gm :where(a):hover { color: inherit; text-decoration: none; }
.gm :where(button) { font: inherit; }

.gm-mono {
  --font-principal: var(--gm-mono);
  --font-secundar: var(--gm-mono);
  font-family: var(--gm-mono);
}

.gm-container {
  width: 100%;
  max-width: calc(var(--gm-container) + 2 * var(--gm-gutter));
  margin-inline: auto;
  padding-inline: var(--gm-gutter);
}

/* Titluri */
.gm-h1 {
  font-size: clamp(40px, 6vw, 84px);
  line-height: .98;
  letter-spacing: -.035em;
  font-weight: 700 !important;
  text-wrap: balance;
}
.gm-h2 {
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.02;
  letter-spacing: -.03em;
  font-weight: 700 !important;
  text-wrap: balance;
}
.gm-h3 {
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.1;
  letter-spacing: -.02em;
  font-weight: 700 !important;
}
.gm-lead {
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.5;
  font-weight: 400 !important;
  color: var(--gm-text);
  text-wrap: pretty;
}
.gm-accent { color: var(--gm-orange); }
.gm-accent-light { color: var(--gm-orange-light); }

/* Eticheta de deasupra titlului. Homepage: liniuță portocalie + text verde.
   Onboarding: monospațiat, portocaliu (.gm-kicker--mono). */
.gm-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700 !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gm-green);
}
.gm-kicker::before {
  content: "";
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--gm-orange);
  flex: none;
}
.gm-kicker--plain::before { display: none; }
.gm-kicker--on-dark { color: var(--gm-orange-light); }
.gm-kicker--on-dark::before { background: var(--gm-orange-light); }
.gm-kicker--mono {
  --font-principal: var(--gm-mono);
  --font-secundar: var(--gm-mono);
  font-family: var(--gm-mono);
  font-weight: 500 !important;
  letter-spacing: .08em;
  color: var(--gm-orange);
}
.gm-kicker--mono::before { display: none; }

/* Butoane */
.gm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 14px 24px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-family: var(--gm-font);
  font-size: 16px;
  line-height: 1.1;
  font-weight: 600 !important;
  letter-spacing: -.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s var(--gm-ease), color .2s var(--gm-ease), border-color .2s var(--gm-ease), transform .2s var(--gm-ease), box-shadow .2s var(--gm-ease);
}
.gm-btn:hover { transform: translateY(-1px); text-decoration: none; }
.gm-btn:active { transform: translateY(0); }
.gm-btn:focus-visible { outline: 3px solid var(--gm-orange-light); outline-offset: 3px; }
.gm-btn--orange { background: var(--gm-orange); color: #fff; }
.gm-btn--orange:hover { background: var(--gm-ink); color: #fff; }
.gm-btn--orange.gm-btn--glow { box-shadow: 0 12px 30px -10px rgba(218, 74, 12, .6); }
.gm-btn--green { background: var(--gm-green); color: #fff; }
.gm-btn--green:hover { background: var(--gm-orange); color: #fff; }
.gm-btn--dark { background: var(--gm-ink); color: #fff; }
.gm-btn--dark:hover { background: var(--gm-green); color: #fff; }
.gm-btn--white { background: #fff; color: var(--gm-ink); }
.gm-btn--white:hover { background: var(--gm-orange); color: #fff; }
.gm-btn--outline { border-color: var(--gm-ink); color: var(--gm-ink); background: transparent; }
.gm-btn--outline:hover { background: var(--gm-ink); color: #fff; }
.gm-btn--outline-light { border-color: rgba(255, 255, 255, .7); color: #fff; background: transparent; }
.gm-btn--outline-light:hover { background: #fff; color: var(--gm-ink); border-color: #fff; }
.gm-btn--sm { min-height: 40px; padding: 10px 18px; font-size: 14px; }
.gm-btn--lg { min-height: 56px; padding: 17px 28px; }
.gm-btn__arrow { transition: transform .2s var(--gm-ease); }
.gm-btn:hover .gm-btn__arrow { transform: translateX(3px); }

/* Pastile și iconițe */
.gm-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600 !important;
  line-height: 1.2;
  background: var(--gm-mint);
  color: var(--gm-green);
}
.gm-icon {
  width: 20px;
  height: 20px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gm-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  flex: none;
  color: #fff;
  background: var(--gm-green);
}
.gm-icon-tile--orange { background: var(--gm-orange); }
.gm-icon-tile--dark { background: var(--gm-ink); }
.gm-icon-tile--soft { background: var(--gm-mint); color: var(--gm-green); }
.gm-icon-tile .gm-icon { width: 24px; height: 24px; }

.gm-card {
  background: #fff;
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius);
}

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

/* Intrare în ecran: starea ascunsă există doar după ce scriptul pune
   .gm-js pe <html>, deci fără JavaScript totul rămâne vizibil. */
.gm-js .gm-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--gm-ease), transform .7s var(--gm-ease); }
.gm-js .gm-reveal.is-in { opacity: 1; transform: none; }

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