/* Home Repair & DIY: the workshop look on top of the Air Disasters stylesheet. Colours and fonts
   come from theme.json (slate, drywall greys, one safety-orange accent; Fira Sans throughout).
   This file only changes what the tokens can't: the dark masthead, the orange tab 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. */

:root {
	--hrd-masthead: var(--wp--preset--color--masthead);
	--hrd-safety: var(--wp--preset--color--safety);
	--hrd-safety-hover: #F59A45;
	--hrd-safety-active: #E07A1F;
	--hrd-on-dark: #F4F5F2;
	--hrd-on-dark-muted: #AEB9C3;
	--hrd-on-dark-rule: rgb(244 245 242 / 0.18);
	/* The parent's names for the same roles: focus rings and current-link marks follow the steel blue. */
	--fgw-green: var(--wp--preset--color--accent-1);
}

/* ---- Masthead: a dark workshop band with a safety-orange edge ------------------------------------ */
.fgw-header { background: var(--hrd-masthead); border-bottom: 4px solid var(--hrd-safety); color: var(--hrd-on-dark); }
.fgw-header :focus-visible { outline-color: var(--hrd-safety); }
.fgw-header .fgw-wordmark a, .fgw-header .fgw-wordmark a:hover { color: var(--hrd-on-dark); text-decoration: none; }
.fgw-header .fgw-tagline.wp-block-site-tagline { color: var(--hrd-on-dark-muted); }
.fgw-header .fgw-masthead__bar > .fgw-search--icon { border-left-color: var(--hrd-on-dark-rule); }
.fgw-header .fgw-search--icon .wp-block-search__button { color: var(--hrd-on-dark); }
.fgw-header .fgw-search--icon .wp-block-search__button:is(:hover, :focus-visible) { color: var(--hrd-safety); }
.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(--hrd-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(--hrd-on-dark); border-bottom-color: var(--hrd-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(--hrd-safety); }
.fgw-header .fgw-nav .wp-block-navigation__responsive-container-open { color: var(--hrd-on-dark); }
.fgw-header .fgw-nav .wp-block-navigation__responsive-container-open:is(:hover, :focus-visible) { color: var(--hrd-safety); }
.fgw-nav .is-menu-open .wp-block-navigation-item__content.wp-block-navigation-item__content { font-family: var(--wp--preset--font-family--fira-sans); }
.fgw-nav .is-menu-open .current-menu-item > .wp-block-navigation-item__content { border-bottom-color: var(--hrd-safety); }

/* ---- Home: section heads carry a short orange tab, like a strip of marking tape -------------------- */
.fgw-home .vvault-section__head { padding-top: 16px; background: linear-gradient(var(--hrd-safety), var(--hrd-safety)) left top / 40px 4px no-repeat; }
.fgw-home .vvault-section__head h2 { letter-spacing: -0.015em; }

/* The intro's button: safety orange with the ink label in every state (R30: one token pair). */
.fgw-home .vvault-hero__cta .vvault-btn {
	--vv-btn-bg: var(--hrd-safety);
	--vv-btn-fg: var(--wp--preset--color--contrast);
	--vv-btn-line: var(--hrd-safety);
	--vv-btn-bg-hover: var(--hrd-safety-hover);
	--vv-btn-bg-active: var(--hrd-safety-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 (jobs, rooms, problems): 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. */
.hrd-browse .vvault-topicrow__media { display: none; }
.hrd-browse .vvault-topicrow { grid-template-columns: minmax(0, 1fr) auto; }

/* ---- Home: how the library is sorted (small sites) ------------------------------------------------ */
.hrd-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) { .hrd-sorted__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container vv (min-width: 960px) { .hrd-sorted__tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hrd-sorted__tile { display: flex; flex-direction: column; min-width: 0; margin: 0; }
.hrd-sorted__media { margin: 0 0 12px; }
.hrd-sorted__frame { display: block; position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--vv-radius); background: var(--vv-soft); }
.hrd-sorted__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hrd-sorted__credit { margin: 8px 0 0; font-family: var(--vv-font-ui); font-size: 0.875rem; line-height: 1.4; color: var(--vv-muted); }
.hrd-sorted__credit .vvault-credit { font-size: inherit; color: inherit; }
.hrd-sorted__name { margin: 0; font-family: var(--vv-font-display); font-size: 1.25rem; font-weight: 600; line-height: 1.25; }
.hrd-sorted__blurb { margin: 8px 0 0; font-size: 1rem; line-height: 1.5; }
.hrd-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); }
.hrd-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) {
		.hrd-sorted__tile { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
		.hrd-sorted__media { display: contents; }
		.hrd-sorted__frame { grid-row: 1; }
		.hrd-sorted__credit { grid-row: 2; }
		.hrd-sorted__name { grid-row: 3; margin-top: 12px; }
		.hrd-sorted__blurb { grid-row: 4; }
		.hrd-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) {
	.hrd-sorted__tile { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: 16px; align-items: start; }
	.hrd-sorted__media { grid-row: 1 / span 3; margin: 0; }
	.hrd-sorted__frame { aspect-ratio: 1; }
	.hrd-sorted__credit { font-size: 0.875rem; }
	.hrd-sorted__terms { grid-column: 1 / -1; }
}

/* ---- Home: guides ---------------------------------------------------------------------------------- */
.hrd-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); }
.hrd-guides__cards .fgw-card__dek { color: var(--wp--preset--color--contrast); }
.hrd-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). */
.hrd-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). The spacing check reads Fira Sans's
   tall ascent as an uneven inset here although the rows match the Air Disasters page exactly. */
.vvault-faqs { --vv-pad-intent: asym; }