/*
Theme Name: Grönblom
Theme URI: https://gronblom.fi/
Author: Grönblom Machines Oy
Description: Grönblom Machines Oy:n sivuston lohkoteema. Värit, typografia ja mitoitus seuraavat Haas Automationin visuaalista järjestelmää.
Version: 1.0.11
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gronblom
*/

/* Everything that theme.json cannot express lives here. Colours and fonts come from the
   theme.json presets so the editor and the front end always agree. */

:root {
	/* Two-tone like haascnc.com's diagonal banners: silver on the text side, dark steel on the photo side.
	   The split (46%, 105deg) lands just left of the photo column at desktop widths. The dark side is flat
	   because the hero PNG has that exact colour baked in as its backdrop. */
	--gm-hero: linear-gradient(105deg, #F0F0F0 0%, #F0F0F0 46%, #2B2B2F 46.2%, #2B2B2F 100%);
	--gm-hairline: 1px solid var(--wp--preset--color--rule);
	--gm-radius: 4px;
}

/* Grids built from flow-layout groups: the block-gap margin WordPress adds between siblings
   would otherwise offset every cell after the first. */
.gm-people > .gm-person,
.gm-rows > .gm-row { margin-block-start: 0; }

/* Template sections (header, breadcrumb, main, footer) butt up against each other; they carry their
   own padding, so the global block gap must not open a white strip between them. */
.wp-site-blocks > * + * { margin-block-start: 0; }

/* ---- Text utilities -------------------------------------------------------------- */

.gm-eyebrow {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--steel);
	margin: 0 0 0.5rem;
}
.gm-eyebrow.is-red { color: var(--wp--preset--color--haas-red); }
.has-carbon-background-color .gm-eyebrow:not(.is-red) { color: var(--wp--preset--color--disabled); }

.gm-lead { font-size: var(--wp--preset--font-size--large); }
.has-carbon-background-color .gm-lead { color: var(--wp--preset--color--rule); }

.gm-mono {
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
}

h1, h2, h3, .wp-block-post-title { text-wrap: balance; }

/* ---- Header ------------------------------------------------------------------------ */

/* The template-part wrapper is what sticks: the inner .gm-header group would only stick within the
   wrapper itself, which is exactly its own height. Offset for the admin bar when logged in. */
header.wp-block-template-part { position: sticky; top: 0; z-index: 100; }
html { scroll-padding-top: 4rem; } /* keep anchor targets clear of the pinned bar */
.admin-bar header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 32px); }

.gm-header { padding-top: 0.875rem; padding-bottom: 0.875rem; }
.gm-header__bar { align-items: center; gap: 1.5rem; }
.gm-logo { display: block; flex: none; line-height: 0; }
.gm-logo img { display: block; height: 28px; width: auto; }
.gm-nav { margin-left: auto; }
.gm-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--rule);
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
	padding-bottom: 4px;
}
.gm-nav .wp-block-navigation-item__content:hover,
.gm-nav .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--paper);
	box-shadow: inset 0 -2px 0 var(--wp--preset--color--haas-red);
}
.gm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	box-shadow: none;
}

/* ---- Breadcrumb -------------------------------------------------------------------- */

.gm-crumb {
	background: #F7F7F7;
	border-bottom: var(--gm-hairline);
	font-size: 0.8125rem;
	color: var(--wp--preset--color--steel);
}
.gm-crumb ol {
	list-style: none;
	margin: 0 auto;
	padding: 0.625rem 0;
	max-width: var(--wp--style--global--wide-size);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.gm-crumb li + li::before { content: "›"; margin-right: 0.5rem; color: var(--wp--preset--color--disabled); }
.gm-crumb a { color: inherit; text-decoration: none; }
.gm-crumb a:hover { color: var(--wp--preset--color--haas-red); }
.gm-crumb [aria-current] { color: var(--wp--preset--color--ink); font-weight: 500; }

/* ---- Page header --------------------------------------------------------------------- */

.gm-page-header { padding-top: var(--wp--preset--spacing--60); }
.gm-page-header .wp-block-post-title { margin: 0; }

/* ---- Front page hero ----------------------------------------------------------------- */

/* Flow layout inside, so the text stays left-aligned; the constrained layout would centre every
   max-width child with auto margins. */
.gm-hero {
	background: var(--gm-hero);
	padding-left: var(--wp--style--root--padding-left);
	padding-right: var(--wp--style--root--padding-right);
}
.gm-hero__inner {
	max-width: var(--wp--style--global--wide-size);
	margin-left: auto;
	margin-right: auto;
	display: grid;
	grid-template-columns: minmax(0, 11fr) minmax(0, 13fr);
	gap: 3rem;
	align-items: center;
}
.gm-hero__media { margin: 0; }
/* The hero PNG carries the panel colour as its backdrop and feathered transparent edges (see HERO_IMG in
   bin/content.py), so no blend mode or mask is needed here. */
.gm-hero__media img { display: block; width: 100%; height: auto; }
.gm-hero .gm-lead { color: var(--wp--preset--color--steel); }
.gm-hero h1 { max-width: 16ch; }
.gm-hero p { max-width: 44ch; }
.gm-hero .wp-block-buttons { margin-top: var(--wp--preset--spacing--40); }

/* A reading-width block that keeps the left edge of a wide section. */
.gm-narrow { max-width: var(--wp--style--global--content-size); margin-left: 0 !important; }

/* ---- Product tiles (front page) --------------------------------------------------------- */

.gm-tiles { gap: 0.75rem; }
.gm-tile {
	position: relative;
	border: var(--gm-hairline);
	border-radius: var(--gm-radius);
	padding: 1.25rem 1.25rem 1.375rem;
	transition: border-color 120ms ease;
}
.gm-tile:hover { border-color: var(--wp--preset--color--steel); }
.gm-tile > * { margin: 0; }
.gm-tile__logo { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 0.875rem; line-height: 0; min-height: 48px; }
/* Every mark is rendered 48px tall and bottom-aligned in a 48px slot, so the headings below line up across
   a row whether the tile carries the square Haas emblem, the wide Haas Tooling lockup or a text label. */
.gm-tile__logo img { display: block; width: auto; height: auto; max-width: 6rem; max-height: 48px; object-fit: contain; }
.gm-tile__logo .gm-logo--haas-tooling { max-width: 9.5rem; }
.gm-tile h3 { font-size: var(--wp--preset--font-size--medium); margin-top: 0.875rem; }
/* Text-label tiles carry no 48px mark, so they lose the reserved logo slot and sit tighter. */
.gm-tile.is-text { padding: 1rem 1.25rem 1.125rem; }
.gm-tile.is-text .gm-tile__logo { min-height: 0; }
.gm-tile.is-text h3 { margin-top: 0.5rem; }
.gm-tile h3 a { color: inherit; text-decoration: none; }
.gm-tile h3 a::after { content: ""; position: absolute; inset: 0; }
.gm-tile p:last-child {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--steel);
	margin-top: 0.5rem;
}

/* ---- Supplier links on product-group pages ------------------------------------------------- */

.gm-links {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: 1rem;
	border-top: var(--gm-hairline);
	font-size: 0.9375rem;
	color: var(--wp--preset--color--steel);
}
.gm-links__label { font-weight: 500; color: var(--wp--preset--color--ink); margin-right: 0.25rem; }
.gm-links a { font-weight: 500; text-decoration: none; }
.gm-links a:hover { text-decoration: underline; }
.gm-links + .gm-back { margin-top: 1rem; }

/* ---- Back link on product-group pages ------------------------------------------------------ */

.gm-back { margin-top: var(--wp--preset--spacing--50); font-weight: 500; font-size: 0.9375rem; }
.gm-back a { text-decoration: none; }
.gm-back a:hover { text-decoration: underline; }

/* ---- Hub rows (/tuotteet/) --------------------------------------------------------------- */

.gm-rows { border-top: var(--gm-hairline); }
.gm-row {
	position: relative;
	display: grid;
	grid-template-columns: 6.5rem minmax(9rem, 12rem) 1fr auto;
	gap: 1rem 1.5rem;
	align-items: baseline;
	padding: 0.875rem 0;
	border-bottom: var(--gm-hairline);
}
.gm-row > * { margin: 0; }
.gm-row__logo {
	align-self: center;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	line-height: 0;
}
/* Both marks land on 32px tall: the square Haas emblem is capped by height, the wide Haas Tooling lockup
   by a width that works out to the same height inside the 6.5rem logo column. */
.gm-row__logo img { display: block; width: auto; height: auto; max-width: 5.75rem; max-height: 32px; object-fit: contain; }
.gm-row__logo .gm-logo--haas-tooling { max-width: 6rem; }
.gm-row__brand, .gm-tile__logo .gm-row__brand {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
}
/* The group name sits mid-row, level with the logo or brand label, however many lines the description wraps to. */
.gm-row h3 { align-self: center; font-size: var(--wp--preset--font-size--medium); }
.gm-row p { color: var(--wp--preset--color--steel); font-size: 0.9375rem; }
.gm-row__link { font-weight: 500; font-size: 0.9375rem; white-space: nowrap; }
.gm-row__link a { text-decoration: none; }
.gm-row__link a::after { content: ""; position: absolute; inset: 0; }
.gm-row:hover h3 { color: var(--wp--preset--color--haas-red); }

/* ---- People ------------------------------------------------------------------------------- */

.gm-people {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem;
}
/* A second group inside the same section (e.g. Talous ja hallinto after Varasto) needs air above its heading. */
.gm-people + .wp-block-heading,
.gm-people + p + .wp-block-heading { margin-top: var(--wp--preset--spacing--50); }
.gm-person {
	background: var(--wp--preset--color--paper);
	border: var(--gm-hairline);
	border-radius: var(--gm-radius);
	padding: 1rem 1.125rem;
}
.gm-person p { margin: 0; }
.gm-person__name { font-weight: 600; }
.gm-person__role { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--steel); margin-bottom: 0.375rem !important; }
.gm-person__tel a { font-family: var(--wp--preset--font-family--mono); font-size: 0.9375rem; text-decoration: none; }

/* ---- Address block ------------------------------------------------------------------------- */

.gm-address p { margin: 0; line-height: 1.75; }
.gm-address a { text-decoration: none; }
.gm-address .gm-mono { font-size: 0.9375rem; }

/* ---- Map ------------------------------------------------------------------------------------- */

.gm-map iframe {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	border: var(--gm-hairline);
	border-radius: var(--gm-radius);
	filter: grayscale(1) contrast(1.05);
}

/* ---- Sections ------------------------------------------------------------------------------- */

.gm-section { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--60); }
.gm-section + .gm-section { border-top: var(--gm-hairline); }
.gm-section h2 { margin-top: 0; }

/* ---- Footer ---------------------------------------------------------------------------------- */

.gm-footer { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--disabled); }
.gm-footer strong { color: var(--wp--preset--color--paper); font-weight: 600; }
.gm-footer a { color: var(--wp--preset--color--rule); text-decoration: none; }
.gm-footer a:hover { color: var(--wp--preset--color--paper); }
.gm-footer p { margin: 0; line-height: 1.75; }
.gm-footer ul { list-style: none; margin: 0; padding: 0; line-height: 1.75; }

/* ---- Buttons ---------------------------------------------------------------------------------- */

.wp-block-button__link { transition: background-color 120ms ease, color 120ms ease; }
.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: inherit;
	border: 1px solid var(--wp--preset--color--steel);
}
.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: currentColor;
	background: transparent;
}

/* ---- Small screens ----------------------------------------------------------------------------- */

@media (max-width: 781px) {
	.gm-hero__inner { grid-template-columns: 1fr; gap: 2rem; }
	/* Stacked: the diagonal would cut through the text, so the hero goes plain silver and the photo
	   becomes its own dark panel. */
	.gm-hero { background: #F0F0F0; }
	.gm-hero__media { background: #2B2B2F; border-radius: var(--gm-radius); overflow: hidden; }
	.gm-row { grid-template-columns: 1fr; gap: 0.25rem; }
	.gm-row__logo { margin-bottom: 0.375rem; }
	.gm-people { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; }
}