/* swox — homepage only.
   Header, mascot, section marker colours, tooltip.

   The two-column layout, the nav panel and the shape of a section heading are
   shared with the admin and live in style.css — they were duplicated here and
   had begun to drift. What is left in this file is only what the homepage
   alone owns. */

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

header h1 { text-align: center; }

/* Only the four letters of `swox` are colored; `welcome to` stays --text. */
.c1 { color: var(--red); }
.c2 { color: var(--blue); }
.c3 { color: var(--green); }

/* The source PNG is a ~2x upscale of a 687x572 original, so it does not land
   on a clean integer pixel grid — without `pixelated` it goes soft and loses
   the pixel-art read. The PNG has a real alpha channel: no matte, no border,
   no shadow. */
.mascot {
  position: relative;
  display: block;
  width: 95%;
  max-width: 500px;
  margin: auto;
  cursor: help;
}

.mascot img {
  width: 100%;
  display: block;
  image-rendering: pixelated;
}

/* Closes the cover off from the page below it, the way the admin's hazard rule
   closes off its title bar — the same stripe, in the hairline grey rather than
   the admin's amber, since amber is the dashboard's own signal. */
header::after {
  content: "";
  display: block;
  height: 9px;
  margin-top: 22px;
  background: repeating-linear-gradient(
    45deg, var(--line-2) 0 5px, transparent 5px 10px
  );
}

/* ---------- content ---------- */

/* Boxed, because the nav beside it is: the admin's two columns are both
   panels, and one panel facing an open column reads lopsided. */
#content {
  padding: 16px 18px;
  background: var(--panel);
  border: 2px solid var(--line-2);
  box-shadow: 6px 6px 0 var(--ink);
}

/* ---------- section markers ---------- */

/* Three headings, three colours — the same red/blue/green cycle the nav lists
   run, so the page reads as one idea rather than three unrelated sections. */
#content h2::before { color: var(--red); }
nav h2::before      { color: var(--blue); }
nav h3::before      { color: var(--green); }

/* ---------- tooltip ---------- */

/* Tippy theme for the mascot label, so the third-party tooltip matches the
   site instead of Tippy's default grey. It used to be a --blue slab with
   rounded corners; it is now the same panel, hard shadow and square edge as
   everything else. Positioning, cursor-following and the fade stay Tippy's. */
.tippy-box[data-theme~="swox"] {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line-2);
  border-radius: 0;
  box-shadow: 3px 3px 0 var(--ink);
  font-family: "Gaegu", "Comic Sans MS", cursive, sans-serif;
  font-size: 1rem;
  line-height: 1.4;
}

.tippy-box[data-theme~="swox"] .tippy-arrow {
  color: var(--panel);
}