@import url('fonts.css');
@import url('header.css');

/* BASE
------------------------------------- */
/* atf styles */
#wrapper {
    overflow: clip;
}
:root {
    /* Main theme styles */
    --mobile-nav-height: 100px;

    /* Fonts */
    --font-family-main: 'Marcellus', sans-serif;
    --font-family-secondary: 'Montserrat', sans-serif;
    --font-family-tertiary: 'Open Sans', sans-serif;

    /* Theme colors If you need to add additional colors just name them the color name */
    --main-color: #092353;
    --secondary-color: #D6D4D4;
    --tertiary-color: #676363;
    --accent-color: #506385;
    --charcoal: #242424;;
    --black: #000;
    --white: #fff;

    /* Text styles */
    --font-size-xsmall: clamp(12px, 1.1vw, 14px);
    --font-size-small: clamp(14px, 1.2vw, 16px);
    --font-size-main: clamp(16px, 1.5vw, 18px);
    --font-size-large: clamp(20px, 1.5vw, 21px);
    --text-letter-spacing-normal: normal;
    --text-letter-spacing-one: 1px;
    --text-letter-spacing-one-half: 1.5px;
    --text-letter-spacing-two: 2px;
    --text-margin-normal: 0;
    --line-height-normal: 1.4;
    --font-weight-normal: 400;
    --font-weight-bold: 700;

    /* Button Styles */
    /* Main button styles */
    --button-text-color: var(--main-color);
    --button-bg-color: var(--white);
    --button-border: 2px solid var(--white);
    --button-padding: 0.4em 1.5em;
    --button-text-transform: uppercase;
    --button-letter-spacing: 1.15px;
    --button-font-weight: 800;
    --button-border-radius: 30px;
    --button-hover-text-color: var(--white);
    --button-hover-bg-color: transparent;
    --button-hover-border-color: var(--white);

    /* Secondary Button You can use this for border button */
    --secondary-button-bg: var(--main-color);
    --secondary-button-text-color: var(--white);
    --secondary-button-border-color: var(--main-color);
    --secondary-button-hover-text-color: var(--main-color);
    --secondary-button-hover-bg-color: transparent;
    --secondary-button-hover-border-color: var(--main-color);

    /* Tertiary Button You can use this for border button */
    --tertiary-button-bg: transparent;
    --tertiary-button-text-color: var(--main-color);
    --tertiary-button-border-color: var(--main-color);
    --tertiary-button-hover-text-color: var(--white);
    --tertiary-button-hover-bg-color: var(--main-color);
    --tertiary-button-hover-border-color: var(--main-color);

    /* Below are styles that you can use for standard light and dark buttons */
    /* Light button */
    --light-button-bg: transparent;
    --light-button-text-color: var(--white);
    --light-button-border-color: var(--white);
    --light-button-hover-text-color: var(--main-color);
    --light-button-hover-bg-color: var(--white);
    --light-button-hover-border-color: var(--white);

    /* Dark Button */
    /* --dark-button-bg: var(--black);
    --dark-button-text-color: var(--white);
    --dark-button-border-color: var(--black);
    --dark-button-hover-text-color: var(--white);
    --dark-button-hover-bg-color: var(--main-color);
    --dark-button-hover-border-color: var(--main-color); */

    /* Headings Styles*/
    /* Base Heading */
    --heading-color: var(--black);
    --heading-color-light: var(--white);
    --heading-color-alt: var(--main-color);
    --heading-letter-spacing-normal: normal;
    --heading-letter-spacing-one: 1.15px;
    --heading-letter-spacing-two: 2px;
    --heading-text-transform-normal: none;
    --heading-text-transform-uppercase: uppercase;
    --h1-line-height: 120%;
    --h2-line-height: 124%;
    --h3-line-height: 130%;
    --h4-line-height: 138%;

    /* h1 */
    --h1-font-size: clamp(40px, 5vw, 64px);

    /* h2 */
    --h2-font-size: clamp(32px, 3vw, 45px);

    /* h3 */
    --h3-font-size: clamp(24px, 3vw, 32px);

    /* h4 */
    --h4-font-size: clamp(21px, 3vw, 25px);

    /* h5 */
    --h5-font-size: clamp(18px, 2vw, 20px);
}

body {
    color: var(--main-color);
    font-size: var(--font-size-main);
    line-height: var(--line-height-normal);
    background: var(--white);
    font-family: var(--font-family-secondary);
    font-weight: var(--font-weight-normal);
}

h1,
h2,
h3,
h4,
h5,
h6,
.blog #main h1 a {
    color: var(--heading-color);
    font-family: var(--font-family-main);
    font-weight: var(--font-weight-bold);
    margin: 0;
}

h1,
.blog #main h1 a {
    font-family: var(--font-family-main);
    font-size: var(--h1-font-size);
    font-style: normal;
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-normal);
    letter-spacing: var(--heading-letter-spacing-normal);
    text-transform: var(--heading-text-transform-normal);
}

h2 {
    font-size: var(--h2-font-size);
    line-height: var(--line-height-normal);
    letter-spacing: var(--heading-letter-spacing-one);
    color: var(--charcoal);
}

h3 {
    font-size: var(--h3-font-size);
    line-height: var(--line-height-normal);
    color: var(--main-color);
}

h4 {
    font-family: var(--font-family-secondary);
    font-size: var(--h4-font-size);
    line-height: var(--line-height-normal);
    letter-spacing: var(--heading-letter-spacing-one);
}

/* Main Button style */
.main-btn,
a.main-btn,
.bp-forms-btn,
a.bp-forms-btn,
a.main-btn:visited {
    border: var(--button-border);
    border-radius: var(--button-border-radius);
    color: var(--button-text-color);
    font-family: var(--font-family-secondary);
    font-size: var(--font-size-main);
    font-style: normal;
    font-weight: var(--button-font-weight);
    line-height: var(--line-height-normal);
    letter-spacing: var(--button-letter-spacing);
    text-transform: var(--button-text-transform);
    padding: var(--button-padding);
    background-color: var(--button-bg-color);
}

.main-btn:hover,
a.main-btn:hover,
.bp-forms-btn:hover,
a.bp-forms-btn:hover,
a.main-btn:visited:hover {
    color: var(--button-hover-text-color);
    background-color: var(--button-hover-bg-color);
    border-color: var(--button-hover-border-color);
}

/* Secondary Button */
.secondary[class*='main-btn'],
a.secondary[class*='main-btn'],
a.secondary[class*='main-btn']:visited {
    border-color: var(--secondary-button-border-color);
    color: var(--secondary-button-text-color);
    background-color: var(--secondary-button-bg);
}

.secondary[class*='main-btn']:hover,
a.secondary[class*='main-btn']:hover,
a.secondary[class*='main-btn']:visited:hover {
    color: var(--secondary-button-hover-text-color);
    border-color: var(--secondary-button-hover-border-color);
    background-color: var(--secondary-button-hover-bg-color);
}

/* Tertiary Button */
.tertiary[class*='main-btn'],
a.tertiary[class*='main-btn'],
a.tertiary[class*='main-btn']:visited {
    border-color: var(--tertiary-button-border-color);
    color: var(--tertiary-button-text-color);
    background-color: var(--tertiary-button-bg);
}

.tertiary[class*='main-btn']:hover,
a.tertiary[class*='main-btn']:hover,
a.tertiary[class*='main-btn']:visited:hover {
    color: var(--tertiary-button-hover-text-color);
    border-color: var(--tertiary-button-hover-border-color);
    background-color: var(--tertiary-button-hover-bg-color);
}


/* Alt Button For secondary */
.light[class*='main-btn'],
a.light[class*='main-btn'],
a.light[class*='main-btn']:visited {
    border-color: var(--light-button-border-color);
    color: var(--light-button-text-color);
    background-color: var(--light-button-bg);
}

.light[class*='main-btn']:hover,
a.light[class*='main-btn']:hover,
a.light[class*='main-btn']:visited:hover {
    color: var(--light-button-hover-text-color);
    border-color: var(--light-button-hover-border-color);
    background-color: var(--light-button-hover-bg-color);
}


/* Alt Button - copy the below code for each alternate designed version of the above buttons. Don't forget to add the new button to the media query for smaller devices as well */

/* Alt Button For secondary */
/* .secondary.alt[class*='main-btn'],
a.secondary.alt[class*='main-btn'],
a.secondary.alt[class*='main-btn']:visited {
    border-color: var(--secondary-button-border-color);
    color: var(--secondary-button-text-color);
    background-color: var(--secondary-button-bg);
}

.secondary.alt[class*='main-btn']:hover,
a.secondary.alt[class*='main-btn']:hover,
a.secondary.alt[class*='main-btn']:visited:hover {
    color: var(--secondary-button-hover-text-color);
    border-color: var(--secondary-button-hover-border-color);
    background-color: var(--secondary-button-hover-bg-color);
} */

article a,
article a:visited {
    color: var(--main-color);
    font-weight: var(--font-weight-bold);
}

@media (max-width: 600px) {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .blog #main h1 a {
        letter-spacing: normal;
    }

    .main-btn,
    a.main-btn,
    .bp-forms-btn,
    a.bp-forms-btn,
    a.main-btn:visited,
    .secondary[class*='main-btn'],
    a.secondary[class*='main-btn'],
    a.secondary[class*='main-btn']:visited,
    .tertiary[class*='main-btn'],
    a.tertiary[class*='main-btn'],
    a.tertiary[class*='main-btn']:visited {
        letter-spacing: normal;
        max-width: unset;
    }
}