/* Global styles — layout, navigation, forms, color variables.
   Classic-clock styles: classic.css
   Segment-display styles: segment.css */

/* Base reset rules */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Prevent unwanted scrolling */
    color: var(--current-text-color, #333);
}

/* Main container */
#app {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

/* Navigation */
.app-nav {
    flex-shrink: 0; /* Prevent nav from shrinking */
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color, #dee2e6);
    z-index: 10; /* Ensure nav sits above other elements */
    transition: background-color 0.5s ease, color 0.5s ease;
}

.nav-item {
    margin-right: 1rem;
    color: var(--current-menu-text-color, #e8d0ff);
    text-decoration: none;
    transition: color 0.3s ease;
}

.nav-item:hover {
    color: var(--current-accent-color, #ffd700);
}

/* View container */
.view {
    display: none; /* Hidden by default, shown by JS router */
    flex: 1;
    overflow-y: auto; /* Scrollbar when needed */
    padding: 0.5rem; /* Reduced padding for small screens */
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
    position: relative;
    min-height: 0; /* Required for flex children to scroll */
    transition: background-color 0.5s ease, color 0.5s ease;
}

/* Heading */
.view h1 {
    margin-bottom: 0.5rem; /* Reduced margin below heading */
    text-align: center;
    flex-shrink: 0;
}

/* Clock wrapper */
.clock-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Prevent overflow */
}

/* Clock container */
#clock-container {
    /* Square size, dynamically computed to fit viewport */
    width: min(95vw, 95%, calc(100vh - 120px));
    height: min(95vw, 95%, calc(100vh - 120px));
    position: relative;
}

/* SVG and other direct children of the clock container.
   Excluded when morphclock takes over the container itself (it adds class
   `.morphclock` and lays out its glyph SVGs via percentage attributes). */
#clock-container:not(.morphclock) > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

/* Responsive adjustments */
@media (max-height: 500px) {
    .view h1 {
        font-size: 1rem; /* Smaller heading */
    }

    .app-nav {
        padding: 0.25rem; /* Reduced padding */
    }

    #clock-container {
        width: min(90vw, 90%, calc(100vh - 80px));
        height: min(90vw, 90%, calc(100vh - 80px));
    }
}

/* Very small screens */
@media (max-height: 350px) {
    .view h1 {
        display: none; /* Hide heading */
    }

    #clock-container {
        width: min(90vw, 90%, calc(100vh - 40px));
        height: min(90vw, 90%, calc(100vh - 40px));
    }

    .clock-wrapper {
        height: 100%; /* Full height without heading */
    }
}

/* =================== */
/* Day and night mode  */
/* =================== */

/* Base variables */
:root {
    /* Set dynamically by JS (ColorInterpolator, animateClock):
       --current-text-color        Foreground color for clock face (hands, marks, digits)
       --current-accent-color      Accent color (second hand, center dot)
       --current-bg-color          Main background color (= body.backgroundColor)
       --current-menu-bg-color     Menu/nav background
       --current-menu-text-color   Menu/nav text color

       Color values (reference, change in js/ColorInterpolator.js):
       Day:   #ff8c69 / #ffe57a / #ff8c00
       Night: #6a4c93 / #0a0014 / #0d1b4b
       Inactive: #3d2914 / #1a1a1a */

    /* Border color fallback, overridden by daytime/nighttime classes */
    --border-color: #dee2e6;
}

/* Day mode: border color + background fallback (before JS sets it) */
body.daytime  { --border-color: #4fc3f7; background-color: var(--current-bg-color, #ffe57a); }

/* Night mode: border color + background fallback */
body.nighttime { --border-color: #455a64; background-color: var(--current-bg-color, #0a0014); }

/* Body background is set by JS (ColorInterpolator) — no CSS rule needed */

.app-nav {
    background-color: var(--current-menu-bg-color, #2a1a00);
    color: var(--current-menu-text-color, #e8d0ff);
    border-bottom-color: var(--border-color);
}

.transition {
    transition: all 0.3s ease;
}

/* Hamburger-to-X animation */
.hamburger-line {
    width: 24px;
    height: 2px;
    background-color: var(--current-menu-text-color, #e8d0ff);
    margin: 5px 0;
    transition: 0.4s;
}

.open .line1 {
    transform: rotate(-45deg) translate(-4.5px, 5.5px);
}

.open .line2 {
    opacity: 0;
}

.open .line3 {
    transform: rotate(45deg) translate(-4.5px, -5.5px);
}

/* Form styles */
input, select, button {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

input, select {
    background-color: var(--current-menu-bg-color, #2a1a00);
    color: var(--current-menu-text-color, #e8d0ff);
    border-color: var(--border-color);
}

button {
    background-color: var(--current-accent-color, #ffd700);
    color: var(--current-bg-color, #ff8c69);
}

button:hover:not(:disabled) {
    opacity: 0.85;
}

button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

button.btn-outline {
    background-color: transparent;
    color: var(--current-accent-color, #ffd700);
    border: 2px solid var(--current-accent-color, #ffd700);
}

a {
    color: var(--current-accent-color, #ffd700);
}

a:hover {
    text-decoration: underline;
}

#menu-toggle {
    background-color: transparent !important;
}

/* polar region message */
.polar-region-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
}

.polar-region-message h2 {
    margin-bottom: 1rem;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--current-menu-text-color, #e8d0ff);
    max-width: 32rem;
}

.polar-region-message p {
    margin-bottom: 0.75rem;
    line-height: 1.5;
    color: var(--current-menu-text-color, #e8d0ff);
    max-width: 32rem;
}