/* ==========================================================================
   0. RESET (Kevyt, Gutenberg-yhteensopiva)
   ========================================================================== */
   html, body {
    margin: 0;
    padding: 0;
    background: var(--color-bg);
}
/* Poistaa WP:n ja selainten oletusmarginaalit */
h1, h2, h3, h4, h5, h6,
p, figure,
.wp-site-blocks {
    margin: 0 !important;
    padding: 0 !important;
}

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

*, *:before, *:after {
  box-sizing: inherit;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}


/* ==========================================================================
   1. DESIGN SYSTEM MUUTTUJAT
   ========================================================================== */
:root {

    /* ============================================================
       1. PÄÄTEKSTIEN VÄRIT (typografia)
       ============================================================ */
    --color-text-main: #2d2e2d;   /* päätekstit, otsikot */
    --color-text-light: #fdfcfc;  /* vaaleat tekstit */

    /* ============================================================
       2. BRÄNDIN PÄÄVÄRIT (UI PRIMARY COLORS)
       ============================================================ */
    --color-primary-green: #294d36;
    --color-primary-blue:  #1e384d;
    --color-primary-beige: #cbbf9d;
    --color-primary-dark:  #2b2e33;

    /* ============================================================
       3. NEUTRAALIT VÄRIT (UI SECONDARY COLORS)
       ============================================================ */
    --color-neutral-green:     #7ab570;
    --color-neutral-blue:      #6e8ca0;
    --color-neutral-beige:     #b6a184;
    --color-neutral-turquoise: #699da5;

    /* ============================================================
       4. AKSENTIT (korostukset)
       ============================================================ */
    --color-accent-red:    #9f3d50;
    --color-accent-yellow: #d3b479;
    --color-accent-mint:   #afcdc2;

    /* ============================================================
       5. MUUT (taustat, varjot, radius)
       ============================================================ */
	   
	--overlay-dark: rgba(43,46,51,0.45);
    --color-bg: var(--color-text-light); /* yleinen sisältötausta */
	--color-main-bg: var(--color-accent-mint); /* sivuston tausta */
	

    --color-border: #d4d4d4;

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
    --shadow-md: 0 2px 6px rgba(0,0,0,0.14);
    --shadow-lg: 0 4px 12px rgba(0,0,0,0.15);

    --container-max: 1200px;
}


/* ==========================================================================
   2. LAYOUT: container, row, col (bootstrap-henkinen, kevyt)
   ========================================================================== */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 1.2rem;
}

.section {
  padding: 3rem 0;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}

.col {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  flex: 1 0 100%;
}

/* Sarakeleveydet laitteille mobile-first */
@media (min-width: 600px) { .col-6-sm { flex: 0 0 50%; } }
@media (min-width: 768px) { .col-4-md { flex: 0 0 33.333%; } }
@media (min-width: 900px) { .col-3-lg { flex: 0 0 25%; } }
@media (min-width: 1024px) { .col-2-xl { flex: 0 0 50%; } }

/* ==========================================================================
   3. TYPOGRAFIA
   ========================================================================== */
/* Body-fontti (Source Sans 3) */
body {
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-text);
}

/* Otsikot */
h1 {
    font-family: "Asap", sans-serif;
    font-weight: 900; /* Black */
}

h2 {
    font-family: "Asap", sans-serif;
    font-weight: 700; /* Bold */
}

h3, h4, h5, h6 {
    font-family: "Roboto", sans-serif;
    font-weight: 700; /* Bold */
}

/* Lainaukset ja korostettu teksti */
blockquote,
.quote,
.emphasis {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: italic;
    color: var(--color-primary);
    border-left: 4px solid var(--color-secondary);
    padding-left: 1rem;
    margin-left: 0;
}

p {
  margin: 0 0 1rem 0;
  line-height: 1.6;
}

/* ==========================================================================
   4. KOMPONENTIT (card, box, tag, badge)
   ========================================================================== */
.card {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
}

.card-img {
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 1rem;
}

.card-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: .5rem;
}

.card-meta {
  font-size: 0.9rem;
  opacity: 0.75;
}

/* Yleinen box/elementti */
.box {
  background: var(--color-bg);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding: 1rem;
}

/* Badge */
.badge {
  padding: 0.3rem 0.7rem;
  background: var(--color-secondary);
  color: #fff;
  font-size: 0.75rem;
  border-radius: var(--radius-sm);
}


/* ==========================================================================
   5. UTILITY-LUOKAT (Spacing, flex, grid)
   ========================================================================== */

/* Flex utilities */
.flex { display: flex; }
.flex-center { display: flex; justify-content: center; align-items: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-col { display: flex; flex-direction: column; }

/* Margin & Padding */
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

.pb-2 { padding-bottom: 1rem; }
.pb-3 { padding-bottom: 1.5rem; }

/* Width helpers */
.w-100 { width: 100%; }

/* Gap */
.gap-1 { gap: .75rem; }
.gap-2 { gap: 1.25rem; }

/* ==========================================================================
   6. MOBILE-FIRST BREAKPOINTIT (12 tasoa)
   Tämä käyttää samaa järjestelmää, jonka jo loimme.
   Tässä vain tyhjinä käytettäväksi komponentteihin.
   ========================================================================== */

/* XS phones */
@media (min-width: 360px) {}

/* S phones */
@media (min-width: 400px) {}

/* M phones */
@media (min-width: 480px) {}

/* Tablet portrait */
@media (min-width: 600px) {}

/* Tablet landscape */
@media (min-width: 768px) {}

/* Large tablet / small laptop */
@media (min-width: 900px) {}

/* Desktop S */
@media (min-width: 1024px) {}

/* Desktop M */
@media (min-width: 1280px) {}

/* Desktop L */
@media (min-width: 1440px) {}

/* Desktop XL */
@media (min-width: 1920px) {}

/* Ultrawide */
@media (min-width: 2560px) {}


/* ==========================================================================
   7. OSIORAKENNE (layout-osat, helposti laajennettavissa)
   ========================================================================== */
.section-title {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  font-weight: 700;
}

.section-content {
  display: grid;
  gap: 2rem;
}

/* Esimerkki responsiiviselle korttilistalle */
@media (min-width: 600px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}