/**
 * Theme Name: Astra Child
 * Theme URI: https://ynnoova.com/
 * Description: Child theme for the Astra parent theme, built for the ynnoova educational consultancy website.
 * Author: ynnoova
 * Author URI: https://ynnoova.com/
 * Template: astra
 * Version: 1.0.0
 * Text Domain: astra-child
 */

/**
 * Fluent Forms inputs: meet the 44px minimum touch target.
 *
 * Default rendered height was 40px (11px vertical padding + 16px line-height
 * + borders). box-sizing is already border-box, so min-height is enough
 * without needing to recompute the padding.
 */
.ff-el-form-control {
	min-height: 44px;
}

/**
 * Primary nav CTA: "Book a Consultation" as a filled button, not plain text.
 *
 * website-structure.md designates this item as the sitewide primary CTA,
 * meant to sit last and read distinctly. Astra's menu <li> is already a
 * column flexbox with justify-content:center (built for the 80px-tall
 * header row), so a shorter, fixed-height anchor centres correctly inside
 * it for free — no wrapper element needed.
 */
.main-header-bar .ynnoova-nav-cta .menu-link {
	display: inline-flex;
	align-items: center;
	height: 40px;
	line-height: normal;
	padding: 0 18px;
	background-color: var(--wp--preset--color--primary);
	/* !important: must outrank the .current-menu-item rule below, which also
	   uses !important, for the edge case of viewing /book-consultation/
	   itself (this item becomes "current" there) — without it the item's
	   text would render primary-blue on a primary-blue background. */
	color: var(--wp--preset--color--white) !important;
	border-radius: 8px;
	transition: background-color 200ms ease-out;
}

.main-header-bar .ynnoova-nav-cta .menu-link:hover {
	background-color: var(--wp--preset--color--ink);
}

/**
 * Same CTA button treatment inside the mobile off-canvas menu.
 *
 * Astra renders a second, separate menu markup for the mobile drawer
 * (#ast-hf-mobile-menu, outside .main-header-bar entirely), so the desktop
 * rule above never reaches it — "Book a Consultation" was falling back to
 * a plain text row indistinguishable from the other menu items.
 */
#ast-hf-mobile-menu .ynnoova-nav-cta {
	margin-top: var(--wp--preset--spacing--20, 1rem);
}

#ast-hf-mobile-menu .ynnoova-nav-cta .menu-link {
	display: inline-flex;
	align-items: center;
	height: 40px;
	line-height: normal;
	padding: 0 18px !important;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white) !important;
	border-radius: 8px;
	transition: background-color 200ms ease-out;
}

#ast-hf-mobile-menu .ynnoova-nav-cta .menu-link:hover,
#ast-hf-mobile-menu .ynnoova-nav-cta .menu-link:focus-visible {
	background-color: var(--wp--preset--color--ink);
}

/**
 * Brand link-color overrides for Astra components.
 *
 * theme.json's global `elements.link` style (Primary blue, Teal on hover)
 * applies correctly to plain <a> tags, but Astra's own compiled CSS carries
 * higher specificity on its templated header/entry components (primary nav
 * links, post-title links), so those two spots need an explicit override
 * here rather than in theme.json. Uses the same theme.json colour tokens
 * via CSS custom properties, so this stays in sync if the palette changes.
 * See brand-guide.md for the source palette and DEC-005 for the validated
 * teal contrast fix.
 */
.main-header-bar .menu-link,
.entry-title a {
	color: var(--wp--preset--color--ink);
}

.main-header-bar .menu-link:hover,
.entry-title a:hover {
	color: var(--wp--preset--color--primary);
}

/**
 * The rule above doesn't cover Astra's "current page" nav state. Astra
 * generates its own dynamic CSS for it (`.ast-builder-menu-1 .menu-item
 * .current-menu-item > .menu-link { color: var(--ast-global-color-1) }`,
 * #045CB4), which both outranks this stylesheet on specificity and loads
 * after it, so a plain override here is silently ignored. !important is
 * the only reliable way to win against injected customizer CSS whose
 * source order isn't under this theme's control.
 */
.current-menu-item .menu-link {
	color: var(--wp--preset--color--primary) !important;
}

/**
 * Header logo: cap the rendered size.
 *
 * No width limit was set anywhere (Customizer or CSS), so the wordmark
 * rendered at its native ratio, ~766x168px on desktop, ballooning the whole
 * header to roughly 200px tall before any page content starts. Capping the
 * height keeps the wordmark's own aspect ratio (width:auto) and brings the
 * header back to a normal size.
 */
.site-header .custom-logo {
	height: 44px;
	width: auto;
}

/**
 * "Explore services" (and any future .is-style-outline button) was rendering
 * in Astra's default link blue (#046BD2) instead of the brand's actual
 * primary token (#1F6FEB) — the block never set an explicit textColor, so
 * it fell through to Astra's own outline-button rule, which targets
 * `:not(.has-text-color)` (a pseudo-class counts toward specificity same as
 * a real class) and outranks a plain override here. Same fix pattern as the
 * current-menu-item rule above: !important to reliably beat injected,
 * higher-specificity theme CSS.
 */
.wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--wp--preset--color--primary) !important;
	border-color: var(--wp--preset--color--primary) !important;
}

/**
 * "Learn more" links inside the service cards: enlarge the tap target.
 *
 * These render as plain inline text links (~99x20px), well under the
 * 44x44px minimum touch target size. Padding plus a matching negative
 * margin grows the tappable area without shifting the visible layout.
 */
.ynnoova-hover-card p a {
	display: inline-block;
	padding: 10px 4px;
	margin: -10px -4px;
}

/**
 * Homepage "Our approach" steps: 2-column grid on mobile instead of the
 * Columns block's default full stack (WordPress core forces flex-basis:100%
 * on each column below 781px — see wp-includes/css/dist/block-library/style.css).
 * Switching the parent to display:grid makes that flex-basis irrelevant,
 * so six steps read as a compact 3x2 grid instead of a long single-file
 * scroll on small screens.
 */
@media (max-width: 781px) {
	.ynnoova-approach-steps.wp-block-columns {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--wp--preset--spacing--30, 1.5rem) var(--wp--preset--spacing--30, 1.5rem);
	}

	.ynnoova-approach-steps.wp-block-columns > .wp-block-column {
		margin-left: 0;
	}
}

/**
 * Restrained hover state for the "Where to start" service cards.
 *
 * Deliberately not the 3D-tilt/cursor-glow effects common in JS component
 * libraries — those need a JS runtime this site doesn't have, and read as
 * flashier than brand-guide.md's "premium without being distant, modern
 * without performing novelty" essence. This is a lift, a deeper shadow, and
 * an accent-colour border shift: real feedback, pure CSS, no JS.
 */
.ynnoova-hover-card {
	transition: transform 200ms ease-out, box-shadow 200ms ease-out, border-color 200ms ease-out;
}

.ynnoova-hover-card:hover,
.ynnoova-hover-card:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 10px 24px rgba(16, 42, 67, 0.14);
	border-color: var(--wp--preset--color--primary);
}

@media (prefers-reduced-motion: reduce) {
	.ynnoova-hover-card {
		transition: box-shadow 200ms ease-out, border-color 200ms ease-out;
	}

	.ynnoova-hover-card:hover,
	.ynnoova-hover-card:focus-within {
		transform: none;
	}
}

/**
 * Homepage hero background photo: drop it below 900px viewports.
 *
 * The inline gradient uses fixed pixel stops (0-760px solid mist-blue) so the
 * text column stays legible at any width without the photo bleeding under it.
 * That alone hides the photo visually below ~900px, but the browser would
 * still download the full JPEG for a photo nobody sees — this removes the
 * background-image outright on small screens so mobile doesn't pay for it.
 */
@media (max-width: 900px) {
	.ynnoova-hero-photo {
		background-image: none !important;
		background-color: var(--wp--preset--color--mist-blue);
	}
}

/**
 * Wordless connector between the "Two focus areas" cards (strategic-
 * curriculum-leadership hero). Its line segments rely on height:100%
 * cascading from the row's flex stretch, which only happens when the
 * three columns sit side by side. Astra stacks columns below this
 * breakpoint, so the column's own height collapses to near-zero and the
 * line all but disappears — hiding it here is simpler and more honest
 * than trying to give a decorative divider a fixed height that would
 * only ever be a guess once the cards it bridges are stacked, not
 * side by side.
 */
@media (max-width: 900px) {
	.ynnoova-focus-connector {
		display: none;
	}
}

/**
 * Homepage hero: animated AI/Education/Governance network overlay.
 *
 * Sits on top of the hero photo. An "AI" hub pulses and sends a travelling
 * light pulse along each connector to a graduation-cap icon (Education) and
 * the shield-check icon already used elsewhere on the site (Governance) —
 * a deliberate echo, not a new motif. Dark backdrop circles behind each icon
 * guarantee contrast regardless of what part of the photo sits behind them.
 * Hidden on the same 900px breakpoint as the hero photo itself, since there's
 * nothing to overlay once the photo is gone. All pure CSS/SVG, no JS, no
 * video — falls back to a calm static state under prefers-reduced-motion.
 */
.ynnoova-anim-overlay {
	position: absolute;
	top: 0;
	right: 0;
	width: 55%;
	height: 100%;
	pointer-events: none;
	overflow: visible;
}

/**
 * Consultation-page accent: same overlay, narrower box.
 *
 * The homepage hero has a narrow 600px text column with a photo filling
 * the rest of the width, so the shared 55% box never touches the text.
 * This page's text uses the full 820px column instead, so the full-width
 * box would run straight through the body copy — shrink it so the graphic
 * stays clear of the text at normal viewport widths.
 */
.ynnoova-anim-overlay--compact {
	width: 26%;
}

@media (max-width: 900px) {
	.ynnoova-anim-overlay {
		display: none;
	}
}

.ynnoova-anim-overlay .bg-ring {
	animation: ynnoova-ring-pulse 7s ease-in-out infinite;
	transform-origin: center;
}

.ynnoova-anim-overlay .hub-core {
	animation: ynnoova-hub-pulse 3.2s ease-in-out infinite;
	transform-box: fill-box;
	transform-origin: center;
}

.ynnoova-anim-overlay .hub-ring {
	animation: ynnoova-hub-ring 3.2s ease-in-out infinite;
	transform-box: fill-box;
	transform-origin: center;
}

.ynnoova-anim-overlay .satellite-icon {
	animation: ynnoova-icon-pulse 4s ease-in-out infinite;
	transform-box: fill-box;
	transform-origin: center;
}

.ynnoova-anim-overlay .satellite-icon.governance {
	animation-delay: 1.4s;
}

.ynnoova-anim-overlay .connector {
	stroke-dasharray: 4 10;
	animation: ynnoova-flow 3s linear infinite;
	opacity: 0.55;
}

.ynnoova-anim-overlay .connector.governance {
	animation-direction: reverse;
	animation-duration: 3.6s;
}

.ynnoova-anim-overlay .pulse-dot.education {
	offset-path: path('M460,170 L318,298');
	animation: ynnoova-round-trip 6.8s ease-in-out infinite;
}

.ynnoova-anim-overlay .pulse-dot.governance {
	offset-path: path('M460,170 L546,342');
	animation: ynnoova-round-trip 6.8s ease-in-out infinite;
	animation-delay: 3.4s;
}

/**
 * Generic travel-dot triggers for other .ynnoova-anim-overlay instances
 * (e.g. the consultation-page accent) that don't have a fixed node count
 * or meaning to name classes after, unlike .education/.governance above.
 * offset-path is set inline per dot since it's unique to each instance.
 */
.ynnoova-anim-overlay .pulse-dot.a,
.ynnoova-anim-overlay .pulse-dot.b,
.ynnoova-anim-overlay .pulse-dot.c {
	animation: ynnoova-travel 3.4s ease-in-out infinite;
}

.ynnoova-anim-overlay .pulse-dot.b {
	animation-delay: 1.1s;
}

.ynnoova-anim-overlay .pulse-dot.c {
	animation-delay: 2.2s;
}

/**
 * Dashboard-readout accent (ai-for-schools hero): a small metric panel
 * with bars that breathe at staggered offsets and a status dot, echoing
 * the hero copy's own thesis ("a fact-based starting point... a shared
 * view of your current capability") rather than a generic AI-network
 * motif that would overlap with the homepage's and IB page's hub/ring
 * language. Bars have no transform attribute of their own — only their
 * wrapping <g> carries the static translate — so the scaleY animation
 * can't collide with a positioning transform (see round-trip note above
 * on why that combination breaks).
 */
.ynnoova-anim-overlay .dash-bar {
	animation: ynnoova-bar-breathe 3.6s ease-in-out infinite;
	transform-box: fill-box;
	transform-origin: bottom;
}

.ynnoova-anim-overlay .dash-bar.b2 { animation-delay: 0.5s; }
.ynnoova-anim-overlay .dash-bar.b3 { animation-delay: 1s; }
.ynnoova-anim-overlay .dash-bar.b4 { animation-delay: 1.5s; }
.ynnoova-anim-overlay .dash-bar.b5 { animation-delay: 2s; }

.ynnoova-anim-overlay .dash-dot {
	animation: ynnoova-hub-pulse 3.2s ease-in-out infinite;
	transform-box: fill-box;
	transform-origin: center;
}

@keyframes ynnoova-bar-breathe {
	0%, 100% { transform: scaleY(0.82); }
	50% { transform: scaleY(1.06); }
}

/**
 * Five-strand hub accent (professional-development hero): five equally
 * weighted nodes pulse around a central practice hub, one per highlighted
 * topic area, none singled out visually — deliberately not AI-coded
 * imagery (no circuit lines), since this page covers formative assessment,
 * differentiation, subject-specific pedagogy, and school culture alongside
 * AI, not AI alone. Reuses the existing hub-ring/hub-core classes already
 * defined for the homepage's hub, and the icon-pulse animation already
 * used for satellite-icon, so this only adds the node delay stagger.
 */
.ynnoova-anim-overlay .hub-node {
	animation: ynnoova-icon-pulse 4s ease-in-out infinite;
	transform-box: fill-box;
	transform-origin: center;
}

.ynnoova-anim-overlay .hub-node.n2 { animation-delay: 0.4s; }
.ynnoova-anim-overlay .hub-node.n3 { animation-delay: 0.8s; }
.ynnoova-anim-overlay .hub-node.n4 { animation-delay: 1.2s; }
.ynnoova-anim-overlay .hub-node.n5 { animation-delay: 1.6s; }

/**
 * Compass accent (strategic-curriculum-leadership hero): the needle turns
 * slowly and continuously, a full rotation every 16s, low and unhurried
 * rather than a fast spin. Echoes the compass icon already used for this
 * page's own eyebrow tag and homepage card, rather than reusing another
 * page's motif.
 */
.ynnoova-anim-overlay .compass-needle {
	animation: ynnoova-compass-spin 16s linear infinite;
	transform-box: fill-box;
	transform-origin: center;
}

@keyframes ynnoova-compass-spin {
	to { transform: rotate(360deg); }
}

@keyframes ynnoova-ring-pulse {
	0%, 100% { opacity: 0.18; transform: scale(1); }
	50% { opacity: 0.3; transform: scale(1.02); }
}

@keyframes ynnoova-hub-pulse {
	0%, 100% { opacity: 0.85; transform: scale(1); }
	50% { opacity: 1; transform: scale(1.12); }
}

@keyframes ynnoova-hub-ring {
	0%, 100% { opacity: 0.3; transform: scale(1); }
	50% { opacity: 0.65; transform: scale(1.35); }
}

@keyframes ynnoova-icon-pulse {
	0%, 100% { opacity: 0.75; transform: scale(1); }
	50% { opacity: 1; transform: scale(1.08); }
}

@keyframes ynnoova-flow {
	to { stroke-dashoffset: -28; }
}

@keyframes ynnoova-travel {
	0% { offset-distance: 0%; opacity: 0; }
	15% { opacity: 1; }
	85% { opacity: 1; }
	100% { offset-distance: 100%; opacity: 0; }
}

/**
 * Homepage hub pulses (education/governance) travel out to each satellite
 * and back, rather than one-way broadcast — the two disciplines feeding
 * back into one integrated practice, which is the homepage's own thesis
 * and not something any single flagship page's hero motif states.
 */
@keyframes ynnoova-round-trip {
	0% { offset-distance: 0%; opacity: 0; }
	8% { opacity: 1; }
	46% { offset-distance: 100%; opacity: 1; }
	54% { offset-distance: 100%; opacity: 1; }
	92% { offset-distance: 0%; opacity: 1; }
	100% { offset-distance: 0%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	/*
	 * !important on pulse-dot only: its animation is enabled via a modifier
	 * class (.pulse-dot.education, .pulse-dot.a, etc.), which has higher
	 * specificity than the bare .pulse-dot selector below and would
	 * otherwise win over this override regardless of source order.
	 */
	.ynnoova-anim-overlay .bg-ring,
	.ynnoova-anim-overlay .hub-core,
	.ynnoova-anim-overlay .hub-ring,
	.ynnoova-anim-overlay .satellite-icon,
	.ynnoova-anim-overlay .connector,
	.ynnoova-anim-overlay .dash-bar,
	.ynnoova-anim-overlay .dash-dot,
	.ynnoova-anim-overlay .hub-node,
	.ynnoova-anim-overlay .compass-needle {
		animation: none;
	}

	.ynnoova-anim-overlay .hub-node {
		opacity: 0.85;
	}

	.ynnoova-anim-overlay .dash-bar {
		transform: scaleY(1);
	}

	.ynnoova-anim-overlay .pulse-dot {
		animation: none !important;
	}

	.ynnoova-anim-overlay .hub-core {
		opacity: 0.9;
	}

	.ynnoova-anim-overlay .satellite-icon {
		opacity: 0.85;
	}

	.ynnoova-anim-overlay .connector {
		opacity: 0.4;
	}

	.ynnoova-anim-overlay .pulse-dot {
		opacity: 0;
	}
}

/**
 * Homepage credibility card images: consistent blue-toned colour grade.
 *
 * The four credibility card images (DEC-023, DEC-024) are separate
 * AI-generated photos with their own lighting/colour casts. This overlay
 * (primary blue at low opacity, multiply blend) ties them together as one
 * deliberately-graded set instead of reading as four unrelated stock photos.
 * Pure CSS, no extra image files needed for the tint itself.
 */
.ynnoova-card-image-wrap {
	position: relative;
	overflow: hidden;
	border-radius: 8px;
	margin-bottom: var(--wp--preset--spacing--20);
}

.ynnoova-card-image-wrap img {
	width: 100%;
	height: auto;
	display: block;
}

.ynnoova-card-image-wrap::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--primary);
	opacity: 0.16;
	mix-blend-mode: multiply;
	pointer-events: none;
}

/**
 * Portrait crop variant: the source photos are wide (~2.9:1) banner crops
 * meant for full-width cards. In a narrow side-by-side column that ratio
 * renders as a thin strip, so this fills the column's own (flex-stretched)
 * height instead, cropping the photo via object-fit rather than auto height.
 */
.ynnoova-card-image-wrap--portrait {
	height: 100%;
	min-height: 260px;
}

.ynnoova-card-image-wrap--portrait img {
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

/**
 * Abstract network-motif graphics (achieve-section illustrations): a slow,
 * subtle breathing scale+opacity, giving the static graphic a sense of life
 * without literally animating individual nodes. Scoped to this modifier
 * only, so ordinary photo cards using the base wrap classes are unaffected.
 * transform/opacity only; the wrap's overflow:hidden clips the scale safely.
 */
.ynnoova-card-image-wrap--motif img {
	animation: ynnoova-motif-breathe 6s ease-in-out infinite;
}

@keyframes ynnoova-motif-breathe {
	0%, 100% { transform: scale(1); opacity: 0.95; }
	50% { transform: scale(1.035); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.ynnoova-card-image-wrap--motif img {
		animation: none;
		opacity: 1;
	}
}

/**
 * Homepage "Our approach": connecting line through the six numbered steps.
 *
 * The intro copy says "a clear, staged path" — this makes that literal
 * instead of a metaphor, and gives the numbered badges something to sit on.
 * Desktop only: with the six steps in a single row, every column shares the
 * same top edge, so a fixed 26px offset reliably lines up with each badge's
 * centre regardless of how much description text sits below it. That's not
 * true once the steps stack on mobile (description length varies per step),
 * so the line is hidden there rather than attempting a fragile per-item
 * connector — the numbered badges alone still carry the sequence.
 */
.ynnoova-approach-steps {
	position: relative;
}

.ynnoova-approach-steps::before {
	content: "";
	position: absolute;
	top: 24px;
	left: 0;
	right: 0;
	height: 4px;
	background: rgba(16, 42, 67, 0.15);
	z-index: 0;
}

@media (max-width: 781px) {
	.ynnoova-approach-steps::before {
		display: none;
	}
}

/**
 * Homepage "The challenge": risk/opportunity split.
 *
 * A thin rule between the two columns marks the actual dividing line the
 * copy draws (risk vs. opportunity, per website-structure.md's "cover both
 * sides, not risk-only" brief) rather than decorating an otherwise plain
 * section. Removed once the columns stack on mobile, where there's no
 * side-by-side boundary left to mark.
 */
.ynnoova-challenge-split > .wp-block-column:last-child {
	border-left: 1px solid rgba(16, 42, 67, 0.15);
	padding-left: var(--wp--preset--spacing--30);
}

@media (max-width: 781px) {
	.ynnoova-challenge-split > .wp-block-column:last-child {
		border-left: none;
		padding-left: 0;
	}
}

/**
 * Homepage "What our IB experience covers": three-way labelled split.
 *
 * Same divider technique as .ynnoova-challenge-split above, generalised to
 * :not(:first-child) so it also works for three columns instead of two —
 * marks the boundary between three distinct proof-points (programme range,
 * seniority range, both sides of accreditation) instead of decorating a
 * plain three-column row.
 */
.ynnoova-ib-split > .wp-block-column:not(:first-child) {
	border-left: 1px solid rgba(16, 42, 67, 0.15);
	padding-left: var(--wp--preset--spacing--30);
}

@media (max-width: 781px) {
	.ynnoova-ib-split > .wp-block-column:not(:first-child) {
		border-left: none;
		padding-left: 0;
	}
}

/**
 * Scroll reveal for top-level page sections (see assets/js/scroll-reveal.js).
 * The JS adds both classes together, so a section is never left invisible
 * without a transition to clear it — this stylesheet only defines the two
 * end states, never an unconditional hidden default.
 */
.ynnoova-reveal {
	transition: opacity 500ms ease-out, transform 500ms ease-out;
}

.ynnoova-reveal-pending {
	opacity: 0;
	transform: translateY(16px);
}

/**
 * Primary nav "Services" mega menu: two-pillar dropdown.
 *
 * Replaces four flat top-level nav items (which were wrapping the header to
 * two rows at every desktop width, since Astra's header content container is
 * capped at 1240px) with a single "Services" parent. The dropdown groups its
 * six children into the site's real two-pillar structure (website-structure.md)
 * using explicit CSS Grid placement, since Astra's default submenu is a
 * single column and has no native concept of grouped headers.
 *
 * The two ".ynnoova-mega-header" items and the "Services" parent itself were
 * created with an empty menu-item URL (see docs — no `/services/` hub page
 * exists yet), so WordPress renders their <a> without an href attribute:
 * non-clickable and not announced as a link by assistive tech, without
 * needing a custom nav walker.
 *
 * Grid placement is by nth-child, matching this fixed, hand-built item order:
 * 1) Pillar 1 header, 2) SCL link, 3) IB link, 4) Pillar 2 header, 5) AI for
 * Schools link, 6) PD link. If a page is ever added under either pillar,
 * update both the menu item positions (wp menu item update --position) and
 * these nth-child rules together.
 */
.ynnoova-services-mega > .sub-menu {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: var(--wp--preset--spacing--40, 2rem);
	row-gap: 0;
	width: 30rem;
	padding: var(--wp--preset--spacing--30, 1.5rem);
	/*
	 * Astra's default submenu centres itself using a left offset sized for
	 * its normal ~220px single-column width. At 30rem wide that calculation
	 * pushes the panel far off the left edge of the viewport, so pin it to
	 * the parent item's right edge instead, ignoring Astra's own offset.
	 */
	left: auto !important;
	right: 0 !important;
	margin-left: 0 !important;
}

.ynnoova-services-mega > .sub-menu > .menu-item:nth-child(1) { grid-column: 1; grid-row: 1; }
.ynnoova-services-mega > .sub-menu > .menu-item:nth-child(2) { grid-column: 1; grid-row: 2; }
.ynnoova-services-mega > .sub-menu > .menu-item:nth-child(3) { grid-column: 1; grid-row: 3; }
.ynnoova-services-mega > .sub-menu > .menu-item:nth-child(4) { grid-column: 2; grid-row: 1; }
.ynnoova-services-mega > .sub-menu > .menu-item:nth-child(5) { grid-column: 2; grid-row: 2; }
.ynnoova-services-mega > .sub-menu > .menu-item:nth-child(6) { grid-column: 2; grid-row: 3; }

/* Astra's submenu template adds a dropdown-arrow icon to every item inside
   a submenu, meant for further nesting. Nothing here nests again, and the
   icon reads as a stray mark next to a non-interactive header, so hide it. */
.ynnoova-services-mega .sub-menu .ast-icon.icon-arrow {
	display: none;
}

.ynnoova-mega-header .menu-link {
	display: block;
	padding: 0 0 var(--wp--preset--spacing--10, 0.5rem) 0 !important;
	margin-bottom: var(--wp--preset--spacing--10, 0.5rem);
	border-bottom: 1px solid var(--wp--preset--color--mist-blue);
	color: var(--wp--preset--color--teal) !important;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	cursor: default;
}

.ynnoova-services-mega .sub-menu .menu-item:not(.ynnoova-mega-header) .menu-link {
	padding: 0.4rem 0 !important;
	color: var(--wp--preset--color--ink);
}

.ynnoova-services-mega .sub-menu .menu-item:not(.ynnoova-mega-header) .menu-link:hover,
.ynnoova-services-mega .sub-menu .menu-item:not(.ynnoova-mega-header) .menu-link:focus-visible {
	color: var(--wp--preset--color--primary);
}

.ynnoova-services-mega .sub-menu .menu-item:not(.ynnoova-mega-header) .menu-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

@media (max-width: 921px) {
	.ynnoova-services-mega > .sub-menu {
		display: block;
		width: auto;
	}

	.ynnoova-mega-header .menu-link {
		padding-left: 0 !important;
	}
}