/* =====================================================
   MODERN FLIP CLOCK – RESPONSIVE CSS
   ===================================================== */

/* ===== LARGE SCREENS ===== */
@media (min-width: 1400px) {
    :root {
        --digit-size: 10rem;
        --digit-width: 8rem;
    }
}

/* ===== MEDIUM-LARGE ===== */
@media (min-width: 992px) and (max-width: 1399px) {
    :root {
        --digit-size: 8.5rem;
        --digit-width: 6.8rem;
    }
}

/* ===== MEDIUM (Tablets) ===== */
@media (min-width: 768px) and (max-width: 991px) {
    :root {
        --digit-size: 6.5rem;
        --digit-width: 5.2rem;
    }

    .flip-separator .dot {
        width: 10px;
        height: 10px;
    }

    .world-clocks-section .row>* {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* ===== SMALL (Mobile landscape / large phones) ===== */
@media (max-width: 767px) {
    :root {
        --digit-size: clamp(3.2rem, 12vw, 5.5rem);
        --digit-width: clamp(2.6rem, 9.5vw, 4.4rem);
        --digit-radius: 0.35rem;
    }

    .flip-clock-wrapper {
        gap: 0.35rem;
    }

    .flip-unit-group {
        gap: 0.25rem;
    }

    .flip-separator .dot {
        width: 7px;
        height: 7px;
    }

    /* Seconds hidden on very small by default? No – just smaller */
    .flip-separator.seconds-sep {
        display: none;
    }

    #secondsGroup {
        display: none;
    }

    body.seconds-visible .flip-separator.seconds-sep {
        display: flex;
    }

    body.seconds-visible #secondsGroup {
        display: flex;
    }

    .ampm-display span {
        font-size: 0.85rem;
    }

    .world-clock-card .wc-time {
        font-size: clamp(1.1rem, 5vw, 1.6rem);
    }

    .mode-tabs {
        gap: 0.25rem;
    }

    .mode-tab {
        padding: 0.45rem 0.7rem;
        font-size: 0.78rem;
    }

    .music-player-card {
        padding: 1rem;
    }

    .fab-cluster {
        bottom: 1.25rem;
        right: 1.25rem;
    }

    .focus-pomodoro .pomodoro-ring-wrap {
        width: 150px;
        height: 150px;
    }

    .pomodoro-center span {
        font-size: 2rem;
    }

    .stopwatch-display {
        font-size: clamp(2rem, 11vw, 3.5rem);
    }

    .settings-offcanvas {
        width: 100vw !important;
    }

    .quick-toggles {
        gap: 0.5rem;
    }

    .toggle-pill {
        padding: 0.35rem 0.65rem;
        font-size: 0.72rem;
    }

    .date-display {
        font-size: 0.82rem;
    }

    .tz-info-bar {
        font-size: 0.72rem;
        padding: 0.25rem 0.75rem;
    }

    .section-title {
        font-size: 0.95rem;
    }

    .event-unit-value {
        font-size: 1.8rem;
    }

    .event-unit {
        padding: 0.7rem 0.85rem;
    }
}

/* ===== EXTRA SMALL (< 400px) ===== */
@media (max-width: 399px) {
    :root {
        --digit-size: clamp(2.8rem, 15vw, 4rem);
        --digit-width: clamp(2.2rem, 11vw, 3.2rem);
    }

    .ampm-display {
        display: none !important;
    }

    .flip-separator .dot {
        width: 5px;
        height: 5px;
    }

    .mode-tab {
        padding: 0.4rem 0.5rem;
        font-size: 0.7rem;
    }

    .mode-tab span {
        display: none;
    }

    /* hide text, keep icon */

    .tz-info-bar .tz-name {
        display: none;
    }

    .quick-toggles .toggle-label {
        display: none;
    }
}

/* ===== TOUCH OPTIMIZATIONS ===== */
@media (hover: none) {
    .drag-handle {
        opacity: 0.6;
    }

    .world-clock-card:hover {
        transform: none;
    }

    .nav-btn:hover {
        transform: none;
    }

    /* Larger tap targets */
    .pom-btn {
        width: 52px;
        height: 52px;
    }

    .day-btn {
        width: 42px;
        height: 42px;
    }
}

/* ===== FULLSCREEN MODE ===== */
.flip-app-body:fullscreen,
.flip-app-body:-webkit-full-screen,
.flip-app-body:-moz-full-screen {
    background: var(--clr-bg-primary);
}

.flip-app-body:fullscreen #mainNavbar,
.flip-app-body:-webkit-full-screen #mainNavbar {
    opacity: 0.4;
    transition: opacity 1s;
}

.flip-app-body:fullscreen #mainNavbar:hover,
.flip-app-body:-webkit-full-screen #mainNavbar:hover {
    opacity: 1;
}

/* ===== DISTRACTION FREE MODE ===== */
body.distraction-free .world-clocks-section,
body.distraction-free .cd-gen-section,
body.distraction-free .modes-section,
body.distraction-free .music-section,
body.distraction-free .fc-ad-unit,
body.distraction-free .adsbygoogle,
body.distraction-free .quote-bar {
    display: none !important;
}

body.distraction-free .clock-section {
    margin-top: 4rem;
}

/* ===== SCREENSAVER MODE ===== */
body.screensaver-mode #mainNavbar {
    opacity: 0;
    pointer-events: none;
}

body.screensaver-mode .world-clocks-section,
body.screensaver-mode .cd-gen-section,
body.screensaver-mode .modes-section,
body.screensaver-mode .music-section,
body.screensaver-mode .fc-ad-unit,
body.screensaver-mode .adsbygoogle,
body.screensaver-mode .quick-toggles {
    display: none !important;
}

body.screensaver-mode .clock-section {
    min-height: 80vh;
    justify-content: center;
}

body.screensaver-mode .fab-cluster {
    display: none;
}

/* ===== PRINT STYLES ===== */
@media print {

    .bg-layer,
    #mainNavbar,
    .fab-cluster,
    .settings-offcanvas {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }

    .flip-card {
        background: #eee !important;
        color: #000 !important;
    }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .viz-bar {
        animation: none !important;
        height: 10px !important;
    }
}

/* ===== HIGH CONTRAST ===== */
@media (prefers-contrast: high) {
    .flip-card {
        border: 2px solid currentColor !important;
    }

    .nav-btn {
        border: 2px solid currentColor;
    }
}