/* ==========================================================================
   WooGrub — base.css
   CSS custom properties (Fresh Order defaults), reset, base typography.
   Per-client overrides injected as inline <style> by functions.php.
   ========================================================================== */

/* ── Custom Properties — Fresh Order (Light) ─────────────────────────────── */
:root {
  /* Brand */
  --wg-primary:        #E8541A;   /* Warm orange — CTAs, active states */
  --wg-accent:         #F97316;   /* Lighter orange — hover, highlights */

  /* Success — order confirmation checkmark, positive states.
     A real green by default; clients may override per-brand. */
  --wg-success:        #1FA463;   /* Confirmation green */
  --wg-success-bg:     #E6F4EC;   /* Tinted circle behind the checkmark */
  --wg-success-solid:  #1FA463;   /* Filled icon disc */

  /* Error — validation notices, failed states */
  --wg-error:          #BA1A1A;   /* Notice border + icon/text */
  --wg-error-bg:       #FCE9E9;   /* Tinted notice background */
  --wg-error-solid:    #BA1A1A;   /* Filled icon disc */

  /* Info — neutral notices */
  --wg-info:           #0A6EBD;
  --wg-info-bg:        #E8F1FB;
  --wg-info-solid:     #0A6EBD;

  /* Cart button — fall back to brand colours if not overridden */
  --wg-cart-btn-bg:       var(--wg-primary);
  --wg-cart-btn-hover-bg: var(--wg-accent);
  --wg-cart-badge-bg:     var(--wg-accent);
  --wg-cart-icon-color:   var(--wg-text-on-primary);

  /* Checkout button — fall back to brand colours if not overridden */
  --wg-checkout-bg:       var(--wg-primary);
  --wg-checkout-hover-bg: var(--wg-accent);

  /* Split-info band — full-width brand-coloured band on marketing pages
     (e.g. Glasgatan homepage quicknav). Falls back to brand primary; clients
     may override per-brand via plugin theme settings. */
  --wg-band-bg:           var(--wg-primary);

  /* Surfaces */
  --wg-bg:             #F8F7F4;   /* Warm off-white page background */
  --wg-surface:        #FFFFFF;   /* Cards, modals, panels */
  --wg-surface-raised: #FFFFFF;   /* Elevated surfaces (dropdowns, tooltips) */

  /* Text */
  --wg-text:           #1A1A1A;   /* Primary text */
  --wg-text-muted:     #6B6B6B;   /* Secondary / helper text */
  --wg-text-on-primary:#FFFFFF;   /* Text on primary-coloured backgrounds */

  /* Borders */
  --wg-border:         #E5E5E5;
  --wg-border-strong:  #D0D0D0;

  /* Radius */
  --wg-radius:         12px;
  --wg-radius-sm:      8px;
  --wg-radius-lg:      16px;
  --wg-radius-full:    9999px;

  /* Typography */
  --wg-font-heading:   'Inter', system-ui, sans-serif;
  --wg-font-body:      'Inter', system-ui, sans-serif;
  --wg-font-mono:      'JetBrains Mono', 'Fira Code', monospace;

  /* Spacing scale (base 4px) */
  --wg-space-1:   0.25rem;   /*  4px */
  --wg-space-2:   0.5rem;    /*  8px */
  --wg-space-3:   0.75rem;   /* 12px */
  --wg-space-4:   1rem;      /* 16px */
  --wg-space-5:   1.25rem;   /* 20px */
  --wg-space-6:   1.5rem;    /* 24px */
  --wg-space-8:   2rem;      /* 32px */
  --wg-space-10:  2.5rem;    /* 40px */
  --wg-space-12:  3rem;      /* 48px */
  --wg-space-16:  4rem;      /* 64px */

  /* Shadows */
  --wg-shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --wg-shadow:     0 4px 12px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
  --wg-shadow-lg:  0 12px 32px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);
  --wg-shadow-overlay: 0 20px 60px rgba(0,0,0,.20);

  /* Transitions */
  --wg-transition:       150ms ease;
  --wg-transition-slow:  300ms ease;

  /* Z-index stack */
  --wg-z-category-nav:  100;
  --wg-z-header:        200;
  --wg-z-cart-toggle:   300;   /* collapsed cart button — sits below overlay */
  --wg-z-overlay:       350;   /* dims page behind cart panel and modal */
  --wg-z-cart:          400;   /* expanded cart panel — above overlay */
  --wg-z-modal:         500;   /* product modal — topmost */
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background-color: var(--wg-bg);
  color: var(--wg-text);
  font-family: var(--wg-font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

a {
  color: var(--wg-primary);
  text-decoration: none;
}

a:hover {
  color: var(--wg-accent);
}

ul,
ol {
  list-style: none;
}

/* ── Base Typography ─────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--wg-font-heading);
  font-weight: 600;
  line-height: 1.2;
  color: var(--wg-text);
}

h1 { font-size: clamp(1.75rem, 4vw, 2.5rem);  font-weight: 700; }
h2 { font-size: clamp(1.375rem, 3vw, 2rem);    font-weight: 700; }
h3 { font-size: clamp(1.125rem, 2.5vw, 1.5rem);}
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }

p {
  max-width: 70ch;
}

small {
  font-size: 0.875em;
}

strong {
  font-weight: 600;
}

/* ── Utility classes ─────────────────────────────────────────────────────── */
.wg-sr-only,
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

.wg-text-muted {
  color: var(--wg-text-muted);
}

.wg-text-primary {
  color: var(--wg-primary);
}

/* Focus style — used across all interactive elements */
.wg-focus-ring:focus-visible {
  outline: 2px solid var(--wg-primary);
  outline-offset: 2px;
}

/* ── Scroll lock — applied via JS when modal or cart is open ─────────────── */
body.wg-scroll-locked {
  overflow: hidden;
  /* touch-action: none prevents iOS Safari from scrolling the background
     even when momentum scrolling is already in progress */
  touch-action: none;
  /* Prevent layout shift on desktop when scrollbar disappears */
  padding-right: var(--wg-scrollbar-width, 0px);
}