/* ===========================================================
   Bloom Flower — base layer (reset, type scale, buttons, forms, layout)
   =========================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	font-family: var(--font-body);
	font-size: var(--text-body-md-size);
	line-height: var(--text-body-md-lh);
	color: var(--color-on-surface);
	background-color: var(--color-background);
	-webkit-font-smoothing: antialiased;
}
/* Header/main/footer are direct children of body (header.php/footer.php) —
   letting main grow to fill any leftover space pins the footer to the
   bottom of the viewport on pages shorter than the screen, instead of it
   floating right after a short page's content. */
body > main { flex: 1 0 auto; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }
::selection { background: var(--color-primary-fixed); color: var(--color-on-primary-fixed); }

/* ---------- Layout primitives ---------- */
.bloom-container {
	width: 100%;
	max-width: var(--max-width);
	margin-inline: auto;
	padding-inline: var(--space-margin-desktop);
}
.bloom-container--narrow { max-width: 800px; }

@media (max-width: 768px) {
	.bloom-container { padding-inline: var(--space-margin-mobile); }
}

.bloom-section { padding-block: var(--space-section-gap); }
@media (max-width: 768px) {
	.bloom-section { padding-block: calc(var(--space-section-gap) / 2); }
}

/* ---------- Typography scale ----------
   Mobile/desktop pairs from the mockups (display-lg-mobile/display-lg)
   collapse into a single responsive class so templates never need
   breakpoint-specific classnames. */
.bloom-text-display-lg {
	font-family: var(--font-display);
	font-weight: var(--text-display-lg-mobile-weight);
	font-size: var(--text-display-lg-mobile-size);
	line-height: var(--text-display-lg-mobile-lh);
	letter-spacing: var(--text-display-lg-mobile-ls);
}
@media (min-width: 768px) {
	.bloom-text-display-lg {
		font-weight: var(--text-display-lg-weight);
		font-size: var(--text-display-lg-size);
		line-height: var(--text-display-lg-lh);
		letter-spacing: var(--text-display-lg-ls);
	}
}
.bloom-text-headline-lg {
	font-family: var(--font-display);
	font-weight: var(--text-headline-lg-weight);
	font-size: clamp(2rem, 7vw, var(--text-headline-lg-size));
	line-height: var(--text-headline-lg-lh);
}
.bloom-text-headline-md {
	font-family: var(--font-display);
	font-weight: var(--text-headline-md-weight);
	font-size: var(--text-headline-md-size);
	line-height: var(--text-headline-md-lh);
}
.bloom-text-headline-sm {
	font-family: var(--font-display);
	font-weight: var(--text-headline-sm-weight);
	font-size: var(--text-headline-sm-size);
	line-height: var(--text-headline-sm-lh);
}
.bloom-text-body-lg {
	font-family: var(--font-body);
	font-weight: var(--text-body-lg-weight);
	font-size: var(--text-body-lg-size);
	line-height: var(--text-body-lg-lh);
}
.bloom-text-body-md {
	font-family: var(--font-body);
	font-weight: var(--text-body-md-weight);
	font-size: var(--text-body-md-size);
	line-height: var(--text-body-md-lh);
}
.bloom-text-label-lg {
	font-family: var(--font-body);
	font-weight: var(--text-label-lg-weight);
	font-size: var(--text-label-lg-size);
	line-height: var(--text-label-lg-lh);
	letter-spacing: var(--text-label-lg-ls);
}
.bloom-text-label-md {
	font-family: var(--font-body);
	font-weight: var(--text-label-md-weight);
	font-size: var(--text-label-md-size);
	line-height: var(--text-label-md-lh);
}

.bloom-italic-accent { font-style: italic; font-weight: 500; color: var(--color-primary); }

/* ---------- Buttons ---------- */
.bloom-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--font-body);
	font-weight: var(--text-label-lg-weight);
	font-size: var(--text-label-lg-size);
	letter-spacing: var(--text-label-lg-ls);
	padding: 1rem 2rem;
	border-radius: var(--radius-lg);
	border: none;
	transition: background-color .3s ease, box-shadow .3s ease, transform .15s ease, opacity .2s ease, filter .2s ease;
	white-space: nowrap;
}
.bloom-btn:active { transform: scale(0.97); }
.bloom-btn--primary { background: var(--color-primary); color: var(--color-on-primary); box-shadow: var(--shadow-ambient-l1); }
.bloom-btn--primary:hover { filter: brightness(1.08); box-shadow: var(--shadow-magenta-glow); }
.bloom-btn--dark { background: var(--color-on-background); color: #fff; }
.bloom-btn--dark:hover { background: var(--color-primary); }
.bloom-btn--tertiary { background: var(--color-tertiary-fixed); color: var(--color-on-tertiary-fixed-variant); }
.bloom-btn--tertiary:hover { background: var(--color-tertiary-fixed-dim); }
.bloom-btn--outline { background: transparent; color: var(--color-primary); border: 2px solid var(--color-primary); }
.bloom-btn--outline:hover { background: var(--color-primary); color: var(--color-on-primary); }
.bloom-btn--secondary { background: var(--color-secondary); color: var(--color-on-secondary); border-radius: var(--radius-full); }
.bloom-btn--white { background: #fff; color: var(--color-primary); }
.bloom-btn--white:hover { background: var(--color-primary-fixed); }
.bloom-btn--block { width: 100%; }
.bloom-btn--sm { padding: 0.65rem 1.25rem; }

/* ---------- Forms ---------- */
.bloom-input,
.bloom-textarea {
	width: 100%;
	font-family: var(--font-body);
	font-size: var(--text-body-md-size);
	background: #fff;
	border: 1px solid var(--color-outline-variant);
	border-radius: var(--radius-lg);
	padding: 1rem 1.25rem;
	color: var(--color-on-surface);
	transition: border-color .2s ease, box-shadow .2s ease;
}
.bloom-input:focus,
.bloom-textarea:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(181, 16, 106, 0.15);
}
.bloom-textarea { resize: none; min-height: 6rem; }

/* ---------- Generic page (index.php / page.php) ---------- */
/* Top padding only — .bloom-footer's own margin-top already provides the
   gap before the footer site-wide; adding it here too was doubling the
   space (240px) on short generic pages like Contact/Zonă de Livrare. */
.bloom-generic-content { padding-top: var(--space-section-gap); }
.bloom-generic-title { margin-bottom: 1.5rem; }
.bloom-generic-body { font-size: var(--text-body-lg-size); line-height: var(--text-body-lg-lh); color: var(--color-on-surface-variant); }
.bloom-generic-body > * + * { margin-top: 1.25em; }

/* ---------- Misc utility ---------- */
.bloom-visually-hidden {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}