/*
Theme Name: Margaret Accounting
Theme URI:
Author: Raikee Oy
Author URI:
Description:
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
   ========================================================================== */

@layer reset, wpglobal, base, tokens, blocks, patterns, 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;
    }
  }
	
  .wp-block-list {
    margin-block-end: var(--wp--preset--spacing--40, 1rem);

    li {
      margin-block-end: var(--wp--preset--spacing--20, .25rem);
    }
  }

  .wp-site-blocks main {
	p {
	  margin-block-end: var(--wp--preset--spacing--30, .5rem);
	}
	p:not(:has(+ p, + ul)) {
      margin-block-end: var(--wp--preset--spacing--40, 1rem);
	}
  }
}

/* ==========================================================================
   Tokens — Derived colors & semantic aliases via color-mix(in oklch)
   All values here are computed from theme.json palette entries,
   so swapping hex values in theme.json automatically propagates.
   ========================================================================== */

@layer tokens {
  :root {
    /* ----- Primary: hover / active / subtle tint ----- */
    --color-primary-hover: color-mix(
      in oklch,
      var(--wp--preset--color--primary) 80%,
      white
    );
    --color-primary-active: color-mix(
      in oklch,
      var(--wp--preset--color--primary) 85%,
      black
    );
    --color-primary-subtle: color-mix(
      in oklch,
      var(--wp--preset--color--primary) 12%,
      var(--wp--preset--color--base)
    );

    /* ----- Accent: hover / active / subtle tint ----- */
    --color-accent-hover: color-mix(
      in oklch,
      var(--wp--preset--color--accent) 80%,
      white
    );
    --color-accent-active: color-mix(
      in oklch,
      var(--wp--preset--color--accent) 85%,
      black
    );
    --color-accent-subtle: color-mix(
      in oklch,
      var(--wp--preset--color--accent) 12%,
      var(--wp--preset--color--base)
    );

    /* ----- Secondary: hover ----- */
    --color-secondary-hover: color-mix(
      in oklch,
      var(--wp--preset--color--secondary) 80%,
      white
    );

    /* ----- Primary: transparency scale ----- */
    --color-primary-alpha-10: color-mix(
      in oklch,
      var(--wp--preset--color--primary) 10%,
      transparent
    );
    --color-primary-alpha-20: color-mix(
      in oklch,
      var(--wp--preset--color--primary) 20%,
      transparent
    );
    --color-primary-alpha-50: color-mix(
      in oklch,
      var(--wp--preset--color--primary) 50%,
      transparent
    );

    /* ----- Accent: transparency scale ----- */
    --color-accent-alpha-10: color-mix(
      in oklch,
      var(--wp--preset--color--accent) 10%,
      transparent
    );
    --color-accent-alpha-20: color-mix(
      in oklch,
      var(--wp--preset--color--accent) 20%,
      transparent
    );
    --color-accent-alpha-50: color-mix(
      in oklch,
      var(--wp--preset--color--accent) 50%,
      transparent
    );

    /* ----- Contrast: transparency scale (overlays, borders, scrims) ----- */
    --color-contrast-alpha-5: color-mix(
      in oklch,
      var(--wp--preset--color--contrast) 5%,
      transparent
    );
    --color-contrast-alpha-10: color-mix(
      in oklch,
      var(--wp--preset--color--contrast) 10%,
      transparent
    );
    --color-contrast-alpha-20: color-mix(
      in oklch,
      var(--wp--preset--color--contrast) 20%,
      transparent
    );
    --color-contrast-alpha-50: color-mix(
      in oklch,
      var(--wp--preset--color--contrast) 50%,
      transparent
    );
    --color-contrast-alpha-80: color-mix(
      in oklch,
      var(--wp--preset--color--contrast) 80%,
      transparent
    );

    /* ----- Base: transparency scale (light overlays on dark bgs) ----- */
    --color-base-alpha-10: color-mix(
      in oklch,
      var(--wp--preset--color--base) 10%,
      transparent
    );
    --color-base-alpha-20: color-mix(
      in oklch,
      var(--wp--preset--color--base) 20%,
      transparent
    );
    --color-base-alpha-50: color-mix(
      in oklch,
      var(--wp--preset--color--base) 50%,
      transparent
    );

    /* ----- Semantic: surfaces ----- */
    --color-surface: var(--wp--preset--color--base);
    --color-surface-raised: var(--wp--preset--color--subtle);
    --color-surface-overlay: color-mix(
      in oklch,
      var(--wp--preset--color--contrast) 3%,
      var(--wp--preset--color--base)
    );
    --color-surface-sunken: color-mix(
      in oklch,
      var(--wp--preset--color--contrast) 6%,
      var(--wp--preset--color--base)
    );
    --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-success-subtle: #f0fdf4;
    --color-warning: #ca8a04;
    --color-warning-subtle: #fefce8;
    --color-error: #dc2626;
    --color-error-subtle: #fef2f2;
    --color-info: #2563eb;
    --color-info-subtle: #eff6ff;
  }

  /* OKLCH enhancement for status colors */
  @supports (color: oklch(0% 0 0)) {
    :root {
      --color-success: oklch(55% 0.18 150);
      --color-success-subtle: oklch(97% 0.02 150);
      --color-warning: oklch(70% 0.16 85);
      --color-warning-subtle: oklch(97% 0.02 85);
      --color-error: oklch(55% 0.22 28);
      --color-error-subtle: oklch(97% 0.02 28);
      --color-info: oklch(55% 0.2 260);
      --color-info-subtle: oklch(97% 0.02 260);
    }
  }
}

/* ==========================================================================
   Blocks — Site Header
   ========================================================================== */

@layer blocks {
	
  .wp-block-template-part:has(.site-header) {
    position: fixed;
	width: 100%;
    inset-block-start: var(--wp--preset--spacing--30, .5rem);
    z-index: var(--wp--custom--z-index--sticky, 200);
  }
	
  .site-header {
    background: /*var(--color-surface, var(--wp--preset--color--base, #fff))*/ transparent;

    /* ----- Inner wrapper ----- */

    .site-header__inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--wp--preset--spacing--40, 1rem);
      max-inline-size: var(--wp--style--global--wide-size, 1200px);
      margin-inline: auto;
      padding-block: var(--wp--preset--spacing--30, 0.75rem);
      padding-inline: var(--wp--preset--spacing--40, 1rem);
      backdrop-filter: blur(7px);
      background-color: rgb(20 20 20 / 33%);
      padding: 10px 30px;
      border-radius: 100vw;
    }

    /* ----- Branding (logo / site title) ----- */

    .site-header__branding {
      flex-shrink: 0;

      & a {
        display: inline-flex;
        align-items: center;
        text-decoration: none;
      }

      & .custom-logo-link {
        display: inline-flex;
        align-items: center;
      }

      & .custom-logo {
        max-block-size: 3rem;
        inline-size: auto;
        filter: brightness(0) invert(1);
      }

      & .site-title {
        margin: 0;
        font-size: var(--wp--preset--font-size--medium, 1.125rem);
        font-family: var(
          --wp--preset--font-family--heading,
          system-ui,
          sans-serif
        );
        font-weight: 700;
        line-height: var(--wp--custom--line-height--tight, 1.25);
        text-decoration: none;
        color: var(--wp--preset--color--contrast, #0f172a);
      }
    }
  }

  /* ----- Site nav wrapper ----- */

  .site-nav {
    position: relative;
    display: flex;
    align-items: center;
  }

  /* ----- Mobile menu toggle (hamburger button) ----- */

  .menu-toggle {
    padding: var(--wp--preset--spacing--30, 0.75rem);
    background: transparent;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;

    &:focus-visible {
      outline: var(--focus-ring, 2px solid #1e40af);
      outline-offset: var(--focus-ring-offset, 2px);
      border-radius: var(--wp--preset--border--radius--small, 0.25rem);
    }

    @media (min-width: 48rem) {
      display: none;
    }
  }

  /* ----- Hamburger icon (3 lines → X) ----- */

  .hamburger {
    display: block;
    background: var(--wp--preset--color--base, #ffffff);
    block-size: 3px;
    inline-size: 1.75em;
    border-radius: 3px;
    position: relative;
    transition: transform var(--wp--custom--transition--normal, 300ms ease);

    &::before,
    &::after {
      content: "";
      display: block;
      background: inherit;
      block-size: 3px;
      inline-size: 1.75em;
      border-radius: 3px;
      position: absolute;
      inset-inline-start: 0;
      transition: all var(--wp--custom--transition--normal, 300ms ease);
    }

    &::before {
      transform: translateY(-7px);
    }

    &::after {
      transform: translateY(7px);
    }

    @media (prefers-reduced-motion: reduce) {
      transition: none;

      &::before,
      &::after {
        transition: none;
      }
    }
  }

  /* Hamburger → X when open */
  [aria-expanded="true"] .hamburger {
    transform: rotate(45deg);

    &::before {
      opacity: 0;
    }

    &::after {
      transform: translateY(0) rotate(-90deg);
    }
  }

  /* ----- Primary navigation (mobile dropdown + desktop inline) ----- */

  .primary-navigation {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-end: 0;
    background: var(--wp--preset--color--contrast, #0f172a);
    margin: 0;
    padding: 0;
    list-style: none;
    min-inline-size: 16rem;
    z-index: var(--wp--custom--z-index--dropdown, 300);

    /* ----- State-driven visibility ----- */

    &[data-state="closed"] {
      display: none;
    }

    &[data-state="opened"] {
      display: block;
      animation: clipPathCircleOpen 750ms ease-in-out forwards;
    }

    &[data-state="closing"] {
      animation: clipPathCircleClose 750ms ease-in-out forwards;
    }

    @media (prefers-reduced-motion: reduce) {
      &[data-state="opened"],
      &[data-state="closing"] {
        animation: none;
      }
    }

    /* ----- Menu items (mobile) ----- */

    & li {
      border-block-end: 1px solid
        var(--color-base-alpha-10, rgb(255 255 255 / 0.1));

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

    & a {
      color: var(--wp--preset--color--base, #fff);
      display: block;
      padding-block: 1.25em;
      padding-inline: 1.5em 3em;
      text-transform: uppercase;
      text-decoration: none;
      font-size: var(--wp--preset--font-size--small, 0.875rem);
      letter-spacing: var(--wp--custom--letter-spacing--wide, 0.05em);
      transition:
        background var(--wp--custom--transition--fast, 150ms ease),
        color var(--wp--custom--transition--fast, 150ms ease);

      @media (prefers-reduced-motion: reduce) {
        transition: none;
      }

      &:hover,
      &:focus {
        background: var(--wp--preset--color--accent, #ea580c);
        color: var(--wp--preset--color--base, #fff);
      }

      &:focus-visible {
        outline: var(--focus-ring, 2px solid #1e40af);
        outline-offset: calc(-1 * var(--focus-ring-offset, 2px));
      }
    }

    & .current-menu-item a {
      font-weight: 700;
      background: var(--color-base-alpha-10, rgb(255 255 255 / 0.1));
    }

    /* ----- Desktop: inline horizontal nav ----- */

    @media (min-width: 48rem) {
      position: static;
      display: flex !important;
      background: transparent;
      gap: var(--wp--preset--spacing--20, 0.5rem);
      min-inline-size: auto;
      clip-path: none !important;
      animation: none !important;

      & li {
        border-block-end: none;
      }

      & a {
        color: /*var(--wp--preset--color--contrast, #0f172a)*/ white !important;
        padding-block: 0.375em;
        padding-inline: 0.75em;
        text-transform: none;
        font-size: var(--wp--preset--font-size--medium, 1rem);
        letter-spacing: normal;
        border-radius: var(--wp--preset--border--radius--small, 0.25rem);

        &:hover,
        &:focus {
          color: var(--wp--preset--color--primary, #1e40af);
          background: var(--color-primary-alpha-10, rgb(30 64 175 / 0.1));
        }
      }

      & .current-menu-item a {
        color: var(--wp--preset--color--primary, #1e40af);
        background: transparent;
        font-weight: 700;
      }
    }
  }

  /* ----- Dropdown submenus ----- */

  .primary-navigation {
    /* Parent item indicator on desktop */
    & .menu-item-has-children > a::after {
      content: "▾";
      display: inline-block;
      margin-inline-start: 0.3em;
      font-size: 0.75em;
      vertical-align: middle;
      opacity: 0.7;
    }

    /* Mobile: sub-menu always visible, indented below parent */
    & .sub-menu {
      list-style: none;
      padding: 0;
      margin: 0;
      background: color-mix(
        in oklch,
        var(--wp--preset--color--contrast, #0d0d1f) 92%,
        black
      );
	  backdrop-filter: blur(7px);
      background-color: rgb(20 20 20 / 33%) !important;
      border-block-start: 1px solid
        var(--color-base-alpha-10, rgb(255 255 255 / 0.1));

      & li {
        border-block-end: 1px solid
          var(--color-base-alpha-10, rgb(255 255 255 / 0.1));

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

      & a {
        padding-inline-start: calc(
          1.5em + var(--wp--preset--spacing--50, 1.5rem)
        );
        font-size: var(--wp--preset--font-size--small, 0.875rem);
        color: color-mix(
          in oklch,
          var(--wp--preset--color--base, #fff) 65%,
          transparent
        );
      }
    }

    /* Desktop: absolute positioned dropdown */
    @media (min-width: 48rem) {
      & .menu-item-has-children {
        position: relative;

        &:hover > .sub-menu,
        &:focus-within > .sub-menu {
          opacity: 1;
          visibility: visible;
          transform: translateY(0);
        }
      }

      & .menu-item-has-children > a::after {
        font-size: 0.8em;
        opacity: 0.5;
      }

      & .sub-menu {
        position: absolute;
        inset-block-start: calc(100% + 0.375rem);
        inset-inline-start: 0;
        background: var(--wp--preset--color--base, #fff);
        border: 1px solid var(--color-border, rgb(0 0 0 / 0.1));
        border-radius: var(--wp--preset--border--radius--medium, 0.5rem);
        box-shadow: var(
          --wp--preset--shadow--md,
          0 4px 6px -1px rgb(0 0 0 / 0.1)
        );
        min-inline-size: 15rem;
        padding-block: var(--wp--preset--spacing--20, 0.25rem);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition:
          opacity var(--wp--custom--transition--fast, 150ms ease),
          visibility var(--wp--custom--transition--fast, 150ms ease),
          transform var(--wp--custom--transition--fast, 150ms ease);

        @media (prefers-reduced-motion: reduce) {
          transition: none;
        }

        & li {
          border-block-end: none;
        }

        & a {
          color: var(--wp--preset--color--contrast, #0d0d1f);
          padding-block: 0.625em;
          padding-inline: 1em 1.5em;
          text-transform: none;
          letter-spacing: normal;
          font-size: var(--wp--preset--font-size--small, 0.875rem);

          &:hover,
          &:focus {
            background: var(--wp--preset--color--subtle, #f5f5ff);
            color: var(--wp--preset--color--primary, #2000c4);
          }

          &:focus-visible {
            outline-offset: calc(-1 * var(--focus-ring-offset, 2px));
          }
        }

        & .current-menu-item > a {
          color: var(--wp--preset--color--primary, #2000c4);
          font-weight: 700;
        }
      }
    }
  }

  /* ----- Clip-path reveal animations ----- */

  @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);
    }
  }
	
  .wp-block-cover__inner-container {
    width: auto !important;
  }
	
  .homehero .wp-block-cover__inner-container {
    width: 100% !important;
  }
	
	#main-content {
		margin-block-start: 0 !important;
	}
	
  .wp-block-column.is-vertically-aligned-top {
    align-self: flex-start !important;
  }
	
	.bg-size-esittely .wp-block-cover__image-background {
		object-fit: contain !important;
	}
	
	.whitefilter img {
        filter: brightness(0) invert(1);
	}
	
	.wp-block-columns.alignwide {
		@media (width < 782px) {
			flex-wrap: wrap-reverse !important;
		}
	}
	
	:root :where(.is-layout-flow, .is-layout-constrained, .wp-site-blocks) > * {
      margin-block-start: 0;
    }
	
}

/* ==========================================================================
   Patterns — Section-level styles for homepage and page patterns
   ========================================================================== */

@layer patterns {
  /* ----- Service cards (home-services pattern) ----- */

  .wp-block-column.service-card {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, rgb(0 0 0 / 0.1));
    border-radius: var(--wp--preset--border--radius--medium, 0.5rem);
    box-shadow: var(--wp--preset--shadow--sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
    overflow: hidden;
    display: flex;
    flex-direction: column;

    & > .wp-block-image {
      margin: 0;
      flex-shrink: 0;

      & img {
        display: block;
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        border-radius: 0;
      }
    }

    & > .wp-block-group {
      display: flex;
      flex-direction: column;
      flex: 1;

      & .wp-block-buttons {
        margin-block-start: auto;
        padding-block-start: var(--wp--preset--spacing--30, 0.5rem);
      }
    }
  }

  /* ----- Contact form (home-contact-cta pattern) ----- */

  /* CF7 wrapper reset */
  .wpcf7 {
    margin: 0;

    & form {
      display: flex;
      flex-direction: column;
      gap: var(--wp--preset--spacing--40, 1rem);
      margin: 0;
    }
  }

  /* Two-column name + email row */
  .wpcf7-form .contact-row-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wp--preset--spacing--40, 1rem);

    @media (max-width: 32rem) {
      grid-template-columns: 1fr;
    }
  }

  /* Field labels */
  .wpcf7-form label,
  .wpcf7-form .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
  }

  .wpcf7-form label {
    font-size: var(--wp--preset--font-size--small, 0.875rem);
    font-weight: 600;
    color: var(--wp--preset--color--contrast, #0d0d1f);
    margin-block-end: 0.375rem;
  }

  /* All text inputs, email, tel, textarea */
  .wpcf7-form :is(.wpcf7-text, .wpcf7-email, .wpcf7-tel, .wpcf7-textarea) {
    width: 100%;
    padding-block: 0.625rem;
    padding-inline: 0.875rem;
    border: 1px solid var(--color-border-strong, rgb(0 0 0 / 0.2));
    border-radius: var(--wp--preset--border--radius--small, 0.25rem);
    background: var(--wp--preset--color--base, #fff);
    color: var(--wp--preset--color--contrast, #0d0d1f);
    font-size: var(--wp--preset--font-size--medium, 1rem);
    line-height: var(--wp--custom--line-height--normal, 1.5);
    transition:
      border-color var(--wp--custom--transition--fast, 150ms ease),
      box-shadow var(--wp--custom--transition--fast, 150ms ease);

    &::placeholder {
      color: var(--wp--preset--color--muted, #6b6ba0);
      opacity: 0.7;
    }

    &:focus {
      outline: none;
      border-color: var(--wp--preset--color--primary, #2000c4);
      box-shadow: 0 0 0 3px var(--color-primary-alpha-20, rgb(32 0 196 / 0.2));
    }

    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }

  .wpcf7-form .wpcf7-textarea {
    resize: vertical;
    min-block-size: 8rem;
  }

  /* Submit button */
  .wpcf7-form .wpcf7-submit {
    width: 100%;
    padding-block: 0.875rem;
    padding-inline: var(--wp--preset--spacing--50, 1.5rem);
    background: var(--wp--preset--color--primary, #2000c4);
    color: var(--wp--preset--color--base, #fff);
    border: 0;
    border-radius: var(--wp--preset--border--radius--medium, 0.5rem);
    font-size: var(--wp--preset--font-size--medium, 1rem);
    font-weight: 700;
    letter-spacing: var(--wp--custom--letter-spacing--wide, 0.05em);
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--wp--custom--transition--fast, 150ms ease);

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

    &:focus-visible {
      outline: var(--focus-ring, 2px solid #2000c4);
      outline-offset: var(--focus-ring-offset, 2px);
    }

    &:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }

  /* CF7 response output */
  .wpcf7-response-output {
    margin-block-start: var(--wp--preset--spacing--30, 0.5rem);
    padding: var(--wp--preset--spacing--30, 0.5rem)
      var(--wp--preset--spacing--40, 1rem);
    border-radius: var(--wp--preset--border--radius--small, 0.25rem);
    font-size: var(--wp--preset--font-size--small, 0.875rem);
  }

  .wpcf7-mail-sent-ok {
    background: var(--color-success-subtle, #f0fdf4);
    border: 1px solid var(--color-success, #16a34a);
    color: var(--color-success, #16a34a);
  }

  .wpcf7-mail-sent-ng,
  .wpcf7-aborted {
    background: var(--color-error-subtle, #fef2f2);
    border: 1px solid var(--color-error, #dc2626);
    color: var(--color-error, #dc2626);
  }

  .wpcf7-spam-blocked {
    background: var(--color-warning-subtle, #fefce8);
    border: 1px solid var(--color-warning, #ca8a04);
    color: var(--color-warning, #ca8a04);
  }
}

/* ==========================================================================
   Components — Reusable UI pieces built on tokens
   ========================================================================== */

@layer components {
  /* Card surface — use on Group blocks or pattern wrappers */
  .is-style-card {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, rgb(0 0 0 / 0.1));
    border-radius: var(--wp--preset--border--radius--medium, 0.5rem);
    box-shadow: var(--wp--preset--shadow--sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
    padding: var(--wp--preset--spacing--50, 1.5rem);
  }
	
  .wp-block-button {
    & .wp-block-button__link {
      background: var(--wp--preset--color--primary, #1e40af);
      color: var(--wp--preset--color--base, #fff);
      transition:
        background var(--wp--custom--transition--fast, 150ms ease),
        color var(--wp--custom--transition--fast, 150ms ease);

      @media (prefers-reduced-motion: reduce) {
        transition: none;
      }

      &:hover {
        background: var(--wp--preset--color--secondary, #1e40af);
        color: var(--wp--preset--color--base, #fff);
      }

      &:focus-visible {
        outline: var(--focus-ring, 2px solid #1e40af);
        outline-offset: var(--focus-ring-offset, 2px);
      }
    }
  }

  /* Accent CTA button variant */
  .wp-block-button.is-style-accent {
    & .wp-block-button__link {
      background: var(--wp--preset--color--accent, #ea580c);
      color: var(--wp--preset--color--base, #fff);
      transition: background var(--wp--custom--transition--fast, 150ms ease);

      @media (prefers-reduced-motion: reduce) {
        transition: none;
      }

      &:hover {
        background: var(--color-accent-hover);
      }

      &:active {
        background: var(--color-accent-active);
      }

      &:focus-visible {
        outline: var(--focus-ring, 2px solid #1e40af);
        outline-offset: var(--focus-ring-offset, 2px);
      }
    }
  }

  /* Outline button variant */
  .wp-block-button.is-style-outline {
    & .wp-block-button__link {
      background: transparent;
      color: var(--wp--preset--color--primary, #1e40af);
      border: 2px solid currentColor;
      transition:
        background var(--wp--custom--transition--fast, 150ms ease),
        color var(--wp--custom--transition--fast, 150ms ease);

      @media (prefers-reduced-motion: reduce) {
        transition: none;
      }

      &:hover {
        background: var(--wp--preset--color--primary, #1e40af);
        color: var(--wp--preset--color--base, #fff);
      }

      &:focus-visible {
        outline: var(--focus-ring, 2px solid #1e40af);
        outline-offset: var(--focus-ring-offset, 2px);
      }
    }
  }

  /* Status message blocks */
  .is-style-status-success {
    background: var(--color-success-subtle, #f0fdf4);
    border-inline-start: 4px solid var(--color-success, #16a34a);
    padding: var(--wp--preset--spacing--40, 1rem);
    border-radius: var(--wp--preset--border--radius--small, 0.25rem);
  }

  .is-style-status-warning {
    background: var(--color-warning-subtle, #fefce8);
    border-inline-start: 4px solid var(--color-warning, #ca8a04);
    padding: var(--wp--preset--spacing--40, 1rem);
    border-radius: var(--wp--preset--border--radius--small, 0.25rem);
  }

  .is-style-status-error {
    background: var(--color-error-subtle, #fef2f2);
    border-inline-start: 4px solid var(--color-error, #dc2626);
    padding: var(--wp--preset--spacing--40, 1rem);
    border-radius: var(--wp--preset--border--radius--small, 0.25rem);
  }

  .is-style-status-info {
    background: var(--color-info-subtle, #eff6ff);
    border-inline-start: 4px solid var(--color-info, #2563eb);
    padding: var(--wp--preset--spacing--40, 1rem);
    border-radius: var(--wp--preset--border--radius--small, 0.25rem);
  }
}

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