/**
 * Modern Pulses Trading LLC — global design tokens.
 *
 * Gradient note: brand guidelines specify a −45° print angle.
 * CSS uses 135deg, which is the visually equivalent web direction
 * (top-left → bottom-right) and is applied consistently site-wide.
 *
 * Future Arabic stack (not activated): Almarai, Arial, Helvetica, sans-serif
 */

:root {
    /* Brand colours */
    --mpt-color-primary: #00B9B5;
    --mpt-color-primary-dark: #1296B0;
    --mpt-color-primary-light: #20C4F4;
    --mpt-color-deep: #00597D;
    --mpt-color-gray: #939598;
    --mpt-color-gray-light: #D1D3D4;
    --mpt-color-pale-blue: #B9E5FB;
    --mpt-color-lime: #D7DF23;
    --mpt-color-white: #FFFFFF;

    /* Digital UI colours */
    --mpt-color-ink: #123447;
    --mpt-color-heading: #0D3347;
    --mpt-color-body: #435E6C;
    --mpt-color-muted: #6B7F89;
    --mpt-color-text: var(--mpt-color-ink);
    --mpt-color-surface: #FFFFFF;
    --mpt-color-surface-soft: #F4FAFC;
    --mpt-color-surface-blue: #EFF9FE;
    --mpt-color-border: #D9E7EC;
    --mpt-color-success: #238B69;
    --mpt-color-warning: #A66500;
    --mpt-color-error: #B42318;

    --mpt-gradient-primary: linear-gradient(
        135deg,
        #1296B0 0%,
        #00B9B5 50%,
        #20C4F4 100%
    );

    /* Layout */
    --mpt-container-wide: 1320px;
    --mpt-container: 1200px;
    --mpt-container-narrow: 780px;
    --mpt-content-width: var(--mpt-container);
    --mpt-content-width-narrow: var(--mpt-container-narrow);
    --mpt-gutter-desktop: 32px;
    --mpt-gutter-tablet: 24px;
    --mpt-gutter-mobile: 18px;

    /*
     * Canonical breakpoints (document as tokens; media queries keep literals —
     * custom properties are not reliable inside @media in all browsers).
     * sm ≤640 · md ≤768 · lg ≤1024
     */
    --mpt-bp-sm: 640px;
    --mpt-bp-md: 768px;
    --mpt-bp-lg: 1024px;
    --mpt-touch-min: 44px;

    /* Spacing scale */
    --mpt-space-1: 4px;
    --mpt-space-2: 8px;
    --mpt-space-3: 12px;
    --mpt-space-4: 16px;
    --mpt-space-5: 24px;
    --mpt-space-6: 32px;
    --mpt-space-7: 48px;
    --mpt-space-8: 64px;
    --mpt-space-9: clamp(4rem, 6vw, 5.5rem);
    --mpt-space-10: clamp(5rem, 8vw, 7rem);
    --mpt-section-spacing: var(--mpt-space-8);
    --mpt-section-spacing-mobile: var(--mpt-space-7);

    /* Header */
    --mpt-utility-height: 36px;
    --mpt-header-height: 96px;
    --mpt-header-height-sticky: 82px;
    --mpt-header-offset: calc(var(--mpt-utility-height) + var(--mpt-header-height));

    /* Radii */
    --mpt-radius-sm: 6px;
    --mpt-radius-button: 8px;
    --mpt-radius-card: 14px;
    --mpt-radius-panel: 20px;
    --mpt-radius-pill: 999px;
    --mpt-radius: var(--mpt-radius-card);

    /* Shadows */
    --mpt-shadow-soft: 0 1px 2px rgba(13, 51, 71, 0.06);
    --mpt-shadow-card: 0 4px 14px rgba(13, 51, 71, 0.07);
    --mpt-shadow-header: 0 1px 0 rgba(217, 231, 236, 0.9), 0 4px 12px rgba(13, 51, 71, 0.05);
    --mpt-focus-outline: 0 0 0 3px rgba(0, 185, 181, 0.45);

    /* Typography — Avenir LT Std only when licensed files are supplied */
    --mpt-font-sans: "Avenir Next", Avenir, "Segoe UI", Arial, Helvetica, sans-serif;
    --mpt-font-display: "Manrope", "Avenir Next", Avenir, "Segoe UI", sans-serif;
    --mpt-font-arabic: Almarai, Arial, Helvetica, sans-serif;
    --mpt-font-size-xs: 0.75rem;
    --mpt-font-size-sm: 0.875rem;
    --mpt-font-size-base: 1rem;
    --mpt-font-size-md: clamp(1.05rem, 1.3vw, 1.2rem);
    --mpt-font-size-lg: clamp(1.2rem, 1.8vw, 1.5rem);
    --mpt-font-size-xl: clamp(1.45rem, 2.4vw, 2.15rem);
    --mpt-font-size-2xl: clamp(2rem, 3.6vw, 3.35rem);
    --mpt-font-size-3xl: clamp(2.35rem, 5vw, 4.75rem);
    --mpt-font-size-4xl: var(--mpt-font-size-3xl);
    --mpt-line-height-tight: 1.1;
    --mpt-line-height-heading: 1.16;
    --mpt-line-height-base: 1.65;
    --mpt-line-height-relaxed: 1.75;

    /* Motion */
    --mpt-transition: 180ms ease;
    --mpt-transition-slow: 220ms ease;
}

body.mpt-theme {
    margin: 0;
    font-family: var(--mpt-font-sans);
    font-size: var(--mpt-font-size-base);
    line-height: var(--mpt-line-height-base);
    color: var(--mpt-color-body);
    background-color: var(--mpt-color-surface);
    overflow-x: clip;
}

html {
    box-sizing: border-box;
    scroll-behavior: smooth;
    overflow-x: clip;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body.admin-bar .mpt-site-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .mpt-site-header {
        top: 46px;
    }
}

h1, h2, h3, h4, h5, h6 {
    color: var(--mpt-color-heading);
    font-family: var(--mpt-font-sans);
    line-height: var(--mpt-line-height-heading);
    margin: 0 0 var(--mpt-space-4);
}

h1 { font-size: var(--mpt-font-size-3xl); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: var(--mpt-font-size-2xl); font-weight: 700; letter-spacing: -0.015em; }
h3 { font-size: var(--mpt-font-size-xl); font-weight: 700; }
h4 { font-size: var(--mpt-font-size-lg); font-weight: 700; }

p { margin: 0 0 var(--mpt-space-4); }

a {
    color: var(--mpt-color-primary-dark);
    text-decoration: none;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
    transition: color var(--mpt-transition);
}

a:hover { color: var(--mpt-color-deep); }

/**
 * Hello Elementor reset.css hard-codes pink accent (#c36) on links and
 * native buttons. Override those defaults so MPT chrome stays on-brand.
 */
body.mpt-theme a {
    color: var(--mpt-color-primary-dark);
    text-decoration: none;
}

body.mpt-theme a:hover,
body.mpt-theme a:focus,
body.mpt-theme a:active {
    color: var(--mpt-color-deep);
}

body.mpt-theme button,
body.mpt-theme [type="button"],
body.mpt-theme [type="reset"],
body.mpt-theme [type="submit"] {
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: var(--mpt-radius-button);
    color: inherit;
}

body.mpt-theme button:hover,
body.mpt-theme button:focus,
body.mpt-theme button:active,
body.mpt-theme [type="button"]:hover,
body.mpt-theme [type="button"]:focus,
body.mpt-theme [type="button"]:active,
body.mpt-theme [type="reset"]:hover,
body.mpt-theme [type="reset"]:focus,
body.mpt-theme [type="reset"]:active,
body.mpt-theme [type="submit"]:hover,
body.mpt-theme [type="submit"]:focus,
body.mpt-theme [type="submit"]:active {
    background-color: transparent;
    color: inherit;
    text-decoration: none;
}

:focus-visible {
    outline: none;
    box-shadow: var(--mpt-focus-outline);
}

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

.mpt-container,
.mpt-container--wide,
.mpt-container--narrow {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--mpt-gutter-desktop);
}

.mpt-container { max-width: var(--mpt-container); }
.mpt-container--wide { max-width: var(--mpt-container-wide); }
.mpt-container--narrow { max-width: var(--mpt-container-narrow); }

.screen-reader-text,
.mpt-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link:focus,
.skip-link:focus-visible {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 100000;
    width: auto;
    height: auto;
    clip: auto;
    padding: 0.75rem 1rem;
    background: var(--mpt-color-deep);
    color: var(--mpt-color-white);
    border-radius: var(--mpt-radius-sm);
}

#content:focus {
    outline: none;
}

@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;
    }
}