/*
Theme Name:  Wolliq
Theme URI:   https://wolliq.com
Author:      Wolliq
Author URI:  https://wolliq.com
Description: Custom WordPress theme for Wolliq — Tech-Enabled Business Process Outsourcing. Premium SaaS aesthetic. No parent theme. No page builder. Gutenberg-first.
Version:     1.6.1
Requires at least: 6.5
Tested up to:      6.6
Requires PHP:      8.1
License:     Proprietary
License URI: https://wolliq.com/terms-of-service/
Text Domain: wolliq

Specification Source: Wolliq Project Specification v1.0, June 2025
Section 3.3  — Color System (all 14 tokens + 7 tints)
Section 3.4  — Typography System (Space Grotesk + Inter, 9-level scale)
Section 3.5  — Spacing System (9 tokens) + Border Radius (7 tokens)
Section 5.3  — Layout System (containers, grid, gutters)
Section 5.4  — Dark/Light Section Rules (binding)
Section 11.2 — Accessibility (WCAG 2.1 AA)
Section 12.1 — CSS Rules (BEM, mobile-first, no hardcoded hex, no !important)
*/

/* ============================================================================
   1. DESIGN TOKENS
   Every color, spacing, radius, z-index, and transition value used anywhere
   in this theme must reference a token defined here. Hardcoding hex values in
   component CSS is a spec violation (Section 12.1).
   ============================================================================ */

:root {

  /* --------------------------------------------------------------------------
     Colors — Core Palette (Section 3.3)
     14 tokens. No additional brand colors without updating the specification.
     -------------------------------------------------------------------------- */

  --color-primary:       #0F172A; /* Navigation, headlines, dark backgrounds, primary text        */
  --color-secondary:     #2563EB; /* Buttons, links, focus states, active indicators, borders     */
  --color-accent:        #06B6D4; /* Highlights, tags, hover accents, eyebrow elements            */
  --color-bg:            #F8FAFC; /* Page background, section alternates, input backgrounds       */
  --color-text:          #1E293B; /* All body text, paragraph content                            */
  --color-text-muted:    #64748B; /* Secondary text, descriptions, metadata                      */
  --color-text-subtle:   #94A3B8; /* Placeholder text, disabled states, footnotes                */
  --color-surface:       #FFFFFF; /* Cards, modals, form panels, elevated surfaces               */
  --color-surface-2:     #F1F5F9; /* Alternate rows, hovered states, nav dropdowns               */
  /* Convenience aliases used in custom.css and components.css */
  --color-light:         #F8FAFC; /* Alias for --color-bg  — used in industry/service components */
  --color-white:         #FFFFFF; /* Alias for --color-surface                                   */
  --color-muted:         #64748B; /* Alias for --color-text-muted                                */
  --color-border:        #E2E8F0; /* All borders, dividers, card outlines                        */
  --color-border-strong: #CBD5E1; /* Form input borders, stronger separators                     */
  --color-success:       #10B981; /* Success states, confirmation, availability indicators        */
  --color-warning:       #F59E0B; /* Warning states, pending indicators, star ratings             */
  --color-danger:        #EF4444; /* Error states, required field indicators, alerts              */

  /* --------------------------------------------------------------------------
     Colors — Tint Values (Section 3.3)
     7 tints for backgrounds, badges, and interactive states.
     -------------------------------------------------------------------------- */

  --secondary-light: #EFF6FF; /* Blue badge backgrounds, info boxes, CTA strip BG  */
  --secondary-mid:   #BFDBFE; /* Blue badge borders, focused input rings            */
  --accent-light:    #ECFEFF; /* Cyan badge backgrounds, industry pills             */
  --accent-mid:      #A5F3FC; /* Cyan badge borders                                 */
  --success-light:   #D1FAE5; /* Success badge backgrounds                          */
  --warning-light:   #FEF3C7; /* Warning badge backgrounds                          */
  --danger-light:    #FEE2E2; /* Error badge backgrounds, error input backgrounds   */

  /* --------------------------------------------------------------------------
     Typography — Families (Section 3.4)
     Two typefaces. No exceptions. Loaded via Google Fonts in functions.php.
     Space Grotesk: all headings. Inter: all body. Weights defined per font.
     -------------------------------------------------------------------------- */

  --font-heading: 'Space Grotesk', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* --------------------------------------------------------------------------
     Typography — Scale (Section 3.4)
     Exact values from spec. No fluid scaling at this level — components handle
     responsive sizing using these tokens as upper bounds.
     -------------------------------------------------------------------------- */

  --text-display: 56px; /* Hero H1 only — 1 per page. display / 700 / −2px / 1.05lh      */
  --text-h1:      40px; /* Inner page titles. h1 / 700 / −1.5px / 1.1lh                  */
  --text-h2:      30px; /* Section headings. h2 / 600 / −0.8px / 1.2lh                   */
  --text-h3:      22px; /* Card titles, feature names. h3 / 600 / −0.3px / 1.3lh         */
  --text-h4:      17px; /* Nav links, sidebar heads. h4 / 500 / 0px / 1.4lh              */
  --text-body-lg: 18px; /* Hero subline, section intro. body-lg / 400 / 0px / 1.75lh     */
  --text-body:    16px; /* All paragraph content. body / 400 / 0px / 1.7lh               */
  --text-body-sm: 14px; /* Card descriptions, metadata. body-sm / 400 / 0px / 1.6lh      */
  --text-eyebrow: 11px; /* Pre-titles, badge text. eyebrow / 600 / +0.12em / CAPS        */

  /* --------------------------------------------------------------------------
     Typography — Weights (Section 3.4)
     Space Grotesk: 600, 700. Inter: 400, 500, 600.
     -------------------------------------------------------------------------- */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* --------------------------------------------------------------------------
     Typography — Line Heights (Section 3.4)
     -------------------------------------------------------------------------- */

  --lh-display: 1.05;
  --lh-h1:      1.1;
  --lh-h2:      1.2;
  --lh-h3:      1.3;
  --lh-h4:      1.4;
  --lh-body-lg: 1.75;
  --lh-body:    1.7;
  --lh-body-sm: 1.6;

  /* --------------------------------------------------------------------------
     Typography — Letter Spacing (Section 3.4)
     -------------------------------------------------------------------------- */

  --ls-display: -2px;
  --ls-h1:      -1.5px;
  --ls-h2:      -0.8px;
  --ls-h3:      -0.3px;
  --ls-h4:      0px;
  --ls-eyebrow: 0.12em;

  /* --------------------------------------------------------------------------
     Spacing (Section 3.5)
     Base unit: 4px. All values are multiples of 4px. Applies to padding,
     margin, gap, and all component-internal spacing.
     -------------------------------------------------------------------------- */

  --sp-1:  4px;   /* Icon gaps, tight inline spacing             */
  --sp-2:  8px;   /* Inline element gaps, compact UI             */
  --sp-3:  12px;  /* Form field gaps, list items                 */
  --sp-4:  16px;  /* Card internal gap, grid gutter              */
  --sp-6:  24px;  /* Card padding, nav item spacing              */
  --sp-8:  32px;  /* Between components, button groups           */
  --sp-5:  20px;  /* Compact element gap                         */
  --sp-7:  28px;  /* Card padding intermediate                   */
  --sp-9:  36px;  /* Medium section gap                          */
  --sp-10: 40px;  /* Generous gap                                */
  --sp-11: 44px;  /* Large gap                                   */
  --sp-12: 48px;  /* Between sections (mobile)                   */
  --sp-14: 56px;  /* Pre-hero inner page padding                 */
  --sp-16: 64px;  /* Wide gap                                    */
  --sp-20: 80px;  /* Section vertical padding (desktop)          */
  --sp-32: 128px; /* Hero vertical padding                       */

  /* --------------------------------------------------------------------------
     Border Radius (Section 3.5)
     -------------------------------------------------------------------------- */

  --r-xs:   4px;   /* Inline badges, table cells                 */
  --r-sm:   6px;   /* Small buttons, tags, compact elements      */
  --r-md:   8px;   /* Buttons, inputs, form elements, nav items  */
  --r-lg:   12px;  /* Cards, dropdowns, tooltips                 */
  --r-xl:   16px;  /* Large cards, modal containers              */
  --r-2xl:  24px;  /* Section containers, featured cards         */
  --r-pill: 100px; /* Eyebrow badges, pills, round buttons       */

  /* --------------------------------------------------------------------------
     Layout (Section 5.3)
     -------------------------------------------------------------------------- */

  --container-max:    1280px;
  --content-max:      1100px;
  --content-narrow:   760px; /* Blog posts, legal pages                     */
  --gutter-desktop:   80px;
  --gutter-tablet:    40px;
  --gutter-mobile:    20px;
  --grid-cols:        12;
  --grid-gap:         24px;
  --section-pad-desk: var(--sp-20);  /* 80px top/bottom desktop              */
  --section-pad-mob:  var(--sp-12);  /* 48px top/bottom mobile               */
  --hero-pad-desk:    var(--sp-32);  /* 128px hero top padding desktop       */

  /* --------------------------------------------------------------------------
     Z-Index Scale (Section 12.1)
     Nothing above 100 except nav (200) and modals (300). No exceptions.
     -------------------------------------------------------------------------- */

  --z-base:     1;
  --z-card:     10;
  --z-dropdown: 50;
  --z-sticky:   100;
  --z-nav:      200;
  --z-modal:    300;

  /* --------------------------------------------------------------------------
     Transitions (Section 7.2 — approved animation durations)
     -------------------------------------------------------------------------- */

  --transition-fast:     150ms ease;
  --transition-normal:   200ms ease;
  --transition-slow:     400ms ease-out;
  --transition-faq:      250ms ease;
  --transition-counter:  1200ms ease-out;
  --transition-dropdown: 150ms ease-out;

  /* --------------------------------------------------------------------------
     Elevation / Shadows
     -------------------------------------------------------------------------- */

  --shadow-card:  0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-hover: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-nav:   0 1px 0 rgba(255, 255, 255, 0.06);
  --shadow-modal: 0 24px 48px rgba(15, 23, 42, 0.18);
}

/* ============================================================================
   2. CSS RESET
   Modern reset optimised for performance and accessibility.
   ============================================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

html {
  font-size:               16px;
  line-height:             1.5;
  -webkit-text-size-adjust: 100%;
  text-size-adjust:         100%;
  scroll-behavior:          smooth;
  /* Promote stacking context; avoids unintended paint layers */
  isolation: isolate;
}

body {
  font-family:              var(--font-body);
  font-size:                var(--text-body);
  font-weight:              var(--fw-regular);
  line-height:              var(--lh-body);
  color:                    var(--color-text);
  background-color:         var(--color-bg);
  -webkit-font-smoothing:   antialiased;
  -moz-osx-font-smoothing:  grayscale;
  text-rendering:           optimizeLegibility;
  min-height:               100dvh;
  overflow-x:               clip;
}

/* Block-level resets */
h1, h2, h3, h4, h5, h6,
p, blockquote, figure, dl, dd { margin: 0; }
ul, ol, li { list-style: none; margin: 0; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
legend { padding: 0; }

/* Replaced elements */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
img { height: auto; }

/* Form elements */
input, button, textarea, select {
  font: inherit;
  color: inherit;
}
button { cursor: pointer; }
textarea { resize: vertical; }

/* Anchors */
a { color: inherit; text-decoration: none; }

/* Remove default focus for pointer; visible focus handled in Section 4 */
:focus:not(:focus-visible) { outline: none; }

/* Inherited box sizing for embedded content */
embed, iframe, object { max-width: 100%; }

/* ============================================================================
   3. BASE TYPOGRAPHY  (Section 3.4)
   Space Grotesk for all headings. Inter for all body. No exceptions.
   Weights — Space Grotesk: 600, 700. Inter: 400, 500, 600.
   ============================================================================ */

/* --- Headings ---------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family:  var(--font-heading);
  font-weight:  var(--fw-bold);
  color:        var(--color-primary);
  text-wrap:    balance;
  line-height:  var(--lh-h2); /* safe fallback; overridden per level below */
}

h1 {
  font-size:      var(--text-h1);
  font-weight:    var(--fw-bold);
  line-height:    var(--lh-h1);
  letter-spacing: var(--ls-h1);
}

h2 {
  font-size:      var(--text-h2);
  font-weight:    var(--fw-semi);
  line-height:    var(--lh-h2);
  letter-spacing: var(--ls-h2);
}

h3 {
  font-size:      var(--text-h3);
  font-weight:    var(--fw-semi);
  line-height:    var(--lh-h3);
  letter-spacing: var(--ls-h3);
}

h4 {
  font-size:      var(--text-h4);
  font-weight:    var(--fw-medium);
  line-height:    var(--lh-h4);
  letter-spacing: var(--ls-h4);
}

h5 {
  font-size:   var(--text-body);
  font-weight: var(--fw-semi);
  line-height: var(--lh-body);
}

h6 {
  font-size:   var(--text-body-sm);
  font-weight: var(--fw-semi);
  line-height: var(--lh-body-sm);
}

/* --- Body text -------------------------------------------------------------- */

p {
  font-family: var(--font-body);
  font-size:   var(--text-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color:       var(--color-text);
  max-width:   70ch; /* Optimal reading width ~65–75 chars */
}

p + p { margin-top: var(--sp-4); }

/* --- Typography utility classes --------------------------------------------- */

/* Display — Hero H1 only. One per page. (Section 3.4) */
.display {
  font-family:    var(--font-heading);
  font-size:      clamp(40px, 4.5vw, var(--text-display));
  font-weight:    var(--fw-bold);
  line-height:    var(--lh-display);
  letter-spacing: var(--ls-display);
  color:          var(--color-primary);
}

.body-lg {
  font-size:   var(--text-body-lg);
  line-height: var(--lh-body-lg);
}

.body-sm {
  font-size:   var(--text-body-sm);
  line-height: var(--lh-body-sm);
  color:       var(--color-text-muted);
}

/* Eyebrow — 11px / 600 / +0.12em tracking / CAPS (Section 3.4) */
.eyebrow {
  display:        inline-block;
  font-family:    var(--font-body);
  font-size:      var(--text-eyebrow);
  font-weight:    var(--fw-semi);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color:          var(--color-accent);
  line-height:    1.2;
}

/* Eyebrow as a badge pill (Section 6.3 eyebrow-badge component) */
.eyebrow-badge {
  display:          inline-flex;
  align-items:      center;
  gap:              var(--sp-2);
  padding:          4px 12px;
  background-color: var(--accent-light);
  border:           1px solid var(--accent-mid);
  border-radius:    var(--r-pill);
  font-family:      var(--font-body);
  font-size:        var(--text-eyebrow);
  font-weight:      var(--fw-semi);
  letter-spacing:   var(--ls-eyebrow);
  text-transform:   uppercase;
  color:            var(--color-accent);
}

/* --- Links ------------------------------------------------------------------ */

a {
  color:                 var(--color-secondary);
  text-decoration:       underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition:
    color var(--transition-fast),
    text-decoration-color var(--transition-fast);
}

a:hover {
  color:                 #1d4ed8; /* secondary darkened ~10% */
  text-decoration-color: currentColor;
}

/* --- Dark section text inversions ------------------------------------------ */
/* Section 5.4: 8 sections use dark (#0F172A) background */

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark h5,
.section--dark h6,
.section--dark .display {
  color: #ffffff;
}

.section--dark p,
.section--dark .body-lg,
.section--dark .body-sm {
  color: rgba(255, 255, 255, 0.75);
}

.section--dark .eyebrow,
.section--dark .eyebrow-badge {
  color:            var(--color-accent);
  background-color: rgba(6, 182, 212, 0.12);
  border-color:     rgba(6, 182, 212, 0.25);
}

.section--dark a {
  color: rgba(255, 255, 255, 0.85);
}

/* --- Inline text utilities ------------------------------------------------- */

strong, b { font-weight: var(--fw-semi); }
em, i     { font-style: italic; }
small     { font-size: var(--text-body-sm); }

mark {
  background-color: var(--warning-light);
  color:            var(--color-text);
  padding:          0 3px;
  border-radius:    var(--r-xs);
}

code, pre, kbd {
  font-family:   'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;
  font-size:     0.875em;
  border-radius: var(--r-xs);
}

code {
  background-color: var(--color-surface-2);
  padding:          2px 6px;
  border:           1px solid var(--color-border);
}

blockquote {
  border-left:  3px solid var(--color-secondary);
  padding-left: var(--sp-6);
  color:        var(--color-text-muted);
  font-size:    var(--text-body-lg);
  font-style:   italic;
}

/* ============================================================================
   4. ACCESSIBILITY  (Section 11.2 — WCAG 2.1 Level AA)
   Color contrast: 4.5:1 minimum for body text, 3:1 for large text.
   All interactive elements keyboard-accessible. Focus always visible.
   ============================================================================ */

/* --- Skip to main content (first focusable element) --- */
.skip-link {
  position:         absolute;
  left:             var(--sp-4);
  top:              -100%;
  z-index:          var(--z-modal);
  padding:          var(--sp-3) var(--sp-6);
  background-color: var(--color-secondary);
  color:            #ffffff;
  font-family:      var(--font-body);
  font-size:        var(--text-body);
  font-weight:      var(--fw-semi);
  border-radius:    var(--r-md);
  text-decoration:  none;
  transition:       top 0.15s ease;
  white-space:      nowrap;
}

.skip-link:focus-visible {
  top:     var(--sp-4);
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* --- Screen reader only (visually hidden, accessible to AT) --- */
.sr-only,
.screen-reader-text {
  position:   absolute;
  width:      1px;
  height:     1px;
  margin:     -1px;
  padding:    0;
  border:     0;
  overflow:   hidden;
  clip:       rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Reveal on focus (used for skip links and similar) */
.sr-only--focusable:focus,
.screen-reader-text:focus {
  position:    static;
  width:       auto;
  height:      auto;
  margin:      0;
  overflow:    visible;
  clip:        auto;
  white-space: normal;
}

/* --- Focus styles (Section 11.2: never outline:none without replacement) --- */

:focus-visible {
  outline:        2px solid var(--color-secondary);
  outline-offset: 3px;
  border-radius:  var(--r-xs);
}

/* High-contrast mode (Windows/macOS forced colors) */
@media (forced-colors: active) {
  :focus-visible {
    outline: 3px solid ButtonText;
    outline-offset: 2px;
  }
}

/* --- Prefers-reduced-motion (Section 7.4 + Section 12.1 !important exception) --- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration:        0.01ms !important; /* Section 12.1: only permitted !important */
    animation-iteration-count: 1 !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto   !important;
  }

  /* Ensure scroll-reveal elements are visible without animation */
  .reveal {
    opacity:   1 !important;
    transform: none !important;
  }
}

/* --- Print accessibility --- */
@media print {
  .skip-link,
  .sr-only,
  .screen-reader-text { display: none; }
}

/* ============================================================================
   5. LAYOUT SYSTEM  (Section 5.3)
   Container, 12-column grid, section padding. Mobile-first (Section 12.1).
   Breakpoints: 480 / 768 / 1024 / 1280 / 1440px.
   ============================================================================ */

/* --- Containers --- */

.container {
  width:         100%;
  max-width:     var(--container-max); /* 1280px */
  margin-inline: auto;
  padding-inline: var(--gutter-mobile); /* 20px mobile */
}

@media (min-width: 768px) {
  .container { padding-inline: var(--gutter-tablet); }   /* 40px tablet */
}

@media (min-width: 1280px) {
  .container { padding-inline: var(--gutter-desktop); }  /* 80px desktop */
}

.container--content { max-width: var(--content-max); }     /* 1100px */
.container--narrow  { max-width: var(--content-narrow); }  /* 760px blog/legal */

/* --- 12-column grid --- */

.grid {
  display:               grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap:                   var(--grid-gap); /* 24px */
}

/* Mobile: single column by default; components override as needed */
@media (max-width: 767px) {
  .grid { grid-template-columns: 1fr; }
}

/* --- Section padding (Section 5.3) --- */

.section {
  padding-block: var(--section-pad-mob); /* 48px mobile */
}

@media (min-width: 1024px) {
  .section { padding-block: var(--section-pad-desk); } /* 80px desktop */
}

.section--hero {
  padding-block-start: var(--hero-pad-desk); /* 128px — desktop only */
  padding-block-end:   var(--section-pad-desk);
}

@media (max-width: 1023px) {
  .section--hero {
    padding-block-start: var(--sp-20); /* 80px mobile */
    padding-block-end:   var(--section-pad-mob);
  }
}

/* ============================================================================
   6. SECTION BACKGROUNDS  (Section 5.4 — binding rules)
   14 homepage sections. Dark/light alternation creates visual rhythm.
   These class names are referenced in all page templates.
   ============================================================================ */

/* Dark: Navigation, Hero, Impact Numbers, CTA Banner, Footer */
.section--dark {
  background-color: var(--color-primary); /* #0F172A */
}

/* Hero specifically: grid overlay texture over dark background */
.section--dark-grid {
  background-color: var(--color-primary);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center center;
}

/* White: Social Proof Bar, Business Solutions, How It Works, Testimonials, Blog Preview */
.section--white {
  background-color: var(--color-surface); /* #FFFFFF */
}

/* Light: What We Do, Why Wolliq, Industries, Case Study Strip */
.section--light {
  background-color: var(--color-bg); /* #F8FAFC */
}

/* ============================================================================
   7. GLOBAL INTERACTIVE BASELINE
   Button and form input base declarations. Full component detail in
   assets/css/components.css (generated in the component build phase).
   ============================================================================ */

/* --- Button base (Section 6.2) --- */

.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--sp-2);
  font-family:     var(--font-body);
  font-weight:     var(--fw-semi);
  line-height:     1;
  white-space:     nowrap;
  text-decoration: none;
  border:          1.5px solid transparent;
  border-radius:   var(--r-md);
  cursor:          pointer;
  user-select:     none;
  -webkit-user-select: none;
  transition:
    background-color var(--transition-fast),
    color            var(--transition-fast),
    border-color     var(--transition-fast),
    box-shadow       var(--transition-fast),
    transform        100ms ease;
}

.btn:active  { transform: scale(0.98); }
.btn:focus-visible { outline-offset: 4px; }
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity:        0.45;
  cursor:         not-allowed;
  pointer-events: none;
}

/* Size variants (Section 6.2) */
.btn--sm { padding: 8px 16px;  font-size: 13px; }
.btn--md { padding: 12px 24px; font-size: 15px; } /* default */
.btn--lg { padding: 14px 30px; font-size: 16px; } /* hero CTAs */

/* Colour variants — full declarations in components.css */
.btn--primary { background-color: var(--color-secondary); color: var(--color-surface); }
.btn--dark    { background-color: var(--color-primary);   color: var(--color-surface); }
.btn--outline {
  background-color: transparent;
  border-color:     var(--color-secondary);
  color:            var(--color-secondary);
}
.btn--ghost {
  background-color: transparent;
  border-color:     rgba(255, 255, 255, 0.15);
  color:            rgba(255, 255, 255, 0.7);
}
.btn--accent { background-color: var(--color-accent); color: var(--color-surface); }

/* --- Form inputs base --- */

.form-input,
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="image"]),
select,
textarea {
  display:          block;
  width:            100%;
  padding:          10px 14px;
  font-family:      var(--font-body);
  font-size:        var(--text-body);
  font-weight:      var(--fw-regular);
  line-height:      var(--lh-body);
  color:            var(--color-text);
  background-color: var(--color-surface);
  border:           1px solid var(--color-border-strong);
  border-radius:    var(--r-md);
  appearance:       none;
  -webkit-appearance: none;
  transition:
    border-color var(--transition-fast),
    box-shadow   var(--transition-fast);
}

.form-input:focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="image"]):focus,
select:focus,
textarea:focus {
  border-color: var(--color-secondary);
  box-shadow:   0 0 0 3px var(--secondary-mid);
  outline:      none;
}

.form-input::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--color-text-subtle);
}

.form-input.is-error { border-color: var(--color-danger); background-color: var(--danger-light); }
.form-input.is-success { border-color: var(--color-success); }

/* Form field wrapper */
.form-field { display: flex; flex-direction: column; gap: var(--sp-2); }

.form-field__label {
  font-size:   var(--text-body-sm);
  font-weight: var(--fw-medium);
  color:       var(--color-text);
}

.form-field__error {
  font-size: var(--text-body-sm);
  color:     var(--color-danger);
}

/* ============================================================================
   8. WORDPRESS CORE COMPATIBILITY
   Override WP block library defaults that conflict with the Wolliq design
   system. Keeps editor output consistent with the frontend.
   ============================================================================ */

/* Remove WP's default margins that fight our spacing system */
.wp-block-group,
.wp-block-group__inner-container { margin: 0; }
.wp-block-columns { gap: var(--grid-gap); }

/* Align classes for full-bleed sections */
.alignfull {
  width:         100vw;
  max-width:     none;
  margin-inline: calc(50% - 50vw);
}

.alignwide {
  max-width: var(--content-max);
}

/* WP admin bar offset for sticky nav (Section 6.1 C01) */
@media (min-width: 782px) {
  .admin-bar .site-header { top: 32px; }
}

@media (max-width: 781px) {
  .admin-bar .site-header { top: 46px; }
}

/* WP block editor body styles (editor.css is separate; these apply frontend) */
.has-primary-background-color     { background-color: var(--color-primary) !important; }
.has-secondary-background-color   { background-color: var(--color-secondary) !important; }
.has-accent-background-color      { background-color: var(--color-accent) !important; }
.has-bg-background-color          { background-color: var(--color-bg) !important; }
.has-surface-background-color     { background-color: var(--color-surface) !important; }
.has-primary-color                { color: var(--color-primary) !important; }
.has-secondary-color              { color: var(--color-secondary) !important; }
.has-accent-color                 { color: var(--color-accent) !important; }
.has-text-color                   { color: var(--color-text) !important; }

/* ============================================================================
   9. UTILITY CLASSES
   Minimal global utilities. BEM naming applies to all components.
   ============================================================================ */

/* Flex helpers */
.flex          { display: flex; }
.flex-center   { display: flex; align-items: center; justify-content: center; }
.flex-between  { display: flex; align-items: center; justify-content: space-between; }
.flex-col      { display: flex; flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }

.gap-2  { gap: var(--sp-2); }
.gap-4  { gap: var(--sp-4); }
.gap-6  { gap: var(--sp-6); }
.gap-8  { gap: var(--sp-8); }
.gap-12 { gap: var(--sp-12); }

/* Text alignment */
.text-center { text-align: center; }
.text-left   { text-align: left; }

/* Color utilities */
.text-muted  { color: var(--color-text-muted); }
.text-subtle { color: var(--color-text-subtle); }
.text-accent { color: var(--color-accent); }

/* Scroll-reveal initial state; animations.js adds .is-visible */
.reveal {
  opacity:   0;
  transform: translateY(20px);
}

.reveal.is-visible {
  opacity:   1;
  transform: none;
}

/* Divider */
.divider {
  height:           1px;
  background-color: var(--color-border);
  border:           none;
  margin-block:     var(--sp-8);
}

/* ============================================================================
   10. SELECTION & PRINT
   ============================================================================ */

::selection {
  background-color: var(--secondary-light);
  color:            var(--color-primary);
}

@media print {
  body {
    font-size:  12pt;
    color:      #000;
    background: #fff;
  }

  .site-header,
  .site-footer,
  .btn,
  .skip-link,
  .wolliq-cta-banner,
  .wolliq-cta-strip {
    display: none !important;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #555;
  }

  h1, h2, h3 { page-break-after: avoid; }
  img         { page-break-inside: avoid; max-width: 100%; }
}