/*
Theme Name: Pihtipudas-Seura
Theme URI: https://pihtipudas-seura.fi/
Author: Red Tail Media
Author URI: https://redtailmedia.fi/
Description: Pihtipudas-Seura ry:n lohkoteema. Ei sivunrakentajaa, ei kaupallisia laajennuksia. Värit ja rakenne vastaavat aiempaa sivustoa; typografia, kontrastit ja mobiilirakenne on rakennettu uudelleen.
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pihtipudas-seura
*/

/* Kaikki tokenit tulevat theme.jsonista. Täällä on vain se, mitä lohkot
   eivät itse osaa: ylätunnisteen navigaatio, hero-karuselli ja alatunnisteen
   yhteystietolistat. */

/* ---------- ylätunniste ---------- */

.ps-header {
  background: var(--wp--preset--color--maroon);
  position: sticky;
  top: 0;
  z-index: 40;
}

/* Vanhan logon mitat olivat 450 x 83. Sama suhde, hieman matalampana:
   ylätunniste jää 80 pikseliin kuten ennenkin. */
.ps-header .wp-block-site-logo img { height: 62px; width: auto; }

.ps-header .wp-block-navigation {
  --wp--preset--color--foreground: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
}

/* WordPressin navigaatiolohko tuo omat linkkityylinsä luokkaparilla
   .wp-block-navigation .wp-block-navigation-item__content, joka voittaa
   yksinkertaisen a-valitsimen. Siksi sama tarkkuus tässä. */
.ps-header .wp-block-navigation .wp-block-navigation-item__content,
.ps-header .wp-block-navigation .wp-block-navigation-item__content:visited,
.ps-header .wp-block-navigation .wp-block-navigation-submenu__toggle {
  color: oklch(99% 0.003 40);
  text-decoration: none;
  padding-block: 0.5rem;
  border-bottom: 2px solid transparent;
}

.ps-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.ps-header .wp-block-navigation .wp-block-navigation-item__content:focus-visible,
.ps-header .wp-block-navigation .wp-block-navigation-submenu__toggle:hover {
  color: oklch(99% 0.003 40);
  border-bottom-color: var(--wp--preset--color--amber);
}

.ps-header .wp-block-navigation .wp-block-navigation__submenu-icon { fill: currentColor; }

/* pudotusvalikko: oma pinta, ei perittyä läpinäkyvyyttä */
.ps-header .wp-block-navigation-submenu .wp-block-navigation__submenu-container {
  background: var(--wp--preset--color--maroon-deep);
  border: 0;
  padding-block: 0.5rem;
  min-width: 15rem;
}

.ps-header .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--wp--preset--color--maroon);
  padding: 1.5rem;
}

/* valikkopainike: perii tumman värin muuten, tummanpunaisella se katoaa */
.ps-header .wp-block-navigation__responsive-container-open,
.ps-header .wp-block-navigation__responsive-container-close { color: #fff; }
.ps-header .wp-block-navigation__responsive-container-open svg,
.ps-header .wp-block-navigation__responsive-container-close svg { fill: currentColor; width: 28px; height: 28px; }

@media (max-width: 781px) {
  /* logo ja valikkopainike samalle riville */
  .ps-header .wp-block-group { flex-wrap: nowrap; }
  .ps-header .wp-block-site-logo { flex: 0 1 auto; min-width: 0; }
  .ps-header .wp-block-site-logo img { height: 40px; max-width: 62vw; object-fit: contain; object-position: left; }
  .ps-header .wp-block-navigation { flex: 0 0 auto; }
}

/* ---------- hero-karuselli ----------
   ponytail: CSS scroll-snap, ei JS-kirjastoa. Kolme diaa, natiivi vieritys,
   toimii ilman JavaScriptiä ja renderöityy heti. Vanha Divi-slider rakensi
   rivit vasta JS:llä, mistä syntyi mobiilin päällekkäinen teksti. */

.ps-hero {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.ps-hero::-webkit-scrollbar { display: none; }

.ps-hero__slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  min-height: min(72vh, 620px);
  display: grid;
  place-items: center;
  background: var(--wp--preset--color--maroon-deep);
}

.ps-hero__slide > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Diat ovat kansikuvalohkoja (core/cover), jotta Reija voi vaihtaa kuvan
   mediakirjastosta. Cover tuo oman tummennuksensa, joten teeman omaa
   ::after-gradienttia ei ole — muuten tummennus tulisi kahteen kertaan.
   Cover kirjoittaa min-heightin inline-tyyliin, joten 620 px:n katto
   tarvitsee !importantin. */
.ps-hero .wp-block-cover.ps-hero__slide {
  min-height: min(72vh, 620px) !important;
  padding: 0;
}

.ps-hero .wp-block-cover__inner-container { width: 100%; }

/* Lohkopainikkeet eivät peri tekstin keskitystä, joten painike valuisi
   vasempaan. Ennen karuselli oli pelkkä <a>, joka keskittyi itsestään. */
.ps-hero__body .wp-block-buttons { justify-content: center; }

.ps-hero__body {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  max-width: 44rem;
  padding: 4rem 1.5rem;
}

.ps-hero__body h2 {
  font-size: var(--wp--preset--font-size--hero);
  color: #fff;
  margin: 0;
  text-shadow: 0 2px 18px rgb(0 0 0 / 0.35);
}

.ps-hero__body p {
  font-size: var(--wp--preset--font-size--large);
  line-height: 1.5;
  margin: 1rem 0 2rem;
  text-shadow: 0 1px 10px rgb(0 0 0 / 0.4);
}

.ps-hero__dots {
  display: flex;
  gap: 0.35rem;
  justify-content: center;
  padding: 0.75rem 0 0;
}

/* Kosketuskohde on 44x44, näkyvä piste 12px. Pelkkä 12px pallo on liian
   pieni sormelle (WCAG 2.5.8 vaatii 24x24). */
.ps-hero__dots a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 0;
}
.ps-hero__dots a::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--wp--preset--color--line);
  transition: background 150ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ps-hero__dots a:hover::before,
.ps-hero__dots a:focus-visible::before { background: var(--wp--preset--color--amber); }

/* Aktiivinen dia. Kun kuvat vaihtuvat itsestään, katsojan pitää nähdä missä
   kohtaa sarjaa ollaan; ilman tätä liike näyttää satunnaiselta. Merkinnän
   asettaa hero.js, joten ilman JS:ää mikään ei muutu. */
.ps-hero__dots a[aria-current="true"]::before {
  background: var(--wp--preset--color--amber);
  transform: scale(1.25);
}

/* ---------- kartta ----------
   Vanhassa oli Googlen upotus. OpenStreetMap näyttää saman eikä aseta
   evästeitä, joten karttaa ei tarvitse piilottaa suostumuksen taakse. */

.ps-kartta {
  aspect-ratio: 16 / 10;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 2px;
  overflow: hidden;
  background: var(--wp--preset--color--paper);
}

.ps-kartta iframe { width: 100%; height: 100%; border: 0; display: block; }

.ps-kartta-linkit { font-size: var(--wp--preset--font-size--small); margin-top: 0.75rem; }

/* ---------- uutisnostot ----------
   Lohkon ruudukko venyttää rivit saman korkuisiksi, jolloin lyhyen nostoon
   jää iso tyhjä alue. Yhdellä palstalla se näkyy mobiilissa reikänä. */

.wp-block-post-template.is-layout-grid { align-items: start; }

/* Nostokuvat ovat useimmiten julisteita, joissa teksti ulottuu reunaan asti,
   joten rajaaminen leikkaisi päivämäärät ja paikat pois. Vapaa kuvasuhde
   taas hajotti ruudukon: kuvien korkeudet vaihtelivat 150–576 px ja otsikot
   alkoivat eri korkeuksilta. Kompromissi: jokaisella nostolla on saman
   korkuinen kuva-ala ja juliste sovitetaan siihen kokonaisena (contain),
   reunoille jää paperitausta. !important tarvitaan, koska lohko kirjoittaa
   aspect-ration figureen ja mitat kuvaan liitetyypeissä, joita teema ei
   omista. */
.wp-block-post-template .wp-block-post-featured-image {
  aspect-ratio: 4 / 3 !important;
  background: var(--wp--preset--color--paper);
}

.wp-block-post-template .wp-block-post-featured-image img {
  width: 100%;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center;
}

/* ---------- tapahtumanosto ----------
   Kapea palkki karusellin alla: seuraava tapahtuma + linkki Tapahtumat-
   sivulle. Tavallinen kappale, jonka Reija paivittaa kasin. */

.ps-tapahtumanosto {
  background: var(--wp--preset--color--paper);
  border-block: 1px solid var(--wp--preset--color--line);
  padding: 0.9rem 1rem;
  text-align: center;
}

.ps-tapahtumanosto p { margin: 0; }

/* ---------- sivun otsikkopalkki ----------
   Ylätunnisteen ja otsikkopalkin väliin jää muuten lohkoväli. Palkki alkaa
   heti navigaation alta. */

body > .wp-site-blocks > * { margin-block-start: 0; }

.ps-pagehead {
  padding-block: clamp(2.25rem, 4vw, 3.25rem);
}

.ps-pagehead h1 {
  font-size: 2.5rem;
  margin: 0;
}

.ps-pagehead .wp-block-post-date { color: oklch(88% 0.02 45); }

/* ---------- sivupalkki "Ajankohtaista" ----------
   Vanhassa sivustossa jokaisella sisältösivulla oli oikealla kapea palsta,
   jossa oli uusimmat uutiset pikkukuvin. Sama rakenne tässä lohkoina. */

.ps-layout { gap: 3rem; }

.ps-layout__main > *:first-child { margin-top: 0; }

.ps-aside { position: sticky; top: 6rem; }

.ps-aside__title {
  background: var(--wp--preset--color--maroon);
  color: #fff;
  font-size: 1.25rem;
  margin: 0;
  padding: 0.6rem 0.9rem;
}

.ps-aside .wp-block-post-template {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--wp--preset--color--line);
  border-top: 0;
}

/* Kaikilla artikkeleilla ei ole nostokuvaa. Silloin otsikko saa koko rivin
   eikä ruudukkoon jää tyhjää saraketta. */
.ps-aside .wp-block-post-template > li {
  display: flex;
  gap: 0.75rem;
  align-items: start;
  padding: 0.75rem 0.9rem;
  margin: 0;
}

.ps-aside .wp-block-post-template > li > .wp-block-post-title { flex: 1 1 auto; min-width: 0; }
.ps-aside .wp-block-post-template > li > .wp-block-post-featured-image { flex: 0 0 78px; }

.ps-aside .wp-block-post-template > li + li { border-top: 1px solid var(--wp--preset--color--line); }

.ps-aside .wp-block-post-featured-image { margin: 0; aspect-ratio: auto !important; background: none; }

/* Sivupalkin pikkukuva on 78 × 58 px eikä sitä lueta, vaan klikataan. Rajaus
   on siinä oikein. !important kumoaa uutisnostojen contain-säännön. */
.ps-aside .wp-block-post-featured-image img {
  width: 78px !important;
  height: 58px !important;
  max-height: none;
  object-fit: cover !important;
}

.ps-aside .wp-block-post-title {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.35;
  font-weight: 600;
}

.ps-aside .wp-block-post-title a { color: var(--wp--preset--color--ink); text-decoration: none; }
.ps-aside .wp-block-post-title a:hover,
.ps-aside .wp-block-post-title a:focus-visible { color: var(--wp--preset--color--maroon); text-decoration: underline; }

/* Kapealla näytöllä palsta menee sisällön alle, ei rinnalle. */
@media (max-width: 781px) {
  .ps-aside { position: static; margin-top: 2.5rem; }
}

/* ---------- alatunniste ---------- */

.ps-footer {
  background: var(--wp--preset--color--maroon);
  color: oklch(97% 0.006 40);
  padding-block: clamp(3rem, 6vw, 4.5rem) 0;
  font-size: var(--wp--preset--font-size--small);
}

.ps-footer h2 {
  font-size: 1.1875rem;
  color: #fff;
  margin: 0 0 0.5rem;
}

.ps-footer h2::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 3px;
  background: var(--wp--preset--color--amber);
  margin-top: 0.75rem;
}

.ps-footer a { color: oklch(97% 0.006 40); text-decoration: none; }
.ps-footer a:hover, .ps-footer a:focus-visible { color: var(--wp--preset--color--amber); text-decoration: underline; }

/* yhteystiedot: rooli on nimilappu, ei otsikko.
   Puhelin ja sähköposti omilla riveillään ja eksplisiittisinä linkkeinä,
   jolloin iOS ei tunnista numeroa itse eikä väritä sitä omalla linkkivärillään. */

.ps-contacts { margin: 1.75rem 0 0; }

.ps-contacts dt {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--amber);
  margin-top: 1.5rem;
}
.ps-contacts dt:first-of-type { margin-top: 0; }

.ps-contacts dd { margin: 0.35rem 0 0; }

.ps-contacts .ps-name { display: block; font-weight: 600; color: #fff; font-size: 1.0625rem; }
.ps-contacts .ps-role { font-weight: 400; color: oklch(88% 0.01 40); }
.ps-contacts a { display: block; padding-block: 0.15rem; }

.ps-footer__credits {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid rgb(255 255 255 / 0.16);
  padding-block: 1.25rem;
  font-size: 0.875rem;
  color: oklch(82% 0.01 40);
}

/* ---------- galleria ----------
   Lohkon oma flex-taitto antaa poikkeavan kuvasuhteen kuville koko rivin
   leveyden. Kuvat ovat vuosien varrelta eri kameroista, joten ruudukko on
   pakotettava. Kiinteä kuvasuhde + object-fit pitää rivit tasaisina. */

.wp-block-gallery.has-nested-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: 0.75rem;
}

/* Galleria saa leveämmän palstan kuin leipäteksti. Lohkon oma alignwide ei
   pure sisennettyyn asetteluun, joten leveys annetaan tässä. */
.wp-block-gallery.has-nested-images.alignwide {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

/* !important on tässä perusteltu: WordPressin lohkotyylit ladataan teeman
   jälkeen ja ne asettavat kuville oman leveytensä. Emme omista sitä
   tyylitiedostoa, joten tarkkuuden nostaminen ei riitä. */
.wp-block-gallery.has-nested-images figure.wp-block-image {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  flex: none !important;
  display: block !important;
  height: 100%;
}

.wp-block-gallery.has-nested-images figure.wp-block-image > a {
  display: block;
  height: 100%;
}

.wp-block-gallery.has-nested-images figure.wp-block-image img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2px;
  transition: opacity 150ms cubic-bezier(0.22, 1, 0.36, 1);
}

.wp-block-gallery.has-nested-images figure.wp-block-image a:hover img,
.wp-block-gallery.has-nested-images figure.wp-block-image a:focus-visible img { opacity: 0.85; }

/* galleria-otsikot erottuvat toisistaan */
.entry-content > h2 { margin-top: clamp(2.5rem, 5vw, 4rem); }
.entry-content > h2:first-of-type { margin-top: 2rem; }

/* ---------- lomake ----------
   WPForms tuo oman painikevärinsä. Tämä palauttaa teeman painikkeen,
   jonka teksti on #7a3d00 oranssilla: kontrasti 4,8:1 valkoisen 2,1:1 sijaan. */

.wpforms-container .wpforms-submit,
.wpforms-container button[type="submit"] {
  background: var(--wp--preset--color--amber);
  color: var(--wp--preset--color--amber-ink);
  font-family: var(--wp--preset--font-family--sans);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--medium);
  border: 0;
  border-radius: 2px;
  padding: 0.9rem 2rem;
  min-height: 52px;
}

.wpforms-container .wpforms-submit:hover,
.wpforms-container .wpforms-submit:focus-visible { background: #ffb877; color: #5e2f00; }

.wpforms-container .wpforms-field-label { font-weight: 600; }
.wpforms-container .wpforms-required-label { color: var(--wp--preset--color--maroon); }

.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container textarea {
  font-size: var(--wp--preset--font-size--medium);
  min-height: 52px;
  border: 1px solid oklch(78% 0.01 40);
  border-radius: 2px;
  padding: 0.75rem 0.85rem;
}

.wpforms-container input:focus,
.wpforms-container textarea:focus {
  border-color: var(--wp--preset--color--maroon);
  outline: 3px solid oklch(30% 0.11 27 / 0.35);
  outline-offset: 1px;
}

/* ---------- saavutettavuuden perusta ---------- */

:where(a, button, input, textarea, select):focus-visible {
  outline: 3px solid var(--wp--preset--color--amber);
  outline-offset: 2px;
}

/* Näkymätön silmälle, luettavissa ruudunlukijalla. clip-path säilyttää
   tekstin saavutettavuuspuussa toisin kuin display:none. */
.ps-vain-ruudunlukijalle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ps-skip {
  position: absolute;
  left: -9999px;
}
.ps-skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 100;
  background: #fff;
  color: var(--wp--preset--color--maroon);
  padding: 0.75rem 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .ps-hero { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}