/*
Theme Name: Tietoturvaajaksi
Theme URI:
Author: Räikee Oy
Author URI:
Description: Tietoturvaajaksi.fi — verkkokoulutus sote-alalle
Version: 1.0.1
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: agency-base
Tags: block-patterns, block-styles, full-site-editing, wide-blocks
*/

/* ==========================================================================
   Layer Declarations
   ========================================================================== */

/*
   Cascade layers ensure predictable specificity. Layers are applied in order:

   1. reset     — Browser resets + box-sizing normalization (in this file)
   2. wpglobal  — WordPress global styles (auto-wrapped via functions.php for cascade control)
   3. base      — Global element defaults (in this file)
   4. tokens    — Design system tokens via CSS custom properties (in this file)
   5. header    — Header/navigation styles (see assets/css/header.css)
   6. components — Reusable component styles (see styles/blocks/core/*.css)
   7. utilities — Helper & utility classes (in this file)
   8. overrides — High-specificity client overrides (add your custom CSS here)

   Note: reset, base, tokens, and utilities are defined in this file.
   wpglobal layer wraps WP's global-styles-inline-css to make it overridable by other layers.
   header styles live in assets/css/header.css (enqueued via functions.php).
   Block-specific CSS lives in styles/blocks/core/ (auto-enqueued via functions.php).
*/

/* Layer order is also declared early in functions.php (wp_head priority 1) to ensure
   wpglobal is positioned correctly before WordPress outputs global-styles-inline-css.
   If you change this order, update functions.php to match.

   wpglobal is the @layer wrapper for WP's global-styles-inline-css (see functions.php
   wp_print_styles hook). Because it's named and positioned early, any layer declared
   after it (base → overrides) can override WP layout rules — including .is-layout-flow
   blockGap margins — without !important. */
@layer reset, wpglobal, base, tokens, header, components, utilities, overrides;

/* ==========================================================================
   Reset
   ========================================================================== */

@layer reset {
  /* 1. Use a more-intuitive box-sizing model + 2. Remove default margin */
  * {
    box-sizing: border-box;

    &::before,
    &::after {
      box-sizing: border-box;
    }

    &:not(dialog) {
      margin: 0;
    }
  }

  /* 3. Enable keyword animations + 4. Accessible line-height + 5. Text rendering */
  html {
    @media (prefers-reduced-motion: no-preference) {
      interpolate-size: allow-keywords;
    }
  }

  body {
    line-height: var(--wp--custom--line-height--normal, 1.5);
    -webkit-font-smoothing: antialiased;
  }

  /* 6. Improve media defaults */
  :is(img, picture, video, canvas, svg) {
    display: block;
    max-inline-size: 100%;
  }

  /* 7. Inherit fonts for form controls */
  :is(input, button, textarea, select) {
    font: inherit;
  }

  /* 8. Avoid text overflows + 9. Improve line wrapping */
  :is(p, h1, h2, h3, h4, h5, h6) {
    overflow-wrap: break-word;
  }

  p {
    text-wrap: pretty;
  }

  :is(h1, h2, h3, h4, h5, h6) {
    text-wrap: balance;
  }

  /* 10. Create a root stacking context */
  :is(#root, #__next) {
    isolation: isolate;
  }
}

/* ==========================================================================
   Base
   ========================================================================== */

@layer base {
  :where(a) {
    color: inherit;
  }

  :where(ul, ol) {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Flow/constrained layout spacing — override wpglobal blockGap defaults.
     WP applies margin-block-start to ALL layout children (both .is-layout-flow and
     .is-layout-constrained). We restore spacing only for content-level elements so
     container blocks (group, cover, columns, template-part) stay at 0.

     Covers both block editor classes (.wp-block-*) and plain HTML elements —
     post content outputs bare <p>/<blockquote> etc. with no block class.
     Excludes :first-child to avoid unwanted top margin at the start of a container. */
  :is(.is-layout-flow, .is-layout-constrained)
    > :where(
      p,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      blockquote,
      ul,
      ol,
      figure,
      hr,
      .wp-block-paragraph,
      .wp-block-heading,
      .wp-block-list,
      .wp-block-quote,
      .wp-block-pullquote,
      .wp-block-image,
      .wp-block-gallery,
      .wp-block-buttons,
      .wp-block-table,
      .wp-block-separator
    ):not(:first-child) {
    margin-block-start: var(--wp--preset--spacing--40);
  }

  /* Skip link — visible on focus only */
  .skip-link {
    position: absolute;
    inset-inline-start: -9999px;
    z-index: var(--wp--custom--z-index--toast, 400);
    padding-block: 0.5em;
    padding-inline: 1em;
    background: var(--wp--preset--color--contrast, #0f172a);
    color: var(--wp--preset--color--base, #fff);
    text-decoration: none;
    font-weight: 700;

    &:focus {
      inset-inline-start: 0;
      inset-block-start: 0;
    }
  }
}

/* ==========================================================================
   Tokens — Derived colors & semantic aliases via CSS Relative Colors (RCS)
   All values here are derived from theme.json palette entries using oklch()
   relative color syntax. Swapping hex values in theme.json auto-propagates.
   ========================================================================== */

/*
   QUICK REFERENCE — CSS Custom Properties (All Sources)
   ================================================

   COLOR PALETTE (from theme.json)
   —— Preset colors (use in blocks):
   --wp--preset--color--{primary, accent, secondary, base, contrast, subtle, muted}

   —— Derived states (hover, active, subtle, alpha scales):
   --color-{primary,accent,secondary}-hover           (lighten +15%)
   --color-{primary,accent,secondary}-active          (darken -15%)
   --color-{primary,accent}-subtle                    (light tint, 50% alpha)
   --color-{primary,accent,base,contrast}-alpha-{10,20,50,80}  (transparency scales)

   —— Status colors (contextual messages):
   --color-{success,warning,error,info}              (main color)
   --color-{success,warning,error,info}-subtle       (light variant)

   SEMANTIC SURFACES
   --color-surface                 (card backgrounds)
   --color-surface-raised          (slightly elevated)
   --color-surface-overlay         (semi-transparent overlay)
   --color-surface-sunken          (indented area)
   --color-surface-scrim           (semi-transparent dark layer)

   BORDERS & FOCUS
   --color-border                  (subtle dividers)
   --color-border-strong           (prominent dividers)
   --color-border-interactive      (interactive elements)
   --focus-ring                    (2px solid primary color)
   --focus-ring-offset             (2px)

   Z-INDEX (from theme.json — keep minimal)
   --wp--custom--z-index--sticky   (200 — header)
   --wp--custom--z-index--dropdown (300 — menus)
   --wp--custom--z-index--overlay  (250 — overlays)
   --wp--custom--z-index--modal    (300 — modals)
   --wp--custom--z-index--toast    (400 — notifications)

   TRANSITIONS (from theme.json — use timing + easing separately for flexibility)
   --wp--custom--transition--fast  (150ms ease — shorthand, use for simple transitions)
   --wp--custom--transition--normal (300ms ease — shorthand, use for simple transitions)
   --wp--custom--transition--slow  (500ms ease — shorthand, use for simple transitions)

   TIMING (compose with easing for complex multi-property transitions)
   --wp--custom--timing--fast      (150ms)
   --wp--custom--timing--normal    (300ms)
   --wp--custom--timing--slow      (500ms)

   EASING (use with timing for granular control)
   --wp--custom--easing--standard  (ease — standard, smooth)
   --wp--custom--easing--in        (ease-in — slow start)
   --wp--custom--easing--out       (ease-out — slow end)
   --wp--custom--easing--inOut     (cubic-bezier custom — smooth both ends)

   TYPOGRAPHY (from theme.json)
   --wp--preset--font-family--{heading, body}
   --wp--preset--font-size--{small, medium, large, x-large, 2x-large, 3x-large, 4x-large}
   --wp--custom--line-height--{tight, normal, relaxed}
   --wp--custom--letter-spacing--{tight, normal, wide}

   SPACING (from theme.json, increments 10–100)
   --wp--preset--spacing--{10, 20, 30, 40, 50, 60, 70, 80, 90, 100}

   SHADOWS (from theme.json)
   --wp--preset--shadow--{sm, md, lg, xl, inner}

   BORDER RADIUS (from theme.json)
   --wp--preset--border--radius--{small, medium, large, full}

   LAYOUT (from theme.json)
   --wp--style--global--content-size  (800px — main content width)
   --wp--style--global--wide-size     (1200px — wide section width)

   Note: WordPress preset variables are auto-generated from theme.json.
   Custom theme variables (--wp--custom--*) are defined in theme.json settings.custom.
*/

@layer tokens {
  :root {
    /* ----- Primary: hover / active / subtle ----- */
    --color-primary-hover: oklch(
      from var(--wp--preset--color--primary) calc(l + 0.15) c h
    );
    --color-primary-active: oklch(
      from var(--wp--preset--color--primary) calc(l - 0.15) c h
    );
    --color-primary-subtle: oklch(
      from var(--wp--preset--color--primary) calc(l + 0.45) c h / 0.5
    );

    /* ----- Accent: hover / active / subtle ----- */
    --color-accent-hover: oklch(
      from var(--wp--preset--color--accent) calc(l + 0.15) c h
    );
    --color-accent-active: oklch(
      from var(--wp--preset--color--accent) calc(l - 0.15) c h
    );
    --color-accent-subtle: oklch(
      from var(--wp--preset--color--accent) calc(l + 0.45) c h / 0.5
    );

    /* ----- Secondary: hover ----- */
    --color-secondary-hover: oklch(
      from var(--wp--preset--color--secondary) calc(l + 0.15) c h
    );

    /* ----- Primary: transparency scale ----- */
    --color-primary-alpha-10: oklch(
      from var(--wp--preset--color--primary) l c h / 0.1
    );
    --color-primary-alpha-20: oklch(
      from var(--wp--preset--color--primary) l c h / 0.2
    );
    --color-primary-alpha-50: oklch(
      from var(--wp--preset--color--primary) l c h / 0.5
    );

    /* ----- Accent: transparency scale ----- */
    --color-accent-alpha-10: oklch(
      from var(--wp--preset--color--accent) l c h / 0.1
    );
    --color-accent-alpha-20: oklch(
      from var(--wp--preset--color--accent) l c h / 0.2
    );
    --color-accent-alpha-50: oklch(
      from var(--wp--preset--color--accent) l c h / 0.5
    );

    /* ----- Contrast: transparency scale (overlays, borders, scrims) ----- */
    --color-contrast-alpha-5: oklch(
      from var(--wp--preset--color--contrast) l c h / 0.05
    );
    --color-contrast-alpha-10: oklch(
      from var(--wp--preset--color--contrast) l c h / 0.1
    );
    --color-contrast-alpha-20: oklch(
      from var(--wp--preset--color--contrast) l c h / 0.2
    );
    --color-contrast-alpha-50: oklch(
      from var(--wp--preset--color--contrast) l c h / 0.5
    );
    --color-contrast-alpha-80: oklch(
      from var(--wp--preset--color--contrast) l c h / 0.8
    );

    /* ----- Base: transparency scale (light overlays on dark bgs) ----- */
    --color-base-alpha-10: oklch(
      from var(--wp--preset--color--base) l c h / 0.1
    );
    --color-base-alpha-20: oklch(
      from var(--wp--preset--color--base) l c h / 0.2
    );
    --color-base-alpha-50: oklch(
      from var(--wp--preset--color--base) l c h / 0.5
    );

    /* ----- Semantic: surfaces ----- */
    --color-surface: var(--wp--preset--color--base);
    --color-surface-raised: var(--wp--preset--color--subtle);
    --color-surface-overlay: oklch(
      from var(--wp--preset--color--contrast) calc(l - 0.02) c h / 0.97
    );
    --color-surface-sunken: oklch(
      from var(--wp--preset--color--contrast) calc(l - 0.04) c h / 0.94
    );
    --color-surface-scrim: var(--color-contrast-alpha-50);

    /* ----- Semantic: borders ----- */
    --color-border: var(--color-contrast-alpha-10);
    --color-border-strong: var(--color-contrast-alpha-20);
    --color-border-interactive: var(--wp--preset--color--primary);
    --color-border-focus: var(--wp--preset--color--primary);

    /* ----- Semantic: focus ring ----- */
    --color-focus-ring: var(--wp--preset--color--primary);
    --focus-ring: 2px solid var(--color-focus-ring);
    --focus-ring-offset: 2px;

    /* ----- Status: hex fallbacks (overridden to OKLCH below) ----- */
    --color-success: #16a34a;
    --color-warning: #ca8a04;
    --color-error: #dc2626;
    --color-info: #2563eb;
  }

  /* OKLCH enhancement for status colors + derive subtle variants via relative colors */
  @supports (color: oklch(0% 0 0)) {
    :root {
      --color-success: oklch(55% 0.18 150);
      --color-success-subtle: oklch(
        from var(--color-success) calc(l + 0.42) c h
      );
      --color-warning: oklch(70% 0.16 85);
      --color-warning-subtle: oklch(
        from var(--color-warning) calc(l + 0.27) c h
      );
      --color-error: oklch(55% 0.22 28);
      --color-error-subtle: oklch(from var(--color-error) calc(l + 0.42) c h);
      --color-info: oklch(55% 0.2 260);
      --color-info-subtle: oklch(from var(--color-info) calc(l + 0.42) c h);
    }
  }
}

/* ==========================================================================
   Header
   ========================================================================== */

@layer header {
  .wp-block-template-part:has(.site-header) {
    position: fixed;
    inset-block-start: var(--wp-admin--admin-bar--height, 0px);
    inline-size: 100%;
    z-index: var(--wp--custom--z-index--sticky, 200);
  }

  .site-header {
    background: var(--wp--preset--color--primary);
    transition: background var(--wp--custom--timing--normal);
  }

  .site-header.is-stuck {
    background: var(--wp--preset--color--primary);
    box-shadow: var(--wp--preset--shadow--md);
  }
}

/* ==========================================================================
   Utilities
   ========================================================================== */

@layer utilities {
  /* Visually hidden but accessible to screen readers */
  .screen-reader-text {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* Text color utilities mapped to token scale */
  .has-muted-text {
    color: var(--wp--preset--color--muted, #64748b);
  }

  .has-success-text {
    color: var(--color-success, #16a34a);
  }

  .has-warning-text {
    color: var(--color-warning, #ca8a04);
  }

  .has-error-text {
    color: var(--color-error, #dc2626);
  }

  /* Raised surface with shadow */
  .has-raised-surface {
    background: var(--color-surface, #fff);
    box-shadow: var(--wp--preset--shadow--md);
    border-radius: var(--wp--preset--border--radius--medium, 0.5rem);
  }

  .hienolista {
    li {
      margin-block-start: 10px;

      &::before {
        content: "✓";
        color: var(--wp--preset--color--primary);
        font-weight: 700;
        margin-inline-end: 0.5em;
      }
    }
  }
}

/* ==========================================================================
   Styles outside @layer so they're globally accessible
   ========================================================================== */

main {
  &,
  & > * {
    margin-block-start: 0;
  }
}

@keyframes clipPathCircleOpen {
  0% {
    clip-path: circle(0% at top right);
  }
  100% {
    clip-path: circle(250% at top right);
  }
}

@keyframes clipPathCircleClose {
  0% {
    clip-path: circle(250% at top right);
  }
  100% {
    clip-path: circle(0% at top right);
  }
}

/* ==========================================================================
   Tietoturvaajaksi — landing page overrides
   ========================================================================== */

@layer overrides {
  /* Single article hero: hieman pienempi kuin oletus-H1 (xxxx-large) */
  .single-hero .wp-block-post-title {
    font-size: var(--wp--preset--font-size--xxx-large) !important;
    line-height: 1.15;
    letter-spacing: var(--wp--custom--letter-spacing--tight, -0.025em);
  }

  /* Blog listing -kortit */
  .blog-listing .blog-card {
    background-color: #8cb9f3;
    border: 1px solid var(--color-border, rgb(0 0 0 / 0.08));
    border-radius: 12px;
    box-shadow: var(--wp--preset--shadow--sm);
    transition: box-shadow var(--wp--custom--timing--normal, 300ms) ease, transform var(--wp--custom--timing--normal, 300ms) ease;
  }

  .blog-listing .blog-card:hover {
    box-shadow: var(--wp--preset--shadow--md);
    transform: translateY(-2px);
  }

  .blog-listing .blog-card .wp-block-post-title a {
    text-decoration: none;
    color: var(--wp--preset--color--contrast);
  }

  .blog-listing .blog-card .wp-block-post-title a:hover {
    color: var(--wp--preset--color--accent);
  }

  .blog-listing .blog-card .wp-block-post-date,
  .blog-listing .blog-card .wp-block-post-date a,
  .blog-listing .blog-card time {
    color: #fff !important;
  }

  /* Sininen tausta (logot + tilastot): tekstit valkoisiksi */
  .logos-bar-wave,
  .logos-bar-wave .wp-block-heading,
  .logos-bar-wave p,
  .stats-wave,
  .stats-wave .wp-block-heading,
  .stats-wave p {
    color: var(--wp--preset--color--base) !important;
  }

  /* Vihreät (accent) napit: aina tumma teksti, koska accent on kirkas vihreä (#78f03a) */
  .wp-block-button__link.has-accent-background-color,
  .wp-block-button.has-accent-background-color > .wp-block-button__link {
    color: var(--wp--preset--color--contrast) !important;
  }

  /* Offset anchor scroll for fixed header + optional admin bar */
  html {
    scroll-padding-block-start: calc(5rem + var(--wp-admin--admin-bar--height, 0px));
  }

  /* First section compensates for fixed header */
  main > .wp-block-group:first-child {
    padding-block-start: calc(var(--wp--preset--spacing--80) + 4rem);
  }

  /* Hero section: taller */
  .hero-section {
    min-block-size: 70vh;
    position: relative;
    z-index: 1;
    overflow-x: clip;
    /* Poistetaan ala-padding jotta kuva ulottuu osion alareunaan.
       Block-inline-tyyli käyttää fyysistä padding-bottom, joten täytyy ylikirjoittaa samalla. */
    padding-bottom: 0 !important;
    padding-block-end: 0 !important;
  }

  /* Tekstikolumnille ala-padding: ei hero-text-col-luokkaa DB:ssä, kohdistetaan järjestyksellä */
  .hero-section .wp-block-column:not(.hero-image-col) {
    padding-bottom: var(--wp--preset--spacing--80, 4rem);
  }

  /* Hero image: stretch from top to bottom of section */
  .hero-section .wp-block-columns {
    align-items: stretch !important;
    min-block-size: inherit;
  }

  .hero-image-col {
    align-self: stretch !important;
    /* Mobiilissa kuva ulottuu vain sectionin alaosaan (ei ylös, ettei mene tekstien päälle) */
    margin-block-end: calc(-1 * var(--wp--preset--spacing--80, 4rem));
  }

  /* wp:image rakenne: figure on "näkymätön" layoutissa, img käyttäytyy kuten ennen */
  .hero-image-col .hero-image {
    display: contents;
  }
  .hero-image-col .hero-image img {
    width: 100% !important;
    height: 100% !important;
    min-block-size: 360px !important;
    object-fit: cover;
    object-position: center top;
    display: block;
  }

  /* Desktopilla venytetään ylös, alas ja oikeaan viewport-laitaan asti */
  @media (min-width: 782px) {
    .hero-image-col {
      /* Kuva ulottuu sectionin paddingiin, mutta yläreuna jää tasan kiinteän
         headerin alle (header on noin 5rem korkea). Section padding-top = 8rem,
         joten -3rem nostaa kuvan tasan 5rem:iin viewportin yläreunasta. */
      margin-block-start: calc(5rem - var(--wp--preset--spacing--80, 4rem) - 4rem);
      margin-block-end: calc(-1 * var(--wp--preset--spacing--80, 4rem));
      margin-inline-end: calc((min(1200px, 90vw) - 100vw) / 2);
      overflow: visible;
    }
    .hero-image-col .hero-image img {
      width: calc(100% + (100vw - min(1200px, 90vw)) / 2) !important;
      max-inline-size: none !important;
      min-block-size: 500px !important;
    }
  }

  @media (max-width: 781px) {
    /* Mobiilissa ei pakotettua minimikorkeutta — muuten kuvan alle jää tyhjää tilaa */
    .hero-section {
      min-block-size: auto;
    }
    /* Pinotaan kolumnit pystysuoraan: teksti ylhäällä, kuva alla; ei gap-rakoa */
    .hero-section .wp-block-columns {
      flex-direction: column !important;
      gap: 0 !important;
      row-gap: 0 !important;
    }
    /* Molemmat kolumnit täysleveiksi */
    .hero-section .wp-block-column {
      flex-basis: 100% !important;
      width: 100% !important;
    }
    /* Teksti ensin, ei ylimääräistä padding-bottomia ettei kuvan eteen jää tyhjää */
    .hero-section .wp-block-column:not(.hero-image-col) {
      order: 1;
      padding-bottom: 0 !important;
    }
    /* Kuva pohjalle, edge-to-edge — escape root paddingista (1rem per puoli) */
    .hero-image-col {
      order: 2;
      margin-block-start: 0 !important;
      /* Negatiivinen alapuolen marginaali: kuva ulottuu aallon läpinäkyvän kohdan päälle
         niin että aallon kaaren oikealla puolella ei näy sectionin valkoista taustaa. */
      margin-block-end: -60px !important;
      margin-inline: calc(-1 * var(--wp--preset--spacing--40, 1rem)) !important;
      width: calc(100% + 2 * var(--wp--preset--spacing--40, 1rem)) !important;
      max-inline-size: none !important;
      max-block-size: 300px;
      overflow: hidden;
      position: relative;
      z-index: 1;
    }
    .hero-image-col .hero-image {
      display: block;
      margin: 0;
      block-size: 300px;
    }
    .hero-image-col .hero-image img {
      min-block-size: 0 !important;
      max-block-size: 300px !important;
      block-size: 300px !important;
      height: 300px !important;
      inline-size: 100% !important;
      width: 100% !important;
      object-fit: cover;
      object-position: center 30%;
      display: block;
    }
  }

  /* Hero heading: tighter tracking for large display text */
  .wp-block-group:has(.wp-block-heading h1) h1 {
    letter-spacing: var(--wp--custom--letter-spacing--tight, -0.025em);
  }

  /* Instructor photo */
  .instructor-photo img {
    box-shadow: var(--wp--preset--shadow--xl);
    display: block;
  }

  /* Desktop image: visible on tablet+ (≥782px), hidden on mobile */
  .instructor-photo--mobile {
    display: none !important;
  }

  /* Force constrained content width on direct children of section groups.
     WP's `.is-layout-constrained > *` doesn't apply reliably with the layer setup,
     so we target main's group sections directly. */
  main > .wp-block-group > :not(.alignfull):not(.alignwide):not(.wp-block-template-part) {
    max-inline-size: var(--wp--style--global--content-size) !important;
    margin-inline: auto !important;
  }

  /* Restore margin:auto for lists in constrained layouts (CSS reset layer zeros it out) */
  .is-layout-constrained > .wp-block-list {
    margin-inline: auto;
  }

  .wp-block-group:has(.wp-block-list) .wp-block-list li {
    padding-inline-start: 0.25em;
    list-style: none;
    position: relative;
    padding-left: 1.75em;

    &::before {
      content: "✓";
      position: absolute;
      inset-inline-start: 0;
      color: var(--wp--preset--color--accent);
      font-weight: 700;
    }
  }

  /* Stats section: number font weight boost */
  .has-subtle-background-color .wp-block-heading {
    font-weight: 700;
    line-height: 1;
  }

  /* Testimonial card: slight shadow for depth */
  .wp-block-group.has-subtle-background-color:not(.alignfull) {
    box-shadow: var(--wp--preset--shadow--sm);
  }

  /* CF7 form: spacing above */
  .has-primary-background-color .wpcf7 {
    margin-block-start: var(--wp--preset--spacing--40);
  }

  /* CF7 form layout: 2 columns on desktop, 1 on mobile */
  .wpcf7-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--30);
  }

  /* Hidden fieldset + response output: full width so they don't break 2-col layout */
  .wpcf7-form > .hidden-fields-container,
  .wpcf7-form > .wpcf7-response-output {
    grid-column: 1 / -1;
  }

  @media (min-width: 768px) {
    .wpcf7-form {
      grid-template-columns: 1fr 1fr;
    }

    /* Submit <p> spans full width */
    .wpcf7-form > p:has(.wpcf7-submit) {
      grid-column: 1 / -1;
    }

    /* If field count is odd, last field <p> spans full width.
       Use :nth-of-type to count only <p> elements (ignoring fieldset/response-output). */
    .wpcf7-form > p:nth-last-of-type(2):nth-of-type(odd) {
      grid-column: 1 / -1;
    }
  }

  /* CF7 labels on primary background: white */
  .has-primary-background-color .wpcf7-form label {
    color: var(--wp--preset--color--base);
  }

  /* CF7 submit button: match theme button styles */
  .wpcf7-form .wpcf7-submit {
    margin-block-start: var(--wp--preset--spacing--30);
    background-color: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--contrast);
    border: 0;
    border-radius: 20px;
    padding-block: var(--wp--preset--spacing--30);
    padding-inline: var(--wp--preset--spacing--50);
    font-weight: 600;
    font-size: var(--wp--preset--font-size--medium);
    line-height: var(--wp--custom--line-height--tight);
    cursor: pointer;
    transition: background-color var(--wp--custom--timing--fast);
  }

  .wpcf7-form .wpcf7-submit:hover {
    background-color: var(--color-accent-hover);
  }

  /* Registration section + columns: allow overflow for logo, mutta estä vaakaskrolli */
  #ilmoittaudu,
  #ilmoittaudu .wp-block-columns {
    overflow: visible;
  }
  #ilmoittaudu {
    overflow-x: clip;
  }

  /* Ilmoittaudu-kuva: venytetään oikeaan viewport-laitaan asti ja osion korkuiseksi */
  #ilmoittaudu .wp-block-columns {
    align-items: stretch !important;
  }

  .ilmoittaudu-image-col {
    align-self: stretch !important;
    margin-block-start: var(--wp--preset--spacing--70, 3rem);
    margin-block-end: calc(-1 * var(--wp--preset--spacing--80, 4rem));
    overflow: visible;
  }

  .ilmoittaudu-image-col .ilmoittaudu-image {
    display: contents;
  }
  .ilmoittaudu-image-col .ilmoittaudu-image img {
    width: 100% !important;
    height: calc(100% + var(--wp--preset--spacing--80, 4rem)) !important;
    display: block;
    object-fit: cover;
    object-position: center;
  }

  @media (min-width: 782px) {
    .ilmoittaudu-image-col {
      margin-block: calc(-1 * var(--wp--preset--spacing--80, 4rem));
      margin-inline-end: calc((min(1200px, 90vw) - 100vw) / 2);
      overflow: visible;
    }
    .ilmoittaudu-image-col .ilmoittaudu-image img {
      width: calc(100% + (100vw - min(1200px, 90vw)) / 2) !important;
      height: calc(100% + 2 * var(--wp--preset--spacing--80, 4rem)) !important;
      max-inline-size: none !important;
    }
  }

  @media (max-width: 781px) {
    .ilmoittaudu-image-col {
      display: none !important;
    }
  }

  /* Registration column: rounded corners + accent border + relative for logo */
  #ilmoittaudu .wp-block-column.has-primary-background-color {
    position: relative;
    overflow: visible;
    border-radius: 20px;
    border: 1px solid var(--wp--preset--color--accent);
  }

  /* Logo bird: half overflowing above the registration column, left-aligned with heading */
  .ilmoittaudu-logo {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: var(--wp--preset--spacing--60);
    transform: translateY(-50%);
    inline-size: 120px;
    block-size: auto;
    margin: 0;
    z-index: 3;
  }
  .ilmoittaudu-logo img {
    inline-size: 100%;
    block-size: auto;
    display: block;
  }

  /* Blockquote on dark bg: white background, subtle */
  .has-primary-background-color .wp-block-quote {
    background: rgb(255 255 255 / 0.08) !important;
    border-color: rgb(255 255 255 / 0.2) !important;
    border-radius: var(--wp--preset--border--radius--medium);
  }

  /* Logos bar text color fix on subtle bg */
  .has-subtle-background-color .wp-block-heading {
    color: var(--wp--preset--color--contrast);
  }

  /* Stats: poista oletus margin-bottom .wp-block-columns:lta */
  .stats-wave .wp-block-columns,
  .stats-wave .wp-block-column {
    margin-block-end: 0 !important;
    margin-block-start: 0 !important;
  }

  /* Testimonials: white wave on top, overlaps into instructor section above */
  .testimonials-wave {
    position: relative;
    z-index: 2;
    margin-block-start: -120px !important;
    padding-block-start: calc(var(--wp--preset--spacing--90) + 60px) !important;
    padding-block-end: calc(var(--wp--preset--spacing--80) + 60px) !important;
    background-color: transparent !important;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 60' preserveAspectRatio='none'%3E%3Cpath d='M0,0c667.7,-.75,1137.04,60,1920,60H0V0Z' fill='%23ffffff'/%3E%3C/svg%3E"),
      linear-gradient(to bottom, transparent 60px, #ffffff 60px);
    background-size: 100% 60px, 100% 100%;
    background-position: 0 0, 0 0;
    background-repeat: no-repeat;
  }

  /* Instructor image: stretch column past section padding so testimonials wave cuts the image */
  .instructor-wave .wp-block-columns {
    align-items: stretch !important;
  }

  /* Text column: top-aligned + bottom margin so content doesn't sit too close to the wave */
  .instructor-wave .wp-block-column:not(.instructor-image-col) {
    align-self: flex-start !important;
    margin-block-end: calc(var(--wp--preset--spacing--90) + 3rem) !important;
  }

  .instructor-image-col {
    align-self: stretch !important;
    margin-block-end: calc(-1 * var(--wp--preset--spacing--50)) !important;
    overflow: visible;
    display: flex !important;
    flex-direction: column;
    justify-content: flex-end;
  }

  .instructor-image-col .instructor-photo {
    display: block;
    width: 100%;
  }
  .instructor-image-col .instructor-photo img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* Instructor mobile overrides — must come AFTER desktop rules to win the cascade */
  @media (max-width: 781px) {
    .instructor-photo--desktop {
      display: none !important;
    }
    .instructor-photo--mobile {
      display: block !important;
      margin-inline: auto;
    }
    .instructor-wave .wp-block-column:not(.instructor-image-col) {
      margin-block-end: 0 !important;
      padding-block-end: 0 !important;
    }
    .instructor-wave .wp-block-columns {
      gap: 0 !important;
      flex-wrap: wrap !important;
    }
    .instructor-image-col {
      margin-block-start: 0 !important;
      margin-block-end: 0 !important;
      padding-block-start: 0 !important;
      justify-content: flex-start !important;
    }
  }

  /* Site footer: dark blue with white wave on top */
  .site-footer-wave {
    position: relative;
    z-index: 2;
    margin-block-start: -60px !important;
    padding-block-start: calc(var(--wp--preset--spacing--90) + 60px) !important;
    background-color: transparent !important;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 60' preserveAspectRatio='none'%3E%3Cpath d='M0,0c667.7,-.75,1137.04,60,1920,60H0V0Z' fill='%23021c4d'/%3E%3C/svg%3E"),
      linear-gradient(to bottom, transparent 60px, #021c4d 60px);
    background-size: 100% 60px, 100% 100%;
    background-position: 0 0, 0 0;
    background-repeat: no-repeat;
  }

  .site-footer-wave .footer-logo {
    max-inline-size: 340px;
    block-size: auto;
    display: block;
  }

  .site-footer-wave a {
    color: var(--wp--preset--color--base);
    text-decoration: underline;
  }

  .site-footer-wave a:hover {
    text-decoration: none;
  }

  /* Footer bottom row: 3 items split left/center/right, stack on mobile */
  .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--40);
    justify-content: space-between;
    align-items: center;
  }

  .footer-bottom > p:nth-child(2) {
    flex: 1;
    text-align: center;
  }

  @media (max-width: 767px) {
    .footer-bottom {
      flex-direction: column;
      align-items: flex-start;
    }

    .footer-bottom > p:nth-child(2) {
      text-align: start;
    }
  }

  /* Instructor section: dark blue with top wave only (bottom is overlapped by testimonials wave) */
  .instructor-wave {
    position: relative;
    z-index: 2;
    margin-block-start: -60px !important;
    padding-block-start: calc(var(--wp--preset--spacing--50) + 60px) !important;
    padding-block-end: var(--wp--preset--spacing--50) !important;
    background-color: transparent !important;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 60' preserveAspectRatio='none'%3E%3Cpath d='M0,0c667.7,-.75,1137.04,60,1920,60H0V0Z' fill='%23021c4d'/%3E%3C/svg%3E"),
      linear-gradient(to bottom, transparent 60px, #021c4d 60px);
    background-size: 100% 60px, 100% 100%;
    background-position: 0 0, 0 0;
    background-repeat: no-repeat;
  }

  /* Blog page divider: subtle-colored band with wave top + bottom, cuts hero above and listing below */
  .blog-divider-wave {
    position: relative;
    z-index: 2;
    margin-block-start: -60px !important;
    block-size: 180px;
    background-color: transparent !important;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 60' preserveAspectRatio='none'%3E%3Cpath d='M0,0c667.7,-.75,1137.04,60,1920,60H0V0Z' fill='%238bb9f3'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 60' preserveAspectRatio='none'%3E%3Cpath d='M0,0c667.7,-.75,1137.04,60,1920,60V0H0Z' fill='%238bb9f3'/%3E%3C/svg%3E"),
      linear-gradient(to bottom, transparent 60px, #8bb9f3 60px, #8bb9f3 calc(100% - 59px), transparent calc(100% - 59px));
    background-size: 100% 60px, 100% 60px, 100% 100%;
    background-position: 0 0, 0 100%, 0 0;
    background-repeat: no-repeat;
  }

  /* Logos bar + stats: wave top+bottom via data-URI SVGs */
  .logos-bar-wave,
  .stats-wave {
    position: relative;
    z-index: 2;
    margin-block-start: -60px !important;
    padding-block-start: calc(var(--wp--preset--spacing--50) + 60px) !important;
    padding-block-end: calc(var(--wp--preset--spacing--50) + 60px) !important;
    background-color: transparent !important;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 60' preserveAspectRatio='none'%3E%3Cpath d='M0,0c667.7,-.75,1137.04,60,1920,60H0V0Z' fill='%238bb9f3'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 60' preserveAspectRatio='none'%3E%3Cpath d='M0,0c667.7,-.75,1137.04,60,1920,60V0H0Z' fill='%238bb9f3'/%3E%3C/svg%3E"),
      linear-gradient(to bottom, transparent 60px, #8bb9f3 60px, #8bb9f3 calc(100% - 59px), transparent calc(100% - 59px));
    background-size: 100% 60px, 100% 60px, 100% 100%;
    background-position: 0 0, 0 100%, 0 0;
    background-repeat: no-repeat;
  }
}