@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Playfair+Display:wght@700&display=swap');
@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css');

/* Root */
:root {
    --colour-background: #232b2b;
    --colour-header: #1c2222;
    --colour-primary: #1db954;
    --colour-primary-hover: #168f43;
    --colour-cta: #008930;
    --colour-cta-hover: #007a2c;

    --font-heading: 'Playfair Display', serif;
    --font-body: 'Lato', sans-serif;
}

/* Page fade-in animation */
@keyframes page-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Body */
body {
    font-family: var(--font-body);
    background-color: var(--colour-background);
    color: white;
    margin: 0;    
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: all 1s ease;
}



h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--colour-primary);
}

@media (prefers-reduced-motion: reduce) {
    .content {
        animation: none;
        opacity: 1;
    }
}


/* Header */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--colour-primary);
    background-color: var(--colour-header);

    .logo--desktop { display: none; }

    @media (min-width: 1111px) {
        .logo--mobile  { display: none;  margin: 0 auto;}
        .logo--desktop { display: block; }
    }

    .nav {
        font-size: 1.2rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: bold;
        
        ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: nowrap;
            gap: 25px;
            li {
                display: block; 
        
                &:last-child {
                    margin-right: 0;
                }
            }
        }
    
        a {
            color: white;
            text-decoration: none;
            transition: color 0.3s ease;
            padding-bottom: 4px;
            border-bottom: 2px solid transparent;
            position: relative;

            /* underline that draws from center */
            &::after {
                content: "";
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                height: 2px;
                /* Use hover colour by default until link becomes active */
                background: var(--colour-primary-hover);
                transform: scaleX(0);
                transform-origin: center; /* grow from the middle */
                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                z-index: 1;
            }

            /* show underline when hovered or active */
            &:hover::after,
            &:focus-visible::after {
                transform: scaleX(1);
            }

            /* active color state */
            &.\+active {
                color: var(--colour-primary);
            }

            &:hover {
                color: var(--colour-primary-hover);
            }

        
            &.\+call-to-action {
                text-align: right;
                padding: 10px 20px;
                border-radius: 5px;
                color: white;
                background-color: var(--colour-cta);
                transition: background-color 0.3s ease;
                border-bottom: none;
                
                /* no underline animation for CTA */
                &::after { display: none; }

                &.\+active {
                    color: white;
                    background-color: var(--colour-cta-hover);
                }
            
                &:hover {
                    background-color: var(--colour-cta-hover);
                    color: white;
                    border-bottom: none;
                }
            }
        }
    }
}

/* Visible focus for keyboard users */
a.\+call-to-action:focus-visible,
.cta-button:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
}

/* Content */
.content {
    padding: 20px;
    opacity: 0; /* start hidden, then fade in only for content */
    animation: page-fade-in 1000ms ease-out forwards;
    flex: 1 0 auto;
}
/* Footer */
.site-footer {
    background-color: var(--colour-header);
    width: 100%;    
    border-top: 2px solid var(--colour-primary);
    margin-top: 60px; 
    padding: 48px 24px;
    color: #e9ecef; 
    position: relative;
    left: 0;
    bottom: 0;

    .footer-inner {
        max-width: 1200px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 40px;
    }
    
    h3 {
        margin: 0 0 16px;
        font-size: 1.2rem;
        color: #ffffff; 
        font-family: var(--font-heading);
    }
    
    ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    ul li {
        margin-bottom: 8px;
    }
    
    a {
        color: #e9ecef;
        text-decoration: none;
        transition: color 0.2s ease-in-out;

        &:hover {
            color: var(--colour-primary-hover);
        }
    }
    
    address {
        font-style: normal;
        line-height: 1.6;
    }
    
    .footer-location img {
        width: 100%;
        max-width: 200px;
        height: auto;
        border-radius: 8px;
        margin-top: 16px;
    }

    #footer-address-street {
        font-weight: bold;
    }
    
    .footer-logo-section {
        text-align: right;
    }
    
    .footer-logo {
        max-width: 150px;
        margin-bottom: 15px;
    }
    
    .footer-logo-section p {
        font-size: 0.9rem;
        color: #aaa;
        margin: 0;
    }
}

@media (max-width: 1110px) {
    .header {
        flex-direction: column;   
        align-items: center;      
    }

    .header .nav {
        margin-top: 12px;         
        width: 100%;              
        justify-content: center;  
    }

    .header .nav ul {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        justify-content: center;
        margin: 0;
        padding: 0;
        text-align: center;       
    }

}


@media (max-width: 768px) {
    .site-footer {
        .footer-inner {
            text-align: center;
        }

        .footer-logo-section {
            text-align: center;
        }

        .footer-location img {
            margin-left: auto;
            margin-right: auto;
        }
    }
}

/* very hacky method to make sure that content doesn't leave the page */
*, *::before, *::after {
    box-sizing: border-box;
}