/* ==========================================================================
   HomeWiP Global Brand Tokens — v2.0
   --------------------------------------------------------------------------
   Design direction: Hundertwasser-inspired warmth meets architectural clarity.
   Organic shapes, layered textures, jewel-tone brand palette, nature-meets-
   structure. Professional and fast-loading — the influence is in the FEELING
   (warm, human, alive) not literal psychedelia.

   Font stack: Poppins 600 for display · DM Sans 400/500 for body + UI.
   DM Sans replaces Roboto — warmer terminals, better optical sizing at
   paragraph lengths, pairs naturally with Poppins as a geometric complement.

   ADDITIVE stylesheet — safe to load site-wide. Existing Goodlayers pages
   are unaffected because nothing here overrides their explicit selectors.
   ========================================================================== */

/* --------------------------------------------------------------------------
@font-face: Poppins & DM Sans (self-hosted woff2)
-------------------------------------------------------------------------- */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('https://homewip.com/wp-content/uploads/2026/04/poppins-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://homewip.com/wp-content/uploads/2026/04/poppins-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://homewip.com/wp-content/uploads/2026/04/dmsans-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('https://homewip.com/wp-content/uploads/2026/04/dmsans-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://homewip.com/wp-content/uploads/2026/04/dmsans-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric-override fallback so the page doesn't reflow when DM Sans arrives. */
@font-face {
  font-family: 'DMSans-fallback';
  src: local('Arial');
  ascent-override: 94.4%;
  descent-override: 24.5%;
  line-gap-override: 0%;
  size-adjust: 103.2%;
}

:root {
  /* === Brand Palette ===
     Hundertwasser's palette: deep jewel tones layered over warm earth.
     These map directly to the HomeWiP brand book. */
  --hw-teal:        #009DA6;   /* Dominant — the architectural teal */
  --hw-teal-dark:   #007078;   /* Deep water, hover states */
  --hw-teal-deeper: #004E54;   /* Maximum depth, text-on-light */
  --hw-yellow:      #F9CB21;   /* Gold leaf accent — warmth, optimism */
  --hw-orange:      #F96F3E;   /* Terracotta — earth, energy */
  --hw-turquoise:   #7EC8BA;   /* Living green — nature, growth */
  --hw-red:         #FB4556;   /* Alert, rooftops */
  --hw-violet:      #5E57C0;   /* Depth, distinction */

  /* === Neutral Scale ===
     Warm-shifted from pure gray toward teal undertone.
     Hundertwasser never used cold neutrals. */
  --hw-ink:         #0E2A2C;   /* Body text — passes WCAG AAA on white */
  --hw-ink-soft:    #1A3D40;   /* Secondary text — AAA on white */
  --hw-muted:       #4A6466;   /* Tertiary — AA on white, AA on soft bg */
  --hw-line:        #D1E3E1;   /* Borders, dividers */
  --hw-bg-warm:     #F7F4F0;   /* Warm paper — Hundertwasser's canvas tone */
  --hw-bg-soft:     #F0F7F6;   /* Cool mint wash */
  --hw-bg-cream:    #FFFCF7;   /* Warm white for alternating sections */
  --hw-white:       #FFFFFF;

  /* === Typography ===
     Poppins: display/headlines (geometric, friendly, established brand font).
     DM Sans: body/UI (warm geometric, better paragraph readability than Roboto). */
  --hw-font-display: 'Poppins', 'Poppins-fallback', system-ui, sans-serif;
  --hw-font-body:    'DM Sans', 'DMSans-fallback', system-ui, sans-serif;
  --hw-font-ui:      'DM Sans', 'DMSans-fallback', system-ui, sans-serif;

  /* === Type Scale (fluid, mobile-first) ===
     clamp(min, preferred, max) so text breathes across viewports. */
  --hw-text-xs:    clamp(0.75rem,  0.7rem  + 0.25vw, 0.8125rem);   /* 12-13px */
  --hw-text-sm:    clamp(0.8125rem, 0.78rem + 0.3vw,  0.875rem);    /* 13-14px */
  --hw-text-base:  clamp(0.9375rem, 0.88rem + 0.35vw, 1.0625rem);   /* 15-17px */
  --hw-text-lg:    clamp(1.0625rem, 1rem    + 0.4vw,  1.1875rem);   /* 17-19px */
  --hw-text-xl:    clamp(1.25rem,   1.1rem  + 0.7vw,  1.5rem);      /* 20-24px */
  --hw-text-2xl:   clamp(1.5rem,    1.25rem + 1.1vw,  2rem);        /* 24-32px */
  --hw-text-3xl:   clamp(1.875rem,  1.5rem  + 1.6vw,  2.75rem);     /* 30-44px */
  --hw-text-4xl:   clamp(2.25rem,   1.75rem + 2.2vw,  3.5rem);      /* 36-56px */

  /* === Spacing (8pt grid, organic-friendly) === */
  --hw-s-1: 4px;    --hw-s-2: 8px;    --hw-s-3: 12px;
  --hw-s-4: 16px;   --hw-s-5: 24px;   --hw-s-6: 32px;
  --hw-s-7: 48px;   --hw-s-8: 64px;   --hw-s-9: 96px;
  --hw-s-10: 128px;

  /* === Organic Radii ===
     Hundertwasser's irregular windows: generous, slightly uneven feeling.
     The larger radii on cards/sections give that organic quality. */
  --hw-radius-sm:  8px;
  --hw-radius:     14px;
  --hw-radius-lg:  22px;
  --hw-radius-xl:  32px;
  --hw-radius-pill: 999px;

  /* === Shadows ===
     Warm-tinted, layered. Not the generic 0 2px 4px rgba(0,0,0,.1). */
  --hw-shadow-sm:   0 2px 8px rgba(14, 42, 44, .05), 0 1px 2px rgba(14, 42, 44, .04);
  --hw-shadow:      0 8px 24px rgba(14, 42, 44, .07), 0 2px 6px rgba(14, 42, 44, .04);
  --hw-shadow-lg:   0 16px 48px rgba(14, 42, 44, .09), 0 4px 12px rgba(14, 42, 44, .05);
  --hw-shadow-glow: 0 0 0 3px rgba(0, 157, 166, .15);  /* Focus/hover glow */

  /* === Transitions === */
  --hw-ease:     cubic-bezier(.4, 0, .2, 1);
  --hw-duration: 220ms;

  /* === Grain Texture ===
     Subtle noise overlay for Hundertwasser's tactile quality.
     Applied via ::after on section backgrounds. */
  --hw-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
}


/* --------------------------------------------------------------------------
   Site-wide base styles — non-destructive adds
   -------------------------------------------------------------------------- */

html {
  overflow-x: hidden;   /* Stray GDLR absolute elements */
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
}

/* Visible focus ring — keyboard-only via :focus-visible.
   Teal glow matches the brand, offset prevents overlap. */
:focus-visible {
  outline: 2.5px solid var(--hw-teal);
  outline-offset: 3px;
  border-radius: var(--hw-radius-sm);
}

/* Skip-to-content link (added in header.php or front-page.php) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: var(--hw-s-3);
  z-index: 9999;
  background: var(--hw-teal);
  color: var(--hw-white);
  padding: var(--hw-s-3) var(--hw-s-5);
  font: 500 var(--hw-text-sm) / 1.4 var(--hw-font-ui);
  border-radius: var(--hw-radius-sm);
  text-decoration: none;
}
.skip-link:focus {
  left: var(--hw-s-4);
}


}

@font-face {
    font-family: 'Roboto';
    src: local('Roboto Bold'), local('Roboto-Bold');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* === HWIP_UNIVERSAL_FONT_OVERRIDE === */
/* Override all Roboto declarations globally to prevent Google Fonts requests */
* {
    font-family: inherit;
}

/* Force specific elements away from Roboto */
body,
html,
.inteco-navigation,
.inteco-navigation-font,
.hwip-home,
.lg-container,
body * {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
}