/*
Theme Name: iweb
Theme URI: https://example.com/iweb
Author: iweb
Author URI: https://example.com
Description: A minimal, design-agnostic classic WordPress starter theme. It ships all the required theme plumbing, semantic templates, accessible navigation, and a deliberately basic, token-based stylesheet meant to be replaced with your own design.
Version: 1.0.0
Requires at least: 6.3
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: iweb
Tags: accessibility-ready, blog, one-column, two-columns, right-sidebar, custom-logo, custom-menu, featured-images, footer-widgets, threaded-comments, translation-ready, editor-style
*/

/*
This is the only stylesheet loaded on every page. It holds the theme header
above and all global styling: reset, design tokens, base typography, layout
shell, header, footer, accessibility helpers, and WordPress core alignment
classes. View-specific styles live in assets/css/ and are loaded
conditionally by inc/enqueue.php.
*/

/*
>>> TABLE OF CONTENTS
1. Design tokens
2. Reset
3. Base typography
4. Accessibility helpers
5. Layout shell
6. Header and navigation
7. Footer
8. Search form
9. Forms and buttons
10. WordPress core classes
11. Generic content classes
*/

/* 1. Design tokens */

:root {
	/* Colors. */
	--color-bg: #fbf9f4;
	--color-surface: #ffffff;
	--color-text: #1d2b24;
	--color-heading: #0f1a14;
	--color-muted: #5b6a62;
	--color-link: #1f7a33;
	--color-border: #e6e2d8;
	--color-brand: #1f7a33;
	--color-brand-dark: #14602a;
	--color-brand-light: #9be86f;
	--color-dark: #0d2418;
	--color-dark-2: #143222;
	--color-on-dark: #e8f0ea;
	--color-on-dark-muted: #a9bdb0;
	--radius-sm: 8px;
	--radius-md: 14px;
	--radius-lg: 22px;
	--shadow-card: 0 1px 2px rgba(15, 26, 20, 0.04), 0 8px 24px rgba(15, 26, 20, 0.06);
	--container-width: 75rem;

	/* Spacing. */
	--space-xs: 0.25rem;
	--space-sm: 0.5rem;
	--space-md: 1rem;
	--space-lg: 2rem;
	--space-xl: 4rem;

	/* Typography. */
	--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-heading: var(--font-body);
	--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	--font-size-sm: 0.875rem;
	--font-size-base: 1rem;
	--font-size-lg: 1.25rem;
	--font-size-xl: 2rem;
	--line-height-body: 1.6;
	--line-height-heading: 1.2;

	/* Layout. */
	--content-width: 50rem;
	--sidebar-width: 18rem;
	--site-width: calc(var(--content-width) + var(--sidebar-width) + var(--space-lg));
	--wide-width: 64rem;
	--logo-max-width: 12rem;
	--menu-submenu-width: 14rem;
	--gallery-item-min-width: 10rem;
	--avatar-size: 3rem;

	/* Focus ring. */
	--focus-ring-width: 2px;
	--focus-ring-color: var(--color-link);
}

/* 2. Reset */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
figcaption,
blockquote,
dl,
dd,
pre {
	margin: 0;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

/* 3. Base typography */

body {
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	line-height: var(--line-height-body);
	color: var(--color-text);
	background-color: var(--color-bg);
}

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

h1 {
	font-size: var(--font-size-xl);
	letter-spacing: -0.02em;
}

h2 {
	font-size: var(--font-size-lg);
}

a {
	color: var(--color-link);
}

code,
kbd,
pre,
samp {
	font-family: var(--font-mono);
}

blockquote {
	margin-block: var(--space-md);
	padding-inline-start: var(--space-md);
	border-inline-start: var(--space-xs) solid var(--color-border);
}

hr {
	margin-block: var(--space-lg);
	border: 0;
	border-top: 1px solid var(--color-border);
}

/* 4. Accessibility helpers */

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	word-wrap: normal !important;
}

/* The skip link stays hidden until it receives keyboard focus. */
.skip-link:focus {
	position: absolute;
	z-index: 100000;
	top: var(--space-sm);
	left: var(--space-sm);
	width: auto;
	height: auto;
	margin: 0;
	padding: var(--space-sm) var(--space-md);
	clip-path: none;
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
}

/* A visible focus indicator for every interactive element. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-width);
}

/* Respect user motion preferences. */
@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* 5. Layout shell */

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-header-inner,
.site-content,
.site-footer-inner {
	margin-inline: auto;
	width: 100%;
	max-width: var(--site-width);
	padding-inline: var(--space-md);
}

.site-content {
	display: grid;
	flex-grow: 1;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-lg);
	padding-block: var(--space-lg);
}

.site-main {
	width: 100%;
	max-width: var(--content-width);
}

.widget-area {
	min-width: 0;
}

/* With a sidebar, the content grid gains a second column. */
@media (min-width: 56rem) {

	body.has-sidebar .site-content {
		grid-template-columns: minmax(0, 1fr) minmax(0, var(--sidebar-width));
	}
}

/* 6. Header and navigation */

.site-header {
	position: relative;
	z-index: 20;
	background-color: var(--color-bg);
}

.site-header-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	padding-block: 1.1rem;
}

.site-header-inner,
.site-footer-inner {
	max-width: var(--container-width);
}

.site-branding {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.site-title {
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -0.03em;
}

.site-title a,
.footer-logo a {
	color: var(--color-heading);
	text-decoration: none;
}

.logo-i {
	color: var(--color-brand);
}

.custom-logo {
	max-width: var(--logo-max-width);
	height: auto;
}

.site-header .header-cta {
	display: inline-flex;
}

/* On mobile the header CTA shows only inside the open menu. */
@media (max-width: 47.99rem) {

	html.js .primary-navigation.is-collapsed + .header-cta {
		display: none;
	}

	.site-header .header-cta {
		margin-block-end: var(--space-sm);
	}
}

/*
 * Mobile navigation (progressive enhancement).
 *
 * Without JavaScript the menu is always visible and the toggle button is
 * hidden. JavaScript adds the `js` class to <html> (assets/js/main.js),
 * which reveals the toggle button. The menu itself is collapsed only after
 * assets/js/navigation.js adds the `is-collapsed` class to the nav element.
 */
.menu-toggle {
	display: none;
	align-items: center;
	padding: var(--space-sm) var(--space-md);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}

html.js .menu-toggle {
	display: flex;
}

.primary-navigation {
	width: 100%;
}

.primary-navigation .nav-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.primary-navigation .nav-menu li {
	position: relative;
}

.primary-navigation .nav-menu a {
	display: block;
	padding: var(--space-sm) 0;
	color: var(--color-heading);
	font-size: 0.9rem;
	font-weight: 500;
	text-decoration: none;
}

.primary-navigation .nav-menu a:hover,
.primary-navigation .nav-menu a:focus {
	color: var(--color-brand);
}

/* Submenus stay hidden until they are opened by focus, pointer, or script. */
.primary-navigation .nav-menu ul {
	display: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

.primary-navigation .nav-menu li.is-open > ul {
	display: block;
}

/* Without JavaScript, submenus open on hover and keyboard focus. */
html:not(.js) .primary-navigation .nav-menu li:hover > ul,
html:not(.js) .primary-navigation .nav-menu li:focus-within > ul {
	display: block;
}

/* The menu is collapsed only after JavaScript adds the is-collapsed class. */
html.js .primary-navigation.is-collapsed .nav-menu {
	display: none;
}

/* Desktop navigation. */
@media (min-width: 48rem) {

	html.js .menu-toggle {
		display: none;
	}

	.site-header-inner {
		flex-wrap: nowrap;
	}

	.primary-navigation {
		width: auto;
	}

	.primary-navigation {
		margin-inline: auto;
	}

	.primary-navigation .nav-menu {
		display: flex;
		flex-wrap: wrap;
		column-gap: 1.75rem;
	}

	/* The menu is never collapsed on desktop. */
	html.js .primary-navigation.is-collapsed .nav-menu {
		display: flex;
	}

	.primary-navigation .nav-menu > li > a {
		padding: var(--space-sm) var(--space-xs);
	}

	.primary-navigation .nav-menu ul {
		position: absolute;
		top: 100%;
		inset-inline-start: 0;
		min-width: var(--menu-submenu-width);
		padding: var(--space-xs) var(--space-md);
		background-color: var(--color-bg);
		border: 1px solid var(--color-border);
	}

	.primary-navigation .nav-menu ul a {
		padding-block: var(--space-xs);
		white-space: nowrap;
	}

	/* Nested submenus open to the side. */
	.primary-navigation .nav-menu ul ul {
		top: 0;
		inset-inline-start: 100%;
	}
}

/* 7. Footer */

.site-footer {
	padding-block: 3.5rem 1.5rem;
	background-color: var(--color-dark);
	color: var(--color-on-dark-muted);
	font-size: 0.9rem;
}

.site-footer a {
	color: var(--color-on-dark-muted);
	text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
	color: #fff;
}

.site-footer .btn--primary,
.site-footer .btn--primary:hover {
	color: var(--color-dark);
}

.footer-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2.5rem;
}

@media (min-width: 40rem) {

	.footer-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.footer-brand {
		grid-column: 1 / -1;
	}
}

@media (min-width: 64rem) {

	.footer-grid {
		grid-template-columns: 1.4fr repeat(3, 1fr);
	}

	.footer-brand {
		grid-column: auto;
	}
}

.footer-logo {
	margin-block-end: 0.75rem;
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -0.03em;
}

.footer-logo a {
	color: #fff;
}

.footer-logo .logo-i {
	color: var(--color-brand-light);
}

.footer-blurb {
	max-width: 22rem;
	margin-block-end: 1.25rem;
}

.footer-brand .btn {
	margin-block-start: 1.25rem;
}

.footer-col__title {
	margin-block-end: 0.9rem;
	color: #fff;
	font-size: 0.95rem;
	font-weight: 700;
}

.footer-col ul,
.footer-navigation ul,
.social-links {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.social-links {
	flex-direction: row;
	gap: 0.9rem;
}

.social-links .icon {
	width: 1.2rem;
	height: 1.2rem;
}

.newsletter-form {
	display: flex;
	gap: 0.5rem;
	margin-block-start: 1.25rem;
}

.newsletter-form input {
	flex: 1;
	min-width: 0;
	padding: 0.55rem 0.75rem;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--radius-sm);
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
}

.footer-bottom {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-block-start: 3rem;
	padding-block-start: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 0.8rem;
}

.footer-navigation ul {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1.25rem;
}

.iweb-copyright {
	color: var(--color-on-dark-muted);
	font-size: 0.8rem;
}

@media (min-width: 40rem) {

	.footer-bottom {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

/* 8. Search form */

.search-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
}

.search-label {
	flex-basis: 100%;
	font-size: var(--font-size-sm);
}

.search-field {
	flex: 1 1 12rem;
	width: auto;
	border: 1px solid var(--color-border);
	padding: var(--space-xs) var(--space-sm);
}

.search-submit {
	padding: var(--space-xs) var(--space-md);
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
}

/* 9. Forms and buttons */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select {
	padding: var(--space-xs) var(--space-sm);
	border: 1px solid var(--color-border);
}

textarea {
	width: 100%;
}

/* 10. WordPress core classes */

.alignleft {
	float: left;
	margin-block-end: var(--space-sm);
	margin-inline-end: var(--space-md);
}

.alignright {
	float: right;
	margin-block-end: var(--space-sm);
	margin-inline-start: var(--space-md);
}

.aligncenter {
	clear: both;
	margin-inline: auto;
}

.alignwide {
	width: min(var(--wide-width), 100vw);
	margin-inline: calc(50% - min(var(--wide-width), 100vw) / 2);
}

.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.wp-caption {
	max-width: 100%;
}

.wp-caption-text,
figcaption,
.gallery-caption {
	margin-block-start: var(--space-xs);
	font-size: var(--font-size-sm);
	color: var(--color-muted);
}

.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--gallery-item-min-width), 1fr));
	gap: var(--space-sm);
	margin-block: var(--space-md);
}

.gallery-item {
	margin: 0;
}

/* 11. Generic content classes */

/* Base page and entry titles, used on every content view. */
.page-header {
	margin-block-end: var(--space-lg);
}

.page-title {
	font-size: var(--font-size-xl);
}

.entry-title {
	margin-block-end: var(--space-md);
	font-size: var(--font-size-xl);
}

/* Vertical rhythm for content blocks. */
.entry-content > * + * {
	margin-block-start: var(--space-md);
}

/* 12. Buttons */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.85rem 1.5rem;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn .icon {
	width: 1.1em;
	height: 1.1em;
}

.btn--sm {
	padding: 0.6rem 1.1rem;
	font-size: 0.85rem;
}

.btn--primary {
	background-color: var(--color-brand);
	color: #fff;
}

.btn--primary:hover,
.btn--primary:focus {
	background-color: var(--color-brand-dark);
	color: #fff;
}

.site-footer .btn--primary {
	background-color: var(--color-brand-light);
}

.site-footer .btn--primary:hover {
	background-color: #b4f28f;
}

.btn--outline {
	border-color: var(--color-border);
	background-color: var(--color-surface);
	color: var(--color-heading);
}

.btn--outline:hover,
.btn--outline:focus {
	border-color: var(--color-brand);
	color: var(--color-brand);
}

.btn--light {
	background-color: var(--color-brand-light);
	color: var(--color-dark);
}

.btn--light:hover,
.btn--light:focus {
	background-color: #b4f28f;
	color: var(--color-dark);
}

.btn--ghost-dark {
	border-color: rgba(255, 255, 255, 0.3);
	background: transparent;
	color: #fff;
}

.btn--ghost-dark:hover,
.btn--ghost-dark:focus {
	border-color: #fff;
	color: #fff;
}

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--color-brand);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
}

.link-arrow .icon {
	width: 1em;
	height: 1em;
}

.link-arrow:hover,
.link-arrow:focus {
	color: var(--color-brand-dark);
}

/* 13. Marketing templates (shared by home and service pages) */

.is-marketing .site-content {
	display: block;
	max-width: none;
	padding: 0;
}

.is-marketing .site-main {
	max-width: none;
}

.container {
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--space-md);
}

.section {
	padding-block: clamp(3rem, 7vw, 5rem);
}

.section--dark {
	background-color: var(--color-dark);
	color: var(--color-on-dark);
}

.section--dark h2,
.section--dark h3 {
	color: #fff;
}

.eyebrow {
	margin-block-end: 0.9rem;
	color: var(--color-brand);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.section--dark .eyebrow {
	color: var(--color-brand-light);
}

.section-title {
	font-size: clamp(1.9rem, 4vw, 2.75rem);
	font-weight: 800;
	letter-spacing: -0.03em;
}

.accent {
	color: var(--color-brand);
}

.section-head {
	display: grid;
	gap: 1rem;
	margin-block-end: 2.5rem;
}

.section-head p {
	max-width: 28rem;
	color: var(--color-muted);
}

@media (min-width: 48rem) {

	.section-head--split {
		grid-template-columns: 1fr 1fr;
		align-items: end;
	}

	.section-head--split > :last-child {
		justify-self: end;
	}
}

.cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
}

.fine-print {
	margin-block-start: 1rem;
	color: var(--color-muted);
	font-size: 0.8rem;
}

/* Icon tiles, tinted per tone. */
.icon-tile {
	display: inline-grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: var(--radius-md);
	background-color: var(--tile-bg, #e4f4e3);
	color: var(--tile-fg, var(--color-brand));
}

.icon-tile .icon {
	width: 1.4rem;
	height: 1.4rem;
}

.tone-green { --tile-bg: #e1f3df; --tile-fg: #1f7a33; --card-bg: #eef8ec; }
.tone-orange { --tile-bg: #fde9d3; --tile-fg: #e0801f; --card-bg: #fef4e8; }
.tone-blue { --tile-bg: #dde9fb; --tile-fg: #2a6fdb; --card-bg: #eaf1fc; }
.tone-purple { --tile-bg: #ece1fa; --tile-fg: #8a47d6; --card-bg: #f3ecfc; }
.tone-red { --tile-bg: #fbe0e0; --tile-fg: #d94a4a; --card-bg: #fdeeee; }

/* Process steps. */
.process-steps {
	display: grid;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.process-step {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.25rem 1rem;
	align-items: center;
}

.process-step .icon-tile {
	grid-row: span 3;
	border-radius: 50%;
}

.process-step__num {
	color: var(--tile-fg);
	font-size: 0.85rem;
	font-weight: 700;
}

.process-step h3 {
	font-size: 1.05rem;
	font-weight: 700;
}

.process-step p {
	color: var(--color-muted);
	font-size: 0.85rem;
}

@media (min-width: 56rem) {

	.process-steps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 2rem;
	}
}

/* Closing call-to-action. */
.cta-band h2 {
	font-size: clamp(1.6rem, 3.5vw, 2.25rem);
	font-weight: 800;
	letter-spacing: -0.02em;
}

.cta-band p {
	color: var(--color-on-dark-muted);
}

/* Visual placeholder used until real photography is added. */
.visual-placeholder {
	display: grid;
	place-items: center;
	min-height: 14rem;
	border-radius: var(--radius-lg);
	background: linear-gradient(135deg, #dcebd5, #f3ead6);
	color: var(--color-muted);
}

/* Trust strip (shared by home and service pages) */
.trust-strip {
	border-block: 1px solid var(--color-border);
}

.trust-strip__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
	margin-block: 0;
	padding-block: 1.5rem;
	list-style: none;
}

.trust-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.8rem;
	color: var(--color-muted);
}

.trust-item .icon {
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
	color: var(--color-heading);
}

.trust-item strong {
	display: block;
	color: var(--color-heading);
	font-size: 1.05rem;
}

@media (min-width: 48rem) {

	.trust-strip__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.trust-item + .trust-item {
		padding-inline-start: 1.5rem;
		border-inline-start: 1px solid var(--color-border);
	}
}


/* Simple content page template (page-templates/simple.php) */
.simple-hero {
	padding-block: 3rem 2.5rem;
	border-block-end: 1px solid var(--color-border);
}

.simple-hero__inner {
	max-width: 52rem;
}

.simple-hero__title {
	margin-block: 0.5rem 1rem;
	font-size: clamp(2rem, 5vw, 3.25rem);
	line-height: 1.1;
	letter-spacing: -0.03em;
}

.simple-hero__lead {
	max-width: 40rem;
	color: var(--color-muted);
	font-size: 1.1rem;
}

.simple-body {
	max-width: 52rem;
	padding-block: 2.5rem 4rem;
	line-height: 1.7;
}

.simple-body h2 {
	margin-block-start: 2.25rem;
	font-size: 1.5rem;
}

.simple-body h3 {
	margin-block-start: 1.5rem;
	font-size: 1.15rem;
}

.simple-body dl dt {
	margin-block-start: 1.25rem;
	font-weight: 700;
	color: var(--color-heading);
}

.simple-body dl dd {
	margin-inline-start: 0;
	color: var(--color-muted);
}

.simple-body .simple-note {
	padding: 1rem 1.25rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
}

.simple-body .wp-block-buttons,
.simple-body .simple-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-block-start: 1.5rem;
}

.simple-body a.btn {
	text-decoration: none;
}

/* Submenu tap toggle (added by navigation.js), mobile only. */
.submenu-toggle {
	display: none;
}

@media (max-width: 47.99rem) {

	.primary-navigation .nav-menu li.menu-item-has-children {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}

	.submenu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.5rem;
		height: 2.5rem;
		background: var(--color-surface);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-sm);
		color: var(--color-heading);
		font-size: 1.25rem;
		cursor: pointer;
	}

	.submenu-toggle[aria-expanded="true"] span {
		display: inline-block;
		transform: rotate(45deg);
	}

	.primary-navigation .nav-menu li.menu-item-has-children > ul {
		flex-basis: 100%;
		padding-inline-start: 1rem;
	}

	.primary-navigation .nav-menu li.is-tapped > ul {
		display: block;
	}

	/* On mobile, only the tap toggle opens a submenu. */
	.primary-navigation .nav-menu li.is-open:not(.is-tapped) > ul {
		display: none;
	}
}