/*
Theme Name: DECOVINK
Theme URI: https://decovink.ca
Description: DECOVINK child theme. Owns the site chrome (announcement bar, header, mega menu, footer) and the global design system. Business logic lives in the decovink-core plugin, never here.
Author: MMX Global Inc.
Template: hello-elementor
Version: 1.0.0
Requires PHP: 8.0
Text Domain: decovink
*/

/* ==========================================================================
   Design tokens. Source of truth: the DECOVINK Print Technology design.
   Never hard-code a colour anywhere else in the theme or in Elementor.
   ========================================================================== */

:root {
  /* Colour */
  --dv-bg: #FFFFFF;
  --dv-surface: #FAFAFA;
  --dv-surface-alt: #F5F5F5;
  --dv-ink: #161616;
  --dv-ink-muted: #57514F;
  --dv-line: #E4E0DF;
  --dv-accent: #E30613;
  --dv-accent-hover: #C1050F;
  --dv-accent-ink: #FFFFFF;

  /* Type */
  --dv-font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --dv-fw-body: 400;
  --dv-fw-medium: 500;
  --dv-fw-bold: 700;
  --dv-fw-display: 800;

  /* Spacing */
  --dv-xs: 4px;
  --dv-sm: 8px;
  --dv-md: 16px;
  --dv-lg: 32px;
  --dv-xl: 64px;
  --dv-xxl: 96px;

  /* Radius. One rule: buttons/inputs 8, cards/panels 12, chips pill. */
  --dv-r-sm: 8px;
  --dv-r-md: 12px;
  --dv-r-pill: 999px;

  /* Layout */
  --dv-maxw: 1280px;
  --dv-gutter: 24px;
  --dv-section-y: 64px;

  /* Chrome */
  --dv-header-h: 72px;
  --dv-header-h-scrolled: 60px;

  --dv-ease: cubic-bezier(0.2, 0, 0.2, 1);
}

@media (min-width: 768px) {
  :root {
    --dv-gutter: 48px;
    --dv-section-y: 96px;
  }
}

/* ==========================================================================
   Reset and base
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--dv-bg);
  color: var(--dv-ink);
  font-family: var(--dv-font);
  font-weight: var(--dv-fw-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* Focus. Visible on every interactive element, in the accent, per the design. */
:focus-visible {
  outline: 3px solid var(--dv-accent);
  outline-offset: 2px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* Inverted surfaces get a light ring so it stays visible on carbon. */
.dv-invert :focus-visible { outline-color: #FFFFFF; }

.dv-skip-link:focus {
  position: fixed;
  top: var(--dv-md);
  left: var(--dv-md);
  z-index: 100000;
  padding: 12px 20px;
  background: var(--dv-ink);
  color: #FFFFFF;
  border-radius: var(--dv-r-sm);
  font-weight: var(--dv-fw-medium);
}

/* ==========================================================================
   Typography. Display sits tight; body stays measured.
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--dv-font);
  font-weight: var(--dv-fw-display);
  color: var(--dv-ink);
  margin: 0 0 var(--dv-md);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 5.2vw, 4rem); line-height: 1.04; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.75rem); line-height: 1.08; }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.625rem); line-height: 1.15; font-weight: var(--dv-fw-bold); }
h4 { font-size: 1.125rem; line-height: 1.25; font-weight: var(--dv-fw-bold); letter-spacing: -0.01em; }
h5, h6 { font-size: 1rem; line-height: 1.3; font-weight: var(--dv-fw-bold); letter-spacing: 0; }

p { margin: 0 0 var(--dv-md); }

/* Running text measure. Opt in, so grids and cards are unaffected. */
.dv-measure { max-width: 34em; }

.dv-lead {
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.6;
  color: var(--dv-ink-muted);
  max-width: 34em;
}

.dv-eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: var(--dv-fw-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dv-accent);
  margin: 0 0 var(--dv-sm);
}
.dv-eyebrow--muted { color: var(--dv-ink-muted); }

/* Red is allowed on display type, never on body copy. */
.dv-accent-text { color: var(--dv-accent); }

a { color: var(--dv-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--dv-accent); }

.dv-invert { background: var(--dv-ink); color: #FFFFFF; }
.dv-invert h1, .dv-invert h2, .dv-invert h3, .dv-invert h4 { color: #FFFFFF; }
.dv-invert a { color: #FFFFFF; }
.dv-invert .dv-lead { color: rgba(255,255,255,0.72); }

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.dv-wrap {
  width: 100%;
  max-width: var(--dv-maxw);
  margin-inline: auto;
  padding-inline: var(--dv-gutter);
}

.dv-section { padding-block: var(--dv-section-y); }
.dv-section--surface { background: var(--dv-surface); }
.dv-section--surface-alt { background: var(--dv-surface-alt); }

.dv-hairline { border: 0; border-top: 1px solid var(--dv-line); margin: 0; }

.dv-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Buttons. One primary action per view.
   ========================================================================== */

.dv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dv-sm);
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--dv-r-sm);
  font-family: var(--dv-font);
  font-size: 0.9375rem;
  font-weight: var(--dv-fw-bold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.18s var(--dv-ease), color 0.18s var(--dv-ease), border-color 0.18s var(--dv-ease);
}

.dv-btn--primary {
  background: var(--dv-accent);
  color: var(--dv-accent-ink);
}
.dv-btn--primary:hover { background: var(--dv-accent-hover); color: var(--dv-accent-ink); }

.dv-btn--outline {
  background: transparent;
  color: var(--dv-ink);
  border-color: var(--dv-ink);
}
.dv-btn--outline:hover { background: var(--dv-ink); color: #FFFFFF; }

.dv-invert .dv-btn--outline { color: #FFFFFF; border-color: rgba(255,255,255,0.4); }
.dv-invert .dv-btn--outline:hover { background: #FFFFFF; color: var(--dv-ink); border-color: #FFFFFF; }

.dv-btn--lg { min-height: 56px; padding: 0 32px; font-size: 1rem; }
.dv-btn--block { width: 100%; }

/* ==========================================================================
   Cards. Product and category only. Never a wrapper for plain text.
   ========================================================================== */

.dv-card {
  background: var(--dv-bg);
  border: 1px solid var(--dv-line);
  border-radius: var(--dv-r-md);
  overflow: hidden;
  transition: border-color 0.18s var(--dv-ease);
}
.dv-card:hover { border-color: var(--dv-ink); }

.dv-chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  background: var(--dv-surface-alt);
  border: 1px solid transparent;
  border-radius: var(--dv-r-pill);
  color: var(--dv-ink);
  font-size: 0.875rem;
  font-weight: var(--dv-fw-medium);
  cursor: pointer;
}
.dv-chip[aria-pressed="true"] { background: var(--dv-ink); color: #FFFFFF; }

/* ==========================================================================
   Forms
   ========================================================================== */

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="number"], input[type="search"], input[type="password"], select, textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  background: var(--dv-bg);
  border: 1px solid var(--dv-line);
  border-radius: var(--dv-r-sm);
  color: var(--dv-ink);
  font-family: var(--dv-font);
  font-size: 1rem;
  line-height: 1.4;
}
textarea { min-height: 120px; padding-block: 14px; }

input::placeholder, textarea::placeholder { color: var(--dv-ink-muted); opacity: 1; }

label { display: block; font-size: 0.875rem; font-weight: var(--dv-fw-medium); margin-bottom: 6px; }

.dv-field-error { color: var(--dv-accent); font-size: 0.875rem; font-weight: var(--dv-fw-medium); margin-top: 6px; }

/* ==========================================================================
   Motion. The design sets motion at 0.2, so transitions only.
   ========================================================================== */

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

   The browser's own [hidden] rule is a UA style, so ANY author declaration of
   display beats it. Components here that set their own display (the drawer,
   the mobile bar) would therefore ignore the hidden attribute entirely. This
   makes hidden authoritative, which is what every toggle in nav.js relies on.
   ========================================================================== */

[hidden] { display: none !important; }

/* Full-width buttons must be able to shrink ------------------------------ */
/* .dv-btn is an inline-flex box with white-space: nowrap, so its min-content
   width is the label plus its padding and width: 100% alone cannot take the
   box below that. This clamp has no visual effect where there is room; it
   only stops a block button pushing past its container. It is NOT a fix for
   the 320px header overflow, whose cause is .dv-utils in the header bar.
   dv-btn--block clamp */
.dv-btn--block { width: 100%; min-width: 0; max-width: 100%; }