/*
Theme Name: NewsHub
Theme URI: https://newshub.md
Description: Temă-copil peste Hello Elementor. Ține paleta, tipografia și ritmul sitului newshub.md într-un singur loc, și dă stil claselor ajutătoare folosite pe widgeturile native Elementor. Nu conține conținut: tot ce se vede pe pagini vine din widgeturi editabile.
Author: NewsHub
Template: hello-elementor
Version: 1.1.1
Text Domain: newshub
*/

/* ─────────────────────────────────────────────────────────────────────────────
   1. Fundamentele
   Paleta e aici, într-un singur loc. Schimbi accentul și se schimbă peste tot:
   și widgeturile proprii, și cele native prin clasele ajutătoare.
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  --nh-bg:      #0a0d16;
  --nh-bg2:     #10142400;   /* transparent: cardurile își fac fundalul din gradient */
  --nh-bg3:     #171c30;
  --nh-border:  #222941;
  --nh-border2: #2f3757;     /* bordură la hover — un pas mai luminos, nu accent plin */
  --nh-text:    #eef0fa;
  --nh-text2:   #bcc2da;     /* urcat de la #b9bfd8: contrast mai bun pe fundalul închis */
  --nh-text3:   #8c94b4;     /* urcat de la #8189a8: 4,4:1 era la limită, acum trece */
  --nh-accent:  #7c5cfc;
  --nh-accent2: #a78bfa;
  --nh-ok:      #4caf82;

  /* Suprafața cardurilor: gradient luminat de sus, ca lumina să pară că vine de undeva.
     Un card plat lângă altul plat n-are ierarhie — asta o dă. */
  --nh-surface:       linear-gradient(180deg, #151a2e 0%, #10142200 100%), #101422;
  --nh-surface-hover: linear-gradient(180deg, #1a2038 0%, #12162700 100%), #121627;

  /* Ritm vertical: un singur set de trepte, folosit peste tot. */
  --nh-s1: 8px;  --nh-s2: 16px; --nh-s3: 24px;
  --nh-s4: 40px; --nh-s5: 64px; --nh-s6: 96px;

  --nh-r:   14px;   /* rotunjire card */
  --nh-r-lg: 20px;  /* rotunjire panou mare */

  /* Fontul de sistem — același ca în aplicație. Elementor încarcă implicit Roboto de la
     Google; pe un produs pentru macOS asta arată străin, întârzie prima randare și mai e
     și o cerere către un domeniu terț. Îl scoatem. */
  --nh-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html { scroll-behavior: smooth; }

body {
  background: var(--nh-bg);
  color: var(--nh-text);
  font-family: var(--nh-font);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Elementor își impune fontul pe titluri și butoane; îl aducem la cel de sistem. */
body, .elementor-widget-heading .elementor-heading-title,
.elementor-widget-text-editor, .elementor-button, .elementor-widget-accordion { font-family: var(--nh-font); }

a { color: var(--nh-accent2); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--nh-text); }

::selection { background: rgba(124, 92, 252, .35); color: #fff; }

/* Inelul de focus: obligatoriu pentru cine navighează din tastatură, dar numai la
   tastatură (`:focus-visible`), ca să nu apară inutil la click cu mouse-ul. */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--nh-accent2);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Cine a cerut din sistem „mai puțină mișcare" nu primește animații. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. Tipografia
   Titlurile mari au nevoie de urmărire negativă și de un interlinie strâns;
   textul curent, de invers. Fără asta totul arată „implicit".
   ───────────────────────────────────────────────────────────────────────────── */
.elementor-widget-heading .elementor-heading-title {
  color: var(--nh-text);
  letter-spacing: -.02em;
  text-wrap: balance;              /* rândul orfan din titluri dispare */
}

.nh-hero-title .elementor-heading-title {
  font-size: clamp(34px, 6vw, 58px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -.03em;
  max-width: 18ch;
  margin-inline: auto;
}
.nh-hero-title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--nh-accent2) 10%, var(--nh-accent) 60%, #6d4bf0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.nh-h2 .elementor-heading-title {
  font-size: clamp(26px, 3.8vw, 36px);
  line-height: 1.18;
  font-weight: 800;
}

.nh-lead {
  color: var(--nh-text2);
  font-size: clamp(15px, 2vw, 18px);
  max-width: 62ch;
  margin-inline: auto;
}
.nh-lead p { margin: 0; }
.nh-note { color: var(--nh-text3); font-size: 13px; }
.nh-note p { margin: 0; }

/* Pastila de deasupra titlului mare */
.nh-eyebrow .elementor-heading-title {
  display: inline-block;
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--nh-accent2);
  background: linear-gradient(180deg, rgba(124, 92, 252, .16), rgba(124, 92, 252, .06));
  border: 1px solid rgba(124, 92, 252, .32);
  padding: 7px 15px; border-radius: 99px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. Hero
   Lumina radială din spatele titlului. Fără ea secțiunea e un dreptunghi negru
   cu text pe el — e singurul lucru care dă adâncime paginii de sus.
   ───────────────────────────────────────────────────────────────────────────── */
.nh-hero { position: relative; overflow: hidden; isolation: isolate; }
.nh-hero::before {
  content: ""; position: absolute; z-index: -1;
  inset: -60% -20% auto; height: 150%;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(124, 92, 252, .20), transparent 70%),
    radial-gradient(ellipse 40% 30% at 78% 12%, rgba(167, 139, 250, .10), transparent 70%);
  pointer-events: none;
}
/* Linie fină de orizont sub hero — separă fără să pună o bordură dură. */
.nh-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--nh-border2) 25%, var(--nh-border2) 75%, transparent);
}

/* ─────────────────────────────────────────────────────────────────────────────
   4. Butoane
   ───────────────────────────────────────────────────────────────────────────── */
.nh-btn .elementor-button,
.nh-btn-ghost .elementor-button {
  font-weight: 700; font-size: 15px; letter-spacing: -.01em;
  padding: 13px 24px; border-radius: 11px;
  transition: transform .16s cubic-bezier(.2, .8, .3, 1), box-shadow .16s ease, background .16s ease;
}
.nh-btn .elementor-button {
  background: linear-gradient(180deg, #8b6dff, var(--nh-accent));
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 6px 20px rgba(124, 92, 252, .28);
}
.nh-btn .elementor-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 12px 32px rgba(124, 92, 252, .42);
}
.nh-btn .elementor-button:active { transform: translateY(0); }

.nh-btn-ghost .elementor-button {
  background: transparent; color: var(--nh-text2);
  border: 1px solid var(--nh-border);
}
.nh-btn-ghost .elementor-button:hover {
  color: var(--nh-text); border-color: var(--nh-border2);
  background: rgba(255, 255, 255, .03); transform: translateY(-2px);
}

/* ─────────────────────────────────────────────────────────────────────────────
   5. Benzi și secțiuni
   ───────────────────────────────────────────────────────────────────────────── */
.nh-band {
  background: linear-gradient(180deg, rgba(124, 92, 252, .05), transparent 60%), #0d1120;
  border-top: 1px solid var(--nh-border);
  border-bottom: 1px solid var(--nh-border);
}

.nh-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(10, 13, 22, .72);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  border-bottom: 1px solid var(--nh-border);
}
.nh-logo .elementor-heading-title {
  font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--nh-text);
}
.nh-nav p { margin: 0; }
.nh-nav a {
  color: var(--nh-text2); font-size: 14px; font-weight: 500;
  padding: 4px 2px; position: relative;
}
.nh-nav a::after {
  content: ""; position: absolute; left: 2px; right: 2px; bottom: 0; height: 1.5px;
  background: var(--nh-accent2); transform: scaleX(0); transform-origin: left;
  transition: transform .18s ease;
}
.nh-nav a:hover { color: var(--nh-text); }
.nh-nav a:hover::after { transform: scaleX(1); }

.nh-footer { border-top: 1px solid var(--nh-border); color: var(--nh-text3); font-size: 13px; }
.nh-footer a { color: var(--nh-text3); }
.nh-footer a:hover { color: var(--nh-text2); }

/* ─────────────────────────────────────────────────────────────────────────────
   6. Acordeon („Prima deschidere pe macOS")
   ───────────────────────────────────────────────────────────────────────────── */
.nh-details { max-width: 620px; margin-inline: auto; }
.nh-details .elementor-accordion-item {
  background: var(--nh-surface);
  border: 1px solid var(--nh-border) !important;
  border-radius: var(--nh-r); overflow: hidden;
}
.nh-details .elementor-tab-title {
  color: var(--nh-text); font-weight: 700; font-size: 14px; padding: 14px 18px;
  transition: background .15s ease;
}
.nh-details .elementor-tab-title:hover { background: rgba(255, 255, 255, .03); }
.nh-details .elementor-tab-content {
  color: var(--nh-text2); font-size: 13.5px; border: none !important; padding: 0 18px 16px;
}
.nh-details code {
  background: var(--nh-bg); border: 1px solid var(--nh-border);
  border-radius: 6px; padding: 2px 7px; font-size: 12px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   7. Mobil
   Sub 780px meniul din antet devine o linie derulabilă, nu se rupe pe trei rânduri.
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 780px) {
  .nh-nav p {
    display: flex; gap: 16px; overflow-x: auto; justify-content: flex-start;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .nh-nav p::-webkit-scrollbar { display: none; }
  .nh-nav a { white-space: nowrap; }
  .nh-header { position: static; }        /* pe ecran mic, antetul lipit fură prea mult loc */
  .nh-hero-title .elementor-heading-title { max-width: none; }
}