/* Clock Time - bright, kid-friendly theme overrides.
   Loaded AFTER styles.css on clock-time.html only. */

:root {
    --primary-color: #eaf6ff;   /* page background - very light sky */
    --secondary-color: #ffffff; /* cards / sections - white */
    --accent-color: #bfe3ff;    /* light blue borders / accents */
    --highlight-color: #2196f3; /* friendly sky blue (h2, buttons) */
    --text-color: #243b53;      /* dark slate text */
    --text-muted: #5a6b80;
    --link-color: #1e88e5;
}

body {
    background: linear-gradient(180deg, #cdeaff 0%, #eaf6ff 40%, #f4fbff 100%);
    background-attachment: fixed;
}

/* Header - sunny sky bar with white text */
header {
    background: linear-gradient(135deg, #4fc3f7, #29b6f6);
}

.logo,
nav a {
    color: #ffffff;
}

.logo:hover {
    color: #fff3b0;
}

nav a:hover,
nav a.active {
    background-color: #ffd836;
    color: #1565c0;
}

/* Dropdown menu sits on white with dark links on this theme */
.nav-dropdown-menu a {
    color: var(--text-color);
}

.nav-dropdown-menu a:hover {
    background-color: #ffd836;
    color: #1565c0;
}

/* Hero - bright daytime sky, no dark overlay */
.hero {
    background: linear-gradient(180deg, #6cc5ff 0%, #aee0ff 60%, #eaf6ff 100%);
}

.hero h1 {
    color: #1565c0;
    text-shadow: 0 2px 6px rgba(255, 255, 255, 0.6);
}

.hero p {
    color: #2b4a6f;
}

/* Headings */
h1 {
    color: #1565c0;
}

h2 {
    color: var(--highlight-color);
    border-bottom: 2px solid var(--accent-color);
}

h3 {
    color: #1e88e5;
}

/* Cards / sections get soft, light shadows */
.card {
    box-shadow: 0 4px 20px rgba(33, 150, 243, 0.15);
}

.card:hover {
    box-shadow: 0 8px 30px rgba(33, 150, 243, 0.28);
}

.features-list li {
    border-bottom: 1px solid var(--accent-color);
}

.features-list li::before {
    color: #ffb300; /* sunny check marks */
}

/* Buttons */
.btn-primary {
    background: var(--highlight-color);
    color: #ffffff;
}

.btn-primary:hover {
    background: #1976d2;
    color: #ffffff;
}

/* Screenshot gallery */
.screenshot-grid {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 1.5rem;
}

.screenshot-grid img {
    height: 420px;
    width: auto;
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(33, 150, 243, 0.25);
    transition: transform 0.3s ease;
}

.screenshot-grid img:hover {
    transform: translateY(-6px) scale(1.02);
}

/* Footer - light */
footer {
    background: #ffffff;
    border-top: 1px solid var(--accent-color);
}

.footer-links a {
    color: var(--text-muted);
}

.footer-links a:hover {
    color: var(--highlight-color);
}

@media (max-width: 768px) {
    .screenshot-grid img {
        height: 340px;
    }
}