/* CODESTITCH STYLES, RESET, HEADER/NAVIGATION AND FOOTER */
/* roboto-regular - latin */
* {
  font-family: "Beqiner";
}

@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Beqiner';
  font-style: italic;
  font-weight: 400;
  src: url('/assets/fonts/BEQINER ITALIC.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Beqiner';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/BEQINER.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/roboto-v32-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url('/assets/fonts/roboto-v32-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('/assets/fonts/roboto-v32-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  src: url('/assets/fonts/roboto-v32-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

.skip {
    position: absolute;
    left: -20rem;
    opacity: 0;
    z-index: 999;
}
.skip:focus {
  left: 50%; 
  transform: translateX(-50%); 
  opacity: 1; 
  color: white;
}

:root {
    /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */
    --primary: #E1BD69;
    --primaryLight: #ffba43;
    --secondary: #ffba43;
    --secondaryLight: #ffba43;
    --headerColor: #1a1a1a;
    --bodyTextColor: #4e4b66;
    --bodyTextColorWhite: #fafbfc;
    /* 13px - 16px */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1rem;
    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}

body {
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
}
.cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
}

.cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 43.75rem;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    position: relative;
}

.cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColor);
}


/*-- -------------------------- -->
<---          Footer            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #footer-1390 * {
        font-family: Roboto;
    }
    #footer-1390 {
        padding: var(--sectionPadding);
        background-color: #1a1a1a;
        position: relative;
        z-index: 1;
    }
    #footer-1390 .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        /* Align left instead of center to match image */
        align-items: flex-start; 
    }
    #footer-1390 .cs-top {
        width: 100%;
        margin-bottom: 2rem;
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* Left align */
        gap: 1.5rem;
    }
    #footer-1390 .cs-ul {
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 2rem; /* Space between links */
    }
    #footer-1390 .cs-li {
        list-style: none;
    }
    #footer-1390 .cs-link {
        font-size: 1rem;
        line-height: 1.5em;
        text-decoration: none;
        margin: 0;
        color: #bababa;
        display: block;
        transition: color 0.3s;
    }
    #footer-1390 .cs-link:hover {
        color: var(--primary);
    }
    #footer-1390 .cs-logo {
        width: 100%;
        max-width: 13rem;
        height: auto;
        display: block;
    }
    #footer-1390 .cs-logo-img {
        width: 100%;
        height: auto;
        display: block;
    }
    
    /* New Divider */
    #footer-1390 .cs-divider {
        width: 100%;
        height: 1px;
        background-color: #484848;
        margin-bottom: 1.5rem;
    }

    #footer-1390 .cs-bottom {
        width: 100%;
        display: flex;
        flex-direction: column; /* Stack on mobile */
        align-items: center;
        gap: 1rem;
    }
    #footer-1390 .cs-social {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
    }
    #footer-1390 .cs-social-li {
        list-style: none;
    }
    #footer-1390 .cs-social-link {
        width: 2rem;
        height: 2rem;
        background-color: #484848;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: background-color 0.3s;
    }
    #footer-1390 .cs-social-link:hover {
        background-color: var(--primary);
    }
    #footer-1390 .cs-social-icon {
        width: 0.75rem;
        height: auto;
        display: block;
        opacity: 0.6;
        transition: opacity 0.3s;
    }
    #footer-1390 .cs-copyright {
        font-size: 0.9rem;
        color: #bababa;
        line-height: 1.5em;
        margin: 0;
        display: block;
        text-align: center;
    }
    #footer-1390 .cs-copyright-link {
        font-size: 0.9rem;
        text-decoration: none;
        color: #bababa;
        transition: color 0.3s;
    }
    #footer-1390 .cs-copyright-link:hover {
        color: var(--primary);
    }
}

/* Tablet/Desktop - 768px+ */
/* Matches the horizontal layout of 1925.png */
@media only screen and (min-width: 48rem) {
    #footer-1390 .cs-bottom {
        flex-direction: row;
        justify-content: space-between; /* Copyright Left, Privacy Center, Socials Right */
        align-items: center;
    }
    #footer-1390 .cs-copyright {
        text-align: left;
    }
    /* Centers the privacy policy visually between the two other elements if space allows */
    #footer-1390 .cs-flex {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* Sidebar CSS */
:root {
    --gold: var(--primary); /* Adjusted to match the Garioch gold */
    --bg-dark: #1a1a1a;
    --text-light: #f7f7f7;
}

#side-menu * {
    font-family: Roboto;
}

#side-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px; /* Adjust width as needed */
    height: 100vh;
    background-color: var(--bg-dark);
    z-index: 1000;
    border-right: 1px solid #333;
    overflow-y: auto;
}

.side-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 2rem;
    box-sizing: border-box;
}

/* Logo */
.side-logo {
    display: block;
    margin-bottom: 3rem;
    text-align: center;
}

.side-logo img {
    max-width: 100%;
    height: auto;
}

/* Navigation */
.side-nav {
    flex-grow: 1; /* Pushes contact info to the bottom */
}

.side-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.side-nav li {
    margin-bottom: 1.5rem;
}

.side-nav a {
    text-decoration: none;
    color: var(--text-light);
    font-size: 1.1rem;
    font-weight: 400;
    transition: color 0.3s ease;
    display: block;
}

.side-nav a:hover, 
.side-nav a.active {
    color: var(--gold);
}

/* Contact Section */
.side-contact {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #333;
    color: var(--text-light);
    font-size: 0.9rem;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1rem;
    gap: 12px;
}

.contact-icon {
    width: 20px;
    height: 20px;
    color: var(--gold);
    flex-shrink: 0;
    margin-top: 2px;
}

.contact-text {
    display: flex;
    flex-direction: column;
    color: var(--text-light);
    text-decoration: none;
    line-height: 1.4;
}

/* Add margin to main content so it doesn't hide behind sidebar */
body {
    padding-left: 280px; /* Must match sidebar width */
}

/* Mobile Responsive - Hide Sidebar, reset body padding */
@media screen and (max-width: 1024px) {
    #side-menu {
        display: none; /* Or replace with a hamburger menu logic */
    }
    body {
        padding-left: 0;
    }

}

@media screen and (min-width: 1024px) {
    .navbar, .nav-links {
        display: none !important;
    }
}

.cs-button-solid.dark {
    font-size: 1rem !important;
    line-height: 3.5rem !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    color: #1a1a1a !important; /* Dark text on gold button */
    min-width: 9.375rem !important;
    padding: 0 2rem !important;
    background-color: var(--primary) !important;
    display: inline-block !important;
    position: relative !important;
    z-index: 1 !important;
    transition: color 0.3s !important;
    letter-spacing: 1px !important;
    border-radius: 0 !important;
}

.cs-button-solid.dark:before {
    content: "" !important;
    position: absolute !important;
    height: 100% !important;
    width: 0% !important;
    background: #1a1a1a !important;
    opacity: 1 !important;
    top: 0 !important;
    left: 0 !important;
    z-index: -1 !important;
    transition: width 0.3s !important;
    border-radius: 0 !important;
}

.cs-button-solid.dark:hover {
    color: #fff !important;
}

.cs-button-solid.dark:hover:before {
    width: 100% !important;
}

.cs-button-solid.light {
    font-size: 1rem !important;
    line-height: clamp(2.875em, 5.5vw, 3.5em) !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-transform: uppercase !important; /* Added for consistency with your first example */
    border-radius: 0 !important;
    margin: 0 !important; /* Changed 'auto' to '0' for better general use */
    color: black !important;
    min-width: 9.375rem !important;
    padding: 0 2rem !important;
    background-color: var(--primary) !important;
    display: inline-block !important;
    position: relative !important;
    z-index: 1 !important;
    box-sizing: border-box !important;
    transition: color 0.3s !important;
    letter-spacing: 1px !important; /* Added for consistency with your first example */
}

.cs-button-solid.light:before {
    content: "" !important;
    position: absolute !important;
    height: 100% !important;
    width: 0% !important;
    background: #fff !important;
    opacity: 1 !important;
    top: 0 !important;
    left: 0 !important;
    z-index: -1 !important;
    transition: width 0.3s !important;
    border-radius: 0 !important;
}

.cs-button-solid.light:hover {
    color: #1a1a1a !important;
}

.cs-button-solid.light:hover:before {
    width: 100% !important;
}


/*-- -------------------------- -->
<---     Mobile Navigation      -->
<--- -------------------------- -*/

body,
html {
    /* reset margin and padding so there's no gap between the nav and the screen edges */
    margin: 0;
       padding: 0;
}

.navbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 90px;
            background: #222222; /* Dark background matching image */
            display: flex;
            justify-content: space-between; /* Pushes logo left, button right */
            align-items: center;
            padding: 0 5%; /* Horizontal spacing */
            z-index: 1000;
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
            
            /* Initial State for Animation */
            transform: translateY(-100%);
            animation: slideDown 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
        }

        /* --- Slide Down Animation Keyframes --- */
        @keyframes slideDown {
            from {
                transform: translateY(0);
            }
            to {
                transform: translateY(0);
            }
        }

        /* --- Logo Styling --- */
        .logo-container img {
            max-height: 60px;
            width: auto;
            max-width: 180px;
            display: block;
        }

        /* --- Hamburger Button (Gold Square) --- */
        .menu-btn {
            background-color: #eacc85; /* Gold color from image */
            border: none;
            width: 60px;
            height: 60px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 6px; /* Space between lines */
            transition: background-color 0.3s ease;
        }

        .menu-btn:hover {
            background-color: #d4b872;
        }

        /* The three lines inside the button */
        .menu-btn span {
            display: block;
            width: 28px;
            height: 3px;
            background-color: #222222; /* Dark lines */
            border-radius: 2px;
            transition: all 0.3s ease;
        }

        /* --- Navigation Links Overlay (Hidden by default) --- */
        .nav-links {
            position: fixed;
            top: 90px; /* Starts exactly below the navbar */
            left: 0;
            width: 100%;
            background-color: #222222;
            overflow: hidden;
            max-height: 0; /* Closed state */
            transition: max-height 0.5s ease-in-out;
            border-top: 1px solid #333;
            z-index: 10;
        }

        .nav-links.active {
            max-height: 300px; /* Open state height */
        }

        .nav-links ul {
            list-style: none;
            text-align: center;
            padding: 2rem 0;
        }

        .nav-links li {
            margin: 15px 0;
        }


        .nav-links a {
            text-decoration: none;
            color: white; /* Gold text */
            font-size: 1.2rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: color 0.3s;
        }

        .nav-links a:hover {
            color: #fff;
        }

        .nav-links a.active {
            color: var(--primary);
        }
        /* --- Hamburger Animation (Optional: Turns to X) --- */
        .menu-btn.open span:nth-child(1) {
            transform: translateY(9px) rotate(45deg);
        }
        .menu-btn.open span:nth-child(2) {
            opacity: 0;
        }
        .menu-btn.open span:nth-child(3) {
            transform: translateY(-9px) rotate(-45deg);
        }