/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 8-Point Grid System Base (1rem = 8px base unit) */
:root {
    --grid-unit: 0.5rem; /* 8px base unit */
    --grid-2: calc(var(--grid-unit) * 2); /* 16px */
    --grid-3: calc(var(--grid-unit) * 3); /* 24px */
    --grid-4: calc(var(--grid-unit) * 4); /* 32px */
    --grid-5: calc(var(--grid-unit) * 5); /* 40px */
    --grid-6: calc(var(--grid-unit) * 6); /* 48px */
    --grid-8: calc(var(--grid-unit) * 8); /* 64px */
    --grid-10: calc(var(--grid-unit) * 10); /* 80px */
    --grid-12: calc(var(--grid-unit) * 12); /* 96px */
    
    /* Civic Night Blue Theme - 60-30-10 */
    --color-dominant: #0e1b2b;       /* deep navy */
    --color-secondary: #142d44;      /* mid navy */
    --color-accent: #1f6feb;         /* vivid blue */
    --color-text-primary: #e8f0ff;   /* light text */
    --color-text-secondary: #b8c8e8; /* muted light text */
    --color-accent-bright: #3fb8ff;  /* bright cyan */
}

/* Digital Signage Typography Rules */
html {
    font-size: clamp(14px, 1.2vw, 24px); /* Base font: 14px-24px viewport scaling - tighter */
}

body {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, sans-serif;
    background: radial-gradient(circle at 20% 20%, rgba(63, 184, 255, 0.08), transparent 35%),
                radial-gradient(circle at 80% 10%, rgba(31, 111, 235, 0.12), transparent 35%),
                linear-gradient(135deg, var(--color-dominant) 0%, var(--color-secondary) 55%, #0a1523 100%);
    height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--color-text-primary);
    overflow: hidden; /* No scrolling */
    font-size: 0.95rem; /* Body text: tighter */
    font-weight: 500;
    line-height: 1.3; /* Tighter line height */
}

/* Top Banner - Centered client name */
.top-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--grid-2) var(--grid-4); /* 16px 32px - tighter spacing */
    background: rgba(20, 45, 68, 0.9); /* secondary with transparency */
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: var(--grid-unit) solid var(--color-accent-bright); /* 8px accent border */
    box-shadow: 0 var(--grid-2) var(--grid-6) rgba(0, 0, 0, 0.4),
                0 0 0 1px rgba(255, 255, 255, 0.12) inset;
    width: 100%;
    min-height: var(--grid-8); /* 64px - tighter */
    position: relative;
    z-index: 100;
    animation: slideDown 0.6s ease-out;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Client Name - h1: tighter */
.client-name {
    font-size: clamp(1.6rem, 2.5vw, 2.2rem); /* h1: tighter */
    font-weight: 800; /* Extra bold for DOOH readability, high contrast */
    color: var(--color-text-primary);
    letter-spacing: 0.05rem; /* Tighter */
    margin: 0;
    line-height: 1.1; /* Tighter for headings */
    white-space: nowrap;
    text-transform: uppercase; /* Common DOOH practice for headers */
    text-align: center;
    flex: 1 1 auto;
}

.banner-logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 220px;
    gap: var(--grid-2);
}

.logo-image {
    max-width: var(--grid-12);
    max-height: var(--grid-12);
    width: auto;
    height: auto;
    object-fit: contain;
}

.logo-fallback {
    display: none;
    width: var(--grid-12);
    height: var(--grid-12);
    border-radius: var(--grid-unit);
    background: rgba(63, 184, 255, 0.14);
    color: var(--color-accent-bright);
    align-items: center;
    justify-content: center;
    font-size: var(--grid-6);
    font-weight: 800;
}

.banner-time {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: var(--grid-unit);
    flex: 0 0 200px;
    white-space: nowrap;
}

.current-time {
    font-size: clamp(1.1rem, 1.6vw, 1.5rem); /* Tighter */
    font-weight: 800;
    color: var(--color-accent-bright);
    line-height: 1.1; /* Tighter */
    letter-spacing: 0.05rem; /* Tighter */
}

.current-date {
    font-size: 0.85rem; /* Tighter */
    font-weight: 600;
    color: var(--color-text-secondary);
    line-height: 1.2; /* Tighter */
}

/* Main Content Area - 8-point grid spacing, no scrolling */
.main-content {
    flex: 1;
    width: 100%;
    padding: var(--grid-2) var(--grid-4); /* Tighter padding */
    overflow: hidden; /* No scrolling */
    animation: fadeIn 1s ease-out 0.8s both;
    display: flex;
    align-items: center; /* Center vertically */
    justify-content: center;
    min-height: 0; /* Allow flex shrinking */
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.content-container {
    max-width: 1400px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--grid-2); /* 16px between sections - tighter spacing */
    justify-content: flex-start; /* start from top */
    overflow: hidden;
}

/* Typography for dynamic content */
.content-container h2,
.section-title {
    font-size: clamp(1.3rem, 1.8vw, 1.6rem); /* h2: tighter */
    font-weight: 800; /* Bold for signage */
    color: var(--color-text-primary);
    margin: 0 0 var(--grid-2) 0; /* 16px bottom margin - tighter */
    line-height: 1.2; /* Tighter line height */
    text-transform: uppercase;
    letter-spacing: 0.05rem; /* Tighter */
}

.content-container p {
    font-size: 0.95rem; /* Body text: tighter */
    font-weight: 500;
    color: var(--color-text-secondary);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
    margin: 0 0 var(--grid-unit) 0; /* 8px bottom margin - tighter */
    line-height: 1.3; /* Tighter line height */
}

.content-container .card {
    background: rgba(255, 255, 255, 0.7); /* Light background with transparency */
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: var(--grid-unit) solid rgba(255, 108, 26, 0.3); /* 8px accent border */
    border-radius: var(--grid-2); /* 16px */
    padding: var(--grid-4) var(--grid-5); /* 32px 40px - generous padding */
    box-shadow: 0 var(--grid-2) var(--grid-4) rgba(0, 0, 0, 0.1);
    margin-bottom: var(--grid-3); /* 24px margin - generous spacing */
}

/* Announcements */
.announcements-section {
    padding: var(--grid-2) var(--grid-3); /* Tighter padding */
    display: flex;
    flex-direction: column;
    gap: var(--grid-2); /* Tighter gap */
}

.announcements-row {
    display: flex;
    flex-direction: column; /* stack vertically */
    gap: var(--grid-2); /* Tighter gap */
}

.announcement-card {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    background: rgba(31, 111, 235, 0.10);
    border: var(--grid-unit) solid rgba(63, 184, 255, 0.35);
    border-radius: var(--grid-2);
    padding: var(--grid-2) var(--grid-3); /* Tighter padding */
    box-shadow: 0 var(--grid-unit) var(--grid-3) rgba(0, 0, 0, 0.25);
    width: 100%; /* full width */
}

.announcement-title {
    font-size: clamp(1.0rem, 1.5vw, 1.3rem); /* Tighter */
    font-weight: 800;
    color: var(--color-text-primary);
    line-height: 1.2; /* Tighter */
    margin-bottom: var(--grid-unit); /* Tighter */
    letter-spacing: 0.03rem; /* Tighter */
    text-transform: uppercase;
}

.announcement-body {
    font-size: 0.9rem; /* Tighter */
    font-weight: 600;
    color: var(--color-text-secondary);
    line-height: 1.3; /* Tighter */
}

.announcement-empty {
    font-size: 0.9rem; /* Tighter */
    font-weight: 600;
    color: var(--color-text-secondary);
    padding: var(--grid-2) var(--grid-3); /* Tighter padding */
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--grid-2);
}

/* Calendars Section */
.calendars-section {
    padding: var(--grid-2) var(--grid-3); /* Tighter padding */
    display: flex;
    flex-direction: column;
    gap: var(--grid-2); /* Tighter gap */
}

.calendars-container {
    display: flex;
    flex-direction: column;
    gap: var(--grid-2); /* Tighter gap */
    width: 100%;
}

.calendar-event-card {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    background: rgba(31, 111, 235, 0.10);
    border: var(--grid-unit) solid rgba(63, 184, 255, 0.35);
    border-left-width: 4px; /* Will be overridden by inline style for calendar color */
    border-radius: var(--grid-2);
    padding: var(--grid-2) var(--grid-3); /* Tighter padding */
    box-shadow: 0 var(--grid-unit) var(--grid-3) rgba(0, 0, 0, 0.25);
    width: 100%;
    gap: var(--grid-unit); /* Tighter gap */
}

.calendar-event-header {
    display: flex;
    align-items: stretch; /* Stretch to make all elements same height */
    gap: var(--grid-3); /* Gap between time, date-day-group, and title-location-group */
}

.calendar-event-time {
    font-size: clamp(1.2rem, 2vw, 1.8rem); /* Bigger time */
    font-weight: 700;
    color: var(--color-text-primary);
    white-space: nowrap;
    padding: var(--grid-2) var(--grid-3); /* More padding for bigger time */
    background: rgba(31, 111, 235, 0.2);
    border-radius: var(--grid-unit);
    border: 1px solid rgba(31, 111, 235, 0.4);
    flex-shrink: 0; /* Don't shrink time */
    display: flex;
    align-items: center; /* Center time vertically */
    justify-content: center; /* Center time horizontally */
    align-self: stretch; /* Stretch to match other elements height */
    min-width: clamp(5rem, 8vw, 7rem); /* Fixed minimum width so "All Day" matches regular times */
    width: clamp(5rem, 8vw, 7rem); /* Fixed width for consistency */
}

.calendar-event-date-day-group {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center date and day vertically */
    gap: calc(var(--grid-unit) * 0.5); /* Small gap between date and day */
    flex-shrink: 0; /* Don't shrink date-day-group */
    align-self: stretch; /* Stretch to full height */
}

.calendar-event-day {
    font-size: clamp(0.75rem, 1vw, 0.9rem); /* Tighter */
    font-weight: 700;
    color: var(--color-accent-bright);
    text-transform: uppercase;
    letter-spacing: 0.03rem; /* Tighter */
    white-space: nowrap;
}

.calendar-event-date-text {
    font-size: clamp(0.7rem, 0.9vw, 0.85rem); /* Tighter */
    color: var(--color-text-secondary);
    font-weight: 500;
    white-space: nowrap;
}

.calendar-event-title-location-group {
    display: flex;
    flex-direction: column; /* Title and location stacked vertically */
    justify-content: center; /* Center vertically */
    gap: calc(var(--grid-unit) * 0.5); /* Small gap between title and location */
    flex: 1; /* Take remaining space */
    align-self: stretch; /* Stretch to full height */
}

.calendar-event-title {
    font-size: clamp(1.0rem, 1.5vw, 1.3rem); /* Tighter */
    font-weight: 800;
    color: var(--color-text-primary);
    line-height: 1.2; /* Tighter */
    margin: 0; /* No margin, gap handled by parent */
    letter-spacing: 0.03rem; /* Tighter */
    min-width: 0; /* Allow shrinking */
}

.calendar-event-location {
    font-size: clamp(0.8rem, 1vw, 0.9rem); /* Tighter */
    color: var(--color-text-secondary);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: calc(var(--grid-unit) * 0.5); /* Tighter gap */
}

.calendar-event-location::before {
    content: "📍";
    font-size: 1rem;
}

.calendar-event-source {
    font-size: clamp(0.7rem, 1vw, 0.85rem);
    font-weight: 600;
    margin-top: var(--grid-unit);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.85;
}

/* Rich Announcements */
.rich-announcements-section {
    padding: var(--grid-3) var(--grid-4); /* More padding */
    display: flex;
    flex-direction: column;
    gap: var(--grid-3); /* More gap */
}

.rich-announcement-card {
    display: grid;
    grid-template-columns: minmax(250px, 40%) 1fr; /* Bigger image area */
    gap: var(--grid-4); /* More gap between image and content */
    background: rgba(20, 45, 68, 0.75);
    border: var(--grid-unit) solid rgba(63, 184, 255, 0.35);
    border-radius: var(--grid-3);
    padding: var(--grid-4); /* More padding */
    box-shadow: 0 var(--grid-unit) var(--grid-3) rgba(0, 0, 0, 0.3);
}

.rich-image {
    background: rgba(63, 184, 255, 0.10);
    border-radius: var(--grid-2);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--grid-2); /* More padding */
}

.rich-image img {
    width: 100%;
    height: auto;
    max-height: 300px; /* Bigger image */
    object-fit: cover;
    border-radius: calc(var(--grid-2) - var(--grid-unit));
}

.rich-content {
    display: flex;
    flex-direction: column;
    gap: var(--grid-3); /* More gap between content elements */
}

.rich-title {
    font-size: clamp(1.6rem, 2.2vw, 2.2rem); /* Bigger */
    font-weight: 800;
    color: var(--color-text-primary);
    line-height: 1.3; /* More line height */
    text-transform: uppercase;
}

.rich-subtitle {
    font-size: clamp(1.1rem, 1.4vw, 1.3rem); /* Bigger */
    font-weight: 700;
    color: var(--color-accent-bright); /* Bright cyan for better visibility */
    line-height: 1.4; /* More line height */
}

.rich-body p {
    font-size: clamp(1rem, 1.2vw, 1.15rem); /* Bigger */
    font-weight: 500; /* Lighter weight for crispness */
    color: var(--color-text-primary); /* Brighter color for better contrast */
    line-height: 1.5; /* More line height */
    margin: 0 0 var(--grid-2) 0; /* More margin between paragraphs */
    text-shadow: none; /* Remove any text shadow for crisp display */
    -webkit-font-smoothing: antialiased; /* Crisp font rendering */
    -moz-osx-font-smoothing: grayscale; /* Crisp font rendering on Firefox */
    text-rendering: optimizeLegibility; /* Optimize for readability */
}

.rich-callout {
    font-size: clamp(0.95rem, 1.1vw, 1.05rem); /* Bigger */
    font-weight: 800;
    color: var(--color-text-primary);
    background: rgba(63, 184, 255, 0.12);
    border: 2px solid var(--color-accent-bright); /* Thin border with bright cyan color */
    border-radius: var(--grid-2);
    padding: var(--grid-2) var(--grid-3); /* More padding */
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    margin-top: var(--grid-2); /* Additional spacing above callout */
}

@media (max-width: 900px) {
    .rich-announcement-card {
        grid-template-columns: 1fr;
    }
}

/* Responsive Adjustments - Coarse media queries only */
@media (max-width: 900px) {
    .top-banner {
        padding: var(--grid-2) var(--grid-3); /* Tighter */
        min-height: var(--grid-6); /* Tighter */
    }
    
    .client-name {
        font-size: clamp(1.4rem, 3.5vw, 2rem); /* Tighter on mobile */
    }
    
    .main-content {
        padding: var(--grid-2) var(--grid-3); /* Tighter */
    }
    
    .content-container {
        gap: var(--grid-2); /* Tighter between sections */
    }
}

@media (min-width: 1400px) {
    /* Large screen optimizations */
    .content-container {
        max-width: 1600px;
    }
}

/* High contrast focus states for accessibility */
*:focus-visible {
    outline: var(--grid-unit) solid var(--color-accent-bright);
    outline-offset: var(--grid-unit);
    border-radius: var(--grid-unit);
}

/* Home Page Styles */
.home-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--grid-4);
    padding: var(--grid-6) var(--grid-4);
}

.home-title {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 900;
    color: var(--color-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0;
    line-height: 1.2;
}

.home-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: var(--grid-2) 0;
}

.civic-screen-logo {
    max-width: clamp(200px, 30vw, 400px);
    height: auto;
    display: block;
}

.home-tagline {
    font-size: clamp(1.2rem, 2vw, 1.8rem);
    font-weight: 500;
    color: var(--color-text-primary);
    line-height: 1.5;
    margin: 0;
    max-width: 800px;
}

/* Welcome View Styles */
.welcome-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: var(--grid-4);
    gap: var(--grid-4);
}

.welcome-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--grid-6);
    max-width: 1400px;
    width: 100%;
    align-items: center;
}

.welcome-image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 400px;
}

.welcome-image {
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: cover;
    border-radius: var(--grid-2);
    box-shadow: 0 var(--grid-2) var(--grid-4) rgba(0, 0, 0, 0.3);
}

.welcome-content {
    display: flex;
    flex-direction: column;
    gap: var(--grid-4);
    padding: var(--grid-4);
}

.welcome-message {
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 800;
    color: var(--color-text-primary);
    line-height: 1.2;
    margin: 0;
    text-align: left;
}

.welcome-info {
    display: flex;
    flex-direction: column;
    gap: var(--grid-4);
}

.welcome-hours {
    display: flex;
    flex-direction: column;
    gap: var(--grid-unit);
}

.welcome-info-title {
    font-size: clamp(1.2rem, 1.5vw, 1.5rem);
    font-weight: 700;
    color: var(--color-accent-bright);
    margin: 0 0 var(--grid-unit) 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.welcome-hours-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.welcome-hours-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid rgba(63, 184, 255, 0.2);
}

.welcome-hours-item:last-child {
    border-bottom: none;
}

.welcome-hours-day {
    font-size: clamp(1rem, 1.2vw, 1.2rem);
    font-weight: 600;
    color: var(--color-text-primary);
}

.welcome-hours-time {
    font-size: clamp(1rem, 1.2vw, 1.2rem);
    font-weight: 500;
    color: var(--color-text-secondary);
}

.welcome-address {
    display: flex;
    flex-direction: column;
    margin-top: var(--grid-4);
    padding-top: var(--grid-4);
    padding-bottom: 0;
    border-top: 1px solid rgba(63, 184, 255, 0.2);
    margin-bottom: 0;
}

.welcome-address-value {
    font-size: clamp(1rem, 1.2vw, 1.2rem);
    font-weight: 500;
    color: var(--color-text-primary);
    line-height: 1.5;
}

.welcome-contact {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}

.welcome-contact-item {
    display: flex;
    align-items: center;
    gap: var(--grid-2);
    padding: 2px 0;
}

.welcome-contact-label {
    font-size: clamp(1rem, 1.2vw, 1.2rem);
    font-weight: 700;
    color: var(--color-accent-bright);
    min-width: 80px;
}

.welcome-contact-value {
    font-size: clamp(1rem, 1.2vw, 1.2rem);
    font-weight: 500;
    color: var(--color-text-primary);
}

/* Weather View Styles */
.weather-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: var(--grid-4);
    gap: var(--grid-4);
}

.weather-container {
    display: flex;
    flex-direction: column;
    gap: var(--grid-6);
    max-width: 1400px;
    width: 100%;
}

.weather-main-row {
    display: flex;
    flex-direction: row;
    gap: 120px;
    width: fit-content;
    margin: 0 auto;
    align-items: flex-start;
}

.weather-left-section {
    display: flex;
    flex-direction: column;
    gap: var(--grid-2);
}

.weather-icon-temp-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--grid-3);
}

.weather-icon {
    width: 80px;
    height: 80px;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

.weather-temp-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.weather-temp {
    font-size: clamp(3rem, 7vw, 5rem);
    font-weight: 800;
    color: var(--color-text-primary);
    line-height: 1;
}

.weather-feels-like {
    font-size: clamp(0.9rem, 1.3vw, 1.1rem);
    font-weight: 500;
    color: var(--color-text-secondary);
}

.weather-description {
    font-size: clamp(1.2rem, 2vw, 1.8rem);
    font-weight: 600;
    color: var(--color-accent-bright);
    text-transform: capitalize;
}

.weather-location {
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    font-weight: 500;
    color: var(--color-text-secondary);
}

.weather-right-section {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-top: var(--grid-4);
}

.weather-stats {
    display: flex;
    flex-direction: column;
    gap: var(--grid-unit);
    align-items: flex-end;
}

.weather-stat-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--grid-2);
}

.weather-stat-label {
    font-size: clamp(0.9rem, 1.2vw, 1.1rem);
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.weather-stat-value {
    font-size: clamp(1.2rem, 1.8vw, 1.6rem);
    font-weight: 700;
    color: var(--color-accent-bright);
}

.weather-forecast {
    display: flex;
    flex-direction: column;
    gap: var(--grid-3);
    padding: var(--grid-2);
    width: 100%;
}

.weather-forecast-title {
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    font-weight: 700;
    color: var(--color-accent-bright);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
    text-align: center;
}

.weather-daily-forecast {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--grid-2);
}

.weather-daily-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--grid-unit);
    padding: var(--grid-2);
    background: rgba(63, 184, 255, 0.08);
    border-radius: var(--grid-2);
    border: 1px solid rgba(63, 184, 255, 0.2);
    text-align: center;
}

.weather-daily-day {
    font-size: clamp(1rem, 1.4vw, 1.3rem);
    font-weight: 700;
    color: var(--color-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline;
}

.weather-daily-date {
    font-size: clamp(0.9rem, 1.2vw, 1.1rem);
    font-weight: 500;
    color: var(--color-text-secondary);
    display: inline;
    margin-left: 6px;
}

.weather-daily-icon {
    width: 55px;
    height: 55px;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}

.weather-daily-temps {
    display: flex;
    align-items: center;
    gap: var(--grid-unit);
    width: 100%;
    justify-content: center;
}

.weather-daily-max {
    font-size: clamp(1.2rem, 1.6vw, 1.5rem);
    font-weight: 700;
    color: var(--color-text-primary);
}

.weather-daily-min {
    font-size: clamp(1rem, 1.3vw, 1.2rem);
    font-weight: 600;
    color: var(--color-text-secondary);
}

.weather-daily-precip {
    font-size: clamp(0.95rem, 1.15vw, 1.05rem);
    color: var(--color-accent-bright);
    font-weight: 600;
    margin-top: 2px;
}

@media (max-width: 900px) {
    .welcome-container {
        grid-template-columns: 1fr;
        gap: var(--grid-4);
    }
    
    .welcome-image-container {
        min-height: 300px;
    }
    
    .welcome-message {
        text-align: center;
    }
    
    .welcome-content {
        align-items: center;
        text-align: center;
    }
    
    .weather-daily-forecast {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .weather-main-row {
        flex-direction: column;
        gap: var(--grid-4);
    }
    
    .weather-left-section {
        align-items: center;
    }
    
    .weather-right-section {
        align-items: center;
    }
    
    .weather-description {
        text-align: center;
    }
    
    .weather-location {
        text-align: center;
    }
    
    .weather-stats {
        align-items: center;
    }
    
    .weather-stat-item {
        justify-content: center;
    }
    
    .welcome-hours-item {
        justify-content: center;
        gap: var(--grid-3);
    }
    
    .welcome-contact-item {
        justify-content: center;
    }
}