/* ============================================================
   FFG.ro — Base Styles
   Focus Financiar Group
   ============================================================ */

/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Design Tokens ── */
:root {
  /* Brand palette */
  --gold:        #B8963E;
  --gold-light:  #D4B96A;
  --gold-pale:   #F5EDD6;
  --ink:         #1A1A18;
  --ink-mid:     #3A3A36;
  --ink-soft:    #6A6A62;
  --cream:       #FAF8F3;
  --cream-deep:  #F0EBE0;
  --white:       #FFFFFF;
  --choco:       #3D1E0A;
  --choco-mid:   #6B3A1F;
  --line:        rgba(184, 150, 62, 0.25);

  /* Typography */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing scale */
  --sp-xs:  0.5rem;
  --sp-sm:  1rem;
  --sp-md:  1.5rem;
  --sp-lg:  2.5rem;
  --sp-xl:  4rem;
  --sp-2xl: 6rem;

  /* Section padding */
  --pad-section:    100px;
  --pad-section-lg: 120px;

  /* Max widths */
  --max-content: 1120px;
  --max-prose:   680px;
}

/* ── Base Typography ── */
html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background-color: var(--cream);
  color: var(--ink);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Focus management (accessibility) ── */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ── Links base ── */
a {
  color: inherit;
  text-decoration: none;
}

/* ── Images ── */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ── Lists ── */
ul, ol {
  list-style: none;
}

/* ── Layout utilities ── */
.section-inner {
  max-width: var(--max-content);
  margin-inline: auto;
  padding-inline: 2rem;
}

.section-pad  { padding-block: var(--pad-section); }
.section-pad-lg { padding-block: var(--pad-section-lg); }

/* ── Shared section headings ── */
.eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.25rem;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 58px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 1.5rem;
}

.section-title em {
  font-style: italic;
  color: var(--gold);
}

.section-intro {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--ink-soft);
  max-width: var(--max-prose);
}

.divider-gold {
  width: 48px;
  height: 2px;
  background: var(--gold);
  margin-block: 1.5rem;
}

/* ── Text-align utility ── */
.text-center { text-align: center; }
.text-center .section-intro  { margin-inline: auto; }
.text-center .divider-gold   { margin-inline: auto; }

/* ── Buttons ── */
.btn-primary {
  display: inline-block;
  padding: 14px 32px;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--gold-light);
  transform: translateY(-1px);
}

.btn-outline {
  display: inline-block;
  padding: 13px 32px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.btn-outline:hover,
.btn-outline:focus-visible {
  border-color: var(--gold);
  color: var(--gold-light);
}

/* ── Screen-reader only ── */
.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;
}

/* ══ Language toggle ══════════════════════════════════════════
   Regula de bază: orice element cu [data-lang] este ascuns,
   EXCEPTÂND butoanele de limbă (.lang-btn) care sunt mereu vizibile.

   Afișarea se face cu valori EXPLICITE per tip de element,
   nu cu "revert" (care e inconsistent cross-browser cu flex/grid).
═══════════════════════════════════════════════════════════════ */

/* Ascunde tot conținutul bilingv implicit */
[data-lang]:not(.lang-btn) {
  display: none !important;
}

/* RO activ — arată elementele RO cu valoarea corectă per tag */
.lang-ro [data-lang="ro"] { display: block !important; }
.lang-ro span[data-lang="ro"],
.lang-ro a[data-lang="ro"],
.lang-ro button[data-lang="ro"],
.lang-ro dt[data-lang="ro"],
.lang-ro dd[data-lang="ro"] { display: inline !important; }
.lang-ro li[data-lang="ro"] { display: list-item !important; }
.lang-ro div[data-lang="ro"] { display: block !important; }
.lang-ro td[data-lang="ro"],
.lang-ro th[data-lang="ro"] { display: table-cell !important; }

/* EN activ — arată elementele EN cu valoarea corectă per tag */
.lang-en [data-lang="en"] { display: block !important; }
.lang-en span[data-lang="en"],
.lang-en a[data-lang="en"],
.lang-en button[data-lang="en"],
.lang-en dt[data-lang="en"],
.lang-en dd[data-lang="en"] { display: inline !important; }
.lang-en li[data-lang="en"] { display: list-item !important; }
.lang-en div[data-lang="en"] { display: block !important; }
.lang-en td[data-lang="en"],
.lang-en th[data-lang="en"] { display: table-cell !important; }

/* Buttons styled as inline-block (btn-primary, btn-outline, project__link) */
.lang-ro a[data-lang="ro"].btn-primary,
.lang-ro a[data-lang="ro"].btn-outline,
.lang-ro a[data-lang="ro"].project__link,
.lang-en a[data-lang="en"].btn-primary,
.lang-en a[data-lang="en"].btn-outline,
.lang-en a[data-lang="en"].project__link { display: inline-flex !important; }

/* dd stat labels — they flow inline with dt */
.lang-ro dd[data-lang="ro"].project__stat-label,
.lang-en dd[data-lang="en"].project__stat-label { display: block !important; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Module-specific: labels, options, headings */
.lang-ro label[data-lang="ro"],
.lang-en label[data-lang="en"] { display: block !important; }

.lang-ro option[data-lang="ro"],
.lang-en option[data-lang="en"] { display: block !important; }

.lang-ro h1[data-lang="ro"],
.lang-ro h2[data-lang="ro"],
.lang-ro h3[data-lang="ro"],
.lang-ro h4[data-lang="ro"] { display: block !important; }

.lang-en h1[data-lang="en"],
.lang-en h2[data-lang="en"],
.lang-en h3[data-lang="en"],
.lang-en h4[data-lang="en"] { display: block !important; }

/* Footer nav <a> elements — inline */
.lang-ro a[data-lang="ro"],
.lang-en a[data-lang="en"] { display: inline !important; }

/* Except action links that are styled as blocks */
.lang-ro .partner-card__link[data-lang="ro"],
.lang-en .partner-card__link[data-lang="en"],
.lang-ro .project__link[data-lang="ro"],
.lang-en .project__link[data-lang="en"] { display: inline-flex !important; }