:root {
    scroll-behavior: smooth;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size: 100%;
    

    /* 
        line height 1.5?
        all 140.6% 
        except Logo "Opalia"
    */
   
    --primary-green: #18392B;
    --secondary-green: #14452F;
    --primary-white: #FFFEFA;
    --primary-black: #010203;
    --stroke: #AEAEAE;
    --focused-green: #066839;
    --focused: #fff500;
    --xs: 500px;
}

/* consistent and predictable layout
   allows specific components to override 
   the behaviour if needed */
*, *::before, *::after {
    box-sizing: inherit;
}

body {
    /* 
        works in conjunction with the script at the start of body 
    */
    opacity: 0;
}

/* This way override Bootstrap defaults */
body * {
    color: var(--primary-black);
    text-align: justify;
    line-height: 1.406;
    letter-spacing: 0.005em;

    font-family: "Roboto Serif", serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings:
    "wdth" 100,
    "GRAD" 0;
    
}

section {
    padding: 0;
    margin: 0;
}

.main {
    margin: 1.5rem auto 1.5rem;
}

.main > * {
    margin: 1em 1em;
}

.main__text, .main__gallery, .footer-content, .footer-bottom {
    max-width: var(--xs);
    font-size: 1.25rem;
}

#logo {
    font-family: "Rozha One", serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 400;
    font-style: normal;

    font-size: 1.5rem;
    line-height: 1.15;
    letter-spacing: 0.001em;
}


h1 {
    
    font-family: "Alex Brush", cursive, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 400;
    font-style: normal;

    font-size: 1.25rem;
}

h2 {
    font-weight: 400; /* regular */
    font-size: 1rem;
}

h3, ul, li, ul li a, h3 a {
    color: var(--primary-green);
    font-weight: 400;
    font-size: 0.75rem;
    text-transform: uppercase;
}

li::marker {
    color: var(--focused-green);
}

p {
    /* normal equivalent to 400 */
    font-weight: normal;
    font-size: 0.85rem;
    margin-bottom: 0;
}

em {
    font-weight: 550;
}

/* 
    more specific styles
    content and layout
*/
nav {
    padding: 3em 0 3em;
    
    background-color: var(--primary-green);
    
}

nav a {
    color: var(--primary-white);
    text-decoration: none;
}

footer p {
    text-align: center;
}

footer p {
    color: var(--primary-white);
    font-weight: normal;
    padding: 1em 1em;
}

footer a {
    color: var(--primary-white)
}

/* Settings footer's padding here when it's not set by bootstrap initally */
.footer-content, .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-content p {
    font-size: 0.75rem;
}

.footer-content__background {
    background-color: var(--primary-green);
}

.footer-content {
    background-color: var(--primary-green);
}

.footer-content p {
    max-width: calc(50%);
}

.footer-bottom__background {
    background-color: var(--secondary-green);
}

.footer-bottom {
    justify-content: center;
    background-color: var(--secondary-green);
}

#footer-left {
    text-align: left;
    word-break: break-all;
}

#footer-right {
    text-align: right;
}

/* 
    containers - page layout
*/


.main__text {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1em;
    
}
/* To align with images
    their spacing is set with bootstrap with margins */
.main__text > * {
    margin: 0 0.25em;
}


.main__gallery-wrapper img {
    width: 100%;
    
    /* must set a specific size for object-fit to work */
    height: 300px;
    object-fit: cover;
    object-position: center;

    border: 1px solid var(--stroke);
    border-radius: 8px;
    
    
}

#last {
    
    object-position: 100% 87%;
    object-fit: cover;
}

/* back-to-top btn styling */
#btn-back-to-top {
    /* Position the BUTTON, not the SVG */
    position: fixed;
    bottom: 90px;
    right: 60px; /* Adjusted for better mobile fit */
    z-index: 1000;
    
    /* Size and Shape */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    padding: 0; /* Remove default button padding */
    
    /* Visuals */
    background-color: var(--focused-green);
    border: 3px solid var(--primary-white);

    
    /* Hidden State (Default) */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px); /* Nice slide-up effect */
    transition: all 0.3s ease-in-out, border 0.3s ease-in-out;
}

/* The SVG inside just needs to fill the button */
#btn-back-to-top svg {
    
    fill: var(--primary-white); /* Inherits color from button */
    /* vertical-align: middle; */
}

/* Hover State */
#btn-back-to-top:hover {
    cursor: pointer;
    background-color: var(--primary-white);
  
    
    transform: translateY(-5px); /* Moves up slightly on hover */
}

#btn-back-to-top:hover svg {
    fill: var(--focused-green);
}

/* Active/Focus States */
#btn-back-to-top:active {
    border-color: var(--focused);
}

#btn-back-to-top:active svg {
    fill: var(--focused-green);
}


#btn-back-to-top:focus {
    
    background-color: var(--focused);
    border-color: var(--focused-green);
}

#btn-back-to-top:focus svg {
    fill: var(--focused-green);
}


/* The class JS will add */
#btn-back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(-0);
}

/* overriding bootstrap */
.container {
    margin: 0 auto;
    padding: 0;
}

/* xs 
    Must be changed places with main styles 
    xs 576px - smallest
    then @media min-width: 577px */
@media (min-width: 576px) {
    .main__text, .main__gallery, .footer-content, .footer-bottom {
        max-width: 700px;
    }

    .main__text {
        gap: 2em;
    }

    #logo {
        font-size: 2rem;
    }
    
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3, ul, li, ul li a, h3 a {
        font-size: 1.25rem;
    }

    p, .footer-content p {
        font-size: 1.125rem;
    }
}

/* md */
@media (min-width: 768px) {
    .main__text, .main__gallery, .footer-content, .footer-bottom {
        max-width: 900px;
    }

    

    .main > * {
        margin: 5em 1em;
    }

    .main__text {
        gap: 2rem;
    }

    #logo {
        font-size: 4rem;
    }
    
    h1 {
        font-size: 3rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3, ul, li, ul li a, h3 a {
        font-size: 0.95rem;
    }

    p, .footer-content p {
        font-size: 1rem;
    }

}

/* lg */
@media (min-width: 992px) {
    .main__text, .main__gallery, .footer-content, .footer-bottom {
        max-width: 1000px;
    }

    .main__text {
        gap: 3.1875rem;
    }
    #logo {
        font-size: 6rem;
    }

    h1 {
        font-size: 4rem;
    }

    h2 {
        font-size: 2rem;
    }

    h3, ul, li, ul li a, h3 a {
        font-size: 1.5rem;
    }

    p, .footer-content p {
        font-size: 1.5rem;
    }

    
    
    
    .main__gallery-wrapper img {
        width: 100%;
    
        /* must set a specific size for object-fit to work */
        height: 400px;
        object-fit: cover;
        object-position: center;
    }

    #last {
        height: 500px;
        object-position: 100% 87%;
        object-fit: cover;
    }

    #btn-back-to-top {
        width: 50px;
        height: 50px;

        bottom: 100px;
        right: 100px; /* Adjusted for better mobile fit */
    }

}