/*
Theme Name: Platforma
Description: Temă block pentru platforma de cursuri, cu sistemul grafic de pe annamariarosu.ro (verde închis, cărămiziu, DM Serif Display + Montserrat).
Version: 0.3.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: platforma
*/

/* Light only, like annamariarosu.ro. */
:root { color-scheme: light; }

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/*
 * Logo instead of the site title text, recolored with a CSS mask: the SVG's shape, filled with the
 * terracotta of annamariarosu.ro. The text stays in the link for screen readers.
 */
.site-header .wp-block-site-title a,
.site-footer .wp-block-site-title a {
	display: block;
	width: 160px;
	aspect-ratio: 202 / 74;
	overflow: hidden;
	background-color: #e0775b;
	color: transparent !important;
	font-size: 0;
	-webkit-mask: url("assets/images/logo.svg") no-repeat left center / contain;
	mask: url("assets/images/logo.svg") no-repeat left center / contain;
}
/* White in the dark green header, where it stands out more; terracotta in the footer. */
.site-header .wp-block-site-title a { background-color: #fff; }
.site-header .wp-block-site-title { line-height: 0; }
@media (max-width: 600px) {
	.site-header .wp-block-site-title a { width: 110px; }
}

/* Header: dark green bar with white, letter-spaced links, like the webinar page's top bar. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 20;
	color: #fff;
}
.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 0); }
.site-header a,
.site-header .wp-block-site-title a { color: #fff; }
.site-header .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--accent); }

.site-footer,
.site-footer a,
.site-footer .wp-block-site-title a { color: rgb(255 255 255 / 0.72); }
.site-footer .wp-block-site-title a { color: #fff; }
.site-footer a:hover { color: #fff; }
.site-footer__heading {
	margin-bottom: 0.5rem;
	color: #fff;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.site-footer__columns p { margin-top: 0.5rem; line-height: 1.9; }
.site-footer__legal { padding-top: 1.25rem; border-top: 1px solid rgb(255 255 255 / 0.12); color: rgb(255 255 255 / 0.55); }

.wp-element-button,
.wp-block-button__link { transition: color 0.15s, background-color 0.15s, border-color 0.15s; }

/* Secondary button: outlined in dark green. */
.is-style-outline .wp-block-button__link {
	border: 1.5px solid var(--wp--preset--color--contrast);
	background: transparent;
	box-shadow: none;
	color: var(--wp--preset--color--contrast);
}
.is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--contrast); color: #fff; }

/* Handwritten eyebrow above a heading ("Webinar gratuit" on the webinar page). */
.eyebrow {
	margin-bottom: -0.5rem !important;
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--script);
	font-size: var(--wp--preset--font-size--script);
	font-weight: 600;
	line-height: 1.1;
}
/* Small caps line under it ("Pentru soții și mame..."). */
.kicker {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.hero .has-large-font-size { color: var(--wp--preset--color--brand); }

/* Portrait in an arch with a name card, like the webinar page. */
.hero__portrait { position: relative; max-width: 360px; margin-inline: auto; }
.hero__portrait .wp-block-image { margin: 0; }
.hero__portrait img { display: block; width: 100%; height: auto; border-radius: 999px 999px 14px 14px; }
.hero__name {
	position: absolute;
	bottom: 1.25rem;
	left: -1rem;
	margin: 0;
	padding: 0.6rem 1rem;
	border-radius: 4px;
	background: var(--wp--preset--color--card);
	box-shadow: 0 8px 20px -8px rgb(18 51 41 / 0.35);
	color: var(--wp--preset--color--muted);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	line-height: 1.5;
	text-transform: uppercase;
}
.hero__name strong {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.25rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}
@media (max-width: 781px) {
	.hero__portrait { max-width: 240px; }
	.hero__name { left: 50%; transform: translateX(-50%); white-space: nowrap; }
	.hero .wp-block-column:first-child { text-align: center; }
	.hero .wp-block-buttons { justify-content: center; }
}

/* White cards without borders, rounded like the webinar page's cards. */
.feature {
	height: 100%;
	padding: 1.75rem 1.5rem;
	border-radius: 14px;
	background: var(--wp--preset--color--card);
}
.feature > :first-child { margin-top: 0; }
.feature__number {
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--serif);
	font-size: 2.5rem;
	line-height: 1;
}

/* Dark green section, like "Rezervă-ți locul la webinar". */
.section-dark { color: rgb(255 255 255 / 0.85); }
.section-dark :where(h1, h2, h3) { color: #fff; }

/* Course and lesson layouts: sidebar stacks under the content on small screens. */
.course-layout,
.lesson-layout {
	display: grid;
	gap: 1.5rem;
	align-items: start;
}
@media (min-width: 900px) {
	.course-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 2rem; }
	.lesson-layout { grid-template-columns: 300px minmax(0, 1fr); gap: 2rem; }
	.course-layout .sticky,
	.lesson-layout .sticky { position: sticky; top: 5rem; }
}
.course-layout > *,
.lesson-layout > * { margin-block: 0 !important; }
@media (max-width: 899px) {
	.lesson-layout > .sticky { order: 2; }
	.course-layout > .sticky { order: -1; }
}

/* Front page ends with a dark section: no light strip between it and the footer. */
.home .wp-site-blocks > :last-child { margin-block-start: 0; }