/*
Theme Name: Visible Ventures
Theme URI: https://visible.im/
Description: Block child theme for visible.im. Replaces the Oxygen Builder templates with core Gutenberg blocks, template parts and theme.json. Colours, type sizes and spacing are measured from the Oxygen render, so the front end matches. Header, footer and page content are all editable in the Site Editor / block editor.
Author: Matter Solutions
Version: 1.1.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
Template: twentytwentyfive
Text Domain: visible-ventures
Tags: block-theme, full-site-editing, one-column
*/

/* Every value below was measured off the Oxygen render at a 1366px viewport.
   Reference numbers are in comments so future edits stay honest. */

/* ---------------------------------------------------------------
   1. Header — logo flush top-left, nav right
   --------------------------------------------------------------- */

/* Header and footer sit in their own containers, not the 780px text column.
   The header runs 1168 wide so the logo lands where it does in the original;
   the footer copy lines up with the 1120 card container. */
.vv-header > * {
	max-width: 1168px;
	margin-inline: auto;
}

.vv-footer > * {
	max-width: 1120px;
	margin-inline: auto;
}

.vv-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--wp--preset--color--base);
}

/* Logo box renders 189 x 142 in the original. If the source PNG is square and
   comes out 189 tall, swap to height:142px;width:auto instead. */
.vv-header .wp-block-site-logo img {
	display: block;
	width: 189px;
	height: auto;
}

.vv-header .wp-block-navigation {
	--navigation-layout-gap: 40px;
}

.vv-header .wp-block-navigation-item__content {
	padding: 12px 32px;                       /* active pill measured 116px wide */
}

/* The current page keeps the pale band colour behind it, as in the original. */
.vv-header .current-menu-item > .wp-block-navigation-item__content,
.vv-header .current_page_item > .wp-block-navigation-item__content {
	background-color: var(--wp--preset--color--accent-4);
}

/* ---------------------------------------------------------------
   2. Hero — white band with the page title
   --------------------------------------------------------------- */

.vv-hero {
	background-color: var(--wp--preset--color--base);
}

.vv-hero .wp-block-post-title {
	margin: 0;
	letter-spacing: -0.015em;
}

/* ---------------------------------------------------------------
   3. Content band — pale blue-grey, everything centred
   --------------------------------------------------------------- */

.vv-band {
	background-color: var(--wp--preset--color--accent-4);
}

.vv-band .entry-content {
	text-align: center;
}

/* Original used <br><br> between paragraphs: one blank 40px line, which is
   exactly the 40px blockGap in theme.json. Nothing to add here. */

/* ---------------------------------------------------------------
   4. Icon cards
   --------------------------------------------------------------- */

.vv-cards {
	margin-top: 63px;                          /* last text box -> card top */
	gap: 52px;
	align-items: flex-start;
}

.vv-card {
	background-color: var(--wp--preset--color--base);
	padding: 46px 30px 57px;
	text-align: center;
}

/* Beats core's flow blockGap (`:where` = zero specificity) so the card's
   internal rhythm is the one measured off the original, not 40px everywhere. */
.vv-card > * {
	margin-block: 0;
}

.vv-icon {
	display: block;
	color: var(--wp--preset--color--accent-1);
	margin-block: 0 33px;                       /* icon bottom -> title top */
}

.vv-icon svg {
	display: block;
	width: 60px;
	height: 60px;
	margin-inline: auto;
}

.vv-card-title {
	margin-block: 0 18px !important;                          /* title -> body */
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	color: var(--wp--preset--color--accent-7);
	text-transform: uppercase;
	line-height: 1.2;                          /* 31 / 26 */
}

.vv-card p {
	margin-block: 0;
	line-height: 1.65;                         /* 28 / 17 */
}

/* ---------------------------------------------------------------
   5. Footer — brand red band, copy left-aligned to the container
   --------------------------------------------------------------- */

.vv-footer {
	background-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
}

.vv-footer p {
	margin-block: 0;
	color: var(--wp--preset--color--base);
	font-weight: 700;
}

.vv-footer a {
	color: var(--wp--preset--color--base);
}

/* ---------------------------------------------------------------
   6. Quality floor
   --------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------
   7. Mobile — logo centres, cards stack, hero title stays large
   --------------------------------------------------------------- */

@media (max-width: 781px) {
	.vv-header > .wp-block-group {
		flex-direction: column;
		gap: 16px;
	}

	.vv-header .wp-block-site-logo img {
		width: 169px;
	}

	.vv-cards {
		margin-top: 52px;
		gap: 40px;
	}

	.vv-people {
		flex-direction: column-reverse;
	}
}

/* ---------------------------------------------------------------
   8. People page
   --------------------------------------------------------------- */

.vv-people {
	gap: 52px;
	align-items: flex-start;
	text-align: left;
}

.vv-people h2 {
	margin-block: 0 12px;
}

.vv-people p {
	margin-block: 0 24px;
}

.vv-people figure.wp-block-image img {
	height: auto;
}