/*
Theme Name: Valloittava seurakunta
Theme URI: https://valloittavaseurakunta.fi
Author: Visual Joonas Ojala
Description: Suomen helluntaiseurakuntien Valloittava seurakunta 2035 -strategian lohkoteema. Sisältää theme.jsonissa määritellyt värit, fontit ja kokoskaalan sekä valmiit patternit.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: valloittava
Tags: full-site-editing, block-patterns, blog, one-column
*/

/* Lohkotyyli: viistetty oikea yläkulma (esitteen laatikkomuoto) */
.is-style-viisto {
  border-radius: var(--wp--custom--kulma--iso) 0 var(--wp--custom--kulma--iso) var(--wp--custom--kulma--iso);
  clip-path: polygon(0 0, calc(100% - var(--wp--custom--viiste)) 0, 100% var(--wp--custom--viiste), 100% 100%, 0 100%);
}

/* Lohkotyyli: pilleri (navigaatio, arvotagit) */
.is-style-pilleri { border-radius: 999px; }

/* Lohkotyyli: käsinkirjoitettu korostus */
.is-style-kasiala {
  font-family: var(--wp--preset--font-family--kasiala);
  font-weight: 700;
  transform: rotate(-3deg);
  display: inline-block;
}

/* Lohkotyyli otsikolle: iso roomalainen numero */
.is-style-numero {
  font-family: var(--wp--preset--font-family--otsikko);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.02em;
}

/* Taustakuvat (esitteen viivapiirrokset) */
.vs-kuva-tausta { position: relative; overflow: hidden; }
.vs-kuva-tausta > .wp-block-image { position: absolute; inset: auto 0 0 0; pointer-events: none; z-index: 0; }
.vs-kuva-tausta > :not(.wp-block-image) { position: relative; z-index: 1; }

/* Listat sinisellä pohjalla */
.has-sininen-background-color li::marker { color: var(--wp--preset--color--sininen-vaalea); }

/* Skip link ja fokus */
:where(a:focus-visible), :where(button:focus-visible) {
  outline: 3px solid var(--wp--preset--color--sininen);
  outline-offset: 3px;
}

header li.wp-block-navigation-item {
  border-radius: 999px;
}

header li.wp-block-navigation-item.current-menu-item ,
header li.wp-block-navigation-item:hover,
header li.wp-block-navigation-item:focus-within {
  background-color: #C4E3FF;
}