/* Tailwind variables and your custom rules */
body {
  font-family: 'Inter', sans-serif;
  background-color: #FBF9F3; /* New base color from user request */
}
.text-beige-dark { color: #173b5b; }
.white { color: #FFFFFF; }
/* .text-beige-dark { color: #0F3C65; } */
/* Custom colors for sections based on user's tints and shades */
.bg-section-shade { background-color: #D8D6CC; } /* Shade 1 */
.bg-section-tint { background-color: #FBF9F3; } /* Tint 1 */
.bg-beige-light { background-color: #ebe9db; } /* The box*/
/* You can define more if needed, e.g., .bg-shade-darker { background-color: #C0BBA6; } */


.border-beige-dark { border-color: #A0522D; }

/* Header scrolled background */
.header-scrolled {
  background-color: #F2F1ED; /* Color for header after leaving hero */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px; /* Adjust based on header height (approx 80px for the current header) */
  /* Removed: scroll-snap-type: y mandatory; */
}


/* Header hide/show */
#site-header {
  transition: transform 0.3s ease-in-out;
}
#site-header.hidden {
  transform: translateY(-100%);
}

/* Custom font for "The Seasons" */
@font-face {
    font-family: 'The Seasons';
    src: url('images/Fontspring-DEMO-theseasons-lt.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

.font-the-seasons {
    font-family: 'The Seasons', sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Added drop shadow */
}

.font-the-seasons1 {
  font-family: "The Seasons", serif; /* Use "The Seasons" as the font name,...*/
}

/* Custom font for "Hiragino Mincho Pro" */
@font-face {
    font-family: 'Hiragino Mincho Pro';
    src: url('images/Hiragino-Mincho-Pro-N-W3.ttf') format('truetype'); /* Adjust path if needed */
    font-weight: normal;
    font-style: normal;
}

.font-hiragino-mincho-pro {
    font-family: 'Hiragino Mincho Pro', serif;
}

/* Hamburger icon animation (ONLY FOR MOBILE) */
@media (max-width: 767px) { /* Applies to screens smaller than 768px (Tailwind's 'md' breakpoint) */
    #mobile-menu-button {
        display: flex; /* Only display flex on mobile */
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        width: 24px; /* Adjust as needed */
        height: 24px; /* Adjust as needed */
        cursor: pointer;
        padding: 0;
        background: none;
        border: none;
    }
}


.hamburger-line {
    width: 100%;
    height: 3px;
    background-color: #173b5b; /* Color of the hamburger lines */
    transition: all 0.3s ease-in-out;
    border-radius: 3px;
}

#mobile-menu-button.menu-open .top-line {
    transform: translateY(8px) rotate(45deg); /* Adjust translateY based on hamburger-line height and spacing */
}

#mobile-menu-button.menu-open .middle-line {
    opacity: 0;
    transform: translateX(-20px);
}

#mobile-menu-button.menu-open .bottom-line {
    transform: translateY(-8px) rotate(-45deg); /* Adjust translateY based on hamburger-line height and spacing */
}


/* Hero image position adjustment for mobile */
@media (max-width: 767px) { /* Applies to screens smaller than 768px (Tailwind's 'md' breakpoint) */
    #home {
        background-position: 35% center; /* Shifts the background image 60% from the left. Adjust as needed. */
        /* Ensure #home is a relative positioning context for its absolute children */
        position: relative; /* Make sure this is set if not already by other Tailwind classes */
    }

    /* Target the hero content specifically for positioning */
    #hero-content {
        position: absolute; /* Take it out of the normal flow */
        top: 26%; /* Adjust this value to move it up or down. A smaller percentage moves it higher. */
        left: 50%; /* Keep it horizontally centered */
        transform: translateX(-50%); /* Adjust for horizontal centering when using left: 50% */
        width: calc(100% - 2rem); /* Adjust width to account for padding/margins if needed, or set max-width */
        max-width: 400px; /* Limit width on small screens if it stretches too much */
    }

    /* Mobile menu specific styles */
    #mobile-menu a {
        /* For webkit browsers (Chrome, Safari) */
         /* 1px black stroke */
        color: #ffffff; /* Make the text white to contrast with stroke */
        /*text-shadow: 1px 1px 2px rgba(0,0,0, 0.4); /*Remove existing text shadow if any*/
    }
    

    #mobile-menu-overlay.opacity-50 {
    opacity: 0.5; /* Changed to 0 to make it invisible */
    pointer-events: auto; /* Keeps it clickable for closing the menu */
    }

    /* Overlay for dimming the background */
    
}

/* For larger screens (md and up), ensure hero content is centered as before */
@media (min-width: 768px) {
    #home {
        /* These should already be there or you can add them explicitly */
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #hero-content {
        /* Revert absolute positioning for larger screens if it's not desired */
        position: relative; /* Or remove this property if it's not set on desktop */
        top: auto;
        left: auto;
        transform: none;
        max-width: 2xl; /* Or whatever your original desktop max-width was */
    }
}