/* Home page ("Screen 1"): sticky dark-blue top bar, horizontal category
   pills, at-a-glance widgets (What's On / Nearby / Featured / Favourites),
   and a bottom tab bar. Builds on css/common.css (the .app-container shell,
   .search-container, .hidden, .search-results). */

/* --header-blue now lives in css/common.css's :root, shared by every page. */

/* Top bar */
.home-topbar {
    background: transparent;
    color: white;
    padding: 16px 20px 12px 20px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.home-topbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.home-topbar-title {
    color: white;
    text-shadow: 3px 3px 10px black;
    font-size: 2.15rem;
    letter-spacing: 2.5px;
    margin: 0;
}

.topbar-icon-btn {
    background: rgba(255,255,255,0.15);
    border: none;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1rem;
    cursor: pointer;
    flex-shrink: 0;
}

.home-topbar-sub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.9);
}

.home-weather {
    font-weight: 600;
    color: inherit;
    text-decoration: none;
    /* No nowrap: the practical notes (js/home.js's renderWeather) can push
       this past one line on a narrow phone - wrapping beats clipping or an
       overflowing sticky header. Now a link to /weather/ - inherits the
       topbar's own text colour rather than the browser's default link
       blue/underline. */
}

/* Horizontal pill nav */
.home-pill-nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 18px 20px;
    scrollbar-width: none;
}
.home-pill-nav::-webkit-scrollbar { display: none; }

.pill {
    background-color: var(--bg-beige);
    color: var(--text-dark);
    padding: 10px 18px;
    border-radius: 20px;
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    flex-shrink: 0;
}

.pill.active {
    background-color: var(--header-blue);
    color: white;
}

/* Re-anchor the shared .search-container/.search-input (common.css) below
   the pill nav instead of directly under the header, per this layout. */
.home-app-container .search-container {
    padding: 0 20px 16px 20px;
}

.home-content {
    padding: 0 20px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.home-section-title {
    font-size: 0.85rem;
    color: var(--bg-beige);
    text-shadow: 2px 2px black;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
    font-weight: 700;
}

.home-loading, .home-empty {
    color: var(--text-light);
    font-size: 0.85rem;
    padding: 10px 0;
}

/* What's On: a festival bundle banner (server/data/bundleStore.js, shown
   while enabled) or, absent one, a card for the soonest upcoming one-off
   event town-wide. Two distinct looks so a real festival reads as more of
   an event than an everyday listing. */
.whats-on-bundle {
    position: relative;
    /* A themed bundle's own gradient (--t-bg, set inline by js/theme.js)
       wins; unthemed bundles keep the standard blue. */
    background: var(--t-bg, linear-gradient(135deg, var(--header-blue) 0%, #4facfe 100%));
    border-radius: var(--radius);
    padding: 18px;
    color: white;
    box-shadow: 0 4px 10px rgba(30, 96, 145, 0.4);
    margin-bottom: 10px;
    display: block;
    text-decoration: none;
}
.whats-on-bundle:last-child { margin-bottom: 0; }

/* "Coming soon" - within a bundle's advance-notice window but not
   actually running yet (server/data/bundleStore.js's 'upcoming' status) -
   a softer, cooler gradient than the "on now" one so the two read as
   distinct at a glance. A themed bundle keeps its own colours (--t-bg). */
.whats-on-bundle.upcoming {
    background: var(--t-bg, linear-gradient(135deg, #6c757d 0%, #adb5bd 100%));
    box-shadow: 0 4px 10px rgba(108, 117, 125, 0.4);
}

/* Timing badge (NOW / TONIGHT / TOMORROW / a weekday name - see
   server/data/bundleStore.js's timingLabel), overlaid top-right rather
   than taking its own line, so the card reads name-first. */
.whats-on-timing-badge {
    position: absolute;
    top: 12px;
    right: 14px;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    background: rgba(255,255,255,0.25);
    padding: 3px 8px;
    border-radius: 10px;
}

.whats-on-bundle-name {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 4px;
    padding-right: 70px;
}

.whats-on-bundle-desc {
    font-size: 0.85rem;
    opacity: 0.9;
}

.whats-on-event {
    position: relative;
    background: var(--t-bg), var(--card-white);
    border-radius: var(--radius);
    padding: 5px;
    box-shadow: var(--shadow);
    /* The venue's theme border colour (--t-border) replaces the alert red
       when the venue is themed; unthemed venues keep the red "what's on"
       accent. */
    border-left: 5px solid var(--t-border, var(--danger));
    text-decoration: none;
    display: block;
    color: inherit;
    margin-bottom: 10px;
}
.whats-on-event-card {
    padding: 10px;
    border-radius: var(--radius);
    width: 100%;
    height: 100%;
    background: #FFFFFF80;

}
.whats-on-event:last-child { margin-bottom: 0; }

.whats-on-timing-badge.on-light {
    background: var(--bg-beige);
    color: var(--primary-blue);
}

/* One card per venue (server/data/eventGrouping.js's groupByVenue) - the
   venue name reads as the card's heading, with up to three of its own
   upcoming things listed below (js/home.js's renderEventVenueCard). */
.whats-on-event-venue { font-size: 1.1rem; color: var(--t-heading, var(--text-dark)); font-weight: 700; margin-bottom: 6px; padding-right: 70px; }
.whats-on-event-list { list-style: none; }
.whats-on-event-list li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.85rem;
    padding: 4px 0;
}
.whats-on-event-list li + li { border-top: 1px solid var(--bg-beige); }
.whats-on-event-item-title { color: var(--text-dark); font-weight: 600; }
.whats-on-event-item-when { color: var(--text-light); white-space: nowrap; }

/* What's Nearby: two side-by-side compact cards */
.nearby-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.nearby-card {
    background: var(--card-white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: block;
}

.nearby-card-thumb {
    height: 80px;
    background-size: cover;
    background-position: center;
    background-color: var(--bg-beige);
}

.nearby-card-body { padding: 10px 12px; }
.nearby-card-name { font-size: 0.85rem; font-weight: 700; color: var(--text-dark); margin-bottom: 3px; }
.nearby-card-distance { font-size: 0.75rem; color: var(--primary-blue); font-weight: 600; }

/* Featured carousel: horizontal swipe, large rounded photo previews */
.carousel {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
    scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }

.carousel-card {
    flex: 0 0 auto;
    width: 200px;
    scroll-snap-align: start;
    text-decoration: none;
    color: inherit;
}

.carousel-card-photo {
    width: 200px;
    height: 130px;
    border-radius: var(--radius);
    background-size: cover;
    background-position: center;
    background-color: var(--bg-beige);
    box-shadow: var(--shadow);
    margin-bottom: 8px;
}

.carousel-card-name { font-size: 0.9rem; font-weight: 700; color: var(--text-dark); }
.carousel-card-desc { font-size: 0.75rem; color: var(--text-light); margin-top: 2px; }

/* Local Favourites: compact horizontal cards (photo left, text right) */
.favorites-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.favorite-card {
    display: flex;
    gap: 12px;
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 10px;
    text-decoration: none;
    color: inherit;
    align-items: center;
}

/* A listing's own theme rides on the card (js/home.js) - the vars live
   in the card's style attribute and everything inside consumes them. */
.favorite-card.themed {
    background: var(--t-card-bg, linear-gradient(135deg, #4facfe 0%, #00f2fe 100%));
}
.favorite-card.themed .favorite-card-headline { color: var(--t-heading, var(--text-dark)); }
.favorite-card.themed .favorite-card-name { color: var(--t-text, var(--text-light)); }
/* The emoji thumb shows the listing's own gradient when themed (the
   neutral no-photo panel is only the unthemed fallback). */
.favorite-card.themed .favorite-card-thumb.no-photo {
    background-image: var(--t-bg, none);
    background-color: transparent;
}

.favorite-card-thumb {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    flex-shrink: 0;
    background-image: var(--t-bg, none);
    background-size: cover;
    background-position: center;
    background-color: var(--bg-beige);
}

.favorite-card-body {
    min-width: 0;
    flex: 1; 
    border-radius: 5px;
    height: 4rem;
    align-content: center;
    padding: 0.5rem;
    background-color: rgba(255,255,255,0.35);
}

.favorite-card-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.favorite-card-headline { font-size: 0.9rem; font-weight: 700; color: var(--text-dark); }
.favorite-card-name { font-size: 0.8rem; color: var(--text-light); margin-top: 2px; }

/* Same badge as a listing card's .distance (css/listing.css) - duplicated
   here since the home page doesn't load listing.css. */
.distance {
    background: var(--bg-beige);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--primary-blue);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Bottom tab bar CSS now lives in css/common.css (shared partial,
   server/views/partials/bottom-nav.ejs, included from every page except
   /account/, /login/, /admin/). */