/* Prevent horizontal scroll */
* {
    box-sizing: border-box;

    font-family: "Sansation", sans-serif;
    font-weight: 400;
    font-style: normal;
}

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-padding-top: 0;
}

body {
    overflow-x: hidden;
    max-width: 100vw;
    margin: 0;
    padding: 0;
    width: 100%;
}

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

h1,
h2,
h3,
h4 {
    font-family: "Schibsted Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    text-transform: uppercase;
    font-weight: 800;
}

.schibsted-grotesk {
    font-family: "Schibsted Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    text-transform: uppercase;
}

.sansation-light {
    font-family: "Sansation", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.sansation-regular {
    font-family: "Sansation", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.sansation-bold {
    font-family: "Sansation", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.sansation-light-italic {
    font-family: "Sansation", sans-serif;
    font-weight: 300;
    font-style: italic;
}

.sansation-regular-italic {
    font-family: "Sansation", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.sansation-bold-italic {
    font-family: "Sansation", sans-serif;
    font-weight: 700;
    font-style: italic;
}

.primary-button,
.secondary-button {
    font-family: "Schibsted Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    text-transform: uppercase;
    font-weight: 600;
    border-radius: 0.375rem;
    --tw-bg-opacity: 1;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    --tw-text-opacity: 1;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.primary-button {
    background-color: rgb(8 58 32 / var(--tw-bg-opacity, 1));
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.primary-button:hover {
    background-color: rgb(7 38 21 / var(--tw-bg-opacity, 1));
}

.secondary-button {
    background-color: rgb(245 243 237 / var(--tw-text-opacity, 1));
    color: rgb(8 58 32 / var(--tw-bg-opacity, 1));
    --tw-border-opacity: 1;
    border-color: rgb(7 38 21 / var(--tw-bg-opacity, 1));
    border-width: 1px;
}

.secondary-button:hover {
    color: rgb(245 243 237 / var(--tw-text-opacity, 1));
    background-color: rgb(8 58 32 / var(--tw-bg-opacity, 1));
}

/* Ensure all sections stay within viewport */
header,
footer,
main {
    max-width: 100vw;
    overflow-x: hidden;
}

header div,
main {
    background-color: #F5F3ED;
}

footer {
    background-color: #B5E8C1;
}

/* Hamburger menu animation */
#mobileMenuBtn span {
    transform-origin: center;
    display: block;
}

/* When menu is open, transform hamburger to X */
#mobileMenuBtn.menu-open #line1 {
    transform: rotate(45deg) translate(6px, 6px);
}

#mobileMenuBtn.menu-open #line2 {
    opacity: 0;
}

#mobileMenuBtn.menu-open #line3 {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile menu visibility */
#mobileMenu {
    visibility: hidden;
    opacity: 0;
}

#mobileMenu.menu-visible {
    visibility: visible;
    opacity: 1;
}

/* Navigation hover effects and active states */
nav a {
    position: relative;
    transition: all 0.3s ease;
}

/* Desktop navigation active/hover underline */
nav a:hover::after,
nav a.active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #166534;
    /* green-800 */
    transform: scaleX(1);
}

nav a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #166534;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

/* Active page styling */
nav a.active {
    color: #166534 !important;
    /* green-800 */
    font-weight: bold;
}

/* Mobile menu active state */
#mobileMenu nav a.active {
    border-bottom-color: #bbf7d0;
    /* green-200 */
}

/* Mobile menu underlines - only under text width */
#mobileMenu nav a {
    position: relative;
    border-bottom: none !important;
    display: inline-block;
    width: auto;
}

#mobileMenu nav a::after {
    content: '';
    position: absolute;
    bottom: 12px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #166534;
    /* green-800 */
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

#mobileMenu nav a:hover::after,
#mobileMenu nav a.active::after {
    transform: scaleX(1);
}

/* Prevent scroll when mobile menu is open */
body.menu-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
}

/* Ensure mobile menu content doesn't scroll */
#mobileMenu .flex-col {
    overflow-y: auto;
    max-height: 100vh;
}

#toast {
    visibility: hidden;
    min-width: 200px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 8px;
    padding: 12px;
    position: fixed;
    left: 50%;
    bottom: 40px;
    transform: translateX(-50%);
    font-size: 16px;
    opacity: 0;
    transition: opacity 0.4s, bottom 0.4s;
    z-index: 9999;
}

#toast.show {
    visibility: visible;
    opacity: 1;
    bottom: 60px;
}