/* ==========================================================================
   layout.css — SCHELETUL PAGINII: header sticky + meniu rollover, footer,
                secțiuni, grile, bară de titlu, layout document cu cuprins
   --------------------------------------------------------------------------
   Depinde de: tokens.css, base.css
   Componente: .site-header, .nav, .nav__item, .nav__sub, .page-hero,
               .section, .grid, .doc-layout, .site-footer, .bottom-bar
   Comportament meniu (cerință): desktop = hover/rollover + focus tastatură;
   mobil/tabletă = tap (JS: main.js → initNav). Vezi comentariile de mai jos.
   ========================================================================== */

/* ------------------------------------------------------------------
   HEADER STICKY
   ------------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--ale-navy);
  color: var(--fg-on-dark);
  border-bottom: 1px solid var(--border-on-dark);
  box-shadow: var(--shadow-md);
}
.site-header__inner {
  display: flex; align-items: center; gap: var(--sp-5);
  min-height: var(--header-h);
}

/* Marca: logo oficial + denumire. Logo-ul oficial se depune în
   /assets/img/logo-ale.svg (sau .png la 2x) — NU se modifică (Anexa 4, art. 8) */
.brand { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: inherit; flex-shrink: 0; }
.brand__logo { width: 2.75rem; height: 2.75rem; }
.brand__name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.1; }
.brand__short { display: none; }
.brand__sub  { display: block; font-family: var(--font-text); font-weight: 400; font-size: var(--fs--1); color: var(--fg-on-dark-muted); }

/* ------------------------------------------------------------------
   NAVIGAȚIE PRINCIPALĂ (desktop)
   Structură HTML:
   <nav class="nav" aria-label="Navigație principală">
     <ul class="nav__list">
       <li class="nav__item">
         <button class="nav__link" aria-expanded="false" aria-controls="sub-despre">Despre A.L.E.</button>
         <div class="nav__sub" id="sub-despre"> <ul>…</ul> </div>
       </li> …
   Deschidere pe desktop: :hover și :focus-within (CSS pur) — funcționează
   fără JS. Pe pointer grosier (touch) CSS-ul nu deschide la hover; JS
   comută aria-expanded și clasa .is-open.
   ------------------------------------------------------------------ */
.nav { margin-left: auto; }
.nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--sp-1); }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: var(--sp-1); white-space: nowrap;
  padding: var(--sp-2) var(--sp-3); border: 0; background: none;
  color: var(--fg-on-dark); font-weight: 500; font-size: 0.95rem;
  text-decoration: none; border-radius: var(--r-sm);
  border-bottom: 2px solid transparent;
}
.nav__link:hover, .nav__item.is-open > .nav__link, .nav__item[aria-current] > .nav__link,
.nav__link[aria-current="page"] { border-bottom-color: var(--ale-aur-300); }
.nav__link .chev { width: 0.8em; height: 0.8em; transition: transform var(--t-fast) var(--ease); }
.nav__item.is-open > .nav__link .chev { transform: rotate(180deg); }

.nav__sub {
  position: absolute; top: 100%; left: 0; min-width: 17rem; z-index: var(--z-menu);
  background: var(--bg-elevated); color: var(--fg);
  border-radius: 0 0 var(--r-md) var(--r-md); border-top: 3px solid var(--ale-aur);
  box-shadow: var(--shadow-lg); padding: var(--sp-2) 0;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility 0s linear var(--t-fast);
}
.nav__sub ul { list-style: none; margin: 0; padding: 0; }
.nav__sub a {
  display: block; padding: var(--sp-2) var(--sp-4); color: var(--fg); text-decoration: none; font-size: 0.95rem;
}
.nav__sub a:hover, .nav__sub a:focus-visible { background: var(--ale-azur-100); color: var(--ale-azur); }
.nav__sub a[aria-current="page"] { font-weight: 700; color: var(--ale-azur); }
.nav__sub .nav__sub-note { padding: var(--sp-2) var(--sp-4) var(--sp-1); font-size: var(--fs--1); color: var(--fg-muted); border-top: 1px solid var(--border); margin-top: var(--sp-2); }

/* Deschidere: hover (doar pointer fin), focus tastatură, sau clasă JS */
@media (hover: hover) and (pointer: fine) {
  .nav__item:hover > .nav__sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
}
.nav__item:focus-within > .nav__sub,
.nav__item.is-open > .nav__sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

/* Acțiuni din header: „Devino membru” (aur) + „Portal membri” (contur) */
.header-actions { display: flex; gap: var(--sp-2); align-items: center; flex-shrink: 0; }
.header-actions .btn { white-space: nowrap; }

/* Desktop compact (≤ 90em ≈ 1530px): subtitlul mărcii dispare, meniul se
   strânge, ca să încapă 7 intrări + 2 acțiuni fără să depășească rândul. */
@media (max-width: 90em) and (min-width: 72.01em) {
  .brand__full, .brand__sub { display: none; }
  .brand__short { display: inline; font-size: 1.25rem; }
  .nav__link { font-size: 0.88rem; padding: var(--sp-2) 0.55rem; }
  .site-header__inner { gap: var(--sp-4); }
}

/* Buton hamburger — vizibil doar sub 72em */
.nav-toggle { display: none; background: none; border: 1px solid var(--border-on-dark); color: var(--fg-on-dark); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); }
.nav-toggle svg { width: 1.4rem; height: 1.4rem; flex-shrink: 0; }

/* ------------------------------------------------------------------
   NAVIGAȚIE MOBIL / TABLETĂ (≤ 72em ≈ 1224px la 17px)
   Meniul devine un panou vertical sub header; submeniurile se deschid
   prin tap (JS), nu prin hover.
   ------------------------------------------------------------------ */
@media (max-width: 72em) {
  .nav-toggle { display: inline-flex; margin-left: auto; flex-shrink: 0; }
  .nav-toggle svg { stroke: var(--ws-white); }
  .site-header__inner > .header-actions .btn--ghost { display: none; }   /* economisim spațiu; rămâne în meniu */
  .brand { min-width: 0; flex-shrink: 1; }        /* marca se trunchiază, nu butoanele */
  .brand__name { font-size: 0.9rem; min-width: 0; }
  .brand__full { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .brand__sub { font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nav {
    position: fixed; inset: var(--header-h) 0 0 0; margin: 0;
    background: var(--ale-navy); overflow-y: auto; padding: var(--sp-4) var(--gutter) var(--sp-8);
    display: none;
  }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__link { width: 100%; justify-content: space-between; padding: var(--sp-4) var(--sp-2); font-size: var(--fs-1); border-bottom: 1px solid var(--border-on-dark); border-radius: 0; }
  .nav__sub {
    position: static; min-width: 0; box-shadow: none; border: 0; border-radius: 0;
    background: var(--ale-navy-800); transform: none; transition: none;
    display: none; opacity: 1; visibility: visible;
  }
  .nav__item.is-open > .nav__sub { display: block; }
  .nav__item:focus-within > .nav__sub { display: block; }
  .nav__sub a { color: var(--fg-on-dark); padding-left: var(--sp-5); }
  .nav__sub a:hover, .nav__sub a:focus-visible { background: var(--ale-navy-700); color: var(--ale-aur-300); }
  .nav__sub .nav__sub-note { color: var(--fg-on-dark-muted); border-color: var(--border-on-dark); }
  .nav { display: none; flex-direction: column; }
  .nav.is-open { display: flex; }
  .nav .header-actions--mobile { display: flex; flex-direction: column; order: -1; margin-bottom: var(--sp-4); } /* CTA-urile primele, vizibile fără scroll */
  body.nav-locked { overflow: hidden; }                   /* fără scroll în spatele meniului */
}
/* Telefon: CTA-ul din header se mută exclusiv în meniu */
@media (max-width: 40em) {
  .site-header__inner > .header-actions .btn--primary { display: none; } /* rămâne în meniu */
  .brand__logo { width: 2.25rem; height: 2.25rem; }
}
@media (min-width: 72.01em) { .header-actions--mobile { display: none; } }

/* ------------------------------------------------------------------
   BARĂ DE TITLU A PAGINII (.page-hero) — pe toate paginile interne
   Navy, cu breadcrumb, titlu, descriere. Marchează vizual că am părăsit
   landing page-ul.
   ------------------------------------------------------------------ */
.page-hero { background: var(--ale-navy); color: var(--fg-on-dark); padding: var(--sp-7) 0 var(--sp-6); border-bottom: 4px solid var(--ale-aur); }
.page-hero h1 { margin-bottom: var(--sp-3); }
.page-hero .lead { color: var(--fg-on-dark-muted); }
.breadcrumb { font-size: var(--fs--1); margin-bottom: var(--sp-4); }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.breadcrumb li + li::before { content: "/"; margin-right: var(--sp-2); color: var(--fg-on-dark-muted); }
.breadcrumb a { color: var(--fg-on-dark-muted); }
.breadcrumb [aria-current] { color: var(--fg-on-dark); }

/* ------------------------------------------------------------------
   SECȚIUNI ȘI GRILE
   ------------------------------------------------------------------ */
.section { padding: var(--sp-8) 0; }
.section--tight { padding: var(--sp-6) 0; }
.section--dark { background: var(--ale-navy); color: var(--fg-on-dark); }
.section--elevated { background: var(--bg-elevated); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section__head { max-width: var(--measure); margin-bottom: var(--sp-6); }
.section__head h2 { margin-bottom: var(--sp-2); }
.section__head p { color: var(--fg-muted); margin: 0; }
.section--dark .section__head p { color: var(--fg-on-dark-muted); }

.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

/* ------------------------------------------------------------------
   LAYOUT DOCUMENT / ARTICOL: conținut + cuprins sticky lateral
   ------------------------------------------------------------------ */
.doc-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
@media (min-width: 60em) { .doc-layout { grid-template-columns: 16rem minmax(0, 1fr); } .doc-layout--aside-right { grid-template-columns: minmax(0, 1fr) 18rem; } }
.doc-aside { align-self: start; position: sticky; top: calc(var(--header-h) + var(--sp-5)); }
.toc { font-size: var(--fs--1); border-left: 2px solid var(--border); }
.toc h2 { font-size: var(--fs-0); margin: 0 0 var(--sp-3) var(--sp-4); }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc a { display: block; padding: var(--sp-1) var(--sp-4); color: var(--fg-muted); text-decoration: none; margin-left: -2px; border-left: 2px solid transparent; }
.toc a:hover, .toc a[aria-current="true"] { color: var(--ale-azur); border-left-color: var(--ale-aur); }
.toc ol ol a { padding-left: var(--sp-6); }

/* ------------------------------------------------------------------
   FOOTER GLOBAL — identic pe toate paginile (cerință). 4 coloane.
   ------------------------------------------------------------------ */
.site-footer { background: var(--ale-navy); color: var(--fg-on-dark-muted); border-top: 4px solid var(--ale-aur); margin-top: auto; }
.site-footer a { color: var(--fg-on-dark); text-decoration: none; }
.site-footer a:hover { color: var(--ale-aur-300); text-decoration: underline; }
.footer-grid { display: grid; gap: var(--sp-6); padding: var(--sp-7) 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.footer-grid h2 { font-size: var(--fs-0); color: var(--fg-on-dark); margin-bottom: var(--sp-3); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: var(--sp-2); }
.footer-id { font-size: var(--fs--1); line-height: 1.5; }
.footer-id dl { margin: var(--sp-3) 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
.footer-id dt { color: var(--fg-on-dark-muted); }
.footer-id dd { margin: 0; color: var(--fg-on-dark); }
.footer-legal { border-top: 1px solid var(--border-on-dark); padding: var(--sp-4) 0; font-size: var(--fs--1); display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); justify-content: space-between; }
.footer-legal p { margin: 0; }

/* Bară inferioară îngustă, fixă în viewport (opțională, cerință UX §10).
   Activată prin <body class="has-bottom-bar">. Nu înlocuiește footer-ul. */
.bottom-bar { display: none; }
body.has-bottom-bar .bottom-bar {
  display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-header);
  background: var(--ale-navy-800); border-top: 1px solid var(--border-on-dark);
  justify-content: center; gap: var(--sp-5); padding: var(--sp-2) var(--gutter); font-size: var(--fs--1);
}
body.has-bottom-bar { padding-bottom: 2.5rem; }
.bottom-bar a { color: var(--fg-on-dark); text-decoration: none; }

/* Contact: eticheta deasupra valorii, fără coloane înguste. */
.contact-row { min-width: 0; }
.contact-row dt { font-weight: 600; margin: 0 0 .2rem; }
.contact-row dd { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
.contact-block dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }