/**
 * LeanCMS v2 — Base Styles
 *
 * Resets, typography defaults, and foundational element styles.
 * Consumes CSS variables defined in config.css.
 */

/* ── Reset ─────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: var(--font-size-base);
    -webkit-text-size-adjust: 100%;
}

/* Smooth in-page scrolling for anchor / nav links. Pure CSS — no JS.
   Gated by prefers-reduced-motion so users who've requested less
   motion get instant jumps (accessibility). The sticky-header offset
   is handled separately by .lcms-anim-on-scroll[id] scroll-margin-top
   in lcms-core.css, so anchored headings don't clip under the header. */
@media ( prefers-reduced-motion: no-preference ) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    font-family: var(--font-body);
    font-weight: var(--font-weight-normal);
    line-height: var(--font-line-height);
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

a {
    color: var(--color-text-link);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-text-link-hover);
}

/* ── Typography ────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-bold);
    line-height: 1.15;
    color: var(--color-text-primary);
    /* Casing token (G36) — brand-config typography.heading_transform. */
    text-transform: var(--heading-transform, none);
}

/* Allow headings inside dark/branded sections to inherit text color */
.text-white h1, .text-white h2, .text-white h3,
.text-white h4, .text-white h5, .text-white h6 {
    color: inherit;
}

h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }
h5 { font-size: var(--font-size-h5); }
h6 { font-size: var(--font-size-h6); }

p {
    margin-bottom: 1em;
}

/* ── Layout Shell ──────────────────────────────────────── */
#main-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#site-content {
    flex: 1;
}

.content-default {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: var(--spacing-section) 20px;
}

/* ── Mobile Typography ─────────────────────────────────── */
@media screen and (max-width: 1023px) {
    h1 { font-size: var(--font-size-h1-mobile); }
    h2 { font-size: var(--font-size-h2-mobile); }
    h3 { font-size: var(--font-size-h3-mobile); }
}

/* ── Component Fixes ──────────────────────────────────── */

/* Badge vertical centering */
.lcms-badge {
    line-height: 1;
    height: 1.5rem;
}

/* ── Gravity Forms DaisyUI Styling ───────────────────── */

/* Form wrapper */
.gform_wrapper {
    text-align: left;
}

.gform_wrapper .gform_heading {
    display: none; /* Hide duplicate title since we have our own */
}

/* Form body - constrain to the form measure (forms.measure -> --lcms-form-measure;
   same token .lcms-form uses, so GF + LCMS forms share one reading width).
   Defaults to the shared article reading column when forms.measure is unset. */
.gform_wrapper .gform_body {
    max-width: var(--lcms-form-measure, var(--lcms-article-measure, 48rem));
    margin: 0 auto;
}

/* Form footer - match body width */
.gform_wrapper .gform_footer {
    max-width: var(--lcms-form-measure, var(--lcms-article-measure, 48rem)) !important;
    margin: 1.5rem auto 0 !important;
    padding: 0 !important;
    text-align: center !important;
}

/* Footer is a special case: a form placed in the site footer (e.g. the
   newsletter signup) should fill its column rather than the 32rem reading
   width used for forms in main content. */
.site-footer .gform_wrapper .gform_body,
.site-footer .gform_wrapper .gform_footer {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Form fields container */
.gform_wrapper .gform_fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Individual field wrapper */
.gform_wrapper .gfield {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Form-control LOOK (inputs, textarea, select, checkbox/radio, labels,
   required marker, validation messages, error summary) is owned by the shared
   substrate `lcms-forms.css` (always loaded; scopes those rules to
   `.gform_wrapper`). Only GF DOM-structural layout + the submit button live
   here. See docs/planning/sprints/forms-inputs-pass.md. */

/* Error-summary inner row (icon + text); colour inherits from the substrate's
   `.gform_validation_errors` box. */
.gform_wrapper .gform_submission_error {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    margin: 0;
}

.gform_wrapper .gform-icon--close {
    width: 1.25rem;
    height: 1.25rem;
}

/* Submit button — consume the SAME brand button tokens as .btn-primary and the
   .lcms-form submit, so GF matches site buttons and tracks brand-config
   `buttons.*` (radius/padding/colours). !important stays — Gravity Forms injects
   its own button styles that need overriding — but the VALUES are now tokens,
   not hardcoded (was: border-radius 9999px, ignoring --button-radius). */
.gform_wrapper .gform_button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: var(--button-padding, 0.75rem 1.75rem) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--btn-primary-color, var(--color-text-on-brand, #fff)) !important;
    background-color: var(--btn-primary-bg, var(--color-brand-primary, oklch(0.6 0.2 250))) !important;
    border: 1px solid var(--btn-primary-border, var(--btn-primary-bg, var(--color-brand-primary, oklch(0.6 0.2 250)))) !important;
    border-radius: var(--button-radius, 9999px) !important;
    box-shadow: var(--shadow-btn, none) !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

.gform_wrapper .gform_button:hover {
    background-color: var(--btn-primary-bg-hover, var(--color-brand-primary-hover, var(--color-brand-primary))) !important;
    color: var(--btn-primary-color-hover, var(--button-color-hover, var(--color-text-on-brand, #fff))) !important;
}