/*==================================================
  TimeTutor v3.0
  style.css
==================================================*/

/* ---------- RESET ---------- */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html, body{

    height:100%;

    overflow:hidden;

}

body{

    font-family:Arial, Helvetica, sans-serif;

    background:#eef3f9;

    color:#222;

    min-height:100vh;

    display:flex;

    flex-direction:column;

}

/* ---------- HEADER ---------- */

.site-header{

    background:#123B73;

    color:white;

    text-align:center;

    padding:30px 20px;

    box-shadow:0 4px 12px rgba(0,0,0,.15);

}

.site-header h1{

    font-size:42px;

    margin-bottom:10px;

}

.site-header p{

    font-size:20px;

    opacity:.95;

}

/* ---------- MAIN ---------- */

.main-layout{

    flex:1;

    max-width:1400px;

    margin:40px auto;

    padding:20px;

    display:flex;

    gap:40px;

    justify-content:center;

    align-items:flex-start;

    flex-wrap:wrap;

    max-height: calc(100vh - 160px);

}

/* ---------- CLOCK + LEGEND ROW ---------- */

.clock-and-legend{

    display:flex;

    gap:30px;

    align-items:flex-start;

    flex-wrap:wrap;

}

/* ---------- CLOCK PANEL ---------- */

.clock-panel{

    background:white;

    padding:25px;

    border-radius:20px;

    box-shadow:0 12px 30px rgba(0,0,0,.10);

}

/* ---------- SVG ---------- */

#clockSVG{

    width:430px;

    height:430px;

    display:block;

}

/* ---------- LESSON PANEL ---------- */

.lesson-panel{

    width:450px;

    background:white;

    padding:22px 30px;

    border-radius:20px;

    box-shadow:0 12px 30px rgba(0,0,0,.10);

    max-height: calc(100vh - 200px);

    overflow-y: auto;

}

/* ---------- TEXT ---------- */

#digitalTime{

    text-align:center;

    font-size:48px;

    color:#123B73;

}

#timePeriod{

    text-align:center;

    margin-top:10px;

    font-size:24px;

    color:#E67E22;

    font-weight:bold;
    
}

#spokenTime{

    text-align:center;

    margin-top:8px;

    font-size:20px;

    font-style:italic;

    color:#123B73;

}

#writtenTime{

    text-align:center;

    margin-top:25px;

    font-size:32px;

    color:#123B73;

}

#lessonNumber{

    text-align:center;

    margin:20px 0;

    color:#666;

    font-weight:bold;

}

#explanation{

    background:#f7f9fc;

    border-left:5px solid #123B73;

    border-radius:10px;

    padding:20px;

    line-height:1.7;

    min-height:180px;

}

/* ---------- BUTTONS ---------- */

.button-row{

    display:flex;

    gap:12px;

    margin-top:30px;

}

.button-row button{

    flex:1;

    padding:14px;

    border:none;

    border-radius:10px;

    background:#123B73;

    color:white;

    font-size:16px;

    cursor:pointer;

    transition:.2s;

}

.button-row button:hover{

    background:#0e2d58;

    transform:translateY(-2px);

}

/* ---------- FOOTER ---------- */

footer{

    text-align:center;

    padding:25px;

    color:#666;

    font-size:15px;

}

/* ---------- MOBILE ---------- */

@media(max-width:900px){

    html, body{

        overflow:auto;

    }

    .main-layout{

        flex-direction:column;

        align-items:center;

        max-height:none;

    }

    .clock-and-legend{

        flex-direction:column;

        align-items:center;

    }

    .clock-legend{

        width:100%;

        max-width:430px;

        max-height:none;

    }

    .lesson-panel{

        width:100%;

        max-width:500px;

        max-height:none;

    }

    #clockSVG{

        width:340px;

        height:340px;

    }

}

@media(max-width:450px){

    .button-row{

        flex-direction:column;

    }

}
/*======================================================
PARENT / TEACHER ACCESS
======================================================*/

.parent-teacher-section {
    margin-top: 15px;
    text-align: center;
}

#parentTeacherBtn {
    background: #ffffff;
    color: #143F7D;
    border: 2px solid #143F7D;
    border-radius: 8px;
    padding: 9px 16px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
}

#parentTeacherBtn:hover {
    background: #143F7D;
    color: #ffffff;
}

.parent-teacher-panel {
    display: none;
    margin-top: 12px;
    padding: 15px;
    background: #f5f7fa;
    border-radius: 10px;
    border: 1px solid #d5dce5;
}

.parent-teacher-panel h3 {
    margin-top: 0;
    color: #143F7D;
}

.parent-teacher-panel p {
    margin-bottom: 12px;
}

#lessonJump {
    padding: 8px;
    margin: 8px;
    border-radius: 6px;
    border: 1px solid #aaa;
}

#goToLessonBtn {
    background: #143F7D;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 9px 14px;
    cursor: pointer;
    font-weight: bold;
}
/*======================================================
IMPROVED LESSON NAVIGATION
======================================================*/

.lesson-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 10px;
}

.lesson-navigation button {
    min-width: 120px;
    height: 50px;
    padding: 10px 16px;
    box-sizing: border-box;
}

/* Parent / Teacher gets its own row */

.parent-teacher-section {
    width: 100%;
    text-align: center;
    margin-top: 15px;
}

/* Parent / Teacher panel */

.parent-teacher-panel {
    width: 100%;
    box-sizing: border-box;
    margin-top: 12px;
}

/* Lesson dropdown */

#lessonJump {
    width: min(100%, 320px);
    box-sizing: border-box;
}
/*======================================================
TIME TUTOR NAVIGATION BUTTON COLOURS
======================================================*/

.lesson-navigation button,
#goToLessonBtn {
    background: #143F7D;
    color: #FFFFFF;
    border: 2px solid #143F7D;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
}

.lesson-navigation button:hover,
#goToLessonBtn:hover {
    background: #0F315F;
    border-color: #0F315F;
}
/* =====================================================
   FIXED CLOCK LEGEND
===================================================== */

.clock-legend {

    width: 300px;

    margin-top: 0;

    padding: 16px;

    background: #ffffff;

    border: 1px solid #d5dfec;

    border-radius: 14px;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);

    max-height: calc(100vh - 200px);

    overflow-y: auto;

}


/* =====================================================
   LEGEND TITLE
===================================================== */

.legend-title {

    text-align: center;

    font-size: 22px;

    font-weight: 700;

    color: #143f7d;

    margin-bottom: 12px;

}


/* =====================================================
   LEGEND ITEM
===================================================== */

.legend-item {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 6px 4px;

    border-bottom: 1px solid #e4e9ef;

}


/* =====================================================
   SYMBOL AREA
===================================================== */

.legend-symbol {

    width: 54px;

    min-width: 54px;

    height: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* =====================================================
   LEGEND TEXT
===================================================== */

.legend-text {

    display: flex;

    flex-direction: column;

    gap: 2px;

}


.legend-text strong {

    font-size: 15px;

    color: #143f7d;

}


.legend-text span {

    font-size: 13px;

    color: #444;

}


/* =====================================================
   CLOCK FACE SYMBOL
===================================================== */

.clock-face-symbol {

    font-size: 34px;

    color: #143f7d;

}


/* =====================================================
   HAND EXAMPLES
===================================================== */

.legend-hand {

    display: block;

    height: 5px;

    border-radius: 5px;

    background: #ffd000;

}


/* Longer minute hand */

.minute-hand-example {

    width: 48px;

    background: #d62828;

}


/* Shorter hour hand */

.hour-hand-example {

    width: 30px;

    background: #173f7a;

}


/* =====================================================
   SECOND HAND
===================================================== */

.second-hand-example {

    display: block;

    width: 3px;

    height: 34px;

    background: #16a34a;

    position: relative;

}


.second-hand-example::after {

    content: "";

    position: absolute;

    width: 9px;

    height: 9px;

    border: 2px solid #16a34a;

    border-radius: 50%;

    bottom: -5px;

    left: -4px;

    background: white;

}


/* =====================================================
   TICKS
===================================================== */

.tick-example {

    display: block;

    background: #ffd000;

    border-radius: 3px;

}


/* Small tick = 1 minute */

.small-tick-example {

    width: 3px;

    height: 22px;

    background: #7c3aed;

}


/* Long tick = 5 minutes */

.long-tick-example {

    width: 5px;

    height: 34px;

    background: #f59e0b;

}


/* =====================================================
   NUMBER EXAMPLES
===================================================== */

.number-example {

    font-size: 27px;

    font-weight: 700;

    color: #143f7d;

}


.minute-number-example {

    font-size: 25px;

    font-weight: 700;

    color: #c62828;

}


/* =====================================================
   REMINDER
===================================================== */

.legend-reminder {

    margin-top: 12px;

    padding: 12px;

    background: #eef8ee;

    border: 1px solid #a8d5a8;

    border-radius: 10px;

    display: flex;

    flex-direction: column;

    gap: 4px;

}


.legend-reminder strong {

    color: #176b2c;

    font-size: 15px;

}


.legend-reminder span {

    color: #333;

    font-size: 13px;

    line-height: 1.4;

}