/*
Theme Name: GeneratePress Child
Description: Insinööritoimisto Kovarak Oy — Sollertiksen GeneratePress-lapsiteema (www-to-wordpress).
Author: Sollertis
Template: generatepress
Version: 1.4.0
Text Domain: kovarak
*/

/* Brand tokens — mitattu referenssistä https://kovarak.lovable.app 2.11.2026 (computed styles, scripts/wtw-style-compare.cjs).
   fonttijavari.txt: pääväri #142852 (Mikan päätös 2.11.2026; Lovable-sivu näyttää vaihtoehdon #261D6C); keltainen #F3B01D. */
:root {
  --kv-navy: #142852;
  --kv-navy-hover: #0F1E3D;
  --kv-yellow: #F3B01D;
  --kv-yellow-alt: #E5A93C;
  --kv-text: #161616;
  --kv-muted: #62748E;
  --kv-border: #E2E8F0;
  --kv-soft: #F7F7F7;
  --kv-white: #FFFFFF;
  --kv-font-head: "Archivo Black", "Arial Black", Arial, sans-serif;
  --kv-font-body: "Archivo", Arial, Helvetica, sans-serif;
}

/* Base: referenssi body 16px/24px */
body { font-family: var(--kv-font-body); color: var(--kv-text); background: var(--kv-white); font-weight: 400; font-size: 16px; line-height: 1.5; }
/* Archivo Black has ONE weight (400): font-weight 900 would be synthesised (faux bold) and look heavier than the reference */
h1, h2, h3, h4, h5, h6, .main-title, .kt-adv-heading_hero_title {
  font-family: var(--kv-font-head); font-weight: 400; text-transform: uppercase; letter-spacing: 0.5px; color: var(--kv-navy);
}
h1 { letter-spacing: 0; }
h2 { letter-spacing: 0.5px; }
h3 { letter-spacing: 0.45px; }
.wp-block-kadence-advancedheading { font-weight: 400 !important; }
h2.wp-block-kadence-advancedheading, h3.wp-block-kadence-advancedheading { letter-spacing: 0.5px !important; }
/* Kadence-koodin alaotsikot ovat kevyitä (300) — säilytetään lähteen paino */
.wp-block-kadence-advancedheading.kv-light { font-family: var(--kv-font-body); font-weight: 300 !important; }

/* Header: referenssi 62px korkea, sisältö max 1040px, ei alareunaviivaa */
.site-description { display: none; }
.site-header, .main-navigation { background: var(--kv-white); }
.site-header { border-bottom: 0; }
.site-header .inside-header, .site-header .inside-header.grid-container { max-width: 1040px; padding: 12px 48px !important; }
.main-title { font-size: 24px; line-height: 1; letter-spacing: 0.5px; margin: 0; }
.main-title a, .main-title a:hover, .main-title a:visited { color: var(--kv-navy); text-decoration: none; }
.kv-logo-prefix { display: block; font-family: var(--kv-font-body); font-weight: 400; font-size: 9px; letter-spacing: 2px; color: var(--kv-navy); margin-bottom: 2px; }
.kv-logo-mark { color: var(--kv-yellow); font-size: 0.72em; vertical-align: 0.08em; margin: 0 1px; }

/* Navigation: referenssi 13px, paino 300, pienet kirjaimet, tumma teksti, väli 32px; aktiivinen = 700 + keltainen */
.main-navigation .main-nav ul li a { color: var(--kv-text); font-family: var(--kv-font-body); font-weight: 300; font-size: 13px; letter-spacing: 0; text-transform: none; padding: 0 16px; line-height: 38px; }
.main-navigation .main-nav ul li:last-child > a { padding-right: 0; }
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.sfHover > a { color: var(--kv-navy); background: transparent; }
.main-navigation .main-nav ul li[class*="current-menu-"] > a { color: var(--kv-yellow); font-weight: 700; background: transparent; }
.main-navigation .main-nav ul li a .dropdown-menu-toggle { padding-left: 4px; color: var(--kv-yellow); }
.main-navigation ul ul { background: var(--kv-white); box-shadow: 0 10px 30px rgba(20,40,82,0.15); border-top: 0; padding: 14px 0; width: 245px; }
.main-navigation ul ul li a { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 300; color: var(--kv-text); line-height: 31px; padding: 0 32px; }
.main-navigation ul ul li:hover > a, .main-navigation ul ul li[class*="current-menu-"] > a { color: var(--kv-navy); font-weight: 300; background: transparent; }
.main-navigation .menu-toggle, .main-navigation .menu-toggle:hover, .main-navigation .menu-toggle:focus { color: var(--kv-navy); }

/* Content width: Kadence rows set their own max width; GP container is full width */
.site-content .content-area { width: 100%; }
.wp-block-kadence-rowlayout .wp-block-kadence-column a:not(.kt-button) { color: var(--kv-navy); }
/* Buttons: referenssi Archivo Black 11px, paino 400, välistys 0.88px, padding 10px 18px */
.kt-button, .wp-block-kadence-advancedbtn .kt-button { font-family: var(--kv-font-head) !important; font-weight: 400 !important; font-size: 11px !important; letter-spacing: 0.88px !important; padding: 10px 18px !important; line-height: 1.5; transition: background-color .2s ease; }
.kt-button:hover, .wp-block-kadence-advancedbtn .kt-button:hover { background-color: var(--kv-navy-hover) !important; color: var(--kv-white) !important; }

/* Hero: image behind the white text box (referenssi: laatikko 517px, padding 56px 112px, h1 46px, alaotsikko 22px/300) */
.kv-hero { background-size: cover; background-position: center center; background-color: var(--kv-navy); }
.kv-hero-box { background: rgba(255,255,255,0.95); }
.kv-hero > .kt-row-column-wrap { min-height: 300px; display: flex; align-items: center; justify-content: center; }
.home .kv-hero > .kt-row-column-wrap { min-height: 520px; }
.kv-hero .wp-block-kadence-column { width: 100%; }
.kv-hero .wp-block-kadence-rowlayout { width: 100%; max-width: 517px; margin-left: auto; margin-right: auto; } /* v2 row sits in a flex column: fill it like the old inner wrapper did */
.kv-hero .wp-block-kadence-rowlayout > .kt-row-column-wrap { padding: 56px 112px !important; }
.kv-hero h1 { overflow-wrap: normal; font-size: 46px !important; letter-spacing: 0 !important; line-height: 1 !important; margin: 0 !important; }
.kv-hero h2.wp-block-kadence-advancedheading { font-size: 22px !important; font-weight: 300 !important; letter-spacing: 0.55px !important; color: var(--kv-text) !important; margin: 12px 0 0 !important; line-height: 1.5 !important; }

/* Subpage hero (referenssi): laatikko sisällön levyinen, padding 36px 96px, h1 40px, yksi rivi */
body:not(.home) .kv-hero .wp-block-kadence-rowlayout { max-width: calc(100% - 48px); width: fit-content; }
body:not(.home) .kv-hero .wp-block-kadence-rowlayout > .kt-row-column-wrap { padding: 36px 96px !important; }
body:not(.home) .kv-hero h1 { font-size: 40px !important; white-space: nowrap; }
body:not(.home) .kv-hero h2.wp-block-kadence-advancedheading { white-space: nowrap; }
@media (max-width: 900px) {
  body:not(.home) .kv-hero h1, body:not(.home) .kv-hero h2.wp-block-kadence-advancedheading { white-space: normal; }
  body:not(.home) .kv-hero .wp-block-kadence-rowlayout { width: 100%; }
  body:not(.home) .kv-hero .wp-block-kadence-rowlayout > .kt-row-column-wrap { padding: 28px 24px !important; }
  /* one long word (KORJAUSRAKENTAMINEN) must never widen the page: scale with viewport and allow breaking as last resort */
  body:not(.home) .kv-hero h1 { font-size: clamp(18px, 6.4vw, 26px) !important; overflow-wrap: anywhere; word-break: break-word; }
  body:not(.home) .kv-hero h2.wp-block-kadence-advancedheading { font-size: clamp(13px, 4vw, 16px) !important; overflow-wrap: anywhere; }
  .kv-hero .wp-block-kadence-rowlayout { max-width: calc(100% - 40px); overflow: hidden; }
}
/* never scroll sideways on small screens */
@media (max-width: 600px) { html, body { overflow-x: hidden; } .kt-row-column-wrap { max-width: 100%; } img { max-width: 100%; height: auto; } }

/* Pätevyydet-kortit: referenssi padding 12px 20px, 4px keltainen vasen reuna */
[style*="border-left:4px solid"] { padding: 12px 20px !important; }

/* Footer: referenssi 3 saraketta (logo 40px / OSOITE / YHTEYSTIEDOT), 12.5px kevyt teksti, padding 64px 0 96px, max 920px */
.kv-footer { background: var(--kv-navy); color: var(--kv-white); padding: 64px 24px 96px; font-size: 12.5px; font-weight: 300; line-height: 1.5; }
.kv-footer-inner { max-width: 920px; margin: 0 auto; display: grid; grid-template-columns: 290px 1fr 1fr; gap: 40px; }
.kv-footer h3 { color: var(--kv-white); font-size: 14px; letter-spacing: 0.35px; margin: 0; line-height: 1.5; }
.kv-footer p { margin: 16px 0 0; }
.kv-footer strong { font-weight: 600; }
.kv-footer a, .kv-footer a:visited { color: var(--kv-white); text-decoration: none; }
.kv-footer a:hover { color: var(--kv-yellow); }
.kv-footer .kv-logo-prefix { color: var(--kv-white); font-size: 12.5px; letter-spacing: 3px; font-weight: 300; margin-bottom: 0; }
.kv-footer .kv-footer-logo { font-family: var(--kv-font-head); font-size: 40px; line-height: 1; letter-spacing: 0; text-transform: uppercase; }
.kv-footer ul { list-style: none; margin: 16px 0 0; padding: 0; }
@media (max-width: 768px) {
  .kv-footer-inner { grid-template-columns: 1fr; }
  /* mobile: compact menu toggle (reference keeps a 62px header) */
  .main-navigation .menu-toggle { padding: 0 20px; line-height: 40px; font-size: 13px; font-weight: 300; text-transform: none; }
  .main-navigation .menu-toggle .mobile-menu { font-size: 14px; }
  .main-navigation .main-nav ul li a { line-height: 44px; padding: 0 20px; }
  .site-header .inside-header, .site-header .inside-header.grid-container { padding: 12px 20px; }
  .main-title { font-size: 20px; }
}
@media (max-width: 600px) {
  .kv-hero .wp-block-kadence-rowlayout > .kt-row-column-wrap { padding: 32px 24px !important; }
  .kv-hero h1 { font-size: 30px !important; }
  .kv-hero h2.wp-block-kadence-advancedheading { font-size: 16px !important; }
}

/* Etusivun kuvalaatat (Mika 4.11.2026): hover/focus = kuvan 10 % zoom, teksti ja laatan koko pysyvät. Laatan <a> leikkaa
   (overflow:hidden), joten kuva ei kasva laatan yli. Liikettä vähentävä asetus kunnioitetaan. */
.kv-tiles .wp-block-kadence-column a img { transition: transform .45s ease; transform-origin: center center; will-change: transform; }
.kv-tiles .wp-block-kadence-column a:hover img,
.kv-tiles .wp-block-kadence-column a:focus-visible img { transform: scale(1.1); }
@media (prefers-reduced-motion: reduce) { .kv-tiles .wp-block-kadence-column a img { transition: none; } }

/* Päävalikon värit tulevat GeneratePressin asetuksista (wtw-gp-nav-colors.sh, brändiväreistä) - ei CSS-kilpailua. */