:root {
    /* Sizes */
    /* --xs: 10px; old style for replacing css variables */
    --xs: 10px;
    --sm: 20px;
    --md: 40px;
    --lg: 60px;
    --xl: 80px;
    --xxl: 100px;
    --article: 700px;
    --page-w: 1200px;

    /* Colours */
    --bg1: #d99c00;
    --bg2: #F6F6F6;
    --contrast: #000;
    --contrast-h: #555555;
    --contrast-a: #707070;
    --contrast-text: #fff;
    --cover-img: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));
    --cover-nav: rgba(255, 249, 227, 0.8);
    --line: #d99c00;
    --page: #fff;
    --text: #222222;
    --text2: #000;
    --text3: #866103;
    --text4: #a57600;
    --nav: #000;
    --nav-h: #866103;
    --shadow: rgba(0, 0, 0, 0.25);
    --shadow-h: rgba(0, 0, 0, 0.4);


    /* Backdrop Filters */
    --backdrop-filter-Glassmorphism: blur(5px);

    /* Shadows & Outlines */
    --border-Line: 1px solid var(--line);
    --box-Shadow: 0 0 10px var(--shadow);
    --shadow-Hover: 0 0 13px var(--shadow-h);
    --shadow-Hover-f: 0 0 11px var(--shadow-h);

    /* Transforms */
    --transform-Hover: all 0.2s ease-in-out;

    /* Transitions */
    --transition-Interaction: all 0.2s linear;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Font Sizes */
.textBody {
    font-family: 'Raleway', sans-serif;
    font-size: large;
    font-weight: 400;
    line-height: 1.4;
    color: var(--text);

    & a {
        color: var(--text3);
        text-decoration: none;

        &:hover {
            color: var(--contrast-h);
            text-decoration: underline;
        }
    }
}

.textBodyTitle {
    font-family: 'Raleway', sans-serif;
    font-size: x-large;
    font-weight: 600;
    line-height: 1.1;
    color: var(--text2);

    & a {
        text-decoration: none;

        &:hover {
            color: var(--contrast-h);
            text-decoration: underline;
        }
    }
}

.textButton {
    font-family: 'Raleway', sans-serif;
    font-size: medium;
    font-weight: 400;
    line-height: 1.4;
    color: var(--contrastText);
}

.textCaption {
    font-family: 'Raleway', sans-serif;
    font-size: small;
    font-weight: 400;
    line-height: 1.4;
    color: var(--contrast-a);

    & a {
        text-decoration: underline;

        &:hover {
            color: var(--contrast-a);
        }
    }
}

.textFooter {
    font-family: 'Raleway', sans-serif;
    font-size: small;
    font-weight: 400;
    text-align: center;
    line-height: 2;
    color: var(--text);

    & a {
        color: var(--text3);
        text-decoration: none;

        &:hover {
            color: var(--contrast-h);
        }
    }
}

.textInput {
    font-family: 'Raleway', sans-serif;
    font-size: medium;
    font-weight: 400;
    line-height: 1.4;
    color: var(--contrast);

    &::placeholder {
        color: var(--contrast-a);
    }
}

.textLabel {
    font-family: 'Raleway', sans-serif;
    font-size: medium;
    font-weight: 400;
    line-height: 1.4;
    color: var(--text);
}

.textMainTitle {
    font-family: 'Raleway', sans-serif;
    font-size: clamp(4rem, 20cqw, 6rem);
    font-weight: 700;
    line-height: 1;
}

.textNav {
    font-family: 'Raleway', sans-serif;
    font-size: medium;
    font-weight: 400;
    line-height: 1.4;
    color: var(--text2);
    text-decoration: none;

    & a {
        color: var(--text2);
        text-decoration: none;

        &:hover {
            color: var(--text3);
            transform: var(--transform-Hover);
        }
    }
}

.textSectionTitle {
    font-family: 'Raleway', sans-serif;
    font-size: xx-large;
    font-weight: 700;
    line-height: 1;
    color: var(--text2);
}

.textSmallPrint {
    font-family: 'Raleway', sans-serif;
    font-size: xx-small;
    font-weight: 400;
    line-height: 1.4;
    color: var(--text);

    & a {
        color: var(--text3);
        text-decoration: underline;

        &:hover {
            color: var(--contrast-h);
            text-decoration: underline;
        }
    }
}

/* Layout styling */
/* Smooth anchor link scrolling */
html,
body {
    scroll-behavior: smooth;
}

/* Default page size */
body {
    display: flex;
    flex-flow: column nowrap;
    min-width: 100vw;
    min-height: 100vh;
    background-color: var(--page);
}

/* Set SEO wrapper elements to support any layout */
header,
main,
footer {
    width: 100%;
    max-width: 100%;
}

/* Header */
/* header and footer were classes to start, but now are elements */
header {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 100;

    .navigation {
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: var(--sm);
        background: var(--cover-nav);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        box-shadow: var(--box-Shadow);

        .container {
            display: flex;
            flex-flow: row wrap;
            align-items: center;
            justify-content: space-between;
            gap: var(--md);
            width: var(--page-w);
            max-width: 100%;

            .links {
                display: flex;
                flex-flow: row wrap;
                align-items: center;
                gap: var(--sm);
                list-style: none;
                max-width: 100%;

                .current {
                    color: var(--text4);
                }
            }
        }
    }
}

main {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    flex-grow: 1;
    width: 100%;
    max-width: 100%;
}

/* Footer */
footer {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    gap: var(--md);
    width: 100%;
    background: var(--page);

    .footerText {
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        justify-content: center;
        gap: var(--sm);
        width: var(--page-w);
        max-width: 100%;
        padding: var(--lg) var(--sm);

        .iconRow {
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            justify-content: center;
            gap: var(--sm);

            .iconButton {
                width: var(--md);
                height: var(--md);
                padding: var(--xs);
                background: var(--page);
                border-radius: var(--xxl);
                box-shadow: var(--box-Shadow);
                color: var(--text);
                transition: var(--transform-Hover);

                &:hover {
                    color: var(--text4);
                    box-shadow: var(--shadow-Hover-f);
                }
            }
        }

        .footerSmallText {
            display: flex;
            flex-flow: column nowrap;
            align-items: center;
            justify-content: center;
            transition: var(--transform-Hover);
        }
    }
}

/* Line */
.line {
    border-bottom: var(--border-Line);
    width: 100%;
}

/* Line 2 */
.line2 {
    border-bottom: var(--border-Line);
    width: 80%;
}

/* Home Page */
.background {
    width: 100vw;
    height: 100%;
    background: var(--cover-img), url("https://images.unsplash.com/photo-1601379329542-31c59347e2b8") no-repeat center;
    background-size: cover;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* Cards Container */
.cardsContainer {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    gap: var(--lg);
    width: var(--page-w);
    max-width: 100vw;
    padding: var(--xxl) var(--sm);

    .card {
        display: flex;
        flex-flow: row wrap;
        gap: var(--md);
        width: 100%;
        min-height: 40vh;
        padding: var(--sm);
        box-shadow: var(--box-Shadow);
        background: var(--page);
        text-decoration: none;
        transition: var(--transform-Hover);

        &:hover {
            box-shadow: var(--shadow-Hover);
        }

        .image {
            flex-grow: 1;
            width: 300px;
            max-width: 100%;
            height: 40vh;
            object-fit: cover;
            object-position: top;
        }

        .image2 {
            flex-grow: 1;
            width: 300px;
            max-width: 100%;
            height: 40vh;
            object-fit: cover;
            object-position: center;
        }

        .text {
            display: flex;
            flex-flow: column wrap;
            justify-content: center;
            gap: var(--sm);
            flex-grow: 1;
            width: 300px;
            max-width: 100%;
        }
    }
}

/* About & Hives Pages */
.aboutUs {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    gap: var(--lg);
    width: var(--page-w);
    max-width: calc(100% - 40px);
    min-height: 60vh;
    padding: var(--xxl) var(--md);
    margin: 0px var(--sm);
    background: var(--page);
    box-shadow: var(--box-Shadow);

    .image {
        width: 400px;
        max-width: 100%;
        height: 600px;
        object-fit: cover;
        object-position: top;
    }

    .qa {
        display: flex;
        flex-flow: column wrap;
        align-items: center;
        gap: var(--md);
        width: 100%;
        max-width: 100%;
        padding-top: var(--lg);

        .question {
            display: flex;
            flex-flow: column wrap;
            align-items: center;
            gap: var(--sm);
            width: 100%;
        }

        .textBody,
        .textBodyTitle {
            width: var(--article);
            max-width: 100%;
        }
    }

    .text {
        display: flex;
        flex-flow: column wrap;
        justify-content: center;
        flex-grow: 1;
        gap: var(--sm);
        width: 450px;
        max-width: 100%;
    }

    .video {
        width: 400px;
        max-width: 100%;
        height: 600px;
    }
}

/* Candles, Honey & Wax Pages */
.cardsRow {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    gap: var(--sm);
    width: var(--page-w);
    max-width: 100vw;
    padding: var(--xxl) var(--sm);

    .card {
        display: flex;
        flex-flow: column nowrap;
        gap: var(--md);
        width: 370px;
        max-width: 100%;
        min-height: 40vh;
        padding: var(--sm);
        box-shadow: var(--box-Shadow);
        background: var(--page);
        text-decoration: none;

        .image {
            width: 100%;
            height: 40vh;
            object-fit: cover;
        }

        .image2 {
            width: 100%;
            object-fit: cover;
            object-position: top;
        }

        .image3 {
            width: 100%;
            object-fit: contain;
            object-position: center;
        }

        .text {
            display: flex;
            flex-flow: column wrap;
            justify-content: center;
            gap: var(--sm);
            flex-grow: 1;
            width: 100%;

            .list {
                list-style-type: none;

                .bold {
                    font-weight: 600;
                }
            }
        }
    }
}

/* Blog Page */
.blog {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    gap: var(--xl);
    width: var(--page-w);
    max-width: calc(100% - 40px);
    padding: var(--xxl) var(--md);
    margin: 0px var(--sm);
    background: var(--page);
    box-shadow: var(--box-Shadow);


    .imageRow {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        justify-content: center;
        gap: var(--lg);
        width: 100%;

        .image {
            width: 400px;
            max-width: 100%;
            height: 500px;
            object-fit: cover;
            object-position: top;
        }

        .text {
            display: flex;
            flex-flow: column wrap;
            justify-content: center;
            flex-grow: 1;
            gap: var(--sm);
            width: 450px;
            max-width: 100%;
        }
    }

}