/*
  ofekaboud.com - Site Styles (Windows 95 / early-2000s feel)

  Rules for this file:
  - System fonts only
  - Flat colors only
  - Borders instead of shadows
  - No rounded corners
  - Simple layout

  If you want to change colors or spacing, this is the ONLY file to touch.
*/

/* ---- Basic page defaults ---- */

html {
  /* Keep a stable baseline for sizing */
  box-sizing: border-box;
  overflow-x: hidden;

  /*
    The header is fixed (stays on top).
    main.js measures its height and writes it here so page content never hides behind it.
    If JavaScript is off, we fall back to the original desktop spacing (58px).
  */
  --header-h: 58px;
}

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

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;

  /* Classic gray background (very Windows 95) */
  background: #c0c0c0;
  color: #000;

  /* System fonts only (as requested) */
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 14px;
  line-height: 1.35;
}

a {
  color: #0000ee;
  text-decoration: underline;
}

a:visited {
  color: #551a8b;
}

/* ---- Fixed header ---- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;

  /* Flat background + visible borders (no gradients, no shadows) */
  background: #d4d0c8;
  border-bottom: 2px solid #000;
}

.header-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 8px 10px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.brand {
  font-family: "Courier New", Courier, monospace;
  font-weight: bold;
  border: 2px solid #000;
  background: #fff;
  padding: 2px 6px;
}

.nav {
  white-space: nowrap;
}

.nav a {
  font-weight: bold;
}

.nav-sep {
  margin: 0 6px;
}

/* ---- Page layout ---- */

.page {
  /* Space so the fixed header does not cover the content */
  max-width: 980px;
  margin: var(--header-h, 58px) auto 20px;
  padding: 10px;
}

.box {
  background: #fff;
  border: 2px solid #000;
  padding: 10px;
  margin-bottom: 10px;
}

h1,
h2 {
  margin: 0 0 8px;
  padding: 0;
  font-family: Tahoma, Verdana, sans-serif;
}

h1 {
  font-size: 18px;
}

h2 {
  font-size: 16px;
}

p {
  margin: 0 0 8px;
}

.plain {
  margin: 8px 0 0;
}

.note {
  font-family: "Courier New", Courier, monospace;
  font-size: 13px;
  margin: 0 0 8px;
}

/* ---- Scrollable history area ---- */

.scrollbox {
  border: 2px solid #000;
  background: #fff;
  height: 360px;
  overflow-y: auto;
  overflow-x: hidden;

  /* Smooth, natural scrolling on iOS (and generally nicer touch scrolling) */
  -webkit-overflow-scrolling: touch;

  /* Avoid weird scroll chaining on mobile when the timeline is being scrolled */
  overscroll-behavior: contain;

  padding: 6px;
}

/* Timeline table (simple, old-school, readable) */

.history-table {
  width: 100%;
  border-collapse: collapse;
}

.history-table td {
  border: 1px solid #000;
  vertical-align: top;
  padding: 8px;
}

.history-text {
  width: 62%;
}

.history-media {
  width: 38%;
}

.history-period {
  font-family: "Courier New", Courier, monospace;
  font-weight: bold;
}

.history-title {
  font-weight: bold;
  margin: 2px 0 6px;
}

/* Keep media players from stretching weirdly */

img,
audio,
video {
  width: 100%;
  max-width: 360px;
}

/* Simple lists of links */

.link-list {
  margin: 0;
  padding: 0 0 0 18px;
}

.link-list li {
  margin: 0 0 6px;
}

/* ---- Minimal mobile support ---- */

@media (max-width: 768px) {
  .header-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Let the nav wrap on small screens instead of forcing a single long line */
  .nav {
    white-space: normal;
  }

  /* A fixed 360px can be too tall on phones; use the visible viewport instead */
  .scrollbox {
    height: auto;
    max-height: 60vh;
  }

  /* On small screens, make the timeline stack for readability */
  .history-table,
  .history-table tbody,
  .history-table tr,
  .history-table td {
    display: block;
    width: 100%;
  }

  .history-table td {
    border-left: 1px solid #000;
    border-right: 1px solid #000;
  }

  img,
  audio,
  video {
    max-width: none;
  }
}

/* Keep long text/URLs from causing sideways scroll in text cells */
.history-text p {
  word-break: break-word;
  overflow-wrap: anywhere;
}