@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: 'Work Sans', sans-serif;
    --font-family-secondary: 'Sen', sans-serif;

    /* Theme colors If you need to add additional colors just name them the color name */
    --main-color: #6AE0F2;
    --secondary-color: #F3EDE2;
    --tertiary-color: #FAF6F1;
    --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(18px, 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-semibold: 600;
    --font-weight-bold: 700;

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

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

    /* 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(--black);
    --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(--black);
    --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;
    --heading-text-transform-capitalize: capitalize;
    --heading-text-transform-lowercase: lowercase;
    --h1-line-height: 120%;
    --h2-line-height: 124%;
    --h3-line-height: 130%;
    --h4-line-height: 138%;


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

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

    /* h3 */
    --h3-font-size: clamp(26px, 3vw, 35px);

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

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

body {
    color: var(--white);
    font-size: var(--font-size-large);
    line-height: 150%;
    background: var(--black);
    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-two);
    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-two);
    color: var(--white);
}

h3 {
    font-size: var(--h3-font-size);
    line-height: var(--line-height-normal);
    font-weight: 500;
    color: var(--white);
}

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

/* 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 - 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;
    }
}