/* homepage_mobile.css - mobile-first overrides for homepage.php */

/* Base reset tweaks for small screens */
html, body {
    height: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Final override: make flip-cards shorter on very small screens and clamp text to ~3 lines */
@media (max-width: 480px) {
    .flip-card {
        margin-bottom: 8px !important;
        overflow: visible !important;
    }
    .flip-card .flip-card-inner {
        aspect-ratio: 16 / 9 !important; /* slightly wider to reduce height */
        max-height: 30vh !important; /* shorter visible image area */
        min-height: 160px !important; /* keep reasonable minimum */
        overflow: visible !important;
    }
    .flip-card .card-image-top img {
        object-position: top center !important; /* show top of image first */
    }
    /* Make overlay text more prominent on small devices */
    .flip-card .card-body-bottom h5 {
        font-size: 1.6rem !important; /* larger title */
        line-height: 1.02 !important;
    }
    .flip-card .card-body-bottom p {
        font-size: 1.25rem !important; /* larger body text */
        line-height: 1.4 !important;
        max-height: 6.0rem !important; /* allow ~4 lines */
        overflow: hidden !important;
    }
}

/* Target the page's calendar markup and the kid-* announcement markup so the mobile preview matches the screenshot exactly */
@media (max-width: 480px) {
    /* Force-hide the server-rendered calendar and its header/grid so only the announcement card remains visible */
    .admin-calendar-wrap,
    .admin-calendar,
    .admin-calendar-header,
    .cal-grid,
    .cal-weekdays,
    .cal-days,
    .cal-row,
    .cal-cell,
    .cal-item,
    .cal-inner,
    .cal-title {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    /* Outer beige rounded container like the screenshot */
    .kid-announcements,
    .list-group.kid-announcements {
        width: calc(100% - 36px) !important;
        max-width: 360px !important;
        margin: 14px auto !important;
        padding: 18px !important;
        background: #f7e6d6 !important; /* warm beige */
        border-radius: 16px !important;
        box-shadow: 0 12px 32px rgba(2,10,22,0.18) !important;
        box-sizing: border-box !important;
    }

    /* Inner white announcement card */
    .kid-card {
        width: 100% !important;
        background: #ffffff !important;
        border-radius: 12px !important;
        padding: 14px !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: 14px !important;
        box-shadow: 0 8px 20px rgba(2,10,22,0.08) !important;
    }

    .kid-badge {
        width: 56px !important;
        height: 56px !important;
        flex: 0 0 56px !important;
        border-radius: 10px !important;
        font-size: 1.05rem !important;
        font-weight: 800 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 6px 14px rgba(2,10,22,0.06) !important;
    }

    .kid-content {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        display: block !important;
    }
    .kid-title { font-weight: 900 !important; color: #0b2230 !important; font-size: 1.02rem !important; margin: 0 0 6px 0 !important; }
    .kid-desc { margin: 0 !important; color: #6e7b83 !important; font-size: 0.9rem !important; }

    /* Date block placed inside the card and styled as a vertical pill similar to the screenshot */
    .kid-date-block {
        flex: 0 0 64px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        border-radius: 10px !important;
        padding: 8px 6px !important;
        background: linear-gradient(180deg, rgba(255,183,3,0.12), rgba(255,107,107,0.06)) !important;
        box-shadow: 0 6px 12px rgba(14,30,37,0.06) !important;
        color: #123 !important;
        margin-left: 6px !important;
    }
    .kid-date-day { font-size: 1.25rem !important; font-weight: 900 !important; color: #0b2230 !important; }
    .kid-date-month { font-size: 0.72rem !important; color: #e76b2a !important; font-weight: 700 !important; }
    .kid-date-year { font-size: 0.75rem !important; color: #6e7b83 !important; }

    /* Force row layout (avatar | content | date) to match screenshot */
    .kid-card {
        flex-direction: row !important;
        align-items: center !important;
    }
    .kid-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }
    .kid-row {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        justify-content: space-between !important;
    }
    .kid-date-block {
        margin-left: 8px !important;
        flex: 0 0 64px !important;
    }
    .kid-badge {
        flex: 0 0 56px !important;
        width: 56px !important;
        height: 56px !important;
    }

    /* Reduce outer padding on very small devices */
    @media (max-width: 360px) {
        .kid-announcements { padding: 12px !important; margin: 10px auto !important; width: 230px !important; max-width: 230px !important; }
        .kid-badge { width: 230px !important; height: 48px !important; flex: 0 0 48px !important; }
        .kid-date-block { flex: 0 0 56px !important; padding: 6px !important; }
    }
}

/* Strong override: force-hide any remaining calendar elements on narrow screens */
@media (max-width: 480px) {
    /* attribute + class + id based selectors to catch different calendar widgets */
    *[id*="calendar"],
    *[class*="calendar"],
    *[class*="datepicker"],
    *[class*="ui-datepicker"],
    *[class*="fullcalendar"],
    *[class*="fc-"],
    #homepageCalendar,
    #calendar,
    .calendar,
    .datepicker,
    .ui-datepicker,
    .fullcalendar,
    .fc,
    .calendar-widget,
    .fc-toolbar,
    .fc-view,
    .fc-daygrid,
    .fc-daygrid-day {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        max-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    /* If the calendar is wrapped inside a column or card, hide those common wrappers too */
    .calendar-column,
    .calendar-card,
    .widget-calendar,
    .widget--calendar,
    .card.calendar,
    .col-calendar {
        display: none !important;
    }
}

/* Container adjustments */
.container, .container-fluid {
    padding-left: 12px;
    padding-right: 12px;
}

/* Header */
.site-header .brand img {
    height: 40px; /* base mobile logo height (reduced) */
}
.site-header .brand img.sublogo {
    height: 28px; /* smaller secondary logo (reduced) */
}
.site-header .brand a {
    display: flex;
    align-items: center;
    gap: 8px;
}
.site-header .header-actions {
    display: none; /* hidden by default, revealed for mobile via media rule */
    gap: 8px;
    align-items: center;
}
.site-header .header-actions a,
.site-header .header-actions .btn {
    padding: 8px 10px;
    font-size: 0.95rem;
}

/* Carousel images: make them cover and keep aspect */
#homepageCarousel .carousel-item img {
    object-fit: cover;
    height: 220px;
}

/* Intro box */
.intro-box {
    padding: 16px;
}
.intro-box h3 {
    font-size: 1.05rem;
    margin-bottom: 6px;
}
.intro-box p {
    font-size: 0.9rem;
}

/* Flip-cards: stack vertically, full width */
.flip-card {
    width: 100%;
    perspective: 1000px;
}
.flip-card .card {
    border-radius: 10px;
    overflow: hidden;
}
.flip-card .card-image-top img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.flip-card .card-body-bottom h5 {
    font-size: 1rem;
    margin: 8px 0 4px 0;
}
.flip-card .card-body-bottom p {
    font-size: 0.85rem;
}

/* Large banner */
.large-banner {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, #f2f2f2, #e6e6e6);
    border-radius: 8px;
}

/* Footer */
footer .footer-icons .footer-icon {
    font-size: 1.1rem;
}

/* Mobile-specific footer tweaks: make icons and copyright smaller to fit narrow screens */
@media (max-width: 480px) {
    footer .footer-icons .footer-icon {
        font-size: 0.95rem; /* slightly smaller icon glyph */
    }
    /* reduce the clickable icon container so it doesn't overwhelm the footer */
    .footer-icon, .footer-icon.icon-only {
        width: 36px;
        height: 36px;
        padding: 0.15rem;
        border-radius: 6px;
    }
    .footer-icon i {
        font-size: 1.05rem; /* scale the <i> icon down */
    }
    /* Make copyright text smaller so it wraps better on small devices */
    footer .container > div:first-child {
        font-size: 0.78rem;
        line-height: 1.1;
    }
}

/* Mobile-only adjustment: enlarge the large-banner and prevent banner text from
   showing through the flip-card overlay by making the overlay fully opaque on
   narrow viewports. This lives only in homepage_mobile.css so desktop styles
   in homepage.css and index.php are unaffected. */
@media (max-width: 480px) {
    .large-banner {
        min-height: 360px !important; /* much larger vertical space requested */
        padding: 28px 26px !important; /* more internal breathing room */
        margin-top: 28px !important; /* greater separation from cards */
        /* reduce font size so long paragraph fits better on small screens */
        font-size: 0.78rem !important;
        line-height: 1.5 !important;
        box-sizing: border-box !important;
    }

    /* Make the overlay fully opaque on mobile so underlying banner text doesn't
       visually bleed through the semi-transparent gradient. Keep the same
       colors but remove alpha to preserve the look. */
    .flip-card .card-body-bottom {
        background: linear-gradient(135deg, rgba(255,197,197,1) 0%, rgba(255,238,180,1) 30%, rgba(191,234,252,1) 65%) !important;
        box-shadow: 0 12px 30px rgba(7,10,30,0.45) !important;
        border: 1px solid rgba(0,0,0,0.06) !important;
    }

}

/* Make modal forms full width on mobile */
.modal-dialog {
    margin: 0 8px;
}
.modal-content {
    border-radius: 8px;
}

/* Accessibility / touch targets */
a, button {
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
}

/* Utility tweaks */
.text-muted {
    font-size: 1.2rem;
}

/* Specific small-screen breakpoint (max-width: 480px) */
@media (max-width: 480px) {
    /* Slightly taller carousel images on very small screens so the mockup preview feels less cramped */
    #homepageCarousel .carousel-item img {
        height: 220px !important;
        max-height: 36vh; /* keep it proportional to viewport height */
    }
    /* Force smaller logos and hide the decorative sublogo on very small screens */
    .site-header .brand img {
        height: 28px !important;
    }
    /* Hide specific decorative image on very small screens */
    .site-header .brand img[src*="logopart1-nobg.png"] {
        display: none !important;
        height: 0 !important;
        width: 0 !important;
        visibility: hidden !important;
    }
    .site-header .brand img.sublogo {
        height: 0 !important;
        width: 0 !important;
        display: none !important; /* hide the decorative sublogo on very small screens */
        visibility: hidden !important;
    }
    .intro-box h3 { font-size: 0.98rem; }
    .flip-card .card-image-top img { height: 100% !important; }
    .large-banner { height: 100px; }
}

/* Remove the large top margin introduced by `mt-5` on very small screens so the
   banner sits closer to the cards. Targets `.row.mt-5` specifically to avoid
   changing other margin utilities elsewhere. */
@media (max-width: 480px) {
    .row.mt-5 {
        margin-top: 0 !important;
    }
}

/* Hide decorative header shapes on very small screens to match the screenshot */
@media (max-width: 480px) {
    .header-decor,
    .header-decor .shape,
    .header-decor .shape.circle,
    .header-decor .shape.star,
    .header-decor .shape.blob {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
}

/* Let flip-cards size to their content on very small screens so text-only backs
   expand only as needed instead of forcing a fixed aspect ratio. */
@media (max-width: 480px) {
    /* On mobile keep the overlay positioned over the image (like desktop)
       so the text sits on top of the picture instead of below it. We use
       a grid layout so front/back share the same area and the overlay can
       be absolutely positioned inside that area. */
    .flip-card .flip-card-inner {
        display: grid !important;
        grid-template-rows: 1fr !important;
        grid-auto-flow: row !important;
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
        max-height: 58vh !important;
    }
    .flip-card-front,
    .flip-card-back {
        grid-area: 1 / 1 !important;
        position: relative !important;
        backface-visibility: hidden !important;
    }
    .flip-card .card-image-top img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }
    /* Restore overlay positioning so it sits on the image */
    .card-body-bottom {
        position: absolute !important;
        left: 12px !important;
        right: 12px !important;
        bottom: 18px !important;
        padding: 0.8rem 1rem !important;
        border-radius: 12px !important;
        box-shadow: 0 8px 24px rgba(7,10,30,0.12) !important;
        background: linear-gradient(135deg, rgba(255,197,197,0.9) 0%, rgba(255,238,180,0.9) 30%, rgba(191,234,252,0.9) 65%) !important;
        z-index: 10 !important;
    }
    .flip-card-back .card,
    .flip-card-front .card {
        height: 100% !important;
    }
}

/* Increase text sizes inside the flip-card overlay and slightly reduce the image height
   so the overlay fits comfortably over the image on small screens. */
@media (max-width: 480px) {
    .flip-card .card-body-bottom h5 {
        font-size: 1.50rem !important; /* larger title */
        line-height: 1.02 !important;
    }
    .flip-card .card-body-bottom p {
        font-size: 1.08rem !important; /* larger body text */
        line-height: 1.36 !important;
        max-height: 5.0rem !important; /* clamp to ~3-4 lines */
        overflow: hidden !important;
    }
    /* shorten the visible flip-card area so image is less tall */
    .flip-card .flip-card-inner {
        aspect-ratio: 4 / 3 !important; /* wider, shorter than 16/9 */
        max-height: 40vh !important;
    }
}

/* Slightly larger phones / small tablets */
@media (min-width: 481px) and (max-width: 767px) {
    #homepageCarousel .carousel-item img { height: 200px; }
    .flip-card .card-image-top img { height: 100% !important; }
}

/* Make flip-cards taller on small screens so overlay content is visible
   Use portrait-ish aspect on very small screens and increase max-height to keep
   the card readable while preventing it from growing too large. */
@media (max-width: 480px) {
    .flip-card .flip-card-inner {
        aspect-ratio: 9 / 16 !important; /* taller portrait orientation */
        max-height: 58vh !important; /* proportional to viewport */
        min-height: 260px !important; /* ensure enough room for overlay */
    }
    .flip-card .card-image-top img {
        height: 100% !important;
        object-fit: cover !important;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    .flip-card .flip-card-inner {
        aspect-ratio: 4 / 3 !important; /* slightly taller than 16/9 */
        max-height: 42vh !important;
        min-height: 300px !important;
    }
}

/* Reveal header navigation and tweak spacing for small devices up to tablet widths */
@media (max-width: 767px) {
    /* Force header actions to be visible even if Bootstrap utilities hide them */
    .site-header .header-actions.d-none,
    .site-header .header-actions.d-none.d-md-block,
    .site-header .header-actions {
        display: flex !important; /* override Bootstrap's d-none */
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center;
    }
    .site-header {
        padding-top: 8px;
        padding-bottom: 8px;
    }
    /* Reduce main logo size and ensure sublogo is hidden */
    .site-header .brand img {
        height: 30px !important;
    }
    /* Show both logos on mobile (before burger) and adjust sizes */
    .site-header .brand img.mainlogo,
    .site-header .brand img[src*="logopart1-nobg.png"] {
        display: inline-block !important;
        height: 40px !important;
        width: auto !important;
        visibility: visible !important;
    }
    .site-header .brand img.sublogo {
        display: none !important;
        height: 0 !important;
        width: 0 !important;
        visibility: hidden !important;
    }
    .site-header .header-actions a {
        color: #222;
        text-decoration: none;
    }
    /* Make header actions more visible and touch-friendly */
    .site-header .header-actions {
        background: rgba(255,255,255,0.6);
        padding: 6px 8px;
        border-radius: 20px;
        z-index: 50; /* ensure nav sits above other header elements */
    }

    /* Move FAQ and Login out of the collapsed burger menu: hide them inside
       the collapsed .navbar-collapse and show them as header-action links
       beside the toggler on mobile. This targets elements with IDs or
       link text commonly used for FAQ/login entries; adjust selectors if
       your markup differs (e.g. different IDs or classes). */

    /* Hide FAQ/Login when they live inside the collapsed menu */
    .navbar-collapse .nav-item a[href*="faq"],
    .navbar-collapse .nav-item a[href*="Login"],
    .navbar-collapse .nav-item a[href*="login"],
    .navbar-collapse a#faq-link,
    .navbar-collapse a#login-link {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    /* Ensure header-actions container is visible and can hold the links beside the toggler */
    .site-header .header-actions {
        display: flex !important;
        gap: 8px !important;
        align-items: center !important;
    }

    /* Add visible FAQ/Login buttons beside the burger toggle. If your
       HTML already contains these links inside .header-actions, this
       rule just ensures they are visible and styled appropriately. */
    .site-header .header-actions a[href*="faq"],
    .site-header .header-actions a[href*="Login"],
    .site-header .header-actions a[href*="login"],
    .site-header .header-actions a#faq-link,
    .site-header .header-actions a#login-link {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 6px 10px !important;
        font-size: 0.95rem !important;
        text-decoration: none !important;
        color: #222 !important;
        background: transparent !important;
    }

    /* Hide original text-based FAQ/Login links inside the collapsed .header-actions (they live there on desktop but also get collapsed into #mobileNav) */
    /* Strongly hide the original links when rendered inside the collapsed mobile nav.
       We target multiple possible structures (direct children, anchors with IDs,
       and anchors by exact text) to ensure they won't appear inside the burger. */
    @media (max-width: 767px) {
        #mobileNav #openFaq,
        #mobileNav #openLogin,
        #mobileNav a[id^="openFaq"],
        #mobileNav a[id^="openLogin"],
        #mobileNav a[href*="faq"],
        #mobileNav a[href*="login"] {
            display: none !important;
            visibility: hidden !important;
            height: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
            overflow: hidden !important;
        }
    }

    /* Ensure our mobile duplicates are visible and touch-friendly */
    .mobile-header-actions a#openFaqMobile,
    .mobile-header-actions a#openLoginMobile {
        font-size: 0.95rem !important;
        color: #222 !important;
        text-decoration: none !important;
        background: transparent !important;
        border: none !important;
    }

    .mobile-header-actions a#openLoginMobile {
        padding: 6px 10px !important;
    }

    /* Make the mobile Log in button match the provided pill design */
    .mobile-header-actions a#openLoginMobile {
        background: linear-gradient(180deg, #ffd6c3 0%, #ffb59a 100%) !important; /* soft peach gradient */
        color: #0b2230 !important; /* dark text */
        border-radius: 28px !important; /* pill */
        box-shadow: 0 6px 12px rgba(7,10,30,0.12) !important;
        padding: 8px 14px !important;
        font-weight: 700 !important;
        border: none !important;
        min-height: 36px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Slightly reduce size on very small phones */
    @media (max-width: 360px) {
        .mobile-header-actions a#openLoginMobile {
            padding: 6px 10px !important;
            border-radius: 22px !important;
            font-size: 0.95rem !important;
        }
    }

    /* Prevent the mobile header actions from overlapping the burger icon.
       The inline `right` on the element is overridden with !important so the
       CSS can control placement across devices. Adjust values if your
       toggler width changes. */
    .mobile-header-actions {
        /* increase offset so the login button isn't too close to the burger */
        right: 92px !important; /* increased from 72px */
        /* ensure it stays vertically centered like the toggler */
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    /* Slightly smaller offset on very small phones to keep space balanced */
    @media (max-width: 360px) {
        /* keep a bit more breathing room on small phones while still fitting */
        .mobile-header-actions { right: 68px !important; }
    }
    .site-header .header-actions a {
        display: inline-block;
        padding: 6px 10px;
        margin-left: 4px;
        margin-right: 4px;
        font-weight: 600;
    }
    /* Stack collapsed navbar items vertically and make them full-width */
    .navbar-collapse .header-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        align-items: stretch !important;
        /* don't force full-bleed width — keep it aligned under the toggler */
        width: auto !important;
        min-width: 220px !important; /* reasonable minimum for touch targets */
        max-width: calc(100% - 48px) !important; /* leave side padding on very small screens */
        padding: 8px 12px !important;
        position: absolute !important;
        right: 12px !important; /* align to right side where toggler sits */
        top: 56px !important; /* place dropdown under header area */
        background: rgba(255,255,255,0.98) !important; /* opaque background so content is readable */
        border-radius: 10px !important;
        box-shadow: 0 6px 18px rgba(0,0,0,0.12) !important;
        z-index: 1050 !important;
    }
    .navbar-collapse .header-actions a,
    .navbar-collapse .header-actions .btn {
        width: auto !important;
        text-align: left !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    /* Ensure flip-card images fill their card area on small screens */
    .flip-card .flip-card-inner {
        aspect-ratio: 16 / 9; /* ensure a consistent card height */
    }
    .flip-card .card-image-top,
    .flip-card .card-image-top img {
        height: 100% !important;
        display: block !important;
        object-fit: cover !important;
        width: 100% !important;
    }
}

/* End of mobile stylesheet */

/* Mobile-specific background tweaks for playful shapes */
@media (max-width: 767px) {
    body {
        background-image: radial-gradient(700px 320px at 8% 18%, #fff6e9 0%, transparent 36%),
                          radial-gradient(480px 240px at 88% 78%, #ffe6f0 0%, transparent 36%),
                          linear-gradient(180deg, #e6f7ff 0%, #fff6e9 100%);
        background-attachment: scroll;
    }
    /*stars sa mobile*/
    .header-decor .shape {
        display: block; 
        opacity: 0.28; 
        transform: scale(0.72) translateZ(0); 
        pointer-events: none; 
    }
    /* Keep footer confetti / starfield visible but subtle on mobile */
    .footer::before {
        display: block;
        opacity: 0.18;
    }
}

/* Respect reduced motion on mobile as well */
@media (prefers-reduced-motion: reduce) {
    .header-decor .shape { animation: none !important; }
}

/* Mobile-specific outer-space override: simpler static nebula, no animation */
@media (max-width: 767px) {
    body {
        background-color: #07081a;
        /* Add repeating star layers on the main body background so motion is
           visible even when other stacking contexts exist. The star layers are
           placed before the nebula/gradient layers so they appear on top. */
        background-image:
            /* fine twinkle layer (small, dense dots) */
            radial-gradient(circle at 10% 15%, rgba(255,255,255,0.98) 0 0.6px, transparent 0.6px),
            radial-gradient(circle at 60% 30%, rgba(255,255,255,0.95) 0 0.9px, transparent 0.9px),
            /* softer medium dots */
            radial-gradient(circle at 30% 50%, rgba(255,255,255,0.92) 0 1.4px, transparent 1.4px),
            /* nebula and background gradients */
            radial-gradient(420px 200px at 12% 18%, rgba(83,60,153,0.12), transparent 36%),
            radial-gradient(360px 180px at 86% 72%, rgba(35,160,210,0.08), transparent 36%),
            linear-gradient(180deg, #091733 0%, #07081a 100%);
        /* Different layer sizes so the small dot layers repeat at a visible density */
        background-size: 160px 160px, 220px 220px, 320px 320px, auto, auto, auto;
        background-repeat: repeat, repeat, repeat, no-repeat, no-repeat, no-repeat;
        background-attachment: scroll;
        color: #e6eef8;
        /* Animate the background-position for the star layers to create visible motion */
        animation: star-bg-move 22s linear infinite;
        -webkit-animation: star-bg-move 22s linear infinite;
    }
    /* Make the mobile starfield bright and visible and add two lightweight layers
       (a drifting background and a subtle twinkling foreground). We keep motion
       gentle for performance but increase contrast so stars are readable. */
    body::before {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        display: block;
        /* Bright, clearly visible stars */
        opacity: 1; /* keep individual gradients' alpha for fine control */
        background-image:
            /* larger, brighter dots */
            radial-gradient(2.4px 2.4px at 10% 20%, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0) 45%),
            radial-gradient(2px 2px at 60% 30%, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0) 45%),
            /* medium dots */
            radial-gradient(1.6px 1.6px at 30% 45%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 45%),
            radial-gradient(1.2px 1.2px at 80% 70%, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0) 45%);
        background-repeat: repeat;
        /* Use different pattern scales so repeating dots don't align perfectly */
        background-size: 240px 240px, 220px 220px, 160px 160px, 120px 120px;
        mix-blend-mode: screen; /* helps stars pop against dark gradients */
        filter: drop-shadow(0 0 2px rgba(255,255,255,0.06));
        will-change: transform, opacity;
        /* Gentle slow drift to make movement visible on most devices */
        animation: starfield-drift 12s linear infinite;
        -webkit-animation: starfield-drift 12s linear infinite;
    }
    /* Keep header-decor visible but subtle and non-interactive on small screens */
    .header-decor {
        display: block;
        opacity: 0.16;
        pointer-events: none;
    }
    /* Add a lightweight keyframe animation for the starfield to show gentle movement */
    @keyframes starfield-drift {
        0%   { transform: translateY(0) translateX(0) scale(1); }
        50%  { transform: translateY(-12px) translateX(6px) scale(1.03); }
        100% { transform: translateY(0) translateX(0) scale(1); }
    }

    /* A second thin layer that twinkles slightly to increase perceived depth. */
    body::after {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        display: block;
        background-image:
            radial-gradient(0.9px 0.9px at 20% 30%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 40%),
            radial-gradient(0.7px 0.7px at 70% 80%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 40%);
        background-repeat: repeat;
        background-size: 80px 80px, 120px 120px;
        mix-blend-mode: screen;
        opacity: 0.95;
        animation: starfield-twinkle 3.8s ease-in-out infinite;
    }

    @keyframes starfield-twinkle {
        0%, 100% { opacity: 0.85; transform: scale(1); }
        50% { opacity: 1; transform: scale(1.06); }
    }
    /* Background-position animation for the body star layers to create clear motion */
    @keyframes star-bg-move {
        0% { background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px; }
        50% { background-position: -120px -60px, 80px -40px, -60px 100px, 0px 0px, 0px 0px, 0px 0px; }
        100% { background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px; }
    }
    /* Make intro box and cards slightly more opaque for readability */
    .intro-box, .card { background-color: rgba(10,12,25,0.95); }
}

/* Respect reduced motion explicitly on mobile */
@media (prefers-reduced-motion: reduce) {
    body::before { display: none !important; }
}

/* End mobile overrides for outer-space theme */

/* Hide the intro card (the pink/gradient panel with CTA) on small screens
   Matches the element rendered with class names `.intro-full` / `.intro-box` / `.card-body-bottom`.
   We scope this to mobile widths to avoid affecting desktop view. */
@media (max-width: 480px) {
    /* Keep the intro-full / intro-box hidden on narrow screens, but DO NOT hide
       the flip-card overlay (`.card-body-bottom`) so cards remain readable. */
    .intro-full,
    .intro-box {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    /* Ensure the flip-card overlay is visible on mobile (undo earlier hide). */
    .card-body-bottom {
        display: block !important;
        visibility: visible !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0.8rem 1rem !important;
    }
}

/* Ensure header shapes are hidden on mobile as well */
.header-decor,
.header-decor .shape,
.header-decor .shape.circle,
.header-decor .shape.star,
.header-decor .shape.blob {
    /* Keep decorative shapes visible on mobile. Reduce size/opacity instead of removing them entirely. */
    display: block !important;
    width: auto !important;
    height: auto !important;
    opacity: 0.28 !important;
    background: none !important; /* preserve SVG/background images if used */
    box-shadow: none !important;
    pointer-events: none !important;
}

/* Hide calendar widgets on small screens and style announcements to match mobile design */
@media (max-width: 480px) {
    /* Hide common calendar elements (FullCalendar, datepicker, custom calendar containers) */
    #calendar,
    .calendar,
    .datepicker,
    .ui-datepicker,
    .fc,
    .fullcalendar,
    .calendar-widget {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    /* Announcements outer container (keeps the rounded card visible like the screenshot) */
    .announcements,
    .announcements-list,
    .announcement-wrapper {
        background: linear-gradient(180deg, #fffaf6 0%, #fff8f2 100%);
        border-radius: 12px;
        padding: 14px;
        box-shadow: 0 8px 24px rgba(4,14,28,0.12);
        margin: 10px 0;
    }

    /* Individual announcement card style */
    .announcement-card,
    .announcement-item {
        display: flex;
        align-items: center;
        gap: 12px;
        background: #ffffff;
        border-radius: 12px;
        padding: 12px 12px 12px 12px;
        box-shadow: 0 6px 18px rgba(2,10,22,0.06);
    }

    /* Left avatar / initial block */
    .announcement-avatar {
        width: 48px;
        height: 48px;
        min-width: 48px;
        border-radius: 10px;
        background: #f2b21a; /* yellow */
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-size: 1.05rem;
    }

    /* Body (title + text) */
    .announcement-body {
        flex: 1 1 auto;
        min-width: 0; /* allow text truncation */
    }
    .announcement-title {
        font-weight: 800;
        color: #0b2230;
        font-size: 1rem;
        margin: 0 0 4px 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .announcement-text {
        margin: 0;
        font-size: 0.9rem;
        color: #6a7780;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Right date pill */
    .announcement-date {
        background: #ffffff;
        border-radius: 10px;
        padding: 6px 10px;
        text-align: center;
        min-width: 56px;
        box-shadow: 0 2px 8px rgba(2,10,22,0.06);
        flex: 0 0 auto;
    }
    .announcement-date .day {
        font-size: 1.25rem;
        font-weight: 900;
        color: #0b2230;
        display: block;
        line-height: 1;
    }
    .announcement-date .month {
        font-size: 0.72rem;
        color: #e76b2a;
        display: block;
        margin-top: 2px;
        font-weight: 700;
    }

    /* Ensure announcement layout stays compact on very narrow screens */
    .announcement-card {
        gap: 10px;
    }

    /* Exact layout to mirror the screenshot: beige rounded outer area with a white announcement card */
    .announcements-container,
    .announcements-wrapper,
    .announcements,
    .announcements-list {
        width: calc(100% - 36px);
        max-width: 360px;
        margin: 14px auto;
        padding: 18px;
        background: #f7e6d6; /* soft beige */
        border-radius: 16px;
        box-shadow: 0 12px 32px rgba(2,10,22,0.18);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
    }

    /* Inner white card that holds the announcement content */
    .announcement-card,
    .announce-card,
    .announcement-item {
        width: 100%;
        background: #ffffff;
        border-radius: 12px;
        padding: 12px 14px;
        display: flex;
        align-items: center;
        gap: 14px;
        box-shadow: 0 8px 20px rgba(2,10,22,0.08);
    }

    /* Avatar / initial square */
    .announcement-avatar,
    .announce-avatar,
    .ann-avatar {
        width: 56px;
        height: 56px;
        min-width: 56px;
        border-radius: 10px;
        background: #f5b81a; /* bright yellow */
        color: #ffffff;
        font-weight: 800;
        font-size: 1.05rem;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 6px 14px rgba(2,10,22,0.06);
    }

    /* Title + short description */
    .announcement-body,
    .announce-body {
        flex: 1 1 auto;
        min-width: 0;
        display: block;
    }
    .announcement-title,
    .announce-title {
        display: block;
        font-weight: 900;
        color: #0b2230;
        font-size: 1.02rem;
        margin: 0 0 4px 0;
    }
    .announcement-text,
    .announce-text {
        display: block;
        margin: 0;
        font-size: 0.9rem;
        color: #6e7b83;
    }

    /* Date pill on the right */
    .announcement-date,
    .announce-date {
        flex: 0 0 auto;
        min-width: 56px;
        background: #ffffff;
        border-radius: 10px;
        padding: 6px 10px;
        text-align: center;
        box-shadow: 0 3px 10px rgba(2,10,22,0.06);
    }
    .announcement-date .day,
    .announce-date .day {
        font-weight: 900;
        font-size: 1.25rem;
        color: #0b2230;
        line-height: 1;
    }
    .announcement-date .month,
    .announce-date .month {
        font-size: 0.72rem;
        color: #e76b2a;
        font-weight: 700;
        margin-top: 2px;
    }

    /* Tighten spacing for very small screens */
    @media (max-width: 360px) {
        .announcements-container,
        .announcements-wrapper,
        .announcements-list {
            padding: 12px;
            margin: 10px auto;
            max-width: 320px;
        }
        .announcement-avatar { width: 48px; height: 48px; min-width:48px; }
        .announcement-date { min-width: 50px; padding: 6px 8px; }
    }
}

/* Make footer fixed to the bottom of the viewport on narrow/mobile screens.
   This only affects the footer; header rules are intentionally left unchanged. */
@media (max-width: 480px) {
    footer {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 9999 !important;
        width: 100% !important;
        /* Keep the footer background so it still reads as part of the page */
        background-clip: padding-box !important;
    }
    /* Reserve vertical space so page content (announcements) isn't hidden by the fixed footer */
    body {
        padding-bottom: 84px !important; /* tweak if footer height changes */
    }
}