/* ==========================================================================
   brainsaw.org — shared styles (every page loads this file).
   Change the look of the site by editing the custom properties just below.
   Sections: 1 Base · 2 Top bar · 3 Bottom bar · 4 Page layout · 5 Components
   ========================================================================== */

:root {
  --bg:         #f8f5f0;   /* warm paper */
  --bg-tint:    #efe9e1;   /* panels, table stripes */
  --ink:        #26303a;   /* body text (dark slate, from the logo) */
  --ink-soft:   #5d6872;   /* secondary text */
  --rule:       #d9d0c4;   /* hairlines */
  --accent:     #b3414f;   /* links and buttons (deep rose, from the brain) */
  --accent-dk:  #8d2f3c;

  --status-active:  #3f9b0b;   /* systems table: grass green */
  --status-pending: #ad4f00;   /* under construction or renovation: dark orange */
  --status-retired: #808080;   /* 50% black, fully opaque */

  --bar-text:   #bfbfbf;   /* 75% white, fully opaque */
  --bar-height: 4rem;

  --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  --page-width: 62rem;
}


/* ---------- 1. Base ------------------------------------------------------ */

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: var(--font-body);
  line-height: 1.65;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); }
a:hover, a:focus { color: var(--accent-dk); }

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
}


/* ---------- 2. Top bar ---------------------------------------------------- */
/* Black at 75% opacity with the page (or carousel) blurred behind it. */

.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--bar-height);
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);  /* 50% white x 60% opaque */
}

.topbar__inner {
  max-width: 84rem;
  height: 100%;
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar__logo { display: block; height: 2.6rem; }
.topbar__logo img { height: 100%; width: auto; }

.topbar__links {
  display: flex;
  gap: 2.25rem;
  margin: 0; padding: 0;
  list-style: none;
}

.topbar a { color: var(--bar-text); text-decoration: none; }
.topbar__links a { font-size: 1rem; letter-spacing: 0.04em; padding: 0.4rem 0; }
.topbar__links a:hover,
.topbar__links a:focus,
.topbar__links a[aria-current="page"] { color: #fff; }

/* Hamburger: only shown on narrow screens (see media query below). */
.topbar__toggle {
  display: none;
  width: 2.5rem; height: 2.5rem;
  padding: 0;
  background: none; border: 0;
  cursor: pointer;
}
.topbar__toggle span,
.topbar__toggle span::before,
.topbar__toggle span::after {
  display: block;
  position: relative;
  width: 1.5rem; height: 2px;
  margin: 0 auto;
  background: var(--bar-text);
  content: "";
}
.topbar__toggle span::before { position: absolute; top: -7px; left: 0; }
.topbar__toggle span::after  { position: absolute; top:  7px; left: 0; }

@media (max-width: 40rem) {
  .topbar__inner { justify-content: flex-start; gap: 0.75rem; }
  .topbar__toggle { display: block; order: -1; margin-left: -0.5rem; }

  /* The links become a drop-down panel under the bar. */
  .topbar__links {
    display: none;
    position: absolute;
    top: var(--bar-height); left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    padding: 0.5rem 1.25rem 1rem;
    background: rgba(0, 0, 0, 0.9);   /* more opaque than the bar, so the links stay readable */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }
  .topbar__links.is-open { display: flex; }
  .topbar__links a { display: block; padding: 0.8rem 0; font-size: 1.1rem; }
}


/* ---------- 3. Bottom bar (desktop only) ---------------------------------- */

.bottombar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 100;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}
.bottombar a {
  color: var(--bar-text);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-decoration: none;
}
.bottombar a:hover, .bottombar a:focus { color: #fff; }

@media (max-width: 40rem) { .bottombar { display: none; } }


/* ---------- 4. Page layout (about, systems, publications) ----------------- */

/* Clear the fixed bars above and below the content. */
.page {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: calc(var(--bar-height) + 3rem) 1.25rem 5.5rem;
}

.page h1 { font-size: clamp(2rem, 5vw, 3rem); margin: 0 0 0.5rem; }
.page h2 { font-size: 1.7rem; margin: 3rem 0 0.75rem; }
.page h3 { font-size: 1.25rem; margin: 0 0 0.4rem; }

.lead { font-size: 1.2rem; color: var(--ink-soft); max-width: 40rem; }

/* The systems page is wider, to give the map room. */
.page--wide { max-width: 84rem; }


/* ---------- 5. Components ------------------------------------------------- */

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.45rem 1.1rem;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  font-size: 0.95rem;
  text-decoration: none;
}
.btn:hover, .btn:focus { background: var(--accent-dk); color: #fff; }

/* About page: an image + text block */
.feature {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 1.75rem;
  align-items: center;
  margin: 0;
  padding: 1.5rem 0;
  border-top: 1px solid var(--rule);
}
.feature img { border-radius: 8px; border: 1px solid var(--rule); }
.feature p { margin: 0 0 0.75rem; }
@media (max-width: 40rem) {
  .feature { grid-template-columns: 1fr; }
  .feature img { max-width: 11rem; }
}

/* About page: the video */
.video { max-width: 46rem; margin: 1.5rem auto; }   /* auto side margins centre it */
.video__frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video figcaption { font-size: 0.9rem; color: var(--ink-soft); margin-top: 0.4rem; }

/* Systems page: the map. Its space is held, in the map's own sea colour, while
   it loads, so the page does not jump when it appears. (The height is the same
   as .bsm-inline in map/brainsaw-map.css. For a placeholder picture instead of
   the plain colour, add:  background-image: url('...'); background-size: cover;) */
#map {
  min-height: clamp(480px, 74vh, 780px);
  background: #11283f;
  border-radius: 14px;
  color: #c9d3df;            /* for the "could not be loaded" message, should it ever be needed */
}

/* Systems page: the table */
.table-wrap { overflow-x: auto; }
.systems-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.systems-table th, .systems-table td {
  text-align: left;
  padding: 0.55rem 0.8rem;
  vertical-align: top;
}
.systems-table th { font-family: var(--font-heading); font-size: 1rem; border-bottom: 2px solid var(--ink); }
/* One <tbody> per site: the rule and the stripe go round the site, not each of its systems. */
.systems-table tbody { border-bottom: 1px solid var(--rule); }
.systems-table tbody:nth-of-type(even) { background: var(--bg-tint); }
/* A site's systems sit close together, keeping the full padding above the first and below the last. */
.systems-table tbody tr:not(:first-child) td { padding-top: 0.1rem; }
.systems-table tbody tr:not(:last-child) td:not([rowspan]) { padding-bottom: 0.1rem; }
.systems-table .status { white-space: nowrap; }
.systems-table .status[data-status="in-use"]   { color: var(--status-active); font-weight: 700; }
.systems-table .status[data-status="building"],
.systems-table .status[data-status="paused"]   { color: var(--status-pending); }
/* A retired system: its whole line is grey, and the site's cells too once every system there is retired. */
.systems-table tr.retired td:not([rowspan]),
.systems-table tr.retired td:not([rowspan]) .note,
.systems-table tbody.retired td,
.systems-table tbody.retired .note             { color: var(--status-retired); }
.systems-table .note { display: block; color: var(--ink-soft); font-size: 0.85rem; }

/* Banner image under the top bar, with the page title over it */
.banner {
  position: relative;
  height: 10.5rem;                    /* includes the 4rem under the top bar */
  padding-top: var(--bar-height);
  background: #1b2030 center / cover no-repeat;
  color: #fff;
}
.banner::after {                      /* darken the lower edge so the title reads */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 35%, rgba(0,0,0,0.65));
}
.banner__inner {
  position: absolute; z-index: 1;
  left: 0; right: 0; bottom: 1.1rem;
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 1.25rem;
}
.banner h1 { margin: 0; font-size: clamp(1.8rem, 4vw, 2.4rem); text-shadow: 0 2px 12px rgba(0,0,0,0.5); }
.banner--wide .banner__inner { max-width: 84rem; }   /* for pages using .page--wide */
.page--below-banner { padding-top: 2.5rem; }

/* About page: the in-house systems */
.photo-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.5rem 0; }
.photo-row figure { margin: 0; }
.photo-row img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; }
.photo-row figcaption { font-size: 0.9rem; color: var(--ink-soft); margin-top: 0.4rem; }
@media (max-width: 40rem) { .photo-row { grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; } }