/*
Theme Name:   Nestling
Theme URI:    https://nestlinglms.com
Description:  Required companion theme for Nestling LMS. Styling only — no data, no logic
              (BRD §7 hard rule). Bundles the Nestling LMS core plugin on activation.
Author:       Nestling
Version:      0.1.0-dev
Requires at least: 6.4
Requires PHP: 8.1
Text Domain:  nestling-lms
*/

/* ---------------------------------------------------------------------------
 * Design tokens — PROVISIONAL (design/00 status log: palette review pending,
 * owner running an external check). Do not treat these hex values as final;
 * everything downstream reads the custom properties below, not literals, so
 * swapping the palette later is a one-file change.
 *
 * This is the DEFAULT skin only. Per the BRD, each operator overrides these
 * through the setup wizard (logo, primary/secondary/accent, font, radius) —
 * these tokens are the fallback, not the product's final look for any given
 * deployed site.
 * ------------------------------------------------------------------------ */

:root {
	--nestling-cream:       #FBF6EE;
	--nestling-cream-2:     #F3EAD9;
	--nestling-ink:         #26313C;
	--nestling-ink-soft:    #5B6B78;
	--nestling-terracotta:  #D9683F;
	--nestling-terracotta-ink: #A9401F;
	--nestling-sage:        #5C8368;
	--nestling-sage-ink:    #3E5C48;
	--nestling-honey:       #C98A2A;
	--nestling-line:        #E7DCC8;
	--nestling-card:        #FFFFFF;

	--nestling-radius-sm: 7px;
	--nestling-radius-md: 12px;
	--nestling-radius-lg: 18px;

	--nestling-font-heading: 'Poppins', system-ui, sans-serif;
	--nestling-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Layout tokens — same "operator overrides land here at runtime" mechanism as the palette
	 * above, driven by the Customizer's "Spacing & Buttons" section. Defaults match what this
	 * file hardcoded before these existed, so a fresh install renders identically. */
	--nestling-container-width: 704px;
	--nestling-space-header: 1.25rem 2rem;
	--nestling-space-main: 2.5rem 1.5rem;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-nestling-theme="light"]) {
		--nestling-cream:       #1B2027;
		--nestling-cream-2:     #232A32;
		--nestling-ink:         #F1EDE3;
		--nestling-ink-soft:    #B7C0C6;
		--nestling-terracotta:  #E98A63;
		--nestling-terracotta-ink: #F3B79B;
		--nestling-sage:        #86AE93;
		--nestling-sage-ink:    #AFCDB8;
		--nestling-honey:       #E3B268;
		--nestling-line:        #37414B;
		--nestling-card:        #232A32;
	}
}

:root[data-nestling-theme="dark"] {
	--nestling-cream:       #1B2027;
	--nestling-cream-2:     #232A32;
	--nestling-ink:         #F1EDE3;
	--nestling-ink-soft:    #B7C0C6;
	--nestling-terracotta:  #E98A63;
	--nestling-terracotta-ink: #F3B79B;
	--nestling-sage:        #86AE93;
	--nestling-sage-ink:    #AFCDB8;
	--nestling-honey:       #E3B268;
	--nestling-line:        #37414B;
	--nestling-card:        #232A32;
}

/* Operator overrides land here at runtime as additional custom properties on :root,
 * written by the branding step of the setup wizard (design/15 §1 step 3) — this file
 * only ever supplies the fallback values above. */

body {
	background: var(--nestling-cream);
	color: var(--nestling-ink);
	font-family: var(--nestling-font-body);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--nestling-font-heading);
}

.nestling-site-header,
.nestling-site-footer {
	padding: var(--nestling-space-header);
	border-bottom: 1px solid var(--nestling-line);
}

.nestling-site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.nestling-site-branding .custom-logo {
	display: block;
	height: auto;
}

.nestling-site-footer {
	border-top: 1px solid var(--nestling-line);
	border-bottom: none;
	color: var(--nestling-ink-soft);
	font-size: 0.875rem;
}

.nestling-site-title {
	font-family: var(--nestling-font-heading);
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--nestling-ink);
	text-decoration: none;
}

.nestling-site-main {
	max-width: var(--nestling-container-width, 44rem);
	margin: 0 auto;
	padding: var(--nestling-space-main);
}

/* ---------------------------------------------------------------------------
 * Navbar — the primary menu (theme/inc/customizer/navbar.php's
 * nestling_render_primary_nav()), rendered only once an operator assigns a menu to the
 * `primary` location.
 * ------------------------------------------------------------------------ */

.nestling-nav-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nestling-nav-menu a {
	color: var(--nestling-ink);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9rem;
}

.nestling-nav-menu a:hover,
.nestling-nav-menu a:focus {
	color: var(--nestling-terracotta);
}

/* ---------------------------------------------------------------------------
 * Footer — widget columns, footer nav, and social links (theme/inc/customizer/footer.php's
 * render helpers), each rendered only when the operator has actually populated them.
 * ------------------------------------------------------------------------ */

.nestling-footer-widgets {
	display: grid;
	grid-template-columns: repeat(var(--nestling-footer-columns, 2), 1fr);
	gap: 2rem;
	max-width: var(--nestling-container-width, 44rem);
	margin: 0 auto;
	padding: var(--nestling-space-main);
	padding-bottom: 0;
}

.nestling-footer-widget-title {
	font-family: var(--nestling-font-heading);
	font-size: 0.95rem;
	margin: 0 0 0.75rem;
	color: var(--nestling-ink);
}

.nestling-footer-nav-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin: 0 0 0.75rem;
	padding: 0;
	list-style: none;
}

.nestling-footer-nav-menu a {
	color: var(--nestling-ink-soft);
	text-decoration: none;
	font-size: 0.85rem;
}

.nestling-footer-nav-menu a:hover,
.nestling-footer-nav-menu a:focus {
	color: var(--nestling-terracotta);
}

.nestling-footer-bottom {
	max-width: var(--nestling-container-width, 44rem);
	margin: 0 auto;
	padding: var(--nestling-space-main);
	padding-top: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.nestling-social-links {
	display: flex;
	gap: 0.9rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nestling-social-links a {
	color: var(--nestling-ink-soft);
	display: inline-flex;
}

.nestling-social-links a:hover,
.nestling-social-links a:focus {
	color: var(--nestling-terracotta);
}

.nestling-class-meta {
	display: flex;
	gap: 0.6rem;
	align-items: center;
	flex-wrap: wrap; /* a class can carry five facet tags plus ages plus price — one line is no longer a safe assumption */
	margin: 0.5rem 0 1.5rem;
}

.nestling-tag,
.nestling-price {
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 600;
	padding: 0.3rem 0.7rem;
	border-radius: var(--nestling-radius-sm);
	background: var(--nestling-cream-2);
	color: var(--nestling-ink-soft);
}

.nestling-price {
	background: var(--nestling-terracotta);
	color: #fff;
}

.nestling-tag--pending {
	background: var(--nestling-cream-2);
	color: var(--nestling-honey);
}

.nestling-tag--subject {
	background: var(--nestling-sage);
	color: #fff;
	text-decoration: none;
}

/*
 * age band / language / format / level. Outlined rather than filled on purpose: subject is the
 * one facet a parent browses BY, and five equally-loud solid tags on a card would flatten that
 * distinction into noise. Border + line token, so it follows an operator's palette override
 * exactly like everything else here.
 */
.nestling-tag--facet {
	background: transparent;
	border: 1px solid var(--nestling-line);
	color: var(--nestling-ink-soft);
	text-decoration: none;
}

.nestling-class-body {
	line-height: 1.7;
	color: var(--nestling-ink);
}

.nestling-sections {
	width: 100%;
	border-collapse: collapse;
	margin-top: 1rem;
}

.nestling-sections th {
	text-align: left;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--nestling-ink-soft);
	padding: 0.5rem 0.6rem;
	border-bottom: 1px solid var(--nestling-line);
}

.nestling-sections td {
	padding: 0.75rem 0.6rem;
	border-bottom: 1px solid var(--nestling-line);
	vertical-align: middle;
}

/* Plain links with no component class of their own — a teacher-name link in the sections
 * table, and any link an operator writes into a class's description content — otherwise fell
 * back to the browser's stock blue/underline, disconnected from the rest of the page.
 * `:not(.nestling-price)` excludes the "Book this section" pill in the same table: without it,
 * this rule's higher specificity (a class + descendant type selector beats .nestling-price's
 * own bare class selector) silently overrode that pill's white text to terracotta-on-terracotta
 * — invisible text on an identically-colored background (found live, from a screenshot). */
.nestling-sections a:not(.nestling-price),
.nestling-class-body a {
	color: var(--nestling-terracotta);
}

.nestling-sections a:not(.nestling-price):hover,
.nestling-sections a:not(.nestling-price):focus,
.nestling-class-body a:hover,
.nestling-class-body a:focus {
	color: var(--nestling-terracotta-ink);
}

.nestling-search a {
	color: var(--nestling-ink-soft);
	font-size: 0.85rem;
}

.nestling-search a:hover,
.nestling-search a:focus {
	color: var(--nestling-terracotta);
}

a.nestling-price {
	text-decoration: none;
}

.nestling-home-title {
	margin-bottom: 0.25rem;
}

.nestling-home-tagline {
	color: var(--nestling-ink-soft);
	margin-top: 0;
	margin-bottom: 2rem;
}

.nestling-reviews {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-top: 1rem;
}

.nestling-review {
	background: var(--nestling-card);
	border: 1px solid var(--nestling-line);
	border-radius: var(--nestling-radius-md);
	padding: 0.9rem 1.1rem;
}

.nestling-review-stars {
	color: var(--nestling-accent, #b5791e);
	letter-spacing: 0.1em;
	margin-bottom: 0.3rem;
}

/*
 * WordPress's own convention for a label that exists for assistive tech only. The theme was
 * already emitting this class (single-nestling_class.php's waitlist learner label) without ever
 * defining it, so that label has been rendering as visible text; the five facet dropdowns added
 * here need it to actually work. Standard WP core definition — clipped, not display:none, so a
 * screen reader still announces it.
 */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.nestling-search {
	display: flex;
	gap: 0.6rem;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 1.75rem;
}

.nestling-search input[type="text"] {
	flex: 1 1 240px;
}

.nestling-search input[type="number"] {
	width: 80px;
}

.nestling-search input,
.nestling-search select {
	padding: 0.5rem 0.7rem;
	border: 1px solid var(--nestling-line);
	border-radius: var(--nestling-radius-sm, 6px);
	background: var(--nestling-card);
	color: var(--nestling-ink);
}

/* Five facet dropdowns now, not one — without a cap the longest term name stretches its select
   wide enough to push the search button onto its own row. */
.nestling-search select {
	max-width: 11rem;
}

.nestling-class-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1.25rem;
}

.nestling-class-card {
	display: block;
	background: var(--nestling-card);
	border: 1px solid var(--nestling-line);
	border-radius: var(--nestling-radius-md);
	padding: 1.1rem 1.2rem;
	text-decoration: none;
	color: var(--nestling-ink);
}

/* Pulled out to the card's own edges (negative margin matching the card's padding) so the
 * thumbnail reads as a full-bleed header image, not just another padded block of content. */
.nestling-class-card-thumbnail {
	margin: -1.1rem -1.2rem 0.9rem;
	border-radius: var(--nestling-radius-md) var(--nestling-radius-md) 0 0;
	overflow: hidden;
}

.nestling-class-card-thumbnail img {
	display: block;
	width: 100%;
	height: 160px;
	object-fit: cover;
}

.nestling-class-thumbnail {
	margin: 0 0 1.25rem;
	border-radius: var(--nestling-radius-lg);
	overflow: hidden;
}

.nestling-class-thumbnail img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 360px;
	object-fit: cover;
}

.nestling-class-card h2 {
	font-size: 1.1rem;
	margin: 0 0 0.5rem;
}

.nestling-class-card .nestling-class-meta {
	display: flex;
	gap: 0.4rem;
	margin: 0 0 0.5rem;
}

.nestling-class-teacher {
	color: var(--nestling-ink-soft);
	font-size: 0.85rem;
	margin: 0 0 0.9rem;
}

.nestling-class-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.4rem;
}

/* ---------------------------------------------------------------------------
 * Responsive — there was no screen-size breakpoint anywhere in this file before
 * this block (only the prefers-color-scheme one above). The one genuinely
 * broken thing on a phone: .nestling-sections is a plain 4-column table
 * (Teacher/When/Seats/Book) that has no room to breathe under ~480px. Fixed
 * with a pure-CSS scrolling-table technique — display:block + overflow-x on
 * the <table> itself — specifically so it needs no template markup change
 * (single-nestling_class.php is mid-edit elsewhere right now).
 * ------------------------------------------------------------------------ */

@media (max-width: 640px) {
	.nestling-site-header,
	.nestling-site-footer {
		padding: 1rem 1.25rem;
	}

	.nestling-site-main {
		padding: 1.75rem 1rem;
	}

	.nestling-footer-widgets {
		grid-template-columns: 1fr;
		padding: 1.75rem 1rem;
		padding-bottom: 0;
	}

	.nestling-footer-bottom {
		padding: 1.75rem 1rem;
		padding-top: 1rem;
	}

	.nestling-class-grid {
		grid-template-columns: 1fr;
	}

	.nestling-search input[type="text"] {
		flex-basis: 100%;
	}

	.nestling-sections {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		border-bottom: 1px solid var(--nestling-line); /* a visual edge while scrolled, so the cut-off content reads as "more this way" rather than a layout glitch */
		/* Otherwise a stock OS scrollbar — grey on grey in dark mode, unrelated to the palette
		 * in light mode. `scrollbar-color` covers Firefox; the `::-webkit-scrollbar-*`
		 * pseudo-elements cover Chrome/Safari/Edge (no standard property for those yet). */
		scrollbar-color: var(--nestling-line) transparent;
		scrollbar-width: thin;
	}

	.nestling-sections::-webkit-scrollbar {
		height: 8px;
	}

	.nestling-sections::-webkit-scrollbar-track {
		background: transparent;
	}

	.nestling-sections::-webkit-scrollbar-thumb {
		background-color: var(--nestling-line);
		border-radius: var(--nestling-radius-sm);
	}

	.nestling-sections::-webkit-scrollbar-thumb:hover {
		background-color: var(--nestling-ink-soft);
	}

	.nestling-sections th,
	.nestling-sections td {
		white-space: nowrap;
	}
}

@media (max-width: 400px) {
	.nestling-site-title {
		font-size: 1rem;
	}

	.nestling-home-title {
		font-size: 1.4rem;
	}
}