/* ON6UB — "transceiver" skin.
 *
 * Loaded on top of custom.css when `skin: transceiver` is set in on6ub.yaml.
 * Turns the site chrome into a rig front panel: brushed-metal header, a VFD
 * readout, and keys that look and press like the ones on an IC-7300 / FT-891.
 *
 * Deliberately limited to the CHROME. The article text stays in a normal
 * typeface at normal contrast — a seven-segment font is a display, not a
 * bodytext face, and a club website still has to be readable by a 70-year-old
 * OM on a phone in daylight.
 */

/* DSEG by keshikan — SIL Open Font License. See fonts/DSEG-LICENSE.txt.
   Self-hosted on purpose: no CDN, so it works even if the host blocks outbound
   requests, and nothing is fetched from a third party. */
@font-face {
  font-family: "DSEG7 Classic";
  src: url("../fonts/DSEG7Classic-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "DSEG14 Classic";
  src: url("../fonts/DSEG14Classic-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* A real VFD is that blue-green cyan; the amber is the backlight on the keys. */
  --vfd: #3ff3c8;
  --vfd-dim: rgba(63, 243, 200, 0.09);
  --backlight: #ffb454;

  --panel-hi: #333940;
  --panel-lo: #14171a;
  --key-face-hi: #3c4249;
  --key-face-lo: #23272c;
  --key-edge: #0d0f11;
}

/* ---------------------------------------------------------------- panel --- */

#header,
.navbar {
  /* Fine vertical striping over a metal gradient = brushed aluminium. */
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.022) 0 1px,
      transparent 1px 3px
    ),
    linear-gradient(180deg, var(--panel-hi) 0%, #1d2126 62%, var(--panel-lo) 100%);
  border-bottom: 3px solid #0a0c0e;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 2px 14px rgba(0, 0, 0, 0.45);
}

/* ------------------------------------------------------------- display --- */

.rig-display {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  margin-left: 0.55rem;
  padding: 0.35rem 0.5rem 0.3rem;
  background: linear-gradient(180deg, #05130f 0%, #082019 100%);
  border: 1px solid #000;
  border-radius: 3px;
  box-shadow:
    inset 0 3px 14px rgba(0, 0, 0, 0.95),
    inset 0 0 24px rgba(63, 243, 200, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.07);
}

.rig-freq {
  position: relative;
  font-family: "DSEG7 Classic", ui-monospace, monospace;
  font-size: 0.9rem;
  line-height: 1;
  color: var(--vfd);
  text-shadow:
    0 0 5px rgba(63, 243, 200, 0.6),
    0 0 16px rgba(63, 243, 200, 0.28);
}

/* The unlit segments. A real display shows every segment faintly, which is what
   stops it looking like coloured text in a box. "8" lights them all. */
.rig-freq::before {
  content: "188.888.88";
  position: absolute;
  inset: 0;
  color: var(--vfd-dim);
  text-shadow: none;
  pointer-events: none;
}

.rig-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "DSEG14 Classic", ui-monospace, monospace;
  font-size: 0.44rem;
  letter-spacing: 0.06em;
  color: rgba(63, 243, 200, 0.72);
  text-shadow: 0 0 4px rgba(63, 243, 200, 0.35);
}

/* Mode/VFO annunciators — lit only when "on", exactly like the real thing. */
.rig-tag {
  padding: 1px 3px;
  border: 1px solid rgba(63, 243, 200, 0.22);
  border-radius: 2px;
  opacity: 0.32;
}

.rig-tag.on {
  opacity: 1;
  border-color: rgba(63, 243, 200, 0.75);
  box-shadow: 0 0 6px rgba(63, 243, 200, 0.25);
}

/* S-meter. Bars up to S9 are cyan; over S9 goes red, as on every rig ever. */
.rig-smeter {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 8px;
  margin-left: auto;
}

.rig-smeter i {
  width: 2px;
  background: rgba(63, 243, 200, 0.16);
  border-radius: 1px;
}

.rig-smeter i:nth-child(1) { height: 3px; }
.rig-smeter i:nth-child(2) { height: 4px; }
.rig-smeter i:nth-child(3) { height: 5px; }
.rig-smeter i:nth-child(4) { height: 5px; }
.rig-smeter i:nth-child(5) { height: 6px; }
.rig-smeter i:nth-child(6) { height: 7px; }
.rig-smeter i:nth-child(7) { height: 8px; }
.rig-smeter i:nth-child(8) { height: 8px; }
.rig-smeter i:nth-child(9) { height: 8px; }

/* Lit up to S7, because a dead meter looks broken. */
.rig-smeter i:nth-child(-n + 6) {
  background: var(--vfd);
  box-shadow: 0 0 4px rgba(63, 243, 200, 0.6);
}

.rig-smeter i:nth-child(n + 8) {
  background: rgba(255, 90, 70, 0.18);
}

@media (max-width: 900px) {
  /* No room for a front panel on a phone. The display goes, and the text
     wordmark comes back in its place — otherwise the header is a bare emblem
     with the club's name nowhere on it. */
  .rig-display {
    display: none;
  }

  .on6ub-wordmark {
    display: inline-flex;
  }
}

/* The text wordmark is dropped in this skin: the emblem already reads ON6UB and
   the callsign now sits on the display. Nine nav keys need that width more than
   a third statement of the same name does. */
.on6ub-wordmark {
  display: none;
}

/* Callsign line on the display, in 14-segment. */
.rig-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  font-family: "DSEG14 Classic", ui-monospace, monospace;
  font-size: 0.56rem;
  letter-spacing: 0.04em;
  color: var(--vfd);
  text-shadow: 0 0 5px rgba(63, 243, 200, 0.45);
}

.rig-sect {
  opacity: 0.55;
}

/* Emblem: smaller in this skin than in classic. It sits beside a display, and
   the two together were crowding the keys off the row. */
.navbar-brand img {
  height: 44px;
}

/* ---------------------------------------------------------------- keys --- */

.dropmenu > ul.navigation > li > a {
  margin: 0 2px;
  /* Sized for a thumb, not just for the eye — this gets used on a phone in a
     clubhouse. ~34px tall, which is close to the 44px touch target once the
     surrounding row padding is counted. */
  padding: 0.52rem 0.78rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #d8e0e6;
  background: linear-gradient(180deg, var(--key-face-hi) 0%, var(--key-face-lo) 100%);
  border: 1px solid var(--key-edge);
  border-top-color: #4d545c;
  border-radius: 4px;
  /* The 2px hard shadow is the key's height. Take it away on :active and the
     button physically travels — that is the whole trick. */
  box-shadow:
    0 2px 0 #0b0d0f,
    0 3px 7px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.13);
  transition: transform 0.04s ease, box-shadow 0.04s ease, color 0.12s ease;
}

.dropmenu > ul.navigation > li > a:hover {
  color: #fff;
  background: linear-gradient(180deg, #464d55 0%, #282d33 100%);
}

.dropmenu > ul.navigation > li > a:active {
  transform: translateY(2px);
  box-shadow:
    0 0 0 #0b0d0f,
    0 1px 3px rgba(0, 0, 0, 0.5),
    inset 0 2px 5px rgba(0, 0, 0, 0.55);
}

/* The active page is the key with its backlight on. */
.dropmenu > ul.navigation > li > a.active {
  color: #2a1a06;
  background: linear-gradient(180deg, #ffc978 0%, var(--backlight) 100%);
  border-color: #7a4d13;
  border-top-color: #ffd9a0;
  box-shadow:
    0 2px 0 #6b4310,
    0 0 14px rgba(255, 180, 84, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.dropmenu > ul.navigation > li > a.active:hover {
  color: #2a1a06;
  background: linear-gradient(180deg, #ffd699 0%, #ffbe66 100%);
}

/* The dropdown stays a normal readable panel. Menu items are not keys — making
   them keys would be theming for its own sake at the cost of legibility. */

/* ------------------------------------------------------------- buttons --- */

button[type="submit"],
.button.contrast {
  font-family: ui-monospace, monospace;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #08201a;
  background: linear-gradient(180deg, #5ffbd3 0%, #23c9a3 100%);
  border: 1px solid #0d6350;
  border-radius: 4px;
  box-shadow:
    0 2px 0 #0b4c3e,
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: transform 0.04s ease, box-shadow 0.04s ease;
}

button[type="submit"]:hover,
.button.contrast:hover {
  background: linear-gradient(180deg, #7ffde0 0%, #2fdcb4 100%);
  color: #08201a;
}

button[type="submit"]:active,
.button.contrast:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 #0b4c3e, inset 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* --------------------------------------------------------------- footer --- */

#footer {
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.02) 0 1px,
      transparent 1px 3px
    ),
    linear-gradient(180deg, var(--panel-lo) 0%, #0d0f11 100%);
  border-top: 3px solid #0a0c0e;
}

/* The club frequency, on the display it deserves. */
.on6ub-freq {
  font-family: "DSEG7 Classic", ui-monospace, monospace;
  font-size: 0.95rem;
  color: var(--vfd);
  text-shadow: 0 0 6px rgba(63, 243, 200, 0.45);
}

/* -------------------------------------------------------- accessibility --- */

@media (prefers-reduced-motion: reduce) {
  .dropmenu > ul.navigation > li > a,
  button[type="submit"],
  .button.contrast {
    transition: none;
  }

  .dropmenu > ul.navigation > li > a:active,
  button[type="submit"]:active {
    transform: none;
  }
}