/*
 Theme Name: Divi Child
 Theme URI: https://www.elegantthemes.com/gallery/divi/
 Description: Divi Child Theme
 Author: Pete Lipponen
 Author URI: https://www.elegantthemes.com
 Template: Divi
 Version: 1.0
*/
 
/* =Theme customization starts here
------------------------------------------------------- */
/* -----------------------------------------------------------
   0) Custom font for display headings (H1/H2)
----------------------------------------------------------- */
@font-face {
  font-family: 'Presicav';
  src: url('/wp-content/uploads/2023/12/font.woff2') format('woff2'),
       url('/wp-content/uploads/2023/12/font.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* -----------------------------------------------------------
   1) Tokens (light as default)
----------------------------------------------------------- */
:root{
  /* Colors */
  --color-bg: #ffffff;
  --color-text: #1D1D1F;
  --color-muted: #6e6e73;
  --color-hairline: #d2d2d7;
  --color-link: #06c;

  /* Typography scale */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont,
               "SF Pro Text","SF Pro Display","Inter","Segoe UI",
               Roboto,"Helvetica Neue",Arial,sans-serif;

  --fz-body: clamp(16px, 1.25vw, 18px);
  --lh-body: 1.6;

  --fz-h1: clamp(40px, 6vw, 72px);
  --lh-h1: 1.06;

  --fz-h2: clamp(28px, 3.2vw, 40px);
  --lh-h2: 1.2;

  --fz-h3: clamp(22px, 2.2vw, 28px);
  --lh-h3: 1.3;

  --fz-eyebrow: clamp(12px, 0.9vw, 13px);
  --fz-small: clamp(12px, 0.95vw, 14px);

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
}

/* -----------------------------------------------------------
   2) Base
----------------------------------------------------------- */
html { box-sizing: border-box; }
*,*::before,*::after { box-sizing: inherit; }

body{
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fz-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  margin: 0;
}

/* Typography defaults */
:where(h1,h2,h3,p,ul,ol){ margin-block: 0; color: var(--color-text); }
h1{
  font-family: 'Presicav', sans-serif;
  font-size: var(--fz-h1);
  line-height: var(--lh-h1);
  letter-spacing: -0.02em;
  font-weight: 700;
}
h2{
  font-family: 'Presicav', sans-serif;
  font-size: var(--fz-h2);
  line-height: var(--lh-h2);
  letter-spacing: -0.01em;
  font-weight: 700;
}
h3{
  font-size: var(--fz-h3);
  line-height: var(--lh-h3);
  font-weight: 600;
}
p{ margin-block: var(--space-4); }

.small { font-size: var(--fz-small); color: var(--color-muted); }

a{ color: var(--color-link); text-decoration: none; }
a:hover{ text-decoration: underline; }
:focus-visible{ outline: 2px solid currentColor; outline-offset: 2px; }

/* Lead paragraph (ingressi) */
.lead{
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.5;
  color: var(--color-muted);
  max-width: 60ch;
}


/* -----------------------------------------------------------
   3) Layout utilities
----------------------------------------------------------- */

/* Images */
.img-fluid img{ display:block; max-width:100%; height:auto; }

/* Buttons */
.btn{
  display: inline-block;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid var(--color-hairline);
  font-weight: 600;
  color: var(--color-text);
  background: transparent;
  transition: transform .2s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn--primary{
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}

/* -----------------------------------------------------------
   4) Dark section mode (add class `on-dark` to Section)
----------------------------------------------------------- */
.on-dark{
  color-scheme: dark;

  /* flip tokens for everything inside */
  --color-bg: #000;
  --color-text: #f5f5f7;
  --color-muted: #a1a1a6;
  --color-hairline: rgba(255,255,255,.22);
  --color-link: #9ecbff;
}
.on-dark :where(h1,h2,h3,h4,h5,h6,p,li){ color: var(--color-text); }
.on-dark .small{ color: var(--color-muted); }
.on-dark a{ color: var(--color-link); }
.on-dark .hairline{ border-color: var(--color-hairline); }
.on-dark .card{
  background: rgba(255,255,255,.06);
  border-color: var(--color-hairline);
}
.on-dark .btn{
  color: var(--color-text);
  border-color: var(--color-hairline);
  background: transparent;
}
.on-dark .btn--primary{
  background: var(--color-text);
  color: #000;
  border-color: var(--color-text);
}

/* -----------------------------------------------------------
   5) Divi niceties (keep editor from overriding)
----------------------------------------------------------- */
/* Neutralize default inner margins so rhythm comes from .stack */
.et_pb_text_inner :where(h1,h2,h3,p){ margin: 0 !important; }

/* Avoid odd image gaps (typical in some modules) */
.et_pb_image img{ display:block; }

/* Optional: ensure Text module inherits color/size if something set before */
.et_pb_text, .et_pb_blurb, .et_pb_toggle, .et_pb_accordion{
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}
/* Blurb-otsikot perimään väri, ei muuta blurp heading väriä 
.et_pb_blurb h1,
.et_pb_blurb h2,
.et_pb_blurb h3,
.et_pb_blurb h4,
.et_pb_blurb h5,
.et_pb_blurb h6 {
  color: inherit !important;*/
}

/* ************ */