/*
Theme Name: Queer Vienna Mutual Aid (Martanda Child)
Theme URI: https://queervienna.at/
Description: Child theme of Martanda (WPKoi) for the Queer Vienna Mutual Aid Fund. Carries the redesign colour system, typography, and component styles so customisations survive parent-theme updates. Pair with a Stripe donation plugin and build pages in Elementor using the palette and classes below.
Author: Villa Vida / Verein Hint Wien
Template: martanda
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: queervienna-child
*/

/* =====================================================================
   1. DESIGN TOKENS
   Modern QVMAF palette (pink / violet / teal / amber) on cool neutrals.
   Reference these variables from Elementor global colours and custom CSS
   so the whole site stays consistent.
   ===================================================================== */
:root{
  --qv-ground:#F7F5FB;
  --qv-surface:#FFFFFF;
  --qv-surface-2:#F1EDFA;
  --qv-ink:#1B1030;
  --qv-muted:#665A7C;
  --qv-faint:#9086A6;
  --qv-border:#E7E0F3;
  --qv-border-strong:#D8CEEC;

  --qv-pink:#F5308B;        /* primary actions, donate */
  --qv-pink-ink:#C4176E;    /* pink text / links on light (AA) */
  --qv-violet:#7A3FF2;      /* secondary actions, accents */
  --qv-violet-ink:#6A2FE0;
  --qv-teal:#0BA98F;        /* success, "goal met" */
  --qv-teal-soft:#D2F3EC;
  --qv-amber:#F59300;       /* "round open", urgency */
  --qv-amber-soft:#FCEACB;
  --qv-pink-soft:#FCDEEC;
  --qv-violet-soft:#ECE5FE;

  --qv-radius:14px;
  --qv-radius-lg:20px;
  --qv-shadow:0 1px 2px rgba(27,16,48,.05), 0 12px 30px -14px rgba(27,16,48,.18);
  --qv-shadow-lg:0 2px 4px rgba(27,16,48,.06), 0 34px 64px -26px rgba(122,63,242,.32);

  --qv-font-display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --qv-font-body:"Newsreader",Georgia,serif;
  --qv-font-mono:"DM Mono","SFMono-Regular",ui-monospace,monospace;
}

/* Optional dark mode. Remove this block if the site is light only. */
@media (prefers-color-scheme: dark){
  :root.qv-allow-dark{
    --qv-ground:#120A20;--qv-surface:#1E1236;--qv-surface-2:#271746;--qv-ink:#F4EEFC;
    --qv-muted:#B9A9D2;--qv-faint:#8A7BA6;--qv-border:#342350;--qv-border-strong:#453263;
    --qv-pink:#FF4D9E;--qv-pink-ink:#FF82BC;--qv-violet:#9E7BFF;--qv-violet-ink:#BBA3FF;
    --qv-teal:#2FE0C4;--qv-teal-soft:#123A34;--qv-amber:#FFB84D;--qv-amber-soft:#392A14;
    --qv-pink-soft:#361530;--qv-violet-soft:#241A46;
  }
}

/* =====================================================================
   2. BASE TYPOGRAPHY
   Fonts are enqueued from Google Fonts in functions.php.
   ===================================================================== */
body{
  font-family:var(--qv-font-body);
  color:var(--qv-ink);
  background:var(--qv-ground);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.qv-display{
  font-family:var(--qv-font-display);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.02em;
  text-wrap:balance;
  color:var(--qv-ink);
}
a{color:var(--qv-pink-ink);text-underline-offset:3px}
a:hover{color:var(--qv-violet-ink)}

.qv-eyebrow{
  font-family:var(--qv-font-mono);
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--qv-pink-ink);font-weight:500;
}
.qv-mono{font-family:var(--qv-font-mono)}

/* =====================================================================
   3. BUTTONS  (add class qv-btn plus a variant in Elementor "CSS Classes")
   ===================================================================== */
.qv-btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--qv-font-mono);font-size:.95rem;font-weight:500;line-height:1;
  padding:14px 24px;border-radius:var(--qv-radius);border:1.5px solid transparent;
  text-decoration:none;cursor:pointer;transition:transform .12s ease,background .12s ease,filter .12s ease;
}
.qv-btn:active{transform:translateY(1px)}
.qv-btn--pink{background:var(--qv-pink);color:#fff}
.qv-btn--pink:hover{background:var(--qv-pink-ink);color:#fff}
.qv-btn--violet{background:var(--qv-violet);color:#fff}
.qv-btn--violet:hover{filter:brightness(1.08);color:#fff}
.qv-btn--ghost{background:transparent;color:var(--qv-ink);border-color:var(--qv-border-strong)}
.qv-btn--ghost:hover{background:var(--qv-surface-2)}

/* =====================================================================
   4. HELPERS
   ===================================================================== */
.qv-card{
  background:var(--qv-surface);border:1px solid var(--qv-border);
  border-radius:var(--qv-radius-lg);padding:26px;box-shadow:var(--qv-shadow);
}
.qv-pill{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--qv-font-mono);
  font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:500;
  padding:6px 12px;border-radius:999px;
}
.qv-pill--open{color:var(--qv-teal);background:var(--qv-teal-soft)}
.qv-pill--soon{color:var(--qv-amber);background:var(--qv-amber-soft)}

/* Fund progress bar: <div class="qv-bar"><i style="width:58%"></i></div> */
.qv-bar{height:12px;border-radius:999px;background:var(--qv-surface-2);border:1px solid var(--qv-border);overflow:hidden}
.qv-bar > i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--qv-pink),var(--qv-amber))}

/* Gradient headline: wrap the word in <span class="qv-grad"> */
.qv-grad{
  background:linear-gradient(100deg,var(--qv-pink),var(--qv-violet));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Impact stat: big number in the fund's display face */
.qv-stat-n{font-family:var(--qv-font-display);font-weight:800;font-size:clamp(30px,4vw,44px);line-height:1;letter-spacing:-.025em}

/* Legal / policy pages: comfortable reading measure */
.qv-legal{max-width:760px;margin:0 auto}
.qv-legal p,.qv-legal li{font-size:1.05rem;line-height:1.7}

@media (prefers-reduced-motion:reduce){*{transition:none !important}}