/*
Theme Name: Anvil
Description: Anvil Environmental Technologies — Precision A. Lapsiteema Twenty Twenty-Five -pohjalle. Värit, typografia, ruudukko ja välistys brand guide v1.1:n mukaan.
Author: KajoAI
Template: twentytwentyfive
Version: 0.2.0
Requires at least: 6.7
Tested up to: 7.1
License: GPL-2.0-or-later
Text Domain: anvil
*/

/* ------------------------------------------------------------------
   Paletti tulee theme.jsonista. Nämä ovat vain lyhyemmät nimet samoille
   arvoille, jotta alla oleva layout-CSS pysyy luettavana eikä paletilla
   ole kahta totuuden lähdettä.
   ------------------------------------------------------------------ */
:root {
	--graphite: var(--wp--preset--color--graphite);
	--slate: var(--wp--preset--color--slate);
	--silver: var(--wp--preset--color--silver);
	--mist: var(--wp--preset--color--mist);
	--orange: var(--wp--preset--color--forge-orange);
	--line: #e4e6e8;
}

* { box-sizing: border-box }

html {
	scroll-behavior: smooth;
	scroll-padding-top: 28px;
}

body {
	background: #fff;
	color: var(--graphite);
	line-height: 1.6;
	font-size: 17px;
}

a { color: inherit; text-decoration: none }
a:focus-visible { outline: 3px solid var(--graphite); outline-offset: 6px }

/*
   Tuotekuvat ovat <picture>-elementeissä WebP-version takia. display:contents
   poistaa kääreen laatikon, jolloin <img> on edelleen suoraan flex-lapsi eikä
   asettelu muutu. Vanhemmissa selaimissa, joissa sääntöä ei tunneta, kääre
   renderöityy tavallisena — kuva näkyy silti, koska mitat ja object-fit ovat
   img-elementissä. Ne selaimet saavat muutenkin PNG/JPG-varaversion.
*/
picture { display: contents }

.wrap { width: min(1240px, calc(100% - 96px)); margin: auto }

/* Ohita navigaatio -linkki */
.skip { position: absolute; top: -100px; left: 20px; padding: 15px; background: #fff; z-index: 10 }
.skip:focus { top: 10px }

.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- Header ---- */
header {
	min-height: 124px;
	display: flex; align-items: center; justify-content: space-between; gap: 32px;
	border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 18px }
.brand img { object-fit: contain; display: block }
.wordmark { max-width: 202px }
nav { display: flex; gap: 34px; font-size: 15px; font-weight: 600 }
nav a:hover { text-decoration: underline; text-underline-offset: 6px }

/* ---- Typografia ---- */
.eyebrow { font-size: 14px; font-weight: 600; letter-spacing: .16em; margin: 0 0 28px }
h1, h2, h3, p { margin-top: 0 }
h1 { font-size: clamp(40px, 4.3vw, 64px); line-height: 1.08; letter-spacing: -.045em; font-weight: 500; margin-bottom: 32px }
h2 { font-size: clamp(32px, 3.2vw, 46px); line-height: 1.15; letter-spacing: -.035em; font-weight: 500; margin-bottom: 24px }
h3 { font-size: 25px; line-height: 1.25; letter-spacing: -.02em; font-weight: 500; margin-bottom: 22px }

/* Brändiohjeen signature line: 64 x 4 px, yksi per kompositio. */
.signal { width: 64px; height: 4px; background: var(--orange); margin-bottom: 28px }

.intro { font-size: 19px; line-height: 1.65; max-width: 510px; color: var(--slate); margin-bottom: 32px }

/* Grafiitti teksti oranssin päälle — brändiohjeen kontrastivaatimus (5.18:1). */
.button {
	background: var(--orange); color: var(--graphite);
	display: inline-flex; align-items: center; gap: 40px;
	padding: 16px 22px; font-weight: 600; font-size: 16px; border-radius: 2px;
}
.button:hover { background: #e86e18 }

/* ---- Hero ---- */
.hero { display: grid; grid-template-columns: 1.06fr 1fr; gap: 54px; align-items: center; padding-block: 86px 80px }
.hero-image { margin: 0; position: relative }
figcaption { font-size: 12px; color: var(--slate); padding-top: 10px }
.image-line {
	display: flex; justify-content: space-between; align-items: center; gap: 20px;
	margin-top: 24px; border-top: 1px solid var(--silver); padding-top: 20px;
}
.image-line span:first-child { font-size: 25px; letter-spacing: -.02em }
.image-line > a { font-size: 14px; text-decoration: underline; text-underline-offset: 5px }

/* Valmistajan tuotekuvat: säilytetään merkinnät ja luonnolliset mittasuhteet. */
.hero-product-stage {
	background: var(--mist); min-height: 430px;
	display: flex; align-items: center; justify-content: center;
	position: relative; padding: 52px 30px 24px;
}
.hero-product-stage img { width: auto; max-width: 80%; height: 335px; object-fit: contain }
.product-maker { position: absolute; top: 22px; left: 24px; font-size: 12px; letter-spacing: .12em; color: var(--slate) }
.product-hero figcaption { display: flex; flex-direction: column; gap: 4px; padding-top: 18px; font-size: 14px }
.product-hero figcaption strong { font-size: 17px; font-weight: 500; color: var(--graphite) }

/* ---- Toimialanauha ---- */
.sectors { background: var(--mist); border-block: 1px solid var(--line) }
.sectors > .wrap { display: flex; justify-content: space-between; gap: 20px; padding-block: 21px; font-size: 14px; font-weight: 500 }
.sectors a:hover { text-decoration: underline; text-underline-offset: 5px }

/* ---- Osiot ---- */
.section { padding-block: 96px }
.section-heading { display: grid; grid-template-columns: 1fr 1fr; column-gap: 80px }
.section-heading > .eyebrow { grid-column: 1 / -1 }
.section-heading > p:last-child { color: var(--slate); max-width: 430px; align-self: center }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 40px }
.cards article { border-top: 1px solid var(--silver); padding: 26px 0 0; display: flex; flex-direction: column }
.number { font-size: 14px; letter-spacing: .1em; color: var(--slate); margin-bottom: 32px }
.cards p { color: var(--slate) }
.cards .detail { margin-top: auto; padding-top: 22px; font-size: 14px; color: var(--graphite); margin-bottom: 0 }
.cards .product-link { margin-top: 20px }

/* ---- Tuoteruudukot ---- */
.products-section { background: var(--mist) }
.product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 36px }
.product-card { background: #fff; display: flex; flex-direction: column }
.product-stage { height: 320px; display: flex; align-items: center; justify-content: center; padding: 26px }
.product-stage img { max-width: 90%; height: 100%; object-fit: contain }
.product-stage .hub-image { height: auto; max-height: 270px; max-width: 270px; width: 100% }
.product-info { padding: 8px 32px 32px; display: flex; flex-direction: column; flex: 1 }
.product-info .eyebrow { margin-bottom: 12px; color: var(--slate); font-size: 14px }
.product-info h3 { font-size: 30px; margin-bottom: 8px }
.product-kind { font-weight: 500; font-size: 16px }
.product-info > p:not(.product-kind):not(.eyebrow) { color: var(--slate); font-size: 16px }
.product-link {
	align-self: flex-start; margin-top: auto; padding-top: 14px;
	border-bottom: 1px solid var(--graphite); font-size: 15px; font-weight: 600;
}
.product-link:hover { border-bottom-color: var(--orange) }
.manufacturer-note { font-size: 13px; color: var(--slate); margin: 24px 0 0 }

/* ---- Jätehuolto ---- */
.waste-section { background: #fff; border-top: 1px solid var(--silver) }
.waste-card { background: var(--mist); border-top: 3px solid var(--graphite) }
.waste-card .product-info { padding: 32px }
.waste-card .audience { font-size: 14px; color: var(--graphite); border-top: 1px solid var(--silver); padding-top: 16px }

/* ---- ANVIL-osio ---- */
.about { background: var(--graphite); color: #fff; padding-block: 86px }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px }
.about .eyebrow { color: var(--silver) }
.about p:not(.eyebrow):not(.large) { color: #d6dadd }
.about .large { font-size: 25px; line-height: 1.45; letter-spacing: -.02em }
.about .signal { margin-top: 32px }

/* ---- Yhteystiedot ---- */
.contact { max-width: 1240px }
.contact h2 { font-size: clamp(30px, 3vw, 42px) }
.contact > p:not(.eyebrow) { color: var(--slate) }
.contact-note { font-size: 14px; border-top: 1px solid var(--silver); padding-top: 24px; margin-top: 36px }
.contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 70px }
.contact-person {
	font-style: normal; border-left: 4px solid var(--orange);
	padding: 28px 32px; background: var(--mist); align-self: start;
}
.contact-person h3 { margin-bottom: 10px }
.contact-person .eyebrow { margin-bottom: 20px }
.contact-person p { font-size: 16px }
.contact-person .contact-note { font-size: 14px; margin-bottom: 0 }
.contact-person a { text-decoration: underline; text-underline-offset: 4px }
.contact-person a:hover { color: var(--slate) }
.sector-contact { margin-top: 30px }

/* ---- Footer ---- */
footer {
	padding-block: 30px; display: flex; justify-content: space-between; gap: 20px;
	border-top: 1px solid var(--line); font-size: 13px; color: var(--slate);
}
footer a { text-decoration: underline; text-underline-offset: 4px }

/* ---- Responsiivisuus ---- */
@media (max-width: 950px) {
	.wrap { width: calc(100% - 48px) }
	.hero { gap: 30px; padding-block: 60px }
	.brand { gap: 10px }
	.wordmark { width: 155px; height: auto }
	nav { gap: 20px }
	.cards { gap: 24px }
	.about-grid { gap: 40px }
	h1 { font-size: 44px }
}

@media (max-width: 700px) {
	header { min-height: 110px; flex-wrap: wrap; gap: 16px; padding-block: 20px }
	.brand img:first-child { width: 44px; height: auto }
	.wordmark { width: 165px }
	nav { font-size: 14px; gap: 24px; width: 100%; justify-content: space-between }
	.hero { grid-template-columns: 1fr; padding-block: 42px }
	.hero h1 { font-size: clamp(36px, 8.8vw, 54px) }
	.hero .eyebrow { font-size: 11px; letter-spacing: .1em }
	.intro { font-size: 17px }
	.hero-product-stage { min-height: 340px; padding: 44px 20px 20px }
	.hero-product-stage img { height: 275px }
	.sectors > .wrap { flex-wrap: wrap; justify-content: flex-start; column-gap: 25px; row-gap: 8px; font-size: 13px }
	.section { padding-block: 60px }
	.section-heading, .about-grid { grid-template-columns: 1fr; gap: 0 }
	.cards { grid-template-columns: 1fr; gap: 40px; margin-top: 24px }
	.number { margin-bottom: 20px }
	.cards .detail { padding-top: 6px }
	.product-grid { grid-template-columns: 1fr; gap: 24px }
	.product-stage { height: 280px }
	.product-stage .hub-image { max-height: 230px; max-width: 230px }
	.product-info { padding: 8px 24px 28px }
	.waste-card .product-info, .contact-person { padding: 24px }
	.waste-card h3 { font-size: 27px }
	.about { padding-block: 60px }
	.about-grid > div:last-child { margin-top: 10px }
	.about .large { font-size: 23px }
	.contact-grid { grid-template-columns: 1fr; gap: 24px }
	.sector-contact { gap: 16px }
	footer { flex-wrap: wrap; font-size: 12px }
	footer > span:first-child { width: 100% }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto }
}