/* ==========================================================================
   pfarrhofer.at — Styles (Phase 1a Paper CV + Phase 1b Terminal Layout)
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Custom Properties
   -------------------------------------------------------------------------- */

:root {
  /* Terminal color palette */
  --term-bg: #1a1a2e;
  --term-bg-panel: #1e1e32;
  --term-text: #c0c0c0;
  --term-text-bright: #e0e0e0;
  --term-accent: #e8a035;
  --term-blue: #4a90d9;
  --term-purple: #9D7CD8;
  --term-dim: #606060;
  --term-border: #333333;
  --term-hover-bg: rgba(200, 160, 120, 0.22);

  /* Viewport height fallback for mobile keyboards */
  --viewport-height: 100dvh;

  /* Monospace font stack */
  --term-font: "Cascadia Code", "Fira Code", "Consolas", "Liberation Mono", "Courier New", monospace;
}

/* --------------------------------------------------------------------------
   6.1  Reset / Base
   -------------------------------------------------------------------------- */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 2rem 1.5rem;
  font-family: "Garamond", "EB Garamond", "Cormorant Garamond", "Georgia", "Times New Roman", serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #1a1a1a;
  background: #ffffff;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   6.2  Terminal hidden (default — no JS)
   -------------------------------------------------------------------------- */

#terminal {
  display: none;
}

/* --------------------------------------------------------------------------
   6.3  Language toggle — German visible by default
   -------------------------------------------------------------------------- */

#cv-content > article[lang="de"] {
  display: block;
}

#cv-content > article[lang="en"] {
  display: none;
}

/* --------------------------------------------------------------------------
   6.4  .js-active — Terminal UI styles (Phase 1b)
   -------------------------------------------------------------------------- */

/* --- Body overrides for terminal mode --- */

body.js-active {
  background: var(--term-bg);
  color: var(--term-text);
  font-family: var(--term-font);
  padding: 0;
  margin: 0;
  max-width: none;
  overflow: hidden;
  overscroll-behavior: none;
}

/* --- Hide semantic CV, show terminal --- */

.js-active #cv-content {
  display: none;
}

/* --- Terminal flex layout --- */

.js-active #terminal {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  height: var(--viewport-height, 100dvh);
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
}

/* --- Header (ASCII art + tagline) --- */

.js-active #terminal-header {
  text-align: center;
  padding: 1.5rem 1rem 0.75rem;
  flex-shrink: 0;
}

.js-active #ascii-art,
.js-active #ascii-art-narrow {
  font-family: var(--term-font);
  font-size: 0.7rem;
  line-height: 1.15;
  color: var(--term-accent);
  margin: 0 auto;
  display: inline-block;
  text-align: left;
  white-space: pre;
  overflow: hidden;
}

.js-active #ascii-art-narrow {
  display: none;
}

.js-active #ascii-tagline {
  color: var(--term-dim);
  font-size: 0.8rem;
  margin: 0.5rem 0 0;
  letter-spacing: 0.05em;
}

/* --- Output area (scrollable) --- */

.js-active #terminal-output {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 1rem 1.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--term-dim) transparent;
}

/* --- Welcome screen and command list --- */

.js-active #welcome-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 0;
}

.js-active .command-list {
  display: table;
  border-spacing: 0;
  margin: 0 auto;
}

.js-active .command-row {
  display: table-row;
  cursor: pointer;
  line-height: 1.8;
}

.js-active .command-row:hover .cmd-name {
  text-decoration: none;
}

.js-active .command-row:hover {
  background: var(--term-hover-bg);
}

.js-active .cmd-name {
  display: table-cell;
  color: var(--term-accent);
  font-weight: normal;
  padding-right: 2rem;
  white-space: nowrap;
}

.js-active .cmd-desc {
  display: table-cell;
  color: var(--term-text);
  padding-right: 2rem;
  white-space: nowrap;
}

.js-active .cmd-shortcut {
  display: table-cell;
  color: var(--term-dim);
  white-space: nowrap;
  text-align: right;
}

.js-active .command-separator {
  display: table-row;
  height: 0.75rem;
}

.js-active .command-group-header {
  display: table-row;
}

.js-active .command-group-header span {
  display: table-cell;
  color: var(--term-purple);
  font-weight: normal;
  padding-bottom: 0.25rem;
  padding-top: 0.1rem;
}

/* --- Prompt / input area --- */

.js-active #terminal-input {
  flex-shrink: 0;
  padding: 0.5rem 1.5rem 0.5rem 1.25rem;
  border-left: 3px solid var(--term-blue);
  margin: 0 1.5rem;
  background: var(--term-bg-panel);
  border-radius: 4px;
}

.js-active #prompt-line {
  display: flex;
  align-items: center;
  min-height: 1.5rem;
}

.js-active #prompt-symbol {
  color: var(--term-blue);
  font-weight: bold;
  margin-right: 0.5rem;
  flex-shrink: 0;
  -webkit-user-select: none;
  user-select: none;
}

.js-active #prompt-cursor {
  display: inline-block;
  width: 0.6em;
  height: 1.15em;
  background-color: var(--term-accent);
  animation: cursor-blink 1s step-end infinite;
  vertical-align: text-bottom;
}

@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* --- Status bar --- */

.js-active #terminal-status {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.35rem 1.5rem;
  border-top: 1px solid var(--term-border);
  font-size: 0.75rem;
  background: var(--term-bg);
  -webkit-user-select: none;
  user-select: none;
}

.js-active #status-left,
.js-active #status-right {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.js-active .status-key {
  color: var(--term-text);
}

.js-active .status-action {
  color: var(--term-dim);
}

.js-active .status-divider {
  color: var(--term-border);
  margin: 0 0.25rem;
}

.js-active .status-brand {
  color: var(--term-dim);
}

/* --- Scrollbar styling (Webkit) --- */

.js-active #terminal-output::-webkit-scrollbar {
  width: 6px;
}

.js-active #terminal-output::-webkit-scrollbar-track {
  background: transparent;
}

.js-active #terminal-output::-webkit-scrollbar-thumb {
  background: var(--term-dim);
  border-radius: 3px;
}

.js-active #terminal-output::-webkit-scrollbar-thumb:hover {
  background: var(--term-text);
}

/* --- Text selection in terminal --- */

.js-active ::selection {
  background: rgba(232, 160, 53, 0.3);
  color: var(--term-text-bright);
}

/* --- Focus outline for accessibility --- */

.js-active .command-row:focus-visible {
  outline: 1px solid var(--term-accent);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   6.5  Typography & Layout
   -------------------------------------------------------------------------- */

/* --- Page header (name + title + tagline) --- */

#cv-content header {
  margin-bottom: 2rem;
  text-align: center;
}

#cv-content header h1 {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
  color: #1a1a1a;
  letter-spacing: 0.02em;
}

#cv-content header .title {
  font-size: 1.1rem;
  color: #444444;
  margin: 0 0 0.15rem;
}

#cv-content header .tagline {
  font-size: 0.95rem;
  color: #666666;
  margin: 0;
}

/* --- Section headings (h2) --- */

#cv-content section > h2 {
  font-size: 1.15rem;
  font-variant: small-caps;
  letter-spacing: 0.06em;
  color: #1a1a1a;
  border-bottom: 1px solid #cccccc;
  padding-bottom: 0.3rem;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

/* First section needs less top margin */
#cv-content section:first-of-type > h2 {
  margin-top: 0;
}

/* --- Entry headings (h3) — job titles, degrees, publications --- */

#cv-content h3 {
  font-size: 1rem;
  font-weight: normal;
  margin: 0 0 0.15rem;
  color: #1a1a1a;
}

/* --- Impressum sub-headings --- */

#cv-content [data-command="impressum"] h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-top: 1.25rem;
  margin-bottom: 0.4rem;
}

/* --- Company / institution / venue --- */

#cv-content .company,
#cv-content .institution,
#cv-content .venue {
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 0.1rem;
}

/* --- Period / dates --- */

#cv-content .period {
  color: #666666;
  margin: 0 0 0.35rem;
}

/* --- Regular paragraphs inside sections --- */

#cv-content section > p,
#cv-content section article > p:not([class]) {
  margin: 0.25rem 0 0.5rem;
}

/* --------------------------------------------------------------------------
   6.6  Photo
   -------------------------------------------------------------------------- */

[data-command="about"] img:not(.phone-img-paper):not(.phone-img-terminal) {
  float: right;
  max-width: 190px;
  height: auto;
  margin: 0 0 0.75rem 1.25rem;
  border: 1px solid #dddddd;
}

[data-command="about"] a:has(img:not(.phone-img-paper):not(.phone-img-terminal)) {
  line-height: 0;
}

[data-command="about"] a:hover img:not(.phone-img-paper):not(.phone-img-terminal) {
  opacity: 0.85;
}

@media (max-width: 600px) {
  [data-command="about"] img:not(.phone-img-paper):not(.phone-img-terminal) {
    float: none;
    display: block;
    margin: 0 auto 1rem;
    max-width: 150px;
  }
}

/* --------------------------------------------------------------------------
   6.7  Lists & Definition Lists
   -------------------------------------------------------------------------- */

#cv-content ul {
  margin: 0.25rem 0 0.75rem;
  padding-left: 1.5rem;
}

#cv-content li {
  margin-bottom: 0.3rem;
}

#cv-content ul.highlights {
  list-style-type: disc;
}

/* Definition lists (expertise, impressum) */

#cv-content dl {
  margin: 0.5rem 0;
}

#cv-content dt {
  font-weight: 700;
  margin-top: 0.6rem;
}

#cv-content dt:first-of-type {
  margin-top: 0;
}

#cv-content dd {
  margin-left: 1.5rem;
  margin-bottom: 0.2rem;
}

/* --------------------------------------------------------------------------
   6.8  Address / Contact
   -------------------------------------------------------------------------- */

#cv-content address {
  font-style: normal;
  margin-top: 0.75rem;
}

#cv-content address ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

#cv-content address li {
  margin-bottom: 0.2rem;
}

#cv-content a {
  color: #1a5276;
  text-decoration: none;
}

#cv-content a:hover {
  color: #0e3a5c;
  text-decoration: underline;
}

#cv-content .links {
  margin-top: 0.3rem;
}

#cv-content .links a {
  margin-right: 1rem;
  white-space: nowrap;
  /* Make emoji monochrome like terminal copy button */
  filter: grayscale(100%) opacity(0.7);
  transition: filter 0.15s ease;
}

#cv-content .links a:hover {
  filter: grayscale(100%) opacity(1);
}

/* --- Phone number anti-scraping images --- */

#cv-content .phone-number {
  display: inline;
  vertical-align: text-bottom;
}

#cv-content .phone-img-paper {
  display: inline;
  vertical-align: text-bottom;
  height: 0.7em;
  width: auto;
  border: none;
  margin: 0;
  padding: 0;
}

#cv-content .phone-img-terminal {
  display: none;
}

/* --------------------------------------------------------------------------
   6.9  Experience / education / publication entries
   -------------------------------------------------------------------------- */

#cv-content section > article {
  margin-bottom: 1.25rem;
}

#cv-content section > article:last-child {
  margin-bottom: 0;
}

/* Technology spans inside highlight bullets */

.tech {
  font-size: 0.9em;
  color: #555555;
}

/* Legal references (impressum footer line) */

.legal-refs {
  font-size: 0.85rem;
  color: #888888;
  margin-top: 1.5rem;
}

/* --------------------------------------------------------------------------
   6.10  Print styles
   -------------------------------------------------------------------------- */

@media print {
  body {
    background: #ffffff;
    color: #000000;
    padding: 0;
    max-width: none;
    font-size: 11pt;
    line-height: 1.4;
  }

  #terminal {
    display: none !important;
  }

  /* Ensure German CV is shown and English is hidden for print */
  #cv-content > article[lang="de"] {
    display: block !important;
  }

  #cv-content > article[lang="en"] {
    display: none !important;
  }

  /* Override .js-active to always show CV content in print */
  .js-active #cv-content {
    display: block !important;
  }

  #cv-content a {
    color: #000000;
    text-decoration: underline;
  }

  [data-command="about"] img {
    max-width: 150px;
    border: none;
  }

  #cv-content section > h2 {
    border-bottom-color: #999999;
  }

  /* Avoid breaking entries across pages */
  #cv-content section > article {
    break-inside: avoid;
  }

  #cv-content section {
    break-inside: avoid;
  }

  /* Hide impressum in print — not typically part of a printed CV */
  [data-command="impressum"] {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Terminal responsive breakpoints (Phase 1b)
   -------------------------------------------------------------------------- */

/* --- Tablet (600px–900px): narrow ASCII art fallback --- */

@media (max-width: 900px) {
  .js-active #ascii-art {
    display: none;
  }
  .js-active #ascii-art-narrow {
    display: inline-block;
  }
  .js-active #terminal-header {
    padding: 1rem 0.75rem 0.5rem;
  }
  .js-active #terminal-output {
    padding: 0.75rem 1rem;
  }
  .js-active #terminal-input {
    margin: 0 1rem;
  }
  .js-active #terminal-status {
    padding: 0.35rem 1rem;
  }
}

/* --- Mobile (<600px): text header fallback, hide shortcuts --- */

@media (max-width: 600px) {
  .js-active #ascii-art,
  .js-active #ascii-art-narrow {
    display: none;
  }
  .js-active #terminal-header {
    padding: 0.75rem 0.75rem 0.5rem;
  }
  .js-active #terminal-header::before {
    content: "PFARRHOFER";
    display: block;
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--term-accent);
    letter-spacing: 0.15em;
    margin-bottom: 0.25rem;
  }
  .js-active #terminal-output {
    padding: 0.5rem 0.75rem;
  }
  .js-active #terminal-input {
    margin: 0 0.75rem;
    padding: 0.4rem 0.75rem 0.4rem 0.5rem;
  }
  .js-active #terminal-status {
    padding: 0.3rem 0.75rem;
    font-size: 0.7rem;
  }
  .js-active .cmd-desc {
    white-space: normal;
  }
  .js-active .cmd-shortcut {
    display: none;
  }

  /* --- Text overflow prevention --- */

  .js-active #terminal-output {
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
    box-sizing: border-box;
  }

  .js-active .cmd-echo,
  .js-active .cmd-output {
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
  }

  .js-active pre,
  .js-active code {
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-width: 100%;
  }

  .js-active a {
    overflow-wrap: break-word;
    word-break: break-all;
  }
}

/* --- Phone landscape (severe vertical constraint) --- */

@media (max-height: 500px) and (orientation: landscape) {
  .js-active #terminal-header {
    display: none;
  }
  .js-active #terminal-output {
    padding: 0.35rem 0.75rem;
  }
  .js-active .command-row {
    line-height: 1.4;
  }
  .js-active #terminal-input {
    padding: 0.3rem 0.75rem 0.3rem 0.5rem;
  }
  .js-active #terminal-status {
    padding: 0.2rem 0.75rem;
  }
}

/* --------------------------------------------------------------------------
   Phase 3: Hidden input and prompt text
   -------------------------------------------------------------------------- */

.js-active #prompt-input {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  border: none;
  padding: 0;
}

.js-active #prompt-text {
  color: var(--term-text);
  white-space: pre;
}

/* --------------------------------------------------------------------------
   Phase 3: Command output styling
   -------------------------------------------------------------------------- */

/* --- Output blocks --- */

.js-active .cmd-block {
  margin-bottom: 0.75rem;
}

/* --- Command echo (> /experience) --- */

.js-active .cmd-echo {
  color: var(--term-dim);
  margin-bottom: 0.35rem;
}

.js-active .cmd-echo-symbol {
  color: var(--term-blue);
  font-weight: bold;
}

/* --- Error messages --- */

.js-active .cmd-error {
  color: #e05555;
}

/* --- Section heading + separator line --- */

.js-active .cmd-section-heading {
  color: var(--term-text-bright);
  font-weight: bold;
  margin-top: 0.75rem;
}

.js-active .cmd-separator-line {
  color: var(--term-border);
  margin-bottom: 0.5rem;
}

/* --- Entry blocks (experience jobs, education degrees, etc.) --- */

.js-active .cmd-entry {
  margin-bottom: 0.6rem;
  padding-left: 0.5rem;
}

.js-active .cmd-entry-title {
  color: var(--term-text-bright);
  font-weight: bold;
}

.js-active .cmd-entry-meta {
  color: var(--term-accent);
  font-size: 0.9em;
  margin-bottom: 0.2rem;
}

.js-active .cmd-entry-desc {
  color: var(--term-text);
  margin: 0.2rem 0;
}

/* --- Publication links (paper PDF + slides) --- */

.js-active .cmd-pub-links {
  margin-top: 0.2rem;
  padding-left: 0.5rem;
}

.js-active .cmd-pub-link {
  color: var(--term-blue);
  text-decoration: none;
  margin-right: 1rem;
  white-space: nowrap;
  /* Make emoji monochrome like the copy button */
  filter: grayscale(100%) opacity(0.7);
  transition: filter 0.15s ease;
}

.js-active .cmd-pub-link:hover {
  text-decoration: underline;
  filter: grayscale(100%) opacity(1);
}

/* --- Highlight list and list items --- */

.js-active .cmd-highlight-list {
  margin: 0.25rem 0 0.25rem 0.5rem;
}

.js-active .cmd-list-item {
  color: var(--term-text);
  padding-left: 0.25rem;
  margin-bottom: 0.15rem;
}

/* --- Technology spans inside terminal output --- */

.js-active .tech {
  color: var(--term-dim);
  font-size: 0.9em;
}

/* --- Definition lists (expertise, impressum) --- */

.js-active .cmd-dl {
  margin: 0.25rem 0;
}

.js-active .cmd-dt {
  color: var(--term-accent);
  font-weight: bold;
  margin-top: 0.4rem;
}

.js-active .cmd-dt:first-child {
  margin-top: 0;
}

.js-active .cmd-dd {
  color: var(--term-text);
  padding-left: 1.5rem;
  margin-bottom: 0.15rem;
}

/* --- About layout (photo + text side-by-side) --- */

.js-active .cmd-about-layout {
  display: flex;
  gap: 1.5rem;
  margin: 0.5rem 0;
}

.js-active .cmd-about-photo img {
  max-width: 190px;
  height: auto;
  border-radius: 4px;
  border: 1px solid var(--term-border);
}

.js-active .cmd-about-text {
  flex: 1;
}

/* --- Contact block --- */

.js-active .cmd-contact {
  margin-top: 0.5rem;
}

/* --- Links in terminal output --- */

.js-active .cmd-block a,
.js-active .cmd-contact a {
  color: var(--term-blue);
  text-decoration: none;
}

.js-active .cmd-block a:hover,
.js-active .cmd-contact a:hover {
  text-decoration: underline;
}

/* --- Phone number anti-scraping images (terminal mode) --- */

.js-active .phone-number {
  display: inline;
  vertical-align: text-bottom;
}

.js-active .phone-img-paper {
  display: none;
}

.js-active .phone-img-terminal {
  display: inline;
  vertical-align: text-bottom;
  height: 0.7em;
  width: auto;
  border: none;
  margin: 0;
  padding: 0;
}

/* --- Legal reference footer (impressum) --- */

.js-active .cmd-legal-refs {
  color: var(--term-dim);
  font-size: 0.85em;
  margin-top: 0.75rem;
}

/* --- Language switch message --- */

.js-active .cmd-lang-msg {
  color: var(--term-text);
}

/* --- About layout responsive --- */

@media (max-width: 600px) {
  .js-active .cmd-about-layout {
    flex-direction: column;
  }
  .js-active .cmd-about-photo img {
    max-width: 150px;
  }
}

/* --- Command output footer (copy button + generation time) --- */

.js-active .cmd-footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
  padding-bottom: 0.5rem;
  opacity: 0;
  transition: opacity 0.15s ease;
}

/* Show on hover */
.js-active .cmd-block:hover .cmd-footer {
  opacity: 1;
}

/* Always visible (fully opaque) on mobile (set via JS when isMobile() is true) */
.js-active.mobile .cmd-footer {
  opacity: 1.0;
}

/* Hide status bar on mobile — keyboard shortcuts are not usable on touch devices */
.js-active.mobile #terminal-status {
  display: none;
}

/* Copy button */
.js-active .cmd-copy {
  background: transparent;
  border: none;
  color: var(--term-dim);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  /* Make emoji monochrome */
  filter: grayscale(100%) opacity(0.7);
  /* Fixed width to prevent layout shift when icon changes */
  width: 1.5rem;
  min-height: 1.2rem;
  text-align: center;
  /* Center icon both horizontally and vertically */
  display: flex;
  align-items: center;
  justify-content: center;
}

.js-active .cmd-copy:hover {
  background: var(--term-hover-bg);
  color: var(--term-text);
  filter: grayscale(100%) opacity(1);
}

/* Generation time */
.js-active .cmd-gen-time {
  color: var(--term-dim);
  font-size: 0.8rem;
}

/* --- Photo lightbox --- */

.js-active .cmd-about-photo img {
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.js-active .cmd-about-photo img:hover {
  opacity: 0.85;
}

.js-active .photo-lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.85);
  align-items: center;
  justify-content: center;
}

.js-active .photo-lightbox.active {
  display: flex;
}

.js-active .photo-lightbox-window {
  position: relative;
  max-width: 80vw;
  max-height: 80vh;
}

.js-active .photo-lightbox-img {
  display: block;
  max-width: 80vw;
  max-height: 80vh;
  width: auto;
  height: auto;
  border: 1px solid var(--term-border);
  border-radius: 4px;
  object-fit: contain;
}

.js-active .photo-lightbox-close {
  position: absolute;
  top: -1.5rem;
  right: 0;
  color: var(--term-text);
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
  padding: 0.2rem 0.3rem;
  border-radius: 3px;
}

.js-active .photo-lightbox-close:hover {
  color: var(--term-accent);
  background: var(--term-hover-bg);
}

.js-active .photo-lightbox-copyright {
  text-align: center;
  margin: 0.5rem 0 0 0;
  font-size: 0.75rem;
  color: var(--term-dim);
}

.js-active .photo-lightbox-copyright a {
  color: var(--term-dim);
  text-decoration: none;
}

.js-active .photo-lightbox-copyright a:hover {
  color: var(--term-accent);
  text-decoration: underline;
}