/*
 * A wall screen in the chalet, read from across the room. Everything is sized in rem,
 * and main.js sets the root size from the screen, so the layout scales from a laptop to a 4K TV.
 *
 * The chalet's Samsung TVs (2017) have a browser engine from around Chrome 47, so this sticks
 * to what that supports: no CSS variables, no grid, no flex gap. The palette, by name:
 *   glacier   rgb(19, 33, 47)        scrim over the photo, used at various opacities
 *   snow      #FFFFFF                text
 *   muted     rgba(255,255,255,.72)  secondary text
 *   signpost  #F2C300                lift sign, lifts open (with black text)
 *   closed    #D52B1E                lift sign, lifts closed
 * Signpost yellow and closed red are kept for the lift sign alone.
 */

html {
  font-size: 1.6vw;
}

* {
  box-sizing: border-box;
}

h1,
h2,
p,
dl,
dd {
  margin: 0;
  font-weight: inherit;
  font-size: inherit;
}

body {
  position: relative;
  height: 100vh;
  margin: 0;
  padding: 1.2rem 1.6rem 1rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: #FFFFFF;
  font-family: "Barlow", "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.25;
  background-color: rgb(19, 33, 47);
}

/* The photo behind everything, which main.js changes to suit the weather. This one shows
   until the forecast arrives. The scrim over it is its own layer, so only the photo changes. */
.backdrop,
.backdrop::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.backdrop {
  z-index: -1;
  background-image: url("../img/backgrounds/partly-grimentz.jpg");
  background-position: center;
  background-size: cover;
}

.backdrop::after {
  content: "";
  background-image: linear-gradient(rgba(19, 33, 47, 0.6), rgba(19, 33, 47, 0.2) 35%, rgba(19, 33, 47, 0.75) 62%, rgba(19, 33, 47, 0.9));
}

/* After dark the screen sits in a dim room, so the photo mostly goes */
body[data-daylight="night"] .backdrop::after {
  background-image: linear-gradient(rgba(19, 33, 47, 0.88), rgba(19, 33, 47, 0.94));
}

body[data-daylight="night"] .sign {
  -webkit-filter: brightness(0.8);
  filter: brightness(0.8);
}

.icon {
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Header */

#heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

#heading h1 {
  font-weight: 500;
  font-size: 1.1rem;
}

#heading .place p,
#clock_date {
  color: rgba(255, 255, 255, 0.72);
}

.clock {
  text-align: right;
}

#clock_time {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 1;
}

/* The lift sign, shaped like a Swiss hiking signpost. The pointed end is drawn separately
   (::after) because older engines can't use calc() inside clip-path. */

.sign {
  position: relative;
  align-self: flex-start;
  min-width: 22rem;
  margin: 1.2rem 2rem 0 0;
  padding: 0.9rem 1.2rem 1rem 1.4rem;
  background: rgba(19, 33, 47, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #FFFFFF;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
}

.sign::after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 2rem;
  height: 100%;
  background: inherit;
  -webkit-backdrop-filter: inherit;
  backdrop-filter: inherit;
  -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* Frosted until the lift status arrives; then yellow for skiing, red for none */
.sign[data-state="open"] {
  background: #F2C300;
  color: #000000;
}

.sign[data-state="closed"] {
  background: #D52B1E;
}

.sign h2 {
  font-weight: 700;
  font-size: 3.4rem;
  line-height: 1;
  margin-bottom: 0.6rem;
}

.sign dl > div {
  display: flex;
  justify-content: space-between;
  font-weight: 500;
  font-size: 1.35rem;
}

.sign dd {
  margin-left: 2rem;
  font-weight: 600;
}

/* Hourly forecast: mountain over village, so the drop in temperature reads at a glance.
   Pushed to the bottom of the screen, leaving the photo showing between it and the sign. */

.hourly {
  margin-top: auto;
}

.hourly-row {
  display: flex;
  align-items: center;
}

.hourly-row + .hourly-row {
  margin-top: 0.8rem;
}

.hourly-row > * {
  flex: 1 1 0%;
}

.hourly-row > :first-child {
  flex: none;
  width: 7rem;
}

.hourly .time {
  color: rgba(255, 255, 255, 0.72);
}

.place-label h2 {
  font-weight: 500;
  font-size: 1.1rem;
}

.place-label p {
  color: rgba(255, 255, 255, 0.72);
}

.slot,
.day-weather {
  display: flex;
  align-items: flex-start;
}

.slot > .icon {
  font-size: 2.4rem;
  margin-right: 0.6rem;
}

.temp {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 600;
  font-size: 2.6rem;
  line-height: 1;
}

.slot .wind {
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.85rem;
}

.slot .wind .icon {
  font-size: 1.2em;
  margin-right: 0.3em;
}

/* Light wind fades back; wind that matters on the lifts gets louder */
.slot .wind.calm {
  color: rgba(255, 255, 255, 0.45);
}

.slot .wind.breezy {
  color: #FFFFFF;
  font-weight: 500;
  font-size: 1rem;
}

.slot .wind.windy {
  color: #FFFFFF;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
}

.slot .wind.windy .icon {
  stroke-width: 2;
}

/* Next three days, and how fresh the forecast is */

footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.outlook {
  flex: none;
  display: flex;
  align-items: flex-start;
}

.day + .day {
  margin-left: 3.5rem;
}

.day h2 {
  font-weight: 500;
  margin-bottom: 0.2rem;
}

.day .icon {
  font-size: 2rem;
  margin-right: 0.6rem;
}

.day .temp {
  font-size: 1.5rem;
  line-height: 2rem;
  white-space: nowrap;
}

/* Quieter than the numbers it joins */
.day .range {
  color: rgba(255, 255, 255, 0.72);
  font-family: "Barlow", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 0.65em;
}

.day .snowfall {
  font-weight: 500;
}

.status {
  margin-left: 2rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.8rem;
  text-align: right;
}

.status.stale {
  color: #FFFFFF;
  font-weight: 500;
}

/* A phone held upright, for checking the mountain while out. The same screen, read at arm's
   length: it scrolls rather than fitting the window, and drops the clock the phone already has.
   The media query here matches the one in main.js, which leaves the text size to this. */

@media (orientation: portrait) and (max-width: 700px) {
  html {
    font-size: 4.1vw;
  }

  body {
    height: auto;
    min-height: 100vh;
    padding: 1rem 1rem 1.5rem;
    overflow: visible;
  }

  .clock {
    display: none;
  }

  .sign {
    align-self: stretch;
    min-width: 0;
    margin: 1rem 1.6rem 0 0;
    padding: 0.8rem 0.9rem 0.9rem 1rem;
  }

  .sign::after {
    width: 1.6rem;
  }

  .sign h2 {
    font-size: 2.6rem;
  }

  .sign dl > div {
    font-size: 1.15rem;
  }

  .sign dd {
    margin-left: 1rem;
  }

  /* The hourly table turned on its side: mountain and village side by side, a row per time.
     Each row's cells join one grid that fills down a column at a time, so the markup stays
     the TV's. Grid is out of the TVs' reach, but they never match this query. */

  .hourly {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    grid-template-rows: repeat(6, auto);
    grid-auto-flow: column;
    grid-gap: 0.9rem 1rem;
    align-items: center;
    margin-top: 2.5rem;
  }

  .hourly-row {
    display: contents;
  }

  .hourly-row > :first-child {
    width: auto;
  }

  .place-label {
    align-self: end;
  }

  .slot > .icon {
    font-size: 2.2rem;
    margin-right: 0.5rem;
  }

  .temp {
    font-size: 2.4rem;
  }

  .slot .wind {
    white-space: nowrap;
  }

  /* The next three days as a list, one to a line */

  footer {
    display: block;
    margin-top: 1.8rem;
  }

  .outlook {
    display: block;
  }

  .day {
    display: flex;
    align-items: center;
  }

  .day + .day {
    margin: 0.6rem 0 0;
  }

  .day h2 {
    width: 7.5rem;
    margin-bottom: 0;
  }

  .status {
    margin: 1.2rem 0 0;
    text-align: left;
  }
}