/**
 * 10-base.css — element defaults (Part 2, Global): fonts (Task 6), links (Task 7), typography (Task 8),
 * accessibility — skip link, focus, landmarks, motion (Task 10), gutters (Task 14). Append in that order.
 * Uses --ric-* tokens only. Element selectors (0,0,1) lose to every Elementor widget rule by design.
 */

/* ==== Fonts (G-20) ====
 * Self-hosted latin subsets (assets/fonts, SIL OFL 1.1, see LICENSE.txt). Elementor's Google Fonts links are off
 * (inc/fonts.php); Elementor's own rules ask for "Poppins" / "Figtree" by name and get these faces. */
@font-face {
	font-family: "Figtree";
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url("../fonts/figtree-latin-normal-var.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Figtree";
	font-style: italic;
	font-weight: 300 900;
	font-display: swap;
	src: url("../fonts/figtree-latin-italic-var.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/poppins-latin-400.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/poppins-latin-500.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/poppins-latin-600.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/poppins-latin-700.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==== Links (G-04) ====
 * Colour comes from the kit (Theme Style › Link: primary, hover secondary). Links inside running text (a paragraph,
 * list item, table cell, definition or quote) are also underlined, so colour is not the only cue (WCAG 1.4.1); so is
 * TEC's "+ Google Map" link, inline in the venue address. Links that are not running text keep their own styles:
 * titles (links inside headings), navigation, icon lists, buttons, and widget controls such as accordion and toggle
 * headers, which sit directly in .page-content on Hello's default template. */
:is(.elementor-widget-text-editor, .elementor-tab-content, .page-content, .entry-content, .tribe-events-single-event-description) :is(p, li, dd, td, th, blockquote) a:not(.elementor-button):not([class*="button"]):not(:is(h1, h2, h3, h4, h5, h6, nav, .elementor-icon-list-items) a),
.tribe-events-address a:not(.elementor-button):not([class*="button"]) {
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
:is(.elementor-widget-text-editor, .elementor-tab-content, .page-content, .entry-content, .tribe-events-single-event-description) :is(p, li, dd, td, th, blockquote) a:not(.elementor-button):not([class*="button"]):not(:is(h1, h2, h3, h4, h5, h6, nav, .elementor-icon-list-items) a):hover,
.tribe-events-address a:not(.elementor-button):not([class*="button"]):hover {
	text-decoration-thickness: 2px;
}

/* ==== Typography (G-15) ====
 * Brand fonts for everything Elementor widgets do not style themselves: Hello's page titles and content (privacy,
 * wilderness guide), WPForms, The Events Calendar, the wildlife plugin, search. Element selectors only, so any
 * widget/plugin rule still wins. Colour for headings is limited to Hello's content area (raw headings elsewhere may
 * sit on dark backgrounds and inherit their colour). */
body {
	font-family: var(--ric-font-body);
	font-size: var(--ric-text-base);
	line-height: var(--ric-leading-normal);
	color: var(--ric-color-text);
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--ric-font-heading);
	font-weight: 600;
	line-height: var(--ric-leading-tight);
}
h1 { font-size: var(--ric-text-3xl); }
h2 { font-size: var(--ric-text-2xl); }
h3 { font-size: var(--ric-text-xl); }
h4 { font-size: var(--ric-text-lg); }
h5, h6 { font-size: var(--ric-text-base); }
.page-header .entry-title,
.site-main :is(h1, h2, h3, h4, h5, h6) {
	color: var(--ric-color-primary);
}

/* ==== Accessibility (G-02, G-03, G-19) ==== */

/* Skip link (inc/a11y.php prints it first in <body>): visually hidden until focused, then a visible 44px box. */
.ric-skip-link:not(:focus) {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.ric-skip-link:focus {
	position: fixed;
	inset-block-start: var(--ric-space-2);
	inset-inline-start: var(--ric-space-2);
	z-index: 100000;
	display: inline-flex;
	align-items: center;
	min-height: var(--ric-tap-min);
	padding: var(--ric-space-2) var(--ric-space-5);
	background: var(--ric-color-secondary);
	color: var(--ric-color-on-primary);
	font: 600 var(--ric-text-base) / 1.2 var(--ric-font-body);
	border-radius: var(--ric-radius-sm);
	text-decoration: none;
}
/* The skip target is focusable (tabindex="-1", from inc/a11y.php or, on Hello's own <main>, ric-global.js) only so
   focus can land on it; it needs no ring. */
main#content:focus {
	outline: none;
}

/* Focus ring (G-03): dark green outline plus a white halo, so it shows on white and on the dark green bands. */
:is(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]), [role="button"], [role="link"]):focus-visible {
	outline: var(--ric-focus-ring);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--ric-color-bg), 0 0 0 5px var(--ric-color-focus);
}
/* The mobile dropdown clips overflow, so an outside ring would be cut: draw it inside the item instead. */
.elementor-nav-menu--dropdown.elementor-nav-menu__container a:focus-visible {
	outline-offset: -4px;
	box-shadow: inset 0 0 0 6px var(--ric-color-bg);
}
/* The home Call to Action band (G-36: widget 75162cba, a white button on the #1B3B1A band). The ring above is drawn in
   the band's own colour there and its white halo merges into the button, so use the amber ring of the 404 band
   (53-404.css) with a band-coloured gap: amber is 6.98:1 on #1B3B1A, the gap 12.5:1 against the white button. The site's
   other Call to Action (Learn More: a dark button on a light panel) keeps the ring above. */
.elementor-element-75162cba .elementor-cta__button:focus-visible {
	outline-color: var(--ric-color-accent);
	box-shadow: 0 0 0 2px var(--ric-color-secondary), 0 0 0 5px var(--ric-color-accent);
}

/* Motion: honour reduced-motion everywhere (the wildlife plugin only did it on its own pages; Task 15 scopes its copy). */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	/* !important: has to beat Elementor's per-element animation and transition declarations. */
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==== Gutters (G-30) ====
 * One mobile page gutter (--ric-gutter, 16px). Hello's content area (privacy, wilderness guide) used 10px, and
 * Hello's page title on Elementor pages sat at 10px. Padding only: Section 2 (Task 20) owns these elements' widths. */
@media (max-width: 767px) {
	body:not([class*="elementor-page-"]) .site-main {
		padding-inline: var(--ric-gutter);
	}
	body:not([class*="elementor-page-"]) .page-header .entry-title {
		padding-inline: 0;
	}
	body[class*="elementor-page-"] .page-header .entry-title {
		padding-inline: var(--ric-gutter);
	}
}