/* Space Missions: the night-sky look on top of the Air Disasters stylesheet. Colours and fonts come
   from theme.json (paper page, night-ink text, a night-sky masthead, one mission-brass accent;
   Source Serif 4 for titles and reading text, IBM Plex Sans for the interface). This file only
   changes what the tokens can't: the dark masthead, the brass rule over each home section, the
   intro's button and the home sections the plugin doesn't draw. Spacing stays on the
   4/8/12/16/24/32 px scale. Built from the Home Repair & DIY child stylesheet. */

/* Fallback metrics so the swap from Georgia / Arial to the web fonts barely moves the text. */
@font-face { font-family: "Source Serif Fallback"; src: local("Georgia"); size-adjust: 104%; ascent-override: 88%; descent-override: 29%; line-gap-override: 0%; }
@font-face { font-family: "Plex Sans Fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 102%; ascent-override: 100%; descent-override: 27%; line-gap-override: 0%; }

:root {
	--sm-masthead: var(--wp--preset--color--masthead);
	--sm-brass: var(--wp--preset--color--brass);
	--sm-brass-hover: #D6AB60;
	--sm-brass-active: #B8893A;
	--sm-on-dark: #EEF0F3;
	--sm-on-dark-muted: #A9B3C1;
	--sm-on-dark-rule: rgb(238 240 243 / 0.18);
	/* The parent's names for the same roles: focus rings and current-link marks follow the deep blue. */
	--fgw-green: var(--wp--preset--color--accent-1);
	--fgw-ui: var(--wp--preset--font-family--plex-sans);
}

/* Reading text and titles come from one variable serif: let the browser pick the optical size, so
   18px text draws the text cut and 48px titles the display cut (R32). */
body { font-optical-sizing: auto; }

/* ---- Masthead: a night-sky band with a thin brass edge -------------------------------------------- */
.fgw-header { background: var(--sm-masthead); border-bottom: 2px solid var(--sm-brass); color: var(--sm-on-dark); }
.fgw-header :focus-visible { outline-color: var(--sm-brass); }
.fgw-header .fgw-wordmark a, .fgw-header .fgw-wordmark a:hover { color: var(--sm-on-dark); text-decoration: none; }
.fgw-header .fgw-tagline.wp-block-site-tagline { color: var(--sm-on-dark-muted); }
.fgw-header .fgw-masthead__bar > .fgw-search--icon { border-left-color: var(--sm-on-dark-rule); }
.fgw-header .fgw-search--icon .wp-block-search__button { color: var(--sm-on-dark); }
.fgw-header .fgw-search--icon .wp-block-search__button:is(:hover, :focus-visible) { color: var(--sm-brass); }
.fgw-header .fgw-search--icon .wp-block-search__input { color: var(--wp--preset--color--contrast); }
/* Links on the band (the phone menu opens on the light page colour and keeps the parent's colours). */
.fgw-header .fgw-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content { color: var(--sm-on-dark); }
.fgw-header .fgw-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content:is(:hover, :focus-visible) { color: var(--sm-on-dark); border-bottom-color: var(--sm-on-dark-muted); }
.fgw-header .fgw-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .current-menu-item > .wp-block-navigation-item__content { border-bottom-color: var(--sm-brass); }
.fgw-header .fgw-nav .wp-block-navigation__responsive-container-open { color: var(--sm-on-dark); }
.fgw-header .fgw-nav .wp-block-navigation__responsive-container-open:is(:hover, :focus-visible) { color: var(--sm-brass); }
.fgw-nav .is-menu-open .wp-block-navigation-item__content.wp-block-navigation-item__content { font-family: var(--wp--preset--font-family--source-serif); }
.fgw-nav .is-menu-open .current-menu-item > .wp-block-navigation-item__content { border-bottom-color: var(--sm-brass); }

/* ---- Home: section heads carry a short brass rule, like the line under a mission patch ------------- */
.fgw-home .vvault-section__head { padding-top: 16px; background: linear-gradient(var(--sm-brass), var(--sm-brass)) left top / 32px 2px no-repeat; }
.fgw-home .vvault-section__head h2 { letter-spacing: -0.015em; }

/* The intro's button: brass with the night-ink label in every state (R30: one token pair). */
.fgw-home .vvault-hero__cta .vvault-btn {
	--vv-btn-bg: var(--sm-brass);
	--vv-btn-fg: var(--wp--preset--color--contrast);
	--vv-btn-line: var(--sm-brass);
	--vv-btn-bg-hover: var(--sm-brass-hover);
	--vv-btn-bg-active: var(--sm-brass-active);
	--vv-ring: var(--wp--preset--color--contrast);
	border-radius: var(--vv-radius);
}
.fgw-home .vvault-hero__eyebrow { color: var(--wp--preset--color--accent-4); }
.fgw-home .vvault-hero__frame { border-radius: var(--vv-radius); }
/* Phones: the parent runs the hero picture edge to edge, so it loses its corners. */
@media (max-width: 781px) { .fgw-home .vvault-hero__frame { border-radius: 0; } }

/* Browse rows (programs, vehicles, destinations): names and counts only. Their pictures would be the videos'
   YouTube thumbnails, which are often lettered, so the lists stay text like the home board's. */
.sm-browse .vvault-topicrow__media { display: none; }
.sm-browse .vvault-topicrow { grid-template-columns: minmax(0, 1fr) auto; }

/* ---- Home: how the library is sorted (small sites) ------------------------------------------------ */
.sm-sorted__tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px 24px; margin: 0; padding: 0; list-style: none; }
@container vv (min-width: 560px) { .sm-sorted__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container vv (min-width: 960px) { .sm-sorted__tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sm-sorted__tile { display: flex; flex-direction: column; min-width: 0; margin: 0; }
.sm-sorted__media { margin: 0 0 12px; }
.sm-sorted__frame { display: block; position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--vv-radius); background: var(--vv-soft); }
.sm-sorted__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sm-sorted__credit { margin: 8px 0 0; font-family: var(--vv-font-ui); font-size: 0.875rem; line-height: 1.4; color: var(--vv-muted); }
.sm-sorted__credit .vvault-credit { font-size: inherit; color: inherit; }
.sm-sorted__name { margin: 0; font-family: var(--vv-font-display); font-size: 1.25rem; font-weight: 600; line-height: 1.25; }
.sm-sorted__blurb { margin: 8px 0 0; font-size: 1rem; line-height: 1.5; }
.sm-sorted__terms { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--vv-line); font-family: var(--vv-font-ui); font-size: 0.9375rem; line-height: 1.5; color: var(--vv-muted); }
.sm-sorted__terms a { color: var(--vv-ink); }
/* R36: tiles in one row share their rows (picture, credit, name, blurb, terms), so a two-line photo credit
   can't push one tile's name below its neighbours'. The tile spans five rows of the list's grid. */
@container vv (min-width: 560px) {
	@supports (grid-template-rows: subgrid) {
		.sm-sorted__tile { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
		.sm-sorted__media { display: contents; }
		.sm-sorted__frame { grid-row: 1; }
		.sm-sorted__credit { grid-row: 2; }
		.sm-sorted__name { grid-row: 3; margin-top: 12px; }
		.sm-sorted__blurb { grid-row: 4; }
		.sm-sorted__terms { grid-row: 5; align-self: start; }
	}
}
/* Phones: picture on the left, name and description beside it, so four tiles don't fill four screens. */
@container vv (max-width: 559px) {
	.sm-sorted__tile { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: 16px; align-items: start; }
	.sm-sorted__media { grid-row: 1 / span 3; margin: 0; }
	.sm-sorted__frame { aspect-ratio: 1; }
	.sm-sorted__credit { font-size: 0.875rem; }
	.sm-sorted__terms { grid-column: 1 / -1; }
}

/* ---- Home: guides ---------------------------------------------------------------------------------- */
.sm-guides__cards .fgw-card { padding: 24px; border: 1px solid var(--vv-card-line); border-radius: var(--vv-radius); background: var(--wp--preset--color--accent-5); }
.sm-guides__cards .fgw-card__dek { color: var(--wp--preset--color--contrast); }
.sm-guides__cards .fgw-card__meta { margin-top: auto; }

/* Guide cards anywhere: the parent's dek grey is tuned for its cream page. */
.fgw-card__dek { color: var(--wp--preset--color--contrast); }

/* The browse row's group stays in the page when all three lists are empty: take it out so the
   sections around it keep the one 40 px rhythm (R25). */
.sm-browse:not(:has(.vvault-homeblock)) { display: none; }

/* FAQ list: a frame of full-width question rows divided by rules, each row carrying its own
   12 px padding, so the list itself has none (R34 intent, as on the DIY site). */
.vvault-faqs { --vv-pad-intent: asym; }