:root {
    --primary-green: #75A02E;
    --primary-blue: #007DAF;
    --abilibee-yellow: #F4BB00;
    --abilibee-yellow-transparent: #FFF6D6;
    --abilibee-orange: #FA8827;
    --text-light-gray: #8A8A8A;
    --text-dark-gray: #555555;
    --border-dark-gray: #222222;
    --lighter-gray: #F3F3F3;
    --light-gray: #D9D9D9;
    --text-black: #0A0A0A;
    --emergency-ticker-bg: #FFBBBB;

    --2xl-size: 48px;
    --xl-size: 36px;
    --lg-size: 24px;
    --md-size: 20px;
    --base-size: 18px;
    --sm-size: 16px;
    --xs-size: 14px;

    --base-line-height: 100%;
    --md-line-height: 2;
    --sm-line-height: 1.6;
    
    --sm-border-radius: 24px;
    --md-border-radius: 32px;
    --lg-border-radius: 40px;
    
    --border-width: 1px;

    --container-wide: 1324px;
    --container-medium: 1080px;
    --container-narrow: 918px;

    --container-padding: 20px;

    --z-base: 0;
    --z-content: 1;
    --z-content-important: 5;
    --z-sticky: 10;
    --z-sticky-ctrl: 15;
    --z-dropdown: 100;
    --z-modal: 1000;
}

.off-canvas-content {
    min-height: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

.parent-container {
    width: 100%;
    max-width: calc(var(--container-wide) + (var(--container-padding) * 2));
    margin-inline: auto;
    padding: var(--container-padding);
}

.parent-container--medium {
    max-width: calc(var(--container-medium) + (var(--container-padding) * 2));
}

.page-header {
    padding-bottom: 0;
}

.reveal-overlay .reveal .dialog-msg p {
    color: var(--text-black) !important;
}

.error-404-options h2 {
    text-align: start;
}


/*
*****************
    HEADINGS
*****************
*/
h1,
.heading-2xl {
    font-size: var(--2xl-size);
    line-height: var(--base-line-height);
    font-weight: 600;
    text-align: center;
    color: var(--text-black);
}

h2,
.heading-xl {
    font-size: var(--xl-size);
    color: var(--text-light-gray);
    line-height: var(--base-line-height);
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.heading-lg {
    font-size: var(--xl-size);
    line-height: var(--base-line-height);
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-black);
    text-align: center;
    margin-bottom: 20px;
}

h4,
.heading-md {
    font-size: var(--lg-size);
    line-height: var(--base-line-height);
    text-transform: uppercase;
    font-weight: 500;
    color: var(--text-black);
    margin: 0 !important;
    text-align: center;
}

p {
    font-size: var(--sm-size);
    line-height: var(--sm-line-height);
    color: var(--text-black);
    margin: 0;
}

button {
    cursor: pointer;
}

.hidden {
    display: none;
}



/*
************************
    MEDIA BREAKPOINTS
************************
*/

/* 
xxs media breakpoint
*/
@media screen and (min-width: 0) {

    .parent-container--narrow {
        width: 100%;
    }

    .grid-two-columns {
        display: grid;
        grid-template-columns: auto;
        gap: 20px;
    }

    .grid-column > *:not(:last-child) {
        margin-bottom: 20px;
    }

    /*
    ****************
        ELEMENTS
    ****************
    */
    h1,
    .heading-2xl {
        font-size: var(--xl-size);
    }
    
    h2,
    .heading-xl,
    .heading-lg {
        font-size: var(--lg-size);
    }
    
    h4,
    .heading-md {
        font-size: var(--md-size);
    }

    p {
        font-size: var(--sm-size);
    }
}

/* 
narrow media breakpoint
*/
@media screen and (min-width: 320px) {
}

/* 
ns media breakpoint
*/
@media screen and (min-width: 475px) {
}

/* 
media media breakpoint
*/
@media screen and (min-width: 640px) {
    :root {
        --container-padding: 30px;
    }

    .parent-container--narrow {
        width: min(90%, calc(var(--container-narrow) + (var(--container-padding) * 2)));
    }

    /*
    ****************
        ELEMENTS
    ****************
    */
    h1,
    .heading-2xl {
        font-size: var(--2xl-size);
    }
    
    h2,
    .heading-xl,
    .heading-lg {
        font-size: var(--xl-size);
    }

    p {
        font-size: var(--base-size);
    }
}

/* 
medium_to_large media breakpoint
*/
@media screen and (min-width: 768px) {
    .grid-two-columns {
        grid-template-columns: repeat(2,1fr);
    }

    /*
    *****************
        HEADINGS
    *****************
    */
        
    h4,
    .heading-md {
        font-size: var(--lg-size);
    }
}

/* 
large media breakpoint
*/
@media screen and (min-width: 1024px) {
    :root {
        --container-padding: 40px;
    }

    .parent-container--narrow {
        width: min(80%, calc(var(--container-narrow) + (var(--container-padding) * 2)));
    }
    
    p {
        font-size: var(--md-size);
    }
}

/* 
xlarge media breakpoint
*/
@media screen and (min-width: 1200px) {
}

/* 
xxlarge media breakpoint
*/
@media screen and (min-width: 1440px) {
}



/*
==================
  REDUCED MOTION
================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}