/*
Theme Name: WV 2026
Theme URI: https://woodstockvitamins.com
Author: Woodstock Vitamins
Description: Custom theme for Woodstock Vitamins
Version: 1.0.4
Requires at least: 6.4
Requires PHP: 8.0
License: Proprietary
Text Domain: wv-2026
*/

/* ═══════════════════════════════════════════
   CHANGELOG — style.css (frozen)
   ═══════════════════════════════════════════
   v1.0.4 — 2026-06-01: Added KEEP-AS-IS marker comment to the iOS
            input-zoom rule documenting why the max-width: 768 query
            is intentional and not subject to the mobile-first
            refactor sweep. No behavioral change.
   v1.0.3 — 2026-04-22: Added !important to the mobile input-zoom rule.
            Initial v1.0.2 version had equal specificity to existing
            component rules (.wv-auth__field input in account.css,
            .ywpar-wrapper chain), and account.css loads after style.css
            so component 13–14px rules were winning. !important
            establishes a hard accessibility floor.
   v1.0.2 — 2026-04-22: Added mobile input-zoom fix in WORKING LAYER
            section at the bottom. iOS Safari auto-zooms the viewport
            when a user focuses an input whose font-size is < 16px,
            disrupting double-tap word-select and allowing overscroll.
            Global mobile override sets all text-entry inputs to 16px
            below 768px. Desktop sizes are unchanged.
   v1.0.1 — initial theme release.
   ═══════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   @FONT-FACE — self-hosted from assets/fonts/
   ═══════════════════════════════════════════ */

/* General Grotesque — Light (300) */
@font-face {
  font-family: 'General Grotesque';
  src: url('assets/fonts/GeneralGrotesque-Light.woff2') format('woff2'),
       url('assets/fonts/GeneralGrotesque-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* General Grotesque — Regular (400) */
@font-face {
  font-family: 'General Grotesque';
  src: url('assets/fonts/GeneralGrotesque-Regular.woff2') format('woff2'),
       url('assets/fonts/GeneralGrotesque-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* General Grotesque — Demi / Semibold (600) */
@font-face {
  font-family: 'General Grotesque';
  src: url('assets/fonts/GeneralGrotesque-Demi.woff2') format('woff2'),
       url('assets/fonts/GeneralGrotesque-Demi.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* General Grotesque — Bold (700) */
@font-face {
  font-family: 'General Grotesque';
  src: url('assets/fonts/GeneralGrotesque-Bold.woff2') format('woff2'),
       url('assets/fonts/GeneralGrotesque-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* General Grotesque Mono — Regular (400) */
@font-face {
  font-family: 'General Grotesque Mono';
  src: url('assets/fonts/GeneralGrotesqueMono-Regular.woff2') format('woff2'),
       url('assets/fonts/GeneralGrotesqueMono-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* General Grotesque Mono — Demi / Medium (500) */
@font-face {
  font-family: 'General Grotesque Mono';
  src: url('assets/fonts/GeneralGrotesqueMono-Demi.woff2') format('woff2'),
       url('assets/fonts/GeneralGrotesqueMono-Demi.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Office Times Round — Regular (400) */
@font-face {
  font-family: 'Office Times Round';
  src: url('assets/fonts/OfficeTimesRound-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ═══════════════════════════════════════════
   FROZEN LAYERS — do not edit these files
   ═══════════════════════════════════════════
   wv-tokens.css      — all CSS variables
   wv-typography.css  — all type classes
   wv-components.css  — all component styles

   These three files are READ-ONLY.
   Changes require designer approval.
   ═══════════════════════════════════════════ */
@import url('assets/css/wv-tokens.css');
@import url('assets/css/wv-typography.css');
@import url('assets/css/wv-components.css');

/* ═══════════════════════════════════════════
   WORKING LAYER
   ═══════════════════════════════════════════
   Page-specific and build CSS goes below this
   line or in separate page-scoped CSS files.
   Never redeclare variables or component classes
   already defined in the frozen files above.
   ═══════════════════════════════════════════ */

/* iOS input-zoom prevention.
   iOS Safari auto-zooms the viewport when focusing a text-entry input
   whose font-size is < 16px. That zoom disrupts the double-tap-to-
   select-word gesture and causes overscroll. 16px is the documented
   threshold — anything ≥16px is safe. Scoped to mobile only so
   designer-intended smaller sizes remain on desktop.
   !important is used deliberately: this is a universal accessibility
   floor. Component-specific rules (e.g. .wv-auth__field input at 13px
   in account.css, .ywpar-wrapper .ywpar-share-points input at 14px)
   tie or beat a plain attribute selector, so without !important this
   rule loses the cascade. The intent is "no input is ever < 16px on
   mobile, regardless of component styling" — exactly what !important
   expresses.

   ⚠ KEEP-AS-IS / DO NOT REFACTOR TO MOBILE-FIRST.
   The max-width: 768 here is intentional and NOT a layout breakpoint.
   It's an iOS-touch UX rule. Inverting to mobile-first would require
   `font-size: 16px !important` as the unqueried base, which would
   force every desktop input to 16px and block all designer-intended
   smaller sizes (filter dropdowns, table inline edits, etc.) — the
   !important blocks component overrides at every viewport, not just
   mobile. The max-width form scopes the override to touch viewports
   only, which is the correct semantic. Reviewed during the breakpoint
   cleanup pass on 2026-06-01 — confirmed exempt from the rule. */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  textarea {
    font-size: 16px !important;
  }
}