/* ==========================================================================
   QuickPages - Colors & Type
   Derived from quickpages WordPress theme (theme.json + src/sass/).
   Body: Inter. Headings: Poppins. Brand: green #9BBD3B.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Fonts - self-hosted from /fonts (brand-supplied).
   Inter: single variable font (100–900) + italic variable companion.
   Poppins: static files, weights 400 / 500 / 600 / 700 / 800 + matching italics.
   -------------------------------------------------------------------------- */

/* Inter (variable) */
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype-variations"),
       url("fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Italic-VariableFont_opsz_wght.ttf") format("truetype-variations"),
       url("fonts/Inter-Italic-VariableFont_opsz_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Poppins (static - only the weights we actually use) */
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-Regular.ttf")        format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-Italic.ttf")         format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-Medium.ttf")         format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-MediumItalic.ttf")   format("truetype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-SemiBold.ttf")       format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-SemiBoldItalic.ttf") format("truetype"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-Bold.ttf")           format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-BoldItalic.ttf")     format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-ExtraBold.ttf")      format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-ExtraBoldItalic.ttf") format("truetype"); font-weight: 800; font-style: italic; font-display: swap; }

:root {
  /* -- Brand palette (from theme.json) ------------------------------------ */
  --qp-green:            #9BBD3B;   /* colour-1 - primary brand */
  --qp-green-highlight:  #AED146;   /* colour-2 - hover / highlight */
  --qp-purple:           #916AA1;   /* colour-3 - accent band */
  --qp-yellow:           #FFC948;   /* colour-4 - "How it works" band */
  --qp-coral:            #FF6F61;   /* colour-5 - form / CTA band */

  /* -- Shades (white → black) --------------------------------------------- */
  --qp-shade-1: #FFFFFF;  /* white - page / card background */
  --qp-shade-2: #EDEDED;  /* light grey - section backgrounds, dividers */
  --qp-shade-3: #9B9B9B;  /* mid grey - secondary text, meta */
  --qp-shade-4: #3F3F3F;  /* dark grey - body text, dark footer */
  --qp-shade-5: #000000;  /* black - footer bottom, social chips */

  /* -- Semantic color tokens ---------------------------------------------- */
  --qp-bg:            var(--qp-shade-1);
  --qp-bg-muted:      var(--qp-shade-2);
  --qp-bg-dark:       var(--qp-shade-4);
  --qp-bg-darker:     var(--qp-shade-5);
  --qp-fg:            var(--qp-shade-4);   /* default body text */
  --qp-fg-muted:      var(--qp-shade-3);   /* meta / secondary */
  --qp-fg-inverse:    var(--qp-shade-1);   /* text on dark/brand */
  --qp-fg-heading:    var(--qp-shade-4);
  --qp-accent:        var(--qp-green);
  --qp-accent-hover:  var(--qp-green-highlight);
  --qp-link:          var(--qp-green);
  --qp-link-hover:    var(--qp-green-highlight);
  --qp-border:        var(--qp-shade-3);
  --qp-border-muted:  var(--qp-shade-2);

  /* -- Font families ------------------------------------------------------ */
  --qp-font-body:    "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --qp-font-display: "Poppins", "Inter", system-ui, sans-serif;

  /* -- Base font sizes (from theme.json + _typography.scss) --------------- */
  --qp-fs-small:   12px;
  --qp-fs-body:    17px;   /* body default */
  --qp-fs-medium:  18px;
  --qp-fs-large:   26px;
  --qp-fs-xlarge:  64px;

  /* Heading scale (from _typography.scss) */
  --qp-fs-h1:  60px;   /* hero title is 64px in layout */
  --qp-fs-h2:  40px;
  --qp-fs-h3:  30px;
  --qp-fs-h4:  24px;
  --qp-fs-h5:  22px;
  --qp-fs-h6:  20px;

  --qp-line-body:    1.6;
  --qp-line-heading: 1.2;

  /* -- Spacing scale (from theme.json custom margins) --------------------- */
  --qp-space-quarter:    5px;
  --qp-space-half:      10px;
  --qp-space-standard:  20px;
  --qp-space-double:    40px;
  --qp-space-triple:    60px;
  --qp-space-quadruple: 80px;
  --qp-space-xl:       120px;
  --qp-space-xxl:      160px;

  /* -- Radii, shadows, layout -------------------------------------------- */
  --qp-radius-sm:   4px;   /* buttons, inputs, pills */
  --qp-radius-md:   8px;   /* cards, comment boxes, featured images */
  --qp-radius-pill: 999px;

  --qp-shadow-header: 0 2px 10px rgba(0, 0, 0, 0.10);
  --qp-shadow-card:   0 2px  8px rgba(0, 0, 0, 0.08);
  --qp-shadow-hover:  0 4px 16px rgba(0, 0, 0, 0.12);
  --qp-shadow-menu:   0 4px 20px rgba(0, 0, 0, 0.15);
  --qp-shadow-image:  0 4px 20px rgba(0, 0, 0, 0.15);

  --qp-header-height: 80px;
  --qp-content-width: 960px;
  --qp-wide-width:   1400px;

  --qp-transition:   all 0.3s ease;
  --qp-overlay-dark: rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   Semantic element styles - apply with class="qp" on a container
   ========================================================================== */

.qp {
  font-family: var(--qp-font-body);
  font-size: var(--qp-fs-body);
  line-height: var(--qp-line-body);
  color: var(--qp-fg);
  background: var(--qp-bg);
}

.qp h1, .qp h2, .qp h3, .qp h4, .qp h5, .qp h6 {
  font-family: var(--qp-font-display);
  font-weight: 700;
  line-height: var(--qp-line-heading);
  color: var(--qp-fg-heading);
  margin: 0 0 var(--qp-space-standard);
  text-wrap: balance;
}
.qp h1 { font-size: var(--qp-fs-h1); }
.qp h2 { font-size: var(--qp-fs-h2); }
.qp h3 { font-size: var(--qp-fs-h3); }
.qp h4 { font-size: var(--qp-fs-h4); }
.qp h5 { font-size: var(--qp-fs-h5); }
.qp h6 { font-size: var(--qp-fs-h6); }

.qp p { margin: 0 0 var(--qp-space-standard); text-wrap: pretty; }

.qp a {
  color: var(--qp-link);
  text-decoration: none;
  transition: var(--qp-transition);
}
.qp a:hover { color: var(--qp-link-hover); }

.qp small, .qp .qp-small { font-size: var(--qp-fs-small); }
.qp .qp-meta  { font-size: var(--qp-fs-small); color: var(--qp-fg-muted); }
.qp .qp-eyebrow {
  font-size: var(--qp-fs-small);
  color: var(--qp-accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

/* Buttons - filled green default, outline variant */
.qp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--qp-space-half);
  min-height: 46px;
  padding: var(--qp-space-half) var(--qp-space-double);
  font-family: var(--qp-font-body);
  font-size: var(--qp-fs-body);
  font-weight: 500;
  color: var(--qp-fg-inverse);
  background: var(--qp-accent);
  border: 2px solid var(--qp-accent);
  border-radius: var(--qp-radius-sm);
  cursor: pointer;
  transition: var(--qp-transition);
  text-decoration: none;
}
.qp-btn:hover { filter: brightness(1.1); color: var(--qp-fg-inverse); }

.qp-btn--outline {
  background: transparent;
  color: var(--qp-accent);
}
.qp-btn--outline:hover {
  background: var(--qp-accent);
  color: var(--qp-fg-inverse);
  filter: none;
}

.qp-btn--on-dark { /* white outline on dark backgrounds */
  background: transparent;
  color: var(--qp-fg-inverse);
  border-color: var(--qp-fg-inverse);
}
.qp-btn--on-dark:hover { background: var(--qp-fg-inverse); color: var(--qp-fg-heading); }