/*
 * Shared component styles — constantinoiu theme (Wave 2, task 2.4).
 *
 * Cross-page pieces only: the semantic `type-*` utility classes deferred
 * from tokens.css (§3.3), the background/overlay layer, the primary nav,
 * social icons, and the shared button/badge/form-field building blocks
 * (§4 "Shared/reusable pieces"). NO page-specific layout here (homepage
 * fullscreen, masonry, per-page spacing) — those are Wave 3 page CSS
 * files (home.css, lucrari.css, detaliu.css, despre.css, contact.css).
 *
 * Mobile-first: base rules are mobile values, `@media (min-width: 768px)`
 * carries the desktop override — this is the one primary breakpoint
 * (§3.5). Every value here traces to a token in tokens.css; no raw
 * hex/px is used where a token exists.
 */

/* =======================================================================
 * 1. Semantic type utility classes (§3.3)
 * Each sets font-family + size/weight/letter-spacing(/line-height) per
 * the spec table. Base = mobile values; 768px override = desktop values.
 * Color defaults to var(--c-white) unless noted otherwise.
 * ===================================================================== */

.type-menu {
	font-family: var(--font-family);
	font-size: var(--fs-14);
	font-weight: var(--fw-regular);
	letter-spacing: var(--ls-14);
	color: var(--c-white);
}

@media (min-width: 768px) {
	.type-menu {
		font-size: var(--fs-16);
		letter-spacing: var(--ls-32);
	}
}

/* Same at both breakpoints per §3.3 — color intentionally NOT set here;
   the status modifier (.badge--disponibil / .badge--vandut, §5 below)
   supplies it so this class stays reusable for either status. */
.type-badge {
	font-family: var(--font-family);
	font-size: var(--fs-16);
	font-weight: var(--fw-regular);
	letter-spacing: var(--ls-32);
}

/* Same at both breakpoints per §3.3. */
.type-card-title {
	font-family: var(--font-family);
	font-size: var(--fs-16);
	font-weight: var(--fw-regular);
	letter-spacing: var(--ls-32);
	color: var(--c-white);
}

/* Same at both breakpoints per §3.3. */
.type-card-price {
	font-family: var(--font-family);
	font-size: var(--fs-24);
	font-weight: var(--fw-bold);
	letter-spacing: 0;
	color: var(--c-white);
}

.type-detail-title {
	font-family: var(--font-family);
	font-size: var(--fs-18);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-36);
	color: var(--c-white);
}

@media (min-width: 768px) {
	.type-detail-title {
		font-size: var(--fs-32);
		letter-spacing: var(--ls-64);
	}
}

.type-detail-price {
	font-family: var(--font-family);
	font-size: var(--fs-22);
	font-weight: var(--fw-bold);
	letter-spacing: 0;
	color: var(--c-white);
}

@media (min-width: 768px) {
	.type-detail-price {
		font-size: var(--fs-30);
	}
}

.type-detail-status {
	font-family: var(--font-family);
	font-size: var(--fs-14);
	font-weight: var(--fw-regular);
	letter-spacing: var(--ls-28);
	color: var(--c-white);
}

@media (min-width: 768px) {
	.type-detail-status {
		font-size: var(--fs-20);
		letter-spacing: var(--ls-40);
	}
}

.type-detail-body {
	font-family: var(--font-family);
	font-size: var(--fs-16);
	font-weight: var(--fw-regular);
	line-height: 1.5rem; /* 24px */
	color: var(--c-white);
}

@media (min-width: 768px) {
	.type-detail-body {
		font-size: var(--fs-24);
		line-height: 2.5rem; /* 40px */
	}
}

/* Also covers the Contact TRIMITE submit button (§3.3 note). */
.type-cta {
	font-family: var(--font-family);
	font-size: var(--fs-16);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-32);
	color: var(--c-black);
}

@media (min-width: 768px) {
	.type-cta {
		font-size: var(--fs-22);
		letter-spacing: var(--ls-44);
		color: var(--c-black);
	}
}

/* Despre/Contact intro text + input label. */
.type-body {
	font-family: var(--font-family);
	font-size: var(--fs-16);
	font-weight: var(--fw-regular);
	line-height: 1.5rem; /* 24px */
	color: var(--c-white);
}

@media (min-width: 768px) {
	.type-body {
		font-size: var(--fs-18);
		line-height: 1.875rem; /* 30px */
	}
}

/* =======================================================================
 * 2. Background / overlay layer (template-parts/background.php)
 * .site-background wraps a full-viewport fixed layer behind everything;
 * .site-background__image is the resolved bg image (a div with an
 * inline background-image); .site-background__overlay is the single
 * overlay (its rgba() background-color is set inline from resolved
 * settings — never overridden here, only positioned).
 * ===================================================================== */

/* Purely decorative — never intercept clicks meant for real UI above them
   (client feedback-01: this is what was covering the homepage carousel
   arrows). Harmless everywhere else too, since these layers already sit
   behind everything (z-index: -1) with nothing of their own to click. */
.site-background {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

.site-background__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	pointer-events: none;
}

.site-background__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	/* background-color (rgba, from resolved overlay color/opacity) is
	   set inline by template-parts/background.php. */
}

/* Page content sits above the fixed background/overlay layer. */
.site-wrapper,
.site-content {
	position: relative;
	z-index: 1;
}

/*
 * Shared bottom breathing room (client feedback-01): with no footer, the
 * last element on every inner page (cards, TRIMITE button, etc.) sits
 * flush against the bottom of the viewport. `.site-content` is the ONE
 * wrapper every inner page shares (header.php/footer.php, §1.3) — front-
 * page.php never calls get_header()/get_footer() and so never gets this
 * `.site-content` wrapper, which keeps the fullscreen (overflow: hidden)
 * homepage untouched by design. Single-sourced here instead of repeated
 * per page stylesheet.
 */
.site-content {
	padding-bottom: var(--sp-xl); /* mobile: 50px */
}

@media (min-width: 768px) {
	.site-content {
		padding-bottom: var(--sp-2xl); /* desktop: 60px */
	}
}

/* =======================================================================
 * 3. Primary nav (template-parts/nav-primary.php)
 * Base horizontal orientation only — vertical/centered variants for
 * specific pages (e.g. homepage mobile) are page modifiers added in
 * Wave 3 via the `.primary-menu--{modifier}` hook already emitted by
 * the part. List reset (no bullets/margin/padding) is already handled
 * globally for ul/ol in base.css — not repeated here.
 * ===================================================================== */

.primary-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--sp-lg);
}

.primary-menu a {
	font-family: var(--font-family);
	font-size: var(--fs-14);
	font-weight: var(--fw-regular);
	letter-spacing: var(--ls-14);
	color: var(--c-white);
	text-decoration: none;
	text-transform: uppercase;
}

@media (min-width: 768px) {
	.primary-menu a {
		font-size: var(--fs-16);
		letter-spacing: var(--ls-32);
	}
}

/* Active item — WP's current-menu-item/current_page_item classes (also
   applied to the Lucrări item on the CPT archive/single via the filter
   in nav-primary.php). */
.primary-menu .current-menu-item > a,
.primary-menu .current_page_item > a {
	color: var(--c-accent);
}

/* =======================================================================
 * 4. Social icons (template-parts/social-icons.php)
 * Flex centering holds for ANY number of icons — no fixed widths or
 * positioning that assumes a specific count.
 * ===================================================================== */

.social-icons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--sp-sm);
	list-style: none;
	padding: 0;
	margin: 0;
}

.social-icons__link {
	display: block;
	line-height: 0;
}

.social-icons__icon {
	width: var(--icon-social);
	height: auto;
	display: block;
}

/* =======================================================================
 * 5. Shared button / badge / form-field components
 * ===================================================================== */

/* Accent CTA button — used by the detail "CERE DETALII" link and the
   Contact "TRIMITE" submit. Composes .type-cta (apply both classes in
   markup) for typography; exact padding is page-specific (§4.3/§4.5), so
   only a minimal default is set here via overridable custom properties. */
.btn-accent {
	display: inline-block;
	background: var(--c-accent);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	padding: var(--btn-pad-y, var(--sp-xs)) var(--btn-pad-x, var(--sp-md));
	opacity: 1; /* client feedback-01: explicit default so hover/focus is the only dimmed state */
	transition: opacity 0.2s ease;
}

.btn-accent:hover,
.btn-accent:focus-visible {
	opacity: 0.85;
}

/* Artwork status badge — composes .type-badge (apply both classes in
   markup). Status color modifiers give the visible color; constantinoiu_
   status_label() (inc/helpers.php) already returns the matching key. */
.badge {
	background: var(--c-white);
	display: inline-block;
	padding: var(--sp-xs) var(--sp-md);
	border-radius: 0;
}

.badge--disponibil {
	color: var(--c-badge-available);
}

.badge--vandut {
	color: var(--c-badge-sold);
}

/* Contact form field base — shared appearance; width/layout is
   page-specific (contact.css, Wave 3). */
.contact-form input,
.contact-form textarea,
.form-field {
	background: transparent;
	border: var(--bd-thin) solid var(--c-white);
	border-radius: 0;
	box-shadow: none;
	color: var(--c-white);
	font-family: var(--font-family);
	padding: 0 var(--sp-sm);
}

.contact-form input {
	height: var(--input-height);
}

.contact-form textarea {
	height: calc(var(--input-height) * 2);
	padding-top: var(--sp-sm);
	padding-bottom: var(--sp-sm);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder,
.form-field::placeholder {
	color: var(--c-white);
	opacity: 1;
}

.contact-form input:focus,
.contact-form textarea:focus,
.form-field:focus {
	outline: none;
	border-color: var(--c-accent);
}

/* =======================================================================
 * 6. Branding (template-parts/branding.php)
 * The logo <a> is blockified so a `width` can be applied to it; the actual
 * width value is a per-variant concern — `.site-branding--home` (home.css,
 * Wave 3) and `.site-branding--inner` (§7 below) each set their own widths
 * per breakpoint (§3.4 fixed sizes) — this base rule never hardcodes one.
 * ===================================================================== */

.site-branding {
	display: inline-block;
}

.site-branding__logo {
	width: 100%;
}

/* =======================================================================
 * 7. Shared inner-page header (template-parts/site-header.php, §4.2–§4.5)
 * Lucrări, Detaliu, Despre Mine and Contact all repeat this EXACT
 * composition — logo (`.site-branding--inner`) centered, then the primary
 * nav centered below it — so it is styled ONCE here (DRY) instead of once
 * per page file. Only the menu→content gap differs per page; that stays in
 * each page's own stylesheet (home.css does not use this part at all —
 * the homepage builds its own fullscreen layout).
 * ===================================================================== */

.site-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: var(--sp-xl); /* mobile logo top offset, 50px */
}

.site-header .site-branding--inner {
	width: var(--logo-mobile);
}

.site-header .primary-nav {
	margin-top: var(--sp-md); /* mobile logo→menu gap, 30px */
}

@media (min-width: 768px) {
	.site-header {
		padding-top: var(--sp-2xl); /* desktop logo top offset, 60px */
	}

	.site-header .site-branding--inner {
		width: var(--logo-inner);
	}

	.site-header .primary-nav {
		margin-top: var(--sp-xl); /* desktop logo→menu gap, 50px */
	}
}