/*
Theme Name: Idealta (Kadence Child)
Template: kadence
Author: Idealta
Description: Idealtan brändin mukainen lapsiteema Kadencelle. Sisältö lisätään WP-ylläpidosta sivun sisältönä (Custom HTML -lohko). Käytä sivun asetuksista "Disable Header" ja "Disable Footer" etusivulla.
Version: 1.0
Text Domain: idealta-kadence-child
*/

/* ===== Tokens ===== */
:root{
  --orange: #F24405;
  --cream: #F2E7DC;
  --peach: #F2B279;
  --dark: #1C191B;
  --white: #FFFFFF;
  --font-display: 'Montserrat', sans-serif;
  --max-w: 1120px;
  --pad: clamp(24px, 6vw, 72px);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--dark);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Kun header/footer on piilotettu sivun asetuksista, poistetaan Kadencen jäljelle jäävä sisältöalueen padding */
body.idealta-onepage .content-area,
body.idealta-onepage .site-main,
body.idealta-onepage article,
body.idealta-onepage .entry-content{
  padding:0 !important; margin:0 !important; max-width:none !important;
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }

.container{ max-width: var(--max-w); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.section{ padding: clamp(64px, 10vw, 140px) 0; }
.section--dark{ background: var(--dark); color: var(--cream); }
.section--cream{ background: var(--cream); color: var(--dark); }
.section--white{ background: var(--white); color: var(--dark); }

.eyebrow{
  display:inline-flex; align-items:center; gap: 10px;
  font-weight: 700; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--orange); margin: 0 0 20px;
}
.eyebrow::before{ content:""; display:inline-block; width: 22px; height: 2px; background: var(--orange); }

h1,h2,h3{ font-family: var(--font-display); font-weight: 900; line-height: 1.05; margin: 0 0 20px; letter-spacing: -0.01em; }
h1{ font-size: clamp(40px, 6.5vw, 84px); }
h2{ font-size: clamp(30px, 4.5vw, 52px); }
h3{ font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; }

p{ margin: 0 0 18px; font-size: 17px; }
.section--dark p{ color: rgba(242,231,220,0.82); }
.section--cream p, .section--white p{ color: rgba(28,25,27,0.78); }
.lede{ font-size: clamp(18px, 2vw, 22px); max-width: 640px; }
.rule{ width: 60px; height: 3px; background: var(--orange); border: none; margin: 28px 0 32px; }

.hero{ min-height: 92vh; display:flex; flex-direction: column; justify-content: center; background: var(--dark); position: relative; }
.hero .container{ display:flex; flex-direction: column; gap: 36px; }
.hero-logo{ width: 240px; max-width: 60vw; }
.hero p.lede{ color: rgba(242,231,220,0.75); font-size: clamp(16px, 1.6vw, 19px); letter-spacing: 0.04em; }
.hero-scroll{ position:absolute; bottom: 32px; left: var(--pad); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(242,231,220,0.5); }

.services{ display:grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 20px; }
@media (max-width: 760px){ .services{ grid-template-columns: 1fr; gap: 44px; } }
.service-num{ font-weight: 900; font-size: 15px; color: var(--orange); letter-spacing: 0.1em; margin-bottom: 14px; }

.process{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 24px; }
@media (max-width: 860px){ .process{ grid-template-columns: 1fr; gap: 40px; } }
.process-step .step-num{ font-weight: 900; font-size: clamp(36px, 5vw, 52px); color: var(--orange); line-height: 1; margin-bottom: 14px; }
.process-step hr.rule{ margin: 0 0 20px; width: 40px; }

.contact-grid{ display:grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: end; }
@media (max-width: 760px){ .contact-grid{ grid-template-columns: 1fr; } }
.contact-card{ font-size: 17px; }
.contact-card .name{ font-weight: 700; font-size: 19px; margin-bottom: 6px; }
.contact-card a{ display:block; color: var(--cream); border-bottom: 1px solid rgba(242,231,220,0.25); padding: 4px 0; width: fit-content; }
.contact-card a:hover{ color: var(--orange); }

.btn{ display: inline-block; background: var(--orange); color: var(--white); font-weight: 700; font-size: 15px; padding: 16px 30px; border-radius: 999px; margin-top: 8px; transition: transform .15s ease, background .15s ease; }
.btn:hover{ background: var(--peach); color: var(--dark); transform: translateY(-2px); }

.site-footer-band{ background: var(--orange); color: var(--white); padding: 20px var(--pad); display:flex; align-items:center; justify-content: space-between; font-weight: 700; font-size: 14px; }
.site-footer-band .mark{ width: 26px; height: 26px; }
.site-footer-band .left{ display:flex; align-items:center; gap: 12px; }

a:focus-visible, .btn:focus-visible{ outline: 2px solid var(--peach); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } .btn{ transition: none; } }

/* ===== Kevyt brändäys myös muille sivuille (jos header/footeria ei piiloteta) ===== */
.site-header, .site-footer{ font-family: var(--font-display); }
a.kadence-menu-link:hover, .kadence-menu-item:hover > a{ color: var(--orange) !important; }