/**
 * ISEH global design system
 * Source of truth: approved Figma + ISEH frontend build spec.
 * Keep page-specific styling out of this file.
 */

:root {
    /* Brand colors */
    --iseh-navy: #0D1F3C;
    --iseh-gold: #C9A84C;
    --iseh-alpine: #F5F4F0;
    --iseh-white: #FFFFFF;
    --iseh-dark: #101722;
    --iseh-text-secondary: #4F535B;

    /* Typography */
    --iseh-font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
    --iseh-font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --iseh-h1-size: 72px;
    --iseh-h1-line: 80px;
    --iseh-h2-size: 56px;
    --iseh-h2-line: 60px;
    --iseh-h3-size: 38px;
    --iseh-h3-line: 40px;
    --iseh-h4-size: 26px;
    --iseh-h4-line: 32px;
    --iseh-lead-size: 20px;
    --iseh-lead-line: 30px;
    --iseh-body-size: 16px;
    --iseh-body-line: 22px;
    --iseh-small-size: 14px;
    --iseh-small-line: 21px;
    --iseh-eyebrow-size: 14px;
    --iseh-eyebrow-line: 20px;

    /* Layout */
    --iseh-container: 1296px;
    --iseh-page-pad: 72px;
    --iseh-grid-gap: 24px;
    --iseh-section-space: 100px;

    /* Content rhythm */
    --iseh-gap-eyebrow-heading: 20px;
    --iseh-gap-heading-body: 20px;
    --iseh-gap-body-actions: 32px;
    --iseh-gap-intro-content: 60px;
    --iseh-gap-actions: 16px;

    /* Components */
    --iseh-radius: 6px;
    --iseh-button-height: 52px;
    --iseh-button-font-size: 13px;
    --iseh-button-line: 16px;
}

/* ---------- Base typography ---------- */

html {
    font-size: 16px;
}

body {
    font-family: var(--iseh-font-body);
    font-size: var(--iseh-body-size);
    line-height: var(--iseh-body-line);
    font-weight: 400;
    color: var(--iseh-dark);
    background: var(--iseh-white);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
.elementor-heading-title {
    font-family: var(--iseh-font-display);
    font-weight: 400;
    color: inherit;
}

h1,
.elementor-widget-heading h1.elementor-heading-title {
    font-size: var(--iseh-h1-size);
    line-height: var(--iseh-h1-line);
}

h2,
.elementor-widget-heading h2.elementor-heading-title {
    font-size: var(--iseh-h2-size);
    line-height: var(--iseh-h2-line);
}

h3,
.elementor-widget-heading h3.elementor-heading-title {
    font-size: var(--iseh-h3-size);
    line-height: var(--iseh-h3-line);
}

h4,
.elementor-widget-heading h4.elementor-heading-title {
    font-size: var(--iseh-h4-size);
    line-height: var(--iseh-h4-line);
}

p,
li,
input,
textarea,
select,
button {
    font-family: var(--iseh-font-body);
}

p,
li,
.elementor-widget-text-editor p,
.elementor-widget-text-editor li {
    font-size: var(--iseh-body-size);
    line-height: var(--iseh-body-line);
}

.iseh-lead {
    font-family: var(--iseh-font-body);
    font-size: var(--iseh-lead-size);
    line-height: var(--iseh-lead-line);
    font-weight: 400;
}

.iseh-small {
    font-family: var(--iseh-font-body);
    font-size: var(--iseh-small-size);
    line-height: var(--iseh-small-line);
    font-weight: 400;
}

.iseh-eyebrow {
    font-family: var(--iseh-font-body);
    font-size: var(--iseh-eyebrow-size);
    line-height: var(--iseh-eyebrow-line);
    font-weight: 600;
}

/* ---------- Layout primitives ---------- */

.iseh-container {
    width: min(
        calc(100% - (var(--iseh-page-pad) * 2)),
        var(--iseh-container)
    );
    margin-inline: auto;
}

.iseh-section {
    padding-block: var(--iseh-section-space);
}

.iseh-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--iseh-grid-gap);
}

.iseh-stack {
    display: flex;
    flex-direction: column;
}

.iseh-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--iseh-gap-actions);
}

/* ---------- Reusable content rhythm ---------- */

.iseh-intro .iseh-eyebrow + h1,
.iseh-intro .iseh-eyebrow + h2,
.iseh-intro .iseh-eyebrow + h3 {
    margin-top: var(--iseh-gap-eyebrow-heading);
}

.iseh-intro h1 + p,
.iseh-intro h2 + p,
.iseh-intro h3 + p,
.iseh-intro h4 + p {
    margin-top: var(--iseh-gap-heading-body);
}

.iseh-intro p + .iseh-actions {
    margin-top: var(--iseh-gap-body-actions);
}

/* ---------- Buttons / controls ---------- */

.iseh-button,
.elementor-button,
.elementor-widget-button .elementor-button {
    min-height: var(--iseh-button-height);
    border-radius: var(--iseh-radius);
    font-family: var(--iseh-font-body);
    font-size: var(--iseh-button-font-size);
    line-height: var(--iseh-button-line);
    font-weight: 700;
}

button,
a,
input,
textarea,
select {
    -webkit-tap-highlight-color: transparent;
}

:focus-visible {
    outline: 2px solid var(--iseh-gold);
    outline-offset: 3px;
}

/* ---------- Media ---------- */

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

.iseh-media-radius {
    border-radius: var(--iseh-radius);
    overflow: hidden;
}

.iseh-full-bleed {
    border-radius: 0;
}

/* ---------- 1200–1439: fluid desktop ---------- */

@media (min-width: 1200px) and (max-width: 1439px) {
    :root {
        --iseh-page-pad: 48px;
    }
}

/* ---------- Tablet: 768–1199 ---------- */

@media (min-width: 768px) and (max-width: 1199px) {
    :root {
        --iseh-h1-size: 56px;
        --iseh-h1-line: 60px;
        --iseh-h2-size: 44px;
        --iseh-h2-line: 48px;
        --iseh-h3-size: 32px;
        --iseh-h3-line: 36px;
        --iseh-h4-size: 24px;
        --iseh-h4-line: 30px;
        --iseh-lead-size: 18px;
        --iseh-lead-line: 28px;
        --iseh-body-size: 16px;
        --iseh-body-line: 24px;

        --iseh-page-pad: 40px;
        --iseh-grid-gap: 20px;
        --iseh-section-space: 80px;

        --iseh-gap-eyebrow-heading: 16px;
        --iseh-gap-heading-body: 16px;
        --iseh-gap-body-actions: 28px;
    }

    .iseh-grid {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }
}

/* ---------- Mobile: 0–767 ---------- */

@media (max-width: 767px) {
    :root {
        --iseh-h1-size: 44px;
        --iseh-h1-line: 48px;
        --iseh-h2-size: 36px;
        --iseh-h2-line: 40px;
        --iseh-h3-size: 28px;
        --iseh-h3-line: 32px;
        --iseh-h4-size: 24px;
        --iseh-h4-line: 30px;
        --iseh-lead-size: 18px;
        --iseh-lead-line: 28px;
        --iseh-body-size: 16px;
        --iseh-body-line: 24px;

        --iseh-page-pad: 20px;
        --iseh-grid-gap: 16px;
        --iseh-section-space: 64px;

        --iseh-gap-eyebrow-heading: 16px;
        --iseh-gap-heading-body: 16px;
        --iseh-gap-body-actions: 24px;
        --iseh-gap-actions: 12px;
    }

    .iseh-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 479px) {
    .iseh-actions--stack-mobile {
        flex-direction: column;
    }

    .iseh-actions--stack-mobile > * {
        width: 100%;
    }
}

/* Respect reduced-motion preferences from the start. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}