/*
Theme Name:  Monkey Base
Theme URI:   https://www.monkeytronics.co.nz
Description: Parent theme shared by every Monkeytronics-group site. Holds fonts, layout, components, block patterns and shop templates. Never activate directly; activate a brand child theme.
Author:      Monkeytronics
Version:     0.2.0
Requires at least: 6.5
Requires PHP: 8.2
Text Domain: monkeytronics
*/

/* Everything a core block cannot express through theme.json lives here.
   Colours and sizes come from the presets, so a child theme restyles
   every component by changing theme.json alone. */

/* ---- header ------------------------------------------------------------ */
/* One flex row: logo, nav, cart, button. Distances are the old site's,
   which scale with the window: nav 3vw after the logo (42 px at 1425,
   50 at 1655), cart pushed right, button 3vw after the cart. The group's own gap is 0; margins do the work so
   the phone layout below can reorder the same four items. */
.monkey-logo {
	display: block;
	line-height: 0;
}
.monkey-logo img {
	height: var(--wp--custom--logo-height);
	width: auto;
}
.monkey-logo__icon {
	display: none;
}
.monkey-header > .monkey-nav {
	margin-left: 3vw;
}
.monkey-header .monkey-cart {
	display: inline-flex;
	align-items: center;
	margin-left: auto;
}
/* Item count beside the bag, as the old ribbon showed it: 16 px ink text,
   4.7 px to the right of the icon, on the icon's 25 px line. */
.monkey-cart__count {
	padding-left: 4.67px;
	font-size: 16px;
	line-height: 25px;
	color: var(--wp--preset--color--ink);
}
.monkey-header .monkey-header-cta {
	margin-left: 3vw;
}
/* Products folder, as measured on the old site: panel 232 px wide starting
   16 px left of the label, first row 10 px below it, no border, one 24 px
   line per item. The panel touches the label (no gap) so the pointer can
   travel down into it without the hover being lost. */
.monkey-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
	left: -16px;
	top: 100%;
	width: 232px;
	min-width: 0;
	padding: 10px 16px 8px;
	border: 0;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--paper);
}
.monkey-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item {
	width: 200px;
}
.monkey-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	padding: 0;
	line-height: 24px;
	color: var(--wp--preset--color--ink);
}
/* Cart: the old site's bag icon (its SVG, inline in the header pattern),
   25 px, ink, linking to the cart page. */
.monkey-header .monkey-cart {
	display: block;
	line-height: 0;
	color: var(--wp--preset--color--ink);
}
.monkey-header .monkey-cart svg {
	width: 25px;
	height: 25px;
	fill: currentColor;
	stroke: currentColor;
	stroke-width: 1px;
}
/* Burger: the old site's two 35 x 2 px bars, 11 px apart, in a 47 x 37
   button. Drawn with pseudo-elements over core's hidden three-bar icon. */
.monkey-header .wp-block-navigation__responsive-container-open {
	position: relative;
	width: 47px;
	height: 37px;
	padding: 0;
	color: var(--wp--preset--color--ink);
}
.monkey-header .wp-block-navigation__responsive-container-open svg {
	display: none;
}
.monkey-header .wp-block-navigation__responsive-container-open::before,
.monkey-header .wp-block-navigation__responsive-container-open::after {
	content: "";
	position: absolute;
	left: 6px;
	width: 35px;
	height: 2px;
	background: currentColor;
}
.monkey-header .wp-block-navigation__responsive-container-open::before {
	top: 12px;
}
.monkey-header .wp-block-navigation__responsive-container-open::after {
	top: 23px;
}
/* Phone and tablet, under 800 px (the old site's breakpoint): 30 px gutter,
   icon instead of the wordmark, no button; cart then burger at the right.
   Core collapses the navigation at 600 px; between 600 and 799 px the
   burger is forced the same way. */
@media (max-width: 799px) {
	.monkey-header {
		padding: 30px 30px 33px !important;
	}
	.monkey-logo__full {
		display: none;
	}
	.monkey-logo__icon {
		display: block;
	}
	.monkey-header .monkey-header-cta {
		display: none;
	}
	.monkey-header > .monkey-nav {
		order: 3;
		margin-left: 28px;
	}
	.monkey-header .monkey-cart {
		order: 2;
	}
	.monkey-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}
	.monkey-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

/* ---- section tones: a group gets a tone, children inherit text colour -- */
.monkey-tone-dark {
	color: var(--wp--preset--color--paper);
}
.monkey-tone-dark a:not(.wp-element-button) {
	color: var(--wp--preset--color--accent);
}
.monkey-tone-dark .wp-element-button,
.monkey-tone-dark .wp-block-button__link {
	background-color: var(--wp--preset--color--paper);
	border-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--brand);
}
.monkey-tone-dark .is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--paper);
}

/* ---- buttons: outline style on light tones ------------------------------- */
.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--brand);
}
.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--paper);
}

/* ---- hero: the old site's banner (see inc/hero.php for the numbers) ------ */
:root {
	--monkey-header-h: calc(64px + 2vw);
	/* The old site's content column: 4vw gutters, capped at 1440 px. Banner
	   heights are fractions of it, so they scale as the old grid did. */
	--monkey-content-w: min(92vw, 1440px);
}
/* Core puts a block gap between header, main and footer; the old site has
   none (the hero starts straight under the ribbon). */
body .wp-site-blocks > * + * {
	margin-block-start: 0;
}
.wp-block-cover.monkey-hero {
	min-height: var(--monkey-hero-h, 60vh);
	padding: 0;
	margin-bottom: 0;
}
/* Side gutter 4vw, but the old site caps the content at 1440 px and centres
   it, so on wider windows the gutter grows to keep that cap. Top and
   bottom padding depend on where the text sits. The whole text block can
   be nudged with the offset variables (set per page). */
/* Core doubles the position class to force width:auto; one more class here
   outranks it so percentages measure the full content width. */
.wp-block-cover.monkey-hero.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container {
	width: 100%;
	max-width: none;
	padding: 4vw max(4vw, calc((100% - 1440px) / 2)) 4vw;
	transform: translateY(var(--monkey-hero-off-y, 0px));
}
.wp-block-cover.monkey-hero.is-position-top-left .wp-block-cover__inner-container,
.wp-block-cover.monkey-hero.is-position-top-center .wp-block-cover__inner-container,
.wp-block-cover.monkey-hero.is-position-top-right .wp-block-cover__inner-container {
	padding-bottom: 6.67vw;
}
/* offset and width are percentages of the content width (gutters
   excluded), so the text block sits on the same grid line at any window
   width, as the old site's 24-column grid did. */
.monkey-hero .wp-block-cover__inner-container > * {
	max-width: var(--monkey-hero-text-w, none);
	margin: 0 0 0 var(--monkey-hero-off-x, 0px);
}
.monkey-hero .wp-block-cover__inner-container > * + * {
	margin-top: var(--monkey-hero-gap, 4vw);
}
/* The heading keeps the height of heading_lines lines, so its top stays put
   when it wraps to fewer lines than the old site's did. */
.monkey-hero .monkey-hero__heading {
	min-height: calc(var(--monkey-hero-h1-lines, 1) * 1.056em);
}
/* Optional picture above the heading (the 404 artwork). */
.monkey-hero .monkey-hero__mark {
	display: block;
	margin-top: 0;
	margin-bottom: 0;
}
.monkey-hero .monkey-hero__mark img {
	width: var(--monkey-hero-mark-w, auto);
	height: auto;
	border-radius: 0;
}
.monkey-hero .monkey-hero__mark + .monkey-hero__heading {
	margin-top: var(--monkey-hero-mark-gap, 0px);
}
/* A sub-line that starts further right ends at the same right edge. */
.monkey-hero .monkey-hero__sub {
	margin-left: calc(var(--monkey-hero-off-x, 0px) + var(--monkey-hero-sub-off, 0px));
	max-width: calc(var(--monkey-hero-text-w, 100%) - var(--monkey-hero-sub-off, 0px));
}
/* How the words sit inside their block (the old site's text-align), set
   per page with the align option. The block's own place comes from the
   position and offsets. */
.monkey-hero--align-center .wp-block-cover__inner-container {
	text-align: center;
}
.monkey-hero--align-center .wp-block-buttons {
	justify-content: center;
}
.monkey-hero--align-right .wp-block-cover__inner-container {
	text-align: right;
}
.monkey-hero--align-right .wp-block-buttons {
	justify-content: flex-end;
}
.monkey-hero h1 {
	font-size: clamp(2.9rem, 2.2rem + 2.3vw, 4.24rem);
	line-height: 1.056;
}
.monkey-hero h2 {
	font-size: clamp(2.14rem, 1.7rem + 1.5vw, 2.944rem);
	line-height: 1.11;
}
.monkey-hero h3 {
	font-size: clamp(1.76rem, 1.4rem + 1.1vw, 2.296rem);
	line-height: 1.14;
}
.monkey-hero h4 {
	font-size: clamp(1.38rem, 1.2rem + 0.55vw, 1.648rem);
	line-height: 1.17;
}
.monkey-hero p {
	font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.432rem);
	line-height: 1.5;
}
.monkey-hero p a {
	color: inherit;
	text-decoration: underline;
}
.monkey-hero .wp-block-button__link {
	line-height: 1.2;
}
/* Phones and tablets: the words stay over the image, as on the old site
   (485 px wide: 30 px gutter, top text 90 px under the ribbon, bottom text
   54 px above the edge). Each page tunes legibility with height_mobile
   (crop), focal_mobile (offset), text_width_mobile (wrap) and the mobile
   offsets. */
@media (max-width: 799px) {
	:root {
		--monkey-header-h: 127px;
	}
	.wp-block-cover.monkey-hero {
		min-height: var(--monkey-hero-h-m, var(--monkey-hero-h, 60vh));
	}
	.wp-block-cover.monkey-hero .wp-block-cover__image-background {
		object-position: var(--monkey-hero-pos-m, 50% 50%) !important;
	}
	.wp-block-cover.monkey-hero.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container {
		padding: 90px 30px 54px;
		transform: translateY(var(--monkey-hero-off-y-m, 0px));
	}
	.monkey-hero .wp-block-cover__inner-container > * {
		max-width: var(--monkey-hero-text-w-m, none);
		margin-left: var(--monkey-hero-off-x-m, 0px);
	}
	.monkey-hero .wp-block-cover__inner-container > * + * {
		margin-top: var(--monkey-hero-gap-m, 18px);
	}
	.monkey-hero .monkey-hero__sub {
		margin-left: 0;
		max-width: var(--monkey-hero-text-w-m, none);
	}
	.monkey-hero .monkey-hero__mark img {
		width: var(--monkey-hero-mark-w-m, auto);
	}
	.monkey-hero .monkey-hero__mark + .monkey-hero__heading {
		margin-top: var(--monkey-hero-mark-gap-m, 0px);
	}
}

/* ---- reduced motion: freeze animated icons ------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.monkey-feature img[src$=".gif"] {
		filter: none;
	}
}