/*
Theme Name: Venasolla
Theme URI: https://venasolla.com
Author: Venasolla
Author URI: https://venasolla.com
Description: A clean, content-focused theme for the Venasolla supplement store. Built for WooCommerce with honest, label-accurate product pages and strong typography. Preserves WordPress + WooCommerce functionality; replaces only the styling.
Version: 2.2.25
Tested up to: 6.7
Requires at least: 6.0
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: venasolla
Tags: e-commerce, blog, one-column, two-columns, full-width-template, footer-widgets, translation-ready
*/

/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════════════════════════ */
:root {
  --bg: #fafaf7;
  --bg-elev: #ffffff;
  --bg-soft: #f0ede5;
  --bg-panel: #1f3d2b;
  --ink: #111111;
  --ink-soft: #4a4a47;
  --ink-mute: #6a6a64;
  --line: rgba(17,17,17,.08);
  --line-strong: rgba(17,17,17,.15);
  --brand: #1f3d2b;
  --brand-soft: #dde5dd;
  --brand-mid: #2d5a3e;
  /* Fixed brand-green for solid buttons (Add / primary CTA). Deliberately NOT
     one of the --brand* tokens, because venasolla_palette_style() remaps those
     per product card — using this keeps every button a uniform theme green
     instead of each product's accent colour. */
  --btn-solid: #1f3d2b;
  --btn-solid-hover: #2d5a3e;
  --cream: #f0e9d9;
  --cream-soft: #faf6eb;
  --error: #c53030;
  --error-soft: #fed7d7;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --max: 1240px;
  --max-prose: 700px;
  --font-sans: "Inter", ui-sans-serif, -apple-system, "SF Pro Display", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-display: "Fraunces", "Tiempos Headline", ui-serif, Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, monospace;
  --shadow-sm: 0 1px 2px rgba(17,17,17,.04), 0 0 0 1px rgba(17,17,17,.02);
  --shadow: 0 4px 12px rgba(17,17,17,.06), 0 1px 3px rgba(17,17,17,.04);
  --shadow-lg: 0 12px 32px rgba(17,17,17,.1), 0 4px 8px rgba(17,17,17,.05);
  /* Per-product palette - overridden per product on body.postid-N (single-product.php). */
  --p-tint: #f3f6f3;
  --p-tint-line: #e6ede6;
  --p-deep: #1f3d2b;
}

html[data-theme="dark"] {
  --bg: #0a0c0a;
  --bg-elev: #111411;
  --bg-soft: #161a16;
  --bg-panel: #0f1e15;
  --ink: #ededea;
  --ink-soft: #b0b0a8;
  --ink-mute: #8a8a82;
  --line: rgba(237,237,234,.08);
  --line-strong: rgba(237,237,234,.18);
  --brand: #6ea887;
  --brand-soft: #1a2420;
  --brand-mid: #8cbfa2;
  --btn-solid: #2f5c40;
  --btn-solid-hover: #3d7052;
  --cream: #3d3625;
  --cream-soft: #1f1c14;
  --error: #fc8181;
  --error-soft: #3d1a1a;
  --p-tint: #12160f;
  --p-tint-line: rgba(237,237,234,.10);
  --p-deep: #0f1e15;
}

/* ═══════════════════════════════════════════════════════════
   RESET / BASE
   ═══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  color-scheme: light;
}
html[data-theme="dark"] { color-scheme: dark; }

/* Visible keyboard focus for accessibility (mouse clicks stay clean). */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 2px;
}
html[data-theme="dark"] :focus-visible { outline-color: var(--brand-mid); }

/* Respect users who ask for reduced motion (WCAG 2.3.3): near-instant
   animations/transitions and no smooth-scroll. */
@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;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background .25s, color .25s;
}
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
/* Default icons to currentColor, but DON'T override SVGs that declare their own
   fill (e.g. outline icons with fill="none" - otherwise they fill solid). */
svg:not([fill]) { fill: currentColor; }
button {
  font-family: inherit;
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
}
input, select, textarea { font-family: inherit; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1.2;
  margin: 0;
}

.v-container {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: clamp(16px, 4vw, 32px);
  padding-right: clamp(16px, 4vw, 32px);
}

/* WordPress core required styles */
.alignnone { margin: 5px 20px 20px 0; }
.aligncenter { display: block; margin: 5px auto; }
.alignright { float: right; margin: 5px 0 20px 20px; }
.alignleft { float: left; margin: 5px 20px 20px 0; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 13px; color: var(--ink-mute); margin-top: 8px; text-align: center; }
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%); height: 1px; margin: -1px;
  overflow: hidden; padding: 0; position: absolute !important;
  width: 1px; word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: var(--bg-elev);
  clip: auto !important; clip-path: none;
  color: var(--ink); display: block;
  font-size: 14px; font-weight: 600;
  height: auto; left: 5px;
  line-height: normal; padding: 15px 23px 14px;
  text-decoration: none; top: 5px;
  width: auto; z-index: 100000;
}

/* Skip link */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  padding: 12px 16px;
  background: var(--ink); color: var(--bg);
  text-decoration: none;
  z-index: 100001;
}
.skip-link:focus { left: 8px; top: 8px; }

/* Comment list basic styles */
.comment-list { list-style: none; padding: 0; margin: 0; }