/* JetBrains Mono, self-hosted (SIL OFL, see fonts/OFL.txt): a free
   monospace designed for on-screen readability. All four faces ship so the
   admin-panel bold/cursive styling renders true instead of synthesized. */
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --bg: #1b1b1b;            /* COSMIC Dark (System76) */
  --fg: #d4d4d4;
  --green: #48b9c7;
  --green-bright: #48b9c7; /* Pop!_OS teal accent */
  --blue: #5bc8d8;
  --yellow: #f2b45e;
  --red: #f16268;
  --dim: #8a8a8a;
  --titlebar: #2b2b2b;
  --desktop: #121212;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--desktop);
  font-family: "JetBrains Mono", "Ubuntu Mono", "Fira Code", ui-monospace,
    "DejaVu Sans Mono", Menlo, Consolas, monospace;
  /* Scales with the viewport, clamped for phones and huge monitors */
  font-size: clamp(13px, 0.55vw + 10px, 19px);
  line-height: 1.45;
}

/* ---- full-screen terminal ---- */

#window {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--bg);
  overflow: hidden;
}

#terminal {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 0.8em 1em 1.2em;
  cursor: text;
  color: var(--fg);
  scrollbar-color: #5e5c64 transparent;
}

/* On wide screens the terminal becomes a centered window on the desktop
   (the "desktop" theme color) instead of running edge to edge. */
@media (min-width: 900px) {
  #window {
    max-width: 80em;
    height: calc(100% - 3em);
    margin: 1.5em auto;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 10px;
    box-shadow: 0 14px 48px rgba(0, 0, 0, 0.45);
  }

  #terminal { padding: 1em 1.4em 1.4em; }
}

/* ---- dropdown menu, pinned to the window's upper right corner ---- */

#menu {
  position: absolute;
  top: 0.8em;
  right: 0.8em;
  z-index: 10;
  font-size: 0.95em;
}

#menu-toggle {
  background: var(--titlebar);
  color: var(--fg);
  border: 2px solid var(--green-bright);
  border-radius: 8px;
  padding: 0.55em 1.2em;
  font: inherit;
  font-size: 1.15em;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

#menu-toggle:hover,
#menu-toggle[aria-expanded="true"] {
  background: var(--green-bright);
  color: var(--bg);
}
#menu-toggle:hover .caret,
#menu-toggle[aria-expanded="true"] .caret { color: var(--bg); }

#menu-toggle .caret { color: var(--green-bright); }

#menu-list {
  /* Anchored to the button's bottom-right: opens downwards and leftwards. */
  position: absolute;
  top: calc(100% + 0.4em);
  right: 0;
  list-style: none;
  margin: 0;
  padding: 0.3em;
  min-width: 12em;
  background: var(--titlebar);
  border: 1px solid var(--green-bright);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

#menu-list li { margin: 0; }

#menu-list button {
  display: flex;
  justify-content: space-between;
  gap: 1.5em;
  width: 100%;
  background: transparent;
  color: var(--fg);
  border: none;
  border-radius: 4px;
  padding: 0.4em 0.6em;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

#menu-list button:hover,
#menu-list button:focus {
  background: var(--green-bright);
  color: var(--bg);
  outline: none;
}

#menu-list button .hint { color: var(--dim); }
#menu-list button:hover .hint,
#menu-list button:focus .hint { color: var(--bg); }

@media (max-width: 480px) {
  #menu { font-size: 0.9em; }
  #menu-list { min-width: 9em; }
}

#output { white-space: pre-wrap; word-break: break-word; }

#output a { color: var(--blue); }

.prompt-user { color: var(--green-bright); font-weight: bold; }
.prompt-path { color: var(--blue); font-weight: bold; }
.cmd-echo { color: var(--fg); }
.title { color: var(--yellow); font-weight: bold; }
.accent { color: var(--green-bright); font-weight: bold; }
.dim { color: var(--dim); }
.error { color: var(--red); }
.status-dot { color: var(--status); }
.ascii { color: var(--green-bright); line-height: 1.15; }

/* ---- static pages: blog & notes ---- */

.page-body { overflow-y: auto; }

.page {
  max-width: 46em;
  margin: 0 auto;
  padding: 1.2em 1em 3em;
  color: var(--fg);
}

.page a { color: var(--blue); }

.page-nav {
  display: flex;
  gap: 1.5em;
  margin-bottom: 1.5em;
}

.page-prompt { margin-bottom: 1em; }

.entry { margin-bottom: 2.5em; }

.entry-date { color: var(--dim); }

.entry-heading {
  margin: 0.15em 0 0.5em;
  font-size: 1.3em;
  color: var(--yellow);
}

.entry-heading a { color: inherit; text-decoration: none; }
.entry-heading a:hover { text-decoration: underline; }

.entry-excerpt { margin: 0; }

.entry-body { white-space: pre-wrap; word-break: break-word; }

/* Plain-HTML CV below the full-screen terminal (scroll to reach it) */
.cv-content {
  border-top: 1px solid var(--titlebar);
  color: var(--fg);
}

.cv-content h1 {
  color: var(--yellow);
  font-size: 1.5em;
  margin: 0 0 0.25em;
}

.cv-content a { color: var(--blue); }

.entry-photo {
  display: block;
  max-width: 100%;
  border-radius: 6px;
  margin: 0.75em 0;
}

#input-line { display: flex; align-items: baseline; gap: 0.5ch; }
#prompt { white-space: nowrap; }

#cmd {
  flex: 1;
  min-width: 8ch;
  background: transparent;
  border: none;
  outline: none;
  color: var(--fg);
  font: inherit;
  caret-color: var(--fg);
  padding: 0;
}