/* =========================================
   1. GENERAL STYLES
   ========================================= */
body {
    margin: 0;
    font-family: 'Roboto', Arial, sans-serif;
    background: #fafafa;
    color: #222;
    box-sizing: border-box;
    padding: 0; /* Changed from 20px to 0 to prevent header gaps */
}

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

.container {
    width: 95%;
    max-width: 1100px;
    margin: 0 auto;
}




/* --- Apply Elegant Boutique Font to Headers --- */

/* font-family: 'Playfair Display', serif;  */


h1, h2, h3, .photo-title {
    font-family: 'Great Vibes', serif !important;
    font-weight: 700; /* Makes it bold and prominent */
    color: #333;       /* Professional dark gray */
    margin-bottom: 20px;
    text-align: center; /* Keeps your section titles centered */
}

/* Specific styling for Section Headers (like "Recent Photos") */
h2 {
    font-size: 2.2rem;
    margin-top: 40px;
    letter-spacing: 1px;
    position: relative;    /* Required for the underline to anchor correctly */
    padding-bottom: 15px;  /* Space for the underline */
}

h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;       /* Length of the line */
    height: 3px;       /* Thickness of the line */
    background-color: #4da6a5; /* Your Deep Teal color */
    border-radius: 2px;
}





/* --- Boutique Header & Logo --- */
.header {
    background-color: #f1f1f1 !important;
    border-bottom: 1px solid #ddd !important;
    padding: 5px 0;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}


/* Update the business name to "force" the script font */
.header .business-name {
    font-family: 'Great Vibes', cursive !important;
    color: #4da6a5 !important;
    font-size: 3.8rem !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    white-space: nowrap;
    line-height: 1;
    display: inline-block;
}

/* Update the nav links to "force" the script font */
.header .nav-link-script {
    font-family: 'Great Vibes', cursive !important;
    color: #f64c72 !important;
    font-size: 1.8rem;
    text-decoration: none !important;
    margin: 0 12px;
    transition: transform 0.2s;
    display: inline-block;
}

.nav-link-script:hover {
    color: #d43d5e !important;
    transform: scale(1.05);
}

.nav-link-active {
    background-color: #ff8ba7;
    color: white !important;
    padding: 2px 18px;
    border-radius: 6px;
}


/* must be AFTER bootstrap.css */
nav a.nav-link-script.nav-link-auth {
    color: #000 !important;
}

nav a.nav-link-script.nav-link-auth:hover {
    color: #000 !important;
}



/* Base Admin Button Style (Desktop) */
.admin-btn {
    font-family: 'Great Vibes', cursive !important;
    font-size: 1.8rem !important; /* Matches .nav-link-script on desktop */
    color: #000 !important;    /* Matches your pink nav link color */
    border: 1px solid #000;
    padding: 2px 12px;
    margin: 0 12px;
    background: transparent;
    transition: transform 0.2s;
    vertical-align: middle;
}

.admin-btn:hover {
    color: #d43d5e !important;
    transform: scale(1.05);
}



/* --- Hero & Gallery --- */


/* --- Slim Centered Hero with Border --- */
.hero-section {
    background-color: #ffffff; /* Clean white background */
    padding: 20px 0;           /* Tight vertical spacing */
    text-align: center;
    border-top: 1px solid #eee;    /* Subtle line above */
    border-bottom: 2px solid #4da6a5; /* Thicker teal line below to match your brand */
    margin-bottom: 20px;       /* Space between the hero and the filter */
    box-shadow: inset 0 0 10px rgba(0,0,0,0.02); /* Very faint inner glow */
}

.hero-text {
    max-width: 850px; /* Prevents text from stretching too wide on PC */
    margin: 0 auto;   /* Centers the text block */
    text-align: center; /* This makes it centered on both PC and Mobile by default */
}


.hero-text h1 {
    font-size: 3rem; /* Slightly larger since it's the main focus now */
    margin-bottom: 0px;
    text-align: center; /* Overriding previous left-align */
    margin-top: 0; /* Removes any browser default gap at the top */
}

.tagline {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    font-style: italic;
    color: #555;
    margin-top: 5px;    /* Tighter gap to the title */
    margin-bottom: 15px; /* Tighter gap to the button */
    line-height: 1.1;
}

.facebook-cta {
    justify-content: center; /* Ensures icon and text stay centered inside button */
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    width: 100%;
    padding: 40px 0;
}

/* --- The Grid Container --- */
.photo-grid {
    display: flex;
    flex-wrap: wrap;      /* Allows items to move to the next row */
    gap: 30px;            /* Space between the cookie cards */
    justify-content: center; /* Centers the cookies on the screen */
    padding: 20px 0;
}

.photo-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px #e0e0e0;
    padding: 12px;
    width: 100%;
    max-width: 280px;
    text-align: center;
}

.photo-card img {
    width: 100%;
    height: auto;
    max-height: 300px;
    object-fit: contain;
    background-color: #fcfcfc;
    border-radius: 6px;
    margin-bottom: 10px;
    display: block;
}

/* Added these for use inside photo-card */
.photo-title {
    font-weight: bold;
    margin-bottom: 4px;
}
.photo-description {
    font-size: 0.9em;
    color: #555;
}


.category {
    margin-bottom: 40px;
}

.content-wrapper {
    padding: 0 15px; /* Adds side margins for text content */
}



/* Centers the entire filter area */
.filter-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0 40px 0;
    width: 100%;
}

/* Styles the "Filter by Category" text */
.filter-label {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    margin-right: 10px;
    color: #555;
}

/* Styles the dropdown box to look more professional */
.filter-select {
    padding: 8px 15px;
    border-radius: 20px;
    border: 1px solid #ddd;
    background-color: #fff;
    color: #333;
    outline: none;
    cursor: pointer;
}

.filter-select:focus {
    border-color: #4da6a5; /* Your teal color */
}

.d-none {
    display: none !important;
    visibility: hidden;
}

/* =========================================
   2. DESKTOP SPECIFIC (min-width: 769px)
   ========================================= */
@media (min-width: 769px) {
    .hero-logo {
        max-width: 500px;
        border-radius: 8px;
    }

    .header .business-name {
        display: block;      /* Forces it on its own line */
        width: 100%;         /* Full width of container */
        text-align: left;  /* Optional: center on desktop */
        margin-bottom: 10px; /* Space between name and nav */
    }

    .header nav {
        width: 100%;         /* Full width for nav below logo */
        justify-content: flex-start; /* Left-align links */
        flex-wrap: nowrap;   /* Keep links on one line if possible */
    }
}

/* =========================================
   3. MOBILE SPECIFIC (max-width: 768px)
   ========================================= */
@media (max-width: 768px) {
    .header .container {
        flex-direction: column;
        text-align: center;
        padding: 10px; /* Gives some breathing room */
    }


    /* Business name scales down */
    .header .business-name {
        font-size: 2.2rem !important;
        white-space: normal !important;
        line-height: 1.2;
        display: block;
    }

    /* Nav container MUST wrap */
    .header nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Nav links scale down on mobile */
    .header .nav-link-script {
        font-size: 1.1rem !important;  /* smaller font for mobile */
        line-height: 1;                 /* KEY FIX */
        margin: 4px 6px;               /* optional spacing */
    }






    /* --- CONSOLIDATED ADMIN BUTTON STYLE --- */
    .header .dropdown .btn,
    .admin-btn {
        font-family: 'Great Vibes', cursive !important; /* Force script font on mobile too */
        color: #000 !important;                    /* Match link color */
        font-size: 1.1rem !important;                 /* Matches .nav-link-script */
        padding: 0.1rem 0.4rem !important;            /* Tighten padding */
        width: auto !important;                       /* Prevents full-width stretching */
        display: inline-block !important;             /* Behaves like a text link */
        margin: 4px 6px !important;                   /* Matches other nav links spacing */
        text-align: center;
        border: 1px solid #000;                       /* Ensure border remains */
        background: transparent;                      /* Transparent background */
    }





    .about-container {
        flex-direction: column-reverse;
        margin: 10px;
    }

    .gallery {
        flex-direction: column;
        align-items: center;
    }


    .photo-card {
        width: 100%;      /* On phones, take up the full width */
        max-width: 350px; /* But don't let it get ridiculously huge */
    }

    .photo-grid {
        gap: 20px;        /* Slightly tighter spacing on phones */
    }

    /* --- Updated Mobile Hero --- */
    .hero-section {
        padding: 40px 0; /* Less padding on small screens */
    }

    .hero-text h1 {
        font-size: 2.2rem; /* Keeps the script font from being too huge on a phone */
    }

    .tagline {
        font-size: 1.3rem; /* Scales down the tagline for readability */
    }



    .content-wrapper {
        padding: 0 20px; /* Slightly more room on mobile */
    }


    .header.sticky-top {
        position: static;
    }



}

/* =========================================
   4. UTILITIES & FOOTER
   ========================================= */
.footer {
    background: #222 !important;
    color: #fff;
    padding: 40px 0 20px 0;
    text-align: center;
    margin-top: 30px;
    width: 100%;
}