/*
Theme Name: WECA 2025
Theme URI: https://weca.hamsonair.com
Description: WECA branded child theme of Twenty Twenty-Five for the Westchester Emergency Communications Association. Deep-blue and signal-red palette suited to an amateur radio / emergency communications club. Includes a dark mode toggle.
Author: WECA
Template: twentytwentyfive
Version: 1.2.2
*/

/* ---------------------------------------------------------------------------
   Brand touches
--------------------------------------------------------------------------- */
.wp-block-navigation .wp-block-navigation-item__content {
	font-weight: 600;
}

.wp-block-site-title a {
	font-weight: 800;
	letter-spacing: 0.5px;
}

.wp-block-button__link {
	border-radius: 6px;
}

/* ---------------------------------------------------------------------------
   Header navigation: keep it on one line, wrap gracefully when it can't
--------------------------------------------------------------------------- */
/* Tighter gaps + slightly smaller type so the full menu fits on one row */
.wp-block-navigation {
	--wp--style--block-gap: 1.15rem;
	font-size: 0.98rem;
	row-gap: 0.35rem;
}
.wp-block-navigation .wp-block-navigation__container {
	column-gap: 1.15rem;
	row-gap: 0.35rem;
	align-items: center;
}
/* On medium screens shrink a touch more before collapsing to the mobile menu */
@media (min-width: 782px) and (max-width: 1100px) {
	.wp-block-navigation {
		font-size: 0.9rem;
		--wp--style--block-gap: 0.85rem;
	}
	.wp-block-navigation .wp-block-navigation__container {
		column-gap: 0.85rem;
	}
}
/* Never let a single item's label break awkwardly across lines */
.wp-block-navigation-item__content {
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Dark mode toggle button
--------------------------------------------------------------------------- */
.weca-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-left: 0.75rem;
	padding: 0;
	border: 1px solid var(--wp--preset--color--contrast-2, #d6dee6);
	border-radius: 999px;
	background: transparent;
	color: inherit;
	cursor: pointer;
	line-height: 1;
	font-size: 1.15rem;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.weca-theme-toggle:hover {
	background: rgba(127, 127, 127, 0.14);
	transform: translateY(-1px);
}
.weca-theme-toggle:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1, #c8102e);
	outline-offset: 2px;
}
/* Show sun in dark mode, moon in light mode */
.weca-theme-toggle .icon-sun { display: none; }
.weca-theme-toggle .icon-moon { display: inline; }
html[data-theme="dark"] .weca-theme-toggle .icon-sun { display: inline; }
html[data-theme="dark"] .weca-theme-toggle .icon-moon { display: none; }

/* ---------------------------------------------------------------------------
   Dark mode palette — remap the theme's color presets
--------------------------------------------------------------------------- */
html[data-theme="dark"] {
	--wp--preset--color--base: #0e1621;
	--wp--preset--color--contrast: #e8eef5;
	--wp--preset--color--contrast-2: #2a3947;
	--wp--preset--color--accent-3: #16202c;      /* sky wash -> dark panel */
	color-scheme: dark;
}

/* Base page surfaces */
html[data-theme="dark"] body,
html[data-theme="dark"] .wp-site-blocks {
	background-color: #0e1621;
	color: #e8eef5;
}

/* Preset background/text utility classes need overriding in dark mode */
html[data-theme="dark"] .has-base-background-color { background-color: #0e1621 !important; }
html[data-theme="dark"] .has-base-color { color: #e8eef5 !important; }
html[data-theme="dark"] .has-contrast-color { color: #e8eef5 !important; }
/* The navy "contrast" banded sections read well slightly lighter on dark */
html[data-theme="dark"] .has-contrast-background-color { background-color: #10243b !important; }

/* Card borders / slate lines */
html[data-theme="dark"] .has-contrast-2-border-color { border-color: #2a3947 !important; }

/* Links */
html[data-theme="dark"] a {
	color: #7fb2e6;
}
html[data-theme="dark"] a:hover {
	color: #ff7a8a;
}

/* Card / group panels that used the light "sky wash" */
html[data-theme="dark"] .has-accent-3-background-color { background-color: #16202c !important; }

/* Headings stay bright */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4 {
	color: #f2f6fb;
}

/* Header bar in dark mode */
html[data-theme="dark"] .wp-block-navigation { color: #e8eef5; }

/* Smooth the theme switch */
body, .wp-site-blocks, a, .wp-block-group, .wp-block-column {
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* ---------------------------------------------------------------------------
   Mobile friendliness
--------------------------------------------------------------------------- */
/* Keep the header row tidy and allow it to wrap logo/nav on small screens */
@media (max-width: 781px) {
	/* Reduce header side padding so content isn't cramped on phones */
	.wp-site-blocks header .wp-block-group.alignfull {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}
	/* Site title a bit smaller on phones */
	.wp-block-site-title {
		font-size: 1.2rem !important;
	}
	/* weca-header-nowrap: keep the logo/title and the hamburger on ONE row.
	   The header's alignwide flex group inherits .is-layout-flex { flex-wrap:wrap },
	   which drops the nav (toggle + hamburger) onto its own line on phones. */
	.wp-site-blocks header .wp-block-group.alignwide.is-layout-flex {
		flex-wrap: nowrap !important;
		align-items: center;
	}
	/* The nav (toggle + hamburger) should hug the right, not stretch full width. */
	.wp-site-blocks header .wp-block-navigation {
		flex: 0 0 auto;
		width: auto;
	}
	/* Let the logo/title group take remaining space and shrink gracefully. */
	.wp-site-blocks header .wp-block-group.alignwide.is-layout-flex > .wp-block-group:first-child {
		min-width: 0;
		flex: 1 1 auto;
	}
	/* The mobile menu overlay (hamburger) — make links large, tappable */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		font-size: 1.25rem;
		padding: 0.35em 0;
	}
	/* weca-mobile-overlay-align: fix full-screen menu clinging to the right.
	   The nav carries items-justified-right / is-content-justification-right,
	   which the open overlay inherits. Force left alignment + padding. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		justify-content: flex-start;
		align-items: flex-start;
		padding: 4rem 1.5rem 2rem;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
	.wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container {
		align-items: flex-start;
		justify-content: flex-start;
		text-align: left;
		width: 100%;
	}
	/* Keep the close (X) button anchored top-right of the overlay. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		position: absolute;
		top: 0.75rem;
		right: 1rem;
	}
	/* Toggle sits next to the hamburger, always visible */
	.weca-theme-toggle {
		width: 44px;
		height: 44px;
		margin-left: 0.5rem;
	}
}

/* Ensure tap targets are at least 44px (accessibility / mobile) */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
}

/* Dark mode: style the mobile overlay menu correctly */
html[data-theme="dark"] .wp-block-navigation__responsive-container.is-menu-open {
	background-color: #10243b !important;
	color: #e8eef5 !important;
}
html[data-theme="dark"] .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: #e8eef5 !important;
}
/* Dark mode: hamburger + close icons visible */
html[data-theme="dark"] .wp-block-navigation__responsive-container-open,
html[data-theme="dark"] .wp-block-navigation__responsive-container-close {
	color: #e8eef5 !important;
}

/* Images and cards never overflow their container on small screens */
img, figure, .wp-block-image img { max-width: 100%; height: auto; }
.wp-block-columns { flex-wrap: wrap; }

/* Avoid a flash: the inline head script sets data-theme before paint */

/* ---------------------------------------------------------------------------
   Tables (repeater chart etc.) — light + dark mode
--------------------------------------------------------------------------- */
.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}
.wp-block-table th,
.wp-block-table td {
	border: 1px solid var(--wp--preset--color--contrast-2, #d6dee6);
	padding: 0.55em 0.8em;
}
.wp-block-table thead th {
	background-color: var(--wp--preset--color--accent-2, #0b3d66);
	color: #ffffff;
	text-align: left;
	font-weight: 700;
}

/* Dark mode: make the whole table readable */
html[data-theme="dark"] .wp-block-table table {
	color: #e8eef5;
	background-color: #16202c;
}
html[data-theme="dark"] .wp-block-table th,
html[data-theme="dark"] .wp-block-table td {
	border-color: #33475a !important;
	color: #e8eef5 !important;
}
html[data-theme="dark"] .wp-block-table thead th {
	background-color: #10314f !important;
	color: #ffffff !important;
}
/* Striped rows: override the theme's light stripe with a dark tint */
html[data-theme="dark"] .wp-block-table.is-style-stripes table,
html[data-theme="dark"] .wp-block-table.is-style-stripes {
	background-color: #16202c !important;
}
html[data-theme="dark"] .wp-block-table.is-style-stripes tbody tr:nth-child(odd) td {
	background-color: #1b2836 !important;
}
html[data-theme="dark"] .wp-block-table.is-style-stripes tbody tr:nth-child(even) td {
	background-color: #16202c !important;
}
html[data-theme="dark"] .wp-block-table.is-style-stripes th {
	background-color: #10314f !important;
}

/* Make tables scroll horizontally on small screens instead of overflowing */
.wp-block-table { overflow-x: auto; }
@media (max-width: 600px) {
	.wp-block-table th,
	.wp-block-table td { padding: 0.45em 0.55em; font-size: 0.92rem; }
}