/*
Theme Name: AVRO Academy
Theme URI: https://www.avroacademy.com
Author: TDM Insights
Author URI: https://tdminsights.com
Description: Purpose-built block theme for AVRO Academy, a specialized independent high school in midtown Toronto. Content-editable, no page-builder framework, no third-party subscription. Brand green and gold with Fraunces and Figtree.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: avro-academy
*/

/*
 * Block themes take their styling from theme.json. This file holds only the
 * few rules that theme.json cannot express: sticky header behaviour, the
 * staff monogram fallback, focus visibility, and small responsive touches.
 */

/* Accessible focus ring in brand green, sitewide. */
:where(a, button, input, select, textarea, .wp-block-button__link):focus-visible {
	outline: 3px solid var(--wp--preset--color--avro-green);
	outline-offset: 2px;
}

/* Sticky header (no CLS: it stays in normal flow and reserves its own space,
   unlike a fixed header that needs the content JS-offset after paint).
   IMPORTANT: the sticky must sit on the block template-part WRAPPER
   (<header class="wp-block-template-part">), whose parent is the full-height
   .wp-site-blocks. Making the inner .avro-header sticky fails because its parent
   (the wrapper) is only as tall as the header, leaving no travel room. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 1000;
}
.avro-header {
	width: 100%;
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--avro-line);
}
/* Sit below the WordPress admin bar when logged in (desktop bar is fixed). */
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 32px); }
@media screen and (max-width: 782px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 0; }
}

/* Header dropdown submenus: a clean white panel. */
.avro-header .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--avro-line);
	border-radius: 12px;
	box-shadow: 0 14px 34px rgba(20, 20, 20, 0.10);
	padding: 0.4rem;
	min-width: 232px;
	margin-top: 0.5rem;
}
/* Transparent bridge over the gap so the dropdown does not close when the
   cursor travels from the menu item into the panel. */
.avro-header .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	top: -0.65rem;
	left: 0;
	right: 0;
	height: 0.65rem;
	background: transparent;
}
.avro-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.5rem 0.75rem;
	border-radius: 8px;
	display: block;
	white-space: nowrap;
}
.avro-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--avro-green-tint);
	color: var(--wp--preset--color--avro-green-dark);
}
.avro-header .wp-block-navigation-item .wp-block-navigation__submenu-icon { padding-left: 0.25rem; }

/* Grouped Programs dropdown: non-clickable section labels with dividers. */
.avro-header .avro-programs-menu .wp-block-navigation__submenu-container { min-width: 254px; }
.avro-header .wp-block-navigation__submenu-container .avro-nav-heading {
	border-top: 1px solid var(--wp--preset--color--avro-line);
	margin-top: 0.3rem;
	padding-top: 0.15rem;
}
.avro-header .wp-block-navigation__submenu-container .avro-nav-heading > .wp-block-navigation-item__content,
.avro-header .wp-block-navigation__submenu-container .avro-nav-heading > .wp-block-navigation-item__content:hover {
	pointer-events: none;
	cursor: default;
	background: transparent;
	text-transform: uppercase;
	font-size: 0.68rem;
	letter-spacing: 0.09em;
	font-weight: 600;
	color: var(--wp--preset--color--avro-muted);
	padding: 0.5rem 0.75rem 0.2rem;
}

/* Plain group divider: a thin line above the item that starts a new group,
   without turning it into a label (unlike avro-nav-heading). Used to break up
   the longer Courses dropdown. Renders in the mobile overlay too. */
.avro-header .wp-block-navigation__submenu-container .avro-nav-groupstart {
	border-top: 1px solid var(--wp--preset--color--avro-line);
	margin-top: 0.35rem;
	padding-top: 0.35rem;
}

/* Staff monogram: green initials tile used when no headshot exists. */
.avro-monogram {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	width: 100%;
	border-radius: 16px;
	background: var(--wp--preset--color--avro-green-tint);
	color: var(--wp--preset--color--avro-green-dark);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(2rem, 6vw, 3rem);
	letter-spacing: 0.02em;
}

/* Eyebrow label above headings. */
.avro-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	/* avro-green (#458235) is 4.27:1 on white / 3.66:1 on the green tint, both
	   below WCAG AA. The darker green clears AA on both. */
	color: var(--wp--preset--color--avro-green-dark);
}

/* WCAG AA: avro-green as TEXT on a light background is 4.27:1 (fails normal
   text). Any element coloured with the green text preset (e.g. the header's
   outline button label) is nudged to the darker green, which passes at 5.9:1.
   Green backgrounds are unaffected. */
.has-avro-green-color {
	color: var(--wp--preset--color--avro-green-dark) !important;
}

/* Fee table: readable rows, brand hairlines. */
.avro-fee-table table { width: 100%; min-width: 480px; border-collapse: collapse; }
.avro-fee-table th,
.avro-fee-table td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--wp--preset--color--avro-line); text-align: left; vertical-align: top; }
.avro-fee-table thead th { background: var(--wp--preset--color--avro-green-tint); color: var(--wp--preset--color--avro-green-dark); }
/* Numeric columns read cleaner right-aligned and unbroken. */
.avro-fee-table td + td, .avro-fee-table th + th { text-align: right; white-space: nowrap; }

/* Schedule tables: same brand hairlines as the fee table, but left-aligned
   and wrapping (these columns hold dates and descriptions, not figures). */
.avro-schedule-table table { width: 100%; border-collapse: collapse; }
.avro-schedule-table th,
.avro-schedule-table td { padding: 0.8rem 1rem; border-bottom: 1px solid var(--wp--preset--color--avro-line); text-align: left; vertical-align: top; }
.avro-schedule-table thead th { background: var(--wp--preset--color--avro-green-tint); color: var(--wp--preset--color--avro-green-dark); }
.avro-schedule-table td:first-child { font-weight: 600; white-space: nowrap; }

/* Program and difference cards: gentle lift, no shadow overload. */
.avro-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--avro-line);
	border-radius: 16px;
	height: 100%;
}

/* Homepage: Ploy-style layout polish. */
.avro-round-img img { border-radius: 20px; display: block; width: 100%; height: 100%; object-fit: cover; }

/* Home rotating hero: crossfading slideshow occupying the round-image slot. */
.avro-hero-slideshow { position: relative; aspect-ratio: 3 / 2; border-radius: 20px; overflow: hidden; }
.avro-hero-slideshow img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; }
.avro-hero-slideshow img.is-active { opacity: 1; }
.avro-card { transition: transform 0.16s ease, box-shadow 0.16s ease; }
.avro-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(20, 20, 20, 0.07); }
.avro-card a { text-decoration: none; }
.avro-card .avro-card-link { color: var(--wp--preset--color--avro-green); font-weight: 500; }
.avro-card:hover .avro-card-link { color: var(--wp--preset--color--avro-green-dark); }
.avro-badge img { max-width: 128px; height: auto; }
/* Big display headings track a touch tighter and lighter, the Ploy look. */
.avro-hero-title { line-height: 1.04; }

/* Deliberate, balanced line wrapping on headings, the way Ploy breaks lines. */
h1.wp-block-heading, h2.wp-block-heading { text-wrap: balance; }
.avro-hero-title { text-wrap: balance; }

/* Green line icons on program cards and difference points. */
.avro-icon svg { width: 30px; height: 30px; stroke: var(--wp--preset--color--avro-green); stroke-width: 1.75; fill: none; display: block; }
.avro-icon { margin-bottom: 0.5rem; }

/* Feature bar under the hero: four bordered cells. */
.avro-featurebar { border: 1px solid var(--wp--preset--color--avro-line); border-radius: 16px; overflow: hidden; }
.avro-featurebar > .wp-block-column { padding: 1.3rem 1.4rem !important; border-left: 1px solid var(--wp--preset--color--avro-line); text-align: center; font-weight: 500; margin: 0; }
.avro-featurebar > .wp-block-column:first-child { border-left: none; }
@media (max-width: 781px) {
	.avro-featurebar > .wp-block-column { border-left: none; border-top: 1px solid var(--wp--preset--color--avro-line); }
	.avro-featurebar > .wp-block-column:first-child { border-top: none; }
}

/* Rounded green CTA card, contained (not full bleed). */
.avro-cta-card { border-radius: 36px; }
/* Deliberate, balanced wrapping across every CTA box and centered section intro
   (no orphan words, evenly weighted lines). Centered text is where AVRO's CTAs,
   band callouts, and section intros live, so scope the balance there. */
.avro-cta-card h2,
.avro-cta-card p,
:where(h1, h2, h3, h4).has-text-align-center,
p.has-text-align-center { text-wrap: balance; }

/* Rounded photos, a touch larger radius to match Ploy. */
.avro-round-img img { border-radius: 24px; }

/* Our Kids badge overlapping the hero image corner. */
.avro-badge-float { position: relative; margin-top: -3.5rem; margin-left: 0.5rem; z-index: 2; display: inline-block; background: #fff; border-radius: 12px; padding: 0.5rem 0.75rem; box-shadow: 0 8px 24px rgba(20,20,20,0.10); }
.avro-badge-float img { max-width: 120px; height: auto; display: block; }

/* Testimonial quote on the yellow band. */
.avro-quote { font-family: var(--wp--preset--font-family--serif); line-height: 1.28; }

/* Dark green footer. */
.avro-footer-dark { color: #e6ede0; }
.avro-footer-dark a { color: #e6ede0; text-decoration: none; }
.avro-footer-dark a:hover { color: #ffffff; text-decoration: underline; }
.avro-footer-dark .avro-foot-head { color: var(--wp--preset--color--avro-yellow); text-transform: uppercase; letter-spacing: 0.09em; font-size: 0.8rem; font-weight: 600; }
.avro-footer-dark .wp-block-list { list-style: none; margin: 0; padding: 0; }
.avro-footer-dark .wp-block-list li { margin: 0 0 0.55rem; }
.avro-social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.25); }
.avro-social svg { width: 18px; height: 18px; fill: #e6ede0; }

/* Full-bleed sections sit flush so coloured bands blend edge to edge
   (no white gap between, e.g. green-tint into yellow). */
main .wp-block-group.alignfull { margin-top: 0; margin-bottom: 0; }

/* Compact header: smaller CTA buttons for a tighter menu bar. */
.avro-header .wp-block-button__link { padding: 0.6rem 1.2rem; font-size: 0.92rem; }

/* Team headshots: uniform portrait tiles, faces favoured. */
.avro-team-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; border-radius: 14px; display: block; }

/* Circular avatar for inline bio cards (e.g. About page team). */
.avro-avatar img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; object-position: center top; display: block; }

/* Blog cards: image on top, tidy body, gentle lift. */
.avro-blog-card { border: 1px solid var(--wp--preset--color--avro-line); border-radius: 16px; overflow: hidden; height: 100%; background: var(--wp--preset--color--base); transition: transform 0.16s ease, box-shadow 0.16s ease; }
.avro-blog-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(20,20,20,0.07); }
.avro-blog-card .wp-block-post-featured-image { margin: 0; }
.avro-blog-card .wp-block-post-featured-image img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.avro-blog-card .wp-block-post-featured-image a { display: block; line-height: 0; }
.avro-blog-body { padding: 1.2rem 1.35rem 1.5rem; }
.avro-blog-card a { text-decoration: none; }
/* Featured (lead) blog post: a horizontal card with the image filling its half. */
.avro-blog-feature { border: 1px solid var(--wp--preset--color--avro-line); border-radius: 20px; overflow: hidden; background: var(--wp--preset--color--base); }
.avro-blog-feature .wp-block-columns { align-items: center; max-width: none; width: 100%; }
.avro-blog-feature .wp-block-column:first-child { display: flex; align-items: center; }
.avro-blog-feature .wp-block-post-featured-image { margin: 0; width: 100%; }
.avro-blog-feature .wp-block-post-featured-image img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
@media (max-width: 781px) {
	.avro-blog-feature .wp-block-columns { align-items: stretch; }
	.avro-blog-feature .wp-block-post-featured-image img { aspect-ratio: 16 / 10; }
}

/* Course catalogue filter bar. */
.avro-filterbar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	align-items: center;
	padding: 0.7rem 1rem;
	margin-bottom: 1.25rem;
	border: 1px solid var(--wp--preset--color--avro-line);
	border-radius: 14px;
	background: var(--wp--preset--color--avro-warm);
}
.avro-filter-field { display: flex; flex-direction: row; align-items: center; gap: 0.5rem; }
.avro-filter-field label {
	font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.09em;
	font-weight: 600; color: var(--wp--preset--color--avro-muted); white-space: nowrap;
}
.avro-filter-field select,
.avro-filter-field input {
	font-family: inherit; font-size: 0.9rem; padding: 0.42rem 0.7rem;
	border: 1px solid var(--wp--preset--color--avro-line); border-radius: 9px;
	background: #fff; color: var(--wp--preset--color--contrast); min-width: 172px;
}
.avro-filter-search input { min-width: 200px; }
.avro-filter-meta { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.avro-course-count { font-size: 0.9rem; color: var(--wp--preset--color--avro-muted); }
.avro-filter-clear {
	font-family: inherit; font-size: 0.85rem; font-weight: 600;
	color: var(--wp--preset--color--avro-green-dark); background: none; border: none;
	cursor: pointer; padding: 0; text-decoration: underline;
}
.avro-filter-clear:hover { color: var(--wp--preset--color--avro-green-dark); }
.avro-course-noresults { padding: 1.25rem 0 0; color: var(--wp--preset--color--avro-muted); }
@media (max-width: 781px) {
	.avro-filter-field { flex: 1 1 100%; }
	.avro-filter-field select,
	.avro-filter-field input,
	.avro-filter-search input { min-width: 0; width: 100%; }
	.avro-filter-meta { margin-left: 0; flex: 1 1 100%; justify-content: space-between; }
}

/* FAQ accordion: smaller, balanced question text with tidy dividers. */
.wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--avro-line);
	padding: 0.35rem 0;
}
.wp-block-details summary {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	padding: 0.75rem 0;
	list-style-position: outside;
}
.wp-block-details summary:hover { color: var(--wp--preset--color--avro-green-dark); }
.wp-block-details[open] summary { color: var(--wp--preset--color--avro-green-dark); }
.wp-block-details p {
	color: var(--wp--preset--color--avro-muted);
	font-size: 1rem;
	line-height: 1.6;
	margin: 0.25rem 0 0.9rem;
}

/* Course browser: grade blocks -> subject accordions -> click-through rows.
   Font hierarchy descends grade (largest) > subject > course for top-down scan. */
.avro-grade-block { margin-top: 2.75rem; }
.avro-grade-block:first-child { margin-top: 0.5rem; }
.avro-grade-head {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.75rem; line-height: 1.1; color: var(--wp--preset--color--contrast);
	margin: 0 0 0.5rem; padding-bottom: 0.4rem;
	border-bottom: 2px solid var(--wp--preset--color--avro-green-tint);
}
.avro-subject-group { border-bottom: 1px solid var(--wp--preset--color--avro-line); }
.avro-subject-group > summary {
	display: flex; align-items: center; gap: 0.75rem;
	cursor: pointer; padding: 1rem 0.5rem; list-style: none;
}
.avro-subject-group > summary::-webkit-details-marker { display: none; }
.avro-subj-name {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.12rem; color: var(--wp--preset--color--contrast);
}
.avro-subject-group > summary:hover .avro-subj-name { color: var(--wp--preset--color--avro-green-dark); }
.avro-subj-meta { margin-left: auto; display: flex; align-items: center; gap: 0.9rem; }
.avro-subj-count {
	background: var(--wp--preset--color--avro-green-tint);
	color: var(--wp--preset--color--avro-green-dark);
	font-size: 0.78rem; font-weight: 600; border-radius: 999px; padding: 0.12rem 0.62rem;
}
.avro-subject-group > summary::after { content: "\25B8"; color: var(--wp--preset--color--avro-muted); font-size: 0.85rem; }
.avro-subject-group[open] > summary::after { content: "\25BE"; }
.avro-course-list { list-style: none; margin: 0; padding: 0 0 0.85rem; }
.avro-course-row a {
	display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem 0.6rem;
	padding: 0.55rem 0.75rem; border-radius: 9px; text-decoration: none;
	color: var(--wp--preset--color--contrast);
}
.avro-course-row a:hover { background: var(--wp--preset--color--avro-green-tint); }
.avro-course-name { font-weight: 500; font-size: 0.98rem; line-height: 1.3; }
.avro-course-row .avro-course-tags { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; }
.avro-course-go { color: var(--wp--preset--color--avro-green); font-size: 1.05rem; margin-left: auto; flex-shrink: 0; }
.avro-course-row a:hover .avro-course-go { color: var(--wp--preset--color--avro-green-dark); }

/* Grade pages: grade nav pills + flat, tag-led scannable course list. */
.avro-grade-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.25rem; }
.avro-grade-nav-label {
	font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em;
	font-weight: 700; color: var(--wp--preset--color--avro-muted); margin-right: 0.25rem;
}
.avro-grade-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; }
.avro-grade-nav a {
	display: inline-block; text-decoration: none; font-weight: 600; line-height: 1;
	padding: 0.4rem 0.95rem; border-radius: 999px;
	border: 1px solid var(--wp--preset--color--avro-line);
	color: var(--wp--preset--color--avro-green-dark); background: var(--wp--preset--color--base);
}
.avro-grade-nav a:hover { background: var(--wp--preset--color--avro-green-tint); }
.avro-grade-nav a.is-current { background: var(--wp--preset--color--avro-green); border-color: var(--wp--preset--color--avro-green); color: #fff; }

.avro-grade-course { padding: 1.35rem 0; border-bottom: 1px solid var(--wp--preset--color--avro-line); scroll-margin-top: 110px; }
.avro-grade-course:first-child { padding-top: 0.5rem; }
.avro-grade-course:last-child { border-bottom: none; }
.avro-course-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.avro-tag { font-size: 0.7rem; font-weight: 600; padding: 0.14rem 0.6rem; border-radius: 999px; line-height: 1.4; white-space: nowrap; }
.avro-tag-subject { background: var(--wp--preset--color--avro-green-tint); color: var(--wp--preset--color--avro-green-dark); text-transform: uppercase; letter-spacing: 0.05em; }
.avro-tag-code { background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--avro-line); color: var(--wp--preset--color--avro-muted); letter-spacing: 0.03em; }
/* Title and its tags share one line; tags sit at the end of the title line. */
.avro-grade-course-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35rem 0.7rem; margin-bottom: 0.5rem; }
.avro-grade-course-head .avro-course-tags { margin: 0; }
.avro-grade-course-title { font-size: 1.2rem; line-height: 1.3; margin: 0; }
.avro-grade-course-desc p { color: var(--wp--preset--color--avro-muted); line-height: 1.6; margin: 0; }
.avro-grade-course:target { background: var(--wp--preset--color--avro-green-tint); border-radius: 12px; padding: 1.35rem 1.15rem; }

/* Smooth fade while the grade list swaps during the AJAX grade toggle. */
#avro-grade-courses { transition: opacity 0.18s ease; }
#avro-grade-courses[aria-busy="true"] { opacity: 0.3; }

/* ==========================================================================
   Mobile responsiveness
   ========================================================================== */

/* Fixed columnCount grids (blog 3-up, About/Who-we-serve card grids) do not
   reflow on their own. Collapse to two columns on tablets, one on phones. */
@media (min-width: 601px) and (max-width: 900px) {
	.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
	.is-layout-grid { grid-template-columns: 1fr !important; }
}

/* Wide data tables scroll horizontally rather than overflowing the page. */
.avro-fee-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Header: keep the top bar uncluttered on phones. The nav collapses to the
   built-in overlay menu; drop the secondary outline button so only the logo,
   Book a Visit, and the menu toggle remain. */
@media (max-width: 640px) {
	.avro-header .wp-block-buttons .wp-block-button.is-style-outline { display: none; }
	.avro-header .wp-block-button__link { padding: 0.55rem 1rem; font-size: 0.88rem; }
	.avro-badge-float { margin-top: -2.75rem; }
	.avro-grade-head { font-size: 1.45rem; }
	.avro-cta-card { border-radius: 24px; }
}

/* Mobile header: order the row logo -> Book a Visit -> hamburger, so the menu
   toggle sits to the right of the button. */
@media (max-width: 600px) {
	.avro-header .alignwide.is-layout-flex { flex-wrap: nowrap; gap: 0.5rem !important; }
	.avro-header .wp-block-site-logo { order: 1; }
	.avro-header .wp-block-site-logo img { width: 96px !important; height: auto; }
	.avro-header .wp-block-buttons { order: 2; margin-left: auto; }
	.avro-header .wp-block-navigation { order: 3; }

	/* The opened menu is a compact floating panel anchored under the toggle,
	   not a full-screen overlay. */
	.avro-header .wp-block-navigation__responsive-container.is-menu-open {
		position: fixed !important;
		display: block !important;
		top: 64px; right: 10px; left: auto; bottom: auto;
		width: min(86vw, 320px); height: auto !important; max-height: calc(100dvh - 80px);
		overflow-y: auto;
		background: var(--wp--preset--color--base) !important;
		border: 1px solid var(--wp--preset--color--avro-line);
		border-radius: 18px; box-shadow: 0 18px 44px rgba(20, 20, 20, 0.16);
		padding: 1rem 1rem 0.9rem;
	}
	.admin-bar .avro-header .wp-block-navigation__responsive-container.is-menu-open { top: 110px; }
	.avro-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		position: static !important; display: block !important; width: 100%; height: auto !important; min-height: 0 !important; padding: 0 !important;
	}
	/* Core offsets the dialog 46px to clear the admin bar for logged-in users;
	   the floating panel already sits below it, so drop the dead space. */
	.avro-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog { margin-top: 0 !important; }
	/* Close: a soft circular chip in the top-right corner. */
	.avro-header .wp-block-navigation__responsive-container-close {
		top: 0.7rem; right: 0.7rem; width: 2rem; height: 2rem;
		display: flex; align-items: center; justify-content: center;
		border-radius: 999px; background: var(--wp--preset--color--avro-green-tint);
		color: var(--wp--preset--color--avro-green-dark);
	}
	.avro-header .wp-block-navigation__responsive-container-close svg { width: 1.05rem; height: 1.05rem; }
	.avro-header .is-menu-open .wp-block-navigation__responsive-container-content { align-items: stretch !important; width: 100%; }
	.avro-header .is-menu-open .wp-block-navigation__container { gap: 0 !important; align-items: stretch !important; justify-content: flex-start !important; text-align: left; }
	/* The overlay renders each item as a flex COLUMN, so horizontal position is
	   governed by align-items (cross axis), not justify-content. Stretch the
	   item children to full width and left-align the label text. */
	.avro-header .is-menu-open .wp-block-navigation-item { width: 100%; display: flex !important; align-items: stretch !important; flex-wrap: wrap; }
	.avro-header .is-menu-open .wp-block-navigation-item__content { width: 100% !important; text-align: left !important; padding: 0.85rem 0.4rem; font-weight: 500; color: var(--wp--preset--color--contrast); }
	.avro-header .is-menu-open .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--avro-green-dark); }
	/* Demarcation: a hairline between each top-level menu item. */
	.avro-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item { border-bottom: 1px solid var(--wp--preset--color--avro-line); }
	.avro-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:last-child { border-bottom: none; }
	/* Expand arrow: a soft chip on the right of a submenu parent. */
	.avro-header .is-menu-open .wp-block-navigation__submenu-icon {
		margin-left: auto; color: var(--wp--preset--color--avro-muted);
		transition: transform 0.2s ease; padding: 0.2rem;
	}

	/* Submenus flatten into inline accordions (no floating card): collapsed by
	   default, expand on tapping the parent. */
	.avro-header .is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content { cursor: pointer; }
	.avro-header .is-menu-open .wp-block-navigation__submenu-container {
		position: static !important; min-width: 0 !important; width: 100%; display: none !important;
		box-shadow: none !important; background: transparent !important;
		border: none !important; border-left: 2px solid var(--wp--preset--color--avro-green-tint) !important;
		margin: 0.15rem 0 0.5rem 0.5rem !important; padding: 0 0 0 0.6rem !important;
	}
	.avro-header .is-menu-open .wp-block-navigation-submenu.avro-open > .wp-block-navigation__submenu-container { display: block !important; }
	.avro-header .is-menu-open .wp-block-navigation-submenu.avro-open > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon { transform: rotate(180deg); }
	.avro-header .is-menu-open .wp-block-navigation__submenu-container::before { display: none !important; }
	.avro-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 0.4rem 0.5rem; text-align: left; justify-content: flex-start;
		font-size: 0.95rem; color: var(--wp--preset--color--avro-muted);
	}
}

/* Course rows and grade cards: comfortable tap targets, no crowding. */
@media (max-width: 600px) {
	.avro-grade-course:target { padding-left: 0.85rem; padding-right: 0.85rem; }
	.avro-subject-group > summary { padding: 0.9rem 0.25rem; }
}

/* Respect reduced motion. */
@media (prefers-reduced-motion: reduce) {
	* { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---- Blog structural relaunch (2026-07-07) ---- */
.avro-blognav{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;align-items:center}
.avro-blognav a{display:inline-block;padding:.4rem .95rem;border:1px solid var(--wp--preset--color--avro-line);border-radius:999px;font-size:.9rem;line-height:1;text-decoration:none;color:var(--wp--preset--color--contrast);background:#fff;transition:background .15s,border-color .15s,color .15s}
.avro-blognav a:hover{background:var(--wp--preset--color--avro-green-tint);border-color:var(--wp--preset--color--avro-green)}
.avro-blognav a[aria-current]{background:var(--wp--preset--color--avro-green);color:#fff;border-color:var(--wp--preset--color--avro-green)}

.avro-callout{background:var(--wp--preset--color--avro-green-tint);border-left:4px solid var(--wp--preset--color--avro-green);border-radius:8px;padding:1rem 1.25rem;margin:1.9rem 0}
.avro-callout p{margin:0}

.avro-closing{border-top:1px solid var(--wp--preset--color--avro-line);margin-top:2.6rem;padding-top:1.3rem}
.avro-closing h3{margin:0 0 .7rem;font-size:1.1rem}
.avro-closing p{margin:.9rem 0 .3rem;font-weight:600}
.avro-closing p:first-of-type{margin-top:0}
.avro-closing ul{margin:0 0 .4rem;padding-left:1.15rem}
.avro-closing li{margin:.18rem 0}

/* ---- Blog polish pass (2026-07-07) ---- */
/* Post-body headings: smaller than the sitewide hero sizes, scoped to articles. */
.avro-post-body h2{font-size:1.55rem;line-height:1.25;margin-top:2rem}
.avro-post-body h3{font-size:1.25rem;line-height:1.3;margin-top:1.6rem}
.avro-post-body h4{font-size:1.1rem}

/* Post hero: a capped letterbox banner instead of a full-height image. */
.avro-post-hero{margin:0 0 2.2rem}
.avro-post-hero img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px}

/* Tables: house standard (full frame, rounded, green header + yellow accent, cream zebra). */
.avro-table{margin:1.9rem 0;overflow-x:auto}
.avro-table table{border-collapse:separate;border-spacing:0;width:100%;font-size:.95rem;line-height:1.45;
	border:1px solid var(--wp--preset--color--avro-line);border-radius:12px;overflow:hidden;
	box-shadow:0 1px 3px rgba(20,20,20,.06)}
.avro-table th{background:var(--wp--preset--color--avro-green);color:#fff;text-align:left;font-weight:700;
	text-transform:uppercase;letter-spacing:.04em;font-size:.8rem;padding:.8rem 1rem;
	border-bottom:3px solid var(--wp--preset--color--avro-yellow)}
.avro-table td{padding:.75rem 1rem;border-bottom:1px solid var(--wp--preset--color--avro-line);vertical-align:top}
.avro-table tbody tr:last-child td,.avro-table tr:last-child td{border-bottom:none}
.avro-table td:first-child{font-weight:600;color:var(--wp--preset--color--avro-green-dark)}
.avro-table tbody tr:nth-child(even) td{background:var(--wp--preset--color--avro-warm)}
.avro-table figcaption{margin-top:.6rem;font-size:.85rem;color:var(--wp--preset--color--avro-muted);text-align:left}

/* FAQ accordion: bordered rows, rounded, rotating chevron. */
.avro-faq{margin-top:2.6rem}
.avro-faq h2{font-size:1.55rem;margin:0 0 1rem}
.avro-faq details{border:1px solid var(--wp--preset--color--avro-line);border-radius:10px;margin:.6rem 0;background:#fff;overflow:hidden}
.avro-faq details[open]{border-color:var(--wp--preset--color--avro-green)}
.avro-faq summary{list-style:none;cursor:pointer;padding:.9rem 1.1rem;font-weight:600;font-size:1.02rem;
	display:flex;justify-content:space-between;align-items:center;gap:1rem}
.avro-faq summary::-webkit-details-marker{display:none}
.avro-faq summary::after{content:"";flex:0 0 auto;width:.6rem;height:.6rem;border-right:2px solid var(--wp--preset--color--avro-green);
	border-bottom:2px solid var(--wp--preset--color--avro-green);transform:rotate(45deg);transition:transform .18s ease;margin-top:-.2rem}
.avro-faq details[open] summary::after{transform:rotate(-135deg);margin-top:.15rem}
.avro-faq summary:hover{background:var(--wp--preset--color--avro-green-tint)}
.avro-faq details > p{margin:0;padding:0 1.1rem 1.05rem}