:root {
  --bg: #ffffff;
  --text: #1a1a1a;
  --muted: #6b7280;
  --line: #e7e7e9;
  --nav-bg: rgba(255,255,255,0.85);
  --chip-hover: #fdf0e7;
  --control-bg: #eceef1;  /* contrasting box behind the controls */
  --accent: #e97627;      /* MATLAB orange */
  --radius: 12px;
  --max: 820px;
}

/* ---------- Dark theme ---------- */
[data-theme="dark"] {
  --bg: #0e1116;
  --text: #e9eaec;
  --muted: #9aa1ab;
  --line: #232830;
  --nav-bg: rgba(14,17,22,0.85);
  --chip-hover: #2a2018;
  --control-bg: #191e26;
  --accent: #f6883e;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  transition: background .3s, color .3s;
}
::selection { background: var(--accent); color: #fff; }

a { color: inherit; }

/* ---------- Navbar ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 1.5rem;
  padding: 1.1rem 2rem;
  background: var(--nav-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: background .3s, border-color .3s;
}
.brand {
  font-family: 'Space Grotesk', sans-serif; font-weight: 600;
  font-size: 1.15rem; letter-spacing: 1px; text-decoration: none;
}
.brand span { color: var(--accent); }

/* Page links on the left; right cluster pushed to the far right */
.nav-links { flex: 1; display: flex; align-items: center; gap: 1.6rem; }
.nav-links a {
  text-decoration: none; color: var(--muted); font-size: .92rem; font-weight: 500;
  transition: color .2s; position: relative; padding: .2rem 0;
}
.nav-links a:hover { color: var(--text); }
.nav-links a.active { color: var(--text); }
.nav-links a.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px;
  height: 2px; background: var(--accent); border-radius: 2px;
}

/* Right cluster: languages + theme */
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 1.2rem; }

/* Language links with flags */
.lang-link { font-weight: 600; display: inline-flex; align-items: center; gap: .4rem; }
.flag {
  width: 20px; height: 15px; border-radius: 3px; object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08); display: block;
}
/* the active flag/language stands out; the inactive one is a bit dimmed */
.lang-link:not(.active) .flag { opacity: .55; transition: opacity .2s; }
.lang-link:hover .flag { opacity: 1; }

/* Theme toggle — icon color follows the theme: dark on white, white on black */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; padding: .2rem 0; cursor: pointer;
  color: var(--text); transition: color .2s;
}
.theme-toggle svg { display: block; fill: currentColor; }
.theme-toggle:hover { color: var(--accent); }
.theme-toggle .icon-moon { display: none; }
.theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

.menu-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; }
.menu-toggle span { width: 24px; height: 2px; background: var(--text); transition: .3s; }
.menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 720px) {
  /* IMPORTANT: backdrop-filter on the bar would make the fixed menu positioned
     relative to the bar (not the screen), shrinking it to the bar's height.
     Remove it on mobile so the menu overlay can cover the whole viewport. */
  .nav { backdrop-filter: none; -webkit-backdrop-filter: none; }

  /* Block flow (NOT flex) so iOS/Safari scrolls reliably and nothing gets clipped */
  .nav-links {
    position: fixed; inset: 0; z-index: 40;
    display: block; text-align: center;
    padding: calc(4.5rem + env(safe-area-inset-top, 0px)) 1.5rem calc(2rem + env(safe-area-inset-bottom, 0px));
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: var(--bg); transform: translateX(100%); transition: transform .35s;
    font-size: 1.2rem; margin-left: 0;
  }
  .nav-links a { display: block; padding: .7rem 0; }
  /* Right cluster: put EN | RO | theme in a centered row under the page links */
  .nav-right {
    margin: 1.2rem auto 0; justify-content: center; flex-wrap: wrap; gap: 1.4rem;
    border-top: 1px solid var(--line); padding-top: 1.4rem;
  }
  .nav-links .nav-right a { display: inline-flex; padding: .3rem 0; }
  .nav-links .theme-toggle { width: auto; margin: 0; padding: .3rem; }
  .nav-links a.active::after { display: none; }   /* no full-width underline in the stacked menu */
  .nav-links.open { transform: translateX(0); }
  .lang-link:first-of-type { margin-left: 0; }
  .menu-toggle { display: flex; z-index: 60; margin-left: auto; }  /* push hamburger to the right */
}

/* ---------- Layout ---------- */
main { max-width: var(--max); margin: 0 auto; padding: 0 2rem; }
.section { padding: 3rem 0; border-top: 1px solid var(--line); }
.section-title {
  font-size: .8rem; text-transform: uppercase; letter-spacing: 2px;
  color: var(--muted); font-weight: 600; margin-bottom: 1.2rem;
}

/* ---------- Hero ---------- */
.hero { padding: 5rem 0 3rem; }
.hero-kicker {
  display: inline-block; font-family: 'Space Grotesk', sans-serif;
  color: var(--accent); font-weight: 600; letter-spacing: 1px;
  font-size: .9rem; margin-bottom: 1rem;
}
.hero-title {
  font-size: clamp(2.4rem, 7vw, 3.6rem); font-weight: 700;
  letter-spacing: -1.5px; line-height: 1.1;
}
.hero-sub { color: var(--muted); font-size: 1.15rem; margin-top: 1.2rem; max-width: 560px; }

.cta { margin-top: 2rem; display: flex; gap: .8rem; flex-wrap: wrap; }
.btn {
  padding: .75rem 1.5rem; border-radius: var(--radius); text-decoration: none;
  font-weight: 600; font-size: .95rem; transition: transform .15s, background .2s, border-color .2s;
  display: inline-block;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { filter: brightness(.94); }
.btn-ghost { border: 1px solid var(--line); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); }

/* ---------- Chips ---------- */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; }
.chips li {
  padding: .45rem 1rem; border: 1px solid var(--line); border-radius: 100px;
  font-size: .9rem; color: var(--text); transition: border-color .2s, background .2s;
}
.chips li:hover { border-color: var(--accent); background: var(--chip-hover); }

.lead { color: var(--muted); font-size: 1.05rem; max-width: 640px; }

/* ---------- Empty pages ---------- */
.page { padding: 5rem 0; min-height: 50vh; }
.page-title { font-size: clamp(2rem, 6vw, 3rem); font-weight: 700; letter-spacing: -1px; }
.page-placeholder {
  margin-top: 1rem; color: var(--muted); font-size: 1.05rem;
  padding: 1.2rem 1.4rem; border: 1px dashed var(--line); border-radius: var(--radius);
  display: inline-block;
}

/* ---------- PHP status ---------- */
.status {
  margin: 3rem 0; text-align: center; font-size: .88rem; color: var(--muted);
  padding: .9rem; border: 1px dashed var(--line); border-radius: var(--radius);
}
.status strong { color: var(--accent); font-family: 'Space Grotesk', sans-serif; }

/* ---------- Footer ---------- */
footer {
  max-width: var(--max); margin: 2rem auto 0; padding: 2rem;
  border-top: 1px solid var(--line); text-align: center; color: var(--muted); font-size: .88rem;
}
.footer-note { font-size: .8rem; margin-top: .3rem; opacity: .8; }

/* ---------- First-visit language chooser ---------- */
.lang-modal {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: 1.5rem;
  background: rgba(10, 12, 16, 0.5);
  backdrop-filter: blur(8px);
  animation: fade .3s ease;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.lang-card {
  position: relative; overflow: hidden;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: 22px;
  padding: 2.6rem 2.2rem 2rem; max-width: 400px; width: 100%;
  text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,0.35);
  animation: pop .35s cubic-bezier(.16,1,.3,1);
}
/* accent bar on top */
.lang-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--accent), #f6a15e);
}
@keyframes pop { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }

.lang-brand {
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 1.2rem;
  letter-spacing: 1px; display: inline-block; margin-bottom: 1rem;
}
.lang-brand span { color: var(--accent); }
.lang-card h2 { font-size: 1.4rem; font-weight: 700; letter-spacing: -.5px; }
.lang-sub { color: var(--muted); font-size: .95rem; margin-top: .25rem; }

.lang-options { display: flex; flex-direction: column; gap: .7rem; margin: 1.8rem 0 1.2rem; }
.lang-opt {
  display: flex; align-items: center; gap: 1rem; text-align: left;
  padding: .9rem 1.1rem; border: 1px solid var(--line); border-radius: 14px;
  text-decoration: none; color: var(--text);
  transition: border-color .2s, background .2s, transform .15s, box-shadow .2s;
}
.lang-opt:hover {
  border-color: var(--accent); background: var(--chip-hover);
  transform: translateY(-2px); box-shadow: 0 8px 20px rgba(233,118,39,0.12);
}
.lang-flag {
  font-size: 1.7rem; line-height: 1; width: 44px; height: 44px;
  display: grid; place-items: center; border-radius: 12px;
  background: var(--chip-hover); border: 1px solid var(--line); flex-shrink: 0;
}
.lang-opt-text { display: flex; flex-direction: column; flex: 1; }
.lang-opt-name { font-weight: 600; font-size: 1rem; }
.lang-opt-meta { font-size: .78rem; color: var(--muted); }
.lang-arrow { color: var(--muted); font-size: 1.1rem; transition: transform .2s, color .2s; }
.lang-opt:hover .lang-arrow { transform: translateX(4px); color: var(--accent); }

.lang-hint { font-size: .76rem; color: var(--muted); opacity: .85; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }