/*
Theme Name: Tidypro
Theme URI:
Author: Räikee Oy
Author URI: https://raikee.fi
Description: Tidypro Oy – Saariselän kiinteistöpalvelut. Moderni, puhdas ja luotettava.
Version: 1.0.0
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. base      — Global element defaults (in this file)
   3. tokens    — Design system tokens via CSS custom properties (in this file)
   4. header    — Header/navigation styles (see assets/css/header.css)
   5. components — Reusable component styles (see styles/blocks/core/*.css)
   6. utilities — Helper & utility classes (in this file)
   7. overrides — High-specificity client overrides (add your custom CSS here)

   Note: reset, base, tokens, and utilities are defined in this file.
   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 reset, 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;
  }

  /* 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);
    }
  }
}

/* ==========================================================================
   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);
  }
}

/* ==========================================================================
   Keyframes — Outside @layer so they're globally accessible
   ========================================================================== */

@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);
  }
}

/* ==========================================================================
   Tidypro — Components
   ========================================================================== */

@layer components {
  /* ------------------------------------------------------------------
     Star icon decorator
     ::after pseudo-element positioned at top-left corner.
     Center of star aligns to corner via transform: translate(-50%, -50%).
     Applied to: wp-block-column (services), text columns (about).
  ------------------------------------------------------------------ */

   ul.wp-block-list, ol.wp-block-list  {
    list-style: inside;
   }
	
  .tidypro-star {
    position: relative;
    z-index: 1;

    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      inline-size: 3.5rem;
      block-size: 3.5rem;
      background-image: url("assets/images/tidypro-tahti.png");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      /* Center the star at the corner */
      transform: translate(-50%, -50%);
      pointer-events: none;
      z-index: 2;
    }
  }

  /* Invert star to white on dark backgrounds */
  .has-contrast-background-color .tidypro-star::after,
  .has-primary-background-color .tidypro-star::after,
  .tidypro-footer__box.tidypro-star::after {
    filter: invert(1);
  }

  /* Footer star — larger */
  .tidypro-footer__box.tidypro-star::after {
    inline-size: 16rem;
    block-size: 16rem;
  }

  /* ------------------------------------------------------------------
     Hero (core/cover template part)
  ------------------------------------------------------------------ */

  .wp-block-cover.tidypro-hero {
    & .wp-block-cover__inner-container {
      padding-inline: var(--wp--preset--spacing--50);
    }

    & h1 {
      font-size: var(--wp--preset--font-size--4x-large);
      font-weight: 700;
      text-wrap: balance;
    }

    & p {
      font-size: var(--wp--preset--font-size--large);
      max-inline-size: 55ch;
    }
  }

  /* ------------------------------------------------------------------
     Infopalkki (24/7 service bar)
     Template part: parts/infopalkki.php
     Outer element gets .tidypro-infopalkki via PHP wrapper.
  ------------------------------------------------------------------ */

  .tidypro-infopalkki {
    container-type: inline-size;
    position: relative;
    z-index: 10;
    margin-block-start: calc(var(--wp--preset--spacing--50) * -1);

    & .wp-block-columns {
      display: flex;
      align-items: center;
      gap: var(--wp--preset--spacing--40);

      & .wp-block-column:last-child {
        flex-basis: auto;
        flex-grow: 0;
      }

      @container (max-width: 600px) {
        flex-direction: column;
        align-items: flex-start;

        & .wp-block-column:last-child {
          flex-basis: 100%;
          flex-grow: 1;
        }
      }
    }

    & .wp-block-group {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: var(--wp--preset--spacing--50);

      @container (max-width: 600px) {
        flex-direction: column;
        align-items: flex-start;
      }
    }

    & .tidypro-infopalkki__text {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--wp--preset--spacing--40);
    }

    & .tidypro-infopalkki__title {
      font-weight: 700;
      font-size: var(--wp--preset--font-size--large);
      color: var(--wp--preset--color--base);
      margin: 0;
    }

    & .tidypro-infopalkki__detail {
      color: var(--wp--preset--color--base);
      opacity: 0.85;
      margin: 0;
    }

    & .wp-block-button .wp-block-button__link {
      border: 1px solid var(--wp--preset--color--base);
      background: transparent;
      color: var(--wp--preset--color--base);
      border-radius: 50px;
      transition:
        background var(--wp--custom--transition--fast),
        color var(--wp--custom--transition--fast);

      &:hover,
      &:focus-visible {
        background: var(--wp--preset--color--base);
        color: var(--wp--preset--color--primary);
      }
    }
  }

  /* ------------------------------------------------------------------
     About intro section
     Two-column: text + star (left) / image (right)
  ------------------------------------------------------------------ */

  .tidypro-about {
    & .tidypro-star::after {
      inline-size: 5rem;
      block-size: 5rem;
    }

    & .wp-block-columns {
      align-items: center;
      background-image:
        /* top border (starts after 5rem for star cutout) */
        linear-gradient(
          to right,
          transparent 0%,
          transparent 5rem,
          var(--wp--preset--color--contrast) 5rem
        ),
        /* left border (starts after 5rem for star cutout) */
          linear-gradient(
            180deg,
            transparent 0%,
            transparent 5rem,
            var(--wp--preset--color--contrast) 5rem
          ),
        /* bottom border */
          linear-gradient(
            180deg,
            var(--wp--preset--color--contrast) 1px,
            transparent 1px
          ),
        /* right border */
          linear-gradient(
            var(--wp--preset--color--contrast),
            var(--wp--preset--color--contrast)
          );
      background-position:
        0 0,
        0 0,
        0 100%,
        100% 0;
      background-size:
        100% 1px,
        1px 100%,
        100% 1px,
        1px 100%;
      background-repeat: no-repeat;
    }

    & .wp-block-button .wp-block-button__link {
      background: transparent;
      color: var(--wp--preset--color--contrast);
      border: 1px solid var(--wp--preset--color--contrast);
      border-radius: 50px;
      transition:
        background var(--wp--custom--transition--fast),
        color var(--wp--custom--transition--fast);

      &:hover,
      &:focus-visible {
        background: var(--wp--preset--color--contrast);
        color: var(--wp--preset--color--base);
      }
    }

    & .wp-block-image img {
      border-radius: var(--wp--preset--border--radius--medium);
    }
  }

  /* ------------------------------------------------------------------
     Services grid
     1 × 3 card layout with thin borders between cards.
  ------------------------------------------------------------------ */

  .tidypro-palvelut {
    & .wp-block-columns {
      gap: 0;
    }

    & .wp-block-column {
      padding: var(--wp--preset--spacing--70);
      /* Mobile: bottom border between stacked columns */
      border-block-end: 1px solid var(--wp--preset--color--contrast);

      &:last-child {
        border-block-end: none;
      }
    }

    @media (min-width: 48rem) {
      & .wp-block-column {
        border-block-end: none;
        /* Desktop: right border between columns */
        border-inline-end: 1px solid var(--wp--preset--color--contrast);

        &:last-child {
          border-inline-end: none;
        }
      }
    }

    & h3 {
      font-size: var(--wp--preset--font-size--x-large);
      margin-block-start: var(--wp--preset--spacing--30);
    }

    & .wp-block-group > .wp-block-buttons {
      margin-block-start: var(--wp--preset--spacing--40);
    }

    & .wp-block-button .wp-block-button__link {
      background: transparent;
      color: var(--wp--preset--color--contrast);
      border: 1px solid var(--wp--preset--color--contrast);
      border-radius: 9999px;
      font-size: var(--wp--preset--font-size--small);
      transition:
        background var(--wp--custom--transition--fast),
        color var(--wp--custom--transition--fast);

      &:hover,
      &:focus-visible {
        background: var(--wp--preset--color--contrast);
        color: var(--wp--preset--color--base);
      }
    }
  }

  /* ------------------------------------------------------------------
     Services page sections
     Individual service sections with star icon and gradient borders.
  ------------------------------------------------------------------ */

  .tidypro-palvelut-osio {
    & .tidypro-star::after {
      inline-size: 5rem;
      block-size: 5rem;
    }

    /* Gradient borders with star cutout — columns variant (service sections) */
    & .wp-block-columns.tidypro-star {
      align-items: stretch;
      background-image:
        linear-gradient(
          to right,
          transparent 0%,
          transparent 5rem,
          var(--wp--preset--color--contrast) 5rem
        ),
        linear-gradient(
          180deg,
          transparent 0%,
          transparent 5rem,
          var(--wp--preset--color--contrast) 5rem
        ),
        linear-gradient(
          180deg,
          var(--wp--preset--color--contrast) 1px,
          transparent 1px
        ),
        linear-gradient(
          var(--wp--preset--color--contrast),
          var(--wp--preset--color--contrast)
        );
      background-position:
        0 0,
        0 0,
        0 100%,
        100% 0;
      background-size:
        100% 1px,
        1px 100%,
        100% 1px,
        1px 100%;
      background-repeat: no-repeat;
    }

    /* Gradient borders — group variant (sopimusasiakkaat) */
    & .wp-block-group.tidypro-star {
      background-image:
        linear-gradient(
          to right,
          transparent 0%,
          transparent 5rem,
          var(--wp--preset--color--contrast) 5rem
        ),
        linear-gradient(
          180deg,
          transparent 0%,
          transparent 5rem,
          var(--wp--preset--color--contrast) 5rem
        ),
        linear-gradient(
          180deg,
          var(--wp--preset--color--contrast) 1px,
          transparent 1px
        ),
        linear-gradient(
          var(--wp--preset--color--contrast),
          var(--wp--preset--color--contrast)
        );
      background-position:
        0 0,
        0 0,
        0 100%,
        100% 0;
      background-size:
        100% 1px,
        1px 100%,
        100% 1px,
        1px 100%;
      background-repeat: no-repeat;
    }

    /* Cover image column: flex container so cover can grow to full section height */
    & .wp-block-column:has(> .wp-block-cover) {
      display: flex;
      flex-direction: column;
    }

    & .tidypro-palvelut-kuva {
      flex: 1;
      min-block-size: 300px;
      border-radius: var(--wp--preset--border--radius--medium);
      overflow: hidden;
    }

    & .wp-block-button .wp-block-button__link {
      background: transparent;
      color: var(--wp--preset--color--contrast);
      border: 1px solid var(--wp--preset--color--contrast);
      border-radius: 50px;
      transition:
        background var(--wp--custom--transition--fast),
        color var(--wp--custom--transition--fast);

      &:hover,
      &:focus-visible {
        background: var(--wp--preset--color--contrast);
        color: var(--wp--preset--color--base);
      }
    }

    /* Dark background variant (sopimusasiakkaat) */
    &.has-contrast-background-color .tidypro-star {
      background-image:
        linear-gradient(
          to right,
          transparent 0%,
          transparent 5rem,
          var(--wp--preset--color--base) 5rem
        ),
        linear-gradient(
          180deg,
          transparent 0%,
          transparent 5rem,
          var(--wp--preset--color--base) 5rem
        ),
        linear-gradient(
          180deg,
          var(--wp--preset--color--base) 1px,
          transparent 1px
        ),
        linear-gradient(
          var(--wp--preset--color--base),
          var(--wp--preset--color--base)
        );
      background-position:
        0 0,
        0 0,
        0 100%,
        100% 0;
      background-size:
        100% 1px,
        1px 100%,
        100% 1px,
        1px 100%;
      background-repeat: no-repeat;
    }

    &.has-contrast-background-color .wp-block-button .wp-block-button__link {
      color: var(--wp--preset--color--base);
      border-color: var(--wp--preset--color--base);

      &:hover,
      &:focus-visible {
        background: var(--wp--preset--color--base);
        color: var(--wp--preset--color--contrast);
      }
    }

    /* Mobile: image always on top, no extra gap between image and text */
    @media (max-width: 47.99rem) {
      & .wp-block-columns.tidypro-star:not(.tidypro-palvelut-osio--reverse) {
        flex-direction: column-reverse;
      }

      & .wp-block-columns.tidypro-star {
        gap: 0 !important;
      }

      /* Remove top padding from text column on mobile — overrides inline style */
      & .wp-block-column:has(> .wp-block-cover) {
        padding-block-start: 0 !important;
      }
    }
  }

  /* ------------------------------------------------------------------
     CTA banner
  ------------------------------------------------------------------ */

  .tidypro-cta {
    text-align: center;

    & .wp-block-heading {
      font-size: var(--wp--preset--font-size--3x-large);
    }

    & p {
      max-inline-size: 60ch;
      margin-inline: auto;
    }

    & .wp-block-buttons {
      justify-content: center;
      margin-block-start: var(--wp--preset--spacing--50);
    }

    & .wp-block-button__link {
      border-radius: 50px;
    }
  }

  /* ------------------------------------------------------------------
     Footer — Tidypro
  ------------------------------------------------------------------ */

  .tidypro-footer {
    position: relative;
    overflow: hidden;
    color: var(--wp--preset--color--base);
    padding-block-start: var(--wp--preset--spacing--90);

    /* Background image — full bleed behind everything */
    & .tidypro-footer__bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;

      & img {
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
      }
    }

    /* Dark content box — constrained width, rounded corners */
    & .tidypro-footer__box {
      position: relative;
      z-index: 2;
      background: var(--wp--preset--color--contrast);
      max-inline-size: var(--wp--style--global--wide-size, 1200px);
      margin-inline: auto;
      border-radius: var(--wp--preset--border--radius--medium);
      padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
    }

    & .tidypro-footer__top {
      display: flex;
      flex-wrap: wrap;
      gap: var(--wp--preset--spacing--70);
      padding-block-end: var(--wp--preset--spacing--60);
    }

    & .tidypro-footer__brand {
      flex: 1;
      min-inline-size: 200px;

      & .tidypro-footer__company-info {
        margin-block-start: var(--wp--preset--spacing--30);
        color: var(--wp--preset--color--base);
        font-size: var(--wp--preset--font-size--small);
        line-height: 1.6;
      }
    }

    & .tidypro-footer__nav {
      flex: 1;
      min-inline-size: 160px;

      & p {
        font-size: var(--wp--preset--font-size--small);
        color: var(--wp--preset--color--base);
        opacity: 0.75;
        line-height: var(--wp--custom--line-height--relaxed);
      }
    }

    & .tidypro-footer__site-name {
      display: block;
      text-decoration: none;
    }

    & .tidypro-footer__logo {
      max-block-size: 2.5rem;
      inline-size: auto;
    }

    & .social-links {
      display: flex;
      gap: var(--wp--preset--spacing--30);
      list-style: none;
      padding: 0;
      margin: 0;

      & a {
        color: var(--wp--preset--color--base);
        opacity: 0.75;
        text-decoration: none;
        font-size: var(--wp--preset--font-size--small);
        transition: opacity var(--wp--custom--transition--fast);

        &:hover {
          opacity: 1;
        }
      }
    }

    & .tidypro-footer__bottom {
      padding-block-start: var(--wp--preset--spacing--50);
    }

    /* Large watermark logo — below the box, on top of bg image */
    & .tidypro-footer__watermark {
      position: relative;
      z-index: 1;
      display: flex;
      justify-content: center;
      padding-block-start: var(--wp--preset--spacing--70);
      padding-block-end: var(--wp--preset--spacing--50);
      pointer-events: none;
      user-select: none;
	  mix-blend-mode: overlay;

      & img {
        inline-size: clamp(20rem, 70vw, 60rem);
        block-size: auto;        
      }
    }
  }

  /* Footer legal bar */
  .tidypro-footer__legal {
    background: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--base);
  }

  .tidypro-footer__legal-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--wp--preset--spacing--40);
    max-width: 700px;
    margin-inline: auto;
    padding-block: var(--wp--preset--spacing--40);
    padding-inline: var(--wp--preset--spacing--50);
    font-size: var(--wp--preset--font-size--small);

    & span:last-child {
      text-align: end;
    }

    & a {
      color: var(--wp--preset--color--base);
      text-underline-offset: 3px;

      &:hover {
        opacity: 0.75;
      }
    }

    @media (max-width: 600px) {
      grid-template-columns: 1fr;

      & span:last-child {
        text-align: start;
      }
    }
  }

  /* All buttons — pill-shaped with 1px border */
  .wp-block-button__link {
    border-radius: 9999px;
    border: 1px solid currentColor;
  }

  /* Header CTA button */
  .site-header__cta .wp-block-button__link,
  .site-header__cta a {
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--base);
    padding-block: var(--wp--preset--spacing--20);
    padding-inline: var(--wp--preset--spacing--40);
    border-radius: var(--wp--preset--border--radius--full);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--wp--custom--transition--fast);
    white-space: nowrap;

    &:hover,
    &:focus-visible {
      background: var(--color-primary-hover);
    }
  }

  /* ------------------------------------------------------------------
     Contact Form 7
  ------------------------------------------------------------------ */

  .wpcf7 {
    & .wpcf7-form {
      display: flex;
      flex-direction: column;
      gap: var(--wp--preset--spacing--40);
    }

    & .wpcf7-form-control-wrap {
      display: block;
      width: 100%;
    }

    & input:not([type="submit"]),
    & textarea,
    & select {
      display: block;
      width: 100%;
      padding: 0.35em 0.75em;
      background: var(--wp--preset--color--base);
      color: var(--wp--preset--color--contrast);
      border: 1px solid var(--wp--preset--color--contrast);
      border-radius: 0;
      font-family: inherit;
      font-size: var(--wp--preset--font-size--medium);
      line-height: 1.5;
      transition:
        border-color var(--wp--custom--transition--fast),
        box-shadow var(--wp--custom--transition--fast);

      &:focus {
        outline: none;
      }

      &.wpcf7-not-valid {
        border-color: var(--color-error);
      }
    }

    & textarea {
      min-height: 4rem;
      resize: vertical;
    }

    & input[type="submit"] {
      display: inline-block;
      padding: 0.5em 1.5em;
      background: transparent;
      color: var(--wp--preset--color--contrast);
      border: 1px solid var(--wp--preset--color--contrast);
      border-radius: 50px;
      font-family: inherit;
      font-size: var(--wp--preset--font-size--medium);
      font-weight: 600;
      cursor: pointer;
      transition:
        background var(--wp--custom--transition--fast),
        color var(--wp--custom--transition--fast);

      &:hover,
      &:focus-visible {
        background: var(--wp--preset--color--contrast);
        color: var(--wp--preset--color--base);
        outline: none;
      }
    }

    & .wpcf7-not-valid-tip {
      display: block;
      margin-block-start: 0.25em;
      font-size: var(--wp--preset--font-size--small);
      color: var(--color-error);
    }

    & .wpcf7-response-output {
      padding: 0.75em 1em;
      border-radius: var(--wp--preset--border--radius--small);
      font-size: var(--wp--preset--font-size--small);
      border: 1px solid currentColor;
    }

    & .wpcf7-mail-sent-ok {
      color: var(--color-success);
    }

    & .wpcf7-mail-sent-ng,
    & .wpcf7-validation-errors,
    & .wpcf7-spam-blocked {
      color: var(--color-error);
    }
  }
}

/* ==========================================================================
   Overrides — unlayered, beats all @layer CSS incl. WordPress theme.json
   ========================================================================== */

/* CF7 form field overrides */
.wpcf7 textarea {
  height: 120px;
  min-height: 120px !important;
  resize: vertical !important;
  overflow: auto !important;
}

.wpcf7 .wpcf7-form-control-wrap:has(textarea) {
  overflow: visible !important;
}

.wpcf7 input:not([type="submit"]),
.wpcf7 textarea,
.wpcf7 select {
  font-size: 16px !important;
  padding: 0.2em 0.5em !important;
}

/* Footer legal bar links */
.tidypro-footer__legal-inner a {
  color: var(--wp--preset--color--base);
  text-decoration: none;

  &:hover {
    opacity: 0.75;
  }
}

/* Infopalkki: overlap hero by pulling up with negative margin */
.tidypro-infopalkki {
  margin-block-start: -2rem;
  position: relative;
  z-index: 10;
}

/* Infopalkki button column: right-aligned on desktop, left on mobile */
.tidypro-infopalkki .wp-block-column:last-child .wp-block-buttons {
  justify-content: flex-end;
}

@container (max-width: 600px) {
  .tidypro-infopalkki .wp-block-column:last-child .wp-block-buttons {
    justify-content: flex-start;
  }
}

/* Footer nav button */
.tidypro-footer__btn {
  display: inline-block;
  margin-block-start: 1rem;
  padding: 0.5em 1.5em;
  background: transparent;
  color: var(--wp--preset--color--base);
  border: 2px solid var(--wp--preset--color--base);
  border-radius: 50px;
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--wp--custom--transition--fast),
              color var(--wp--custom--transition--fast);
}

.tidypro-footer__btn:hover,
.tidypro-footer__btn:focus-visible {
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
}

/* Infopalkki button: always visible with white outline on dark background */
.tidypro-infopalkki .wp-block-button .wp-block-button__link {
  background: transparent;
  color: var(--wp--preset--color--base);
  border: 2px solid var(--wp--preset--color--base);
  border-radius: 50px;
}

.tidypro-infopalkki .wp-block-button .wp-block-button__link:hover,
.tidypro-infopalkki .wp-block-button .wp-block-button__link:focus-visible {
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
}