/**
 * Global resets and base typography: element-level rules with no class selector
 * (heading type scale, body/html reset, focus-visible ring, reduced-motion support).
 */

/* Default type scale for h1-h6, matched to sizes already live elsewhere (H1 ~
   .hero-title, H2 ~ .section-title, H3 ~ .field-card-title). Class-based title
   selectors always win over this element-only rule. */
body h1, body h2, body h3, body h4, body h5, body h6 {
    /* "body h2" bumps specificity just enough to beat Blocksy's bare-element rule,
       without going so high it clobbers component overrides too. */
    font-family: var(--vosges-font-display);
}

body h1 {
    font-size: clamp(2.1rem, 5vw, 3.4rem);
    line-height: 1.2;
}

body h2 {
    font-size: clamp(1.7rem, 4vw, 2.3rem);
    line-height: 1.25;
}

body h3 {
    font-size: clamp(1.3rem, 3vw, 1.4rem);
    line-height: 1.3;
}

body h4 {
    font-size: clamp(1.05rem, 2.5vw, 1.15rem);
    line-height: 1.35;
}

body h5 {
    font-size: 1rem;
    line-height: 1.4;
}

body h6 {
    font-size: 0.9rem;
    line-height: 1.45;
}
body p {
    font-size: clamp(19px, 2.5vw, 19.5px);
    line-height: 1.7;
}
body,
html {
    margin: 0;
    padding: 0;
    font-family: var(--vosges-font-body);
    color: #0F2C4C;
    background-color: var(--rect-blue-1);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* No overflow-x:hidden here — breaks position:sticky (see .sc-sticky-sidebar).
       Mobile-only version below is fine. */
}

@media (max-width: 768px) {
    html, body {
        overflow-x: hidden;
    }
}

button, a.btn, .btn-hero-primary-v1, .btn-hero-secondary-v1, .btn-hero-primary-v2, .btn-hero-secondary-v2, .btn-slide-primary, .btn-slide-secondary, .btn-nav-quote, .btn-footer-contact {
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

button:active, a.btn:active, .btn-hero-primary-v1:active, .btn-hero-secondary-v1:active, .btn-hero-primary-v2:active, .btn-hero-secondary-v2:active, .btn-slide-primary:active, .btn-slide-secondary:active {
    transform: scale(0.98) !important;
}

/* Visible brand focus ring (design system §10 requires one; the browser default
   was being lost against the blue surfaces). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--rect-blue-4);
    outline-offset: 2px;
    box-shadow: var(--focus-ring);
    border-radius: 4px;
}

/* On dark blue/navy blocks the ring flips to the light tint to stay visible */
.hero-section a:focus-visible,
.hero-section button:focus-visible,
.about-section a:focus-visible,
.derivation-footer a:focus-visible,
.derivation-footer button:focus-visible {
    outline-color: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(138, 198, 244, 0.55);
}

.page-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    padding-top: var(--header-h);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .hero-state,
    .hero-quadrant img,
    .product-card,
    .field-card,
    .hero-cta-btn {
        transition: none !important;
        animation: none !important;
    }
}