/* ==========================================================================
   1. TYPSNITT
   ========================================================================== */
@font-face {
  font-family: 'Ubuntu';
  src: url('fonts/Ubuntu-Regular.woff2') format('woff2'),
       url('fonts/Ubuntu-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Ubuntu';
  src: url('fonts/Ubuntu-Bold.woff2') format('woff2'),
       url('fonts/Ubuntu-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: block;
}


/* ==========================================================================
   2. GLOBAL LAYOUT (HTML & BODY)
   ========================================================================== */
* { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
}

::-webkit-scrollbar { 
  display: none; 
}

html, body {
  height: 100%; 
  width: 100%; 
  overflow: hidden;
  background-color: #003366; 
  color: #ffffff;
  font-family: 'Ubuntu', sans-serif;
  
  display: -webkit-box; 
  display: -webkit-flex; 
  display: flex;
  -webkit-box-align: center; 
  -webkit-align-items: center; 
  align-items: center;
  -webkit-box-pack: center; 
  -webkit-justify-content: center; 
  justify-content: center;
  
  cursor: none;
}


/* ==========================================================================
   3. HUVUDLAYOUT
   ========================================================================== */
.container {
  height: 96%; 
  width: 96%;
  max-width: 100vh;
  margin: 0 auto;

  display: -webkit-box; 
  display: -webkit-flex; 
  display: flex;
  -webkit-box-orient: vertical; 
  -webkit-flex-direction: column; 
  flex-direction: column;
  -webkit-box-pack: justify; 
  -webkit-justify-content: space-between; 
  justify-content: space-between;
}

.glass-panel {
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(149, 202, 219, 0.3); 
  border-radius: 8px;
  padding: 3vmin;
  overflow: hidden; 

  display: -webkit-box; 
  display: -webkit-flex; 
  display: flex;
  -webkit-box-orient: vertical; 
  -webkit-flex-direction: column; 
  flex-direction: column;
}

.top-section {
  width: 100%; 
  min-height: 0;
  padding: 4vmin 6vmin;
  margin-bottom: 2vh;

  -webkit-box-flex: 1.618; 
  -webkit-flex: 1.618 1 0%; 
  flex: 1.618 1 0%;
  -webkit-box-align: start; 
  -webkit-align-items: flex-start; 
  align-items: flex-start;
  -webkit-box-pack: center; 
  -webkit-justify-content: center; 
  justify-content: center;
}

.bottom-section {
  width: 100%;
  min-height: 0;

  -webkit-box-flex: 1; 
  -webkit-flex: 1 1 0%; 
  flex: 1 1 0%;
  display: -webkit-box; 
  display: -webkit-flex; 
  display: flex;
  -webkit-box-orient: horizontal; 
  -webkit-flex-direction: row; 
  flex-direction: row;
  -webkit-box-pack: justify; 
  -webkit-justify-content: space-between; 
  justify-content: space-between;
}

.side-card { 
  position: relative;

  -webkit-box-flex: 1; 
  -webkit-flex: 1; 
  flex: 1; 
  -webkit-box-align: center; 
  -webkit-align-items: center; 
  align-items: center;
  -webkit-box-pack: center; 
  -webkit-justify-content: center; 
  justify-content: center;
}

.bottom-section .side-card:first-child { 
  margin-right: 2vh;
}


/* ==========================================================================
   4. TID, DATUM & NAMNSDAG
   ========================================================================== */
.greeting {
  color: #BE880B; 
  font-weight: 700; 
  font-size: 4vmin; 
  letter-spacing: 0.1vw; 
  margin-bottom: 0; 
  text-transform: uppercase;
  white-space: nowrap; 
  line-height: 1;
}

.time {
  color: #ffffff; 
  font-size: 18vmin; 
  font-weight: 700; 
  line-height: 0.9; 
  letter-spacing: -0.5vmin;
  margin-left: -0.5vmin; 
  margin-top: 1.5vmin; 
  margin-bottom: 1.5vmin;
}

.date {
  color: #FFFFFF; 
  font-size: 4vmin; 
  font-weight: 400; 
  text-transform: capitalize;
  line-height: 1.2;
  margin-bottom: 2.5vh;
}

.namedays {
  width: 100%; 
  padding-top: 2.5vmin; 
  border-top: 4px solid #BE880B; 

  display: -webkit-box; 
  display: -webkit-flex; 
  display: flex; 
  -webkit-box-orient: vertical; 
  -webkit-flex-direction: column; 
  flex-direction: column; 
  -webkit-box-align: start; 
  -webkit-align-items: flex-start; 
  align-items: flex-start;
}

.nameday-label {
  display: block; 
  font-size: 2.5vmin; 
  text-transform: uppercase;
  font-weight: 700; 
  color: #95CADB; 
  margin-bottom: 0.8vh;
}

.nameday-names { 
  font-size: 3.5vmin; 
  font-weight: 700; 
  color: #FFFFFF; 
  line-height: 1.2; 
}


/* ==========================================================================
   5. VÄDER
   ========================================================================== */
.weather-container {
  height: 14vmin; 
  margin-bottom: 1vh;

  display: -webkit-box; 
  display: -webkit-flex; 
  display: flex; 
  -webkit-box-pack: center; 
  -webkit-justify-content: center; 
  justify-content: center; 
  -webkit-box-align: center; 
  -webkit-align-items: center; 
  align-items: center;
}

.weather-icon { 
  height: 14vmin; 
  width: auto; 
  filter: drop-shadow(0 0 5px rgba(0,0,0,0.3)); 
}

.temp { 
  font-size: 8vmin; 
  font-weight: 700; 
  margin: 0; 
  line-height: 1; 
  color: #FFFFFF; 
}

.city { 
  font-size: 2.5vmin; 
  color: #95CADB; 
  text-transform: uppercase; 
  font-weight: 700; 
  margin-top: 1vh; 
}


/* ==========================================================================
   6. LOGOTYP
   ========================================================================== */
.logo-img { 
  max-width: 80%; 
  max-height: 80%; 
  object-fit: contain; 
}

.logo-text { 
  display: none; 
  font-size: 6vmin; 
  font-weight: 700; 
  color: #ffffff; 
}