/* QCC Design System — compiled token CSS for WordPress.
   Enqueued on both frontend and in the block editor.
   Aktiv Grotesk is loaded via Adobe Typekit (see functions.php). */

/* ── Font alias ─────────────────────────────────── */
:root {
  --font-aktiv: "aktiv-grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-sans: var(--font-aktiv);
}

/* ── Colors ─────────────────────────────────────── */
:root {
  --qcc-clay:         #c26f66;
  --qcc-rust:         #7d3b2f;
  --qcc-teal:         #1d535b;
  --qcc-terracotta:   #cd6153;
  --qcc-rust-deep:    #70261d;
  --qcc-rust-mid:     #71271e;
  --qcc-teal-700:     #005563;
  --qcc-teal-900:     #003d48;
  --qcc-rust-light:   #D49A94;
  --qcc-clay-light:   #D9B6B1;
  --qcc-slate:        #95b7c2;
  --qcc-blush:        #f8e8e5;
  --qcc-blush-pink:   #ffcdc4;
  --qcc-white:        #ffffff;
  --qcc-black:        #000000;
  --qcc-ink:          #180104;
  --qcc-ink-soft:     #1f1c1d;
  --qcc-off-white:    #f5f5f5;
  --qcc-gray:         #9b9b9b;
  --qcc-line:         #d9d9d9;
  --qcc-error:        #ed1a3b;

  --color-bg:            var(--qcc-white);
  --color-bg-blush:      var(--qcc-blush);
  --color-surface:       var(--qcc-white);
  --color-surface-dark:  var(--qcc-teal-900);
  --text-body:           var(--qcc-ink);
  --text-muted:          color-mix(in srgb, var(--qcc-ink) 60%, transparent);
  --text-inverse:        var(--qcc-white);
  --text-inverse-soft:   var(--qcc-off-white);
  --text-accent:         var(--qcc-terracotta);
  --text-link:           var(--qcc-rust);
  --color-primary:       var(--qcc-terracotta);
  --color-primary-deep:  var(--qcc-rust-deep);
  --color-secondary:     var(--qcc-teal);
  --border-subtle:       var(--qcc-line);
  --border-strong:       var(--qcc-ink);

  --grad-terracotta: linear-gradient(219.65deg, #cd6153 12.94%, #70261d 87.06%);
  --grad-teal:       linear-gradient(225.6deg,  #005563 15.24%, #003d48 84.76%);
  --grad-clay:       linear-gradient(180deg,    #7d3b2f 0%,     #c26f66 100%);
  --grad-soft-hero:  linear-gradient(180deg,    #da8779 0%, #e9b8af 30.77%, #f9e9e5 49.9%, #ffffff 80.58%);

  /* Inline SVG fills (currentColor targets) */
  --svg-pattern-fill:        var(--text-inverse);
  --svg-pattern-fill-accent: var(--qcc-slate);
  --svg-icon-fill:           var(--qcc-terracotta);
}

/* ── Typography ─────────────────────────────────── */
:root {
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-xbold:    800;

  --fs-display:  80px;
  --fs-h1:       64px;
  --fs-h2:       40px;
  --fs-h3:       30px;
  --fs-h4:       25px;
  --fs-lead:     24px;
  --fs-body:     18px;
  --fs-body-md:  18px;
  --fs-body-sm:  16px;
  --fs-label:    18px;
  --fs-button:   16px;
  --fs-nav:      14px;
  --fs-caption:  14px;

  --lh-tight:    1.0;
  --lh-snug:     1.1;
  --lh-normal:   1.25;
  --lh-heading:  1.375;
  --lh-body:     1.55;

  --ls-tight:   -0.02em;
  --ls-heading:  0.01em;
  --ls-body:     0.04em;
  --ls-wide:     0.08em;
}

/* ── Spacing / layout / radii / shadows / motion ── */
:root {
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   40px;
  --space-8:   48px;
  --space-9:   64px;
  --space-10:  80px;
  --space-11:  96px;
  --space-12:  120px;
  --space-13:  144px;
  --space-14:  168px;
  --space-15:  192px;
  --space-16:  216px;
  --space-17:  240px;
  --space-18:  264px;
  --space-19:  288px;
  --space-20:  312px;

  --container-max: 1272px;
  --page-gutter:   120px;

  /* Statement panel overlap — shared by hero clearance + statement pull-up */
  --qcc-statement-overlap:        150px;
  --qcc-statement-overlap-mobile: 48px;
  --qcc-statement-overlap-gap:        var(--space-6);
  --qcc-statement-overlap-gap-mobile: var(--space-5);

  --radius-xs:   2px;
  --radius-sm:   5px;
  --radius-img:  10px;
  --radius-pill: 999px;

  --shadow-cta:  0px 12px 20px -5px rgba(0,0,0,0.25);
  --shadow-card: 0px 8px 24px -8px rgba(24,1,4,0.18);
  --shadow-soft: 0px 2px 8px rgba(24,1,4,0.08);

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   150ms;
  --dur-base:   240ms;
  --dur-slow:   400ms;
}

/* ── Bridge: alias WP-generated vars back to QCC names ── */
:root {
  --radius-xs:    var(--wp--custom--radius--xs,   2px);
  --radius-sm:    var(--wp--custom--radius--sm,   5px);
  --radius-img:   var(--wp--custom--radius--img,  10px);
  --radius-pill:  var(--wp--custom--radius--pill, 999px);
  --shadow-cta:   var(--wp--custom--shadow--cta,  0px 12px 20px -5px rgba(0,0,0,0.25));
  --shadow-card:  var(--wp--custom--shadow--card, 0px 8px 24px -8px rgba(24,1,4,0.18));
  --shadow-soft:  var(--wp--custom--shadow--soft, 0px 2px 8px rgba(24,1,4,0.08));
  --ease-standard: var(--wp--custom--motion--ease, cubic-bezier(0.4, 0, 0.2, 1));
  --dur-fast:     var(--wp--custom--motion--fast, 150ms);
  --dur-base:     var(--wp--custom--motion--base, 240ms);
  --dur-slow:     var(--wp--custom--motion--slow, 400ms);
}

/* ── Reset Block Margins ─────────────────────────────────── */
.qcc-page-content,
/* .entry-content > div,
.entry-content > section, */
footer.wp-block-template-part {
    margin: 0;
}

/* ── Shared block utilities ─────────────────────── */
.qcc-section__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--page-gutter);
}

.qcc-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--qcc-terracotta);
  margin: 0;
}

.qcc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-button);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard);
}

.qcc-btn--primary {
  padding: 17px 26px;
  min-height: 52px;
  border-radius: var(--radius-pill);
  background: var(--qcc-teal);
  color: #fff;
  border: none;
}
.qcc-btn--primary:hover { background: var(--qcc-rust); }

.qcc-btn--outline {
  padding: 16px 26px;
  min-height: 52px;
  border-radius: var(--radius-pill);
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.85);
}
.qcc-btn--outline:hover { background: #fff; color: var(--qcc-rust); }

.qcc-btn--rect {
  padding: 11px 22px;
  min-height: 40px;
  border-radius: var(--radius-xs);
  background: var(--qcc-teal);
  color: #fff;
  border: none;
}
.qcc-btn--rect:hover { background: var(--qcc-rust); }

.qcc-btn--teal-outline {
  padding: 16px 26px;
  min-height: 52px;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--qcc-teal);
  border: 1.5px solid var(--qcc-teal);
}
.qcc-btn--teal-outline:hover { background: var(--qcc-teal); color: #fff; }

@media (max-width: 1024px) {
  :root {
    --page-gutter: 32px;
  }
}

@media (max-width: 767px) {
  :root {
    --fs-h1: 40px;
    --wp--preset--font-size--h-1: 40px;
    --page-gutter: 16px;
    --wp--style--root--padding-left: 16px;
    --wp--style--root--padding-right: 16px;
  }

  :where(h1, .has-h-1-font-size) {
    font-size: var(--fs-h1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .qcc-btn { transition: none; }
}