/*
Theme Name: Texas Flying Club
Theme URI: https://www.texasflyingclub.com
Description: Custom child theme of Ollie for Texas Flying Club, Inc. — a member-owned nonprofit flying club at Coulter Field (KCFD), Bryan, TX. Design tokens live in theme.json; content structure follows the club's approved site design.
Author: Texas Flying Club
Template: ollie
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tfc
*/

/* Aircraft type/rate pill labels — used by patterns/aircraft-card.php. No CSS
existed for this class, so the pills rendered as plain unstyled text. */
.tfc-badge {
	display: inline-block;
	padding: 4px 12px;
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: 999px;
	background-color: var(--wp--preset--color--tertiary);
	color: var(--wp--preset--color--secondary);
	font-size: 12.5px;
}

/* Hero Light eyebrow/heading/subhead — left-align instead of centered.
Matched by Hero Light's distinctive padding, not a class: the interior
pages built before this change already have the centered markup copied
into their own post_content (patterns/hero-light.php only affects pages
inserted after an edit — WordPress patterns aren't live-synced once
inserted, see the theme README). This one rule covers both those pages
and any new page built from the pattern going forward. */
.wp-block-group.alignfull[style*="padding-top:90px;padding-right:48px;padding-bottom:70px"] > .has-text-align-center {
	text-align: left;
}

/* Hero Dark "Titles" column (kicker + H1) — cap the line width without
centering it. Previously used layout:"constrained", which auto-centers
its children (margin-inline:auto) inside the available width — that's a
block-editor convention for centered content columns, not for pinning a
narrow column to the left. It pushed the kicker/H1 ~150px right of the
subhead and buttons below them, which aren't width-constrained the same
way. This just caps the width and lets it sit flush left like everything
else in the hero. */
.tfc-hero-title-col {
	max-width: 560px;
}

/* Focus indicator. The theme defined none at all, so every focusable control fell
back to the browser's default ring — which measured 1.4:1 against the coral primary
button, i.e. effectively invisible on the site's most important control, and which
varies between browsers besides.

Two rings rather than one, because this site puts controls on both very light
surfaces (Base #f5f9fc, Section Tint) and very dark ones (Navy #03172c, the hero
photo, the meetings banner), and no single colour clears 3:1 against both. The inner
light halo carries the contrast on dark surfaces, the outer dark ring on light ones,
so one of the two is always visible whatever sits behind the control.

:focus-visible rather than :focus, so the ring appears for keyboard and other
non-pointer input but not on mouse click.

Ollie already covers input/textarea/select, and WPForms overrides its own fields with
a 2px blue ring that measures 5.4:1 against the page — both are fine, so this rule
deliberately doesn't fight them for specificity. It exists because links and buttons,
including the coral primary CTA, had no theme focus style at all and fell through to
the browser default. */
:is(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
	outline: 2px solid var(--wp--preset--color--main);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--wp--preset--color--base);
}

/* The skip-link target is <main>, which functions.php makes focusable so that "Skip to
content" genuinely moves focus. Without this rule the browser then draws its default
focus ring around the whole content area — a full-width box every time someone uses
the skip link. Suppressing it is safe here: <main> isn't in the tab order and isn't a
control, so 2.4.7 Focus Visible doesn't apply to it. The landmark's own content is
what tells the user where they've landed. */
main[tabindex="-1"]:focus,
main[tabindex="-1"]:focus-visible {
	outline: none;
}