/* ============================================================
   theme.css — WordPress-teeman lisätyylit
   dropdown-navigaatio, mobiilikontaktipalkki, sisäsivut,
   tuotekortit, yhteydenottolomake.
   ============================================================ */

/* ---------- Sisäsivujen otsikko ---------- */
.page-hero {
  padding-block: clamp(3.2rem, 7vw, 5.5rem) clamp(3rem, 6vw, 4.5rem);
  background:
    radial-gradient(1000px 420px at 82% -12%, rgba(216, 200, 174, 0.4), transparent 62%),
    linear-gradient(180deg, var(--stone) 0%, var(--paper) 100%);
  border-bottom: 1px solid var(--line);
}
.page-hero h1 { max-width: 16ch; margin-bottom: 1.1rem; }
.page-hero .lede { max-width: 54ch; margin: 0; }
.page-hero__kicker { margin-bottom: 1rem; }

/* Sisäsivun runko-osa */
.page-body { padding-block: var(--section-pad); }

/* Yhteys-kuva + tekstit kuvan päällä — kuvapohjainen hero (Yhteys-sivu).
   Koko kuva taustaksi (desktop ei rajaa), tekstit alavasemmalla pehmeän
   tähteistyksen päällä; kohde (oikea puoli) jätetään vapaaksi. Mobiilissa
   tarkoituksellinen rajaus jotta teksti mahtuu, objekti pysyy kehyksessä. */
.page-hero--kuva {
  position: relative;
  padding-block: 0;
  overflow-x: clip;   /* ei pystysuuntaista leikkausta: teksti saa ilmaa */
  overflow-y: visible;
}
.yhteys-kuva {
  position: relative;
  width: 100%;                       /* täysreunainen — ei valkoisia reunoja */
  margin: 0;
  height: min(72vh, 660px);          /* täysleveä hero, hallittu korkeus */
}
.yhteys-kuva img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 40%;         /* kohde pysyy kehyksessä rajatessa */
}
.yhteys-kuva::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Hajanainen, paikallinen sävy vain tekstialueen taustaksi — lähes
     näkymätön efekti, jonka tarkoitus on typografian luettavuus. */
  background:
    radial-gradient(720px 440px at 26% 94%, rgba(24, 32, 35, 0.55), rgba(24, 32, 35, 0.22) 52%, rgba(24, 32, 35, 0) 74%),
    linear-gradient(90deg, rgba(24, 32, 35, 0.38) 0%, rgba(24, 32, 35, 0.18) 36%, rgba(24, 32, 35, 0.02) 62%, rgba(24, 32, 35, 0) 80%),
    linear-gradient(180deg, rgba(24, 32, 35, 0) 52%, rgba(24, 32, 35, 0.34) 100%);
}
/* Overlay: koko kuva-ala; teksti ankkuroidaan turva-alaan flexillä
   (ei hauraita pikselikoordinaatteja). */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;   /* editorial: alavasemmalle, ei keskelle */
  align-items: flex-start;
  padding: clamp(40px, 5vw, 72px) clamp(32px, 5vw, 88px);
  pointer-events: none;
}
/* Kontrolloitu tekstilohko — ei koko kuvan levyinen. */
.hero-overlay__body {
  max-width: 560px;
  display: flex;
  flex-direction: column;
}
.hero-overlay .kicker {
  color: var(--sand);
  margin-bottom: clamp(12px, 1.4vw, 18px);
  letter-spacing: 0.16em;
}
.hero-overlay h1 {
  color: var(--paper);
  margin-bottom: clamp(16px, 2vw, 24px);   /* 16–24 px tarkoituksellinen väli */
  text-shadow: 0 1px 26px rgba(18, 24, 26, 0.4);
  max-width: 16ch;                          /* tasapainoiset 2 riviä */
}
.hero-overlay .lede {
  color: #E9E5DC;
  max-width: 34em;                          /* ~55–70 merkkia rivi */
  margin-bottom: 0;
  font-size: clamp(1rem, 1.15vw, 1.0625rem);
  line-height: 1.66;
  text-shadow: 0 1px 16px rgba(18, 24, 26, 0.5);
}

/* Tabletti: lisää kuvalle korkeutta tekstin ilmaväliä varten. */
@media (max-width: 768px) {
  .yhteys-kuva { height: clamp(420px, 66vw, 540px); }
  .yhteys-kuva img { height: 100%; object-fit: cover; object-position: 68% 38%; }
  .hero-overlay { padding: clamp(36px, 7vw, 56px) clamp(28px, 5vw, 44px); }
  .hero-overlay h1 { max-width: 15ch; }
}

/* Mobiili: ei pelkkä desktopin pienennys — oma sommitelma, reilut vaaaka-illet. */
@media (max-width: 430px) {
  .yhteys-kuva { height: clamp(360px, 112vw, 480px); }
  .hero-overlay {
    padding: clamp(36px, 10vw, 48px) clamp(20px, 7vw, 30px) clamp(40px, 12vw, 56px);
  }
  .hero-overlay__body { max-width: 100%; }
  .hero-overlay .kicker { margin-bottom: 10px; font-size: 0.75rem; }
  .hero-overlay h1 { font-size: clamp(1.8rem, 6vw, 2.4rem); margin-bottom: 14px; }
  .hero-overlay .lede { font-size: 0.95rem; line-height: 1.6; }
}

/* ---------- Dropdown (Palvelut) ---------- */
.menu-item-has-children { position: relative; }
.menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 6px;
  vertical-align: 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
}
.menu-item-has-children:hover > a::after,
.menu-item-has-children:focus-within > a::after { transform: rotate(-135deg); }

.menu-item .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 210px;
  list-style: none;
  margin: 0;
  padding: 0.5rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  z-index: 120;
}
.menu-item-has-children:hover > .sub-menu,
.menu-item-has-children:focus-within > .sub-menu,
.menu-item-has-children .sub-menu:focus-within { opacity: 1; transform: translateY(0); pointer-events: auto; }
.menu-item .sub-menu a {
  display: block;
  padding: 0.55rem 0.7rem;
  border-radius: 6px;
  font-size: 0.95rem;
}
.menu-item .sub-menu a:hover { background: var(--stone); color: var(--forest); }

/* Nykytila: aktiivi parent + sivu */
.menu-item.current-menu-item > a,
.menu-item.current-menu-ancestor > a { color: var(--forest); border-color: var(--sand); }

/* Mobiili: dropdown aukeaa sarakkeeseen (ei hover) */
@media (max-width: 860px) {
  .menu-item-has-children > a::after { float: right; margin-top: 6px; transform: rotate(45deg); }
  .menu-item .sub-menu {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0 0 0.2rem 1rem;
    display: none;
  }
  .menu-item-has-children.is-expanded .sub-menu { display: block; }
  .menu-item-has-children.is-expanded > a::after { transform: rotate(-135deg); }
}

/* ---------- Mobiilikontaktipalkki ---------- */
.contact-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 140;
  display: none;
  grid-template-columns: 1fr 1fr;
  background: var(--navy);
  border-top: 1px solid rgba(251, 249, 243, 0.14);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  font-family: var(--sans);
}
.contact-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.05rem 0.75rem;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.02rem;
  min-height: 58px;
}
.contact-bar a:first-child { color: var(--paper); border-right: 1px solid rgba(251, 249, 243, 0.14); }
.contact-bar a:last-child { color: var(--paper); background: var(--forest); }
.contact-bar a svg { flex: none; }
.contact-bar a:active { transform: scale(0.99); }

@media (max-width: 768px) {
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .contact-bar { display: grid; }
}

/* WP admin-palkki: bottom-palkki ei haittaa ylhäällä, mutta estetään ettei
   vielä ylimääräistä tilaa. Ei tarvetta erikseen. */

/* ---------- Tuotekortit (arkut/uurnat/kivet CPT) ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.6rem;
  margin-top: 2.4rem;
}
.product-card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.product-card__media {
  background:
    radial-gradient(280px 150px at 50% 100%, rgba(216, 200, 174, 0.35), transparent 72%),
    var(--stone);
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.product-card__media img { width: 100%; height: 100%; object-fit: cover; }
.product-card__body { padding: 0 1.4rem 1.4rem; display: flex; flex-direction: column; gap: 0.4rem; }
.product-card h3 { margin: 0; font-size: 1.18rem; }
.product-card p { margin: 0; font-size: var(--fs-small); color: var(--ink-soft); }
.product-card .badge {
  align-self: flex-start;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--forest);
  background: rgba(51, 71, 60, 0.1);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
}
.product-card .meta { font-size: var(--fs-micro); color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.06em; }

/* ---------- Palvelupreviewt etusivulla ---------- */
.service-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.4rem;
  margin-top: 2.6rem;
}
.service-preview {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--ink);
  border-top: 2px solid var(--sand);
  padding-top: 1.1rem;
  transition: border-color var(--dur) var(--ease);
}
.service-preview:hover { border-color: var(--forest); }
.service-preview__num { font-family: var(--serif); font-size: 1.2rem; color: var(--forest); }
.service-preview h3 { margin: 0; font-size: 1.15rem; color: var(--ink); }
.service-preview p { margin: 0; font-size: var(--fs-small); color: var(--ink-soft); }
.service-preview .arrow { margin-top: auto; font-size: 1.1rem; color: var(--forest); }

/* ---------- Yhteyslomake ---------- */
.contact-form {
  margin-top: 1.2rem;
  display: grid;
  gap: 1.15rem;
  max-width: 640px;
}
.contact-form .req-method {
  margin: 0;
  padding: 0.7rem 0.9rem;
  font-size: var(--fs-small);
  color: var(--ink-soft);
  background: var(--cream);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
}
.contact-form .field { display: grid; gap: 0.4rem; min-width: 0; }
.contact-form .field--full,
.contact-form .req-method,
.contact-form .form-msg,
.contact-form button[type="submit"],
.contact-form .hp-field,
.contact-form .direct-alt { grid-column: 1 / -1; }
.contact-form label { font-weight: 600; font-size: 0.95rem; color: var(--ink); }
.contact-form abbr[title="pakollinen"] { text-decoration: none; color: var(--forest); }
.contact-form input[type="text"],
.contact-form input[type="tel"],
.contact-form input[type="email"],
.contact-form textarea {
  font-family: var(--sans);
  font-size: 1rem; /* ≥16px estää iOS-autozoomin */
  line-height: 1.4;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  width: 100%;
  box-sizing: border-box;
}
.contact-form textarea { min-height: 140px; resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus {
  outline: 2px solid var(--forest);
  outline-offset: 1px;
  background: var(--white);
  border-color: var(--forest);
}
.contact-form .field.is-error input,
.contact-form .field.is-error textarea { border-color: #b3503a; }
.contact-form .error-msg {
  display: none;
  font-size: var(--fs-micro);
  color: #9e3f2a;
  font-weight: 500;
}
.contact-form .field.is-error .error-msg { display: block; }
.contact-form .form-msg[role="status"] {
  display: none;
  padding: 0.85rem 1.05rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  font-weight: 500;
}
.contact-form .form-msg.is-visible { display: block; }
.contact-form .form-msg.is-error { background: #f7e6de; color: #8c2f1e; border: 1px solid rgba(140, 47, 30, 0.35); }
.contact-form .form-msg.is-success { background: #e9efE9; color: var(--forest); border: 1px solid rgba(51, 71, 60, 0.35); }
.contact-form .form-msg.is-info { background: var(--cream); color: var(--ink-soft); border: 1px solid var(--line); }
.contact-form button[type="submit"] { justify-content: center; width: 100%; }
.contact-form button[type="submit"].is-loading { opacity: 0.75; pointer-events: none; cursor: progress; }
.contact-form .hp-field { position: absolute !important; left: -9999px !important; opacity: 0; height: 1px; width: 1px; overflow: hidden; }

/* Suorat yhteydenotot lomakkeen alla — hillitty rinnakkaislinkki */
.direct-alt { margin-top: 0.4rem; }
.direct-alt__lead { margin: 0 0 0.7rem; font-size: var(--fs-small); color: var(--ink-soft); }
.direct-alt__links { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.direct-alt__link {
  display: inline-flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink);
  background: var(--cream);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.direct-alt__link:hover { background: var(--white); border-color: var(--forest); color: var(--forest); }
.direct-alt__link strong { font-weight: 600; }
.direct-alt__link span { font-size: var(--fs-micro); color: var(--ink-soft); }

@media (min-width: 620px) {
  .contact-form { grid-template-columns: 1fr 1fr; }
}

/* Yhteys-sivun lomake + kontaktilaatikot ovat VAALEALLA pohjalla:
   tummalle suunnitellut contact-row -tyylit ylikirjoitetaan tässä sivussa,
   jotta tekstit erottuvat. Muut (tummat) kontaktiosiot pysyvät ennallaan. */
body.page-template-page-yhteys .contact-row {
  background: var(--cream);
  border: 1px solid var(--line-strong);
  color: var(--ink);
}
body.page-template-page-yhteys .contact-row:hover {
  background: var(--white);
  border-color: var(--forest);
}
body.page-template-page-yhteys .contact-row__label { color: var(--ink); }
body.page-template-page-yhteys .contact-row__hint { color: var(--ink-faint); }
body.page-template-page-yhteys .contact-row__arrow { color: var(--forest); }

/* ---------- Etusivun uusi hero (Hautaustoimisto Malmsten) ---------- */
.hero__eyebrow {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  color: var(--forest);
  letter-spacing: 0.01em;
  margin: 0 0 0.2rem;
}
.hero__tagline {
  font-size: var(--fs-small);
  color: var(--ink-soft);
  letter-spacing: 0.05em;
  margin: 0 0 1.1rem;
}
.hero__note { margin-top: 1.7rem; }
.hero__note ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
  font-size: var(--fs-small);
  color: var(--ink-soft);
  max-width: 46ch;
}
.hero__note li { padding-left: 1.2rem; position: relative; }
.hero__note li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--sand);
  font-weight: 700;
}
.hero__portrait-slot {
  border-radius: var(--radius);
  background: var(--cream);
  border: 1px solid var(--line);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
  padding: 2rem;
}
.hero__portrait-slot .monogram {
  font-family: var(--serif);
  font-size: 4rem;
  color: var(--forest);
  line-height: 1;
}
.hero__portrait-slot p { margin: 0; font-size: var(--fs-small); color: var(--ink-soft); }

/* Linkit tummilla (forest) -osioilla: vaalea, ei liian tumma */
.section--forest a { color: var(--sand); }
.section--forest a:hover { color: var(--paper); }

/* ---------- Sisäsivujen editorial-rivit ---------- */
.editorial-row { border-top: 1px solid var(--line-strong); padding-block: 1.8rem; }
.editorial-row:last-child { border-bottom: 1px solid var(--line-strong); }
.editorial-row h2 { font-size: var(--fs-h3); margin-bottom: 0.4rem; }
.editorial-row p { margin: 0; color: var(--ink-soft); max-width: 60ch; }

/* Laaja motiivikuva (kivet/kukat): pehmeä tyhjän tilan paikka */
.motif-band {
  border-radius: var(--radius);
  min-height: 220px;
  margin-bottom: 2.6rem;
  display: flex;
  align-items: flex-end;
  padding: 1.4rem;
  background:
    radial-gradient(420px 180px at 20% 100%, rgba(216, 200, 174, 0.3), transparent 70%),
    linear-gradient(160deg, var(--stone), var(--paper));
  border: 1px solid var(--line);
}
.motif-band__cap { font-size: var(--fs-micro); color: var(--ink-faint); letter-spacing: 0.1em; text-transform: uppercase; }

/* En-näkymätön oletus: The_content mallit */
.entry-content > * { max-width: 62ch; }
.entry-content img, .entry-content figure { max-width: 100%; }
/* Malmstenin läpinäkyvä yritystunnus. */
.brand{flex-shrink:0}.malmsten-logo{display:block;width:220px;height:auto;object-fit:contain}.header-inner{min-height:120px}.malmsten-logo--footer{width:300px;max-width:100%;filter:brightness(0) invert(1);margin-bottom:20px}.footer-brand>a{display:inline-block}@media(max-width:900px){.malmsten-logo{width:180px}.header-inner{min-height:100px}}@media(max-width:600px){.malmsten-logo{width:160px}.header-inner{min-height:90px}.malmsten-logo--footer{width:250px}}
/* Kompakti yläpalkki. */
.site-header .malmsten-logo{width:132px;height:auto}
.site-header .header-inner{min-height:0;padding-top:6px;padding-bottom:6px}
@media(max-width:600px){.site-header .malmsten-logo{width:110px}.site-header .header-inner{min-height:0;padding-top:5px;padding-bottom:5px}}
/* Mobiilivalikko alkaa aina logopalkin alta. */
@media(max-width:860px){
 .site-header{background:var(--paper)}
 .site-header .header-inner{position:static}
 .site-header .nav{position:absolute;inset:100% 0 auto 0;transform:none;visibility:hidden;max-height:calc(100dvh - 170px);overflow-y:auto;overscroll-behavior:contain;padding:16px var(--gutter) 24px;box-shadow:0 12px 22px rgba(20,35,30,.12);border-top:1px solid var(--line);transition:opacity .18s ease,visibility .18s ease}
 .site-header .nav.is-open{transform:none;visibility:visible;opacity:1;pointer-events:auto}
 .site-header .brand,.site-header .nav-toggle{position:relative;z-index:1}
}