/**
 * Variabilele globale ale temei (peste Bootstrap) - fonturi, culori brand și
 * setările per componentă (navbar, butoane, dropdown catalog, badge-uri,
 * alerte, paginare), fiecare în secțiunea ei mai jos.
 *
 * Culorile/fontul grilei de produse (catalog) NU stau aici - sunt variabilele
 * --fsg-* din assets/css/shop-grid.css.
 */

/* Sistem cromatic oficial „Mineral Premium”. Sursa de adevăr și regulile de
 * utilizare sunt în PHOMI-DESIGN-SYSTEM.md. Nu se introduc alte culori de
 * interfață fără aprobarea explicită a proprietarului site-ului.
 * Cyanul plin este rezervat accentelor și acțiunilor, nu textului pe deschis.
 * Font: Archivo (variable, wdth+wght) - stand-in pentru Adieu până se
 * confirmă licența web; o singură familie în tot site-ul, ca în ghid. */
:root {
	--bs-body-font-family: 'Archivo', Arial, sans-serif;
    --bs-second-font: 'Archivo', Arial, sans-serif;

    /* Paleta Mineral Premium — tokenuri canonice. */
    --phomi-dark: #080909;
    --phomi-dark-rgb: 8, 9, 9;
    --phomi-graphite: #17191A;
    --phomi-graphite-rgb: 23, 25, 26;
    /* Neutrul deschis al site-ului. A inlocuit ivory-ul cald #F2F0EA in
       septembrie 2026: aceeasi luminozitate (contrast 15,51 vs 15,48 pe
       grafit), temperatura inversata (R-B: +8 cald -> -5 rece). Sectiunile
       si-au pastrat greutatea in pagina, s-a schimbat doar tonul. */
    --phomi-mist: #EDF1F2;
    --phomi-mist-rgb: 237, 241, 242;
    --phomi-surface: #FFFFFF;
    --phomi-surface-rgb: 255, 255, 255;
    --phomi-blue: #77C7D1;
    --phomi-blue-rgb: 119, 199, 209;
    /* #2E7C88 dădea 4,38:1 pe gri deschis - sub minimul WCAG pentru text.
       #29707B: 5,68:1 pe alb, 5,16:1 pe #F4F4F4 (aliniat la sistem, 03.09.2026) */
    --phomi-blue-ink: #29707B;
    --phomi-blue-ink-rgb: 41, 112, 123;
    --phomi-stone: #B8AA96;
    --phomi-stone-rgb: 184, 170, 150;
    --phomi-text-muted: #686864;
    --phomi-text-muted-rgb: 104, 104, 100;
    --phomi-border: #D8D4CB;
    --phomi-border-rgb: 216, 212, 203;

    /* Aliasuri păstrate pentru componentele vechi ale temei. */
    --phomi-grey: var(--phomi-border);
    --phomi-grey-dark: var(--phomi-text-muted);

    /* --bs-danger era roșul de brand Fatade3D; tot site-ul îl folosește ca
       accent, deci îl remapăm pe albastrul-cerneală PHOMI ca hover-urile,
       badge-urile și stările active să treacă automat pe noul brand */
	--bs-danger: var(--phomi-blue-ink);
    --bs-body-color: var(--bs-black);
	/* 46,124,136 = #2E7C88, varianta respinsă (4,38:1 pe gri); Bootstrap rezolvă
	   culoarea linkurilor prin -rgb, deci trebuie să fie tot blue-ink (04.09.2026) */
	--bs-danger-rgb: 41, 112, 123;
    --bs-secondary-rgb: 138, 138, 138;
    --bs-light-rgb: 244, 244, 244;
    --bs-link-color-rgb: 41, 112, 123;
    --bs-link-color: var(--phomi-blue-ink);

    --bs-border-radius-lg:  .75rem;
    --bs-border-radius-xl:  1.25rem;
    --bs-border-radius-xxl: 1.875rem;

    /* Colțuri. Prima pagină e referința pentru tot site-ul: carduri, imagini,
       tabele și panouri DREPTE; rotunjire doar pe elemente mici (2px), pe
       cercuri (săgeți, iconițe) și pe pastile (telefonul din antet). Paginile
       consumă token-urile astea, nu declară raze proprii - așa a apărut
       diferența dintre prima pagină și „Despre noi” (03.09.2026). */
    --phomi-radius-sm: 2px;
    --phomi-radius-md: 0;
    --phomi-radius-lg: 0;
    --phomi-radius-xl: 0;

    /* Ritmul vertical al secțiunilor. Fluid după ÎNĂLȚIMEA ferestrei (vh), nu
       doar după lățime: un laptop de 1366×768 are ~630px utili sub antet, un
       monitor 1080p ~940px, iar aceleași 104px de padding și 650px de card nu
       pot arăta bine pe amândouă. Maximele sunt valorile istorice (84/60);
       minimele țin secțiunile respirabile pe ecrane joase. Regula de design:
       titlul + primul rând de conținut se văd împreună, niciun bloc nu
       depășește ~60% din înălțimea ferestrei (vezi design-phomi). */
    --phomi-section-top: clamp(56px, 8vh, 84px);
    --phomi-section-bottom: clamp(44px, 7vh, 60px);
    --phomi-head-gap: clamp(26px, 4vh, 40px);
    /* Titlurile mari de secțiune: sub titlul hero (3.75rem), ca ierarhia să
       rămână corectă și un titlu pe trei rânduri să nu ocupe un sfert de ecran. */
    --phomi-h2-display: clamp(2.2rem, 3.2vw, 3.5rem);
    /* Înălțimea antetului fix în starea normală; phomi-nav.js o măsoară și o
       suprascrie. O consumă hero-ul (padding-top) și ancorele (scroll-padding). */
    --phomi-nav-h: 107px;
}

/* ancorele (#phomiMostre etc.) se opresc sub antetul fix, nu în spatele lui */
html { scroll-padding-top: calc(var(--phomi-nav-h) + 16px); }

/* titlurile poartă lățimea literei (ghidul folosește o grotescă lată);
   font-stretch mapează pe axa wdth a Archivo */
h1, h2,
.ff-secondary,
.section-title h1,
.section-title h2,
.page-header h1 {
    font-stretch: 112%;
}


/* navbar */
.navbar {
    --bs-navbar-padding-y: 1.375rem;
    --bs-navbar-brand-margin-end: 0;
    --bs-navbar-nav-link-padding-x: .4375rem;
    --bs-navbar-hover-color: var(--bs-danger);
    --bs-navbar-active-color: var(--bs-danger);
}
.navbar-nav {
    --bs-nav-link-font-weight: 500;
    --bs-nav-link-padding-y: 0;
    --bs-nav-link-padding-x: 0;
    --bs-nav-link-color: var(--bs-black);
}


/* buttons */
.btn {
    --bs-btn-color: var(--bs-black);
    --bs-border-radius: .75rem;
    --bs-btn-font-weight: 600;
    --bs-btn-line-height: 1.375rem;
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    transition: all .3s ease-in-out;
    text-underline-offset: 4px;
}

/* după .btn de mai sus: aceeași specificitate, deci ordinea decide -
   variantele trebuie să vină după regula de bază */
/* Butoanele pe fundal închis (hero-uri, CTA-uri): pe negru butonul negru
   dispare, deci primarul e câmpul albastru cu text negru (10,9:1), iar
   secundarul e conturul alb. Globale, ca fiecare pagină să folosească
   aceleași butoane; se combină cu .btn și .btn-lg din Bootstrap. */
.btn-phomi {
    --bs-btn-color: var(--bs-black);
    --bs-btn-bg: var(--phomi-blue);
    --bs-btn-border-color: var(--phomi-blue);
    --bs-btn-hover-color: var(--bs-black);
    --bs-btn-hover-bg: var(--bs-white);
    --bs-btn-hover-border-color: var(--bs-white);
    --bs-btn-active-color: var(--bs-black);
    --bs-btn-active-bg: var(--bs-white);
    --bs-btn-active-border-color: var(--bs-white);
    --bs-btn-focus-shadow-rgb: var(--phomi-blue-rgb);
}
.btn-phomi-ghost {
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: rgba(var(--phomi-surface-rgb), .55);
    --bs-btn-hover-color: var(--bs-black);
    --bs-btn-hover-bg: var(--bs-white);
    --bs-btn-hover-border-color: var(--bs-white);
    --bs-btn-active-color: var(--bs-black);
    --bs-btn-active-bg: var(--bs-white);
    --bs-btn-active-border-color: var(--bs-white);
    --bs-btn-focus-shadow-rgb: var(--phomi-surface-rgb);
}
/* săgeata opțională din interiorul butoanelor */
.btn-phomi svg,
.btn-phomi-ghost svg {
    width: 18px;
    height: 18px;
    margin-left: 8px;
    vertical-align: -3px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.btn-lg {
    --bs-btn-padding-x: 1.875rem;
    --bs-btn-padding-y: 1rem;
    --bs-btn-font-size: 1rem;
}

/* .btn-warning = clasa istorică a CTA-ului principal în toată tema.
   Pe PHOMI acțiunea primară e neagră (ghid: negru = competență); hover-ul
   trece pe albastrul de brand cu text negru (10,9:1) - momentul de culoare. */
.btn-warning {
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bs-black);
    --bs-btn-border-color: var(--bs-black);
    --bs-btn-hover-color: var(--bs-black);
    --bs-btn-hover-bg: var(--phomi-blue);
    --bs-btn-hover-border-color: var(--phomi-blue);
    --bs-btn-focus-shadow-rgb: 119, 199, 209;
    --bs-btn-active-color: var(--bs-black);
    --bs-btn-active-bg: var(--phomi-blue);
    --bs-btn-active-border-color: var(--phomi-blue);
    --bs-btn-active-shadow: unset;
    --bs-btn-disabled-color: var(--bs-white);
    --bs-btn-disabled-bg: var(--phomi-grey-dark);
    --bs-btn-disabled-border-color: var(--phomi-grey-dark);
}

/* butonul secundar: contur negru, hover plin negru */
.btn-outline-danger {
    --bs-btn-color: var(--bs-black);
    --bs-btn-border-color: var(--bs-black);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-black);
    --bs-btn-hover-border-color: var(--bs-black);
    --bs-btn-focus-shadow-rgb: 119, 199, 209;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-black);
    --bs-btn-active-border-color: var(--bs-black);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: var(--phomi-grey-dark);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--phomi-grey);
}

.btn-danger {
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bs-black);
    --bs-btn-border-color: var(--bs-black);
    --bs-btn-hover-color: var(--bs-black);
    --bs-btn-hover-bg: var(--phomi-blue);
    --bs-btn-hover-border-color: var(--phomi-blue);
    --bs-btn-focus-shadow-rgb: 119, 199, 209;
    --bs-btn-active-color: var(--bs-black);
    --bs-btn-active-bg: var(--phomi-blue);
    --bs-btn-active-border-color: var(--phomi-blue);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-bg: var(--phomi-grey-dark);
    --bs-btn-disabled-border-color: var(--phomi-grey-dark);
}


/* dropdown menu for catalog */
.dropdown--catalog .dropdown-menu {
    --bs-dropdown-min-width: 20.625rem;
    --bs-dropdown-padding-y: 0;
    --bs-dropdown-font-size: 1.25rem;
    --bs-dropdown-bg: rgba(244, 244, 244, 0.8);
    --bs-dropdown-border-radius: .75rem;
    --bs-dropdown-box-shadow: unset;
    --bs-dropdown-link-hover-color: var(--bs-white);
    --bs-dropdown-link-hover-bg: var(--bs-black);
    --bs-dropdown-link-active-bg: var(--bs-black);
    --bs-dropdown-link-disabled-color: rgba(0, 0, 0, .4);
    --bs-dropdown-item-padding-x: 1.75rem;
    --bs-dropdown-item-padding-y: 1rem;
    --bs-dropdown-header-color: var(--bs-body-color);
    --bs-dropdown-header-padding-x: 1.75rem;
    --bs-dropdown-header-padding-y: 1.5rem;
}
.dropdown-header {
    background: rgba(228, 228, 228, 0.6);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.375rem;
    letter-spacing: -.43px;
    border-radius: 14px 14px 0 0;
}

/* badges */
.badge {
    --bs-badge-font-size: .75rem;
    --bs-badge-font-weight: 700;
    --bs-badge-padding-x: 0.625rem;
    --bs-badge-padding-y: 0.25rem;
    --bs-badge-border-radius: .375rem;
    --bs-badge-color: var(--bs-white);
    --bs-badge-bg: var(--bs-black);
    text-transform: uppercase;
    letter-spacing: -0.23px;
}

/* alerts - roșu SEMANTIC de eroare (nu mai e culoare de brand, deci nu
   mai vine din --bs-danger; erorile rămân roșii prin convenție) */
.alert-danger {
    --bs-alert-color: var(--bs-white);
    --bs-alert-bg: #B42318;
    --bs-alert-link-color: var(--bs-white);
}

/* EXCEPȚIE: banda promo de sus (template-parts/content-banner-top.php) e
   construită pe .alert-danger, dar nu e o eroare - e mesaj de brand. Pe
   PHOMI devine neagră, cu link și buton de închidere albe. */
.banner-top.alert-danger {
    --bs-alert-color: var(--bs-white);
    --bs-alert-bg: var(--bs-black);
    --bs-alert-link-color: var(--bs-white);
    border: 0;
}
.banner-top.alert-danger .btn-link { color: var(--bs-white); }
.banner-top.alert-danger .btn-close { filter: invert(1); }

/* pagination */
.pagination {
    --bs-pagination-padding-x: 16px;
    --bs-pagination-padding-y: 9px;
    --bs-pagination-color: var(--bs-black);
    --bs-pagination-bg: transparent;
    --bs-pagination-border-color: var(--bs-light);
    --bs-pagination-hover-color: var(--bs-black);
    --bs-pagination-hover-bg: var(--bs-light);
    --bs-pagination-hover-border-color: var(--bs-light);
    --bs-pagination-active-color: var(--bs-white);
    --bs-pagination-focus-color: var(--bs-danger);
    --bs-pagination-active-bg: var(--bs-black);
    --bs-pagination-active-border-color: var(--bs-black);
    --bs-pagination-disabled-color: var(--bs-secondary);
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-disabled-border-color: var(--bs-light);
    --bs-pagination-item-padding-x: 0.5rem;
    --bs-pagination-item-padding-y: 0.25rem;
    --bs-pagination-border-radius: .375rem;
    --bs-pagination-item-margin: 0 .25rem;
    --bs-pagination-item-font-weight: 500;
}

/* Unitatea de preț („/ buc”, „/ m²”): era negru la 25% opacitate = 2,6:1 pe alb; token-ul de text estompat ține 5,9:1 (04.09.2026) */
.fatade3d-price-unit {
	color: var(--phomi-text-muted, #5C6466);
	font-weight: 400;
}

/* ==========================================================================
   Accesibilitate globală — 04.09.2026
   Auditul vizual a găsit zero reguli :focus-visible în CSS-ul global: antetul,
   subsolul, formularele și butoanele erau invizibile la navigarea din tastatură
   (outline: none moștenit din reset). Regula de mai jos e singura sursă globală;
   componentele care au deja inel propriu (phomi-front.css, shop-grid.css) o
   suprascriu prin specificitate mai mare.
   ========================================================================== */
:focus-visible {
	outline: 2px solid var(--phomi-blue-ink);
	outline-offset: 2px;
	border-radius: var(--phomi-radius-sm, 2px);
}
/* pe fundal închis inelul închis nu se vede */
.bg-black :focus-visible,
.bg-dark :focus-visible,
.site-footer :focus-visible,
.banner-top :focus-visible,
[class*="--dark"] :focus-visible {
	outline-color: var(--phomi-blue);
}
/* legătura de sărire peste navigație (header.php) */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1100;
	padding: 12px 20px;
	background: var(--bs-black);
	color: var(--bs-white);
	font-weight: 600;
	text-decoration: none;
}
.skip-link:focus {
	left: 8px;
	top: 8px;
}

/* Zone de atins: iconițele din antet erau 26×26 px, hamburgerul 24×21 px.
   Minimul funcțional e 44×44; padding-ul păstrează dimensiunea vizuală. */
.btn-trigger-search,
.btn-user-account,
.btn-cart,
.navbar-toggler {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.site-footer a[href^="tel:"],
.site-footer .footer-nav ul li a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* Meniul mobil deschis: pagina din spate nu mai derulează (phomi-nav.js pune
   clasa și păstrează poziția în body.style.top) — 04.09.2026 */
body.phomi-menu-open {
	position: fixed;
	width: 100%;
	overflow: hidden;
}