/*
Theme Name: Global Climate Month
Theme URI: https://globalclimatemonth.org/
Author: 47817.org
Description: The theme for GlobalClimateMonth.org. Works with the Climate Month Maps plugin, which builds the home page, a page for every U.S. state and every country, maps of projects from 47817.org, and upcoming environmental events.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: globalclimatemonth
*/

:root {
	--gcm-blue: #185e9d;
	--gcm-deep: #0f3f6e;
	--gcm-gold: #f7a81b;
	--gcm-leaf: #6cbf4b;
	--gcm-ink: #14213a;
	--gcm-muted: #55607a;
	--gcm-line: #d6dde8;
	--gcm-paper: #ffffff;
	--gcm-ground: #f4f6f9;
	--gcm-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
	--gcm-body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

html { scroll-padding-top: 80px; }

body {
	margin: 0;
	background: var(--gcm-paper);
	color: var(--gcm-ink);
	font-family: var(--gcm-body);
	font-size: 1.0625rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
a { color: var(--gcm-blue); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--gcm-gold); outline-offset: 2px; }
h1, h2, h3, h4 { font-family: var(--gcm-display); line-height: 1.12; text-wrap: balance; }

.gcm-wrap { max-width: 1180px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.skip-link:focus {
	position: fixed; top: 8px; left: 8px; z-index: 100; width: auto; height: auto; clip: auto;
	background: var(--gcm-gold); color: var(--gcm-ink); padding: 10px 16px; border-radius: 8px; font-weight: 700;
}

/* Header */
.gcm-header {
	position: sticky; top: 0; z-index: 50;
	background: var(--gcm-deep); color: #fff;
}
.admin-bar .gcm-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .gcm-header { top: 46px; } }
.gcm-header .gcm-wrap {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding-block: 12px; flex-wrap: wrap;
}
.gcm-brand {
	display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none;
	font-family: var(--gcm-display); font-weight: 800; font-size: 1.05rem; line-height: 1;
}
.gcm-brand small {
	display: block; margin-top: 4px; font-weight: 600; font-size: .62rem; letter-spacing: .22em; color: var(--gcm-gold);
}
.gcm-brand svg { flex: none; }
.gcm-nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: 6px clamp(12px, 2.2vw, 24px); list-style: none; margin: 0; padding: 0; }
.gcm-nav a { color: #fff; text-decoration: none; font-weight: 600; font-size: .93rem; opacity: .9; }
.gcm-nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.gcm-nav .gcm-cta a, .gcm-nav a.gcm-cta-link {
	display: inline-flex; align-items: center; min-height: 40px;
	background: var(--gcm-gold); color: var(--gcm-ink); padding: 8px 16px; border-radius: 999px; opacity: 1;
}
.gcm-nav .gcm-cta a:hover { text-decoration: none; filter: brightness(1.05); }
@media (max-width: 720px) {
	.gcm-nav { width: 100%; overflow-x: auto; scrollbar-width: none; }
	.gcm-nav ul { flex-wrap: nowrap; }
	.gcm-nav li { flex: none; }
}

/* Content */
.gcm-main { padding-block: clamp(20px, 4vw, 40px) clamp(40px, 6vw, 72px); }
.gcm-page-title { font-size: clamp(2rem, 5vw, 3rem); margin: 0 0 20px; }
.gcm-content { max-width: 72ch; }
.gcm-content.is-wide { max-width: none; }
.gcm-content > * + * { margin-top: 1em; }
.gcm-post + .gcm-post { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--gcm-line); }
.gcm-post h2 a { color: var(--gcm-ink); text-decoration: none; }

/* Footer */
.gcm-footer { background: var(--gcm-deep); color: #fff; padding-block: 44px; }
.gcm-footer .gcm-wrap { display: flex; flex-wrap: wrap; gap: 24px 40px; justify-content: space-between; align-items: flex-end; }
.gcm-footer .big { font-family: var(--gcm-display); font-weight: 900; font-size: clamp(1.7rem, 5vw, 2.8rem); line-height: .95; margin: 0; }
.gcm-footer .big span { color: var(--gcm-gold); }
.gcm-footer p { color: #c9d6e6; font-size: .92rem; margin: 8px 0 0; }
.gcm-footer a { color: #fff; }
.gcm-sites { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; list-style: none; padding: 0; }
.gcm-sites a { display: inline-block; font-size: .82rem; padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); text-decoration: none; }
.gcm-sites a:hover { border-color: #fff; }
.gcm-foot-links { display: grid; gap: 6px; font-size: .95rem; }

/* Notice when the plugin is missing */
.gcm-missing { border: 1.5px dashed var(--gcm-line); border-radius: 14px; padding: 24px; color: var(--gcm-muted); }