/*
Theme Name: Aviation & Survival Support
Theme URI: https://a-ss.spdev.no/
Author: Screen Partner
Author URI: https://screenpartner.no/
Description: Native WordPress block theme (FSE) for Aviation & Survival Support. theme.json-first design system translated from the project design tokens. No page builder, no jQuery — built the most native WordPress way.
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aviation-survival
Tags: full-site-editing, block-patterns, block-styles, translation-ready, custom-colors, custom-logo, custom-menu, editor-style, featured-images, wide-blocks, accessibility-ready
*/

/*
 * Block themes do not auto-load this file on the front end — it is enqueued
 * by avss_enqueue_styles() in functions.php. The design system lives in
 * theme.json; this file holds only the small curated CSS layer (motion,
 * :has(), masks, glass, ::selection) that theme.json cannot express, added
 * as we build components together.
 */

/*
 * Box-sizing reset. WordPress core ships no universal border-box reset, so
 * custom block markup defaults to content-box — which makes `max-width` exclude
 * padding and quietly throws off any width: 100% + padding-inline container
 * (see the breadcrumbs/header gutter alignment). Set it once here so every
 * element — core blocks, custom blocks, theme markup — measures the same way.
 * Inherit pattern so a component can still opt a subtree back to content-box.
 */
html {
	box-sizing: border-box;
}

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

/*
 * Root-level block gap reset. theme.json's `styles.spacing.blockGap` (32px)
 * is there for prose rhythm inside post-content, but WordPress also applies
 * it to `:where(.wp-site-blocks) > *` — i.e. between the header part, <main>
 * and the footer part. Our top-level sections are full-bleed blocks that own
 * their own vertical padding, so that band is always wrong (it used to strand
 * the over-hero header's white wordmark on a white gap). Same zero-specificity
 * selector as core's, enqueued after global styles, so it wins on order alone
 * and any block can still opt back in.
 */
:where(.wp-site-blocks) > * {
	margin-block-start: 0;
}

/*
 * Structural lists inside A&S blocks (nav menus, card/contact/chip lists,
 * breadcrumbs, checklist) are layout containers, never prose — strip the UA
 * marker + indent once here so each block doesn't re-reset its own lists.
 * Scoped to the `avss-` namespace, which matches BOTH the editor wrapper
 * (`wp-block-avss-*`) and the server-rendered BEM roots (`avss-breadcrumbs`,
 * `avss-site-header`, …) that don't carry the `wp-block-` prefix. :where()
 * keeps it at zero specificity so a block — or a genuine prose list added
 * later — can opt back in without a specificity fight.
 */
:where([class*="avss-"]) :is(ul, ol) {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Font smoothing — matches the design mockups (sketches/css/base.css). Without
 * this, the same weight renders heavier (most visibly white-on-dark, e.g. the
 * hero/journey band), reading as a "fatter" font than the sketch. theme.json
 * cannot express font-smoothing, so set it once globally here.
 */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Brand text-selection highlight (theme.json cannot target ::selection). */
::selection {
	background: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--white);
}

/*
 * Team-reveal photo caption (About page): core centres figcaptions via
 * `:root :where(.wp-block-image figcaption)`; left-align it to the image's
 * edge to match the design, with a little more breathing room above.
 * theme.json cannot target figcaption alignment.
 */
.team-reveal figcaption {
	text-align: left;
	margin-top: 1rem;
}

/*
 * Hero used for body copy (e.g. About → "Who we are"): the hero description
 * defaults to the tight ingress leading meant for short ledes. Opt this
 * instance into the global text line-height (theme.json styles.typography,
 * --line-height--body = 1.53) so multi-line body copy reads correctly.
 */
.avss-hero.is-body-leading .avss-hero__desc {
	line-height: var(--wp--custom--line-height--body, 1.53);
}

/*
 * Legal/notice callout (Terms of sale, Terms of use, Privacy policy): a tinted
 * panel with an orange accent rule, used to flag draft/disclaimer copy. Mirrors
 * the sketch `.legal-notice` (sketches/css/layout.css). Applied via a paragraph
 * className; theme.json cannot express the border + tint, so it lives here.
 */
.avss-legal-notice {
	background: color-mix(in srgb, var(--wp--preset--color--orange) 8%, transparent);
	border-left: 3px solid var(--wp--preset--color--orange);
	padding: var(--wp--preset--spacing--40, 16px) var(--wp--preset--spacing--50, 20px);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--black-olive);
}

.avss-legal-notice strong {
	color: var(--wp--preset--color--red);
}

/*
 * Anchor / deep-link scroll behaviour. The header CTA and hero "Get in touch"
 * buttons deep-link to the contact-form section (id="contact"). Ease the jump
 * (theme.json cannot express scroll-behavior), gated on prefers-reduced-motion
 * for accessibility, and reserve a little headroom so the section never lands
 * flush to the viewport top — sized off the --header-height token.
 */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

.avss-contact-form[id] {
	scroll-margin-top: calc(var(--wp--custom--header-height, 88px) + 1.5rem);
}

/* Single-document download button (avss/document-download). */
.avss-doc-download {
	margin: var(--wp--preset--spacing--30, 1rem) 0;
}
.avss-doc-download__btn {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	background: var(--wp--preset--color--orange);
	color: #fff;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	border-radius: 999px;
	transition: filter 0.15s ease;
}
.avss-doc-download__btn:hover,
.avss-doc-download__btn:focus {
	filter: brightness(0.92);
	color: #fff;
}
.avss-doc-download__meta {
	font-weight: 400;
	font-size: 0.85em;
	opacity: 0.85;
}

/* Equipment groups on a capability page (avss/capability-groups).
   A build-less plugin block, so its styles live here with the other
   build-less blocks rather than in a bundle that does not exist. */
.avss-cap-groups {
	padding-block: clamp(48px, 6vw, 80px);
}
.avss-cap-groups__inner {
	width: 100%;
	max-width: calc(
		var(--wp--style--global--wide-size, 80rem) + 2 *
			var(--wp--style--root--padding-left, clamp(24px, 5vw, 80px))
	);
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left, clamp(24px, 5vw, 80px));
}
.avss-cap-groups__head {
	margin-block-end: clamp(24px, 3vw, 40px);
}
.avss-cap-groups__eyebrow {
	margin: 0 0 0.5rem;
	font-size: var(--wp--preset--font-size--meta, 0.875rem);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--orange);
}
.avss-cap-groups__title {
	margin: 0;
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
}
.avss-cap-groups__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--wp--preset--color--surface-grey);
	border: 1px solid var(--wp--preset--color--surface-grey);
}
.avss-cap-groups__link {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	height: 100%;
	padding: 1.25rem 1.5rem 1.5rem;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black-olive);
	text-decoration: none;
	transition: background 0.18s ease;
}
.avss-cap-groups__link:hover {
	background: var(--wp--preset--color--surface-light);
}
.avss-cap-groups__name {
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}
.avss-cap-groups__link:hover .avss-cap-groups__name {
	color: var(--wp--preset--color--orange);
}
.avss-cap-groups__count {
	font-size: var(--wp--preset--font-size--meta, 0.875rem);
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--grey-cool);
}
.avss-cap-groups__lede {
	margin-block-start: 0.25rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--wp--preset--color--grey-cool);
}
@media (prefers-reduced-motion: reduce) {
	.avss-cap-groups__link {
		transition: none;
	}
}