/*!
Theme Name: _re
Theme URI: https://re-fresh.ro
Author: RE
Author URI: https://re-fresh.ro
Description: Light-weight Wordpress Theme based on _s (underscores.me)
Version: 1.0.0
Tested up to: 6.7
Requires PHP: 8.3
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: _re
Tags: custom-background, custom-logo, custom-menu, featured-images, translation-ready
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.
_re is based on Underscores [underscores.me](https://underscores.me/) (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Custom Properties
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
	- Homepage
	- Footer
# plugins
# Utilities
	- Accessibility
	- Alignments
	- Grid System
	- Article Grid

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Custom Properties
--------------------------------------------------------------*/

:root {
	/* Primary brand colors — Primary/Secondary/Accent all follow the same
	   pattern: one base hex set from the Customizer, everything else
	   (hover, light, muted-for-overlays) computed here via color-mix() so
	   the PHP side (inc/customizer.php) never has to grow past 3 values.

	   --color-primary specifically also drives --color-text below (body
	   copy, buttons/inputs, nav) on top of its original job (headings,
	   --color-hr). That doubles its responsibility: it's no longer just a
	   heading/accent color picked for brand feel, it's also the color of
	   ordinary paragraph text, everywhere, at body font sizes. Keep it
	   dark/high-contrast enough for extended reading on --color-bg-body —
	   a light or heavily saturated Primary will hurt body-copy legibility
	   site-wide, not just look slightly off on a heading. */
	--color-primary: rgba(8, 48, 68, 1);   /* #083044 */
	--color-primary-text: #ffffff;
	--color-primary-light: color-mix(in srgb, var(--color-primary) 40%, white);
	--color-primary-hover: color-mix(in srgb, var(--color-primary) 80%, black);
	--color-primary-muted: color-mix(in srgb, var(--color-primary) 25%, transparent);

	--color-secondary: rgba(21, 155, 97, 1);   /* #159b61 */
	--color-secondary-text: #ffffff;
	--color-secondary-light: color-mix(in srgb, var(--color-secondary) 40%, white);
	--color-secondary-hover: color-mix(in srgb, var(--color-secondary) 80%, black);
	--color-secondary-muted: color-mix(in srgb, var(--color-secondary) 25%, transparent);

	--color-accent: rgba(2, 116, 216, 1);   /* #0274d8 */
	--color-accent-light: color-mix(in srgb, var(--color-accent) 40%, white);
	--color-accent-visited: rgba(2, 116, 216, 0.25);
	--color-accent-hover: color-mix(in srgb, var(--color-accent) 80%, black);
	--color-accent-muted: color-mix(in srgb, var(--color-accent) 25%, transparent);

	/* Neutrals */
	/* Was a flat #000000 — now tied to --color-primary (see the note on
	   --color-primary above) so body copy reads as the same brand color
	   family as the headings above it, instead of stark black against
	   colored headings. --color-text-light stays its own independent
	   gray below — this is specifically about primary body text. */
	--color-text: var(--color-primary);
	--color-text-light: #888888;
	--color-heading: var(--color-primary);
	--color-heading-hover: color-mix(in srgb, var(--color-primary) 80%, black);
	/* Fixed light-mode value, not derived from --color-bg-body — a light
	   gray divider reads fine against any light --color-bg-body, but the
	   same gray would look like a bright, out-of-place line against a
	   dark one. No formula here reliably covers both without also
	   knowing whether the palette is "light" or "dark" (the same
	   computed/dynamic question as --color-text and the hero text-color
	   discussion). Unlike --color-bg-content below, this one has no
	   Customizer control yet — a dark child theme/palette still needs to
	   override it explicitly in CSS (a candidate for the same "future
	   Customizer field" treatment later, not done yet). */
	--color-border: #e2e8f0;

	/* Icon-row badge (.icon-row__icon, see ICON ROW below) — independent
	   from --color-primary-light/-muted so the badge's own bg/icon color
	   can be tuned without touching the primary brand ramp itself.
	   Defaults computed from --color-primary (same formula as the
	   "-light" variants above) for a reasonable out-of-the-box look; both
	   fully overridable per-project like everything else here. */
	--color-icon-badge-bg: color-mix(in srgb, var(--color-primary) 8%, white);
	--color-icon-badge-icon: var(--color-primary);

	/* .icon-row__icon's own size, split into the badge box and the SVG
	   inside it — kept as custom properties, not hardcoded in the ICON
	   ROW rules below, specifically so a context (a footer, a compact
	   sidebar card, etc.) can shrink the whole badge just by re-scoping
	   these two on a parent selector — CSS custom properties cascade, so
	   no new class or duplicated ruleset is needed for a "smaller icons
	   here" variant. Pair with --color-icon-badge-bg: transparent above
	   for a flat, box-free look instead of a shrunk badge. */
	--icon-row-badge-size: 44px;
	--icon-row-icon-size: 20px;

	/* .icon-row__label's eyebrow color — deliberately its own token, not
	   var(--color-text-light) reused, so a project can give this
	   component's label a different color than a generic section eyebrow
	   (.section-subtitle) without the two colors fighting each other or
	   needing extra specificity tricks. Defaults to `inherit` (the
	   surrounding element's own color) rather than a fixed gray, so
	   .icon-row reads correctly wherever it's dropped — a light card, a
	   dark footer widget (.site-footer sets color: var(--color-text-
	   on-dark), which just flows down) — with zero extra CSS needed per
	   context. Still fully overridable per-project, e.g. back to a fixed
	   muted gray, same as everything else here. */
	--color-icon-row-eyebrow: inherit;

	/* Text on dark surfaces (submenus, overlays, popup close icon) */
	--color-text-on-dark: #ffffff;
	--color-text-on-dark-muted: #d1d1d1;

	/* Surfaces */
	--color-bg-body: #f4f4f4;
	--color-bg-input: #f9f9f9;
	--color-bg-submenu: #808080;
	--color-bg-submenu-active: #1a1a1a;
	--color-bg-submenu-mobile: var(--color-bg-submenu-active);
	--color-bg-footer: var(--color-bg-submenu-active);
	--color-bg-code: #eeeeee;
	--color-bg-highlight: #fff9c0;
	/* No longer just a fixed default — this is now also a live Customizer
	   field ("Paper Color", in the Colors section — see inc/customizer.php),
	   which overrides it at runtime via a small inline <style> in wp_head.
	   The value below is just the field's own default. Used today as
	   Simple Header's white content band (see .page-template-page-header-
	   simple-php .site-main) and the Child Pages card grid (.child-card),
	   which is deliberately a step LIGHTER/cleaner than --color-bg-body
	   (white vs. the usual off-white/beige page canvas). That relationship
	   is the whole point of the band — a dark palette needs the same
	   relative idea, not literally white: e.g. a lighter/elevated dark
	   gray than a dark --color-bg-body, not white-on-dark — set Paper
	   Color accordingly. --color-border (above) has no Customizer field
	   yet, so it still needs to be overridden manually in CSS when
	   building a dark palette — it doesn't follow --color-bg-body or
	   Paper Color automatically. */
	--color-bg-content: #ffffff;

	/* Buttons */
	--color-btn-bg: var(--color-accent);
	--color-btn-bg-hover: var(--color-accent-hover);
	--color-btn-bg-active: var(--color-accent-visited);
	--color-btn-text: #ffffff;

	/* Borders & dividers */
	--color-hr: var(--color-primary);
	--color-abbr-border: #666666;

	/* Overlays & shadows */
	/* Hero/slider cover scrim (.hero-container — Home Slide + Page Hero).
	   Deliberately built from Secondary + Accent only, never Primary —
	   those two are the "gradient duo" (same pairing as --gradient-cta),
	   picked together so they always read as one harmonious color no
	   matter which palette the site uses. Primary was tried here first,
	   but as the "content" color (headings/links) it isn't chosen with
	   gradient-partner harmony in mind — with a warm palette it showed up
	   as a jarring, disconnected dark patch in the corner instead of
	   blending in. Darkened Secondary anchors the readable corner (behind
	   the text), plain Secondary carries the middle transition, Accent
	   fades out toward the photo.

	   The 0% stop is the one .hero-content's fixed white text actually
	   sits on (see .hero-content h1/h2/p below) — it was 55% Secondary /
	   45% black, which assumed Secondary would always land dark enough
	   once diluted by more than half. Not guaranteed: a light/pastel
	   Secondary could leave that corner too light for reliable white-text
	   contrast. Pushed to 30/70 — a fixed, more conservative safety
	   margin rather than a per-palette calculation (see the hero-text-
	   color discussion — a computed/dynamic version, e.g. via
	   contrast-color(), stays a possible follow-up, not done here). Costs
	   a bit of Secondary's own color showing through on palettes that
	   were already dark enough without it, in exchange for staying safe
	   on every palette. The 45%/100% stops are untouched — they fade
	   toward transparent (the photo), not toward black, so they aren't
	   part of the text-contrast guarantee the way the 0% stop is. */
	--overlay-scrim: linear-gradient(
		to top right,
		color-mix(in srgb, var(--color-secondary) 30%, black) 0%,
		color-mix(in srgb, var(--color-secondary) 65%, transparent) 45%,
		color-mix(in srgb, var(--color-accent) 40%, transparent) 100%
	);
	--overlay-modal: rgba(0, 0, 0, 0.6);
	--overlay-strong: rgba(0, 0, 0, 0.8);
	/* CTA/feature box background (.cta-box) — accent → secondary, kept
	   distinct from the hero's --overlay-scrim (primary → secondary →
	   accent) so the two gradients don't read as the same element. */
	--gradient-cta: linear-gradient(120deg, var(--color-accent) 0%, var(--color-secondary) 100%);
	--shadow-soft: 0 2px 4px rgba(0, 0, 0, 0.05);
	--shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.1);
	--shadow-card-hover: 0 10px 20px rgba(0, 0, 0, 0.05);
	--shadow-submenu: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

	/* Typography */
	--font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

	/* Type scale */
	--font-size-xs: 0.6875rem;
	--font-size-sm: 0.875rem;
	--font-size-md: 0.9375rem;
	--font-size-base: 1.125rem;
	--font-size-lg: 1.35rem;
	--font-size-xl: 1.65rem;
	--font-size-2xl: 2rem;
	/* Fluid on purpose, unlike the rest of the scale above — same
	   reasoning as --content-spacing-top below: hero/page-header-style
	   titles need to scale with the viewport (~36px on mobile up to
	   ~48px on desktop) rather than jump at a breakpoint. Add further
	   fluid steps here (not ad-hoc clamp()s in a child theme) if a
	   template ever needs something even larger. */
	--font-size-3xl: clamp(2.25rem, 1.8rem + 2vw, 3rem);

	--font-weight-normal: 400;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	/* Set explicitly (not left at the browser default of "normal") so
	   headings keep a consistent height across fonts — "normal" line-height
	   is defined by each font's own internal metrics, which can vary a lot
	   between the fallback fonts in --font-family-base (e.g. a phone's
	   custom system font vs. desktop Segoe UI/Roboto), making headings
	   render taller or shorter than expected depending on device/OS. */
	--line-height-heading: 1.2;

	/* Radius */
	--radius-sm: 3px;
	--radius-md: 6px;
	--radius-lg: 15px;
	--radius-full: 50%;

	/* Motion */
	--transition: 0.3s ease;

	/* Z-index scale */
	--z-header: 9999;
	--z-popup: 99999;
	--z-top: 100000;

	/* Layout */
	--header-height: 150px;
	--hero-height: 760px;
	--wrap-max-width: 1680px;
	--content-max-width: 1200px;
	/* Tighter than --content-max-width on purpose — that one's the site's
	   general "not full .wrap width" measure (a card grid, a two-column
	   section), still too wide for a comfortable line length once it's
	   actual flowing paragraph text. Used by .wrap--prose below — first
	   consumer is the optional entry-content block under Child Pages'
	   card grid (page-child-nav.php), where the grid itself stays at
	   --content-max-width but any typed content below it reads better
	   narrower. */
	--content-narrow-max-width: 760px;
	--hero-max-width: 1400px;
	--container-padding: 15px;
	/* Shared gap for both grid systems — the .row/.col-* column grid
	   (.grid-gap utility) and the .articles card grid — so cards and
	   manually-built .row layouts always breathe the same amount.
	   --grid-gap-mobile is the <=768px value both switch to together
	   (see .grid-gap's own media query and .articles.grid-3/.grid-4's). */
	--grid-gap: 2.5rem;
	--grid-gap-mobile: 1.5rem;
	/* Spacing between article cards — aliased to --grid-gap (see above)
	   rather than its own fixed value, so the two stay visually
	   consistent. */
	--articles-gap: var(--grid-gap);
	/* Space above main content, below the header/hero — fluid so it
	   scales with viewport instead of a fixed px value. */
	--content-spacing-top: clamp(2.5rem, 2rem + 3vw, 5rem);

	/* Header */
	--logo-height: 5rem;
	--logo-height-compact: 4.125rem;
	--header-padding-y: 10px;
	--header-padding-y-compact: 4px;
}

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/* 1. Global Reset
   ========================================================================== */

/**
 * 1. Use border-box by default for more predictable layouts.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 * 3. Use a more readable line-height (1.5) than the browser default.
 */

*, *::before, *::after {
	box-sizing: border-box;
}

html {
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	-moz-tab-size: 4;
	tab-size: 4;
}

/**
 * Remove default margin.
 */

body {
	margin: 0;
}

/* 2. Grouping Content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Correct the inheritance of color in Firefox.
 */

hr {
	height: 0;
	color: inherit;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Standardize monospace font stacking.
 */

pre, code, kbd, samp {
	font-family: ui-monospace, monospace;
	font-size: 1em;
}

/* 3. Text-level Semantics
   ========================================================================== */

/**
 * Add the correct text decoration in Chrome, Edge, and Safari.
 */

abbr[title] {
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b, strong {
	font-weight: bolder;
}

/**
 * Add the correct font size in all browsers.
 */

small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in all browsers.
 */

sub, sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub { bottom: -0.25em; }
sup { top: -0.5em; }

/* 4. Forms
   ========================================================================== */

/**
 * Remove default margins and ensure font inheritance.
 */

button, input, optgroup, select, textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}


/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: var(--color-text);
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-heading);
}

p {
	/* margin-top: 0 — spacing comes only from margin-bottom, never
	   stacked from both sides. In normal block flow this changes
	   nothing visible (adjacent siblings' margins collapse to the
	   larger one anyway), but it matters wherever a paragraph sits
	   inside a flex or grid container (cards, .content-steps, etc.) —
	   flex/grid items never collapse margins with each other, so a
	   leftover default margin-top there adds on top of whatever margin-
	   bottom came before it instead of collapsing away. One-directional
	   spacing avoids that class of bug everywhere, not just in .articles. */
	margin-top: 0;
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
	/* Own bottom margin, similar in size to blockquote p's margin below
	   — needed now that the sitewide `p` rule (above) is margin-top: 0,
	   so nothing after the quote provides its own top spacing anymore. */
	margin-bottom: 0.75em;
}

/* Equal top and bottom margin on the quote's own paragraph(s) — the
   sitewide `p` rule above is margin-top: 0 (spacing comes only from
   margin-bottom elsewhere), but inside a blockquote the text reads
   better with even space on both sides rather than hugging one edge. */
blockquote p {
	margin: 0.75em 0;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: var(--color-bg-code);
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted var(--color-abbr-border);
	cursor: help;
}

mark,
ins {
	background: var(--color-bg-highlight);
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: var(--color-bg-body);
}

hr {
	background-color: var(--color-hr);
	border: 0;
	height: 1px;
	/* Equal top/bottom (was bottom-only, so the space above an <hr> came
	   from whichever element preceded it instead of the divider itself)
	   and a touch larger than the old 1.5em bottom-only spacing. */
	margin: 2em 0;
}

/* .hr-accent — thicker, brand-colored divider. Only overrides
   background-color/height; border and margin-bottom still come from
   the plain `hr` rule above via the cascade (higher specificity here
   only touches the two properties that actually differ). */
.hr-accent {
	background-color: var(--color-accent);
	height: 5px;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: var(--font-weight-bold);
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

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

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: var(--color-accent);
}

a:visited {
	color: var(--color-accent-visited);
}

a:hover,
a:focus,
a:active {
	color: var(--color-accent-hover);
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms - Modern, Elegant & Fluid (Optimized for CF7)
--------------------------------------------- */

/* 1. Fields: Inputs, Textarea, and Select */
input:is([type="text"], [type="email"], [type="url"], [type="password"], [type="search"], [type="number"], [type="tel"], [type="range"], [type="date"], [type="month"], [type="week"], [type="time"], [type="datetime"], [type="datetime-local"], [type="color"]),
textarea,
select {
	max-width: 100%;
	color: var(--color-text);
	background-color: var(--color-bg-input);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 12px 16px;
	font-size: var(--font-size-md);
	line-height: 1.5;
	box-sizing: border-box;
	transition: all var(--transition);
}

/* Field Focus State */
input:is([type="text"], [type="email"], [type="url"], [type="password"], [type="search"], [type="number"], [type="tel"], [type="date"]):focus,
textarea:focus,
select:focus {
	color: var(--color-heading);
	background-color: var(--color-bg-body);
	border-color: var(--overlay-strong);
	outline: none;
}

/* Specific Textarea styling */
textarea {
	min-height: 120px;
	resize: vertical;
}

/* 2. Buttons: Submit, Reset, and Action Buttons */
button,
input:is([type="button"], [type="reset"], [type="submit"]) {
	display: inline-block;
	width: auto;
	background: var(--color-btn-bg);
	color: var(--color-btn-text);
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 1;
	padding: 14px 28px;
	text-align: center;
	cursor: pointer;
	box-shadow: var(--shadow-soft);
	transition: all var(--transition);
	appearance: none;
	-webkit-appearance: none;
}

/* Button Hover State */
button:hover,
input:is([type="button"], [type="reset"], [type="submit"]):hover {
	background: var(--color-btn-bg-hover);
	box-shadow: var(--shadow-medium);
}

/* Button Active & Focus State */
button:is(:active, :focus),
input:is([type="button"], [type="submit"]):is(:active, :focus) {
	background: var(--color-btn-bg-active);
	transform: translateY(0);
	outline: none;
}

/* 3. Contact Form 7 Specific Structural Fixes */
.wpcf7-form-control-wrap {
	display: block;
	margin-bottom: 15px;
}

/* CF7 Response/Success/Error Messages */
.wpcf7-response-output {
	margin: 20px 0 0 0 !important;
	padding: 12px 16px !important;
	border-radius: var(--radius-md) !important;
	font-size: var(--font-size-sm);
	line-height: 1.4;
}


/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* HEADER */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--z-header);
	/* Horizontal spacing used to live here too (20px) stacked on top of
	   .header-container's own 15px, and neither tracked --wrap-max-width
	   the way the rest of the site's .wrap sections do — the logo just
	   sat at a fixed ~35px inset forever, never moving in to match .wrap
	   on wide monitors. All horizontal spacing now lives on
	   .header-container instead (wrap-equivalent box model below), so
	   this only ever carries vertical padding — nothing here changes
	   left/right, on any screen size or header state. */
	padding: var(--header-padding-y) 0;
	transition: padding var(--transition);
}

/* Opaque header + offset content is the DEFAULT for every template — only
   "Home Slide" (page-home.php) opts out, because it's the one template
   with a full-bleed image slider meant to run under the fixed header.
   Body-class allow-lists here are fragile (index.php's "home"/"blog" and
   search.php's "search-results" don't match archive/single/page-template-
   default and were silently missing this), so new templates get correct
   spacing by default instead of needing to be remembered and added. */
.site-header {
	background: var(--color-bg-body);
	transition: all var(--transition);
}

.site-content {
	margin-top: var(--header-height);
}

/* --header-height (150px) is tuned for the desktop header — logo at
   full --logo-height (80px) plus --header-padding-y (10px) top/bottom.
   Below 1024px the logo drops to --logo-height-compact (66px) and
   .site-header always uses the smaller --header-padding-y-compact (4px,
   sticky or not — see NAVIGATION — MOBILE below), so the real header is
   only ~74px tall; the leftover ~76px was showing up as a dead gap above
   the first section on mobile (Home Featured, and any non-hero page).
   Home Slide/Page Hero are unaffected — their margin-top: 0 override
   below wins regardless of viewport, since it's more specific than this. */
@media (max-width: 1024px) {
	.site-content {
		margin-top: calc(var(--logo-height-compact) + var(--header-padding-y-compact) * 2);
	}
}

.page-template-page-home-php .site-header:not(.header-sticky),
.page-template-page-hero-php .site-header:not(.header-sticky) {
	background: transparent;
}

.page-template-page-home-php .site-content,
.page-template-page-hero-php .site-content {
	margin-top: 0;
}

/* .site-main only ever gets a deliberate top spacing (no width/side
   padding — that stays opt-in via .wrap, see below). Previously this
   gap came from whatever margin the first bit of content happened to
   have, which was inconsistent; padding-top here makes it explicit and
   fluid instead. */
.site-main {
	padding-top: var(--content-spacing-top);
}

/* Home Featured's .site-main follows its own hero (sticky-post slider)
   directly, which already carries its own visual weight/spacing — the
   generic content-spacing-top gap on top of that read as too much.
   Fraction of the same token (not a new hardcoded value) so it still
   scales with it if the base spacing is ever retuned. */
.page-template-page-home-feat-php .site-main {
	padding-top: calc(var(--content-spacing-top) / 3);
}

/* -----------------------------------------
   WRAP — content containment
   .wrap: structural container (sections, grids), capped at --wrap-max-width.
   .wrap--narrow: add alongside .wrap for a tighter reading width
   (articles, page text) via --content-max-width.
   .wrap--prose: a still-tighter reading measure via --content-narrow-
   max-width, for flowing paragraph text specifically — unlike the two
   above, not meant to be combined with .wrap: it carries no side padding
   of its own (no padding-inline, no --container-padding), since it's
   meant to nest inside a .wrap/.wrap--narrow that already supplies the
   gutter, not to sit at the top level against the viewport edge.
   Padding is unconditional on .wrap: thanks to global box-sizing:
   border-box it's absorbed into max-width once that cap kicks in, and
   it's what supplies the lateral gutter below the cap — no media query
   needed either way.
------------------------------------------ */

.wrap {
	width: 100%;
	max-width: var(--wrap-max-width);
	margin-inline: auto;
	padding-inline: var(--container-padding);
	box-sizing: border-box;
}

.wrap--narrow {
	max-width: var(--content-max-width);
}

.wrap--prose {
	width: 100%;
	max-width: var(--content-narrow-max-width);
	margin-inline: auto;
	box-sizing: border-box;
}

/* Stepped widths above/below the 1680px breakpoint — redeclaring the
   custom properties themselves (rather than duplicating .wrap/.wrap--narrow)
   so every consumer of --wrap-max-width (.wrap, .header-container) and
   --content-max-width (.wrap--narrow) picks the right value automatically.

   .wrap: 1680px was stretching sections too wide on mid-size laptop/
   desktop screens (anything under the 1680px cap just fills the
   viewport) — narrowed to 1480px up to and including 1680px. Above
   1680px the site keeps its current 1680px cap.

   .wrap--narrow: the 1200px reading column is fine up to 1680px, but on
   very wide screens (>1680px) it can afford to breathe a bit more —
   widened to 1320px there. */
@media (max-width: 1680px) {
	:root {
		--wrap-max-width: 1480px;
	}
}

@media (min-width: 1681px) {
	:root {
		--content-max-width: 1320px;
	}
}

/* Simple page header (eyebrow + free-form excerpt) — used by
   page-header-simple.php via template-parts/content-page-header.php.
   Full-bleed band sitting BEFORE main#primary.site-main (same skeleton as
   Page Hero's .hero-container), so unlike the old inline version it no
   longer gets its top gap for free from .site-main's padding-top — it
   supplies its own now, same token, so the gap above the eyebrow matches
   the gap page.php/page-hero.php give their own content. padding-bottom
   stays equal to it, closing the band before .site-main's white starts.
   No side padding/max-width of its own here — that's its inner
   .wrap.wrap--narrow (see content-page-header.php); the band itself runs
   edge to edge, showing --color-bg-body behind the text. */
.page-header-simple {
	padding-top: var(--content-spacing-top);
	padding-bottom: var(--content-spacing-top);
}

/* This is often where the page's REAL h1 lives — the Title field just
   becomes a small eyebrow above it (.section-subtitle), so the actual
   visible headline is typed straight into the excerpt as raw h1/h2 (see
   content-page-header.php). The generic ".wrap--narrow h1/h2..." rule
   (Content typography, below) gives it a font-size-relative margin
   (1.75em top / 0.75em bottom) — fine for a body-copy heading, but this
   one is often sized much larger, so an em-based margin swings with
   whatever font-size it ends up at instead of staying the fixed,
   intentional gap under the eyebrow this template wants. Fixed px on
   both sides here instead, scoped through both classes (.page-header-
   simple .wrap--narrow) so it reliably outweighs the generic rule's
   equal (class + element) specificity regardless of the two rules'
   order in the file. */
.page-header-simple .wrap--narrow h1,
.page-header-simple .wrap--narrow h2,
.page-header-simple .wrap--narrow h3,
.page-header-simple .wrap--narrow h4,
.page-header-simple .wrap--narrow h5,
.page-header-simple .wrap--narrow h6 {
	margin: 20px 0;
}

/* Same idea as the heading rule above, applied to whatever trails it: if
   the excerpt ends on a paragraph (plain intro text, or one wrapping a
   .btn CTA), its own margin-bottom (1.5em base — see p above) would add
   on top of .page-header-simple's own padding-bottom, making the gap
   before the content below depend on what the editor happened to type
   last instead of always being the same controlled amount — the same
   "single source of the gap" reasoning as .site-footer's margin-top
   comment further down. Scoped to :last-child only, so paragraph-to-
   paragraph spacing in between (intro text before a CTA line, say) is
   untouched. */
.page-header-simple p:last-child {
	margin-bottom: 0;
}

/* ...and the flip side of that band: .site-main following it is painted
   solid white, edge to edge — .site-main has no side padding/max-width of
   its own (only its inner .wrap.wrap--narrow does), so a plain background
   here already covers the full viewport width with nothing extra needed.
   --color-bg-content defaults to white but stays overridable per-project
   like the rest of the palette above, rather than hardcoding #fff here.
   Shared with .page-template-page-child-nav-php (Child Pages) — same
   header band (template-parts/content-page-header.php), same white
   content area underneath, just with a card grid added below it. */
.page-template-page-header-simple-php .site-main,
.page-template-page-child-nav-php .site-main {
	background: var(--color-bg-content);
	/* .site-footer's global margin-top (see FOOTER below) is what usually
	   puts the gap between content and footer, but that margin sits
	   OUTSIDE .site-main's white background — on every other template
	   that gap just shows the same page background the footer's margin
	   always shows, so it's invisible; here it would cut a visible strip
	   of --color-bg-body between this white block and the dark footer.
	   Moving the same amount of space to padding-bottom here keeps it
	   inside the white area instead — same size, still white — and the
	   rule right below zeroes the footer's own margin-top so nothing is
	   added twice. */
	padding-bottom: var(--content-spacing-top);
}

/* See padding-bottom comment on .site-main above: the gap already lives
   inside .site-main's white area on this template, so the footer's
   default margin-top (see FOOTER below) is switched off here to avoid a
   second, beige-colored gap stacking on top of it. */
.page-template-page-header-simple-php .site-footer,
.page-template-page-child-nav-php .site-footer {
	margin-top: 0;
}

/* Child Pages template — .child-card
   One card per child page (see page-child-nav.php and template-parts/
   content-child-card.php): title + short excerpt + "Detalii" link, the
   whole card itself one link. Sits in a plain .row.grid-gap/.col-6 grid
   — nothing card-grid-specific needed there, it's the same grid system
   as everywhere else in the theme. White card on the template's own
   white .site-main (see above) reads correctly since --color-bg-content
   is a step lighter than --color-bg-body by design — a dark palette
   needs both re-tuned together anyway (see --color-bg-content's own
   comment above). Border only really shows up on hover — a resting
   --color-border edge plus a soft shadow, not a heavier border, is the
   hover cue, matching the reference layout this template is based on. */
.child-card {
	display: block;
	background: var(--color-bg-content);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 32px;
	text-decoration: none;
	transition: var(--transition);
}

.child-card:hover {
	border-color: var(--color-accent);
	box-shadow: var(--shadow-medium);
}

.child-card__title {
	margin: 0;
	color: var(--color-heading);
	transition: color var(--transition);
}

.child-card:hover .child-card__title {
	color: var(--color-accent);
}

/* Capped at 3 lines via line-clamp, not by trusting the word count coming
   from content-child-card.php (wp_trim_words is a coarse safety net, not
   what actually decides where the text breaks — word lengths vary, so a
   fixed word count can under- or overshoot the card's actual line height).
   This is what makes the cut always land at a clean line boundary with a
   real ellipsis, and keeps every card in a row the same height regardless
   of how long each child page's own excerpt is. */
.child-card__excerpt {
	margin: 12px 0 0;
	color: var(--color-text-light);
	line-height: 1.6;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

.child-card__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 16px;
	color: var(--color-accent);
	font-weight: var(--font-weight-semibold);
}

/* Sized down from the generic 24px ([class^="ico-"], see MENU ICONS) to
   sit proportionate to this link's own small text — same idea as
   .icon-row__icon i sizing its icon down for its own context. Nudges
   forward on hover too, a small decorative cue that the whole card (not
   just this bit of text) is the link. */
.child-card__link .ico-arrow-right {
	width: 16px;
	height: 16px;
	transition: transform var(--transition);
}

.child-card:hover .child-card__link .ico-arrow-right {
	transform: translateX(3px);
}

/* Optional escape hatch: break an element back out to full viewport width
   even while it's nested inside a .wrap (e.g. a full-bleed image inside
   an otherwise contained article). Use sparingly. */
.full-bleed {
	width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
}

/* Same box model as .wrap (width/max-width/margin-inline/padding-inline
   — see WRAP below) instead of the old flat `padding:15px; margin:0
   auto;` (that margin was inert without a max-width to center against,
   so the logo sat at a fixed inset on every screen size instead of
   tracking --wrap-max-width like the rest of the site's .wrap sections
   do). Vertical padding stays its own separate declaration
   (padding-block) so header height/sticky behavior is untouched —
   only the horizontal side changes here. */
.header-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	max-width: var(--wrap-max-width);
	margin-inline: auto;
	padding-block: 15px;
	padding-inline: var(--container-padding);
	box-sizing: border-box;
	transition: all var(--transition);
}

.header-sticky {
	background: var(--color-bg-body);
	padding-top: var(--header-padding-y-compact);
	padding-bottom: var(--header-padding-y-compact);
	transition: all var(--transition);
}

/* Sticky only ever changes padding-block (vertical) — max-width,
   margin-inline and padding-inline are left alone here on purpose, so
   the logo's horizontal position never shifts when the header goes
   sticky, only its height does. */
.header-sticky .header-container {
	padding-block: 0;
	transition: all var(--transition);
}

/* Header Right */
.header-right {
	display: flex;
	align-items: center;
}

/* .header-cart / .cart-customlocation / .ico-cart live HERE, not in
   /woocommerce/woocommerce.css — header.php's cart link is gated on
   class_exists('WooCommerce') only, so it renders in the header on
   EVERY page (home, blog, about...) whenever WooCommerce is active,
   not just on the shop/cart/checkout pages that load woocommerce.css.
   Keeping it in the always-loaded style.css is what makes it styled
   site-wide; woocommerce.css is reserved for markup that only ever
   appears on actual WooCommerce pages (product grid, cart table,
   checkout form, account nav). */
.header-cart,
.header-cart:visited,
.header-cart:hover,
.header-cart:focus,
.header-cart:active {
	display: flex;
	align-items: center;
	/* Anchors .cart-customlocation's absolute badge (below) to the icon
	   itself, not to .header-right or the header as a whole. */
	position: relative;
	text-decoration: none;
	color: var(--color-text);
}

/* Badge, not inline count — sits on the icon's top-right corner instead
   of beside it (see .header-cart's position: relative above). */
.cart-customlocation {
	position: absolute;
	top: -6px;
	right: -8px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: var(--radius-full);
	background: var(--color-accent);
	color: #ffffff;
	font-size: 0.65rem;
	font-weight: var(--font-weight-semibold);
	line-height: 1;
}

/* Reusable "header-right icon link" treatment — same box model as
   .search-button button (10px click-target padding) and the same
   color/no-underline behavior as .header-cart, so any plain icon link
   dropped into .header-right (social links, phone, etc.) automatically
   matches the cart/search icons. Add alongside a semantic class per
   icon (.header-facebook, .header-whatsapp below) for aria-label/
   targeting — the class itself carries no visual rules of its own. */
.header-icon-link,
.header-icon-link:visited,
.header-icon-link:hover,
.header-icon-link:focus,
.header-icon-link:active {
	display: flex;
	align-items: center;
	padding: 10px;
	text-decoration: none;
	color: var(--color-text);
}

@media (max-width: 1024px) {
	.header-widget {
		display: none;
	}
	/* Mobile always gets the compact header — same treatment whether
	   .header-sticky is present or not, since there's no room to spare
	   on small screens either way. */
	.site-header {
		padding-top: var(--header-padding-y-compact);
		padding-bottom: var(--header-padding-y-compact);
	}
	/* padding-inline here used to be 0, relying on .site-header's own
	   20px horizontal padding for the mobile gutter — that padding has
	   moved off .site-header (see HEADER above), so it's restated here
	   directly instead, keeping the actual mobile inset identical to
	   before. max-width/margin-inline from the base rule are already
	   inert at this width (well under --wrap-max-width), nothing to
	   override there. */
	/* Rebuilt from scratch — the previous approach kept .menu-toggle
	   position: absolute (pulled out of the flex flow entirely) so it
	   could pin to the header's right edge, which left .main-navigation
	   with ~0 real width and needed margin/padding hacks on .header-right
	   just to avoid the two overlapping. That produced a string of
	   cross-browser bugs (icons overlapping, then hanging off-screen).
	   Simpler and more robust: keep .menu-toggle in normal flex flow (see
	   NAVIGATION — MOBILE below) and let flexbox do the layout — the logo
	   stays pinned left via its own auto right-margin, and
	   .main-navigation + .header-right naturally pack together at the
	   end of the row, with a small explicit gap between icons instead of
	   the base rule's wider 24px (meant for the spaced-out desktop row). */
	.header-container {
		padding-block: 0;
		padding-inline: 20px;
		justify-content: flex-start;
		gap: 8px;
	}
	/* .header-sticky .header-container (0 2 0) is more specific than the
	   rule above, so it kept winning on mobile and re-adding lateral
	   padding on scroll — this pins it back to match. */
	.header-sticky .header-container {
		padding-block: 0;
		padding-inline: 20px;
	}

	.site-branding {
		margin-right: auto;
	}

	.main-navigation {
		display: flex;
		align-items: center;
		/* DOM order is branding → main-navigation (toggle) → header-right
		   (search/cart), so without this .menu-toggle would render BEFORE
		   the search/cart icons instead of after them. The old position:
		   absolute approach solved this by pulling the toggle out of flow
		   entirely and pinning it to the header's right edge; flexbox's
		   `order` reproduces the same "visually last regardless of DOM
		   position" effect while staying in normal flow (see .header-right
		   below — order is only meaningful set on both sides of the pair). */
		order: 2;
	}

	.header-right {
		order: 1;
	}
}

/* LOGO */
.site-logo img {
	display: block;
	height: var(--logo-height);
	width: auto;
	transition: height var(--transition);
}

.header-sticky .site-logo img {
	height: var(--logo-height-compact);
}

@media (max-width: 1024px) {
	.site-logo img {
		height: var(--logo-height-compact);
	}
}

/* Fallback when the theme ships without images/logo.svg (see header.php):
   an <h2> with the site name instead of a broken <img>. Sized to roughly
   track the logo's own height/compact states, though it's driven by
   font-size rather than height since it's text. */
.site-logo-text {
	margin: 0;
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	line-height: var(--logo-height);
	/* Accent, not --color-heading/primary — .site-logo-text is always
	   wrapped in <a class="site-logo"> (see header.php), so it follows
	   the site's "links are accent-colored" rule like any other link,
	   single-word or stacked (--stacked used to be the only variant on
	   accent; unified here so both behave identically, including the
	   white-over-hero / accent-at-sticky treatment below). */
	color: var(--color-accent);
	transition: font-size var(--transition), line-height var(--transition);
}

.header-sticky .site-logo-text {
	font-size: var(--font-size-lg);
	line-height: var(--logo-height-compact);
}

@media (max-width: 1024px) {
	.site-logo-text {
		font-size: var(--font-size-lg);
		line-height: var(--logo-height-compact);
	}
}

/* Multi-word site titles (text-logo fallback only) stack one word per
   line instead of stretching the header sideways — sized down since
   2-3 stacked lines would otherwise tower over a single line of text.
   header.php only adds --stacked when the title has more than one word. */
.site-logo-text--stacked {
	font-size: calc(var(--font-size-md) * 1.35);
	line-height: 0.8;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	/* color: inherited from the base .site-logo-text rule above — this
	   element always carries both classes (see header.php), so no need
	   to repeat it here. */
	text-decoration: none;
	padding: 10px 0;
}

.site-logo-word {
	display: block;
}

.site-logo {
	text-decoration: none;
}

/* Fixed-nav-over-hero templates: the accent-tinted overlay behind the
   hero is itself made of accent color at various opacities, so
   accent-colored text over it is structurally low-contrast regardless
   of the photo underneath — white reads reliably instead. Reverts to
   the normal accent color once .header-sticky kicks in (solid
   background, no photo behind it). Home Featured is NOT included: its
   hero (.re-slick-feat) is a contained .wrap box, not full-bleed under
   the header, so a transparent header there just exposes the plain
   white page background — white text would be invisible on it.
   Targets plain .site-logo-text (not --stacked specifically) so both
   the single-word and stacked variants get the same treatment — the
   element always carries the base class regardless of word count. */
.page-template-page-home-php .site-header:not(.header-sticky) .site-logo-text,
.page-template-page-hero-php .site-header:not(.header-sticky) .site-logo-text {
	color: #ffffff;
}

/* Same white-over-hero treatment, extended to the rest of the floating
   header — nav links, search icon, cart icon, mobile hamburger — which
   were left on var(--color-text) (black) even though they sit over the
   exact same transparent-over-photo header as .site-logo-text above.
   Reverts to normal (black text / accent logo) once .header-sticky's
   solid background kicks in, same as the logo. The active nav pill
   (.current-menu-item > a) isn't touched — it already renders on a
   solid --color-btn-bg fill with white text, so it reads fine
   regardless of what's behind the header. */
.page-template-page-home-php .site-header:not(.header-sticky) .main-navigation a,
.page-template-page-hero-php .site-header:not(.header-sticky) .main-navigation a,
.page-template-page-home-php .site-header:not(.header-sticky) .header-cart,
.page-template-page-hero-php .site-header:not(.header-sticky) .header-cart,
.page-template-page-home-php .site-header:not(.header-sticky) .search-button button,
.page-template-page-hero-php .site-header:not(.header-sticky) .search-button button,
.page-template-page-home-php .site-header:not(.header-sticky) .menu-toggle,
.page-template-page-hero-php .site-header:not(.header-sticky) .menu-toggle {
	color: #ffffff;
}

/* .header-sticky .site-logo-text sets its own line-height (tracking
   --logo-height-compact, meant for a single line) which otherwise beats
   the 0.8 above on specificity — repeated here (same value, so
   line-height stays identical regardless of sticky state or viewport). */
.header-sticky .site-logo-text--stacked {
	font-size: calc(var(--font-size-sm) * 1.35);
	line-height: 0.8;
}

@media (max-width: 1024px) {
	.site-logo-text--stacked {
		font-size: calc(var(--font-size-sm) * 1.35);
	}
}


/* -----------------------------------------
   NAVIGATION – GENERAL
------------------------------------------ */

.site-branding {
	/* .header-container distributes space via justify-content:
	   space-between across 3 items (logo, nav, header-right) — nav's
	   position is computed from the LOGO BOX's width, not the image's.
	   Without a floor here, that box shrinks along with the image at
	   sticky/mobile, and nav visibly drifts left to follow it. Pinning
	   a minimum keeps nav where it visually reads as "centered",
	   regardless of the logo's actual compact size. Approximate, not
	   calculated from the real logo width — nudge it once you can see
	   it rendered. */
	min-width: 200px;
}

.main-navigation ul {
	margin: 0;
	padding: 0;
}

.main-navigation li {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-navigation a {
	display: block;
	padding: 12px;
	text-transform: uppercase;
	color: var(--color-text);
	/* Was unset (inheriting --font-size-base, 18px) — with uppercase +
	   semibold + letter-spacing already adding visual weight on top,
	   that read as heavier/bigger than intended. --font-size-sm matches
	   what the active-item pill and the sub-menu links already use (see
	   .current_page_item > a and .sub-menu a below), so the whole
	   navigation now sits on one consistent, more delicate size instead
	   of top-level items being the odd one out. */
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	letter-spacing: 1px;
	text-decoration: none;
}

.main-navigation .menu {
	display: flex;
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Active link — just enough of the button's look to read as "selected":
   its background/text color, font-size, and inner padding. Not treated
   as an actual button element (no display/width/border/text-align/
   box-shadow/etc.) — stays a normal block-level link, so it naturally
   fills its row on mobile and hugs the .main-navigation a base styling
   (uppercase, letter-spacing, font-weight) everywhere. */
.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a {
	background: var(--color-btn-bg);
	color: var(--color-btn-text);
	font-size: var(--font-size-sm);
	padding: 14px 28px;
}

.menu-toggle {
	display: none;
	background: transparent !important;
	border: 0;
	cursor: pointer;
	padding: 10px;
	/* Cancel the decorative properties inherited from the generic
	   `button` reset (color, box-shadow, border-radius, uppercase,
	   letter-spacing) so this stays a plain icon trigger. */
	box-shadow: none;
	border-radius: 0;
	text-transform: none;
	letter-spacing: normal;
	color: var(--color-text);
}

/* `button:hover` / `button:is(:active, :focus)` (element + pseudo-class)
   are more specific than the plain `.menu-toggle` rule above, so the
   global button's hover shadow was still winning — this pins it off. */
.menu-toggle:hover,
.menu-toggle:focus,
.menu-toggle:active {
	background: transparent !important;
	box-shadow: none;
}

/* No transform/centering hack needed here anymore — .menu-toggle is a
   normal in-flow flex child of .main-navigation now (see NAVIGATION —
   MOBILE below), vertically centered the same way .header-right's icons
   are, via align-items: center on its flex parent. Previously it was
   position: absolute against .site-header with a translateY(-50%)
   centering trick, which needed a whole separate rule just to survive
   the generic button:focus/:active reset re-asserting translateY(0). */

/* Sub-menu links — one step down from the main-level items on the type
   scale (var(--font-size-sm), not a hardcoded value) so it stays in
   step if the scale is ever retuned globally. Same selector covers
   both the desktop hover dropdown and the mobile expanded panel below,
   so it only needs to live here once. */
.main-navigation .sub-menu a {
	font-size: var(--font-size-sm);
}

/* -----------------------------------------
   MAIN NAVIGATION – DESKTOP (>= 1024px)
------------------------------------------ */

@media (min-width: 1024px) {
	/* Show sub-menu on hover */
	.main-navigation .menu > .menu-item:hover > .sub-menu {
		display: flex;
		flex-direction: column;
		position: absolute;
		left: 0;
		top: 100%;
		background: var(--color-bg-submenu-active);
		padding: 10px 5px 20px;
		min-width: 280px;
		/* Was --radius-lg — now matches .btn's own bottom-corner radius
		   (--radius-md) so the two "rounded surface" elements agree. */
		border-radius: 0 0 var(--radius-md) var(--radius-md);
		box-shadow: var(--shadow-submenu);
		z-index: var(--z-header);
	}

	.main-navigation .sub-menu {
		display: none;
		margin: 0;
		list-style: none;
	}

	.main-navigation .sub-menu a {
		padding: 10px;
		color: var(--color-text-on-dark);
		text-transform: none;
	}

	/* Hide mobile expand buttons on desktop */
	.main-navigation .expand-button {
		display: none !important;
	}
}

/* -----------------------------------------
   MAIN NAVIGATION – MOBILE (<= 1024px)
------------------------------------------ */

@media (max-width: 1024px) {
	.menu-toggle {
		/* Normal flex-flow icon now, made to render after the
		   .header-right icons via `order` on .main-navigation/
		   .header-right (see HEADER above) — centered by
		   .main-navigation's own align-items: center, same mechanism
		   .header-right uses for its icons. See HEADER above for why
		   this replaced the old position: absolute approach. */
		display: block;
	}

	.main-navigation .menu,
	.main-navigation .menu .menu-item {
		width: 100%;
	}

	.main-navigation .menu {
		display: none;
		flex-direction: column;
		/* Break out of .main-navigation's own (now auto-width) box so the
		   dropdown still spans the full header, edge to edge — positioned
		   against .site-header, the nearest positioned ancestor (fixed). */
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		/* Solid backdrop so the page content underneath the fixed
		   header doesn't show through the gaps in the mobile list. */
		background: var(--color-bg-body);
	}

	.main-navigation.toggled .menu {
		display: block;
	}

	/* The expanded mobile panel always paints its own solid backdrop
	   (--color-bg-body, above it) — it never shows the hero photo/gradient
	   through, unlike the persistent header bar (logo, cart, search,
	   hamburger) which does. So its links must NOT take the white-over-
	   hero treatment that .main-navigation a gets at desktop widths (see
	   .page-template-page-home-php/.page-template-page-hero-php
	   .site-header:not(.header-sticky) .main-navigation a) — that rule was
	   bleeding into this opaque panel too and leaving white text on a
	   light background. The active item is excluded (:not(...) on its li)
	   so its own accent-pill treatment (.current-menu-item > a etc.,
	   further up) still wins — it's already white-on-solid-accent, correct
	   with or without a hero underneath.
	   `.menu > li` (direct child), not `.menu li` — the old descendant
	   version also matched sub-menu items (a .sub-menu's own <li> is
	   still a descendant of .menu, just nested one level deeper inside a
	   top-level item), and being far more specific than `.sub-menu a`
	   below, it was winning there too: sub-menu links on mobile were
	   rendering in --color-text (near-black) on --color-bg-submenu-mobile
	   (near-black), unreadable, instead of the white the .sub-menu a rule
	   intends. Restricting this to direct children keeps it to top-level
	   items only, which is all it was ever meant to style. */
	.main-navigation.toggled .menu > li:not(.current_page_item):not(.current-menu-item):not(.current_page_ancestor) > a {
		color: var(--color-text);
	}

	.main-navigation .sub-menu {
		display: none;
		background: var(--color-bg-submenu-mobile);
		padding: 10px 5px 20px;
	}

	.main-navigation .sub-menu.show {
		display: block;
	}

	.main-navigation .sub-menu a {
		color: var(--color-text-on-dark);
	}

	.main-navigation .menu .sub-menu li {
		border: none;
	}

	/* Expand button (+/-) */
	.main-navigation .expand-button {
		display: block;
		position: absolute;
		right: 0;
		top: 0;
		padding: 15px;
		cursor: pointer;
		z-index: var(--z-header);
		font-weight: bold;
		color: var(--color-text);
		background: transparent;
	}
}

/* -----------------------------------------
   MENU ICONS
   Inline SVGs (see header.php, and _re_get_icon_svg()/[re_icon] in
   inc/icons.php) — icons use stroke="currentColor" (or fill="currentColor"
   for brand marks like whatsapp), so they inherit the `color` of their
   parent (button/link) and can be recolored per-context straight from CSS.

   [class^="ico-"] (attribute selector, matches any class starting with
   "ico-") instead of enumerating every icon name here — was .ico-menu,
   .ico-cart, .ico-search, .ico-facebook, .ico-whatsapp individually,
   which meant a new icon (see inc/icons.php's growing set: pin, clock,
   phone, mail, globe...) needed its own line added here too, easy to
   forget. One rule now covers every current and future .ico-* icon. */

[class^="ico-"] {
	width: 24px;
	height: 24px;
	display: block;
}

[class^="ico-"] svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* -----------------------------------------
   SEARCH
------------------------------------------ */

.search-button button {
	background: transparent !important;
	border: none;
	padding: 10px;
	cursor: pointer;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	min-width: 0;
	color: var(--color-text);
}

/* Search popup overlay */
.search-popup {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--overlay-modal);
	z-index: var(--z-popup);
	align-items: flex-start;
	justify-content: center;
	padding-top: 120px;
}

.search-popup.show-popup {
	display: flex;
}

.popup-content {
	position: relative;
	width: 90%;
	max-width: 600px;
	/* Centering already comes from .search-popup's justify-content:
	   center — margin-inline:auto here is a redundant, more universally
	   consistent fallback (margin:auto centering has fewer cross-browser
	   edge cases than flex centering inside a position:fixed overlay,
	   which is where a slight rightward drift was reported on Firefox
	   mobile specifically). */
	margin-inline: auto;
}

.search-popup-form {
	display: flex;
	gap: 0;
}

.search-popup-form input[type="text"] {
	flex: 1;
	padding: 14px 18px;
	font-size: var(--font-size-base);
	border: none;
	border-radius: var(--radius-md) 0 0 var(--radius-md);
	outline: none;
}

.search-popup-form .btn-search {
	background: var(--color-btn-bg);
	color: var(--color-btn-text);
	border: none;
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	padding: 14px 18px;
	cursor: pointer;
	text-transform: none;
	letter-spacing: normal;
	min-width: 0;
	box-shadow: none;
}

.search-popup-form .btn-search:hover {
	background: var(--color-btn-bg-hover);
}

.popup-close {
	position: absolute;
	top: -40px;
	right: 0;
	cursor: pointer;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.popup-close svg line {
	stroke: var(--color-text-on-dark);
}


/*--------------------------------------------------------------
# Homepage
--------------------------------------------------------------*/

/* Was a background-image on this element (set inline per-slide in
   content-slide.php); switched to a real <img> (.hero-slide-image
   below) so search engines can actually index the photo. That img is
   position:absolute, so this needs to be its positioning context
   (position:relative) and have a definite height for the img's
   height:100% to resolve against — .slick-slide already gets an
   explicit height (see .re-slick-hero rules below), so height:100%
   here just inherits that down one more level. overflow:hidden is a
   defensive clip in case of any rounding at the edges. */
.hero-slide-item {
	position: relative;
	height: 100%;
	overflow: hidden;
}

.hero-slide-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	z-index: 0;
}

.hero-container {
	/* position:relative + z-index so this reliably paints above
	   .hero-slide-image (position:absolute) — without an explicit
	   z-index here, a positioned sibling can paint above a non-
	   positioned one regardless of DOM order, which would put the
	   photo on top of the text. */
	position: relative;
	z-index: 1;
	min-height: var(--hero-height);
	display: flex;
	align-items: center;
	/* Was `center`: with .hero-content now capped by max-width below,
	   centering would float the text block toward the middle of the
	   photo instead of keeping it flush left under the logo/menu. */
	justify-content: flex-start;
	/* Flat gray fallback for browsers without color-mix() support (see
	   --overlay-scrim above) — mid-gray works reasonably for the white
	   hero text too (and gets a helping hand from its text-shadow either
	   way). A plain second `background` declaration here
	   would NOT reliably fall back to this: var()-containing values are
	   always syntactically valid at parse time, so the var() line below
	   still wins the cascade outright; it only becomes invalid later,
	   at compute time, once color-mix() fails to resolve — and at that
	   point the property resets to its own initial value (transparent),
	   not to this earlier declaration. The @supports guard below is
	   what actually makes this fallback apply. */
	background: rgba(128, 128, 128, 0.7);
	/* .hero-container stays full-bleed (the gradient above needs to cover
	   the whole photo), so it can't just become a .wrap — instead this
	   gives it the same kind of left-inset a centered wrap would produce,
	   but sized to --hero-max-width (1400px) rather than the wider
	   --wrap-max-width (1680px), so the hero text sits noticeably off
	   the edge on large monitors instead of just the standard 15px
	   gutter. Below --hero-max-width it's just that standard gutter.
	   (Above 1680px only — see the <=1680px override right below, which
	   syncs this to the site's actual .wrap edge instead.) */
	padding-left: max(
		var(--container-padding),
		calc((100% - var(--hero-max-width)) / 2 + var(--container-padding))
	);
}

/* Up to 1680px, line the hero text's left edge up with the same --wrap-
   max-width every other section on the page uses (now 1480px in this
   range — see WRAP above), instead of the hero's own narrower, fixed
   --hero-max-width (1400px). Without this, the hero inset and the
   .wrap edge below it visibly disagreed on mid-size screens. Above
   1680px .hero-container keeps its own wider, more dramatic inset
   (rule above), unchanged. */
@media (max-width: 1680px) {
	.hero-container {
		padding-left: max(
			var(--container-padding),
			calc((100% - var(--wrap-max-width)) / 2 + var(--container-padding))
		);
	}
}

/* Applies the real (color-mix-based) gradient only where color-mix() is
   actually supported — see the fallback comment above for why a plain
   second `background: var(--overlay-scrim);` declaration can't do this
   job on its own. */
@supports (background: color-mix(in srgb, red 50%, transparent)) {
	.hero-container {
		background: var(--overlay-scrim);
	}
}

/* Slick (fade: true) is known to miscalculate its track/list/slide height
   on init when it isn't told an explicit height, leaving extra blank
   space below the visible image — this is the "margin bigger than the
   image" gap. Pinning all three to the same height as .hero-container
   removes the mismatch instead of just nudging the dots to compensate. */
.re-slick-hero,
.re-slick-hero .slick-list,
.re-slick-hero .slick-track,
.re-slick-hero .slick-slide {
	height: var(--hero-height);
}

/* Caps the line length of the excerpt (previously unconstrained, running
   nearly the full width of the photo — hard to read and left the block
   feeling untethered from the logo/menu above it). Also gives the h2 and
   button something to align to as a column.
   No cap on mobile — the viewport is already narrow enough that the
   text naturally uses the available width, so an artificial max-width
   there just wastes space. */
.hero-content {
	max-width: none;
}

/* Desktop only: cap at half the actual viewport width (not a fixed px
   figure — "no more than 50% of the effective screen"), so the text
   column visibly shrinks as the photo, and the space it covers, grows.
   1024px matches the breakpoint the rest of the theme treats as
   desktop (e.g. .main-navigation). */
@media (min-width: 1024px) {
	.hero-content {
		max-width: 50vw;
	}
}

/* White, not black — matches the white-over-hero nav/logo right above
   (see .page-template-page-home-php/.page-template-page-hero-php
   .site-header:not(.header-sticky) rules), and the scrim's readable
   corner (--overlay-scrim) is a DARKENED color specifically built to
   carry white text, not black — this used to be black when the scrim's
   anchor was a plain, undarkened color; once that anchor got darker for
   its own reasons, black text there stopped making sense. A soft text-
   shadow is added as a safety net for the far, lighter end of the
   gradient (or a naturally light photo), not because the anchor itself
   needs it. h2 normally inherits --color-heading; pinned explicitly here
   so both match. h1 is included too: Page Hero's standalone hero uses a
   real h1 for the page title (Home Slide/Home Featured use h2 since
   they're one of several slides, not the page's own heading). */
.hero-content h1,
.hero-content h2,
.hero-content p {
	color: #ffffff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* Any h1/h2 inside a hero (Home Slide's .hero-content, Page Hero's
   .hero-content, and Home Featured's .hero-feat-title) — bigger and
   bolder than a plain heading, fluid instead of the old fixed-2xl/
   mobile-xl jump so it scales smoothly between breakpoints. clamp:
   1.75rem (28px) floor, 2.75rem (44px) ceiling, ~1.4rem + 1.8vw in
   between. */
.hero-content h1,
.hero-content h2,
.hero-feat-title {
	font-weight: var(--font-weight-bold);
	font-size: clamp(1.75rem, 1.4rem + 1.8vw, 2.75rem);
}

.logo-carousel {
	padding-bottom: 50px;
}

.section-header {
	text-align: center;
	margin-bottom: 45px;
	position: relative;
}

.section-subtitle {
	display: block;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--color-text-light);
	margin-bottom: 8px;
}

.section-title {
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	color: var(--color-heading);
	margin: 0;
	padding-bottom: 15px;
	position: relative;
	display: inline-block;
}

.section-title::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 40px;
	height: 2px;
	background-color: var(--color-accent);
}

@media (max-width: 768px) {
	.section-title {
		font-size: var(--font-size-xl);
	}
}

/* -----------------------------------------
   HERO — FEATURED (sticky posts, split layout)
   Used by page-home-feat.php ("Home Featured" template) via
   template-parts/content-slide-feat.php. Kept fully separate from
   .hero-slide-item / .hero-container (the background-image hero used
   by "Home Slide"), so the two hero styles never cross-affect.
------------------------------------------ */

/* .re-slick-feat itself now carries the .wrap class in page-home-feat.php
   (not each .hero-feat-slide) — slick appends its arrows/dots as direct
   children of this element, outside .slick-track. Capping .hero-feat-slide
   alone left those arrows/dots spanning the full, uncapped viewport width
   while the slide content sat inset at 1680px, visibly disconnected from
   it. content-slide-feat.php no longer puts .wrap on .hero-feat-slide, to
   avoid capping/padding it twice. */

.hero-feat-slide {
	/* Slick sets an inline style="display: inline-block" directly on this
	   element (it's the sole child it wraps per slide), which otherwise
	   overrides the flex layout below — confirmed in the rendered markup. */
	display: flex !important;
	align-items: center;
	gap: 24px;
	padding: 60px 0;
}

.hero-feat-media {
	flex: 0 0 50%;
}

/* Fallback when the sticky post has no featured image: instead of the
   text column sitting pinned at 50% width on the left with empty space
   next to it, let it become the slide's only content and center the
   whole block — the text inside keeps its normal left alignment, only
   the block itself moves toward the middle of the screen. */
.hero-feat-slide--no-media .hero-feat-content {
	flex: 0 1 auto;
	width: 100%;
	max-width: 700px;
	margin-inline: auto;
}

.hero-feat-media img {
	display: block;
	width: 100%;
	height: 420px;
	object-fit: cover;
	border-radius: var(--radius-md);
}

.hero-feat-content {
	/* flex-grow: 0 so this doesn't stretch to fill the remaining 50% —
	   it sizes to its own content (up to max-width) and stops short of
	   the wrap's right edge, instead of the text block spanning all the
	   way across. The image (.hero-feat-media) still runs flush to the
	   wrap's left edge. */
	flex: 0 1 auto;
	max-width: 480px;
	min-width: 0;
}

.hero-feat-title {
	/* font-size/font-weight now come from the shared ".hero-content h2,
	   .hero-feat-title" clamp rule above (Homepage section). */
	color: var(--color-heading);
	margin: 0 0 1rem;
}

.hero-feat-title a {
	color: var(--color-accent);
	text-decoration: none;
}

.hero-feat-title a:hover {
	color: var(--color-accent-hover);
}

.hero-feat-excerpt {
	color: var(--color-text);
	margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
	.hero-feat-slide {
		flex-direction: column;
		align-items: flex-start;
		/* Extra bottom clearance so the "Vezi detalii" button never sits
		   under the slick dots (.re-slick-feat .slick-dots, bottom: 50px
		   !important) on the tallest slide — the slide's own height is
		   set by its wrapped text, so this needs to hold regardless of
		   how much a given slide's title/excerpt wrap to. */
		padding: 30px 0 80px;
	}
	.hero-feat-media {
		flex-basis: auto;
		width: 100%;
	}
	.hero-feat-content {
		flex-basis: auto;
		width: 100%;
		max-width: none;
	}
	.hero-feat-media img {
		height: 240px;
	}
	/* font-size no longer overridden here — the clamp() on the shared
	   h2 rule already scales it down at this width. */
}

/* -----------------------------------------
   BUTTON — reusable CTA (for links styled as buttons; native <button>
   and <input type="submit"> already get this look from the Forms
   reset above). Same tokens, so both stay visually identical.
------------------------------------------ */

.btn,
.btn:visited {
	display: inline-block;
	background: var(--color-btn-bg);
	color: var(--color-btn-text);
	border-radius: var(--radius-md);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 1;
	padding: 14px 28px;
	text-decoration: none;
	cursor: pointer;
	box-shadow: var(--shadow-soft);
	transition: all var(--transition);
}

.btn:hover,
.btn:focus {
	background: var(--color-btn-bg-hover);
	color: var(--color-btn-text);
	box-shadow: var(--shadow-medium);
}

.btn:active {
	background: var(--color-btn-bg-active);
	color: var(--color-btn-text);
}

/* .btn-white — white background, accent-colored text; otherwise
   identical to .btn above (shape/spacing/typography duplicated rather
   than merged into .btn's own selectors, so existing .btn usage
   sitewide is untouched — keep the two in sync by hand if .btn's base
   properties change). Used for the "Vezi detalii" CTA in hero-slide
   content, where the gradient scrim's accent-heavy corner would make
   a green .btn blend into the background. */
.btn-white,
.btn-white:visited {
	display: inline-block;
	background: #ffffff;
	color: var(--color-accent);
	border-radius: var(--radius-md);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 1;
	padding: 14px 28px;
	text-decoration: none;
	cursor: pointer;
	box-shadow: var(--shadow-soft);
	transition: all var(--transition);
}

.btn-white:hover,
.btn-white:focus {
	background: #ffffff;
	color: var(--color-accent-hover);
	box-shadow: var(--shadow-medium);
}

.btn-white:active {
	background: #ffffff;
	color: var(--color-accent-visited);
}

/*--------------------------------------------------------------
# CTA / Feature box — .cta-box

Wide banner, brand-gradient background (--gradient-cta), white text.
Content on the left (.cta-box-content: h2 + paragraph), a single
call-to-action on the right (.cta-box-action — pair it with .btn-white,
not .btn, so the button doesn't blend into the gradient). Stacks to a
single column on narrow screens.
--------------------------------------------------------------*/
.cta-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	margin: 0 0 2em;
	padding: 2.5rem 3rem;
	border-radius: var(--radius-lg);
	background: var(--gradient-cta);
	color: var(--color-text-on-dark);
}

/* Doubled up (.cta-box .cta-box-content h2, not just .cta-box-content h2)
   specifically to out-specificity `.wrap--narrow h2` (Content typography
   section, further down this file) — same specificity used to lose that
   fight on source order alone, which left headings inside the box
   rendering in --color-heading (a dark, low-contrast color on this
   gradient) with a stray 1.75em top margin instead of white and flush. */
.cta-box .cta-box-content h2,
.cta-box .cta-box-content p {
	color: var(--color-text-on-dark);
	margin: 0;
}

.cta-box .cta-box-content h2 {
	margin-bottom: 0.5rem;
}

.cta-box-content p {
	opacity: 0.9;
}

.cta-box-action {
	flex-shrink: 0;
}

@media (max-width: 700px) {
	.cta-box {
		flex-direction: column;
		align-items: flex-start;
		padding: 2rem;
	}
}


/*--------------------------------------------------------------
# Posts and pages
--------------------------------------------------------------*/

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Numbered pagination (archive.php, via _re_numeric_posts_nav() in
   inc/template-tags.php) — page numbers instead of the .posts-
   navigation Older/Newer-only links above. Separate component, not a
   variant of .posts-navigation: different markup (<nav><ul><li>…), and
   single.php's Previous/Next post links still use core's the_post_
   navigation(), unrelated to either of these. */
.page-navigation {
	margin: 2em 0;
}

.page-navigation ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.page-navigation li a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	border-radius: var(--radius-sm);
	background: var(--color-bg-input);
	color: var(--color-text);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	text-decoration: none;
	transition: var(--transition);
}

.page-navigation li a:hover {
	background: var(--color-border);
}

.page-navigation li.active a {
	background: var(--color-accent);
	color: var(--color-text-on-dark);
}

/* Previous/Next — core's get_previous_posts_link()/get_next_posts_link()
   render their own <a> with longer default text ("« Previous"), so
   these stay text links rather than the same fixed-width number boxes
   above. */
.page-navigation li.prev-page a,
.page-navigation li.next-page a {
	min-width: 0;
	background: transparent;
	padding: 0 6px;
}

.page-navigation li.prev-page a:hover,
.page-navigation li.next-page a:hover {
	background: var(--color-bg-input);
}

.page-navigation li.dots {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	color: var(--color-text-light);
}

.sticky {
	display: block;
}

.home .page {
	margin: 0;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Content typography — raw editor output
--------------------------------------------- */
/* Scoped to .wrap--narrow (the shared "reading column" wrapper on every
   content template — page.php, single.php, search.php, index.php, plus
   Home Slide/Home Featured/Page Hero, which render the_content() with no
   .entry-content wrapper at all) instead of .entry-content, so plain
   text/headings/lists typed into the editor look designed everywhere,
   without needing .entry-content to be present. Doesn't touch article
   card titles (.articles .entry-title) or hero text — those already
   have their own dedicated rules. */
.wrap--narrow h1,
.wrap--narrow h2,
.wrap--narrow h3,
.wrap--narrow h4,
.wrap--narrow h5,
.wrap--narrow h6 {
	color: var(--color-heading);
	font-weight: var(--font-weight-bold);
	margin: 1.75em 0 0.75em;
}


.wrap--narrow h1:first-child,
.wrap--narrow h2:first-child,
.wrap--narrow h3:first-child,
.wrap--narrow h4:first-child {
	margin-top: 0;
}

.wrap--narrow h1 {
	font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
}

.wrap--narrow h2 {
	font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
}

.wrap--narrow h3 {
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
}

/* h4-h6 use fixed rem (not the fluid clamp() h1-h3 use) specifically so
   they stay safely under h3's floor (1.25rem) at every viewport width —
   independent fluid curves for each level risked h4 briefly overtaking
   h3 at some widths. Previously h4/h5/h6 pointed at --font-size-xl/lg/md
   (1.65/1.35/0.9375rem), which put h4 ABOVE h3's own ceiling (1.5rem) —
   that's why h3/h4/h5 all looked like the same size. */
.wrap--narrow h4 {
	font-size: 1.15rem;
}

.wrap--narrow h5 {
	font-size: 1.05rem;
}

.wrap--narrow h6 {
	font-size: 0.95rem;
}

.wrap--narrow ul,
.wrap--narrow ol {
	/* Half of the base ul/ol rule's 3em left margin. */
	margin-left: 1.5em;
}

.wrap--narrow ul li::marker {
	color: var(--color-accent);
}

.wrap--narrow ol li::marker {
	color: var(--color-accent);
	font-weight: var(--font-weight-bold);
}

.wrap--narrow blockquote {
	padding: 0.25em 1.5em;
	border-left: 3px solid var(--color-accent);
	font-style: italic;
	color: var(--color-text-light);
}

/* Modeled on the "doc-table" pattern from another _re-family site
   (azur.solar/politica-de-confidentialitate/) — a dense reference table
   (T&Cs, GDPR purpose/legal-basis tables, spec sheets), read there for
   its exact structure/colors rather than guessed from a screenshot.
   That site hard-codes its own colors on a one-off ".doc-table" class;
   here the same look is wired to _re's own tokens and applied to every
   plain <table> directly, no class needed, same as the rest of this
   Content typography section. No cell borders/grid lines — a dark
   header, zebra striping and a hover row do all the definition work,
   which is also why the old bordered-cell look is gone rather than kept
   alongside this. */
.wrap--narrow table {
	width: 100%;
	border-collapse: collapse;
	background: var(--color-bg-content);
	font-size: var(--font-size-sm);
}

.wrap--narrow table th,
.wrap--narrow table td {
	padding: 14px;
	text-align: left;
	vertical-align: top;
}

/* Dark header, same idea as .icon-row's badge or the footer: reuses
   --color-primary/--color-text-on-dark rather than introducing a new
   "primary-dark" token pair like the reference site has — _re's
   --color-primary already defaults to a dark navy (see its own comment
   above), so it does this job as-is. */
.wrap--narrow table thead th {
	background: var(--color-primary);
	color: var(--color-text-on-dark);
	font-weight: var(--font-weight-semibold);
}

.wrap--narrow table thead th:first-child {
	border-top-left-radius: var(--radius-sm);
}

.wrap--narrow table thead th:last-child {
	border-top-right-radius: var(--radius-sm);
}

.wrap--narrow table tbody tr:nth-child(even) td {
	background: var(--color-bg-input);
}

.wrap--narrow table tbody tr:hover td {
	background: var(--color-border);
}

/* Opt-in: numbered step list for step-by-step content (e.g. "how it
   works", a washing process, a checkout flow). In the block editor, wrap
   the steps in a Group block and add "content-steps" under Advanced ->
   Additional CSS class(es) — each heading directly inside becomes a
   numbered circle. Headings must be direct children of the wrapper. */
.content-steps {
	counter-reset: step;
}

.content-steps > h2,
.content-steps > h3 {
	counter-increment: step;
	position: relative;
	/* rem, not em: h2/h3 use a fluid clamp() font-size, so em-based
	   padding here would grow right along with it, pushing the text
	   further from the (fixed-size) badge on larger headings/viewports. */
	padding-left: 2.5rem;
}

.content-steps > h2::before,
.content-steps > h3::before {
	content: counter(step);
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1.8rem;
	height: 1.8rem;
	border-radius: var(--radius-full);
	background: var(--color-accent);
	color: #ffffff;
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-bold);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Opt-in: no-JS accordion for FAQ-style content, built on native
   <details>/<summary>. Markup per question:
   <details class="faq-item">
       <summary>Question text</summary>
       <div class="faq-answer">Answer text.</div>
   </details>
   Add each as an HTML block (or a reusable block/pattern) — no theme JS
   involved, works with keyboard/screen readers out of the box. */
.faq-item {
	border-bottom: 1px solid var(--color-border);
	padding: 1em 0;
}

.faq-item summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	font-weight: var(--font-weight-semibold);
	color: var(--color-heading);
}

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

.faq-item summary::after {
	content: "+";
	flex-shrink: 0;
	color: var(--color-accent);
	font-size: 1.5em;
	line-height: 1;
	transition: transform var(--transition);
}

.faq-item[open] summary::after {
	transform: rotate(45deg);
}

.faq-item .faq-answer {
	margin-top: 0.75em;
	color: var(--color-text);
}

/* -----------------------------------------
   ICON ROW — icon badge + eyebrow + value
   Generic "info row" pattern (icon.markup([re_icon name="..."] — see
   inc/icons.php) in a square badge, next to a small uppercase label and
   a value below it). Address/phone/email/hours are the obvious use, but
   nothing here is contact-specific — same block works for any "icon +
   short label + value" pairing. Plain flex rows: works stacked as a
   single column (rows one after another) or side by side inside
   .row/.col-* (see WRAP/GRID above) with nothing extra needed for
   either layout.

   Example markup for one row:
     <div class="icon-row">
       <div class="icon-row__icon">[re_icon name="pin"]</div>
       <div>
         <span class="icon-row__label">Adresă</span>
         <p class="icon-row__value">Strada Exemplu 1</p>
       </div>
     </div>
------------------------------------------ */
.icon-row {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 28px;
}

.icon-row__icon {
	flex-shrink: 0;
	width: var(--icon-row-badge-size);
	height: var(--icon-row-badge-size);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-sm);
	background: var(--color-icon-badge-bg);
	color: var(--color-icon-badge-icon);
}

/* [re_icon] always outputs its svg wrapped in <i class="ico-NAME"> (see
   inc/icons.php), sized to 24px by the generic [class^="ico-"] rule
   above (MENU ICONS) — resized here, specifically inside .icon-row__icon,
   to --icon-row-icon-size (20px by default — reads better at the badge's
   own default 44px size than the generic 24px). */
.icon-row__icon i {
	width: var(--icon-row-icon-size);
	height: var(--icon-row-icon-size);
}

/* Own complete eyebrow recipe — same visual formula as .section-subtitle
   (uppercase, letter-spacing, --font-size-xs, semibold) but its own
   color token (--color-icon-row-eyebrow, see :root above), so this
   doesn't need pairing with .section-subtitle in markup just to get a
   different label color than a generic section eyebrow. */
.icon-row__label {
	display: block;
	margin: 0 0 4px;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--color-icon-row-eyebrow);
}

/* color: inherit, not var(--color-heading) — same reasoning as
   --color-icon-row-eyebrow above: this way .icon-row__value automatically
   reads correctly on a dark footer (.site-footer's own color: var(--color-
   text-on-dark) flows straight down) as well as anywhere else the ambient
   text color already differs from the default --color-heading, with no
   per-context override rule needed. */
.icon-row__value {
	margin: 0;
	font-size: var(--font-size-base);
	color: inherit;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* .widget-title (the <h2> wrapping every widget's title — see
   register_sidebar()'s before_title/after_title in functions.php) had
   no styling of its own anywhere in _re, so it rendered as a plain
   browser-default h2 — including picking up a child theme's own h1-h6
   font-family override (e.g. a serif display face meant for real page
   headings), which reads wrong on something this small. Given its own
   eyebrow treatment instead: same uppercase/letter-spacing formula as
   .section-subtitle, but --font-size-sm rather than -xs (still small
   and label-like, not sized like a heading — just not shrunk down to
   -xs either) and font-family pinned back to the base sans-serif stack
   so no heading font override can reach it, by CSS specificity, not
   source order. No color set — inherits the surrounding text color, so
   it already reads correctly on a light sidebar or (once relevant
   selectors like .site-footer set their own color) a dark footer,
   without a separate override needed here or per child theme. */
.widget-title {
	margin: 0 0 20px;
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 2px;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/* [gallery size="large"] → Slick carousel (see inc/gallery-slick.php).
   Renders inside the_content(), already inside single.php/page.php's
   .wrap — no extra containment needed here. Any other gallery size
   still uses the grid rules above, untouched. */
.re-slick-gallery {
	margin: 0 0 1.5em;
}

.re-slick-gallery-slide img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 600px;
	object-fit: contain;
	margin: 0 auto;
}

/* 1200px mirrors --content-max-width (the .wrap--narrow cap this slider
   sits inside) — media queries can't read a custom property, so it's
   restated here as a literal. Above that width there's actual margin
   outside the content column to place the arrows into; at or below it
   the column already fills the viewport, so they'd have nowhere to go
   and stay in Slick's default inset position instead.
   Site also carries an existing `.slick-slider .slick-arrow` rule (not
   from this stylesheet — circular dark arrow styling, `left: 20px
   !important`) matching the same (0,2,0) specificity as a plain
   `.re-slick-gallery .slick-prev`, so with both sides using
   !important it comes down to source order, and that rule was
   winning. `.re-slick-gallery.slick-slider` chains both classes slick
   already puts on this same root element (confirmed in the rendered
   markup) to reach (0,3,0) and win outright, regardless of where that
   other rule lives or loads. This is scoped to .re-slick-gallery only
   — .re-slick-hero/.re-slick-feat are untouched, and keep the site
   file's default left/right: 20px (full-bleed sliders, not sitting in
   a narrow wrap, so pushing their arrows outside wouldn't make sense
   the way it does here). */
@media (min-width: 1200px) {
	.re-slick-gallery.slick-slider .slick-prev {
		left: -100px !important;
	}

	.re-slick-gallery.slick-slider .slick-next {
		right: -100px !important;
	}
}

/* Below 1024px arrows are already removed via slick's own `responsive`
   setting in slickinit.js (arrows: false) — swipe covers mobile, no
   CSS override needed here too. */


/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/

/* margin-top (not padding) — the gap needs to sit between whatever
   content ends above it and the footer's own dark background, not
   inside that background. Put here instead of relying on the last
   template's own bottom spacing, since that's inconsistent (articles
   on page templates carry some bottom margin, the blog/archive listing
   doesn't) — this guarantees the same gap above the footer regardless
   of which template or content precedes it. */
/* padding-top/-bottom split instead of the old single padding-block —
   the top needs real breathing room above the widgets (reusing
   --content-spacing-top, the same clamp() _re already uses wherever a
   section needs generous top air, e.g. Simple Header — so the footer
   scales with viewport width the same way instead of a one-off fixed
   number); the bottom stays tight since .footer-bottom below already
   has its own content (site-info/nav) sitting right above the actual
   edge of the page. */
.site-footer {
	background: var(--color-bg-footer);
	color: var(--color-text-on-dark);
	font-size: var(--font-size-sm);
	margin-top: 60px;
	padding-top: var(--content-spacing-top);
	padding-bottom: 15px;
}

/* Same box model as .header-container (which itself mirrors .wrap — see
   WRAP above and the header-container comment): width/max-width/
   margin-inline/padding-inline, so the footer's content lines up with
   exactly the same left/right edges as the header, instead of the old
   flat 15px .site-footer padding, which had no max-width and just ran
   edge to edge on wide screens. .site-footer itself keeps only vertical
   padding now (background/color live there); all horizontal alignment
   moves to this inner container, same split as .site-header/
   .header-container. */
.footer-container {
	width: 100%;
	max-width: var(--wrap-max-width);
	margin-inline: auto;
	padding-inline: var(--container-padding);
	box-sizing: border-box;
}

/* Links inherit the global accent-colored a/a:visited/a:hover rules
   otherwise, which don't have enough contrast against the dark
   background here — pinned to the same "text on dark surface" tokens
   the submenu/popup-close already use. text-decoration: none because
   plain content links (e.g. inside a Text/Custom HTML widget) still
   carry the browser's default underline otherwise — nothing upstream
   already strips it the way it does for nav/button links. */
.site-footer a,
.site-footer a:visited {
	color: var(--color-text-on-dark);
	text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus,
.site-footer a:active {
	color: var(--color-text-on-dark-muted);
}

/* display: grid instead of the old plain flex — same reason .row/.col-*
   uses grid for its own gutters (see WRAP/GRID below): with `gap` on a
   flex row, each item's own min-width: 25% still adds up to 100% of the
   container BEFORE the gaps are added, so 4 items would overflow (or
   force an unwanted wrap) by roughly 3 gaps' worth of width. A 4-track
   `fr` grid divides the available width net of gaps automatically, so
   4 columns keep fitting exactly, at any gap size. Gap value reused
   from the same --grid-gap/--grid-gap-mobile pair the .row grid uses —
   one consistent "column gutter" sitewide, not a footer-specific
   number. min-width: 0 (not the old 25%) matches [class*="col-"]'s own
   convention below — the grid track already sizes the column; this
   just stops a widget's own content (e.g. a long unbroken address
   line) from forcing it wider than its track. */
.footer-widgets {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--grid-gap);
}

.footer-widgets .widget {
	min-width: 0;
}

/* Some child themes put a nav-style list (a sitemap column, a links
   list) inside a footer widget, not just prose/text widgets — strip
   the default browser <ul>/<ol> margin, padding and bullet so those
   read as a plain stacked list instead of an indented bulleted one.
   Separate from .footer-navigation ul below: that one is the single
   bottom-bar menu, this is any list inside the widget columns. */
.footer-widgets .widget ul,
.footer-widgets .widget ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Same 768px breakpoint used everywhere else this theme collapses a
   grid to one column (see [class*="col-"] below) — 4 footer columns
   are too narrow to be worth keeping side by side on a phone. */
@media (max-width: 768px) {
	.footer-widgets {
		grid-template-columns: 1fr;
		gap: var(--grid-gap-mobile);
	}
}

/* .icon-row's own type scale (--font-size-xs label / --font-size-base
   value — see ICON ROW below) is tuned for a standalone info block on a
   full page (e.g. Contact), where it's meant to stand out. Inside the
   footer it just needs to read as ordinary footer text, uniform with
   whatever's in any other footer widget (a Text widget, a menu) — all
   of which simply inherit .site-footer's own font-size: var(--font-
   size-sm) already. So instead of the icon-row component's own sizes,
   both parts inherit here — one general rule, not something each child
   theme needs to re-fix for its own footer contact block. */
.site-footer .icon-row__label,
.site-footer .icon-row__value {
	font-size: inherit;
}

/* .icon-row's default margin-bottom: 28px (see ICON ROW below) is meant
   to give a standalone contact block on a full page some breathing
   room. Inside the footer's own narrower widget column, that much air
   between address/phone/email/etc. just reads as disconnected rows
   instead of one contact block — tightened here, and the last row's
   own margin dropped so it doesn't leave extra space below the widget
   either. */
.site-footer .icon-row {
	margin-bottom: 10px;
}

.site-footer .icon-row:last-child {
	margin-bottom: 0;
}

/* Bottom bar — site-info on the left, footer nav (menu-2) on the
   right, below the widgets area. */
.footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
}

.footer-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-navigation a {
	display: inline-block;
	padding: 4px 6px;
	text-decoration: none;
}


/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Slick — dots override.
   On the hero sliders, slick's own theme CSS leaves more bottom margin
   than the slide's actual image height, so the dots land too low —
   neither clearly inside nor below the slide. !important is needed to
   beat slick's own stylesheet, which loads after ours. Scoped to the
   two hero sliders; .logo-carousel is a much shorter strip and doesn't
   have the same problem, so it's left on slick's default position. */
.re-slick-hero .slick-dots,
.re-slick-feat .slick-dots {
	bottom: 50px !important;
}


/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--color-bg-input);
	border-radius: var(--radius-sm);
	box-shadow: 0 0 2px 2px var(--overlay-modal);
	clip: auto !important;
	clip-path: none;
	color: var(--color-primary);
	display: block;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: var(--z-top);
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/* Flex row
--------------------------------------------- */
/* Generic horizontal row of items — a line of social icons, an inline
   icon+text link ("Vezi recenziile pe Facebook"), anything that just
   needs to sit side by side with even spacing. Deliberately has no
   color/size opinion of its own: icon color/size comes from [class^=
   "ico-"] (see MENU ICONS) or whatever context it's in (e.g. .site-
   footer a already sets link color), same as .row/.icon-row leave
   color/typography to the elements inside them rather than to the
   layout wrapper. Not content-area-specific — works the same inside
   the_content() or a Custom HTML widget. */
.flex-row {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Spacing overrides
--------------------------------------------- */
/* Manual escape hatch for "this one heading needs its margin gone" —
   e.g. a heading sitting right under a .section-subtitle eyebrow, where
   the generic .wrap--narrow h1/h2/… rule's 1.75em top margin (see
   Content typography) reads as too big a gap. Deliberately a class you
   add by hand where it's actually needed, not a blanket .section-
   subtitle + h1 sibling rule — not every eyebrow+heading pairing wants
   the same treatment, and page-header-simple already has its own
   considered fixed-px override for its specific case (see that section)
   rather than using this.
   !important is required, not just habit: a bare class like this has
   lower specificity than the element-qualified rules it's meant to beat
   (.wrap--narrow h1 is class+element, this is class-only), so without it
   the override would silently lose depending on where it's used. */
.no-margin-top {
	margin-top: 0 !important;
}

.no-margin-bottom {
	margin-bottom: 0 !important;
}

/* Link arrow
--------------------------------------------- */
/* A small trailing arrow via ::after, added to any link with just a
   class — no markup change, no icon markup needed. Works two ways: on
   its own on a plain text link (the arrow just inherits color, same as
   the text around it), or stacked on .btn/.btn-white for a button-style
   CTA with a trailing arrow ("Programează un consult →"). A real
   character rather than an SVG/[re_icon] icon specifically so it needs
   nothing but the class — .child-card__link's own arrow is a real <svg>
   instead; [re_icon] itself stays for anywhere an actual icon (not a
   bare arrow glyph) is what's wanted.
   text-decoration: none is deliberate, not just inherited: a plain-link
   context can otherwise carry the browser's default underline (see a
   above — nothing here removes it site-wide), which would draw a line
   straight through the arrow glyph. This class opts the whole thing out
   of that, same as every other arrow-link pattern in the theme
   (.child-card__link, the footer/icon-row links) already does.
   No hover animation for now, on purpose — a translateX() nudge was
   tried here (matching .child-card__link's own icon hover) but a text
   glyph isn't a fixed-box icon: depending on which font a given system
   falls back to for the → character, its actual glyph metrics differ,
   which read as a diagonal jump on hover rather than the intended
   straight left-right nudge. Leaving it static until there's a font-
   independent way to do this (a real icon instead of a character,
   likely). */
.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
}

.link-arrow::after {
	content: "→";
}


/* ==========================================================================
   GRID SYSTEM — Simple & Optimized for Classic Editor
   ========================================================================== */

/* Row container */
.row {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	box-sizing: border-box;
}

/* Utility class for flexible spacing */
.grid-gap {
	gap: var(--grid-gap);
}

/* Target all columns */
[class*="col-"] {
	box-sizing: border-box;
	min-width: 0; /* Prevents overflow with large images or tables */
}

/* Column spans on desktop */
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/*--------------------------------------------------------------
# Anti-wpautop Protection (Classic Editor)
--------------------------------------------------------------*/
/* If WordPress accidentally inserts empty paragraphs inside .row,
   force them to span the full row or hide them entirely. */
.row > p {
	grid-column: span 12;
	margin: 0;
	padding: 0;
}

.row > p:empty {
	display: none;
}

/* Same wpautop quirk, generalized to any raw-HTML content block, not
   just .row: a blank line (or just a line break) between a closing tag
   and the next block element — e.g. between .icon-row's
   <span class="icon-row__label"> and the following
   <p class="icon-row__value"> — gets read by wpautop as a paragraph
   break, inserting a stray, genuinely empty <p> that still takes up its
   own line-height worth of space. Rather than asking editors to fight
   wpautop by typing everything on one unbroken line, empty paragraphs
   are hidden wherever they land in the reading column. wpautop itself
   stays ON for this theme (unlike get_the_excerpt(), which turns it off
   specifically for the excerpt — see content-page-header.php), so a
   plain-text post typed as ordinary paragraphs still gets real <p>
   tags; this only cleans up its one recurring side effect on hand-typed
   HTML.

   :empty only — a `p:has(> br:only-child)` variant was tried here too,
   meant to also catch wpautop's other common empty-paragraph shape,
   <p><br></p>. Dropped: :only-child counts element children only, not
   surrounding text nodes, so it also matched a real, legitimate
   paragraph that just happens to use <br> for a manual line break
   inside real text — e.g. <p>CMI Dr. Cheta Cristian<br>CUI:
   49751426</p> — and hid actual content along with the empty ones.
   :empty alone doesn't have that failure mode: it requires zero child
   nodes of any kind, so a paragraph with real text is never matched,
   whatever tags sit inside it.

   Scoped to .wrap, not .wrap--narrow — .icon-row (the motivating example
   above) also shows up outside a reading column, e.g. a trust bar on a
   dark background sitting in a plain .wrap with no .wrap--narrow. .wrap
   alone already covers every .wrap--narrow case too, since that class
   is only ever added alongside .wrap (see WRAP above), never on its
   own — so this one selector is strictly more general, not narrower. */
.wrap p:empty {
	display: none;
}

/*--------------------------------------------------------------
# Grid Responsiveness
--------------------------------------------------------------*/
@media (max-width: 768px) {
	/* Reduce gap on small screens — .articles follows the same value via
	   its own rule below (.articles.grid-3, .articles.grid-4), so both
	   grids shrink their gap together. */
	.grid-gap {
		gap: var(--grid-gap-mobile);
	}

	/* All columns become full width on mobile */
	[class*="col-"] {
		grid-column: span 12;
	}
}


/* ==========================================================================
   ARTICLE GRID — Grid System for WordPress Post Listings
   ========================================================================== */

/* Main listing container */
.articles {
	display: grid;
	gap: var(--articles-gap);
	width: 100%;
	box-sizing: border-box;
}

/* Desktop column variants (applied directly on .articles container) */
.articles.grid-3 {
	grid-template-columns: repeat(3, 1fr);
}

.articles.grid-4 {
	grid-template-columns: repeat(4, 1fr);
}

/* Individual article card (post_class() output) — the whole card is one
   <a> now (see content-articles.php), not separate inner links for the
   thumbnail/title. Without color/text-decoration here, the sitewide
   `a { color: var(--color-accent); }` (Links, above) would tint and
   underline the entire card's text, not just what used to be the title
   link. */
.articles .post {
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
	min-width: 0;
	background: var(--color-bg-body);
	color: inherit;
	text-decoration: none;
	transition: transform var(--transition), box-shadow var(--transition);
}

/* Featured image — 16:9 rather than the old 1:1, matching the card
   design this was adapted from (unrivals.ro/rezultate via _b2b). Only
   affects listings that actually go through content-articles.php's
   .entry-thumbnail; .team below sets its own fixed width/height on a
   circular avatar image regardless of this rule. */
.articles img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	margin: 0 auto;
}

/* Content container (eyebrow / title / excerpt / tags) — gap handles
   spacing between all four uniformly, rather than hand-tuning each
   element's own margin (the old 2-element title→excerpt version of
   this card did the latter; not worth extending that approach to a
   4-element stack). flex-direction: column here is also why margins
   between these children never collapse into each other on their own —
   flex items don't collapse margins, only gap does. */
.articles .entry-content {
	padding: 1.5rem;
	/* Cancels the global `.entry-content { margin: 1.5em 0 0; }` rule
	   (meant for content sitting under a bare page title, no padding of
	   its own) — here it would stack on top of the 1.5rem padding above,
	   doubling the thumbnail→content gap. The padding alone is enough. */
	margin-top: 0;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}

.articles .entry-eyebrow {
	color: var(--color-accent);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.articles .entry-title {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	line-height: 1.2;
	color: var(--color-heading);
	margin: 0;
}

.articles .entry-summary {
	margin: 0;
	color: var(--color-text-light);
}

.articles .entry-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	/* Pushes the tag row to the card's bottom edge even when shorter
	   excerpts leave extra space above it — cards in the same row stay
	   the same height (.articles .post already stretches to `height:
	   100%`), but each card's own content still varies in length. */
	margin-top: auto;
	padding-top: 0.4rem;
}

.tag-pill {
	font-size: var(--font-size-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
	color: var(--color-accent);
	background: color-mix(in srgb, var(--color-accent) 8%, transparent);
	border: 1px solid color-mix(in srgb, var(--color-accent) 20%, transparent);
	border-radius: var(--radius-sm);
	padding: 0.3em 0.55em;
}

/*--------------------------------------------------------------
# Section-specific styles (.news and .team)
--------------------------------------------------------------*/

/* News / Blog section */
.news .post {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	/* Needed for two things: clips the image (see below) to the card's
	   own rounded corners instead of the image's square top corners
	   poking out past them, and keeps the hover zoom effect contained
	   inside the card frame instead of spilling past its edges. */
	overflow: hidden;
}

.news .post:hover {
	border-color: var(--color-accent-light);
}

/* Belt-and-suspenders with .news .post's overflow:hidden above — the
   image is also explicitly rounded to match the card, in case overflow
   is ever changed independently. Only the top corners: the bottom of
   the image sits against .entry-content, not the card's own bottom
   edge, so it doesn't need rounding there. */
.news .post img {
	border-radius: var(--radius-md) var(--radius-md) 0 0;
	/* ease-out (fast start, slow finish) reads smoother for a hover zoom
	   than the site-wide var(--transition) (0.3s ease) — the "ease" at
	   the end is the point, so it's spelled out here rather than reused. */
	transition: transform 0.4s ease-out;
	/* scale() grows equally in all directions from its transform-origin,
	   which defaults to dead center — the bottom edge would drift past
	   its own original position into .entry-content below (overflow:
	   hidden on .news .post only clips at the CARD's edges, not the
	   image's own boundary, so that overlap isn't caught there). Anchor
	   the origin to the bottom instead: growth still reaches up/left/
	   right same as before (fine — that's what overflow:hidden is
	   for), but the bottom edge itself never moves. */
	transform-origin: bottom;
}

.news .post:hover img {
	/* Was 1.25, then 1.08 — settled here for a subtler zoom. */
	transform: scale(1.05);
}

/* Team Members section */
.team .entry-content,
.team .entry-title {
	text-align: center;
}

.team img {
	border-radius: var(--radius-full);
	width: 150px;
	height: 150px;
	margin-top: 1.5rem;
}

/*--------------------------------------------------------------
# Article Grid Responsiveness
--------------------------------------------------------------*/
@media (max-width: 1024px) {
	.articles.grid-3,
	.articles.grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.articles.grid-3,
	.articles.grid-4 {
		grid-template-columns: 1fr;
		gap: var(--grid-gap-mobile);
	}

	/* No height/max-height override needed anymore — aspect-ratio: 1/1 on
	   .articles img (above) keeps it square at any width, including the
	   single-column mobile layout. A max-height here would clip that
	   ratio and stop it being square. */
}