/* =============================
   Arvokas Arki – styles.css
   ============================= */

:root{
  /* =============================
     Arvokas Arki – VIOLETTI + MERENSININEN (ei teal / ei vihreää)
     Pääväri: violetti
     Tehosteväri: merensininen
     ============================= */

  /* Brändisävyt */
  --brand-purple: #6D28D9;
  --brand-purple-dark: #C976E0;
  --brand-purple-ink: #2E1065;
  --brand-purple-soft: #EEE9FF;
  
  --brand-white: #FFFFFF;

  --brand-sea: #0077B6;
  --brand-sea-dark: #005A8A;
  --brand-sea-soft: #D6F0FF;

  /* Sivuston perusmuuttujat (pidetään vanhat nimet) */
  --primary: var(--brand-purple);
  --primary-dark: var(--brand-purple-dark);
  --accent: var(--brand-sea);

  /* Taustat */
  --bg: #ffffff;
  --bg-soft: #F5F1FF;

  /* Tekstit ja rajat */
  --text: #140A2B;
  --muted: #3B2C5A;
  --border: #D9D2FF;

  /* Efektit */
  --shadow: 0 12px 34px rgba(76, 29, 149, .26);
  --radius: 18px;
  --max: 1120px;

  /* Osiotaustat */
  --section-soft: var(--brand-purple-dark);
  --section-white: var(--brand-white);
  --section-mist: var(--brand-sea-soft);
  --section-navy: #2E1065;

  /* Lisämuuttujat */
  --trust: var(--brand-purple-ink);
  --action: var(--brand-sea);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.55;
}
img{ max-width:100%; height:auto; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

.skip-link{
  position:absolute; left:-999px; top:8px;
  background:#fff; padding:10px 14px;
  border-radius:10px; box-shadow:var(--shadow);
}
.skip-link:focus{ left:10px; z-index:1000; }

.container{ max-width:var(--max); margin:0 auto; padding:0 18px; }

/* Header */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--border);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; }
.brand img{ width:190px; height:auto; }
.menu{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
.menu a{ padding:10px 12px; border-radius:12px; font-weight:600; color:var(--text); }
.menu a[aria-current='page']{ background: rgba(237,233,254,.94); color: var(--accent); }
.menu a:hover{ background: rgba(237,233,254,.94); text-decoration:none; }

/* Hero */
.hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--border); }
.hero-bg{ position:absolute; inset:0; background:url('hero.png') center/cover no-repeat; }
.hero::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(
    180deg,
    rgba(26,62,93,.30) 0%,
    rgba(255,255,255,.75) 20%,
    rgba(255,255,255,1) 90%
  );
}
.hero-inner{ position:relative; z-index:2; padding:64px 0 34px; }

.h1{
  font-size:clamp(30px,4vw,44px);
  line-height:1.15; margin:0 0 12px;
  letter-spacing:-.02em; color:#0f2233;
}
.lead{ font-size:clamp(16px,2vw,19px); max-width:68ch; color:#233041; margin:0 0 18px; }

.cta-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:16px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 16px; border-radius:14px; border:1px solid transparent; font-weight:700;
}
.btn-primary{ background:var(--primary); color:#fff; box-shadow:var(--shadow); }
.btn-primary:hover{ background:var(--primary-dark); text-decoration:none; }
.btn-ghost{ background:rgba(245,241,255,.92); border-color:rgba(109,40,217,.45); color:var(--trust); }
.btn-ghost:hover{ background:#fff; border-color:rgba(0,119,182,.60); text-decoration:none; }

.meta{ display:flex; gap:18px; flex-wrap:wrap; margin-top:18px; color:var(--muted); font-weight:600; }
.meta span{ display:inline-flex; gap:8px; align-items:center; }

/* Sections */
section{ padding:42px 0; }

/* Etusivun osastot – vahvemmat taustat */
.section-white{ background:#fff; }
.section-soft{ background:var(--section-soft); }
.section-mist{ background:linear-gradient(180deg, #ffffff 0%, var(--section-mist) 100%); }
.section-navy{ background:linear-gradient(180deg, rgba(26,62,93,.16) 0%, var(--section-navy) 100%); }
.section-white, .section-soft, .section-mist, .section-navy{ padding:52px 0; }
.section-divider{ border-top:1px solid var(--border); }

.section-title{ font-size:24px; margin:0 0 10px; letter-spacing:-.01em; position:relative; }
.section-title::after{ content:''; display:block; width:96px; height:6px; border-radius:999px; background:var(--accent); margin-top:10px; }
.section-desc{ margin:0 0 18px; color:var(--muted); max-width:80ch; }

.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:16px; }
.card{
  grid-column:span 4; background:#fff;
  border:1px solid var(--border); border-radius:var(--radius);
  padding:18px; box-shadow:0 10px 30px rgba(0,0,0,.04);
}
.card h3{ margin:0 0 8px; font-size:18px; }
.card p{ margin:0 0 12px; color:var(--muted); }
.card a{ font-weight:700; }

/* Lisätty ankkurinkorjaus */
:root { --ankkuri-vara: 90px; }
[id] { scroll-margin-top: var(--ankkuri-vara); }

/* Info-kortit: pidetään luettavina vahvemmilla taustoilla */
.info{
  grid-column:span 4;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(26,62,93,.12);
  border-radius:var(--radius);
  padding:18px;
  backdrop-filter:blur(6px);
}
.info h3{ margin:0 0 8px; font-size:18px; color:var(--accent); }
.info p{ margin:0; color:#2a3a4e; }

.callout{
  background:rgba(255,255,255,.82);
  border:1px solid rgba(26,62,93,.14);
  border-radius:calc(var(--radius) + 6px);
  padding:22px;
}

/* Footer */
footer{ border-top:1px solid var(--border); background:#fff; }
.footer-inner{
  display:flex; flex-wrap:wrap; gap:18px;
  align-items:flex-start; justify-content:space-between; padding:26px 0;
}
.footer-inner p{ margin:0; color:var(--muted); max-width:72ch; }
.footer-links{ display:flex; gap:14px; flex-wrap:wrap; }
.footer-links a{ color:rgba(0,119,182,.95); font-weight:700; }

/* Alisivut */
.page-hero{ 
 padding:34px 0 10px; 
 border-bottom:1px solid var(--border); 
 /* Oletusvärit – voidaan yliajaa luokilla */
 --page-hero-from: var(--bg-soft);
 --page-hero-to: #fff;
 background:linear-gradient(180deg, var(--page-hero-from), var(--page-hero-to)); 
} 

/* Sisäsivujen hero – värivaihtoehdot (vaihda HTML:ssä luokka) */
.page-hero.hero-soft{ --page-hero-from: var(--section-soft); }
.page-hero.hero-mist{ --page-hero-from: var(--section-mist); }
.page-hero.hero-navy{ --page-hero-from: var(--section-navy); }
.page-hero.hero-strong{ --page-hero-from: #c9def0; }
.breadcrumb{ color:var(--muted); font-weight:700; margin:0 0 10px; }
.page-title{ margin:0; font-size:34px; letter-spacing:-.02em; }
.content{ padding:26px 0 50px; }
.prose{ max-width:78ch; }
.prose h2{ margin-top:26px; }
.prose ul{ padding-left:20px; }
.note{
  background:var(--bg-soft);
  border:1px solid var(--border);
  padding:14px 16px; border-radius:14px;
}

@media (max-width:900px){
  .card, .info{ grid-column:span 12; }
  .menu{ gap:8px; }
  .menu a{ padding:8px 10px; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; animation:none !important; }
}

/* =========================================
   Mobiilin sivumarginaalit + safe-area tuki
   Korjaa: hero & footer tekstit liian reunassa
   ========================================= */

:root{
  --gutter: 18px;        /* nykyinen desktop-oletus */
  --gutter-mobile: 24px; /* mobiilissa väljempi */
}

/* Safe-area huomiointi (iPhone notch ym.) */
.container{
  padding-left: calc(var(--gutter) + env(safe-area-inset-left, 0px));
  padding-right: calc(var(--gutter) + env(safe-area-inset-right, 0px));
}

/* Kännykällä lisää ilmaa reunoihin */
@media (max-width: 600px){
  .container{
    padding-left: calc(var(--gutter-mobile) + env(safe-area-inset-left, 0px));
    padding-right: calc(var(--gutter-mobile) + env(safe-area-inset-right, 0px));
  }

  /* Footerin alin ©-rivi: inline padding ohittaa .containerin,
     joten pakotetaan sama mobiiligutter myös siihen */
  footer .container[style]{
    padding-left: calc(var(--gutter-mobile) + env(safe-area-inset-left, 0px)) !important;
    padding-right: calc(var(--gutter-mobile) + env(safe-area-inset-right, 0px)) !important;
  }
}
/* =========================================
   Mobiiliheader: logo ylös, valikko alle
   ========================================= */
@media (max-width: 700px){
  /* Anna navin rivittyä kahdelle riville */
  header .nav{
    flex-wrap: wrap;
    align-items: center;
  }

  /* Brand (logo) pysyy ensimmäisellä rivillä vasemmalla */
  header .brand{
    flex: 0 0 auto;
  }

  /* Valikko ottaa koko leveyden ja siirtyy omalle rivilleen */
  header .menu{
    flex: 0 0 100%;
    width: 100%;
    justify-content: flex-start;
    margin-top: 10px;
  }

  /* Linkit mukavammin mobiilissa */
  header .menu a{
    padding: 10px 12px;
  }
}
/* Näkyvä näppäimistöfokus (saavutettavuus) */
.btn:focus-visible, a:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; box-shadow:0 0 0 6px rgba(0,119,182,.22); border-radius:14px; }