/* ═══════════════════════════════════════════════════════════════════
   home.css — Homepage-specific styles (index.html)
   Clock, calendar, dot-nav
═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   MAIN LAYOUT
═══════════════════════════════════════════════════════════════════ */
.main-content {
    min-height: calc(100vh - 44px - 52px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 64px;
    padding-bottom: 52px;
}

/* ═══════════════════════════════════════════════════════════════════
   CENTER DISPLAY — clock (left) + calendar (right)
═══════════════════════════════════════════════════════════════════ */
.center-display {
    display: flex;
    align-items: center;  /* center-aligned - clock aligns with center of calendar */
    justify-content: center;
    gap: 80px;
    flex-wrap: wrap;
    padding: 0 40px;
    width: 100%;
    max-width: 1100px;
}

/* ═══════════════════════════════════════════════════════════════════
   ANALOG CLOCK  ← UNCHANGED — user loves this
═══════════════════════════════════════════════════════════════════ */
.clock-section { display:flex; flex-direction:column; align-items:center; flex-shrink:0; }

.clock-bezel {
    width:296px; height:296px; border-radius:50%;
    background:linear-gradient(145deg,#c4c4d0 0%,#dcdce8 30%,#e8e8f4 50%,#d0d0de 70%,#b8b8cc 100%);
    box-shadow:0 8px 32px rgba(0,0,60,.18),0 2px 6px rgba(0,0,0,.12),inset 0 2px 4px rgba(255,255,255,.88),inset 0 -2px 4px rgba(0,0,0,.14);
    padding:12px; display:flex; align-items:center; justify-content:center;
}

.clock-inner-ring {
    width:272px; height:272px; border-radius:50%;
    background:linear-gradient(135deg,#d8d8e4 0%,#ccccd8 100%);
    box-shadow:inset 0 3px 8px rgba(0,0,0,.18),inset 0 -1px 4px rgba(255,255,255,.45);
    padding:6px; display:flex; align-items:center; justify-content:center;
}

.clock-face {
    width:260px; height:260px; border-radius:50%; position:relative; overflow:hidden;
    background:radial-gradient(ellipse at 36% 30%,rgba(255,255,255,.93) 0%,rgba(225,235,255,.58) 42%,rgba(205,220,255,.20) 100%);
    backdrop-filter:blur(14px) saturate(1.15);
    -webkit-backdrop-filter:blur(14px) saturate(1.15);
    border:1px solid rgba(255,255,255,.68);
    box-shadow:inset 0 3px 22px rgba(255,255,255,.78),inset 0 -4px 16px rgba(180,205,248,.24),0 4px 18px rgba(0,0,90,.10);
}

.clock-gloss {
    position:absolute; top:6%; left:11%; width:62%; height:38%;
    background:radial-gradient(ellipse at 38% 36%,rgba(255,255,255,.76) 0%,rgba(255,255,255,0) 68%);
    border-radius:50%; pointer-events:none; z-index:20;
}

.hour-marker {
    position:absolute; left:calc(50% - 1.5px); top:11px;
    width:3px; height:12px; background:rgba(38,38,68,.42); border-radius:2px;
    transform-origin:50% 119px;
}
.hour-marker.cardinal {
    left:calc(50% - 2.5px); top:8px;
    width:5px; height:20px; background:rgba(28,28,58,.68); border-radius:3px;
    transform-origin:50% 122px;
}

.hand { position:absolute; bottom:50%; left:50%; transform-origin:50% 100%; border-radius:4px 4px 2px 2px; z-index:10; }

.hour-hand   { height:78px; width:5.5px; margin-left:-2.75px; background:linear-gradient(to top,rgba(22,22,48,.94) 0%,rgba(50,50,85,.75) 55%,rgba(68,68,108,.52) 100%); box-shadow:0 1px 7px rgba(0,0,0,.24); }
.minute-hand { height:108px; width:3.5px; margin-left:-1.75px; background:linear-gradient(to top,rgba(28,28,52,.92) 0%,rgba(58,58,92,.68) 55%,rgba(78,78,125,.42) 100%); box-shadow:0 1px 5px rgba(0,0,0,.18); }

.second-hand {
    height:140px; width:2px; margin-left:-1px;
    bottom:calc(50% - 22px);
    transform-origin:50% 84.286%;
    background:linear-gradient(to bottom,#ff5555 0%,#cc1111 84.286%,rgba(55,55,55,.88) 84.286%,rgba(55,55,55,.88) 100%);
    border-radius:1px; z-index:12;
}

.hand-transitions .hour-hand,
.hand-transitions .minute-hand {
    transition: transform 0.42s cubic-bezier(0.23, 1, 0.32, 1);
}

.center-dot {
    position:absolute; top:50%; left:50%; width:12px; height:12px; margin:-6px 0 0 -6px;
    background:radial-gradient(circle at 36% 30%,rgba(160,160,180,1) 0%,rgba(55,55,80,1) 55%,rgba(30,30,52,1) 100%);
    border-radius:50%; z-index:15;
    box-shadow:0 1px 6px rgba(0,0,0,.38),inset 0 1px 2px rgba(255,255,255,.32);
}

/* ═══════════════════════════════════════════════════════════════════
   CALENDAR — Real-world paper calendar aesthetic.
   Outer bezel same gray gradient as clock. Red header strip like
   a desk-calendar tear-away top. Paper-white body. Boxy.
═══════════════════════════════════════════════════════════════════ */
.calendar-section { display:flex; flex-direction:column; align-items:center; flex-shrink:0; }

/* Outer bezel — same gradient palette as clock-bezel */
.calendar-bezel {
    background: linear-gradient(145deg, #c8c8d4 0%, #dcdce8 28%, #e8e8f4 50%, #d0d0de 72%, #bcbccc 100%);
    padding: 10px;
    box-shadow:
        0 8px 28px rgba(0,0,60,0.18),
        0 2px 6px rgba(0,0,0,0.10),
        inset 0 2px 4px rgba(255,255,255,0.88),
        inset 0 -2px 4px rgba(0,0,0,0.14);
}

/* Inner calendar face — paper white, recessed */
.calendar-wrap {
    background: #ebeae5;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.10);
    overflow: visible;   /* allow corner icons to poke outside the bezel */
    width: 300px; /* Fixed width to match clock (300 + 10+10 padding = 320px, same as clock) */
}
/* Calendar cell glossy overlay removed — clean, flat cells */
.cal-cell { position: relative; }

/* ── 5-hole binding strip ── */
.cal-binding {
    height: 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 12px;
    background: linear-gradient(to bottom, #a8a8b8 0%, #98989c 50%, #888894 100%);
    box-shadow:
        0 2px 6px rgba(0,0,0,0.20),
        inset 0 1px 0 rgba(255,255,255,0.35),
        inset 0 -1px 0 rgba(0,0,0,0.15);
}
.cal-hole {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(40,40,60,0.85), rgba(20,20,30,0.95));
    box-shadow:
        inset 0 1px 2px rgba(0,0,0,0.60),
        inset -1px 0 1px rgba(0,0,0,0.40);
    flex-shrink: 0;
}

/* ── Red header strip ── */
.cal-header {
    background: #CC1111;
    background-image: linear-gradient(to bottom,
        rgba(255,255,255,0.20) 0%,
        rgba(255,255,255,0.05) 45%,
        rgba(0,0,0,0.00) 50%,
        rgba(0,0,0,0.12) 100%
    );
    border-bottom: 2px solid rgba(60,0,0,0.45);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.30),
        inset 0 -1px 0 rgba(0,0,0,0.22);
    padding: 0;
}

/* Month + year row inside red strip — flex so arrows sit at each end */
.cal-month-row {
    padding: 5px 6px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Prev / next month chevron buttons */
.cal-nav-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
    opacity: 0.65;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.1s;
}
.cal-nav-btn:hover {
    opacity: 1;
}
.cal-month-name {
    font-family: var(--font-ui);
    font-size: 19px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.14em;
    text-shadow: 0 1px 4px rgba(0,0,0,0.35);
    display: block;
}

/* Day-of-week header — square cells, part of the grid, distinct background */
.cal-dow {
    aspect-ratio: 1;
    background: #c0c3c9;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
    font-family: var(--font-ui);
    font-size: 16.25px;
    font-weight: 800;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #44445a;
}
.cal-dow.h-sun  { background: #b02020; color: #fff; }
.cal-dow.h-sat  { background: #1e44a8; color: #fff; }

/* 7-column grid — lines via inset box-shadow on cells */
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    background: transparent;
    overflow: visible;  /* let corner icons poke out */
}

/* Date cells — grid lines via inset shadow */
.cal-cell {
    aspect-ratio: 1;
    font-family: var(--font-ui);
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    border: none; outline: none;
    border-radius: 0;
    transition: filter 0.1s;
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.38) 0%, rgba(0,0,0,0.04) 100%);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}
/* Darken on hover — only non-holiday cells */
.cal-cell:not(.cal-special-day):hover { filter: brightness(0.90); }

.cal-sun { background-color: #ffd8d8; color: #aa1111; font-weight: 800; }
.cal-sat { background-color: #d4e0ff; color: #1144aa; font-weight: 800; }
.cal-wkd { background-color: #fefefc; color: #1e1e34; }

@keyframes calPulse {
    0%, 100% { background-color: rgba(91, 164, 224, 0.95); }
    50%       { background-color: rgba(91, 164, 224, 0.50); }
}

.cal-today {
    animation: calPulse 2.4s ease-in-out infinite;
    background-image: none !important;
    color: #fff !important;
    font-weight: 800;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35);
}

/* ═══════════════════════════════════════════════════════════════════
   CALENDAR SPECIAL DAYS WITH ICONS
   Icons sit in the bottom-right corner of each cell.
   Date number stays centred — same as non-special cells.
═══════════════════════════════════════════════════════════════════ */

/* Cell layout: centre the number, icon is absolute-positioned */
.cal-cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.cal-date-num {
    font-size: 17.5px;
    font-weight: 600;
    z-index: 2;
    line-height: 1;
}

/* Icon pinned bottom-right — sticker that pokes past the cell edge */
.cal-icon {
    position: absolute;
    bottom: -6px;
    right: -6px;
    width: 32px;
    height: 32px;
    font-size: 22px;
    line-height: 32px;
    text-align: center;
    z-index: 100;          /* above grid, bezel, everything */
    pointer-events: none;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.22));
    transform-origin: center center;
    animation: icon-wobble 0.5s ease-in-out infinite;
    animation-delay: var(--tilt-d, 0s);  /* negative = already mid-cycle */
    /* scale is a separate CSS property — doesn't interfere with transform animation */
    scale: 1;
    transition: scale 0.15s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Rapid snappy back-and-forth wobble — energetic */
@keyframes icon-wobble {
    0%   { transform: rotate(-14deg); }
    50%  { transform: rotate(14deg); }
    100% { transform: rotate(-14deg); }
}

/* On hover: scale up smoothly while wobble keeps running uninterrupted */
.cal-cell:hover .cal-icon {
    scale: 1.35;
}

/* Special day — overflow visible for icon, z-index 5 ensures icon renders above
   any neighbour that creates a stacking context via filter:brightness on hover */
.cal-special-day {
    position: relative;
    overflow: visible !important;
    z-index: 5;
}

.cal-special-day.cal-today {
    /* Today pulse continues; icon renders on top via z-index */
}

/* ═══════════════════════════════════════════════════════════════════
   ICON NAVIGATION — homepage dot-nav
   Uses shared subpage-nav-* classes (via partials/_nav_icons.html).
   Only home-specific overrides are here; base styles live in style.css.
═══════════════════════════════════════════════════════════════════ */
.dot-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 44px;
    padding: 0 32px;
    margin-top: 48px;
}

/* Fade-in entrance animation — homepage only */
@keyframes dotFadeIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.dot-nav .subpage-nav-item {
    animation: dotFadeIn 0.5s ease both;
    gap: 8px; /* homepage uses slightly larger label gap than subpages */
}

/* Freeze animation on click so Firefox doesn't retrigger dotFadeIn */
.dot-nav .subpage-nav-item:active {
    animation: none;
    opacity: 1;
    transform: translateY(0);
}

.dot-nav .subpage-nav-item:nth-child(1) { animation-delay: 0.05s; }
.dot-nav .subpage-nav-item:nth-child(2) { animation-delay: 0.10s; }
.dot-nav .subpage-nav-item:nth-child(3) { animation-delay: 0.15s; }
.dot-nav .subpage-nav-item:nth-child(4) { animation-delay: 0.20s; }
.dot-nav .subpage-nav-item:nth-child(5) { animation-delay: 0.25s; }
.dot-nav .subpage-nav-item:nth-child(6) { animation-delay: 0.30s; }

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — HOMEPAGE
   Tablet (≤860px): tighten gaps between clock/calendar and nav icons
   Mobile (≤600px): scale down clock + calendar via zoom so they fit
                    on small viewports when stacked (flex-wrap kicks in)
   Small mobile (≤400px): extra scale reduction
═══════════════════════════════════════════════════════════════════ */

/* ── Tablet: tighten horizontal spacing ── */
@media (max-width: 860px) {
    .center-display {
        gap: 48px;
        padding: 0 20px;
    }
    .dot-nav {
        gap: 32px;
        padding: 0 16px;
    }
}

/* ── Mobile: scale clock + calendar to fit small viewports ──
   CSS `zoom` scales the element AND its children together while
   reducing their layout footprint proportionally.
   Supported: Chrome (always), Safari (always), Firefox 126+ (2024).
   On older Firefox the clocks render at full size but flex-wrap
   and overflow-x:hidden on body keep the layout intact. ── */
@media (max-width: 600px) {
    .main-content {
        gap: 36px;
        padding-bottom: 36px;
    }
    .center-display {
        gap: 24px;
        padding: 0 10px;
    }

    /* Scale the clock bezel + all internals down uniformly */
    .clock-bezel {
        zoom: 0.80;
    }
    /* Scale the calendar bezel + all internals (grid, icons, binding) */
    .calendar-bezel {
        zoom: 0.82;
    }

    /* Icon nav: tighter gap and slightly smaller icons */
    .dot-nav {
        gap: 20px;
        padding: 0 10px;
        margin-top: 28px;
    }
    .dot-nav .subpage-nav-icon-wrap {
        width: 60px;
        height: 60px;
    }
    .dot-nav .subpage-nav-icon-svg {
        width: 52px;
        height: 52px;
    }
    .dot-nav .subpage-nav-label {
        font-size: 17px;
    }
}

/* ── Very small phones (≤400px): additional scale-down ── */
@media (max-width: 400px) {
    .clock-bezel {
        zoom: 0.66;
    }
    .calendar-bezel {
        zoom: 0.68;
    }
    .dot-nav {
        gap: 14px;
    }
    .dot-nav .subpage-nav-icon-wrap {
        width: 54px;
        height: 54px;
    }
    .dot-nav .subpage-nav-icon-svg {
        width: 46px;
        height: 46px;
    }
}