/**
 * MGMAC theme styles that theme.json cannot express:
 * sticky header, navigation look, page hero and footer details.
 */

/* Feel -------------------------------------------------------------------- */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--navy);
}

:where(a, .wp-element-button, .wp-block-button__link, .wp-block-navigation-item__content) {
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

/* A clear keyboard-focus ring everywhere (mouse clicks don't show it). */
:where(a, button, input, select, textarea, summary, .wp-element-button):focus-visible {
	outline: 2px solid var(--wp--preset--color--blue);
	outline-offset: 2px;
}

.mgmac-site-header :focus-visible,
.mgmac-site-footer :focus-visible,
.mgmac-page-hero :focus-visible {
	outline-color: var(--wp--preset--color--white);
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Layout ------------------------------------------------------------------ */

.mgmac-main {
	margin-block-start: 0;
}

.wp-site-blocks > footer {
	margin-block-start: 0;
}

.mgmac-template-section {
	padding-top: clamp(40px, 6vw, 64px);
	padding-bottom: clamp(40px, 6vw, 64px);
}

/* Header ------------------------------------------------------------------ */

.wp-site-blocks > header:has(.mgmac-site-header) {
	position: sticky;
	top: 0;
	z-index: 100;
}

.admin-bar .wp-site-blocks > header:has(.mgmac-site-header) {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.mgmac-site-header {
	padding-top: 10px;
	padding-bottom: 10px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.mgmac-brand {
	margin: 0;
}

.mgmac-brand img {
	display: block;
	width: auto;
	height: 48px;
	padding: 4px 8px;
	background: var(--wp--preset--color--white);
	border-radius: 4px;
}

/* Navigation -------------------------------------------------------------- */

.mgmac-nav {
	font-size: 0.95rem;
	font-weight: 600;
}

.mgmac-nav .wp-block-navigation__container {
	gap: 6px;
}

.mgmac-nav .wp-block-navigation-item__content {
	padding: 10px 14px;
	border-radius: 4px;
}

.mgmac-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
.mgmac-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus,
.mgmac-nav .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content {
	background: rgba(255, 255, 255, 0.15);
	text-decoration: none;
}

/* Drop-down sub-menus on desktop: white panel, gray links. */
@media (min-width: 600px) {
	.mgmac-nav .wp-block-navigation__submenu-container {
		min-width: 240px !important;
		padding: 8px 0;
		border: 0 !important;
		border-radius: 4px;
		background: var(--wp--preset--color--white) !important;
		box-shadow: 0 2px 10px rgba(10, 50, 102, 0.12);
	}

	.mgmac-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 10px 18px;
		border-radius: 0;
		color: var(--wp--preset--color--gray-text);
		font-size: 0.9rem;
		font-weight: 400;
		white-space: nowrap;
	}

	.mgmac-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
	.mgmac-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
		background: var(--wp--preset--color--surface);
		color: var(--wp--preset--color--navy);
		text-decoration: none;
	}
}

/* Page hero --------------------------------------------------------------- */

.mgmac-page-hero {
	padding-top: clamp(32px, 5vw, 52px);
	padding-bottom: clamp(32px, 5vw, 52px);
}

/* Short light-blue accent under the page title. */
.mgmac-page-hero .wp-block-post-title::after,
.mgmac-page-hero .mgmac-hero-title::after {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	margin-top: 14px;
	border-radius: 2px;
	background: #8fb8e8;
}

.mgmac-page-hero > * {
	margin-block: 0;
}

.mgmac-page-hero .wp-block-post-title,
.mgmac-page-hero .mgmac-hero-title {
	margin-bottom: 12px;
	color: var(--wp--preset--color--white);
}

.mgmac-page-hero .mgmac-page-subtitle,
.mgmac-page-hero .mgmac-page-subtitle p {
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
}

/* Limit the line length on the text, not the block: a narrower block would
   be centred by the hero's constrained layout. */
.mgmac-page-hero .mgmac-page-subtitle p {
	max-width: 640px;
}

.mgmac-hero-search {
	max-width: 480px;
	margin-top: 16px;
}

/* Footer ------------------------------------------------------------------ */

.mgmac-site-footer {
	color: rgba(255, 255, 255, 0.85);
}

.mgmac-footer-columns {
	gap: 32px;
	padding-top: 48px;
	padding-bottom: 32px;
}

.mgmac-site-footer h4 {
	margin: 0 0 12px;
	color: var(--wp--preset--color--white);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.mgmac-site-footer p {
	margin: 0 0 10px;
	font-size: 0.92rem;
}

.mgmac-site-footer a {
	color: #cfe0f7;
}

.mgmac-linkedin-link a {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 4px;
	font-weight: 600;
}

.mgmac-linkedin-link a:hover,
.mgmac-linkedin-link a:focus {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	text-decoration: none;
}

.mgmac-footer-bottom {
	margin-block-start: 0;
	padding: 16px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.mgmac-footer-bottom p {
	margin: 0;
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.82rem;
}