/*
Theme Name:         SiteuriFirme.ro
Theme URI:          https://siteurifirme.ro/
Author:             SiteuriFirme.ro
Author URI:         https://siteurifirme.ro/
Description:        Temă bloc (FSE) pentru siteurifirme.ro — websituri & aplicații, optimizare SEO, automatizări cu AI. Identitate „Stup”: ceară caldă, lumină de miere, fagurele ca structură. Fără page builder, fără jQuery, fonturi self-hosted (GDPR).
Requires at least:  6.5
Tested up to:       6.8
Requires PHP:       7.4
Version:            0.2.0
License:            GNU General Public License v2 or later
License URI:        https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:        siteurifirme
Tags:               full-site-editing, block-patterns, blog, business, one-column, wide-blocks, accessibility-ready
*/

/* ==========================================================================
   SiteuriFirme — Design System „Stup”
   --------------------------------------------------------------------------
   Culorile, fonturile și spațierile vin din `theme.json` ca variabile CSS
   (--wp--preset--*). Aici stau doar alias-urile scurte, componentele de
   antet/subsol și clasele folosite în blocurile HTML din `pages/`.

   Principii vizuale:
     · fundal de ceară caldă, celule albe — nu carduri gri pe alb
     · lumina de miere vine dintr-un colț, nu e tapet peste tot
     · fagurele e structură (celule, marcaje), nu fundal decorativ
     · colțuri rotunde și butoane pastilă — direcția e caldă, nu tehnică
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Token-uri
   -------------------------------------------------------------------------- */

:root {
	--sf-base:        var(--wp--preset--color--base,         #FFFFFF);
	--sf-wax:         var(--wp--preset--color--wax,          #FDF7EA);
	--sf-pollen:      var(--wp--preset--color--pollen,       #FFEFC9);
	--sf-honey-light: var(--wp--preset--color--honey-light,  #FFD874);
	--sf-honey:       var(--wp--preset--color--honey,        #FFB627);
	--sf-amber:       var(--wp--preset--color--amber,        #EE9500);
	--sf-amber-deep:  var(--wp--preset--color--amber-deep,   #A05F00);
	--sf-comb:        var(--wp--preset--color--comb,         #E7D5AE);
	--sf-slate:       var(--wp--preset--color--slate,        #6E5A38);
	--sf-charcoal:    var(--wp--preset--color--charcoal,     #4A3617);
	--sf-ink:         var(--wp--preset--color--ink,          #241905);

	--sf-font-body:    var(--wp--preset--font-family--body);
	--sf-font-display: var(--wp--preset--font-family--display);
	--sf-font-mono:    var(--wp--preset--font-family--mono);

	--sf-gutter:  clamp(1.25rem, 5vw, 3.5rem);
	--sf-wide:    var(--wp--style--global--wide-size, 1240px);
	--sf-content: var(--wp--style--global--content-size, 760px);

	--sf-radius:    18px;
	--sf-radius-sm: 12px;
	--sf-radius-lg: 26px;
	--sf-pill:      999px;
	--sf-hex: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

	/* Umbre calde — pe ceară, o umbră gri arată murdar */
	--sf-shadow-soft: 0 1px 2px rgb(74 54 23 / 5%), 0 10px 28px -14px rgb(74 54 23 / 18%);
	--sf-shadow-lift: 0 2px 5px rgb(74 54 23 / 6%), 0 22px 46px -20px rgb(74 54 23 / 26%);
	--sf-shadow-honey: 0 10px 28px -10px rgb(238 149 0 / 42%);

	--sf-honey-grad: linear-gradient(135deg, #FFD874 0%, #FFB627 52%, #EE9500 100%);

	--sf-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--sf-dur: 200ms;
	--sf-header-h: 74px;
}

/* --------------------------------------------------------------------------
   2. Bază
   -------------------------------------------------------------------------- */

/* WordPress NU setează box-sizing global. Fără linia asta, orice element cu
   width:100% și padding depășește containerul cu exact lățimea padding-ului —
   ceea ce scotea containerele, butoanele și casetele în afara ecranului pe
   telefon. Prima regulă din temă, nu una adăugată la urmă. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word;
}

:target {
	scroll-margin-top: calc(var(--sf-header-h) + 1.5rem);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--sf-amber);
	outline-offset: 2px;
	border-radius: 4px;
}

img,
video {
	max-width: 100%;
	height: auto;
}

.wp-block-image :where(img) {
	border-radius: var(--sf-radius);
}

/* Skip link — WordPress îl injectează singur în temele bloc, cu CSS inline
   propriu; specificitatea de mai jos e necesară ca să-l îmbrace în identitatea
   noastră. */
.skip-link.screen-reader-text:focus,
.skip-link:focus {
	top: 1rem;
	left: var(--sf-gutter);
	z-index: 999;
	width: auto;
	height: auto;
	padding: 0.75rem 1.25rem;
	clip-path: none;
	border-radius: var(--sf-pill);
	background: var(--sf-ink);
	color: var(--sf-wax);
	font: 700 0.9375rem/1 var(--sf-font-body);
	text-decoration: none;
	box-shadow: var(--sf-shadow-lift);
}

.sf-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   3. Antet
   -------------------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid rgb(231 213 174 / 70%);
	background: transparent;
}

/* Estomparea stă pe un pseudo-element, NU pe antetul însuși.
   `backdrop-filter` creează un containing block pentru descendenții
   `position: fixed` — iar overlay-ul meniului mobil e exact așa. Pus direct pe
   .site-header, meniul deschis se raporta la antet în loc de ecran și apărea
   ca o bandă de 80px în loc să acopere tot ecranul. */
.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgb(253 247 234 / 86%);
	backdrop-filter: saturate(170%) blur(14px);
	-webkit-backdrop-filter: saturate(170%) blur(14px);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.site-header::before { background: var(--sf-wax); }
}

.site-header__inner {
	display: flex;
	align-items: center;
	min-height: var(--sf-header-h);
	max-width: var(--sf-wide);
	margin-inline: auto;
	padding-inline: var(--sf-gutter);
}

.site-header__inner > * { width: 100%; }

/* Wordmark — semnul „Cursor” desenat ca SVG inline (zero cereri de rețea).
   Sursa e în assets/images/logo/2-cursor.svg; după orice modificare acolo,
   rulează `python3 tools/apply-logo.py`. */
.site-brand .wp-block-site-title {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0;
}

.site-brand .wp-block-site-title::before {
	content: "";
	flex: none;
	width: 26px;
	height: 30px;
	background: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 115.47%22 fill=%22none%22><defs><linearGradient id=%22h%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22><stop offset=%220%22 stop-color=%22%23FFD874%22/><stop offset=%22.55%22 stop-color=%22%23FFB627%22/><stop offset=%221%22 stop-color=%22%23EE9500%22/></linearGradient></defs><path d=%22M50 0 L100 28.87 L100 86.6 L50 115.47 L0 86.6 L0 28.87 Z%22 fill=%22url(%23h)%22/><path d=%22M38 32 L38 82 L50.5 70.5 L58.5 88 L67 84 L59 67 L76 66 Z%22 fill=%22%23241905%22/></svg>") center / contain no-repeat;
}

.site-footer .site-brand .wp-block-site-title::before {
	background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 115.47%22 fill=%22none%22><defs><linearGradient id=%22h%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22><stop offset=%220%22 stop-color=%22%23FFD874%22/><stop offset=%22.55%22 stop-color=%22%23FFB627%22/><stop offset=%221%22 stop-color=%22%23EE9500%22/></linearGradient></defs><path d=%22M50 0 L100 28.87 L100 86.6 L50 115.47 L0 86.6 L0 28.87 Z%22 fill=%22url(%23h)%22/><path d=%22M38 32 L38 82 L50.5 70.5 L58.5 88 L67 84 L59 67 L76 66 Z%22 fill=%22%23241905%22/></svg>");
}

/* Meniul principal */
.site-nav .wp-block-navigation__container { gap: clamp(1rem, 2.4vw, 2.25rem); }

.site-nav .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.35rem;
	font-weight: 500;
	transition: color var(--sf-dur) var(--sf-ease);
}

.site-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--sf-honey);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--sf-dur) var(--sf-ease);
}

.site-nav .wp-block-navigation-item__content:hover::after,
.site-nav .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

.site-nav .current-menu-item > .wp-block-navigation-item__content {
	color: var(--sf-ink);
	font-weight: 700;
}

/* CTA din antet */
.site-header .wp-block-button__link {
	padding: 0.75rem 1.5rem;
	border-radius: var(--sf-pill);
	background: var(--sf-ink);
	color: var(--sf-honey-light);
	font-weight: 700;
	transition: transform var(--sf-dur) var(--sf-ease), background-color var(--sf-dur) var(--sf-ease);
}

.site-header .wp-block-button__link:hover {
	background: var(--sf-charcoal);
	color: var(--sf-honey-light);
	transform: translateY(-1px);
}

/* Overlay-ul meniului mobil — definit explicit, nu lăsat pe stilurile
   implicite ale WordPress. */
.site-nav .wp-block-navigation__responsive-container.is-menu-open {
	position: fixed;
	inset: 0;
	z-index: 200;
	padding: clamp(2rem, 8vw, 3.5rem) var(--sf-gutter);
	background: var(--sf-ink);
	color: var(--sf-wax);
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 1.25rem;
	font-family: var(--sf-font-display);
	font-size: clamp(1.5rem, 7vw, 2rem);
	font-weight: 600;
	letter-spacing: -0.03em;
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--sf-wax);
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	display: none;
}

/* --------------------------------------------------------------------------
   4. Subsol
   -------------------------------------------------------------------------- */

.site-footer {
	position: relative;
	overflow: hidden;
	background: var(--sf-ink);
	color: #C4B49A;
}

/* Fagure discret, ca lumina care se stinge la marginea stupului */
.site-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.07;
	background-image: url("data:image/svg+xml,%3Csvg width='28' height='49' viewBox='0 0 28 49' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23FFB627' fill-rule='evenodd'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81V33.5zM15 0v7.5L27.99 15H28v-2.31l-11-6.34V0h-2zm0 49v-8l12.99-7.5H28v2.31l-11 6.34V49h-2z'/%3E%3C/g%3E%3C/svg%3E");
}

.site-footer > * { position: relative; }

.site-footer__inner {
	max-width: var(--sf-wide);
	margin-inline: auto;
	padding-inline: var(--sf-gutter);
	padding-block: clamp(3.5rem, 8vw, 6rem) clamp(2rem, 4vw, 2.5rem);
}

.site-footer .wp-block-heading {
	color: var(--sf-honey);
	font-family: var(--sf-font-body);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.site-footer .site-brand .wp-block-site-title a { color: var(--sf-wax); }
.site-footer p { color: #C4B49A; }

.site-footer a {
	color: #C4B49A;
	text-decoration: none;
	transition: color var(--sf-dur) var(--sf-ease);
}

.site-footer a:hover,
.site-footer a:focus-visible { color: var(--sf-honey); }

.site-footer a[href^="mailto:"] {
	overflow-wrap: anywhere;
	hyphens: none;
}

.site-footer .wp-block-navigation .wp-block-navigation__container { gap: 0.7rem; }

.site-footer__legal {
	border-top: 1px solid rgb(255 216 116 / 12%);
	color: #8B7C64;
	font-size: 0.875rem;
}

.site-footer__legal a { color: #8B7C64; }

/* --------------------------------------------------------------------------
   5. Zona de conținut
   -------------------------------------------------------------------------- */

.site-main {
	display: block;
	min-height: 40vh;
}

.site-main--flow {
	max-width: var(--sf-content);
	margin-inline: auto;
	padding-block: clamp(3rem, 7vw, 5rem);
	padding-inline: var(--sf-gutter);
}

.site-main--wide {
	max-width: var(--sf-wide);
	margin-inline: auto;
	padding-block: clamp(3rem, 7vw, 5rem);
	padding-inline: var(--sf-gutter);
}

/* --------------------------------------------------------------------------
   6. Componente pentru blocurile HTML din pagini
   -------------------------------------------------------------------------- */

/* --- Structură --- */

.sf-section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }

.sf-section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.sf-section--base  { background: var(--sf-base); }
.sf-section--wax   { background: var(--sf-wax); }

/* Bandă întunecată. Culorile sunt literale, nu tokenuri: tokenurile se
   inversează în tema închisă și banda ar ajunge text deschis pe fundal
   deschis. */
.sf-section--ink {
	position: relative;
	background: #241905;
	color: #C4B49A;
}

.sf-section--ink :is(h1, h2, h3, h4) { color: #FDF7EA; }

.sf-container {
	width: 100%;
	max-width: var(--sf-wide);
	margin-inline: auto;
	padding-inline: var(--sf-gutter);
}

.sf-container--narrow { max-width: 900px; }
.sf-container--text   { max-width: var(--sf-content); }

/* Limitează lățimea textului fără să-l centreze — altfel titlurile de secțiune
   nu s-ar mai alinia cu grila de dedesubt. */
.sf-measure { max-width: 56rem; }

/* --- Antet de secțiune --- */

/* Eticheta nu mai e o pastilă: e text, cu hexagoane ca semne de punctuație.
   Separatorii se pun în HTML cu <span class="sf-dot"></span>. */
.sf-eyebrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.7rem;
	margin: 0 0 1.15rem;
	color: var(--sf-amber-deep);
	font: 700 0.8125rem/1.4 var(--sf-font-body);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.sf-eyebrow::before {
	content: "";
	flex: none;
	width: 10px;
	height: 11px;
	clip-path: var(--sf-hex);
	background: var(--sf-honey);
}

.sf-section--ink .sf-eyebrow { color: var(--sf-honey); }

/* Hexagonul folosit ca separator între cuvinte */
.sf-dot {
	flex: none;
	width: 9px;
	height: 10px;
	clip-path: var(--sf-hex);
	background: var(--sf-honey);
}

.sf-title {
	margin: 0 0 1rem;
	font-family: var(--sf-font-display);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.04em;
	text-wrap: balance;
}

.sf-title--hero {
	font-size: var(--wp--preset--font-size--huge);
	letter-spacing: -0.045em;
	line-height: 0.98;
}

.sf-lede {
	max-width: 58ch;
	margin: 0;
	color: var(--sf-slate);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.62;
	text-wrap: pretty;
}

.sf-section--ink .sf-lede { color: #B3A489; }

/* Cuvânt evidențiat cu miere. Sublinierea e box-shadow interior, nu un
   ::after absolut: funcționează și când textul se rupe pe două rânduri, deci
   nu mai are nevoie de `white-space: nowrap` — care scotea titlurile lungi
   din ecran pe telefon. */
.sf-mark { box-shadow: inset 0 -0.18em 0 var(--sf-honey); }

.sf-accent { color: var(--sf-amber-deep); }
.sf-section--ink .sf-accent { color: var(--sf-honey); }

/* --- Grilă --- */

.sf-grid {
	display: grid;
	gap: clamp(1rem, 2.4vw, 1.75rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

/* Pentru seturi de PATRU carduri. Cu 380px minim, în containerul de 1240px
   încăpeau trei pe rând şi al patrulea rămânea singur dedesubt. La 420px,
   trei coloane ar cere 1316px — deci se opreşte la două, şi iese 2×2 curat.
   Pe tabletă (900px) tot două încap; sub ~870px trece pe o coloană. */
.sf-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.sf-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }

/* Un set de EXACT patru carduri arată neterminat ca 3+1. `:has()` le numără şi
   trece grila pe 2×2 singură — deci nu e nevoie de o clasă în pagină, iar
   paginile deja publicate se aranjează fără să fie re-lipite. */
.sf-grid:has(> :nth-child(4)):not(:has(> :nth-child(5))) {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
}

.sf-stack     { display: grid; gap: 1rem; }
.sf-stack--lg { gap: clamp(1.75rem, 4vw, 3rem); }

/* --- Lumina stupului: un singur moment, nu tapet --- */

.sf-glow,
.sf-honeycomb { position: relative; isolation: isolate; overflow: hidden; }

.sf-glow::before,
.sf-honeycomb::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	pointer-events: none;
	background: radial-gradient(115% 85% at 86% 4%, rgb(255 183 39 / 42%) 0%, rgb(255 203 92 / 18%) 32%, rgb(253 247 234 / 0) 66%);
}

.sf-glow::after,
.sf-honeycomb::after {
	content: "";
	position: absolute;
	top: -14%;
	right: -12%;
	z-index: -1;
	width: min(64vw, 780px);
	aspect-ratio: 1;
	pointer-events: none;
	opacity: 0.5;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49'%3E%3Cg fill='none' stroke='%23D9A445' stroke-width='0.9'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5z'/%3E%3Cpath d='M1 31.75v15l12.99 7.5M26.99 31.75v15l-13 7.5M13.99-5.25v15L1 16.75M26.99 16.75L13.99 9.25v-15'/%3E%3C/g%3E%3C/svg%3E");
	-webkit-mask-image: radial-gradient(closest-side, #000 18%, transparent 76%);
	mask-image: radial-gradient(closest-side, #000 18%, transparent 76%);
}

.sf-section--ink.sf-glow::before,
.sf-honeycomb::before {
	background: radial-gradient(115% 85% at 86% 4%, rgb(255 183 39 / 26%) 0%, rgb(255 140 0 / 8%) 34%, rgb(36 25 5 / 0) 68%);
}

.sf-section--ink.sf-glow::after,
.sf-honeycomb::after { opacity: 0.28; }

/* --- Celulă (cardul, în limbajul stupului) --- */

.sf-card {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: clamp(1.5rem, 3vw, 2.15rem);
	border: 1px solid rgb(231 213 174 / 60%);
	border-radius: var(--sf-radius-lg);
	background: var(--sf-base);
	box-shadow: var(--sf-shadow-soft);
	transition: transform var(--sf-dur) var(--sf-ease), box-shadow var(--sf-dur) var(--sf-ease), border-color var(--sf-dur) var(--sf-ease);
}

.sf-card:hover {
	border-color: var(--sf-honey);
	box-shadow: var(--sf-shadow-lift);
	transform: translateY(-3px);
}

.sf-card h3 {
	margin: 0;
	font-family: var(--sf-font-display);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.15;
}

.sf-card p { margin: 0; color: var(--sf-slate); }

.sf-section--ink .sf-card {
	border-color: rgb(255 216 116 / 14%);
	background: rgb(255 216 116 / 6%);
	box-shadow: none;
}

.sf-section--ink .sf-card:hover { border-color: rgb(255 182 39 / 45%); }
.sf-section--ink .sf-card p { color: #B3A489; }

/* Icon hexagonal */
.sf-hex {
	display: grid;
	place-items: center;
	width: 48px;
	height: 55px;
	margin-bottom: 0.35rem;
	clip-path: var(--sf-hex);
	background: var(--sf-pollen);
	color: var(--sf-amber-deep);
	font-family: var(--sf-font-display);
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1;
}

.sf-hex--solid {
	background: var(--sf-honey-grad);
	color: var(--sf-ink);
}

.sf-hex svg { width: 22px; height: 22px; }

/* --- Hero: text în stânga, celulele cu cifre în dreapta --- */

.sf-hero {
	display: grid;
	gap: clamp(2.5rem, 5vw, 3.5rem);
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
}

@media (min-width: 980px) {
	.sf-hero { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
}

/* --- Celule cu cifre (grupul din hero) --- */

.sf-cells {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.sf-cells__row {
	display: flex;
	gap: 0.75rem;
	margin-top: -1.9rem;
}

.sf-cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.2rem;
	width: 200px;
	aspect-ratio: 1 / 1.1547;
	clip-path: var(--sf-hex);
	background: var(--sf-base);
	text-align: center;
	padding: 1rem;
	/* `clip-path` taie orice bordură, deci forma hexagonală se conturează cu
	   drop-shadow — altfel o celulă albă dispare în fundalul de ceară. */
	filter: drop-shadow(0 6px 16px rgb(74 54 23 / 14%));
}

.sf-cell--sm { width: 130px; }
.sf-cell--honey { background: var(--sf-honey-grad); }

.sf-cell b {
	font-family: var(--sf-font-display);
	font-size: 2.25rem;
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 1;
	color: var(--sf-ink);
}

.sf-cell--sm b { font-size: 1.5rem; font-weight: 600; }

.sf-cell span {
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sf-slate);
}

.sf-cell--honey span { color: rgb(36 25 5 / 62%); }

/* --- Butoane --- */

.sf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	max-width: 100%;
	padding: 1.05rem 2.1rem;
	border: 1px solid transparent;
	border-radius: var(--sf-pill);
	background: var(--sf-honey-grad);
	color: var(--sf-ink);
	font: 700 1rem/1.2 var(--sf-font-body);
	text-decoration: none;
	cursor: pointer;
	overflow-wrap: break-word;
	box-shadow: var(--sf-shadow-honey);
	transition: transform var(--sf-dur) var(--sf-ease), box-shadow var(--sf-dur) var(--sf-ease);
}

.sf-btn:hover {
	color: var(--sf-ink);
	transform: translateY(-2px);
	box-shadow: 0 14px 32px -10px rgb(238 149 0 / 55%);
}

.sf-btn--ghost {
	background: transparent;
	border-color: rgb(36 25 5 / 20%);
	color: var(--sf-ink);
	box-shadow: none;
}

.sf-btn--ghost:hover {
	border-color: var(--sf-ink);
	background: transparent;
	box-shadow: none;
}

.sf-btn--dark {
	background: var(--sf-ink);
	color: var(--sf-honey-light);
	box-shadow: none;
}

.sf-btn--dark:hover { background: var(--sf-charcoal); color: var(--sf-honey-light); }

.sf-section--ink .sf-btn--ghost {
	border-color: rgb(255 216 116 / 26%);
	color: var(--sf-wax);
}

.sf-section--ink .sf-btn--ghost:hover {
	border-color: var(--sf-honey);
	color: var(--sf-honey);
}

.sf-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
}

/* --- Listă cu bifă --- */

.sf-checks {
	display: grid;
	gap: 0.7rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Marcatorul e poziționat absolut, nu ca celulă de grilă: altfel fiecare
   element inline din <li> (ex. <strong>) ar deveni o celulă separată și
   textul s-ar rupe pe rânduri. */
.sf-checks li {
	position: relative;
	padding-left: 1.7rem;
	color: var(--sf-slate);
}

.sf-checks li::before {
	content: "";
	position: absolute;
	top: 0.48em;
	left: 0;
	width: 11px;
	height: 12px;
	clip-path: var(--sf-hex);
	background: var(--sf-honey);
}

.sf-checks li strong { color: var(--sf-ink); font-weight: 700; }
.sf-section--ink .sf-checks li { color: #B3A489; }
.sf-section--ink .sf-checks li strong { color: var(--sf-wax); }

/* --- Bloc de serviciu --- */

.sf-service {
	display: grid;
	gap: clamp(1.75rem, 4vw, 3.5rem);
	grid-template-columns: minmax(0, 1fr);
	padding-block: clamp(2.5rem, 5vw, 4rem);
	border-top: 1px solid rgb(231 213 174 / 70%);
}

.sf-service:first-of-type { border-top: 0; padding-top: 0; }

@media (min-width: 900px) {
	.sf-service { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
	.sf-service__aside { position: sticky; top: calc(var(--sf-header-h) + 2rem); }
}

.sf-service h2 {
	margin: 0.75rem 0 1rem;
	font-family: var(--sf-font-display);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1.02;
}

.sf-service__aside {
	padding: clamp(1.5rem, 3vw, 2.15rem);
	border: 1px solid rgb(231 213 174 / 60%);
	border-radius: var(--sf-radius-lg);
	background: var(--sf-base);
	box-shadow: var(--sf-shadow-soft);
}

/* --- Preț --- */

.sf-price {
	display: block;
	margin-bottom: 0.4rem;
	color: var(--sf-amber-deep);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.sf-price__value {
	display: block;
	margin-bottom: 1rem;
	font-family: var(--sf-font-display);
	font-size: clamp(1.75rem, 4vw, 2.35rem);
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1.05;
	color: var(--sf-ink);
	overflow-wrap: anywhere;
}

.sf-price__value small {
	display: block;
	margin-top: 0.45rem;
	color: var(--sf-slate);
	font-family: var(--sf-font-body);
	font-size: 0.875rem;
	font-weight: 400;
	letter-spacing: 0;
}

/* --- Persoană --- */

.sf-person {
	display: grid;
	gap: 1rem;
	padding: clamp(1.5rem, 3vw, 2.15rem);
	border: 1px solid rgb(231 213 174 / 60%);
	border-radius: var(--sf-radius-lg);
	background: var(--sf-base);
	box-shadow: var(--sf-shadow-soft);
}

.sf-person__avatar {
	display: grid;
	place-items: center;
	width: 76px;
	height: 88px;
	clip-path: var(--sf-hex);
	background: var(--sf-honey-grad);
	color: var(--sf-ink);
	font-family: var(--sf-font-display);
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.sf-person h3 {
	margin: 0;
	font-family: var(--sf-font-display);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	letter-spacing: -0.03em;
}

.sf-person__role {
	margin: 0.2rem 0 0;
	color: var(--sf-amber-deep);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.sf-person p { margin: 0; color: var(--sf-slate); }

.sf-person__contact {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin-top: 0.25rem;
	font-size: 0.9375rem;
}

.sf-person__contact a {
	color: var(--sf-ink);
	text-decoration-color: var(--sf-honey);
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}

/* --- Poveste, pe capitole --- */

.sf-story {
	--sf-story-gap: clamp(2rem, 4vw, 3rem);
	display: grid;
	gap: var(--sf-story-gap);
	max-width: 60rem;
}

.sf-story__chapter {
	position: relative;
	padding-left: 3.25rem;
}

.sf-story__chapter::before {
	content: "";
	position: absolute;
	top: 0.28em;
	left: 0;
	width: 21px;
	height: 24px;
	clip-path: var(--sf-hex);
	background: var(--sf-honey);
}

.sf-story__chapter::after {
	content: "";
	position: absolute;
	top: calc(0.28em + 32px);
	left: 10px;
	width: 2px;
	height: calc(100% - 0.28em - 32px + var(--sf-story-gap));
	background: rgb(231 213 174 / 80%);
}

.sf-story__chapter:last-child::after { display: none; }

.sf-story h3 {
	margin: 0 0 0.75rem;
	font-family: var(--sf-font-display);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.2;
	text-wrap: balance;
}

.sf-story p {
	margin: 0 0 1rem;
	max-width: 62ch;
	color: var(--sf-slate);
}

.sf-story p:last-child { margin-bottom: 0; }

.sf-pull {
	margin: 0;
	padding-left: 1.5rem;
	border-left: 3px solid var(--sf-honey);
	color: var(--sf-ink);
	font-family: var(--sf-font-display);
	font-size: clamp(1.2rem, 2.4vw, 1.5rem);
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.35;
	text-wrap: balance;
}

/* --- Întrebări frecvente --- */

.sf-faq {
	display: grid;
	gap: 0.75rem;
	max-width: 840px;
}

.sf-faq details {
	border: 1px solid rgb(231 213 174 / 70%);
	border-radius: var(--sf-radius);
	background: var(--sf-base);
	transition: border-color var(--sf-dur) var(--sf-ease);
}

.sf-faq details[open] { border-color: var(--sf-honey); }

.sf-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.2rem 1.4rem;
	cursor: pointer;
	font-family: var(--sf-font-display);
	font-size: 1.0625rem;
	font-weight: 500;
	letter-spacing: -0.02em;
	list-style: none;
}

.sf-faq summary::-webkit-details-marker { display: none; }

.sf-faq summary::after {
	content: "";
	flex: none;
	width: 13px;
	height: 15px;
	clip-path: var(--sf-hex);
	background: var(--sf-honey);
	transition: transform var(--sf-dur) var(--sf-ease);
}

.sf-faq details[open] summary::after { transform: rotate(90deg); }

.sf-faq details > p {
	margin: 0;
	padding: 0 1.4rem 1.4rem;
	max-width: 68ch;
	color: var(--sf-slate);
}

/* --- Coloane asimetrice --- */

.sf-split {
	display: grid;
	gap: clamp(1.75rem, 4vw, 3.5rem);
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

@media (min-width: 900px) {
	.sf-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* --- Bandă de promisiuni --- */

.sf-promises {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem 2.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--sf-slate);
	font-size: 0.9375rem;
	font-weight: 500;
}

.sf-promises li {
	position: relative;
	padding-left: 1.4rem;
}

.sf-promises li::before {
	content: "";
	position: absolute;
	top: 0.45em;
	left: 0;
	width: 9px;
	height: 10px;
	clip-path: var(--sf-hex);
	background: var(--sf-honey);
}

/* --- Formular de contact --- */

.sf-form { display: grid; gap: 1.15rem; }

@media (min-width: 640px) {
	.sf-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
}

.sf-field { display: grid; gap: 0.4rem; }

.sf-field label {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--sf-ink);
}

.sf-field label .sf-opt { color: var(--sf-slate); font-weight: 400; }
.sf-field textarea { min-height: 9rem; resize: vertical; }

/* Honeypot — invizibil pentru oameni, dar NU `display:none`: unii roboți
   ignoră câmpurile ascunse astfel, iar capcana n-ar mai prinde nimic. */
.sf-hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.sf-form__note { margin: 0; color: var(--sf-slate); font-size: 0.875rem; }

.sf-alert {
	display: none;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	border-radius: var(--sf-radius);
	border: 1px solid rgb(231 213 174 / 70%);
	background: var(--sf-base);
	font-size: 0.9375rem;
}

.sf-alert.is-visible { display: flex; }

.sf-alert--ok {
	border-color: var(--sf-honey);
	background: var(--sf-pollen);
	color: var(--sf-amber-deep);
}

.sf-alert--err {
	border-color: #D98C8C;
	background: #FDF1F1;
	color: #8A2E2E;
}

/* --- Card de contact --- */

.sf-contact-card {
	display: grid;
	gap: 0.35rem;
	padding: 1.35rem 1.5rem;
	border: 1px solid rgb(231 213 174 / 60%);
	border-radius: var(--sf-radius);
	background: var(--sf-base);
	box-shadow: var(--sf-shadow-soft);
}

.sf-contact-card__label {
	color: var(--sf-amber-deep);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.sf-contact-card strong {
	font-family: var(--sf-font-display);
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: -0.03em;
	overflow-wrap: anywhere;
}

.sf-contact-card a {
	color: var(--sf-ink);
	text-decoration-color: var(--sf-honey);
	text-underline-offset: 3px;
}

/* --- Statistici --- */

.sf-stat__value {
	display: block;
	font-family: var(--sf-font-display);
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.045em;
	color: var(--sf-ink);
}

.sf-section--ink .sf-stat__value { color: var(--sf-honey); }

.sf-stat__label {
	display: block;
	margin-top: 0.5rem;
	color: var(--sf-slate);
	font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   6b. Compatibilitate cu marcajul vechi al paginilor
   --------------------------------------------------------------------------
   Ca actualizarea temei să nu oblige la re-lipirea tuturor paginilor deodată,
   clasele din versiunea anterioară rămân funcționale și primesc aspectul nou.
   Paginile pot fi migrate una câte una.

   De șters după ce toate paginile folosesc marcajul nou.
   -------------------------------------------------------------------------- */

/* Evidențierea galbenă din titluri (înlocuită de `.sf-accent`) */
.sf-mark { box-shadow: inset 0 -0.18em 0 var(--sf-honey); }

/* Eticheta de secțiune, când e încă un <p> simplu în loc de <div><span> —
   `.sf-eyebrow` e flex, deci textul devine element flex anonim și hexagonul
   din ::before apare corect fără nicio schimbare în pagină. */

/* Secțiunile fără modificator explicit stăteau pe alb. Fundalul paginii e
   acum ceară, deci le dăm alb ca ritmul deschis/închis să se păstreze. */
.site-main > .sf-section:not([class*="sf-section--"]) { background: var(--sf-base); }

/* --------------------------------------------------------------------------
   7. Blocuri WordPress — ajustări punctuale
   -------------------------------------------------------------------------- */

.wp-block-post-title a { text-decoration: none; }
.wp-block-post-title a:hover { color: var(--sf-amber-deep); }

.wp-block-post-date,
.wp-block-post-terms {
	color: var(--sf-slate);
	font-size: 0.875rem;
}

.wp-block-post-featured-image img { border-radius: var(--sf-radius); }

.wp-block-query-pagination {
	margin-top: var(--wp--preset--spacing--50);
	font-size: 0.9375rem;
}

:where(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], textarea, select) {
	width: 100%;
	padding: 0.85rem 1.1rem;
	border: 1px solid rgb(231 213 174 / 80%);
	border-radius: var(--sf-radius-sm);
	background: var(--sf-base);
	color: var(--sf-ink);
	font: 400 1rem/1.4 var(--sf-font-body);
	transition: border-color var(--sf-dur) var(--sf-ease), box-shadow var(--sf-dur) var(--sf-ease);
}

:where(input, textarea, select):focus {
	border-color: var(--sf-honey);
	box-shadow: 0 0 0 3px rgb(255 182 39 / 30%);
	outline: none;
}

/* Orice buton, oriunde, nu are voie să depășească containerul */
.sf-btn,
.wp-block-button__link {
	max-width: 100%;
	overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   8. Ecrane mici
   --------------------------------------------------------------------------
   Trei praguri, nu mai multe — fiecare prag în plus e o suprafață de regresie:
     900px  antet, coloane, blocuri de serviciu
     640px  formularul
     420px  butoane, spațieri, celule
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
	/* Plasa de siguranță: dacă tot nu încape, ultimul element coboară pe rândul
	   următor în loc să iasă din ecran. */
	.site-header__inner > .wp-block-group {
		flex-wrap: wrap;
		row-gap: 0.75rem;
	}

	.site-header .wp-block-button__link {
		padding: 0.6rem 1.1rem;
		font-size: 0.875rem;
	}

	.site-header__cta { flex: none; }

	.sf-cells__row { margin-top: -1.4rem; }
	.sf-cell { width: 150px; }
	.sf-cell--sm { width: 108px; }
	.sf-cell b { font-size: 1.65rem; }
	.sf-cell--sm b { font-size: 1.2rem; }
}

@media (max-width: 600px) {
	/* Marca + hamburger + CTA încap pe un rând doar dacă strângem cele DOUĂ
	   gap-uri de 24px (marcă↔grup şi hamburger↔buton). Măsurat la 375px:
	   345px necesari din 335 disponibili — exact cât scoatem aici. */
	.site-header__inner .wp-block-group { column-gap: 0.75rem; }

	.site-brand .wp-block-site-title { font-size: 1rem; gap: 0.5rem; }
	.site-brand .wp-block-site-title::before { width: 22px; height: 25px; }
	.site-header .wp-block-button__link { padding: 0.55rem 0.95rem; font-size: 0.8125rem; }
}

@media (max-width: 420px) {
	/* Butoanele devin coloană: „Alfred · 0770.790.939” nu încape pe un rând
	   îngust, iar două astfel de butoane alături garantează depășirea. */
	.sf-btn-row { flex-direction: column; align-items: stretch; }
	.sf-btn { width: 100%; justify-content: center; }

	.sf-card,
	.sf-person,
	.sf-contact-card,
	.sf-service__aside { padding: 1.35rem; }

	.sf-faq summary { padding: 1rem 1.15rem; }
	.sf-faq details > p { padding: 0 1.15rem 1.15rem; }

	.sf-story__chapter { padding-left: 2.5rem; }
	.sf-story__chapter::after { left: 9px; }

	.sf-cells__row { gap: 0.5rem; }
	.sf-cell { width: 128px; }
	.sf-cell--sm { width: 96px; }
}

/* --------------------------------------------------------------------------
   9. Preferințe de mișcare / print
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

@media print {
	.site-header,
	.site-footer,
	.skip-link { display: none !important; }
}