/* ==========================================================================
   Quantic Solutions — Site-Wide Typography & Spacing Standard
   Loaded LAST from header.php so it wins the cascade against inline
   <style> blocks in every partial. Uses !important sparingly and only
   on the properties that need to normalise (font-family, line-height,
   base paragraph rhythm). Font-size, colour and layout in intentional
   custom sections are left alone.
   ========================================================================== */

/* -------- 1. Design tokens ------------------------------------------------ */
:root {
    /* Fonts — Plus Jakarta Sans is loaded via Google Fonts in header.php,
       with a robust system fallback stack. */
    --qs-font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
                    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Colour palette (used where inline styles don't already set colour) */
    --qs-text:         #10102a;
    --qs-text-muted:   #4a4a5e;
    --qs-text-soft:    #6b6b7e;
    --qs-brand:        #ff6600;
    --qs-brand-hover:  #b50000;

    /* Line-height scale */
    --qs-leading-tight:  1.25;
    --qs-leading-snug:   1.4;
    --qs-leading-normal: 1.6;
    --qs-leading-loose:  1.75;

    /* Vertical rhythm (used by section utility, not forced globally) */
    --qs-space-section-y: clamp(48px, 6vw, 96px);
}

/* -------- 2. Font family & base rendering --------------------------------- */
html, body {
    font-family: var(--qs-font-sans) !important;
    font-size: 16px;
    line-height: var(--qs-leading-normal) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* All headings share the same family and rhythm.
   Font-family & line-height are forced. Font-size is applied to bare
   tags so unstyled pages get a proper scale; section-specific classes
   like .cm-h2 / .contract-tit / .h1-doc-subtit still win by specificity. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--qs-font-sans) !important;
    line-height: var(--qs-leading-tight) !important;
    margin-top: 0;
    margin-bottom: 0.6em;
    letter-spacing: -0.015em;
    color: inherit;   /* inherit from parent so dark-bg sections stay light and light-bg sections stay dark */
    font-weight: 700;
}

/* Modular scale — responsive via clamp(min, preferred-vw, max) */
h1 { font-size: clamp(2rem,   4vw,   3rem);      /* 32 → 48px */ font-weight: 800; }
h2 { font-size: clamp(1.75rem, 3vw,  2.5rem);   /* 28 → 40px */ font-weight: 800; }
h3 { font-size: clamp(1.375rem, 2.2vw, 1.75rem);/* 22 → 28px */ font-weight: 700; }
h4 { font-size: 1.25rem;   /* 20px */ font-weight: 700; }
h5 { font-size: 1.125rem;  /* 18px */ font-weight: 600; }
h6 {
    font-size: 0.875rem;   /* 14px */
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Bootstrap 4 heading-utility classes get the same scale */
.h1 { font-size: clamp(2rem,   4vw,   3rem); }
.h2 { font-size: clamp(1.75rem, 3vw,  2.5rem); }
.h3 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); }
.h4 { font-size: 1.25rem; }
.h5 { font-size: 1.125rem; }
.h6 { font-size: 0.875rem; }

/* Paragraphs — one line-height, one bottom margin, one letter-spacing */
p {
    font-family: var(--qs-font-sans) !important;
    line-height: var(--qs-leading-normal) !important;
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
    letter-spacing: -0.01em;
}

/* Lists */
ul, ol {
    font-family: var(--qs-font-sans) !important;
    line-height: var(--qs-leading-normal) !important;
    margin-top: 0;
    margin-bottom: 1rem;
}

ul li, ol li {
    margin-bottom: 0.35rem;
}

/* Links inherit the family; colour is only forced where inline hasn't set one */
a {
    font-family: inherit;
    transition: color .2s ease;
}

/* Form controls — no more random default browser fonts */
input, select, textarea, button {
    font-family: var(--qs-font-sans) !important;
    line-height: var(--qs-leading-normal);
}

/* -------- 3. Section utility (opt-in, doesn't force existing sections) --- */
.qs-section {
    padding-top: var(--qs-space-section-y);
    padding-bottom: var(--qs-space-section-y);
}

/* -------- 5. Guard against legacy style.css leaking to main pages -------- */
/* style.css (the Stripe-checkout file) sets body{display:flex;height:100vh}
   and section{width:400px;height:112px;display:flex}. If any page ever
   accidentally links style.css, this override resets those to sane defaults
   for content pages. */
body {
    display: block !important;
    height: auto !important;
    background: #ffffff;
}

section {
    display: block;
    width: auto;
    height: auto;
    border-radius: 0;
}

/* -------- 6. Orange primary button — larger, consistent size site-wide -- */
/* .btn-orange is defined per-partial (home-banner, workflow-banner, etc.).
   This bump gives every orange button a slightly larger, more legible text
   size without touching all seven inline definitions. */
.btn-orange {
    font-size: 19px !important;
    font-weight: 700 !important;
    letter-spacing: .3px;
}

@media (max-width: 767.98px) {
    .btn-orange {
        font-size: 16px !important;
    }
}

/* -------- 7. Consistent focus outline on interactive elements ------------ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--qs-brand);
    outline-offset: 2px;
}

/* -------- 8. Respect reduced-motion preference --------------------------- */
@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;
    }
}