/*
Theme Name: Velnostra
Theme URI: https://velnostra.com
Author: Velnostra
Description: Storefront theme for Velnostra — folding electric wheelchairs. Built for velnostra.com; no third-party asset hosts, no external fonts.
Version: 1.0.5
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: velnostra
*/

/* ---------------------------------------------------------------------------
   Velnostra buys for an audience that is often older and often has low vision.
   That drives three choices below: a 17px body minimum, a 4.5:1 floor on every
   text pair, and 48px minimum tap targets. Do not "tighten" these.
   --------------------------------------------------------------------------- */

:root {
  --ink:        #10241f;
  --ink-soft:   #3f5a53;
  --line:       #d5e0dc;
  --paper:      #ffffff;
  --panel:      #f4f8f6;
  --brand:      #0f5c4d;
  --brand-dark: #0a4034;
  --brand-tint: #e3f1ec;
  --accent:     #b4531c;
  --focus:      #0a4034;
  --maxw:       1180px;
  --radius:     10px;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  overflow-x: hidden;             /* belt-and-braces against the mobile scroll gate */
}

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

a { color: var(--brand-dark); }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.vn-wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

.vn-skip {
  position: absolute; left: -9999px; top: 0; background: var(--brand-dark);
  color: #fff; padding: 12px 18px; z-index: 999;
}
.vn-skip:focus { left: 0; }

/* ---- header --------------------------------------------------------------- */
.vn-header { border-bottom: 1px solid var(--line); background: var(--paper); }
.vn-header-in {
  display: flex; align-items: center; gap: 20px;
  min-height: 84px; flex-wrap: wrap;
}
.vn-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.vn-brand img { height: 40px; width: auto; }
.vn-brand-text { font-size: 25px; font-weight: 700; letter-spacing: -0.02em; color: var(--brand-dark); }
.vn-nav { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vn-nav a {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 14px;
  text-decoration: none; color: var(--ink); font-weight: 600; border-radius: 8px;
}
.vn-nav a:hover { background: var(--panel); }
.vn-nav a.vn-cta { background: var(--brand); color: #fff; padding: 0 20px; }
.vn-nav a.vn-cta:hover { background: var(--brand-dark); }

.vn-navtoggle {
  display: none; min-height: 48px; min-width: 48px; align-items: center; justify-content: center;
  margin-left: auto; background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; font-size: 16px; font-weight: 700; cursor: pointer; color: var(--ink);
}

/* ---- reassurance strip ---------------------------------------------------- */
.vn-strip { background: var(--brand-tint); border-bottom: 1px solid var(--line); }
.vn-strip ul {
  display: flex; gap: 28px; flex-wrap: wrap; justify-content: center;
  list-style: none; margin: 0; padding: 12px 20px; font-size: 15px; font-weight: 600;
  color: var(--brand-dark);
}

/* ---- hero ----------------------------------------------------------------- */
.vn-hero { background: var(--panel); border-bottom: 1px solid var(--line); }
.vn-hero-in { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; padding: 64px 20px; }
.vn-hero h1 { font-size: clamp(30px, 4.4vw, 46px); line-height: 1.15; margin: 0 0 18px; letter-spacing: -0.02em; }
.vn-hero p { font-size: 19px; color: var(--ink-soft); margin: 0 0 28px; max-width: 52ch; }
.vn-hero-media {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  min-height: 320px; display: flex; align-items: center; justify-content: center; padding: 22px;
}
/* Catalog cut-outs are white-ground: contain + multiply, never cover (§8). */
.vn-hero-media img {
  max-height: 340px; width: auto; object-fit: contain; mix-blend-mode: multiply;
}

.vn-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 26px; border-radius: 8px; font-size: 17px; font-weight: 700;
  text-decoration: none; background: var(--brand); color: #fff; border: 2px solid var(--brand);
}
.vn-btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.vn-btn-ghost { background: transparent; color: var(--brand-dark); }
.vn-btn-ghost:hover { background: var(--brand-tint); }
.vn-btnrow { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---- sections ------------------------------------------------------------- */
.vn-section { padding: 60px 0; }
.vn-section-alt { background: var(--panel); border-block: 1px solid var(--line); }
.vn-section h2 { font-size: clamp(24px, 3vw, 32px); margin: 0 0 10px; letter-spacing: -0.015em; }
.vn-section > .vn-wrap > p.vn-lede { font-size: 18px; color: var(--ink-soft); margin: 0 0 34px; max-width: 68ch; }

.vn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 26px; }

.vn-card {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
  overflow: hidden; display: flex; flex-direction: column;
}
.vn-card-media { background: #fff; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; padding: 16px; }
.vn-card-media img { max-height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.vn-card-body { padding: 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.vn-card-body h3 { font-size: 17px; line-height: 1.4; margin: 0; }
.vn-card-body h3 a { text-decoration: none; color: var(--ink); }
.vn-card-body h3 a:hover { text-decoration: underline; }
.vn-price { font-size: 21px; font-weight: 700; color: var(--brand-dark); margin-top: auto; }
.vn-spec { font-size: 15px; color: var(--ink-soft); margin: 0; }

/* ---- info blocks ---------------------------------------------------------- */
.vn-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 30px; }
.vn-cols h3 { font-size: 18px; margin: 0 0 8px; }
.vn-cols p { margin: 0; color: var(--ink-soft); }

/* ---- content pages -------------------------------------------------------- */
.vn-page { padding: 48px 0 64px; }
.vn-page h1 { font-size: clamp(28px, 3.6vw, 38px); margin: 0 0 22px; letter-spacing: -0.02em; }
.vn-prose { max-width: 74ch; }
.vn-prose h2 { font-size: 22px; margin: 34px 0 10px; }
.vn-prose h3 { font-size: 18px; margin: 26px 0 8px; }
.vn-prose p, .vn-prose li { color: var(--ink); }
.vn-prose ul, .vn-prose ol { padding-left: 22px; }
.vn-prose li { margin-bottom: 6px; }
.vn-prose table { border-collapse: collapse; width: 100%; margin: 18px 0; }
.vn-prose th, .vn-prose td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.vn-prose th { background: var(--panel); }
.vn-note { font-size: 15px; color: var(--ink-soft); border-left: 3px solid var(--line); padding-left: 14px; }

/* ---- contact form (§11 item 5 — zero <form> elements is an instant fail) --- */
.vn-form { display: grid; gap: 16px; max-width: 620px; margin-top: 24px; }
.vn-field { display: grid; gap: 6px; }
.vn-field label { font-weight: 600; font-size: 16px; }
.vn-field input, .vn-field textarea, .vn-field select {
  font: inherit; padding: 13px 14px; border: 1px solid #9fb3ac; border-radius: 8px;
  background: #fff; color: var(--ink); width: 100%; min-height: 50px;
}
.vn-field textarea { min-height: 150px; resize: vertical; }
.vn-form button { min-height: 52px; }
.vn-formnote { font-size: 15px; color: var(--ink-soft); }
.vn-alert { padding: 14px 16px; border-radius: 8px; font-weight: 600; }
.vn-alert-ok  { background: var(--brand-tint); color: var(--brand-dark); border: 1px solid #9ecfc0; }
.vn-alert-err { background: #fdeceb; color: #8a2318; border: 1px solid #f0b3ac; }
.vn-hp { position: absolute; left: -9999px; }   /* honeypot */

/* ---- footer --------------------------------------------------------------- */
.vn-footer { background: var(--brand-dark); color: #dfeeea; margin-top: 60px; }
.vn-footer a { color: #ffffff; }
.vn-footer-in { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding: 52px 20px 34px; }
.vn-footer h4 { color: #fff; font-size: 15px; letter-spacing: 0.07em; text-transform: uppercase; margin: 0 0 14px; }
.vn-footer ul { list-style: none; margin: 0; padding: 0; }
.vn-footer li { margin-bottom: 10px; }
.vn-footer li a { display: inline-block; min-height: 32px; }
.vn-footer address { font-style: normal; line-height: 1.8; }
.vn-footer-brand img { height: 38px; margin-bottom: 14px; }
.vn-legal {
  border-top: 1px solid rgba(255,255,255,0.18); padding: 20px;
  font-size: 14px; line-height: 1.7; color: #c2dbd4;
}
.vn-legal p { margin: 0 0 8px; }
/* §1: the brand non-affiliation disclaimer is never removed. If it looks wrong,
   the problem is its styling, not its presence. */
.vn-disclaimer { color: #c2dbd4; }

/* ---- woocommerce trims ---------------------------------------------------- */
.woocommerce .button, .woocommerce button.button, .woocommerce a.button,
.woocommerce #respond input#submit, .woocommerce input.button {
  background: var(--brand); color: #fff; font-weight: 700; border-radius: 8px;
  min-height: 50px; padding: 12px 22px; font-size: 16px;
}
.woocommerce .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover {
  background: var(--brand-dark); color: #fff;
}
.woocommerce span.onsale { background: var(--accent); }
.woocommerce div.product .price, .woocommerce ul.products li.product .price { color: var(--brand-dark); font-weight: 700; }
.woocommerce ul.products li.product img { mix-blend-mode: multiply; }
.woocommerce-message, .woocommerce-info { border-top-color: var(--brand); }
.woocommerce-error { border-top-color: #8a2318; }

/* ---- responsive ----------------------------------------------------------- */
@media (max-width: 900px) {
  .vn-hero-in { grid-template-columns: 1fr; gap: 32px; padding: 44px 20px; }
  .vn-footer-in { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 760px) {
  .vn-navtoggle { display: inline-flex; }
  .vn-nav {
    display: none; width: 100%; flex-direction: column; align-items: stretch;
    gap: 4px; padding-bottom: 16px; margin-left: 0;
  }
  .vn-nav.is-open { display: flex; }
  .vn-nav a { width: 100%; }
  .vn-strip ul { gap: 14px; font-size: 14px; }
}