/*
Theme Name: Sky Islands Climate
Theme URI: https://skyislandsclimate.net
Author: Stuart Broyles
Description: Custom block theme for Sky Islands Climate — extended-range forecast verification and teleconnection analysis for Arizona's sky island ranges. Built on the shared design tokens used across the site's static tracker tools.
Version: 1.0.2
Requires at least: 6.4
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: sky-islands-climate
*/

/* Most styling lives in theme.json (the modern block-theme approach).
   This file holds only things theme.json can't express cleanly. */

/* The signature element: a thin rule under the site header, running
   from desert brown to conifer green — the same elevation gradient
   (dry lowland to wet summit) that the whole project studies. Used
   exactly once, deliberately, not repeated as a decorative motif. */
.site-elevation-rule {
	height: 4px;
	background: linear-gradient(90deg, #8b5e3c 0%, #3d6b52 100%);
	border: none;
	margin: 0;
}

/* The banner appears under the header on every page. Sized to scale
   proportionally with the viewport (no forced height, so the full
   illustration always shows — no cropping), with a max-height safety
   cap for very wide screens using object-fit: contain rather than
   cover, so it never crops even when the cap kicks in. */
.site-banner-image {
	width: 100%;
	height: auto;
	max-height: 320px;
	object-fit: contain;
	display: block;
	margin-bottom: var(--wp--preset--spacing--lg);
}

@media (max-width: 600px) {
	.site-banner-image {
		max-height: 180px;
	}
}

/* Tabular figures for anything numeric — matters on a site that
   frequently displays precipitation totals, percentiles, index values. */
.wp-block-table,
.entry-content table {
	font-variant-numeric: tabular-nums;
}

/* Keep focus states visible — accessibility floor, not optional. */
a:focus-visible,
button:focus-visible,
input:focus-visible {
	outline: 2px solid #3d7a91;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}