/**
 * Janika Takatala — main stylesheet
 * Loaded after kadence-global (see functions.php).
 * Tokens mirror the Figma design (file LRIdrgE9zREnSRuYvgT1RG). Palette is also
 * declared in theme.json for the block editor; these vars back the CSS classes.
 */

:root {
  /* Primary (teal / petrol) */
  --jt-primary-900: #06171f;
  --jt-primary-600: #195367;
  --jt-primary-500: #22778f;
  --jt-primary-400: #3f93ac;
  --jt-primary-100: #c6e0e8;
  /* Accent (gold / tan) */
  --jt-accent-500: #b58a60;
  --jt-accent-400: #c9a37a;
  --jt-accent-300: #d6b481;
  --jt-accent-50:  #faf4ec;
  /* Neutrals */
  --jt-white: #ffffff;
  --jt-neutral-50: #f8fafb;
  --jt-neutral-200: #dee4e9;
  --jt-ink: #06171f;

  --jt-section-y: clamp(2.5rem, 6vw, 5rem);
  --jt-gutter: 90px;
  --jt-content: 1260px;
}

/* Base type — DM Sans across the site (enqueued in functions.php) */
body {
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--jt-ink);
}

/* ------------------------------------------------------------------ */
/* Shared helpers                                                      */
/* ------------------------------------------------------------------ */
.jt-eyebrow {
  color: var(--jt-accent-500);
  font-weight: 600;
  font-size: .875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0;
}

/* Full-bleed coloured sections stack flush — remove the block-gap between them
   (kills the white strip under the hero, etc.). */
.entry-content > .wp-block-group.alignfull { margin-block: 0; }

/* Tan pill buttons (used site-wide) */
.jt-btn,
.wp-block-button.is-style-jt-primary .wp-block-button__link {
  display: inline-block;
  background: var(--jt-accent-400);
  color: var(--jt-white);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  padding: .85em 1.5em;
  border-radius: 10px;
  border: 0;
  text-decoration: none;
  transition: background-color .15s ease;
}
.jt-btn:hover,
.wp-block-button.is-style-jt-primary .wp-block-button__link:hover {
  background: var(--jt-accent-500);
  color: var(--jt-white);
}

/* ------------------------------------------------------------------ */
/* Hero (Etusivu — header section)                                     */
/* ------------------------------------------------------------------ */
.jt-hero {
  position: relative;
  min-height: clamp(520px, 46vw, 680px);
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem);
  overflow: hidden;
  display: flex;
  align-items: flex-start; /* content sits higher up (matches Figma) */
  background: #fff;
}
/* Left content keeps the content-column gutter; the portrait is absolutely
   positioned so it bleeds to the viewport's right edge. Compound selector
   (0,2,0) beats Kadence's `.entry-content .alignfull`. */
.jt-hero.alignfull {
  padding-left: max(var(--jt-gutter), calc((100% - var(--jt-content)) / 2));
  padding-right: 0;
}
.jt-hero__body { position: relative; z-index: 1; max-width: 50rem; }
/* Equal vertical rhythm between eyebrow → title → lead → buttons. Physical
   margin-top + !important to override both WordPress' block-gap and the blocks'
   own physical margins (a logical margin-block-start loses to those in Chrome). */
.jt-hero__body > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.jt-hero__body > * + * { margin-top: 2.5625rem !important; } /* 41px (Figma) */
.jt-hero__media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: clamp(400px, 50%, 860px);
  pointer-events: none;
}
/* Portrait fills the box (larger, cropped), anchored top so the head stays. */
.jt-hero__media figure { height: 100%; width: 100%; margin: 0; }
.jt-hero__title {
  font-weight: 700;
  font-size: clamp(2.75rem, 6.4vw, 5.75rem); /* 44px mobile → 92px desktop (Figma) */
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0;
  /* Teal gradient text fill — dark → lighter teal */
  background: linear-gradient(115deg, var(--jt-primary-600) 0%, var(--jt-primary-400) 55%, #6fbdd2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.jt-hero__lead {
  color: var(--jt-ink);
  font-size: 1.125rem;
  line-height: 1.5;
  margin: 0;
}
.jt-hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; }
.jt-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

@media (max-width: 782px) {
  .jt-hero {
    display: flex;
    flex-direction: column-reverse;
    min-height: 0;
  }
  /* override the desktop alignfull padding (90px left / 0 right) with symmetric
     mobile padding, else the hero body is squeezed and the heading gets clipped */
  .jt-hero.alignfull {
    padding-left: clamp(1.25rem, 6vw, 2rem);
    padding-right: clamp(1.25rem, 6vw, 2rem);
  }
  .jt-hero__media {
    position: static;
    width: 100%;
    justify-content: center;
    margin-bottom: 1.5rem;
  }
  .jt-hero__media img { height: auto; max-height: 55vh; object-position: center; }
}

/* Wide content tables (e.g. tietosuoja/eväste) scroll on small screens instead of
   squishing their columns. */
@media (max-width: 600px) {
  .entry-content .wp-block-table { overflow-x: auto; }
  .entry-content .wp-block-table table { min-width: 460px; }
}

/* ------------------------------------------------------------------ */
/* Short bio band (lyhytbio) — full-width teal                         */
/* ------------------------------------------------------------------ */
.jt-bioband {
  display: grid;
  grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
  background: #3f93ac; /* primary-400 */
  color: #fff;
  padding-block: var(--jt-section-y);
}
.jt-bioband.alignfull {
  padding-inline: max(var(--jt-gutter), calc((100% - var(--jt-content)) / 2));
}
.jt-bioband__title {
  color: #fff;
  font-weight: 700;
  font-size: clamp(1.5rem, 2vw + 1rem, 2rem);
  line-height: 1.1;
  margin: 0;
}
.jt-bioband__text { color: #fff; }
.jt-bioband__text p { margin: 0 0 1.25rem; line-height: 1.6; }
.jt-bioband__text p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ */
/* Election themes (vaaliteemat) — cream band, 2x2 cards              */
/* ------------------------------------------------------------------ */
.jt-teemat {
  background: var(--jt-accent-50);
  padding-block: var(--jt-section-y);
}
.jt-teemat.alignfull {
  padding-inline: max(var(--jt-gutter), calc((100% - var(--jt-content)) / 2));
}
.jt-teemat__title {
  font-weight: 700;
  font-size: clamp(1.5rem, 2vw + 1rem, 2rem);
  line-height: 1.1;
  margin: 0;
  color: var(--jt-ink);
}
.jt-teemat__lead {
  color: var(--jt-primary-900);
  opacity: .72;
  margin: .75rem 0 0;
  max-width: 62ch;
  line-height: 1.5;
}
.jt-teemat__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  margin-top: clamp(1.75rem, 3vw, 2.75rem);
  align-items: stretch;
}
/* Teemat cards: all equal height (stretch + height:100%). The link row is pinned to
   the bottom (margin-top:auto) so the whitespace below "Lue lisää" always equals the
   top padding above the number — symmetric top/bottom on every card, no matter how
   much body text it has. The variable height is absorbed between the copy and link. */
.jt-teemat__grid .jt-card { height: 100%; }
.jt-teemat__grid .jt-card__num { margin: 0 0 1rem; }
.jt-teemat__grid .jt-card__title { margin: 0 0 .5rem; }
.jt-teemat__grid .jt-card__body { margin: 0 0 1rem; flex: none; }
.jt-teemat__grid .jt-card__linkrow { margin-top: auto; }
.jt-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 14px;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  box-shadow: 0 8px 28px rgba(6, 23, 31, .08);
}
.jt-card__num {
  color: var(--jt-accent-500);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1;
  margin: 0;
}
.jt-card__title {
  color: var(--jt-ink);
  font-weight: 700;
  font-size: 1.25rem;
  margin: .5rem 0 .75rem;
}
.jt-card__body { color: #555; line-height: 1.6; margin: 0 0 1rem; flex: 1; }
.jt-card__linkrow { margin: 0; }
.jt-card__link { color: var(--jt-primary-500); font-weight: 600; text-decoration: none; }
.jt-card__link:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ */
/* Video section (video-osio) — plain video, native controls          */
/* ------------------------------------------------------------------ */
.jt-video { background: #fff; padding-block: var(--jt-section-y); }
.jt-video.alignfull {
  padding-inline: max(var(--jt-gutter), calc((100% - var(--jt-content)) / 2));
}
.jt-video .wp-block-video { margin: 0; }
.jt-video__el,
.jt-video .wp-block-video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  background: #000;
  object-fit: cover;
}

/* ------------------------------------------------------------------ */
/* Latest posts (bloginostot) — cream, 3 dynamic cards                */
/* ------------------------------------------------------------------ */
.jt-blog { background: var(--jt-accent-50); padding-block: var(--jt-section-y); }
.jt-blog.alignfull {
  padding-inline: max(var(--jt-gutter), calc((100% - var(--jt-content)) / 2));
}
.jt-blog__title {
  color: var(--jt-ink);
  font-weight: 700;
  font-size: clamp(1.5rem, 2vw + 1rem, 2rem);
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
}
.jt-postgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
}
.jt-postcard {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(6, 23, 31, .06);
}
.jt-postcard__img { aspect-ratio: 400 / 187; background: var(--jt-neutral-200); }
.jt-postcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jt-postcard__body {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  flex: 1;
  padding: clamp(1.1rem, 2vw, 1.5rem);
}
.jt-postcard__meta { display: flex; justify-content: space-between; align-items: center; }
.jt-tag {
  background: var(--jt-primary-100);
  color: var(--jt-primary-600);
  font-size: .75rem;
  font-weight: 600;
  padding: .25em .8em;
  border-radius: 999px;
}
.jt-postcard__date { color: #777; font-size: .85rem; }
.jt-postcard__title { font-size: 1.15rem; font-weight: 700; margin: 0; }
.jt-postcard__title a { color: var(--jt-ink); text-decoration: none; }
.jt-postcard__title a:hover { color: var(--jt-primary-500); }
.jt-postcard__excerpt { color: #555; font-size: .95rem; line-height: 1.5; margin: 0; flex: 1; }
.jt-postcard__link { color: var(--jt-primary-500); font-weight: 600; text-decoration: none; margin-top: auto; }
.jt-postcard__link:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ */
/* Events (tapahtumat) — white, dynamic list                          */
/* ------------------------------------------------------------------ */
.jt-events { background: #fff; padding-block: var(--jt-section-y); }
.jt-events.alignfull {
  padding-inline: max(var(--jt-gutter), calc((100% - var(--jt-content)) / 2));
}
.jt-events__title {
  color: var(--jt-ink);
  font-weight: 700;
  font-size: clamp(1.5rem, 2vw + 1rem, 2rem);
  margin: 0 0 1.25rem;
}
.jt-eventrow {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding: 1rem 0;
  border-top: 1px solid var(--jt-neutral-200);
}
.jt-eventrow:last-child { border-bottom: 1px solid var(--jt-neutral-200); }
.jt-eventrow__date { color: var(--jt-accent-500); font-weight: 700; min-width: 8.5rem; }
.jt-eventrow__title { color: var(--jt-ink); font-weight: 600; text-decoration: none; }
.jt-eventrow__title:hover { color: var(--jt-primary-500); }
.jt-events__empty { color: #666; margin: 0; }

/* ------------------------------------------------------------------ */
/* Testimonials + social (quote ja some) — full-width teal            */
/* ------------------------------------------------------------------ */
.jt-quotesome {
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  background: var(--jt-primary-500);
  padding-block: var(--jt-section-y);
}
.jt-quotesome.alignfull {
  padding-inline: max(var(--jt-gutter), calc((100% - var(--jt-content)) / 2));
}
.jt-quotesome__h {
  color: #fff;
  font-weight: 700;
  font-size: clamp(1.5rem, 2vw + 1rem, 2rem);
  margin: 0 0 1.5rem;
}

/* carousel */
.jt-quotes__track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.jt-quotes__track::-webkit-scrollbar { display: none; }
.jt-quote {
  flex: 0 0 100%;
  scroll-snap-align: start;
  background: #fff;
  border-radius: 14px;
  padding: clamp(1.5rem, 3vw, 2rem);
}
.jt-quote__text { color: var(--jt-ink); font-size: 1.05rem; line-height: 1.6; margin: 0 0 1.25rem; }
.jt-quote__name { color: var(--jt-primary-500); font-weight: 700; margin: 0; }
.jt-quote__role { color: #555; font-size: .95rem; margin: .1rem 0 0; }
.jt-quotes__nav { display: flex; align-items: center; gap: .9rem; margin-top: 1.5rem; }
.jt-quotes__btn {
  width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  background: #fff; color: var(--jt-primary-600);
  font-size: 1.2rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.jt-quotes__btn:hover { background: var(--jt-accent-50); }
.jt-quotes__bar {
  flex: 1; max-width: 160px; height: 6px;
  border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, .35);
}
.jt-quotes__bar span {
  display: block; height: 100%; width: 20%;
  border-radius: 999px; background: var(--jt-primary-900);
  transition: width .25s ease;
}

/* social cards — one branded "follow" card per platform */
.jt-somegrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
/* min-width:0 lets the grid/flex tracks shrink below the Instagram feed's
   intrinsic min-content, so the social + quotes columns can't blow out on
   narrow screens (they otherwise force ~589px and get clipped). */
.jt-quotesome > *, .jt-some, .jt-somegrid, .jt-somecard { min-width: 0; }
.jt-somecard--ig .jt-somecard__body,
.jt-somecard--ig .jt-somecard__body #sb_instagram,
.jt-somecard--ig .jt-somecard__body #sbi_images { min-width: 0 !important; max-width: 100% !important; overflow: hidden; }
.jt-somecard {
  display: flex; flex-direction: column;
  min-height: 200px;
  background: #fff; border-radius: 14px; padding: 1.1rem 1.1rem 1.2rem;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.jt-somecard:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(6, 23, 31, .18); }
.jt-somecard__head { display: flex; align-items: center; gap: .65rem; }
.jt-somecard__avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--jt-primary-500);
}
.jt-somecard__handle { color: var(--jt-ink); font-weight: 700; font-size: .95rem; line-height: 1.15; margin: 0; }
.jt-somecard__plat { color: #777; font-size: .8rem; margin: .1rem 0 0; }
.jt-somecard__body {
  flex: 1; margin-top: .85rem; border-radius: 10px;
  background: var(--jt-neutral-50);
  display: flex; align-items: flex-end; padding: .9rem;
}
.jt-somecard__cta { color: var(--jt-primary-600); font-weight: 600; font-size: .9rem; }
.jt-somecard:hover .jt-somecard__cta { color: var(--jt-primary-900); }
/* per-platform brand colors on the avatar */
.jt-somecard[data-plat="instagram"] .jt-somecard__avatar {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.jt-somecard[data-plat="facebook"] .jt-somecard__avatar { background: #1877f2; }
.jt-somecard[data-plat="x"] .jt-somecard__avatar { background: #000; }
.jt-somecard[data-plat="tiktok"] .jt-somecard__avatar { background: #010101; }

/* Instagram card = live post grid (Instagram Feed plugin). The header links to
   the profile; the body holds the plugin's 2-col grid. Renders on prod only. */
.jt-somecard--ig .jt-somecard__head { text-decoration: none; }
.jt-somecard--ig .jt-somecard__body { padding: 0; background: transparent; display: block; }
.jt-somecard--ig .jt-somecard__body #sb_instagram { padding: 0 !important; width: 100% !important; }
.jt-somecard--ig .jt-somecard__body #sbi_images { gap: 6px !important; padding: 0 !important; }
.jt-somecard--ig .jt-somecard__body .sbi_item,
.jt-somecard--ig .jt-somecard__body .sbi_photo { border-radius: 8px; overflow: hidden; }
.jt-somecard--ig .jt-somecard__body #sbi_load { display: none; }

@media (max-width: 900px) {
  /* Shrink the full-width section gutter on tablet/mobile — 90px is a desktop
     value and leaves too little content width on small screens (applies to
     every .alignfull section, not just the hero which had its own override). */
  :root { --jt-gutter: clamp(1.25rem, 5vw, 2.5rem); }
  .jt-postgrid { grid-template-columns: 1fr; }
  .jt-quotesome { grid-template-columns: minmax(0, 1fr); }
  .jt-somegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 782px) {
  .jt-bioband { grid-template-columns: 1fr; }
  .jt-teemat__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .jt-somegrid { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ */
/* Custom header (UUSI navi) — dark teal bar                           */
/* ------------------------------------------------------------------ */
.jt-header { background: var(--jt-primary-600); position: sticky; top: 0; z-index: 100; }
.jt-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
  padding: 1.1rem max(var(--jt-gutter), calc((100% - var(--jt-content)) / 2));
}
.jt-header__logo {
  color: #fff;
  font-weight: 700;
  font-size: 1.5rem;
  text-decoration: none;
  margin-right: auto;
}
.jt-header__nav { display: flex; align-items: center; gap: 2rem; }
.jt-menu {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.jt-menu a { color: #fff; text-decoration: none; font-weight: 500; }
.jt-menu a:hover { color: var(--jt-accent-300); }
/* Active-page indicator (desktop): gold underline under the current menu item.
   Excludes the last item (the "Tule mukaan" pill CTA). */
.jt-menu > li > a { position: relative; }
@media (min-width: 901px) {
  .jt-menu > li.current-menu-item:not(:last-child) > a::after,
  .jt-menu > li.current_page_item:not(:last-child) > a::after,
  .jt-menu > li.current-menu-parent:not(:last-child) > a::after,
  .jt-menu > li.current_page_parent:not(:last-child) > a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
    height: 2px; background: var(--jt-accent-300); border-radius: 2px;
  }
}
/* Last menu item renders as the gold "Tule mukaan" pill CTA */
.jt-menu > li:last-child > a {
  background: var(--jt-accent-400);
  color: #fff;
  padding: .6em 1.3em;
  border-radius: 10px;
  font-weight: 600;
}
.jt-menu > li:last-child > a:hover { background: var(--jt-accent-500); color: #fff; }
/* Language switcher (Polylang) */
.jt-langswitch { display: flex; align-items: center; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.jt-langswitch li { margin: 0; }
.jt-langswitch a { color: rgba(255,255,255,.7); text-decoration: none; text-transform: uppercase; font-size: .78rem; font-weight: 700; letter-spacing: .05em; padding: .15rem .3rem; }
.jt-langswitch a:hover { color: #fff; }
.jt-langswitch .current-lang a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.jt-header__toggle {
  display: none;
  background: none;
  border: 0;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
@media (max-width: 900px) {
  .jt-header__toggle { display: block; }
  .jt-header__nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }
  .jt-header__nav.is-open { display: flex; }
  .jt-menu { flex-direction: column; align-items: flex-start; gap: 1rem; width: 100%; }
  /* "Tule mukaan" drops its pill styling on mobile so it matches the other
     links in size — kept gold for a subtle CTA hint. */
  .jt-menu > li:last-child > a {
    background: none; padding: 0; border-radius: 0;
    font-weight: 500; color: var(--jt-accent-300);
  }
  .jt-menu > li:last-child > a:hover { background: none; color: #fff; }
  .jt-langswitch { margin-top: .25rem; }
}

/* ------------------------------------------------------------------ */
/* Custom footer (UUSI FOTER) — dark teal + KOKOOMUS logo             */
/* ------------------------------------------------------------------ */
.jt-footer { background: var(--jt-primary-600); color: #fff; }
.jt-footer__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(2.5rem, 5vw, 3.75rem) max(var(--jt-gutter), calc((100% - var(--jt-content)) / 2));
}
.jt-footer__name {
  color: #fff;
  font-weight: 700;
  font-size: clamp(1.75rem, 2.5vw + 1rem, 2.375rem);
  margin: 0 0 .5rem;
}
.jt-footer__sub { color: rgba(255, 255, 255, .85); line-height: 1.5; margin: 0 0 2rem; }
.jt-footer__h { font-weight: 700; margin: 0 0 .5rem; }
.jt-footer__h--gold { color: var(--jt-accent-300); }
.jt-footer__contact { margin-bottom: 2rem; }
.jt-footer__contact a { display: block; color: #fff; text-decoration: underline; margin-bottom: .3rem; }
.jt-footer__icons { display: flex; gap: .9rem; }
.jt-footer__icons img { width: 24px; height: 24px; display: block; }
.jt-footer__icons a:hover { opacity: .75; }
.jt-footer__logo { width: 100%; height: auto; display: block; }
.jt-footer__divider { border: 0; border-top: 1px solid var(--jt-accent-400); opacity: .55; width: 100%; margin: 0; }
.jt-footer__credits { display: flex; flex-direction: column; gap: clamp(1.5rem, 3vw, 2rem); }
.jt-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: .875rem;
}
.jt-footer__bottom p { margin: 0; color: rgba(255, 255, 255, .9); }
.jt-footer__links { display: flex; gap: 1.5rem; }
.jt-footer__links a { color: #fff; text-decoration: underline; }

/* ================================================================== */
/* PAGE: Janika (bio)                                                  */
/* ================================================================== */

/* Bio hero (bio header) — text left, framed portrait right */
.jt-biohero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 44%);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  background: #fff;
  padding-block: var(--jt-section-y);
}
.jt-biohero.alignfull {
  padding-inline: max(var(--jt-gutter), calc((100% - var(--jt-content)) / 2));
}
.jt-biohero__title {
  color: var(--jt-ink);
  font-weight: 700;
  font-size: clamp(2rem, 3.5vw + 1rem, 3.25rem);
  line-height: 1.1;
  margin: 0;
}
.jt-biohero__lead {
  color: #5f7d88;
  line-height: 1.6;
  margin: 1.5rem 0 2rem;
  max-width: 38rem;
}
.jt-biohero__media img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: 12px;
}

/* Values (arvot / "Mihin uskon") — teal band, 3 cards (reuses .jt-card) */
.jt-arvot { background: var(--jt-primary-500); padding-block: var(--jt-section-y); }
.jt-arvot.alignfull {
  padding-inline: max(var(--jt-gutter), calc((100% - var(--jt-content)) / 2));
}
.jt-arvot__title {
  color: #fff;
  font-weight: 700;
  font-size: clamp(1.5rem, 2vw + 1rem, 2rem); /* match etusivu H2 */
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
}
.jt-arvot__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: stretch;
}
/* Equal-height cards + uniform spacing between number, title and body. */
.jt-arvot__grid .jt-card { height: 100%; gap: 1rem; }
.jt-arvot__grid .jt-card__num,
.jt-arvot__grid .jt-card__title,
.jt-arvot__grid .jt-card__body { margin: 0; }
.jt-arvot__grid .jt-card__body { flex: none; }

/* Long-form bio — alternating image/text chapters */
.jt-bio { padding-block: var(--jt-section-y); }
.jt-bio.alignfull {
  padding-inline: max(var(--jt-gutter), calc((100% - var(--jt-content)) / 2));
}
.jt-bio__chapter {
  display: grid;
  grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.jt-bio__chapter:last-child { margin-bottom: 0; }
.jt-bio__chapter--right { grid-template-columns: minmax(0, 1fr) minmax(0, 38%); }
.jt-bio__chapter--right .jt-bio__media { order: 2; }
.jt-bio__media img { display: block; width: 100%; border-radius: 10px; }
.jt-bio__title {
  color: var(--jt-ink);
  font-weight: 700;
  font-size: clamp(1.5rem, 2vw + 1rem, 2rem); /* match etusivu H2 */
  line-height: 1.15;
  margin: 0 0 1rem;
}
.jt-bio__text p { color: #333; line-height: 1.7; margin: 0 0 1.25rem; }
.jt-bio__text p:last-child { margin-bottom: 0; }
.jt-poem {
  border-left: 3px solid var(--jt-accent-400);
  padding-left: 1.25rem;
  margin: 1.75rem 0 0;
}
.jt-poem__h {
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--jt-primary-500);
  margin: 0 0 .6rem;
}
.jt-poem__verse { white-space: pre-line; font-style: italic; color: #555; line-height: 1.7; margin: 0 0 .5rem; }
.jt-poem__author { color: #777; margin: 0; }
/* Poem as a standalone editable quote block under the last chapter */
.jt-bio blockquote.jt-poem {
  max-width: 58ch;
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0 auto;
  font-size: inherit;
}

/* CV (Koulutus & Työkokemus) — cream, two columns of entry cards */
.jt-cv { background: var(--jt-accent-50); padding-block: var(--jt-section-y); }
.jt-cv.alignfull {
  padding-inline: max(var(--jt-gutter), calc((100% - var(--jt-content)) / 2));
}
.jt-cv__title {
  color: var(--jt-ink);
  font-weight: 700;
  font-size: clamp(1.5rem, 2vw + 1rem, 2rem); /* match etusivu H2 */
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
}
.jt-cv__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
.jt-cv__coltitle {
  color: var(--jt-primary-500);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding-bottom: .75rem;
  border-bottom: 2px solid var(--jt-accent-400);
  margin: 0 0 1rem;
}
.jt-cventry {
  background: #fff;
  border: 1px solid var(--jt-neutral-200);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
}
/* Parent-scoped (0,2,0) to beat Kadence's .single-content p margin-bottom. */
.jt-cventry .jt-cventry__date { color: var(--jt-accent-500); font-weight: 600; font-size: .8rem; line-height: 1.3; margin: 0 0 6px; }
.jt-cventry .jt-cventry__title { color: var(--jt-ink); font-weight: 700; font-size: 1.05rem; line-height: 1.3; margin: 0 0 6px; }
.jt-cventry .jt-cventry__org { color: var(--jt-primary-500); line-height: 1.3; margin: 0; }
.jt-cventry .jt-cventry__desc { color: #666; font-size: .9rem; line-height: 1.5; margin: 6px 0 0; }

/* Luottamustehtävät (positions of trust) — white, groups auto-balance in 2 cols */
.jt-luottamus { background: #fff; padding-block: var(--jt-section-y); }
.jt-luottamus.alignfull {
  padding-inline: max(var(--jt-gutter), calc((100% - var(--jt-content)) / 2));
}
.jt-luottamus__title {
  color: var(--jt-ink);
  font-weight: 700;
  font-size: clamp(1.5rem, 2vw + 1rem, 2rem); /* match etusivu H2 */
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
}
.jt-luottamus__cols { columns: 2; column-gap: clamp(1.5rem, 3vw, 3rem); }
.jt-luottamus__group {
  break-inside: avoid;
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
}
.jt-luottamus__gtitle {
  color: var(--jt-primary-500);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding-bottom: .75rem;
  border-bottom: 2px solid var(--jt-accent-400);
  margin: 0 0 1rem;
}
/* Group content: cream card holding an editable list of roles */
.jt-luottamus__list {
  background: var(--jt-accent-50);
  border-radius: 12px;
  padding: 1.1rem 1.25rem 1.1rem 2.4rem;
  margin: 0;
  list-style: disc;
}
.jt-luottamus__list li { color: #444; line-height: 1.55; margin-bottom: .55rem; }
.jt-luottamus__list li:last-child { margin-bottom: 0; }

/* Lisätiedot (extras) — cream, 3 cards */
.jt-extras { background: var(--jt-accent-50); padding-block: var(--jt-section-y); }
.jt-extras.alignfull {
  padding-inline: max(var(--jt-gutter), calc((100% - var(--jt-content)) / 2));
}
.jt-extras__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.75rem); align-items: start; }
.jt-extras__card {
  background: #fff;
  border: 1px solid var(--jt-neutral-200);
  border-radius: 12px;
  padding: clamp(1.25rem, 2vw, 1.75rem);
}
.jt-extras__h { color: var(--jt-primary-500); font-weight: 700; font-size: 1.1rem; margin: 0 0 1rem; }
/* Editable rows: <p class="jt-row"> with label/meta spans */
.jt-row { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; margin: 0; border-top: 1px solid var(--jt-neutral-200); }
.jt-row:first-of-type { border-top: 0; }
.jt-row__label { color: var(--jt-ink); }
.jt-row__meta { color: var(--jt-primary-400); white-space: nowrap; }
/* Editable language rows: <p class="jt-lang"> with name/level spans + bar spans */
.jt-lang { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem; padding: .5rem 0; margin: 0; }
.jt-lang__name { color: var(--jt-ink); font-weight: 600; }
.jt-lang__level { color: var(--jt-primary-400); font-size: .9rem; }
.jt-lang__bar { flex-basis: 100%; display: block; height: 6px; border-radius: 999px; background: var(--jt-neutral-200); margin-top: .4rem; overflow: hidden; }
.jt-lang__bar span { display: block; height: 100%; background: var(--jt-primary-500); border-radius: 999px; }
.jt-pub { color: #555; font-size: .85rem; line-height: 1.55; padding: .75rem 0; margin: 0; border-top: 1px solid var(--jt-neutral-200); }
.jt-pub:first-of-type { border-top: 0; padding-top: 0; }

@media (max-width: 900px) {
  .jt-biohero { grid-template-columns: 1fr; }
  .jt-biohero__media { order: -1; }
  .jt-arvot__grid { grid-template-columns: 1fr; }
  .jt-bio__chapter, .jt-bio__chapter--right { grid-template-columns: 1fr; }
  .jt-bio__chapter--right .jt-bio__media { order: -1; }
  .jt-bio__media { order: -1; }
  .jt-cv__cols { grid-template-columns: 1fr; }
  .jt-extras__grid { grid-template-columns: 1fr; }
}

/* ================================================================== */
/* PAGE: Politiikka                                                    */
/* ================================================================== */

/* Arvot accordion — cream band, expandable rows */
.jt-accordion { background: var(--jt-accent-50); padding-block: var(--jt-section-y); }
.jt-accordion.alignfull {
  padding-inline: max(var(--jt-gutter), calc((100% - var(--jt-content)) / 2));
}
.jt-accordion__title {
  color: var(--jt-ink);
  font-weight: 700;
  font-size: clamp(1.5rem, 2vw + 1rem, 2rem); /* match etusivu H2 */
  margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
}
/* Native <details> accordion */
.jt-accordion__list { display: flex; flex-direction: column; gap: 1rem; }
details.jt-acc__item {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(6, 23, 31, .05);
  overflow: hidden;
}
details.jt-acc__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.5rem;
  color: var(--jt-ink);
  font-weight: 700;
  font-size: 1.25rem; /* match .jt-vbox__h ("Lapset ja nuoret") */
}
details.jt-acc__item summary::-webkit-details-marker { display: none; }
details.jt-acc__item summary { transition: color .15s ease; }
details.jt-acc__item summary:hover { color: var(--jt-primary-600); }
details.jt-acc__item summary::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--jt-primary-500);
  border-bottom: 2px solid var(--jt-primary-500);
  transform: rotate(45deg);
  transition: transform .2s ease, border-color .15s ease;
  margin-top: -4px;
}
details.jt-acc__item summary:hover::after { border-color: var(--jt-primary-600); }
details.jt-acc__item[open] summary::after { transform: rotate(-135deg); margin-top: 2px; }
details.jt-acc__item > :not(summary) { padding-inline: 1.5rem; color: #444; line-height: 1.6; margin: 0 0 1rem; }
details.jt-acc__item > :not(summary):first-of-type { padding-top: .25rem; }
details.jt-acc__item > :last-child { margin-bottom: 1.3rem; }

/* Vaalitavoitteet — cream, numbered policy boxes */
.jt-vaalit { background: var(--jt-accent-50); padding-block: var(--jt-section-y); }
.jt-vaalit.alignfull {
  padding-inline: max(var(--jt-gutter), calc((100% - var(--jt-content)) / 2));
}
.jt-vaalit__title {
  color: var(--jt-ink);
  font-weight: 700;
  font-size: clamp(1.5rem, 2vw + 1rem, 2rem); /* match etusivu H2 */
  margin: 0 0 1rem;
}
.jt-vaalit__intro { color: #444; line-height: 1.7; max-width: 60rem; margin: 0 0 1rem; }
.jt-vaalit__list { display: flex; flex-direction: column; gap: clamp(1.25rem, 2.5vw, 2rem); margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.jt-vbox {
  display: grid;
  grid-template-columns: 96px 1fr;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(6, 23, 31, .06);
  overflow: hidden;
}
.jt-vbox__num {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin: 0;
  padding-top: 1.5rem;
  background: var(--jt-primary-500);
  color: #fff;
  font-weight: 700;
  font-size: 1.75rem;
}
/* Parent-scoped (0,2,0) to beat Kadence's .single-content p margin-bottom, which
   otherwise shrinks the stretched teal cell and leaves a gap below the number. */
.jt-vbox .jt-vbox__num { margin: 0; }
.jt-vbox__body { padding: clamp(1.4rem, 2.5vw, 2rem); }
.jt-vbox__h { color: var(--jt-primary-500); font-weight: 700; font-size: 1.25rem; margin: 0 0 1rem; }
.jt-vbox__body p { color: #444; line-height: 1.7; margin: 0 0 1rem; }

/* Janikan top 8 — teal band, 2x4 numbered cards */
.jt-top8 { background: var(--jt-primary-500); padding-block: var(--jt-section-y); }
.jt-top8.alignfull {
  padding-inline: max(var(--jt-gutter), calc((100% - var(--jt-content)) / 2));
}
.jt-top8__title { color: #fff; font-weight: 700; font-size: clamp(1.5rem, 2vw + 1rem, 2rem); margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); }
.jt-top8__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 1.5rem); grid-auto-rows: 1fr; }
.jt-t8 {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  align-items: center;
  gap: 1rem;
  background: #fff;
  border-radius: 12px;
  padding: clamp(1.1rem, 2vw, 1.5rem);
  height: 100%;
}
.jt-t8__num { color: var(--jt-accent-500); font-weight: 700; font-size: 1.75rem; line-height: 1; margin: 0; }
.jt-t8__h { color: var(--jt-ink); font-weight: 700; font-size: 1.05rem; margin: 0 0 .4rem; }
.jt-t8__body { color: #555; font-size: 1.125rem; line-height: 1.5; margin: 0; }
/* Any paragraph inside a box gets the box text style, so an item typed fresh
   in the editor (without the class) still matches the others. */
.jt-t8 > p:not(.jt-t8__num) { color: #555; font-size: 1.125rem; line-height: 1.5; margin: 0; }
/* Beat the theme's default paragraph margin, which pushed the numbers up and
   added empty space to every box. */
.jt-t8 > .jt-t8__num { margin: 0; }

@media (max-width: 900px) {
  .jt-vbox { grid-template-columns: 64px 1fr; }
  .jt-vbox__num { font-size: 1.4rem; }
  .jt-top8__grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
}

/* ================================================================== */
/* PAGE: Ole yhteydessä / Tule mukaan (contact)                        */
/* ================================================================== */
.jt-joinhero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  background: #fff;
  padding-block: var(--jt-section-y);
}
.jt-joinhero.alignfull {
  padding-inline: max(var(--jt-gutter), calc((100% - var(--jt-content)) / 2));
}
.jt-joinhero__title { color: var(--jt-ink); font-weight: 700; font-size: clamp(2rem, 3vw + 1rem, 2.75rem); margin: 0 0 1.5rem; }
.jt-joinhero__text { color: var(--jt-primary-500); line-height: 1.6; }
.jt-joinhero__text p { margin: 0 0 1rem; }
.jt-joinhero__text a { color: var(--jt-primary-600); text-decoration: underline; }
.jt-socialcard { background: var(--jt-primary-400); border-radius: 12px; padding: clamp(1.5rem, 3vw, 2rem); color: #fff; }
.jt-socialcard__h { font-weight: 700; font-size: 1.75rem; margin: 0 0 .5rem; }
.jt-socialcard__sub { color: #d9f2f2; margin: 0 0 1.5rem; }
.jt-socialcard__icons { display: flex; gap: 1.25rem; }
.jt-socialcard__icons a:hover { opacity: .8; }
.jt-socialcard__icons img { width: 40px; height: 40px; display: block; filter: brightness(0) invert(1); }

.jt-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: start;
  background: var(--jt-accent-50);
  padding-block: var(--jt-section-y);
}
.jt-contact.alignfull {
  padding-inline: max(var(--jt-gutter), calc((100% - var(--jt-content)) / 2));
}
.jt-form__title { color: var(--jt-ink); font-weight: 700; font-size: clamp(1.5rem, 2vw + 1rem, 2rem); margin: 0 0 .75rem; }
.jt-form__intro { color: #6b6b6b; line-height: 1.5; margin: 0 0 1.5rem; }
button.jt-btn { border: 0; cursor: pointer; }

/* Contact form (.jt-cform — native form, replaces Ninja Forms ID 1).
   Scoped under .jt-contact to match the site's clean form look. */
.jt-cform { margin: 0; }
.jt-cform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.jt-cform__field { margin: 0 0 1.25rem; padding: 0; border: 0; }
.jt-cform__field > label,
.jt-cform__checklist > legend {
  display: block; font-weight: 500; font-size: 1rem; margin: 0 0 .5rem; padding: 0; color: var(--jt-ink);
}
.jt-cform__req { color: var(--jt-primary-500); }
.jt-cform input[type="text"],
.jt-cform input[type="email"],
.jt-cform textarea {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--jt-neutral-200); border-radius: 8px;
  padding: .75rem; font: inherit; background: #fff; color: var(--jt-ink);
  box-shadow: none; height: auto;
}
.jt-cform textarea { min-height: 180px; resize: vertical; }
.jt-cform input[type="text"]:focus,
.jt-cform input[type="email"]:focus,
.jt-cform textarea:focus {
  outline: none; border-color: var(--jt-primary-500);
  box-shadow: 0 0 0 3px rgba(34, 119, 143, .15);
}
/* checkbox list ("Haluaisin") */
.jt-cform__checklist label {
  display: flex; align-items: center; gap: .6rem; font-weight: 400; color: var(--jt-ink); cursor: pointer; margin: 0 0 .55rem;
}
.jt-cform__checklist input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--jt-primary-500); }
/* consent checkbox (tietosuoja) — box inline before its label */
.jt-cform__consent { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; gap: .6rem; margin: 0 0 1.5rem; }
.jt-cform__consent input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--jt-primary-500); margin: .15rem 0 0; }
.jt-cform__consent label { flex: 1 1 auto; font-weight: 400; color: var(--jt-ink); line-height: 1.5; }
.jt-cform__consent a { color: var(--jt-primary-500); }
/* submit button */
.jt-cform__submit button {
  background: var(--jt-primary-500); color: #fff; border: 0; border-radius: 999px;
  padding: .85rem 2.2rem; font: inherit; font-weight: 600; width: auto; cursor: pointer;
  transition: background .15s ease;
}
.jt-cform__submit button:hover { background: var(--jt-primary-600); }
/* validation + success states */
.jt-cform__errors { background: #fdecec; border: 1px solid #f3b5b5; border-radius: 8px; padding: .75rem 1rem; margin: 0 0 1.25rem; }
.jt-cform__errors p { color: #a12a2a; margin: 0 0 .25rem; }
.jt-cform__errors p:last-child { margin: 0; }
.jt-cform__done { background: #fff; border: 1px solid var(--jt-neutral-200); border-radius: 8px; padding: 1.5rem; }
.jt-cform__done p { margin: 0 0 .5rem; color: var(--jt-ink); }
.jt-cform__done p:last-child { margin: 0; }
.jt-contact__aside { display: flex; flex-direction: column; }
.jt-aside__h { color: var(--jt-ink); font-weight: 600; margin: 0 0 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--jt-neutral-200); }
.jt-aside__group { margin-bottom: 2rem; }
.jt-aside__group:last-child { margin-bottom: 0; }
.jt-infocard { background: #fff; border: 1px solid var(--jt-neutral-200); border-radius: 8px; padding: 1rem 1.25rem; margin-bottom: 1rem; }
.jt-infocard:last-child { margin-bottom: 0; }
/* Parent-scoped (0,2,0) to beat Kadence's .single-content p margin-bottom. */
.jt-infocard .jt-infocard__label { color: var(--jt-primary-500); font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.3; margin: 0 0 8px; }
.jt-infocard .jt-infocard__name { color: var(--jt-ink); font-weight: 700; line-height: 1.3; margin: 0 0 8px; }
.jt-infocard .jt-infocard__meta { color: var(--jt-primary-500); font-size: .9rem; line-height: 1.3; margin: 0; }
.jt-infocard .jt-infocard__meta a { color: inherit; }
.jt-infocard .jt-infocard__desc { color: #4a5760; font-size: .9rem; line-height: 1.5; margin: 0; }

@media (max-width: 900px) {
  .jt-joinhero { grid-template-columns: 1fr; }
  .jt-contact { grid-template-columns: 1fr; }
}

/* ================================================================== */
/* PAGE: Blogi (Ajatuksia ja kirjoituksia)                             */
/* ================================================================== */
.jt-bloghead { background: var(--jt-accent-50); padding-block: clamp(2rem, 4vw, 3.5rem); }
.jt-bloghead.alignfull {
  padding-inline: max(var(--jt-gutter), calc((100% - var(--jt-content)) / 2));
}
.jt-bloghead__title { color: var(--jt-ink); font-weight: 700; font-size: clamp(2rem, 3vw + 1rem, 3rem); margin: 0 0 .5rem; }
.jt-bloghead__sub { color: #555; margin: 0 0 1.5rem; }
.jt-blogsearch { display: flex; max-width: 340px; margin: 0 0 1.25rem; }
.jt-blogsearch input {
  flex: 1;
  border: 1px solid var(--jt-neutral-200);
  border-radius: 999px;
  padding: .6rem 1rem;
  font: inherit;
  background: #fff;
}
.jt-blogcats { display: flex; flex-wrap: wrap; gap: .6rem; }
.jt-cat {
  padding: .45em 1.1em;
  border-radius: 999px;
  border: 1px solid var(--jt-neutral-200);
  background: #fff;
  color: var(--jt-ink);
  text-decoration: none;
  font-size: .9rem;
  text-transform: capitalize;
}
.jt-cat:hover, .jt-cat.is-active { background: var(--jt-primary-500); color: #fff; border-color: var(--jt-primary-500); }
.jt-bloggrid { background: #fff; padding-block: var(--jt-section-y); }
.jt-bloggrid.alignfull {
  padding-inline: max(var(--jt-gutter), calc((100% - var(--jt-content)) / 2));
}

/* ------------------------------------------------------------------ */
/* Blog archive / single post (Kadence templates) overrides           */
/* ------------------------------------------------------------------ */
/* Cream header band instead of the default light-grey hero. */
.entry-hero-container-inner { background: var(--jt-accent-50); }
/* Post title links turn teal on hover. */
.entry-title a:hover,
.loop-entry .entry-title a:hover { color: var(--jt-primary-500); }
/* Post titles (single post + blog listing): tighter line spacing like the page
   headings; Kadence's global h1/h2 line-height of 1.5 reads loose on mobile. */
.entry-title { line-height: 1.15; hyphens: auto; overflow-wrap: break-word; }
/* Phones: scale the single-post title with the screen so long Finnish words
   (e.g. "Perhemyönteisyydellä") fit on one line instead of breaking mid-word. */
@media (max-width: 600px) {
  .single h1.entry-title { font-size: clamp(1.4rem, 7vw, 2rem); }
  /* Blog listing cards are narrower than the screen, so scale against card width. */
  .loop-entry .entry-title { font-size: clamp(1.15rem, 9vw - 0.55rem, 1.75rem); }
}

/* ================================================================== */
/* "Mitä ajan" — floating topic selector (site-wide pop-up)            */
/* Launcher bottom-left to stay clear of the cookie banner (bottom-right). */
/* ================================================================== */
.jt-ma__launch {
  position: fixed; left: 20px; bottom: 20px; z-index: 900;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--jt-primary-600); color: #fff; border: 0; border-radius: 999px;
  padding: 12px 20px; font: inherit; font-weight: 600; cursor: pointer;
  box-shadow: 0 6px 20px rgba(6, 23, 31, .22);
}
.jt-ma__launch:hover { background: var(--jt-primary-500); }
.jt-ma__launch svg { width: 20px; height: 20px; flex: 0 0 auto; }
.jt-ma__panel {
  position: fixed; left: 20px; bottom: 82px; z-index: 901;
  width: 340px; max-width: calc(100vw - 40px);
  background: #fff; border: 1px solid var(--jt-neutral-200); border-radius: 16px;
  overflow: hidden; box-shadow: 0 12px 40px rgba(6, 23, 31, .22);
  /* Never taller than the window, so the header with the close button stays
     visible on short screens; the topics scroll inside instead. */
  max-height: calc(100vh - 102px); max-height: calc(100dvh - 102px);
  display: flex; flex-direction: column;
}
.jt-ma__panel[hidden] { display: none; }
.jt-ma__head {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--jt-primary-600); color: #fff; padding: 12px 16px;
}
.jt-ma__title { font-weight: 600; font-size: 1rem; }
.jt-ma__close { background: none; border: 0; color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.jt-ma__body { padding: 16px; overflow-y: auto; min-height: 0; }
.jt-ma__chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.jt-ma__chip {
  display: flex; align-items: center; gap: 7px; justify-content: center;
  background: #fff; border: 1px solid var(--jt-neutral-200); border-radius: 8px;
  padding: 9px 8px; font: inherit; font-size: .9rem; color: var(--jt-ink); cursor: pointer; text-align: center;
}
.jt-ma__chip:hover { border-color: var(--jt-primary-500); }
.jt-ma__chip.is-active { background: var(--jt-primary-600); color: #fff; border-color: var(--jt-primary-600); }
.jt-ma__chip--wide { grid-column: span 2; }
.jt-ma__lbl { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--jt-accent-500); margin: 0 0 6px; }
.jt-ma__txt { font-size: .95rem; line-height: 1.55; color: var(--jt-ink); margin: 0 0 12px; }
.jt-ma__link { display: inline-flex; align-items: center; gap: 6px; color: var(--jt-primary-500); text-decoration: none; font-weight: 600; font-size: .9rem; }
.jt-ma__link:hover { text-decoration: underline; }
@media (prefers-reduced-motion: no-preference) {
  .jt-ma__launch, .jt-ma__chip { transition: background .15s ease, border-color .15s ease; }
}
/* Mobile: launcher stays bottom-left; panel becomes a full-width bottom sheet. */
@media (max-width: 600px) {
  .jt-ma__launch { left: 16px; bottom: 16px; padding: 11px 18px; }
  .jt-ma__panel {
    left: 0; right: 0; bottom: 0; width: 100%; max-width: none; max-height: 82vh;
    border-radius: 16px 16px 0 0; display: flex; flex-direction: column;
  }
  .jt-ma__body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

/* Blog archive header — heading sized like the other pages' titles, subtitle
   sized/coloured like page body text. Selector out-specifies Kadence's own CSS. */
.blog .post-archive-title h1.archive-title {
  font-size: clamp(2rem, 3.5vw + 1rem, 3.25rem);
  line-height: 1.1;
  color: var(--jt-ink);
}
.post-archive-title .jt-archive-sub {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #5f7d88;
  margin: .75rem 0 0;
  max-width: 42rem;
}

/* Per-section styles are appended as pages are rebuilt. */