/* General Styles - or at the top of the file */
.title-mobile {
    display: none !important; /* Hide mobile title by default */
}

.title-desktop {
    display: block; /* Show desktop title by default. Adjust to inline-block or inline if h1 was not block by default */
    /* text-align: center; /* Ensure desktop title is centered if not globally done for h1 */
    /* Add other h1 styles here if they are not inherited: font-size, margin-bottom, border-bottom etc. from base.css h1 */
}

/* === Responsive Adjustments for Various Screen Sizes === */

/* === Very Narrow Screens (e.g., iPhone SE/Mini, iPhone 12 Pro, etc.) === */
@media (max-width: 415px) {
    :root,
    html {
        /* No hardcoded navbar height here; JS will set it dynamically */
    }
    .day-heading {
        top: var(--navbar-height, 70px) !important;
    }
    .title-desktop {
        display: none !important;
    }
    .title-mobile {
        display: block !important;
        text-align: center;
    }
    

}

/* === Mobile and Tablet (max-width: 768px) === */
@media (max-width: 768px) { 
    /* Header Adjustments */
    .site-header {
        padding: 20px 15px;
    }
    

    .site-logo-large {
        height: 75px; /* Adjusted for tablet */
        width: 167px; /* Adjusted for tablet, maintaining aspect ratio */
        display: inline-block; /* Ensure it's displayed */
    }
    .site-slogan {
         font-size: 1.1em;
         margin-top: 10px;
    }

    /* Navbar Adjustments */
    nav {
        padding: 10px 15px;
        height: auto;
        min-height: 60px;
        justify-content: space-around;
        border-bottom: 3px solid black !important; 
    }
    .nav-links {
        gap: 15px;
        flex-wrap: wrap;
        justify-content: center;
    }
    nav a {
        font-size: 1.1em;
    }

    /* Main Content Grid stacks columns */
    .main-content-grid {
         grid-template-columns: 1fr;
    }
    .sidebar-column {
         position: static;
         margin-top: 20px;
    }

    /* Heading size adjustments */
    h1 { font-size: 1.8em; margin-bottom: 20px; }
    h2 { font-size: 1.4em; }
    h3 { font-size: 1.2em; }

    /* Sticky Top Values for Nav/Headers */
    .sticky-search-bar,
    .sticky-filter-area,
    .day-heading {
        /* Dynamic calculation preferred; no hardcoded top */
    }
    .day-heading {
        /* No negative margin needed; rely on border */
    }

    /* Responsive Calendar Table */
    .calendar-wrapper {
        /* No horizontal scrolling needed */
    }
    .calendar {
        min-width: unset; 
        width: 100%; 
        table-layout: auto; 
    }
    .calendar td {
         height: auto; 
         aspect-ratio: 1 / 1;
         padding: 4px; 
         vertical-align: top; 
    }
    .calendar .day-number {
        font-size: 0.8em;
        margin-bottom: 2px; 
    }
     .calendar td.today .day-number {
         width: 20px; 
         height: 20px;
         line-height: 20px;
         font-size: 0.75em; 
     }
    .calendar .event-display {
         font-size: 0.7em;
         gap: 2px;
         margin-top: 2px;
    }
    .calendar .event-icon {
         width: 1em;
         height: 1em;
    }
}

/* === Small Mobile Screens (max-width: 480px) === */
@media (max-width: 480px) {
    nav a {
        font-size: 1em;
    }
    .nav-links {
        gap: 10px;
    }
    .site-logo-large {
        height: 50px; /* Adjusted for small mobile */
        width: 111px; /* Adjusted for small mobile, maintaining aspect ratio */
        display: inline-block; /* Ensure it's displayed */
    }
    .site-slogan {
        font-size: 0.9em;
        margin-top: 8px;
    }
    .calendar .day-number {
        font-size: 0.7em;
    }
    .calendar .event-display {
         font-size: 0.6em;
    }
}

/* === Medium Screens (nav wrap, 769px-948px) === */
@media (min-width: 769px) and (max-width: 948px) {
    .nav-links {
        gap: 15px;
        flex-wrap: wrap;
        justify-content: center;
        padding-left: 10px;
        padding-right: 10px;
    }
    nav a {
        font-size: 1.15em;
    }
    nav {
        /* Let nav grow if items wrap; JS should update --navbar-height if needed */
        height: auto; 
        min-height: var(--navbar-height);
    }
}

@media (min-width: 769px) {
    .site-logo-large {
        height: 100px; /* Target desktop height from screenshot */
        width: 223px;  /* Target desktop width from screenshot */
        display: inline-block; /* Ensure it's displayed */
    }
}