/* Accessibility base styles — not expressible via theme.json */

/*
 * Light/dark mode. Scope: the page-level background/text and light-surface
 * components (Child Safe box, data tables, mobile accordions) genuinely flip
 * between themes; the Royal Blue chrome (header, footer, buttons, nav) does
 * NOT need to change, since it's already a dark brand surface with light text
 * that reads correctly in both modes — only azure (links/accents) and gold
 * (focus rings/badges) get dark-optimized shades, matching the reference
 * mockup's own dark palette. New semantic variables (not WP preset colors,
 * which are too overloaded across light/dark roles to safely blanket-invert)
 * drive the handful of surfaces that do need to flip.
 */
:root {
	--r9660-bg: #ffffff;
	--r9660-surface: var(--wp--preset--color--powder-blue);
	--r9660-card-bg: #ffffff;
	--r9660-ink: var(--wp--preset--color--charcoal);
	--r9660-ink-soft: #3c4a66;
	--r9660-border: var(--wp--preset--color--powder-blue);
}

html[data-theme="dark"] {
	--r9660-bg: #0b1626;
	--r9660-surface: #10233f;
	--r9660-card-bg: #10233f;
	--r9660-ink: #eaf0fb;
	--r9660-ink-soft: #c3cfe5;
	--r9660-border: #1f3455;
	--wp--preset--color--azure: #4aa3ff;
	--wp--preset--color--gold: #ffc257;
}

html[data-theme="dark"] body {
	background: var(--r9660-bg);
	color: var(--r9660-ink);
}

html[data-theme="dark"] .wp-block-group.has-powder-blue-background-color {
	background: var(--r9660-surface) !important;
	color: var(--r9660-ink);
}

html[data-theme="dark"] .entry-content table th,
html[data-theme="dark"] .entry-content table td {
	border-color: var(--r9660-border);
}

html[data-theme="dark"] .entry-content table th {
	background: var(--r9660-surface);
}

html[data-theme="dark"] .entry-content table tbody tr:nth-child(even) {
	background: rgba(255, 255, 255, 0.03);
}

html[data-theme="dark"] .mobile-accordion__toggle,
html[data-theme="dark"] .mobile-accordion__body {
	border-color: var(--r9660-border);
}

html[data-theme="dark"] .mobile-accordion__toggle {
	background: var(--r9660-surface);
	color: var(--r9660-ink);
}

/*
 * Headings default to royal-blue text (theme.json), which reads fine on the
 * light bg but has poor contrast against the dark surfaces above (royal-blue
 * on near-black is a dark-on-dark pairing). Only the heading TEXT role needs
 * to change here — royal-blue stays untouched as a background/chrome color
 * (header, footer, buttons), which still works correctly in dark mode as-is.
 */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .wp-block-heading {
	color: var(--r9660-ink);
}

/* Skip-to-content link: hidden until focused, then visible for keyboard users */
.skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	z-index: 100000;
	padding: 0.75em 1.25em;
	background: var(--wp--preset--color--royal-blue);
	color: var(--wp--preset--color--white);
	font-weight: 700;
	text-decoration: none;
}

.skip-link:focus {
	top: 0;
}

/* Visible focus outline for all interactive elements (keyboard navigation) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

/* Respect reduced-motion preference */
@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;
	}
}

/* Screen-reader-only utility, visible on focus (for skip links / hidden labels) */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--royal-blue);
	clip: auto !important;
	clip-path: none;
	display: block;
	height: auto;
	width: auto;
	padding: 1em 1.5em;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100000;
}

/* Ensure body copy never dips under 16px, per WCAG readability guidance */
body {
	font-size: max(1rem, var(--wp--preset--font-size--medium));
}

/* Compact primary nav — core's default item padding makes the bar taller than needed */
.wp-block-navigation .wp-block-navigation-item__content {
	padding: 0.35em 0.75em;
}

/*
 * Our 7-item nav needs more room than core's default 600px hamburger breakpoint
 * assumes, so items were wrapping onto a second line instead of collapsing to
 * the mobile menu between ~600-900px. Extend the hamburger threshold to 900px
 * by inverting core's own rules for that range (its click-to-toggle JS already
 * works at any width — it just wasn't being given the chance to run here).
 */
@media (min-width: 600px) and (max-width: 900px) {
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}

	.wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}
}

/*
 * Homepage 3-column layout: left sidebar (Child Safe + Zone 8) / main (Our
 * Story) / right sidebar (Quick Links). Custom grid instead of wp:columns so
 * mobile stacking order (source order: sidebar-left, quicklinks, main) can
 * differ from desktop visual position (quicklinks placed after main via
 * grid-template-areas), matching the required mobile accordion sequence.
 */
.home-layout {
	margin-top: 2rem;
}

@media (min-width: 782px) {
	.home-layout {
		display: grid;
		grid-template-columns: 25% 1fr 25%;
		grid-template-areas: "sidebar-left main quicklinks";
		gap: 2rem;
		max-width: var(--wp--style--global--wide-size);
		margin-left: auto;
		margin-right: auto;
	}

	.home-layout__sidebar-left {
		grid-area: sidebar-left;
	}

	.home-layout__main {
		grid-area: main;
	}

	.home-layout__quicklinks {
		grid-area: quicklinks;
	}
}

/*
 * Standard page layout: main content + Quick Links sidebar, used on every
 * non-homepage page (page.html, page-district-map.html) so the sidebar is
 * consistent site-wide. Sidebar sits after main content in source order, so
 * mobile stacking (content first, sidebar below) needs no re-ordering trick.
 */
.page-layout {
	margin-top: 1rem;
}

@media (min-width: 782px) {
	.page-layout {
		display: grid;
		grid-template-columns: 1fr 280px;
		gap: 2rem;
		align-items: start;
		max-width: 1400px;
		margin-left: auto;
		margin-right: auto;
	}
}

/*
 * Data tables (e.g. Past District Governors, RISPPO Contacts) — wrapped in a
 * horizontally-scrolling .alignwide container by whoever authors the table,
 * since these tend to have more columns than fit at body-text width.
 */
.entry-content table {
	border-collapse: collapse;
	width: 100%;
}

.entry-content table th,
.entry-content table td {
	border: 1px solid var(--wp--preset--color--powder-blue);
	padding: 0.5em 0.75em;
	text-align: left;
	vertical-align: top;
}

.entry-content table th {
	background: var(--wp--preset--color--powder-blue);
	color: var(--wp--preset--color--royal-blue);
}

.entry-content table tbody tr:nth-child(even) {
	background: rgba(0, 0, 0, 0.02);
}

/*
 * Homepage sidebar accordions (Zone 8 badge, Quick Links).
 * Plain button + div (not <details>/<summary>) — Chrome's native details
 * collapse can't be reliably forced open via CSS once closed, which caused a
 * real bug: closing on mobile then widening back to desktop without a reload
 * left the content permanently stuck hidden with no way to reopen it. A plain
 * [hidden] attribute has no such special-cased browser behavior, so the
 * desktop override below is an unconditional guarantee, independent of
 * whatever state the JS toggle last left it in.
 */
.mobile-accordion__toggle {
	display: block;
	width: 100%;
	text-align: left;
	cursor: pointer;
	border: 1px solid var(--wp--preset--color--powder-blue);
	padding: 0.6em 0.9em;
	font-weight: 700;
	font-size: 1rem;
	font-family: inherit;
	color: var(--wp--preset--color--royal-blue);
	background: var(--wp--preset--color--powder-blue);
}

.mobile-accordion__toggle::after {
	content: '\25B8';
	float: right;
}

.mobile-accordion__toggle[aria-expanded="true"]::after {
	content: '\25BE';
}

.mobile-accordion__body {
	padding: 0.75em;
	border: 1px solid var(--wp--preset--color--powder-blue);
	border-top: none;
}

.mobile-accordion__body[hidden] {
	display: none;
}

@media (min-width: 782px) {
	.mobile-accordion__toggle {
		display: none;
	}

	/*
	 * Unconditional: always visible on desktop no matter what the JS last set,
	 * since [hidden] is a normal attribute selector with normal CSS override
	 * behavior — nothing like <details>'s special-cased collapse internals.
	 */
	.mobile-accordion__body,
	.mobile-accordion__body[hidden] {
		display: block !important;
		padding: 0;
		border: none;
	}
}

/* Light/dark mode toggle button, header utility bar */
.theme-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 999px;
	padding: 0.3em 0.75em;
	font-family: inherit;
	font-size: 0.78rem;
	font-weight: 700;
	color: inherit;
	cursor: pointer;
}

.theme-toggle:hover {
	border-color: #fff;
}

/* Homepage hero info bar: solid color, no text ever sits over the photo above it */
.hero-info {
	padding: 1.75rem 1.5rem;
	margin-top: 0;
}

.hero-info .eyebrow {
	display: block;
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	margin-bottom: 0.5rem;
}

.hero-info h1 {
	color: #fff;
	margin: 0 0 0.6rem;
}

.hero-info p {
	color: rgba(255, 255, 255, 0.92);
	max-width: 640px;
	margin: 0 0 1.25rem;
}

.hero-info .wp-block-buttons {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}

/* Compact Child Safe strip — a quiet, full-width band, not a wall of text */
.safe-strip {
	display: flex;
	align-items: center;
	gap: 1rem;
	background: var(--r9660-surface);
	border-top: 1px solid var(--r9660-border);
	border-bottom: 1px solid var(--r9660-border);
	padding: 0.9rem 1.5rem;
	margin: 1.5rem 0;
}

.safe-strip__badge {
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--wp--preset--color--gold);
	color: #3a2600;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}

.safe-strip p {
	margin: 0;
	font-size: 0.9rem;
}

/* Areas of Service grid (homepage) */
.areas-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.1rem;
	margin-top: 1.5rem;
}

.area-card {
	display: block;
	position: relative;
	background: var(--r9660-card-bg, #fff);
	border: 1px solid var(--r9660-border, var(--wp--preset--color--powder-blue));
	border-radius: 8px;
	padding: 1.25rem;
	text-decoration: none;
	color: var(--r9660-ink, var(--wp--preset--color--charcoal));
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	overflow: hidden;
}

.area-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 4px;
	height: 100%;
	background: var(--pc-color, var(--wp--preset--color--azure));
}

.area-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(20, 33, 61, 0.1);
}

.area-card h3 {
	margin: 0 0 0.4rem;
	font-size: 1.05rem;
}

.area-card p {
	margin: 0;
	font-size: 0.9rem;
	color: var(--r9660-ink-soft, var(--wp--preset--color--charcoal));
}

.area-card__cta {
	display: inline-block;
	margin-top: 0.75rem;
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--wp--preset--color--azure);
}

/* Centers a lone trailing card instead of leaving it stranded on the left —
   works for any card count, not just today's 7 (7 mod 3 = 1 orphan). */
.areas-grid > .area-card:nth-child(3n+1):last-child {
	grid-column: 2;
}

@media (max-width: 980px) {
	.areas-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.areas-grid > .area-card:nth-child(3n+1):last-child {
		grid-column: auto;
	}

	.areas-grid > .area-card:nth-child(2n+1):last-child {
		grid-column: 1 / span 2;
		justify-self: center;
		max-width: calc(50% - 0.55rem);
	}
}

@media (max-width: 640px) {
	.areas-grid {
		grid-template-columns: 1fr;
	}

	.areas-grid > .area-card:last-child {
		grid-column: auto;
		justify-self: stretch;
		max-width: none;
	}
}

.section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.section-head .wp-block-heading {
	margin: 0;
}

.footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 2.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.footer-grid ul {
	margin: 0;
}

@media (max-width: 760px) {
	.footer-grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}