/*
Theme Name: itf.fi - Työyhteenliittymä
Theme URI: https://itf.fi
Author: Kamppailukorporaatio
Description: Kamppailulajien työyhteenliittymän oma teema (Beom, Sasaja, Chanbara, BeSa, Korporaatio). Tumma, punakorosteinen ilme; Korporaatiolla oma sinivalkoinen sivupohja.
Version: 1.0
Requires at least: 6.0
Tested up to: 7.0
Text Domain: itf-teema
*/

/* ==========================================================================
   tyyli.css — Kamppailukorporaatio Ry:n yhdistetyn sivuston yhteinen tyyli
   --------------------------------------------------------------------------
   Tämä yksi tiedosto tyylittää KAIKKI rungon sivut (juuri + alasivut).
   Idea: jokainen HTML-sivu lataa tämän saman tiedoston, jolloin ulkoasu on
   yhtenäinen koko hierarkiassa. Värit on koottu ylös muuttujiksi, jotta
   teemaa voi vaihtaa yhdestä paikasta.
   ========================================================================== */

/* :root = sivun juuritaso. Tähän määritellään CSS-muuttujat (custom properties),
   joihin viitataan myöhemmin var(--nimi)-kutsulla. Näin värit muutetaan kerran. */
:root {
  --vari-tausta: #0f1115;        /* sivun yleinen taustaväri (tumma) */
  --vari-paneeli: #171a21;       /* korttien ja laatikoiden tausta */
  --vari-teksti: #e7e9ee;        /* leipätekstin väri (vaalea) */
  --vari-teksti-himmea: #aab0bd; /* toissijainen, himmeämpi teksti */
  --vari-korostus: #c8102e;      /* korostusväri (Taekwon-Do-punainen) */
  --vari-korostus-tumma: #8f0b20;/* korostuksen tummempi sävy (esim. hover) */
  --vari-reuna: #262b35;         /* ohuiden reunaviivojen väri */
  --leveys-max: 1100px;          /* sisällön suurin leveys isolla näytöllä */
  --pyoristys: 12px;             /* laatikoiden kulmien pyöristys */
}

/* Globaali nollaus: poistetaan selaimen oletusmarginaalit ja lasketaan
   padding mukaan elementin leveyteen (box-sizing). * = kaikki elementit. */
* {
  margin: 0;                     /* nollaa kaikki ulkomarginaalit */
  padding: 0;                    /* nollaa kaikki sisämarginaalit */
  box-sizing: border-box;        /* leveys sisältää reunan ja paddingin */
}

/* Koko sivun perusasetukset: fontti, värit ja rivinkorkeus. */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* selaimen oma fontti */
  background: var(--vari-tausta); /* taustaväri muuttujasta */
  color: var(--vari-teksti);      /* tekstiväri muuttujasta */
  line-height: 1.6;               /* väljä riviväli luettavuuden vuoksi */
}

/* Yleinen "sisältökontti": keskittää sisällön ja rajaa leveyden. */
.kontti {
  width: 100%;                    /* vie koko käytettävissä olevan leveyden... */
  max-width: var(--leveys-max);   /* ...mutta enintään määritellyn maksimin */
  margin: 0 auto;                 /* auto-marginaalit keskittävät vaakasuunnassa */
  padding: 0 20px;                /* hieman ilmaa vasemmalle ja oikealle */
}

/* --------------------------------------------------------------------------
   YLÄPALKKI (header) ja navigaatio — toistuu jokaisella sivulla samanlaisena
   -------------------------------------------------------------------------- */

/* Yläpalkin pohja: tumma paneeli ja alareunan viiva. */
.ylapalkki {
  background: var(--vari-paneeli);          /* paneeliväri taustaksi */
  border-bottom: 1px solid var(--vari-reuna);/* ohut erotinviiva alle */
  position: sticky;                          /* palkki "tarttuu" näytön ylälaitaan... */
  top: 0;                                    /* ...kun sivua vieritetään */
  z-index: 50;                               /* pidetään muun sisällön päällä */
}

/* Yläpalkin sisäasettelu: logo vasemmalle, valikko oikealle. */
.ylapalkki .kontti {
  display: flex;                  /* flex-asettelu vierekkäin */
  align-items: center;            /* pystysuuntainen keskitys */
  justify-content: space-between; /* logo ja valikko äärilaitoihin */
  min-height: 64px;               /* palkin vähimmäiskorkeus */
  flex-wrap: wrap;                /* kapealla näytöllä saa rivittyä */
  gap: 12px;                      /* väli logon ja valikon välille */
}

/* Sivuston nimi / logo yläpalkissa. */
.brandi {
  font-weight: 700;               /* lihavoitu */
  font-size: 1.05rem;             /* hieman leipätekstiä suurempi */
  color: var(--vari-teksti);      /* perusvalkea */
  text-decoration: none;          /* ei alleviivausta linkille */
  letter-spacing: .3px;           /* aavistus väljyyttä kirjainväleihin */
}

/* Korostetaan brändin nimen alkuosa punaisella. */
.brandi span { color: var(--vari-korostus); }

/* Navigaatiovalikon lista: poistetaan luettelopisteet ja ladotaan vaakaan. */
.valikko {
  list-style: none;               /* ei ul-listan pisteitä */
  display: flex;                  /* linkit vierekkäin */
  flex-wrap: wrap;                /* rivittyy tarvittaessa */
  gap: 18px;                      /* väli linkkien välille */
}

/* Yksittäinen navigaatiolinkki. */
.valikko a {
  color: var(--vari-teksti-himmea);/* himmeä perustila */
  text-decoration: none;           /* ei alleviivausta */
  font-size: .95rem;               /* hieman pienempi kuin leipä */
  transition: color .15s ease;     /* pehmeä värinvaihto hoverissa */
}

/* Linkin korostus, kun hiiri on päällä tai linkki on nykyinen sivu. */
.valikko a:hover,
.valikko a.aktiivinen { color: var(--vari-korostus); }

/* --------------------------------------------------------------------------
   HERO eli sivun yläbanneri — iso otsikkoalue heti navigaation alla
   -------------------------------------------------------------------------- */
.hero {
  padding: 64px 0;                /* reilusti tilaa ylä- ja alapuolelle */
  background:                     /* kevyt punainen hehku tumman päälle */
    radial-gradient(1200px 400px at 50% -10%, rgba(200,16,46,.18), transparent),
    var(--vari-tausta);
  text-align: center;            /* keskitetty teksti */
}

/* Heron pääotsikko. clamp() skaalaa koon näytön mukaan (min, joustava, max). */
.hero h1 {
  font-size: clamp(1.8rem, 4vw, 3rem); /* responsiivinen otsikkokoko */
  line-height: 1.15;                   /* tiiviimpi riviväli isolle otsikolle */
  margin-bottom: 14px;                 /* väli otsikon alle */
}

/* Heron alaotsikko / ingressi. */
.hero p {
  color: var(--vari-teksti-himmea); /* himmeämpi kuin otsikko */
  max-width: 680px;                 /* rajataan rivin pituus luettavaksi */
  margin: 0 auto;                   /* keskitetään */
  font-size: 1.05rem;               /* hieman leipää suurempi */
}

/* --------------------------------------------------------------------------
   PAINIKKEET — käytetään esim. "Ilmoittaudu"- ja "Verkkokauppa"-linkeissä
   -------------------------------------------------------------------------- */
.painike {
  display: inline-block;            /* sallii paddingin linkille */
  margin-top: 22px;                 /* väli yläpuolelle */
  padding: 12px 22px;               /* napin sisäinen tila */
  background: var(--vari-korostus); /* punainen tausta */
  color: #fff;                      /* valkoinen teksti */
  text-decoration: none;            /* ei alleviivausta */
  border-radius: 999px;             /* täysin pyöreät päät (pilleri) */
  font-weight: 600;                 /* puolilihava */
  transition: background .15s ease; /* pehmeä taustan vaihto */
}

/* Napin hover-tila: tummempi punainen. */
.painike:hover { background: var(--vari-korostus-tumma); }

/* Toissijainen, ääriviivapainike (esim. "Takaisin"). */
.painike.haalea {
  background: transparent;                 /* läpinäkyvä tausta */
  border: 1px solid var(--vari-korostus);  /* punainen ääriviiva */
  color: var(--vari-teksti);               /* vaalea teksti */
}

/* --------------------------------------------------------------------------
   OSIOT ja KORTTIRUUDUKKO — seurojen ja tuotekategorioiden esittelyyn
   -------------------------------------------------------------------------- */

/* Yleinen pystysuora väljyys osioiden välille. */
.osio { padding: 48px 0; }

/* Osion otsikko keskelle. */
.osio h2 {
  font-size: 1.6rem;     /* osio-otsikon koko */
  margin-bottom: 8px;    /* pieni väli alle */
  text-align: center;    /* keskitys */
}

/* Osion lyhyt selitysteksti otsikon alla. */
.osio .johdanto {
  text-align: center;               /* keskitys */
  color: var(--vari-teksti-himmea); /* himmeä */
  max-width: 640px;                 /* rajattu rivinpituus */
  margin: 0 auto 28px;              /* keskitys + väli ruudukkoon */
}

/* Responsiivinen ruudukko: sovittaa kortit automaattisesti riveille. */
.ruudukko {
  display: grid;                                          /* grid-asettelu */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); /* joustavat sarakkeet */
  gap: 18px;                                              /* väli korttien väliin */
  margin-top: 8px;                                        /* pieni väli ylös */
}

/* Yksittäinen kortti (seura, tuotekategoria tms.). */
.kortti {
  background: var(--vari-paneeli);      /* paneeliväri taustaksi */
  border: 1px solid var(--vari-reuna);  /* ohut reuna */
  border-radius: var(--pyoristys);      /* pyöristetyt kulmat */
  padding: 22px;                        /* sisäinen tila */
  transition: transform .15s ease, border-color .15s ease; /* pehmeä nosto hoverissa */
}

/* Kortin hover-tila: nostetaan hieman ja korostetaan reuna. */
.kortti:hover {
  transform: translateY(-3px);          /* nostetaan 3px ylös */
  border-color: var(--vari-korostus);   /* reuna punaiseksi */
}

/* Kortin otsikko. */
.kortti h3 {
  margin-bottom: 8px;          /* väli alle */
  font-size: 1.15rem;          /* kortin otsikon koko */
}

/* Kortin teksti. */
.kortti p {
  color: var(--vari-teksti-himmea); /* himmeä leipä */
  font-size: .95rem;                /* hieman pienempi */
  margin-bottom: 14px;              /* väli mahdolliseen linkkiin */
}

/* Kortin sisäinen tekstilinkki. */
.kortti a.linkki {
  color: var(--vari-korostus);  /* punainen linkki */
  text-decoration: none;        /* ei alleviivausta */
  font-weight: 600;             /* puolilihava */
}
.kortti a.linkki:hover { text-decoration: underline; } /* alleviivaus hoverissa */

/* --------------------------------------------------------------------------
   MURUPOLKU (breadcrumb) — näyttää sijainnin hierarkiassa alasivuilla
   -------------------------------------------------------------------------- */
.murupolku {
  padding: 14px 0;                  /* pystyväljyys */
  font-size: .9rem;                 /* pieni teksti */
  color: var(--vari-teksti-himmea); /* himmeä */
}
.murupolku a { color: var(--vari-teksti-himmea); text-decoration: none; } /* polun linkit */
.murupolku a:hover { color: var(--vari-korostus); }                       /* korostus hoverissa */

/* --------------------------------------------------------------------------
   ALAPALKKI (footer) — toistuu jokaisella sivulla
   -------------------------------------------------------------------------- */
.alapalkki {
  border-top: 1px solid var(--vari-reuna); /* erotinviiva ylle */
  background: var(--vari-paneeli);         /* paneeliväri */
  padding: 30px 0;                         /* pystyväljyys */
  margin-top: 40px;                        /* väli sisällöstä */
  color: var(--vari-teksti-himmea);        /* himmeä teksti */
  font-size: .9rem;                        /* pieni teksti */
}
.alapalkki a { color: var(--vari-teksti-himmea); } /* footerin linkit himmeinä */

/* Kevyt huomautuslaatikko (esim. "tämä on runko") kehityksen ajaksi. */
.huomio {
  background: rgba(200,16,46,.08);          /* hyvin vaalea punainen tausta */
  border: 1px dashed var(--vari-korostus);  /* katkoviivareuna huomion merkiksi */
  border-radius: var(--pyoristys);          /* pyöristys */
  padding: 14px 16px;                       /* sisäinen tila */
  margin: 20px 0;                           /* väli ylä- ja alapuolelle */
  font-size: .9rem;                         /* pieni teksti */
}

/* ==========================================================================
   ETUSIVUN (itf.fi) LISÄTYYLIT — tekevät neutraalista yleissivusta näyttävän.
   Näitä luokkia käytetään vain juuren index.html-sivulla.
   ========================================================================== */

/* Iso hero pelkästään etusivulle. Luokka .hero--iso lisätään .hero-elementtiin. */
.hero--iso {
  padding: 14px 0 12px;           /* erittäin kompakti korkeus (kaikki jäsenet ruudulle) */
  background:                     /* kaksi päällekkäistä värihehkua tumman pohjan päällä */
    radial-gradient(900px 500px at 15% -10%, rgba(200,16,46,.28), transparent), /* punainen vasemmalta */
    radial-gradient(900px 500px at 85% 10%, rgba(60,90,200,.18), transparent),  /* sininen oikealta */
    var(--vari-tausta);           /* tumma peruspohja alle */
}

/* Etusivun pääotsikko (kompakti). */
.hero--iso h1 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); margin-bottom: 6px; }
.hero--iso p { font-size: 1rem; }  /* hieman pienempi ingressi tilan säästöksi */

/* Pieni yläkorostus heron otsikon päällä (esim. "ITF.FI"). */
.hero .ylatunnus {
  display: inline-block;          /* sallii oman taustan ja marginaalit */
  letter-spacing: 3px;            /* harva kirjainväli korostaa */
  text-transform: uppercase;      /* isot kirjaimet */
  font-size: .8rem;               /* pieni teksti */
  color: var(--vari-korostus);    /* punainen */
  margin-bottom: 14px;            /* väli otsikkoon */
}

/* Ryhmäotsikko korttiosioiden sisällä (esim. "Seurat", "Organisaatiot"). */
.ryhmaotsikko {
  font-size: 1.05rem;                          /* maltillinen koko */
  text-transform: uppercase;                   /* isot kirjaimet */
  letter-spacing: 1.5px;                       /* harva kirjainväli */
  color: var(--vari-teksti-himmea);            /* himmeä väri */
  border-bottom: 1px solid var(--vari-reuna);  /* ohut erotinviiva alle */
  padding-bottom: 8px;                         /* väli viivaan */
  margin: 40px 0 18px;                         /* väljyys ylä- ja alapuolelle */
}

/* Pieni tunnistelaatta kortin yläosassa (esim. "Seura" tai "Liitto"). */
.kortti .tagi {
  display: inline-block;          /* oma laatikko tekstin ympärille */
  font-size: .72rem;              /* hyvin pieni */
  text-transform: uppercase;      /* isot kirjaimet */
  letter-spacing: 1px;            /* harva väli */
  color: var(--vari-korostus);    /* punainen teksti */
  background: rgba(200,16,46,.12);/* vaalea punainen tausta */
  border-radius: 999px;           /* pilleri */
  padding: 3px 10px;              /* tiivis täyttö */
  margin-bottom: 10px;            /* väli otsikkoon */
}

/* ==========================================================================
   TUODUN SISÄLLÖN TYYLIT — käytetään seurojen sisältösivuilla (WordPress-tuonti).
   .sisalto = kapea, helppolukuinen tekstipalsta tuodulle sisällölle.
   ========================================================================== */
.sisalto { max-width: 760px; margin: 0 auto; }        /* kapea palsta keskelle, luettavuus */
.sisalto p { margin-bottom: 16px; }                   /* väli kappaleiden väliin */
.sisalto h2 { font-size: 1.4rem; margin: 28px 0 10px; }/* väliotsikko */
.sisalto h3 { font-size: 1.15rem; margin: 22px 0 8px; }/* aliotsikko */
.sisalto ul, .sisalto ol { margin: 0 0 16px 22px; }   /* listojen sisennys ja väli */
.sisalto li { margin-bottom: 6px; }                   /* väli listariveihin */
.sisalto a { color: var(--vari-korostus); }           /* linkit korostusvärillä */
.sisalto strong { color: var(--vari-teksti); }        /* lihavoinnit vaaleina */
.sisalto img { max-width: 100%; height: auto; border-radius: 8px; } /* kuvat skaalautuvat */
.sisalto figure { margin: 18px 0; text-align: center; }/* kuvaelementti keskitettynä */
.sisalto figcaption { color: var(--vari-teksti-himmea); font-size: .9rem; margin-top: 6px; } /* kuvateksti */
.has-text-align-center { text-align: center; }        /* WP:n keskityksen apuluokka */
.has-text-align-left { text-align: left; }            /* WP:n vasemman tasauksen apuluokka */

/* Alivalikko = seuran omien sivujen toissijainen navigaatio (breadcrumbin alla). */
.alivalikko {
  display: flex;                            /* linkit vaakaan */
  flex-wrap: wrap;                          /* rivittyy kapealla */
  gap: 14px;                                /* väli linkkien välille */
  padding: 10px 0 4px;                      /* pystyväljyys */
  border-bottom: 1px solid var(--vari-reuna);/* erotinviiva alle */
}
.alivalikko a { color: var(--vari-teksti-himmea); text-decoration: none; font-size: .9rem; } /* linkit himmeinä */
.alivalikko a:hover, .alivalikko a.aktiivinen { color: var(--vari-korostus); }                /* korostus */

/* Hero-logo: seuran/organisaation tunnus heron yläosassa (kun logo on lisätty).
   Valkoinen "laatta" taustalla, jotta myös tummat logot erottuvat tummalla pohjalla. */
.hero .logo {
  display: block;            /* oma rivi */
  margin: 0 auto 18px;       /* keskitys + väli otsikkoon */
  max-height: 150px;         /* rajaa korkeus */
  width: auto;               /* säilytä kuvasuhde */
  background: #fff;          /* valkoinen laatta logon taakse */
  padding: 12px;             /* ilmaa logon ympärille */
  border-radius: 14px;       /* pyöristetty laatta */
}

/* Juurisivun (itf.fi) brändi keskellä, kun yläpalkkia/valikkoa EI ole. */
.brandi-keski {
  text-align: center;          /* keskitä wordmark */
  padding: 28px 0 4px;         /* väljyys ylös */
  font-weight: 700;            /* lihava */
  font-size: 1.3rem;           /* hieman suurempi */
  letter-spacing: .5px;        /* aavistus väljyyttä */
}
.brandi-keski span { color: var(--vari-korostus); } /* ".fi" korostettuna */

/* "Lappu" = jäsenkortti juurisivulla (työyhteenliittymän jäsenet). */
.lappu { text-align: center; padding: 10px; }  /* keskitetty sisältö, tiivis täyttö */
.lappu .tagi { display: inline-block; margin-bottom: 4px; } /* tunnistelaatta keskelle */
.lappu h3 { margin-bottom: 2px; font-size: 1.05rem; }       /* tiivis otsikko */
.lappu p { display: none; }   /* piilota lyhyt kuvausrivi juurilapuista tilan säästöksi (tiedot kunkin omalla sivulla) */
.lappu .logo { display: block; max-height: 36px; width: auto; margin: 2px auto 5px;
  background: #fff; padding: 4px; border-radius: 8px; } /* lapun logo (pieni) + valkoinen laatta */

/* Jäsenlappujen ruudukko juurisivulla: KOLME per rivi, skaalautuu mobiilissa. */
.jasenruudukko {
  display: grid;                          /* grid-asettelu */
  grid-template-columns: repeat(3, 1fr);  /* kolme yhtä leveää saraketta (työpöytä) */
  gap: 10px;                              /* tiivis väli lappujen väliin */
  margin-top: 4px;                        /* pieni väli ylös */
}
/* Tiivis osio: pienempi pystyväljyys (juuren jäsenet mahtuvat ruudulle ilman scrollausta). */
.osio.tiivis { padding: 6px 0 12px; }
.osio.tiivis h2 { margin-bottom: 4px; }
.osio.tiivis .johdanto { margin-bottom: 12px; }
@media (max-width: 760px) {               /* tabletti / kapeampi: kaksi per rivi */
  .jasenruudukko { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {               /* mobiili: yksi per rivi */
  .jasenruudukko { grid-template-columns: 1fr; }
}