/* BEGIN RESET */

*, *::before, *::after{
    box-sizing: border-box; 
}

*{
    margin: 0; 
    padding: 0; 
}

ul[role='list'], ol[role='list']{
    list-style: none; 
}

html:focus-within{
    scroll-behavior: smooth; 
}

a:not([class]){
    text-decoration-skip-ink: auto; 
}

img, picture, svg, video, canvas{
    display: block;
    max-width: 100%;
    height: auto; 
    font-style: italic; 
    background-repeat: no-repeat; 
    background-size: cover;
}

input, button, textarea, select{
    font: inherit; 
}

@media (prefers-reduced-motion: reduce){
    html:focus-within {
        scroll-behavior: auto;
    }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
        transition: none;
    }
}

html {
    min-height: 100%;
    scroll-behavior: smooth; 
    height: 100%;
    background-color: #000; /* color used during overscroll / "clouds" */
}

/* END RESET */

html {
    font-size: clamp(14px, 1.5vw, 20px);
}

a {
    text-decoration: none;
}

p {
    font-family: "proxima-nova", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #F4F2E8;
}

body {
    min-height: 100dvh;
    background: url("images/background.webp") no-repeat center center / cover;
    background-color: #000;
    display: flex;
    flex-direction: column;
    font-family: montecatini-pro-normale, serif;
    font-style: normal;
    font-weight: 300;
}


header {
    background-color: #0d3634;
}

.header_top {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.header_top .flair {
    width: 75%;
    padding: 2rem;
    opacity: 0.1;
    padding-top: 10%;
}

.header_top .flair:last-of-type {
    transform: scaleX(-1);
}

.logo_link {
    width: 60%;
}

.logo_link img {
    width: 100%;                  /* or bump this up if you want it larger */
    padding: 2rem;
}

.header_controls {
    display: flex;
    justify-content: flex-end;
    padding: 0 2rem;
}

/* --- HAMBURGER BUTTON (DESKTOP HIDDEN) --- */
.hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 6px;
}

.hamburger span {
    display: block;
    width: 32px;
    height: 4px;
    background-color: #F4F2E8;  /* matches header flair */
    border-radius: 2px;
    transition: 0.3s ease;
}

nav a {
    font-size: clamp(1.4rem, 3.5vw, 2.2rem);
    font-weight: 600;
    color: #0d3634;
}

nav a:focus {
    outline: none;
}

nav a:focus-visible {
    outline: none;
}

.nav_link_current {
    background-color: #F4F2E8;
    color: #0d3634;

    /* match the mobile look */
    border-radius: 1.2rem;
    padding: 0.6rem 1.2rem;
    box-shadow: inset 0 0 0 4px #0d3634;

    /* keep the soft color fade, no pulsing */
    transition: background-color 0.15s ease, color 0.15s ease;
}   

.nav_link_current:focus,
.nav_link_current:focus-visible {
    background-color: #F4F2E8;
    color: #0d3634;
    box-shadow: inset 0 0 0 4px #0d3634;
}

nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    background-color: #ffda39;
    padding: 1rem;
    color: #0d3634;
}

main {
    display: flex;
    flex: 1 0 auto;             /* 🔥 make main fill available vertical space */
    flex-direction: row;
    padding: 3rem;
}

.page_container {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 2rem;
}

#home_page {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-evenly;
    gap: 2rem;
}

#rental_page {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    align-items: stretch;   /* 👈 make all children the same height */
}

#about_page p {
    font-size: clamp(1.4rem, 4vw, 1.8rem);
}

#contact_info {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    background-color: #0d3634;
    color: #ffda39;
    padding: 3rem;
    border-radius: 1rem;
    border: 4px solid #ffda39;
}

h1 {
    font-size: 2.4rem;
    text-align: center;
    color: #ffda39;
}

h2 {
    font-size: 1.8rem;
    padding-top: 1rem;
    color: #ffda39;
}

#contact_info .content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#contact_info, #map {
    flex: 1;                
    display: flex;          
    flex-direction: column;
}

address {
    padding-top: 2rem;
    font-size: 1.6rem;
    color: #F4F2E8;
    text-align: center;
    font-family: "proxima-nova", sans-serif;
    font-weight: 400;
    font-style: normal;
}

#email {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    padding-top: 2rem;
    font-size: 1.6rem;
    gap: 1rem;
}

#email img {
    width: 20%;
    margin: 0 auto;
}

#email p {
    font-family: montecatini-pro-normale, serif;
    font-style: normal;
    font-weight: 300;
}

#map {
    border-radius: 1rem;
    border: 4px solid #ffda39;
    overflow: hidden;
}

#map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    flex-grow: 1;
    display: block;
}

.vendors_makers {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;  /* 👈 equal width columns */
    align-items: center;
    text-align: center;
    justify-content: center;
    background-color: #0d3634;
    color: #239462;
    padding: 2rem;
    gap: 1rem;
    border-radius: 1rem;
    border: 4px solid #ffda39;
}

.vendors_makers .cta_group {
    margin-top: auto;
    text-align: center;
}

.vendors_makers .cta_group img {
    width: 30%;
    margin: 0 auto;
    margin-bottom: 1.5rem;
}

.vendors_makers p {
    padding: 1rem;
}

.vendors_makers p:not(.new_tab) {
    text-align: left;
}

.click_here {
    color: #ffda39;
    font-family: "proxima-nova", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.new_tab {
    display: block;        /* makes text-align work properly */
    width: 100%;           /* ensures it spans the column */
    text-align: center;    /* centers the text */
    margin-top: 0.5rem;    /* optional: spacing consistency */
}

.construction {
    border: 4px solid #ffda39;
    border-radius: 1rem;
}

footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    background-color: #0d3634;
}

.social_links {
    display: flex;
    flex-direction: row;
    padding: 2rem;
    align-items: center;
    justify-content: space-evenly;
    gap: 4rem;
}

.social_links img {
    width: 50%;
}

small {
    font-size: clamp(1rem, 1.5vw, 2rem);
    color: #F4F2E8;
    font-family: montecatini-pro-normale, serif;
    font-style: normal;
    font-weight: 300;
}

@media(max-width:768px) {

    body {
        background-attachment: scroll;
    }

    header {
        padding: 0 1rem;
    }

    .header_top {
        justify-content: center;
    }

    .logo_link {
        width: 100%;
    }

    .logo_link img {
        width: 100%;   /* adjust as needed — 40–60% usually looks best */
        padding: 2rem 0;
        margin: 0 auto;
    }

    
    main {
        flex-direction: column;
        font-size: 1rem;
        padding: 1rem;
        text-align: center;
        gap: 2rem;
    }

    #home_page {
        flex-direction: column;
        align-items: stretch;   /* ensure full-width stack */
        gap: 2rem;
    }

    address {
        font-size: 2rem;
    }

    #email img {
        width: 30%;
    }

    .flair {
        display: none;
    }

    h2 {
        padding-top: 1rem;
    }

    #contact_info {
        display: flex;
        flex-direction: column;
        justify-content: center;   /* 🔥 vertically center content */
        align-items: center;       /* horizontally center (you already had this) */
    }

    #rental_page {
        flex-direction: column;
    }

    #contact_info, #map {
        width: 100%;
        min-height: 300px;      /* ensures map and contact stay same height */
    }

    #map iframe {
        height: 100%;
    }

    footer {
        flex-direction: column;
        align-items: center;      /* center footer children horizontally */
        justify-content: center;
        gap: 1rem;
    }

    .social_links {
        justify-content: center;  /* 👈 center icons as a group */
        gap: 1rem;                /* smaller gap so they sit nicely together */
        padding: 2rem 0;          /* optional: less padding on mobile */
        width: 100%;
    }

    .social_links a {
        display: flex;            /* make sure each icon is centered in its tap area */
        align-items: center;
        justify-content: center;
    }

    .social_links img {
        width: 40%;               /* tweak if they look too big/small */
    }

    #rental_page p {
        font-size: 1.4rem;   /* adjust to taste — 1.3–1.6rem works well */
        line-height: 1.5;    /* optional but improves readability */
    }

    .click_here {
        font-size: 1.4rem;   /* matches paragraph text */
        line-height: 1.4;
        display: block;      /* optional: improves readability */
        margin-top: 0.5rem;  /* optional: gives breathing room */
    }

    small {
        font-size: 1.6rem;
        padding-bottom: 2rem;
    }

    /* --- MOBILE NAV STYLES --- */

    /* Show hamburger */
    .hamburger {
        display: flex;
        padding-top: 2.5rem;
        padding-bottom: 1rem;
    }

    /* Turn default nav into a hidden vertical menu */
    nav.navbar {
        display: none;
        flex-direction: column;
        gap: 2.2rem;
        background-color: #ffda39;
        padding: 2.5rem 1rem;
        width: 100%;
        text-align: center;
        position: absolute;
        left: 0;
        top: 6rem;
        border-top: 4px solid #0d3634;
        z-index: 1500;
        border-bottom-left-radius: 1rem;
        border-bottom-right-radius: 1rem;
    }

    nav.navbar a {
        font-size: 2.4rem;           /* bigger tap-friendly text */
        padding: 1rem 0;             /* vertical breathing room */
        display: block;              /* ensures full-width tap area */
    }

    nav.navbar .nav_link_current {
        padding: 0.6rem 1.2rem;       /* larger pill */
        box-shadow: inset 0 0 0 4px #0d3634;
        border-radius: 1.2rem;
        background-color: #F4F2E8;
    }

    /* When active class is added by JS */
    nav.navbar.active {
        display: flex;
    }

    /* Animate hamburger into X */
    .hamburger.active span:nth-child(1) {
        transform: translateY(10px) rotate(45deg);
    }
    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }
    .hamburger.active span:nth-child(3) {
        transform: translateY(-10px) rotate(-45deg);
    }
}

/* Shrink navbar text between 870px and 769px */
    @media (max-width: 870px) and (min-width: 769px) {
    nav a {
        font-size: clamp(1.4rem, 2vw, 2rem);
    }
}

/* Shrink navbar text between 1130px and 870px */
@media (max-width: 1684px) and (min-width: 871px) {
    nav a {
        font-size: clamp(1.2rem, 2.2vw, 1.8rem);
    }
}