/* ===== LOGO STYLES - CONSOLIDATED ===== */
/* All logo styling in one place for easy maintenance */

/* ======================
   LOGO BASE STYLES
   ====================== */

/* Default logo styles (desktop) */
.logo h1 {
    font-family: 'Lato', sans-serif !important;
    font-weight: 100 !important;
    color: var(--accent-color) !important;
    white-space: nowrap !important;
    overflow: visible !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    letter-spacing: 0px !important;
    font-size: 55px !important; /* Desktop default size */
}

/* Logo container styling */
.logo.text-center {
    max-width: 100%;
    overflow: hidden;
}

/* ======================
   SPECIAL LOGO VARIANTS
   ====================== */

/* "Book Preview" title styling (desktop) */
.logo h1.book-preview-title {
    font-size: 50px !important;
    font-weight: 200 !important;
    letter-spacing: 0px !important;
}

/* Mobile menu logo base styles */
.mobmenu .logo h1 {
    font-family: 'Lato', sans-serif !important;
    font-weight: 300 !important;
    color: var(--accent-color) !important;
    white-space: nowrap !important;
    overflow: visible !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    letter-spacing: 0px !important;
    text-align: center !important;
    font-size: 60px !important; /* Mobile menu default size */
}

/* "Book Preview" title in mobile menu */
.mobmenu .logo h1.book-preview-title {
    font-size: 60px !important;
    letter-spacing: -1px !important;
    color: var(--accent-color) !important;
}

/* ======================
   RESPONSIVE BREAKPOINTS
   ====================== */

/* Tablets and small desktops (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .logo h1 {
        font-size: 60px !important;
    }
    
    .logo h1.book-preview-title {
        font-size: 60px !important;
    }
}

/* Mobile devices (max-width: 767px) */
@media (max-width: 767px) {
    .logo h1 {
        font-size: 60px !important;
        letter-spacing: -1px !important;
    }

    .mobmenu .logo h1 {
        font-size: 60px !important;
        letter-spacing: -1px !important;
    }

    .mobmenu .logo h1.book-preview-title {
        font-size: 60px !important;
        letter-spacing: -1px !important;
    }
}

/* Small mobile devices (max-width: 575px) */
@media (max-width: 575px) {
    .logo h1 {
        font-size: 55px !important;
        letter-spacing: -1px !important;
    }

    .mobmenu .logo h1 {
        font-size: 55px !important;
        letter-spacing: -1px !important;
    }

    .mobmenu .logo h1.book-preview-title {
        font-size: 55px !important;
        letter-spacing: -1px !important;
    }
}


/* Extra small mobile devices (max-width: 480px)  */ 
@media (max-width: 480px) {
    .logo h1 {
        font-size: 45px !important;
        letter-spacing: -2px !important;
    }

    .mobmenu .logo h1 {
        font-size: 45px !important;
        letter-spacing: -2px !important;
    }

    .mobmenu .logo h1.book-preview-title {
        font-size: 45px !important;
        letter-spacing: -2px !important;
    }
   
}


/* ======================
   MOBILE MENU LAYOUT
   ====================== */

/* Mobile menu layout improvements */
.mobmenu {
    display: none; /* Hide by default */
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.mobmenu .logo {
    flex: 1;
    order: 2;
    text-align: center;
    margin: 0 10px;
    padding: 5px 0;
}

.mobmenu .menu-toggler {
    order: 1;
    flex: 0 0 auto;
}

.mobmenu .menu-toggler:last-of-type {
    order: 3;
}

/* Show/hide mobile and desktop menus based on screen size */
@media (max-width: 768px) {
    .mobmenu {
        display: flex !important;
    }

    .deskHEader {
        display: none !important;
    }
}

/* ======================
   OVERRIDE CONFLICTING STYLES
   ====================== */

/* Override any navbar-brand styles that might conflict */
.navbar-brand.logo h1,
.navbar-brand .logo h1 {
    font-size: inherit !important;
}

/* Ensure logo links don't have conflicting styles */
.logo a,
.logo a:hover,
.logo a:visited {
    color: inherit !important;
    text-decoration: none !important;
}