/* ==========================================================================
   Eric Hernandez @ CSULB - site styles
   --------------------------------------------------------------------------
   This file is the ONLY thing that controls how the site looks. The HTML is
   untouched: links are still plain <BR><a href="...">Text</a> lines.

   To change colors, edit the variables in the :root block below. Nothing
   else needs touching.
   ========================================================================== */

:root {
  /* ---- LIGHT theme - edit these ---- */
  --page:   #f1efea;   /* behind the content card */
  --card:   #ffffff;   /* the content card itself */
  --ink:    #22201d;   /* body text */
  --muted:  #6d6862;   /* section labels, fine print */
  --rule:   #e4e0d8;   /* hairlines and separators */
  --link:   #15607f;   /* link color */
  --accent: #c9a227;   /* gold accent - headings, rules (CSULB nod) */
  --tint:   #faf7ef;   /* link hover background */
  --shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .05);

  /* ---- DARK theme - edit these ---- */
  --dark-page:   #262420;
  --dark-card:   #312e29;
  --dark-ink:    #efebe3;
  --dark-muted:  #b3aca1;
  --dark-rule:   #474139;
  --dark-link:   #85c8e4;
  --dark-accent: #ddb844;
  --dark-tint:   #3b3731;
  --dark-shadow: none;

  --width:  52rem;     /* content width - raise for a wider page */
  color-scheme: light;
}



/* --------------------------------------------------------------- structure */

/* The circuit tile sits on the PAGE background, in the margins around the
   content card - never behind the text. The card itself is opaque, so
   readability is untouched. Swap or delete the url() to change it; the SVGs
   are plain files in this folder and safe to edit. */
html {
  background-color: var(--page);
  background-image: url("circuit-light.svg");
  -webkit-text-size-adjust: 100%;
}

body {
  position: relative;          /* anchors the theme switch */
  max-width: var(--width);
  margin: 2rem auto;
  padding: 2.25rem 2.5rem 3rem;
  background: var(--card);   /* opaque on purpose - hides the page tile */
  color: var(--ink);
  border-radius: 6px;
  box-shadow: var(--shadow);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
}

/* ---------------------------------------------------------------- headings */

h1 {
  margin: 0 0 1.75rem;
  padding-bottom: .75rem;
  border-bottom: 3px solid var(--accent);
  font-size: 1.7rem;
  font-weight: 650;
  letter-spacing: -.01em;
}

h2 {
  margin: 2.5rem 0 .9rem;
  padding: 0 0 .45rem;
  border-bottom: 1px solid var(--rule);
  font-size: 1.6rem;
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--ink);
}

h2::before {                 /* small gold tick before each course name */
  content: "";
  display: inline-block;
  width: .28rem;
  height: .95em;
  margin-right: .55rem;
  vertical-align: -.1em;
  background: var(--accent);
  border-radius: 2px;
}

/* The HTML wraps course names in <u>. Underlines read as links, so drop it. */
h1 u, h2 u { text-decoration: none; }

/* <B>Labs:</B> and friends are section labels, never inline bold. */
b {
  display: block;
  margin: 1.25rem 0 .15rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}

/* <B> is display:block, so it already breaks the line. The <BR>s the HTML puts
   around each label would stack on top of that and double the gap, so hide just
   those. Every other <BR> on the page keeps working normally. */
b + br { display: none; }              /* the <BR> right after a label  */

/* ...and the one or two <BR>s right before one. Separate rule: if a browser
   doesn't support :has(), only this rule is dropped, not the one above. */
br:has(+ b),
br:has(+ br + b) { display: none; }

/* <U> is used for emphasis in the supply lists, where it looks clickable. */
u { text-decoration: none; font-weight: 600; }

/* ------------------------------------------------------------------- links */

a {
  display: inline-block;
  padding: .12rem .3rem;
  margin: 0 -.3rem;
  border-radius: 3px;
  color: var(--link);
  text-decoration: none;
}

a:hover,
a:focus-visible {
  background: var(--tint);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The Syllabus / Schedule / Videos row sitting directly under a course heading.
   '+' skips text nodes, so this catches up to three links on that first line
   and stops as soon as a <BR> intervenes. */
h2 + a,
h2 + a + a,
h2 + a + a + a {
  font-size: 1.1rem;
  font-weight: 550;
}

/* File-type badges, driven entirely by the href you type. Add a link to a
   .pdf and it gets a PDF tag automatically - no extra markup, ever. */
a[href$=".pdf"]::after,
a[href$=".docx"]::after,
a[href$=".doc"]::after,
a[href$=".ppt"]::after,
a[href$=".pptx"]::after,
a[href$=".zip"]::after,
a[href$=".jpg"]::after,
a[href$=".exe"]::after {
  display: inline-block;
  margin-left: .45rem;
  padding: .05rem .3rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--page);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .06em;
  vertical-align: .1em;
  color: var(--muted);
}

a[href$=".pdf"]::after  { content: "PDF"; }
a[href$=".docx"]::after,
a[href$=".doc"]::after  { content: "DOC"; }
a[href$=".ppt"]::after,
a[href$=".pptx"]::after { content: "PPT"; }
a[href$=".zip"]::after  { content: "ZIP"; }
a[href$=".jpg"]::after  { content: "IMG"; }
a[href$=".exe"]::after  { content: "EXE"; }

/* --------------------------------------------------------------- separators */

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2.25rem 0 0;
}

hr + hr { display: none; }   /* the HTML has some <HR><HR> pairs */
hr:last-of-type { display: none; }

/* ------------------------------------------------------------------- lists */

/* The only lists on the site are the three "pick a multimeter" lists, and they
   read better as one row. flex-wrap means they still stack on a narrow phone
   instead of overflowing. Native bullets do not survive flex layout, so the
   separator below stands in for them. */
ul {
  display: flex;
  flex-wrap: wrap;
  gap: .1rem .8rem;
  margin: .4rem 0;
  padding-left: .2rem;
  list-style: none;
}

li { margin: 0; }

li + li::before {
  content: "\0000B7";          /* middle dot between items */
  margin-right: .8rem;
  color: var(--muted);
}

/* ------------------------------------------------------- the big disclaimer
   First paragraph-ish run of text on the videos pages. Nothing to target but
   the text itself, so this just keeps long prose from running too wide. */

body { overflow-wrap: break-word; }

/* --------------------------------------------------------------- dark mode */

/* The dark palette is applied in two situations, so the mapping appears twice.
   The COLORS themselves live once, in :root above - edit them there.

     1. the visitor's OS is set to dark and they have not chosen otherwise
     2. the visitor picked dark with the switch (sets data-theme on <html>)   */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page:   var(--dark-page);
    --card:   var(--dark-card);
    --ink:    var(--dark-ink);
    --muted:  var(--dark-muted);
    --rule:   var(--dark-rule);
    --link:   var(--dark-link);
    --accent: var(--dark-accent);
    --tint:   var(--dark-tint);
    --shadow: var(--dark-shadow);
    color-scheme: dark;
    background-image: url("circuit-dark.svg");
  }
}

:root[data-theme="dark"] {
  --page:   var(--dark-page);
  --card:   var(--dark-card);
  --ink:    var(--dark-ink);
  --muted:  var(--dark-muted);
  --rule:   var(--dark-rule);
  --link:   var(--dark-link);
  --accent: var(--dark-accent);
  --tint:   var(--dark-tint);
  --shadow: var(--dark-shadow);
  color-scheme: dark;
  background-image: url("circuit-dark.svg");
}

/* An explicit light choice must undo the dark tile when the OS is dark. */
:root[data-theme="light"] {
  background-image: url("circuit-light.svg");
}

/* ------------------------------------------------------- the theme switch
   The button itself is created by shared/theme.js, so there is no markup to
   maintain in the HTML pages. With JavaScript off it simply never appears and
   the site follows the visitor's system setting, as it did before. */

#theme-toggle {
  position: absolute;
  top: 1.7rem;
  right: 1.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--page);
  color: var(--muted);
  line-height: 0;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}

#theme-toggle:hover {
  color: var(--ink);
  border-color: var(--muted);
  background: var(--tint);
}

#theme-toggle:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ mobile */

@media (max-width: 40rem) {
  body {
    margin: 0;
    padding: 1.5rem 1.15rem 2.5rem;
    border-radius: 0;
    box-shadow: none;
    font-size: 15px;
  }
  h1 { font-size: 1.4rem; }
  h2 { font-size: 1.35rem; }
  h2 + a, h2 + a + a, h2 + a + a + a { font-size: 1.05rem; }
  /* bigger tap targets on phones */
  a { padding: .3rem .3rem; }
  #theme-toggle { top: 1rem; right: 1rem; }
}

/* ------------------------------------------------------------------- print */

@media print {
  html, body { background: #fff; box-shadow: none; max-width: none; }
  html { background-image: none; }
  a { color: #000; }
  a::after { display: none !important; }
  #theme-toggle { display: none; }
}