@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap');

@font-face {
  font-family: '7segment';
  src: url('assets/7segment.ttf') format('truetype');
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: 'Inter', sans-serif;
    overflow: hidden;
}

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

/* Top 70% */
#top-section {
    flex: 65;
    background-color: #d7ba89;  
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* Bottom 30% */
#bottom-section {
    flex: 35;
    background-color: #b89a6b;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

/* TIME */
#time-container {
    font-family: '7segment', sans-serif;
}

#hm {
    font-size: 20vw;
    letter-spacing: 0.08em;
    display: flex;
    align-items: flex-end;
}

.colon {
    opacity: 1;
}

/* CSV STATUS MESSAGE */
#csv-status {
    position: absolute;
    top: 70%;                 
    transform: translateY(-50%);
    width: 100%;
    text-align: center;
    font-size: 3.2vw;
    color: #b00000;
    font-weight: 600;
    display: none;
    pointer-events: none;
}

/* ZAWAL MESSAGE */
#zawal-message {
    width: 100%;
    text-align: center;
    font-size: 4vw;
    color: red;
    display: none;
    white-space: nowrap;
}

/* ZAWAL ACTIVE */
.zawal-active #bottom-section {
    background-color: #b00000;
}

.zawal-active #zawal-message,
.zawal-active #date-day-row,
.zawal-active #csv-status {
    color: white;
    font-weight: bold;
}

/* DATE + DAY */
#date-day-row {
    display: flex;
    align-items: baseline;
    gap: 1.6em;
    color: black;
}

/* DAY NAME IN TOP SECTION */
#ddd-container {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
}

#ddd {
    font-size: 7vw;
    font-weight: 600;
    letter-spacing: 0.25em;
    color: black;
}

#day,
#month,
#year {
    font-size: 8.5vw;
    font-weight: bold;
    letter-spacing: 0.12em; /* this is about 2 x "normal" */
}

#date-day-row.hijri {
    color: #ffffff;
}

/* LOGO */
#logo {
    position: absolute;
    bottom: 0.5vw;
    right: 0.5vw;
    width: 4vw;
    height: auto;
}

/* DIM MODE */
.dim #top-section {
    background-color: #0e0e0e;   /* slightly lighter black */
}

.dim #bottom-section {
    background-color: #000;   /* pure black */
}

/* Time (7-segment clock) */
.dim #hm,
.dim #hm span {
    color: #3f3f3f; 
}

/* Date + day */
.dim #date-day-row,
.dim #ddd,
.dim #day,
.dim #month,
.dim #year {
    color: #3f3f3f;
}

/* CSV status */
.dim #csv-status {
    color: #3f3f3f;
}

/* Zawal message (if shown during dim) */
.dim #zawal-message {
    color: #3f3f3f;
}

/* Optional: slightly dim colon blink */
.dim .colon {
    opacity: 0.5;
}