@layer m5.reset, m5.tokens, m5.base, m5.layout, m5.components, m5.utilities, m5.overrides;

@layer m5.tokens {
    :root {
        --m5-color-primary: #C00000;
        --m5-color-secondary: #000000;
        --m5-color-surface: #ffffff;
        --m5-color-surface-muted: #f8fafc;
        --m5-color-text: #172033;
        --m5-color-text-inverse: #ffffff;
        --m5-color-border: #d8dee9;
        --m5-focus-color: #C00000;
        --m5-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        --m5-step--1: clamp(.875rem, .84rem + .15vw, .95rem);
        --m5-step-0: clamp(1rem, .95rem + .2vw, 1.125rem);
        --m5-step-1: clamp(1.25rem, 1.1rem + .5vw, 1.6rem);
        --m5-step-2: clamp(1.65rem, 1.3rem + 1.2vw, 2.5rem);
        --m5-step-3: clamp(2.1rem, 1.45rem + 2.2vw, 3.8rem);
        --m5-space-1: clamp(.5rem, .4rem + .25vw, .75rem);
        --m5-space-2: clamp(.75rem, .6rem + .4vw, 1.1rem);
        --m5-space-3: clamp(1rem, .75rem + .8vw, 1.75rem);
        --m5-space-4: clamp(1.5rem, 1rem + 1.5vw, 3rem);
        --m5-space-5: clamp(2.5rem, 1.5rem + 3vw, 6rem);
        --m5-container-inline: clamp(1rem, 3vw, 3rem);
        --m5-content-max: 76rem;
        --m5-reading-max: 68ch;
        --m5-radius: .35rem;
        --m5-header-height: 88px;
        --m5-header-height-tablet: 76px;
        --m5-header-height-mobile: 68px;
        --m5-shadow-1: 0 .5rem 1.5rem rgb(15 23 42 / .09);
    }
}

@layer m5.reset {
    *, *::before, *::after { box-sizing: border-box; }
    img, picture, svg, video { display: block; max-width: 100%; }
    img, video { height: auto; }
    button, input, textarea, select { font: inherit; }
    :target { scroll-margin-block: calc(var(--m5-header-height) + 1rem); }
}

@layer m5.base {
    html { overflow-x: clip; text-size-adjust: 100%; }
    body { color: var(--m5-color-text); font-family: var(--m5-font-sans); font-size: var(--m5-step-0); line-height: 1.6; }
    h1, h2, h3, h4 { line-height: 1.12; text-wrap: balance; overflow-wrap: anywhere; }
    h1 { font-size: var(--m5-step-3); }
    h2 { font-size: var(--m5-step-2); }
    h3 { font-size: var(--m5-step-1); }
    p, li { text-wrap: pretty; }
    a { text-underline-offset: .16em; }
    :focus-visible { outline: 3px solid var(--m5-focus-color); outline-offset: 3px; }
    [hidden] { display: none !important; }
}

@layer m5.layout {
    .m5-container {
        width: min(calc(100% - var(--m5-container-inline) - var(--m5-container-inline)), var(--m5-content-max));
        margin-inline: auto;
    }

    .m5-reading-width { max-width: var(--m5-reading-max); }

    .m5-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
        gap: var(--m5-space-3);
    }

    .m5-cluster {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--m5-space-2);
    }

    .m5-stack > * + * { margin-block-start: var(--m5-space-3); }

    .m5-section {
        padding-block: var(--m5-space-5);
        padding-inline-start: env(safe-area-inset-left);
        padding-inline-end: env(safe-area-inset-right);
    }

    .m5-full-height {
        min-height: 100vh;
        min-height: 100svh;
    }

    @supports (min-height: 100dvh) {
        .m5-dynamic-full-height { min-height: 100dvh; }
    }
}

@layer m5.components {
    .m5-site-logo,
    .site-logo img,
    .navigation-branding img {
        width: auto !important;
        height: auto !important;
        max-width: min(100%, 320px);
        max-height: calc(var(--m5-header-height) - 1rem);
        object-fit: contain;
        object-position: center;
    }

    .m5-responsive-media {
        width: 100%;
        aspect-ratio: var(--m5-media-ratio, 16 / 9);
        object-fit: var(--m5-media-fit, cover);
        object-position: var(--m5-media-position, 50% 50%);
        background: var(--m5-color-surface-muted);
    }

    .m5-card {
        padding: var(--m5-space-3);
        border: 1px solid var(--m5-color-border);
        border-radius: var(--m5-radius);
        background: var(--m5-color-surface);
        box-shadow: var(--m5-shadow-1);
        container-type: inline-size;
    }

    .m5-button,
    button.m5-button,
    a.m5-button {
        display: inline-flex;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        border: 1px solid transparent;
        border-radius: var(--m5-radius);
        padding: .7rem 1.1rem;
        background: var(--m5-color-primary);
        color: var(--m5-color-text-inverse);
        max-width: 100%;
        font-weight: 700;
        text-align: center;
        text-decoration: none;
        overflow-wrap: anywhere;
    }

    .m5-header-is-sticky .site-header {
        position: sticky;
        top: var(--wp-admin--admin-bar--height, 0px);
        z-index: 100;
    }

    .m5-header-is-transparent .site-header {
        position: absolute;
        inset: 0 0 auto;
        z-index: 100;
        background: transparent;
    }

    @container (min-width: 34rem) {
        .m5-card[data-layout="horizontal"] {
            display: grid;
            grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
            align-items: center;
        }
    }
}

@layer m5.utilities {
    .m5-visually-hidden {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    .m5-visually-hidden:focus,
    .m5-visually-hidden:focus-visible {
        z-index: 100000 !important;
        inset: max(.5rem, env(safe-area-inset-top)) auto auto max(.5rem, env(safe-area-inset-left)) !important;
        width: auto !important;
        height: auto !important;
        padding: .75rem 1rem !important;
        margin: 0 !important;
        overflow: visible !important;
        clip: auto !important;
        white-space: normal !important;
        border: 2px solid currentColor !important;
        background: #ffffff !important;
        color: #111827 !important;
    }

    .m5-no-overflow { overflow-wrap: anywhere; min-width: 0; }
    .m5-text-center { text-align: center; }
}

@layer m5.overrides {
    @media (max-width: 48rem) {
        :root { --m5-header-height: var(--m5-header-height-mobile); }
        .m5-site-logo,
        .site-logo img,
        .navigation-branding img { max-width: min(70vw, 250px); }
    }

    @media (prefers-reduced-motion: reduce) {
        html:focus-within { scroll-behavior: auto; }
        *, *::before, *::after {
            scroll-behavior: auto !important;
            animation-duration: .01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: .01ms !important;
        }
    }

    @media (forced-colors: active) {
        .m5-button { border-color: ButtonText; }
    }
}

@layer m5.components {
    .m5-topbar {
        background: var(--m5-color-secondary);
        color: var(--m5-color-text-inverse);
        font-size: var(--m5-step--1);
    }

    .m5-topbar__inner {
        display: flex;
        min-height: 44px;
        align-items: center;
        justify-content: space-between;
        gap: var(--m5-space-2);
        padding-block: .35rem;
    }

    .m5-topbar__contact,
    .m5-topbar__actions,
    .m5-social-links {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--m5-space-2);
    }

    .m5-topbar a { color: inherit; overflow-wrap: anywhere; }
    .m5-topbar__button { min-height: 36px; padding: .35rem .8rem; }

    .m5-footer-panels {
        padding-block: var(--m5-space-5);
        background: var(--m5-color-secondary);
        color: var(--m5-color-text-inverse);
    }

    .m5-footer-panels__grid {
        display: grid;
        grid-template-columns: repeat(var(--m5-footer-columns, 3), minmax(0, 1fr));
        gap: var(--m5-space-4);
    }

    .m5-footer-panel,
    .m5-footer-contact,
    .m5-footer-panels .m5-social-links {
        display: grid;
        align-content: start;
        gap: var(--m5-space-1);
        min-width: 0;
        font-style: normal;
        overflow-wrap: anywhere;
    }

    .m5-footer-panels a { color: inherit; }
    .m5-footer-logo { width: auto; max-width: min(240px, 100%); max-height: 100px; object-fit: contain; }
}

@layer m5.overrides {
    @media (max-width: 64rem) {
        .m5-footer-panels__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 48rem) {
        .m5-topbar__inner { display: grid; justify-items: center; text-align: center; }
        .m5-topbar__contact,
        .m5-topbar__actions { justify-content: center; }
        .m5-footer-panels__grid { grid-template-columns: 1fr; }
    }
}

@layer m5.integrations {
    .m5-header-scheme-dark .site-header:not(.m5-force-light) {
        background-color: var(--m5-color-secondary);
        color: var(--m5-color-text-inverse);
    }

    .m5-header-scheme-dark .site-header a {
        color: inherit;
    }

    .site-header .header-image,
    .site-header .site-logo img,
    .navigation-branding img {
        width: auto !important;
        max-width: min(100%, 22rem);
        height: auto !important;
        max-height: calc(var(--m5-header-height) - 1rem);
        object-fit: contain;
    }
}


@layer m5.integrations {
    .m5-header-scheme-dark .site-header:not(.m5-force-light),
    .m5-header-scheme-dark .main-navigation {
        background-color: var(--m5-header-background, var(--m5-color-secondary));
        color: var(--m5-header-text, var(--m5-color-text-inverse));
    }

    .m5-header-scheme-dark .site-header a,
    .m5-header-scheme-dark .main-navigation a { color: var(--m5-header-link, currentColor); }
    .m5-header-scheme-dark .site-header a:hover,
    .m5-header-scheme-dark .site-header a:focus-visible,
    .m5-header-scheme-dark .main-navigation a:hover,
    .m5-header-scheme-dark .main-navigation a:focus-visible { color: var(--m5-header-hover, var(--m5-color-primary)); }

    .m5-header-tools {
        margin-inline-start: auto;
        color: inherit;
        font-size: var(--m5-step--1);
    }

    .m5-header-tools__inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: var(--m5-space-2);
        min-height: 44px;
        padding-inline: var(--m5-space-1);
    }

    .m5-header-tools .m5-topbar__contact,
    .m5-header-tools .m5-topbar__actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--m5-space-2);
    }

    .m5-header-tools a { color: inherit; }
    .m5-header-search form { margin: 0; }
    .m5-header-search input[type="search"] { min-height: 44px; max-width: 13rem; }
    .m5-header-tool-link { min-height: 44px; display: inline-flex; align-items: center; }

    .m5-topbar {
        background: var(--m5-header-background, var(--m5-color-secondary));
        color: var(--m5-header-text, var(--m5-color-text-inverse));
    }

    .m5-topbar a { color: var(--m5-header-link, inherit); }
    .m5-topbar a:hover, .m5-topbar a:focus-visible { color: var(--m5-header-hover, var(--m5-color-primary)); }
    .m5-topbar .m5-button, .m5-header-tools .m5-button { background: var(--m5-header-button, var(--m5-color-primary)); color: #fff; }
    .m5-cta--outline { background: transparent !important; border-color: currentColor !important; color: inherit !important; }
    .m5-device--desktop, .m5-device--mobile { display: none !important; }
    @media (min-width: 48.001rem) { .m5-device--desktop { display: inline-flex !important; } }
    @media (max-width: 48rem) { .m5-device--mobile { display: inline-flex !important; } }

    .m5-footer-panels {
        background: var(--m5-footer-background, var(--m5-color-secondary));
        color: var(--m5-footer-text, var(--m5-color-text-inverse));
        border-block-start: 1px solid var(--m5-footer-separator, #333);
    }
    .m5-footer-panels a { color: var(--m5-footer-link, inherit); }
    .m5-footer-panels a:hover, .m5-footer-panels a:focus-visible { color: var(--m5-footer-hover, var(--m5-color-primary)); }
}

@layer m5.overrides {
    @media (max-width: 64rem) and (min-width: 48.001rem) {
        :root { --m5-header-height: var(--m5-header-height-tablet); }
    }
    @media (max-width: 48rem) {
        .m5-header-tools { width: 100%; margin-inline-start: 0; }
        .m5-header-tools__inner,
        .m5-header-tools .m5-topbar__contact,
        .m5-header-tools .m5-topbar__actions { justify-content: center; text-align: center; }
        .m5-header-hide-topbar-mobile .m5-topbar { display: none; }
    }
}
