/* ==========================================================================
   SCREAMSHEETS - CYBERPUNK RED

   Two LAYOUTS, chosen by a class on <body> (set in the templates):
     .layout-underground -> The Augmented Optic (pirate network, book template)
                            used by base.html, index.html, section.html, page.html
     .layout-official    -> official articles from other companies (NCT style)
                            used by official.html

   Two COLOR THEMES, chosen by data-theme on <html> (set by /theme.js):
     light (default) and dark

   Table of contents
      0. Fixed tokens (fonts, sizes, colors that never change)
      1. Color themes (light / dark), expressed as ROLES
      2. Base and reset
      3. Status bar (shared by both layouts)
      4. Underground masthead (black band with emblem and title)
      5. Official masthead (company logo + 8 category buttons)
      6. Page content area
      7. Article (typography of the text coming from the .md)
      8. Helpers to use inside the .md (.redacted, .stamp)
      9. Feed (list of articles on the home page)
     10. Footer
     11. Small screens
   ========================================================================== */


/* ==========================================================================
   0. FIXED TOKENS
   Values that are the same in light and dark. Tweak here first.
   ========================================================================== */
:root {
  /* Absolute colors. Used only where the color must NOT flip with the theme,
     such as the underground masthead (always black, white emblem and title). */
  --black: #000;
  --white: #fff;

  /* Fonts (loaded from Google Fonts in base.html; the later names are fallbacks) */
  --font-title:  "Special Elite", "Courier New", monospace;            /* headlines: dirty typewriter */
  --font-body:   "Courier Prime", "Courier New", monospace;            /* running text */
  --font-ui:     "Josefin Sans", "Helvetica Neue", Arial, sans-serif;  /* clock and dates */
  --font-button: "Rajdhani", "Arial Narrow", Arial, sans-serif;        /* category buttons (NCT style) */

  /* Sizes */
  --text-width: 46rem;          /* reading column width (about 72 characters) */
  --corner-cut: 14px;           /* size of the cut corner on buttons and stamps */
  --masthead-shadow: 0 4px 6px rgba(0, 0, 0, 0.32);
}

/* If you get the .ttf of the exact title font from the book, put it in static/fonts/,
   uncomment this and set --font-title to "BookTitle", "Courier New", monospace:
@font-face {
  font-family: "BookTitle";
  src: url("/fonts/book-title.ttf") format("truetype");
  font-display: swap;
}
*/


/* ==========================================================================
   1. COLOR THEMES
   Variables are named after the ROLE they play, not the color they hold,
   so the dark theme can redefine them without the names lying.

   Light is the default and lives on plain :root, so the site is fully styled
   even if JavaScript fails. The dark block only overrides what changes.
   A block is more specific than plain :root, so it wins regardless of order.
   ========================================================================== */
:root,
:root[data-theme="light"] {
  color-scheme: light;           /* native widgets and scrollbars follow the theme */

  --paper: #fefefe;              /* page background */
  --surface: #fff;               /* status bar and official masthead background */
  --text: #000;                  /* main text */
  --text-muted: #4a4a4a;         /* dates and captions */
  --ink: #000;                   /* rules, borders, button backgrounds */
  --on-ink: #fff;                /* text sitting on top of --ink */
  --red: #b91f1f;                /* links and the active category button */
  --line: #1a1a1a;               /* thin rules around the official masthead */
  --code-bg: #e9e9e9;            /* background of inline code */
  --icon-filter: none;           /* filter applied to the black SVG icons */
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --paper: #101010;
  --surface: #1a1a1a;            /* a bit lighter than the black underground masthead */
  --text: #ececec;
  --text-muted: #a8a8a8;
  --ink: #f2f2f2;
  --on-ink: #000;
  --red: #ff4d4d;                /* brighter red: #b91f1f nearly vanishes on dark */
  --line: #444;
  --code-bg: #262626;
  --icon-filter: invert(1);      /* turns the black icons white */
}


/* ==========================================================================
   2. BASE AND RESET
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;        /* padding and border count inside the declared width */
}

html {
  -webkit-text-size-adjust: 100%;   /* stops phones from inflating text on their own */
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font: 1.05rem/1.7 var(--font-body);   /* size/line-height, family */
}

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

a {
  color: var(--red);
}

a:hover {
  color: var(--text);
}

/* Visible focus ring for keyboard navigation */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}


/* ==========================================================================
   3. STATUS BAR
   Antenna on the left, in-game clock in the center, plug (theme toggle)
   on the right. The clock comes from `clock` in the front matter.
   ========================================================================== */
.statusbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* the clock stays exactly centered */
  align-items: center;
  padding: 0.9rem 2rem 0.7rem;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 1.2rem;
  letter-spacing: 0.04em;
}

.statusbar__icon {
  display: block;
  height: 1.8rem;
  width: auto;
  filter: var(--icon-filter);            /* white icons in dark theme */
}

/* The plug is a <button>: reset the browser's default button look */
.statusbar__theme-toggle {
  justify-self: end;                     /* push it to the right edge */
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
}


/* ==========================================================================
   4. UNDERGROUND LAYOUT: masthead
   Full-width black band with a white emblem and a big centered title.
   Uses --black/--white (not roles) so it stays black in both themes.
   ========================================================================== */
.layout-underground .masthead {
  background: var(--black);
  color: var(--white);
  text-align: center;
  padding: 1.5rem 1rem 1.3rem;
  box-shadow: var(--masthead-shadow);    /* soft shadow under the band, like the book */
}

/* Emblem (eye). Replace static/img/eye.svg with the real logo */
.layout-underground .masthead__emblem {
  display: block;
  width: clamp(110px, 14vw, 230px);
  margin: 0 auto 0.6rem;
}

/* Title: grows with the window width, within limits */
.layout-underground .masthead__title {
  font-family: var(--font-title);
  font-size: clamp(2rem, 8vw, 7.5rem);   /* min, ideal, max */
  line-height: 1.05;
  letter-spacing: 0.02em;
  /* the outline thickens the letters to mimic the heavy ink of the book */
  -webkit-text-stroke: 0.035em currentColor;
}

.layout-underground .masthead__title a {
  color: inherit;
  text-decoration: none;
}


/* ==========================================================================
   5. OFFICIAL LAYOUT: NCT-style masthead
   Company logo on the left; on the right, 8 buttons in a 4x2 grid.
   Thin black rules above and below; the article's category is red.
   ========================================================================== */
.layout-official .masthead {
  display: grid;
  grid-template-columns: minmax(10rem, 34%) 1fr;   /* logo | buttons */
  align-items: center;
  gap: 2rem;
  padding: 1rem 2rem;
  background: var(--surface);
  border-top: 2px solid var(--line);
  border-bottom: 2px solid var(--line);
  box-shadow: 0 4px 5px -2px rgba(0, 0, 0, 0.35);
}

/* Where the NCT logo sits in the book: here goes the logo of the company
   signing the article */
.layout-official .masthead__company {
  display: flex;
  align-items: center;
  justify-content: center;
}

.layout-official .masthead__company img {
  max-height: 5.5rem;
  width: auto;
}

/* Fallback when the article has no logo: show the company name */
.layout-official .masthead__company-name {
  font-family: var(--font-button);
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 1.1;
  text-align: center;
}

/* Button grid: 4 columns, 2 rows */
.layout-official .categories {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;                   /* every row the same height, even if a label wraps */
  gap: 0.7rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each button: a rectangle with the top-left corner cut off */
.layout-official .categories__item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 0.5rem;
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--font-button);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.1;
  text-align: center;                    /* long labels wrap onto two lines */
  letter-spacing: 0.05em;
  text-transform: uppercase;             /* write labels in lowercase in config.toml */
  clip-path: polygon(
    var(--corner-cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--corner-cut)
  );                                      /* vertices skip the top-left corner */
}

/* The article's category (extra.category in the front matter) */
.layout-official .categories__item--active {
  background: var(--red);
}


/* ==========================================================================
   6. PAGE CONTENT AREA
   ========================================================================== */
.content {
  max-width: calc(var(--text-width) + 2.5rem);
  margin: 2.5rem auto 3rem;
  padding: 0 1.25rem;
}


/* ==========================================================================
   7. ARTICLE
   Styles what comes out of the Markdown inside page.html and official.html.
   ========================================================================== */
.article__title {
  margin: 0 0 0.5rem;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(1.9rem, 5vw, 3.1rem);
  line-height: 1.1;
}

/* Date and author line, with a thick rule underneath */
.article__meta {
  margin: 0 0 1.6rem;
  padding-bottom: 0.7rem;
  border-bottom: 4px solid var(--ink);
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 1.05rem;
  color: var(--text-muted);
}

.article h2,
.article h3 {
  font-family: var(--font-title);
  font-weight: 400;
  line-height: 1.2;
  margin: 2rem 0 0.6rem;
}

.article h2 { font-size: 1.7rem; }
.article h3 { font-size: 1.3rem; }

.article p {
  margin: 0 0 1.1rem;
}

/* Quotes: thick bar on the left */
.article blockquote {
  margin: 1.5rem 0;
  padding: 0.4rem 0 0.4rem 1.2rem;
  border-left: 6px solid var(--ink);
  font-style: italic;
}

.article blockquote p:last-child {
  margin-bottom: 0;
}

/* Article images (photos, screenshots) get a solid frame */
.article img {
  display: block;
  margin: 1.5rem 0;
  border: 3px solid var(--ink);
}

.article hr {
  margin: 2rem 0;
  border: 0;
  border-top: 4px solid var(--ink);
}

.article code {
  padding: 0.1rem 0.35rem;
  background: var(--code-bg);
  font-family: var(--font-body);
}

/* "back to feed" link */
.back-link {
  font-family: var(--font-ui);
  font-weight: 400;
}


/* ==========================================================================
   8. HELPERS TO USE INSIDE THE .md
   Zola accepts raw HTML inside Markdown, for example:
     <span class="redacted">censored text</span>
     <span class="stamp">Verificado</span>
   ========================================================================== */

/* Redaction bar: ink on ink, revealed on hover or keyboard focus.
   Handy for clues the players "uncover". */
.redacted {
  background: var(--ink);
  color: var(--ink);
  padding: 0 0.2em;
}

.redacted:hover,
.redacted:focus {
  color: var(--on-ink);
}

/* Stamp in the style of the book's buttons (cut corner) */
.stamp {
  display: inline-block;
  padding: 0.25rem 0.9rem;
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--font-button);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  clip-path: polygon(
    var(--corner-cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--corner-cut)
  );
}


/* ==========================================================================
   9. FEED
   List of articles separated by thick rules. An official article from
   another company gets a black tag naming the source (card.html).
   ========================================================================== */
.feed {
  max-width: var(--text-width);
  margin: 0 auto;
}

.card {
  padding: 1.3rem 0 1.4rem;
  border-top: 4px solid var(--ink);
}

.card__title {
  margin: 0.3rem 0 0.2rem;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 1.15;
}

.card__title a {
  color: var(--text);
  text-decoration: none;
}

.card__title a:hover {
  text-decoration: underline;
  text-decoration-thickness: 3px;
}

.card__date {
  font-family: var(--font-ui);
  font-weight: 300;
  color: var(--text-muted);
}

.card__summary {
  margin: 0.5rem 0 0;
}

/* Official-article tag: same cut corner as the book's buttons */
.card__tag {
  display: inline-block;
  padding: 0.2rem 0.9rem;
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--font-button);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.03em;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
}


/* ==========================================================================
   10. FOOTER
   ========================================================================== */
.site-footer {
  padding: 2rem 1rem 2.5rem;
  border-top: 2px solid var(--line);
  text-align: center;
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.95rem;
  color: var(--text-muted);
}


/* ==========================================================================
   11. SMALL SCREENS
   Media queries act like an `if`: the block applies only up to that width.
   They sit at the end of the file so they override the normal rules.
   ========================================================================== */
@media (max-width: 760px) {
  .statusbar { padding: 0.7rem 1rem 0.5rem; font-size: 1rem; }
  .statusbar__icon { height: 1.5rem; }

  /* Official masthead: logo on top, buttons below */
  .layout-official .masthead {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1rem;
  }
  .layout-official .categories { gap: 0.5rem 0.6rem; }
  .layout-official .categories__item { font-size: 1rem; padding: 0.55rem 0.3rem; }
}

@media (max-width: 480px) {
  /* On very narrow screens the 8 buttons become 2 columns x 4 rows */
  .layout-official .categories { grid-template-columns: repeat(2, 1fr); }
  .card__title { font-size: 1.4rem; }
}