/*
Theme Name: Florentina
Theme URI: https://florentinaifrim.ro
Author: Studio
Description: Block theme for Florentina Ifrim — psiholog clinician, psihoterapeut și coach. RO/EN via Polylang.
Version: 1.0.1
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: florentina
*/

/* ==========================================================================
   Florentina theme — supplemental CSS
   Everything here is stuff theme.json cannot express: sticky/blur header,
   active nav pill, hover motion, focus rings, load-in animation, sticky
   columns, smooth-scroll anchor offsets, and the custom dot-list marker.
   Namespaced with `fi-` to stay out of core block class collisions.
   ========================================================================== */

:root {
	--fi-shadow-rgb: 44, 42, 36; /* = var(--ink) in decimal, canonical shadow base per TOKENS.md §7 */
	--fi-header-offset: 92px; /* sticky header clearance for anchor scrolling */
}

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
}

/* Anchor targets inside content should clear the sticky header. */
main [id] {
	scroll-margin-top: var(--fi-header-offset);
}

/* ==========================================================================
   Global block-gap leak fix (ROUND-2)
   WordPress injects a default 24px margin-block-start on non-first children
   of any element tagged `is-layout-flow` / `is-layout-constrained`, and a
   24px margin-block-start on non-first top-level children of
   `.wp-site-blocks` (header / main / footer). Every section wrapper in this
   theme already spaces itself with its own padding/gap, so this injected
   margin is pure double-spacing: it pushes `main` down under the sticky
   header, staggers grid/flex rows whose first item collapses to 0 while
   siblings keep 24px, and adds a stray 24px between otherwise-flush
   sections (hero, quote bands, card grids, CTA boxes, service sections…).

   Scope: every page-type template (`body:not(.single-post)`) — i.e.
   everywhere EXCEPT the single-post article template, where this same
   default margin is exactly what produces the correct inter-paragraph
   rhythm inside `.fi-article__body`. Do not widen this scope to
   `.single-post` without re-checking article paragraph spacing.
   ========================================================================== */

.wp-site-blocks > main {
	margin-block-start: 0;
}

body:not(.single-post) :where(.is-layout-flow, .is-layout-constrained) > * {
	margin-block-start: 0;
}

/* ==========================================================================
   Header
   ========================================================================== */

.fi-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: color-mix(in srgb, var(--wp--preset--color--bg) 88%, transparent);
	-webkit-backdrop-filter: blur(14px) saturate(1.15);
	backdrop-filter: blur(14px) saturate(1.15);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.fi-header__inner {
	max-width: 1296px;
	margin: 0 auto;
	padding: 13px 28px;
	gap: 18px;
	align-items: center;
	flex-wrap: nowrap;
}

.fi-brand {
	text-decoration: none !important;
	color: var(--wp--preset--color--ink) !important;
	display: flex;
	flex-direction: column;
	gap: 1px;
	line-height: 1.15;
	margin-right: 8px;
	flex: 0 0 auto;
}

.fi-brand__name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--ink);
	margin: 0;
}

.fi-brand__tagline {
	font-family: var(--wp--preset--font-family--body);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0;
}

/* Nav menu items: pill hover + active state */
.fi-header .wp-block-navigation-item > a,
.fi-header .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-size: 13.5px;
	font-weight: 500;
	border-radius: 999px;
	padding: 8px 11px;
	color: var(--wp--preset--color--muted);
	transition: color var(--fi-dur-fast) var(--fi-ease), background-color var(--fi-dur-fast) var(--fi-ease);
}

.fi-header .wp-block-navigation-item > a:hover {
	color: var(--wp--preset--color--ink);
}

.fi-header .wp-block-navigation-item.current-menu-item > a,
.fi-header .wp-block-navigation-item.current-menu-ancestor > a,
.fi-header .wp-block-navigation-item.current_page_item > a {
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--tint);
}

/* Nav cluster (items + language pill + CTA) sits in one horizontal row,
   tightly spaced like the prototype (item gap ~4px, not the 24px default). */
.fi-header .fi-nav.wp-block-navigation__container {
	gap: 4px;
	align-items: center;
	flex-wrap: nowrap;
}

/* Nav CTA ("Programează" / "Book a session") */
.fi-nav-cta a,
a.fi-nav-cta {
	background: var(--wp--preset--color--deep) !important;
	color: var(--wp--preset--color--button-text) !important;
	padding: 11px 20px !important;
	border-radius: 999px !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	letter-spacing: 0.01em;
	white-space: nowrap;
	text-decoration: none !important;
	transition: transform var(--fi-dur-fast) var(--fi-ease), opacity var(--fi-dur-fast) var(--fi-ease);
}

.fi-header .wp-block-navigation-item.fi-nav-cta {
	margin-left: 8px;
}

.fi-nav-cta a:hover,
a.fi-nav-cta:hover {
	transform: translateY(-1px);
	opacity: 0.92;
}

/* ==========================================================================
   Language switcher — compact RO|EN segmented pill
   The Polylang navigation-language-switcher renders two adjacent nav items
   (.lang-item-ro / .lang-item-en). We fuse them into one bordered white pill
   with the current language as a sage chip. Full-word labels are hidden and
   replaced with short RO / EN via ::after.
   ========================================================================== */

.fi-header .wp-block-navigation-item.lang-item {
	margin: 0;
	padding: 0;
	background: var(--wp--preset--color--card);
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.fi-header .wp-block-navigation-item.lang-item-ro {
	margin-left: 10px;
	border-left: 1px solid var(--wp--preset--color--line);
	border-radius: 999px 0 0 999px;
	padding-left: 3px;
}

.fi-header .wp-block-navigation-item.lang-item-en {
	margin-left: -4px; /* collapse the 4px nav gap so the two segments touch */
	border-right: 1px solid var(--wp--preset--color--line);
	border-radius: 0 999px 999px 0;
	padding-right: 3px;
}

.fi-header .wp-block-navigation-item.lang-item > a,
.fi-header .wp-block-navigation-item.lang-item > .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 42px;
	height: 29px;
	margin: 3px 0;
	padding: 0 12px;
	border-radius: 999px;
	background: transparent !important;
	color: var(--wp--preset--color--muted) !important;
	font-size: 0 !important; /* hide "Română" / "English" */
	transition: background-color var(--fi-dur-fast) var(--fi-ease), color var(--fi-dur-fast) var(--fi-ease);
}

.fi-header .wp-block-navigation-item.lang-item > a::after,
.fi-header .wp-block-navigation-item.lang-item > .wp-block-navigation-item__content::after {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1;
}

.fi-header .wp-block-navigation-item.lang-item-ro > a::after,
.fi-header .wp-block-navigation-item.lang-item-ro > .wp-block-navigation-item__content::after {
	content: "RO";
}

.fi-header .wp-block-navigation-item.lang-item-en > a::after,
.fi-header .wp-block-navigation-item.lang-item-en > .wp-block-navigation-item__content::after {
	content: "EN";
}

.fi-header .wp-block-navigation-item.lang-item.current-lang > a {
	background: var(--wp--preset--color--tint) !important;
	color: var(--wp--preset--color--ink) !important;
}

/* ==========================================================================
   Mobile navigation overlay (core/navigation "is-menu-open" panel)
   ========================================================================== */

/*
 * Root cause of the full-screen-overlay-renders-as-a-sliver bug: `.fi-header`
 * carries `backdrop-filter` for the sticky blur effect, and per spec any
 * element with a non-none `filter`/`backdrop-filter` becomes the CSS
 * containing block for its `position: fixed` descendants (same as
 * `transform` does). The overlay panel is `position: fixed; inset: 0`, so
 * with the filter active its `inset: 0` resolved against the ~88px-tall
 * header bar instead of the viewport — squashing the "full screen" menu
 * into a short opaque strip with the remaining 8 items scrolled out of
 * reach in a hidden `overflow: auto` region.
 *
 * Core adds `has-modal-open` to <html> for exactly the lifetime of the open
 * overlay, so we borrow that hook to suspend the filter only for that
 * state — the header sits fully behind the (now opaque) panel the moment
 * it opens, so nothing is visibly lost.
 */
html.has-modal-open .fi-header {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* Explicit full-viewport sizing (defensive — with the containing-block fix
   above, core's inset:0 already stretches it, but this pins it directly). */
.wp-block-navigation__responsive-container.is-menu-open {
	height: 100vh;
	height: 100dvh;
}

/* Opaque panel background from the palette instead of core's plain white,
   so it reads as part of the site rather than a generic browser overlay. */
.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	background-color: var(--wp--preset--color--bg);
}

/* Comfortable, on-brand inset — 28px matches the site's fixed horizontal
   gutter (see TOKENS.md §5); vertical uses the same clamp scale as other
   sections. Top stays modest since core already reserves clearance below
   the close button via the inner content wrapper. */
.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	padding: 20px 28px clamp(32px, 8vw, 56px);
}

.fi-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 6px;
}

.fi-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > a,
.fi-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-size: 17px;
	padding: 13px 18px;
	border-radius: 12px;
}

/* The horizontal RO|EN segmented pill can't fuse in the vertical mobile list,
   so inside the open overlay we unwind it back to two plain menu links. */
.is-menu-open .fi-header .wp-block-navigation-item.lang-item,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.lang-item {
	background: transparent;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.lang-item > a {
	display: block;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 13px 18px;
	border-radius: 12px;
	background: transparent !important;
	color: var(--wp--preset--color--muted) !important;
	font-size: 0 !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.lang-item > a::after {
	font-size: 17px;
	letter-spacing: 0.02em;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.lang-item.current-lang > a::after {
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.fi-footer {
	background: var(--wp--preset--color--surface);
	border-top: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--ink);
}

.fi-footer__inner {
	max-width: 1296px;
	margin: 0 auto;
	padding: 64px 28px 36px;
	gap: 48px;
	/* Core's default flex layout centers items vertically (align-items:center);
	   the design top-aligns NAVIGARE/CONTACT so both column headings share the
	   same y regardless of column height. */
	align-items: flex-start;
}

.fi-footer-col {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.fi-footer-col--brand {
	flex: 2 1 300px;
	gap: 12px;
}

.fi-footer-col--nav {
	flex: 1 1 160px;
}

.fi-footer-col--contact {
	flex: 1 1 220px;
}

.fi-footer-link-wrap {
	margin: 0;
	line-height: 19px; /* 19px box + 10px column gap = 29px row step (design) */
}

.fi-footer-location {
	font-size: 14px;
	color: var(--wp--preset--color--muted);
	margin: 0;
}

.fi-footer-brand {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 26px;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	margin: 0;
}

.fi-footer-bio {
	font-size: 14px;
	line-height: 1.7;
	color: var(--wp--preset--color--muted);
	max-width: 34ch;
	margin: 0;
}

.fi-footer-badge {
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0;
}

.fi-footer-col-title {
	font-size: 11.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0 0 4px;
}

.fi-footer-link {
	font-size: 14px;
	text-decoration: none !important;
	color: var(--wp--preset--color--ink) !important;
	opacity: 0.82;
	transition: opacity var(--fi-dur-fast) var(--fi-ease);
}

.fi-footer-link:hover {
	opacity: 1;
}

.fi-footer-bottom {
	max-width: 1296px;
	margin: 0 auto;
	padding: 20px 28px 28px;
	border-top: 1px solid var(--wp--preset--color--line);
	gap: 14px;
	align-items: center;
}

.fi-footer-copy {
	font-size: 12.5px;
	color: var(--wp--preset--color--muted);
	margin: 0;
}

.fi-footer-legal {
	gap: 18px;
}

.fi-footer-legal a {
	font-size: 12.5px;
	text-decoration: none !important;
	color: var(--wp--preset--color--muted) !important;
	transition: color var(--fi-dur-fast) var(--fi-ease);
}

.fi-footer-legal a:hover {
	color: var(--wp--preset--color--ink) !important;
}

/* ==========================================================================
   Cards — generic hover lift utility (attach via "Additional CSS class")
   ========================================================================== */

.fi-card {
	transition: transform var(--fi-dur-fast) var(--fi-ease);
}

.fi-card:hover {
	/* Owner annotation D: lift only, no box-shadow on hover (was 0 18px 48px). */
	transform: translateY(-4px);
}

/* ==========================================================================
   Buttons — hover motion (colors/radius/padding come from theme.json)
   ========================================================================== */

.wp-block-button__link {
	transition: transform var(--fi-dur-fast) var(--fi-ease), opacity var(--fi-dur-fast) var(--fi-ease);
	/* Geometry fix (ROUND-2): the inherited body line-height (1.7) inflates
	   every button ~6px taller than the design and collapses the gap between
	   label and arrow icon (the arrow is a sibling <span>, not part of the
	   label text). inline-flex + normal line-height renders buttons at the
	   font's natural line box (matches the design's measured ~47px @14.5px
	   / ~40px @13.5px / ~51px @15px across button sizes) and restores the
	   10px label→arrow gap as a flex gap. Per-page selectors with higher
	   specificity (e.g. .fi-svc-cta-btn, .fi-filter-pills) still win where
	   a bespoke line-height/size is needed. */
	display: inline-flex;
	align-items: center;
	gap: 10px;
	line-height: normal;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
	transform: translateY(-2px);
	opacity: 0.93;
}

a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--deep);
	outline-offset: 2px;
}

/* ==========================================================================
   Forms — focus rings (Contact Form 7 fields land on plain inputs)
   ========================================================================== */

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
textarea,
select {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 11px;
	background: var(--wp--preset--color--card);
	transition: border-color var(--fi-dur-fast) var(--fi-ease), box-shadow var(--fi-dur-fast) var(--fi-ease);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--wp--preset--color--deep);
	box-shadow: 0 0 0 3px var(--wp--preset--color--tint);
}

/* ==========================================================================
   Hero fade-in (plays once on paint, no scroll trigger)

   .fi-fade-up is the Acasă hero utility. The page-hero wrappers below reuse the
   SAME paint-time animation so every top-of-page header fades up identically
   (Servicii/Contact/Resurse use a header wrapper class; Despre animates its hero
   columns; Colaboratori has no wrapper class so its label/title/intro animate as
   a set). Any selector added here MUST also be added to the reduced-motion guard
   below — otherwise those elements stay permanently at opacity:0 for users who
   prefer reduced motion.
   ========================================================================== */

.fi-fade-up {
	opacity: 0;
	animation: fiUp var(--fi-dur-fast) var(--fi-ease) forwards;
}

/* Page heroes reuse the SAME keyframe but with the Acasă hero's slower, graceful
   0.8s settle (matching .fi-fade-up-delay) rather than the quick 240ms text tier,
   so every page's entrance feels the same pace as the homepage. */
.fi-svc-header,
.fi-contact-header,
.fi-resurse-hero,
.fi-despre-hero-columns,
.fi-collab-label,
.fi-collab-title,
.fi-collab-intro {
	opacity: 0;
	animation: fiUp 0.8s var(--fi-ease) both;
}

@keyframes fiUp {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.fi-fade-up,
	.fi-svc-header,
	.fi-contact-header,
	.fi-resurse-hero,
	.fi-despre-hero-columns,
	.fi-collab-label,
	.fi-collab-title,
	.fi-collab-intro {
		animation: none;
		opacity: 1;
	}
}

/* ==========================================================================
   Sticky column block style (Servicii layout, registered on core/group)
   ========================================================================== */

.is-style-sticky {
	position: sticky;
	top: 100px;
}

/* ==========================================================================
   Custom bullet-dot list (Despre credentials, etc.)
   ========================================================================== */

.fi-dot-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.fi-dot-list li {
	position: relative;
	padding-left: 22px;
}

.fi-dot-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}

/* ==========================================================================
   Small utilities
   ========================================================================== */

.fi-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-size: 12px;
	font-weight: 600;
	color: var(--wp--preset--color--deep);
}

/* 404 template */
.fi-404 {
	text-align: center;
	padding: clamp(64px, 10vw, 140px) 28px;
}

.fi-404__code {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(64px, 10vw, 120px);
	font-weight: 500;
	color: var(--wp--preset--color--deep);
	line-height: 1;
	margin: 0;
}

/* Guard: full-bleed decorations (e.g. .fi-svc-section::before) may span 100vw;
   clip instead of scroll so they can never introduce a horizontal scrollbar. */
html {
	overflow-x: clip;
}