/* ============================================================
   Kids Kingdom - Time Page Stylesheet
   ============================================================ */

/* ================= HOW TO LEARN ================= */
.how-to-learn { padding: 50px 0; }
.how-to-learn h2 { text-align: center; font-size: 2rem; margin-bottom: 40px; }

.steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.step-card { text-align: center; }

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 14px;
}

.step-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.step-card p { font-size: 1rem; color: #666; }

/* ================= SHARED: CLOCK FACE (used everywhere - mini and big) ================= */
.clock-face {
    position: relative;
    margin: 0 auto;
    border-radius: 50%;
    background: #fffdf8;
    border-style: solid;
    border-color: #8B5E34;
    box-sizing: border-box;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12), inset 0 0 8px rgba(0,0,0,0.06);
}

.clock-face .clock-center-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    background: #8B5E34;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    box-shadow: 0 0 0 2px #fff;
}

.clock-face .hand {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: bottom center;
    border-radius: 6px;
}

.clock-face .hand.hour-hand { background: var(--color-dark); }
.clock-face .hand.minute-hand { background: var(--color-secondary); }
.clock-face .hand.second-hand { background: var(--color-primary); }

.clock-face .clock-number {
    position: absolute;
    transform: translate(-50%, -50%);
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-dark);
    z-index: 3;
}

.clock-face .tick {
    position: absolute;
    background: #ccc;
    left: 50%;
}

/* ---- BIG clock size (Pick a Country + India's Clock) ---- */
.clock-face.clock-big {
    width: 260px;
    height: 260px;
    border-width: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12), inset 0 0 8px rgba(0,0,0,0.06), 0 0 0 4px #D9B48F;
}
.clock-face.clock-big .clock-center-dot { width: 16px; height: 16px; }
.clock-face.clock-big .hand.hour-hand { width: 8px; height: 58px; transform: translate(-50%, -100%) rotate(0deg); }
.clock-face.clock-big .hand.minute-hand { width: 5px; height: 86px; transform: translate(-50%, -100%) rotate(0deg); }
.clock-face.clock-big .hand.second-hand { width: 2px; height: 96px; transform: translate(-50%, -100%) rotate(0deg); }
.clock-face.clock-big .clock-number { font-size: 1.1rem; }
.clock-face.clock-big .tick { width: 3px; height: 10px; top: 8px; transform-origin: 50% 122px; }

/* ---- MINI clock size (World Clock grid, 8 countries) ---- */
.clock-face.clock-mini {
    width: 150px;
    height: 150px;
    border-width: 7px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1), 0 0 0 3px #D9B48F;
}
.clock-face.clock-mini .clock-center-dot { width: 11px; height: 11px; }
.clock-face.clock-mini .hand.hour-hand { width: 5px; height: 33px; transform: translate(-50%, -100%) rotate(0deg); }
.clock-face.clock-mini .hand.minute-hand { width: 4px; height: 49px; transform: translate(-50%, -100%) rotate(0deg); }
.clock-face.clock-mini .hand.second-hand { width: 2px; height: 55px; transform: translate(-50%, -100%) rotate(0deg); }
.clock-face.clock-mini .clock-number { font-size: 0.78rem; }
.clock-face.clock-mini .tick { width: 2px; height: 7px; top: 4px; transform-origin: 50% 71px; }

/* ================= WORLD CLOCK GRID (mini clock + name + digital) ================= */
.worldclock-section { padding: 50px 0; }
.worldclock-section h2 { text-align: center; font-size: 2rem; margin-bottom: 40px; }

.worldclock-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.worldclock-block {
    text-align: center;
    padding: 10px 12px;
}

.worldclock-country {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    margin: 10px 0 6px;
}

.worldclock-digital {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-primary);
}

/* ================= SELECT COUNTRY + DIGITAL+ANALOG CLOCK ================= */
.selectclock-section { padding: 50px 0; }
.selectclock-section h2 { text-align: center; font-size: 2rem; margin-bottom: 40px; }

.selectclock-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
    align-items: center;
}

.country-select-box { text-align: center; }

.country-select-box label {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 14px;
    color: var(--color-dark);
}

.country-select-box select {
    width: 100%;
    max-width: 280px;
    padding: 14px 16px;
    font-size: 1.05rem;
    font-family: var(--font-body);
    border: 2px solid var(--color-bg);
    border-radius: var(--radius);
    background: #fff;
    color: var(--color-dark);
    cursor: pointer;
}

.selected-digital-box { text-align: center; }

.selected-digital-box .digital-display {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 2.6rem;
    color: var(--color-primary);
    /* background: var(--color-bg); */
    border-radius: var(--radius);
    padding: 26px 16px;
    letter-spacing: 1px;
}

.selected-analog-box { text-align: center; }

.digital-label, .analog-label {
    margin-top: 12px;
    font-size: 1rem;
    color: #666;
}

/* ================= TIME FACTS ================= */
.facts-section { padding: 50px 0; }
.facts-section h2 { text-align: center; font-size: 2rem; margin-bottom: 40px; }

.facts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.fact-card {
    /* background: var(--color-bg); */
    border-radius: var(--radius);
    padding: 22px 18px;
    text-align: center;
}

.fact-card .fact-value {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--color-primary);
    margin-bottom: 6px;
}

.fact-card .fact-label { font-size: 0.95rem; color: #666; }

/* ================= INDIA'S DIGITAL + ANALOG CLOCK ================= */
.clockdemo-section { padding: 50px 0; }
.clockdemo-section h2 { text-align: center; font-size: 2rem; margin-bottom: 40px; }

.clockdemo-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.digital-clock-box { text-align: center; }

.digital-clock-box .digital-display {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 3rem;
    color: var(--color-primary);
    /* background: var(--color-bg); */
    border-radius: var(--radius);
    padding: 30px 20px;
    letter-spacing: 1px;
}

.analog-clock-box { text-align: center; }

/* ================= ANALOG EXPLANATION ================= */
.explain-section { padding: 50px 0; }
.explain-section h2 { text-align: center; font-size: 2rem; margin-bottom: 40px; }

.explain-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 24px;
}

.explain-card { text-align: center; padding: 20px; }

.explain-card .explain-swatch {
    width: 50px;
    height: 12px;
    margin: 0 auto 12px;
    border-radius: 6px;
}

.explain-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.explain-card p { font-size: 0.98rem; color: #666; }

/* ================= RESPONSIVE ================= */
@media (max-width: 1023px) and (min-width: 768px) {
    .worldclock-grid { grid-template-columns: repeat(3, 1fr); }
    .facts-grid { grid-template-columns: repeat(3, 1fr); }
    .clockdemo-wrap { grid-template-columns: 1fr 1fr; }
    .selectclock-wrap { grid-template-columns: 1fr 1fr; }
    .explain-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
    .steps-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .worldclock-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .facts-grid { grid-template-columns: repeat(2, 1fr); }
    .clockdemo-wrap { grid-template-columns: 1fr; gap: 30px; }
    .selectclock-wrap { grid-template-columns: 1fr; gap: 24px; }
    .explain-grid { grid-template-columns: 1fr; }

    .clock-face.clock-big { width: 220px; height: 220px; }
    .clock-face.clock-big .hand.hour-hand { height: 48px; }
    .clock-face.clock-big .hand.minute-hand { height: 72px; }
    .clock-face.clock-big .hand.second-hand { height: 80px; }
    .clock-face.clock-big .tick { transform-origin: 50% 102px; }

    .clock-face.clock-mini { width: 120px; height: 120px; }
    .clock-face.clock-mini .hand.hour-hand { height: 27px; }
    .clock-face.clock-mini .hand.minute-hand { height: 40px; }
    .clock-face.clock-mini .hand.second-hand { height: 44px; }
    .clock-face.clock-mini .tick { transform-origin: 50% 57px; }

    .digital-clock-box .digital-display { font-size: 2.2rem; }
    .selected-digital-box .digital-display { font-size: 2rem; }
}

@media (max-width: 420px) {
    .worldclock-grid { grid-template-columns: 1fr 1fr; }
    .facts-grid {grid-template-columns: 1fr 1fr;}
}