/*
Theme Name: Machrie Nursery
Theme URI: https://machrie-nursery.glasgow.sch.uk
Author: Edima
Description: A bespoke, modern, accessible block theme for Machrie Nursery School, Castlemilk, Glasgow. Built on the WordPress block editor (Full Site Editing) so staff can manage content without touching code.
Version: 0.3.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: machrie
*/

/* The design system lives in theme.json. This file adds interactive and decorative
   polish. See CLAUDE.md for the UI/UX standard. */

/* ---------- Prevent horizontal overflow on small screens ---------- */
html, body { overflow-x: hidden; max-width: 100%; }
img, video, table, figure, iframe { max-width: 100%; height: auto; }
.stats-panel { width: 100%; }

/* ---------- Headings never break mid-word ---------- */
h1, h2, h3, h4,
.wp-block-heading,
.wp-block-post-title {
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
	text-wrap: balance;
}

/* ---------- Accessibility: always-visible keyboard focus ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.wp-block-button__link:focus-visible,
.wp-block-navigation-item a:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ---------- Sticky header (solid: NO backdrop-filter, so the mobile overlay can escape it) ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: #ffffff;
	border-bottom: 1px solid rgba(16, 48, 44, 0.10);
	box-shadow: 0 1px 0 rgba(16, 48, 44, 0.02);
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 600px) { .admin-bar .site-header { top: 46px; } }
.council-logo img { height: 40px; width: auto; display: block; }
.wp-block-site-logo img { height: 46px; width: auto; }
.site-header .wp-block-navigation { font-weight: 600; column-gap: 1.5rem; }
.site-header .wp-block-button__link { padding: 0.55rem 1.4rem; }

/* Desktop hover dropdowns: wider, padded, shadowed, shifted slightly right */
@media (min-width: 600px) {
	.site-header .wp-block-navigation__submenu-container {
		min-width: 260px !important;
		padding: 0.5rem 0 !important;
		margin-top: 0.4rem !important;
		margin-left: 0.75rem !important;
		border-radius: 12px !important;
		border: 1px solid rgba(16, 48, 44, 0.08) !important;
		box-shadow: 0 14px 32px rgba(16, 48, 44, 0.14) !important;
		background: #ffffff !important;
		/* Keep hover/focus backgrounds inside the rounded panel. */
		overflow: hidden !important;
	}
	/* Bridge the gap between a top-level item and its dropdown. The panel is
	   offset ~10px below the link, so a pointer moving down crosses dead space,
	   loses :hover and the menu snaps shut before you reach it. The bridge only
	   exists while the item is open, so it never intercepts clicks on the page
	   underneath the header. */
	.site-header .wp-block-navigation-item.has-child { position: relative; }
	.site-header .wp-block-navigation-item.has-child:hover::after,
	.site-header .wp-block-navigation-item.has-child:focus-within::after {
		content: "";
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		height: 0.9rem;
	}
	.site-header .wp-block-navigation__submenu-container .wp-block-page-list,
	.site-header .wp-block-navigation__submenu-container ul {
		display: block !important;
		padding: 0 !important;
		margin: 0 !important;
		list-style: none !important;
	}
	.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item {
		display: block !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item > a,
	.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item > .wp-block-navigation-item__content {
		display: block !important;
		/* border-box, or width:100% plus the 1.25rem side padding makes the
		   hover background overflow the panel by 2.5rem on the right. */
		box-sizing: border-box !important;
		width: 100% !important;
		padding: 0.6rem 1.25rem !important;
		white-space: nowrap !important;
		text-align: left !important;
		color: var(--wp--preset--color--contrast) !important;
		font-weight: 500 !important;
		font-size: 0.95rem !important;
		text-decoration: none;
	}
	.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item > a:hover,
	.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item > a:focus-visible {
		background: var(--wp--preset--color--surface);
		color: var(--wp--preset--color--primary-dark) !important;
	}
}
/* Remove root block-gap so the hero meets the header cleanly.
   .page-hero is included because on interior pages the band is a direct child of
   .wp-site-blocks, and core's 24px margin-block-start shows as a white stripe
   under the sticky header. (The front page doesn't: its hero sits inside <main>.) */
.wp-site-blocks > main,
.wp-site-blocks > footer,
.wp-site-blocks > .page-hero { margin-block-start: 0 !important; }

/* ---------- Buttons ---------- */
.wp-block-button__link { transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; }
.wp-block-button__link:hover { transform: translateY(-2px); box-shadow: var(--wp--preset--shadow--card); }
.wp-block-button.is-style-outline .wp-block-button__link { border-width: 2px; }

/* ---------- Hero: solid brand colour with clean soft-light depth (no gradient, no mud) ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero > * { position: relative; z-index: 1; }
.hero::before,
.hero::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
	background: radial-gradient(circle at center, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0));
}
.hero::before { width: 620px; height: 620px; top: -240px; right: -180px; }
.hero::after  { width: 520px; height: 520px; bottom: -260px; left: -200px; }
.hero .eyebrow {
	display: block;
	width: fit-content;
	margin: 0 auto;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 700;
	font-size: 0.8rem;
	color: var(--wp--preset--color--primary-dark);
	background: var(--wp--preset--color--accent-soft);
	padding: 0.4rem 1rem;
	border-radius: 999px;
}
.eyebrow-dark {
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 700;
	font-size: 0.8rem;
	color: var(--wp--preset--color--primary);
}

/* ---------- Stats panel (clean, not overlapping) ---------- */
.stats-panel {
	max-width: 1000px;
	margin: 0 auto;
	background: #ffffff;
	border-radius: 22px;
	box-shadow: var(--wp--preset--shadow--card);
	padding: 1.5rem 1rem;
}
.stats-panel .stat-item {
	flex: 1 1 180px;
	padding: 0.75rem 1.25rem;
	border-right: 1px solid var(--wp--preset--color--surface-deep);
}
.stats-panel .stat-item:last-child { border-right: 0; }
.stat-number {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.4rem;
	line-height: 1.15;
	color: var(--wp--preset--color--primary);
	margin: 0 0 0.2rem;
	/* Keep time ranges like "8:30am–3:45pm" on one line so the stat row
	   stays visually level across all four items. */
	white-space: nowrap;
}
@media (max-width: 400px) {
	.stat-number { white-space: normal; }
}
@media (max-width: 781px) {
	.stats-panel .stat-item { flex-basis: 44%; border-right: 0; padding: 0.6rem; }
}

/* ---------- Balanced card grids (centre the last row; content-height on mobile) ----------
   Flex rather than grid: with 7 value cards a 4-column grid leaves the last row of 3
   hanging on the left. flex-wrap + justify-content:center balances the final row. */
.card-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; align-items: stretch; }
/* Kill WordPress's is-layout-flow > :not(:first-child) top margin on grid children
   — it's adding 24px to every card except the first, breaking alignment. */
.card-grid > * { flex: 0 1 calc((100% - 3 * 1.25rem) / 4); min-width: 0; margin-block-start: 0 !important; }
@media (max-width: 1024px) { .card-grid > * { flex-basis: calc((100% - 1.25rem) / 2); } }
@media (max-width: 600px) { .card-grid > * { flex-basis: 100%; } }

/* News section: more breathing room between cards and around the section */
.wp-block-query .wp-block-post-template.is-layout-grid { gap: 2rem !important; align-items: stretch; }
.wp-block-query .wp-block-post-template .wp-block-post-title { text-wrap: wrap !important; }
/* Equal-height news cards: the grid item stretches, the card fills it, so the row
   of cards shares one baseline instead of leaving a ragged bottom edge. */
.wp-block-query .wp-block-post-template.is-layout-grid > li { display: flex; }
.wp-block-query .wp-block-post-template.is-layout-grid > li > .machrie-card { flex: 1 1 auto; }

.machrie-card { display: flex; flex-direction: column; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.machrie-card:hover { transform: translateY(-6px); box-shadow: var(--wp--preset--shadow--lift) !important; }
/* Left-align card text. WordPress's is-layout-constrained forces
   margin-left/right: auto on every child, which combined with
   max-width: contentSize centres short headings. Clear all three. */
.value-card h3, .link-card h3,
.value-card p, .link-card p,
.value-card .wp-block-heading, .link-card .wp-block-heading {
	text-align: left !important;
	text-wrap: wrap !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* MACHRIE letter badges (replaces emojis) — left-aligned in the card */
.value-badge {
	width: 46px; height: 46px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700; font-size: 1.35rem; color: #ffffff;
	background: var(--wp--preset--color--primary);
	/* Override the constrained-layout auto margins so the badge sits on the left */
	margin: 0 auto 0.9rem 0 !important;
}
.value-card h3, .link-card h3 { margin: 0 0 0.4rem; }
.link-card .more-link { font-weight: 700; }

/* ---------- Closing "Get in touch" band ---------- */
/* The address is long enough to wrap, and the browser's only break opportunity
   was the hyphen in "machrie-nursery" — which reads as a broken word. The markup
   uses a non-breaking hyphen (U+2011) and this keeps the whole address on one
   line, stepping the size down on narrow screens rather than splitting it. */
.cta-contact a {
	color: inherit;
	text-underline-offset: 3px;
}
.cta-email {
	white-space: nowrap;
}
@media (max-width: 640px) {
	.cta-email { font-size: 0.95rem; }
}
@media (max-width: 380px) {
	.cta-email { font-size: 0.85rem; }
}
/* Below this the address cannot fit on one line at a legible size. Release the
   nowrap so it breaks at the <wbr> after the "@" — the non-breaking hyphen means
   that is the only break point available, so "machrie-nursery" stays intact. */
@media (max-width: 340px) {
	.cta-email { white-space: normal; font-size: 0.9rem; }
}

/* ---------- Page hero band ---------- */
.page-hero {
	background:
		radial-gradient(820px 300px at 88% -60%, rgba(245, 166, 35, 0.16), transparent),
		var(--wp--preset--color--surface);
}
.page-hero .wp-block-post-title::after,
.page-hero h1::after {
	content: "";
	display: block;
	width: 64px;
	height: 5px;
	margin-top: 1rem;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--wp--preset--color--accent), var(--wp--preset--color--coral));
}

/* ---------- Prose ---------- */
.entry-content :where(h2, h3) { margin-top: 2.4rem; }
.wp-block-image img { border-radius: 14px; }
.wp-block-post-content :where(ul, ol) { padding-left: 1.25rem; }
.wp-block-table td, .wp-block-table th { padding: 0.6rem 0.9rem; }

/* ---------- Footer (flat links, no dropdowns) ---------- */
.site-footer a { color: var(--wp--preset--color--accent-soft); text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { color: #ffffff; text-decoration: underline; }
/* Breathing room between each footer column heading and its content */
.site-footer .wp-block-heading { margin-bottom: 1rem !important; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin: 0 0 0.55rem; }
.footer-card {
	background: #ffffff;
	border-radius: 14px;
	padding: 12px 16px;
	display: inline-flex !important;
	align-items: center;
	gap: 1rem;
	width: fit-content;
	max-width: 100%;
}
.footer-card img { height: 56px; width: auto; display: block; border-radius: 0; }

/* ---------- Mobile nav: 3-bar hamburger + left-aligned overlay with hierarchy ---------- */
/* Replace the default 2-bar WP icon with three bars */
.wp-block-navigation__responsive-container-open {
	position: relative;
	width: 44px;
	height: 44px;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--wp--preset--color--contrast);
}
.wp-block-navigation__responsive-container-open svg { display: none !important; }
.wp-block-navigation__responsive-container-open::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 12px;
	transform: translateX(-50%);
	width: 24px;
	height: 2.5px;
	background: currentColor;
	border-radius: 2px;
	box-shadow: 0 8px 0 currentColor, 0 16px 0 currentColor;
}

/* Overlay: coloured background, left-aligned, tap-to-expand accordion */
.wp-block-navigation__responsive-container.has-modal-open {
	background: var(--wp--preset--color--primary-dark) !important;
	color: #ffffff !important;
	padding: 5rem 0 3rem !important;
}
/* Inset the close button so it isn't flush against the edge */
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-container-close {
	color: #ffffff !important;
	top: 1.5rem !important;
	right: 1.5rem !important;
	padding: 0.5rem !important;
}
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-container-content {
	width: 100%;
	padding: 0 1.75rem !important;
	display: block !important;
}
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.has-modal-open .wp-block-page-list {
	display: block !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	list-style: none !important;
	text-align: left !important;
}
/* Top-level items live inside the .wp-block-page-list wrapper ul, not the outer container */
.wp-block-navigation__responsive-container.has-modal-open .wp-block-page-list > .wp-block-navigation-item {
	display: grid !important;
	grid-template-columns: 1fr auto !important;
	align-items: center !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: left !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
	list-style: none !important;
}
.wp-block-navigation__responsive-container.has-modal-open .wp-block-page-list > .wp-block-navigation-item:last-child { border-bottom: 0 !important; }
.wp-block-navigation__responsive-container.has-modal-open .wp-block-page-list > .wp-block-navigation-item > a,
.wp-block-navigation__responsive-container.has-modal-open .wp-block-page-list > .wp-block-navigation-item > .wp-block-navigation-item__content {
	grid-column: 1 !important;
	justify-self: stretch !important;
	width: 100% !important;
	max-width: none !important;
	display: block !important;
	text-align: left !important;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.2rem;
	font-weight: 700;
	color: #ffffff !important;
	padding: 0.95rem 0 !important;
	margin: 0 !important;
	text-decoration: none;
}
/* Chevron toggle button (added by nav.js) — only visible inside the overlay */
.machrie-submenu-toggle { display: none; }
.wp-block-navigation__responsive-container.has-modal-open .machrie-submenu-toggle {
	grid-column: 2;
	justify-self: end;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	margin: 0;
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--accent-soft);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	border-radius: 8px;
}
.wp-block-navigation__responsive-container.has-modal-open .machrie-submenu-toggle:hover,
.wp-block-navigation__responsive-container.has-modal-open .machrie-submenu-toggle:focus-visible {
	background: rgba(255, 255, 255, 0.08);
}
.wp-block-navigation__responsive-container.has-modal-open .machrie-submenu-toggle > span {
	display: inline-block;
	transform: rotate(90deg);
	transition: transform 0.22s ease;
}
.wp-block-navigation__responsive-container.has-modal-open .machrie-open > .machrie-submenu-toggle > span {
	transform: rotate(-90deg);
}
/* Submenu: hidden by default in the overlay; revealed when parent is .machrie-open */
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__submenu-container {
	grid-column: 1 / -1;
	display: none !important;
	position: static !important;
	opacity: 1 !important;
	visibility: visible !important;
	width: 100% !important;
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
	border-left: 2px solid rgba(255, 255, 255, 0.25) !important;
	margin: 0 0 0.75rem 0.6rem !important;
	padding: 0.25rem 0 0.5rem 0.9rem !important;
	min-width: 0 !important;
	list-style: none !important;
}
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation-item.machrie-open > .wp-block-navigation__submenu-container {
	display: block !important;
}
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__submenu-container .wp-block-page-list,
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__submenu-container ul {
	display: block !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	list-style: none !important;
}
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border-bottom: 0 !important;
	text-align: left !important;
}
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__submenu-container .wp-block-navigation-item > a,
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__submenu-container .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	text-align: left !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 1rem !important;
	font-weight: 500 !important;
	color: rgba(255, 255, 255, 0.92) !important;
	padding: 0.4rem 0 !important;
	text-decoration: none;
}
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__submenu-icon { display: none !important; }

/* ---------- Skip link ---------- */
.skip-link:focus { z-index: 100001; }

/* ---------- Responsive padding ---------- */
@media (max-width: 781px) {
	.hero { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
}

/* ---------- Motion preference ---------- */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }