/* ===========================================================================
   Dave's Speed Shop - site stylesheet

   Self-contained. w3.css was removed in July 2026: only nine of its classes
   were ever used, and because it loaded *after* this file it silently
   overrode the fonts and heading sizes set here. Replacements for those nine
   classes are marked "was .w3-..." below.

   Layout: two fixed 15% sidebars either side of the content on desktop; below
   800px everything stacks into a single column - see the media query at the
   end, which is the only place the mobile layout is defined.
   =========================================================================== */

/* --- reset ---------------------------------------------------------------- */

/* w3.css set this globally and the layout relies on it: padding and borders
   count inside an element's declared width, so percentages behave predictably.
   Removing w3.css without this would widen every padded box. */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}

/* Media never overflows its container. Thumbnails carry width/height
   attributes so the browser can reserve space; height:auto keeps the aspect
   ratio correct once the width is constrained. */
img, video {
  max-width: 100%;
  height: auto;
}

/* --- typography ----------------------------------------------------------- */

/* Century Gothic and Segoe Print ship with Windows and Office and are absent
   from most phones and tablets, so each needs a fallback stack ending in a
   generic family. Without these the site would silently fall back to Times. */
body {
  font-family: "Century Gothic", "URW Gothic", "Avant Garde", Futura, sans-serif;
  line-height: 1.5;
}

* {
  text-align: center;
}

/* The logo font, self-hosted.

   "DSS Slant" is Kalam with a 0.33 horizontal shear (18.26 degrees) baked into
   the glyph outlines. It replaces Segoe Print, which ships with Windows and
   Office, is licensed for those desktops only, and would have needed a separate
   annual subscription to appear here legitimately.

   The slant is baked into the file rather than requested with font-style:italic
   because OpenSCAD cannot synthesise an oblique - text() draws whatever
   outlines the font contains, and silently gives you upright text if the style
   is missing. Browsers do fake it, but at their own angle. Baking it means the
   website and the 3D printed parts draw the same shapes instead of two
   approximations of them. Nothing here should ask for italic again.

   Kalam is under the SIL Open Font License, which permits modification but
   reserves the name - hence "DSS Slant". The original copyright and the licence
   are embedded in the font files; the full text is at fonts/OFL.txt.

   Latin subset. The baked family is 237 KB; these are ~16 KB each. Both weights
   are declared, but a browser only fetches the one actually used, so switching
   the h1 between them is the one-line change below.

   The URLs are relative to *this file*, not to the page including it, so the
   admin pages one directory down resolve them without a second copy.

   font-display:swap paints the heading in the fallback immediately and swaps
   when the font arrives, instead of hiding the text while it downloads. */
@font-face {
  font-family: "DSS Slant";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/dss-slant-regular-latin.woff2") format("woff2");
}

@font-face {
  font-family: "DSS Slant";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/dss-slant-bold-latin.woff2") format("woff2");
}

/* Headings scale with the viewport: clamp(smallest, preferred, largest).
   The largest values are the 600%/300%/200% this file always asked for and
   never got; the smallest keep them readable on a narrow phone. */

/* font-weight:400 is deliberate. h1 defaults to bold, which would pull in the
   700 file; Regular is the weight chosen for the logo. Stating it also stops
   the browser synthesising a bold on top of the real one. Change it to 700 to
   switch the logo to Bold - nothing else needs to change. */
h1 {
  font-size: clamp(2rem, 8vw, 6rem);
  font-family: "DSS Slant", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  font-weight: 400;
  line-height: 1.1;
  margin: 10px 0;
}

h2 {
  font-size: clamp(1.5rem, 4vw, 3rem);
  margin: 10px 0;
}

h3 {
  font-size: clamp(1.15rem, 2.2vw, 2rem);
  margin: 10px 0;
}

a {
  text-decoration: underline;
  background-color: transparent;
}

a:link    { color: blue; }
a:visited { color: green; }

a:hover {
  color: red;
  text-decoration: none;
}

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

.header {
  color: white;
  background-color: blue;
}

/* No font-style:italic here any more. The lean is baked into DSS Slant, so
   asking for italic on top would make the browser shear an already-sheared
   font and the site would no longer match the printed parts. */

h1.header, h2.header, h3.header {
  text-shadow: 2px 2px black;
}

/* The tagline under the h1 is an h2 so heading levels do not skip a step, but
   it should stay the size it has always been rather than jump to h2 size. */
.tagline {
  font-size: clamp(1.15rem, 2.2vw, 2rem);
}

#headerGradient {
  height: 100px;
  background-color: blue;
  background-image: linear-gradient(blue, white);
}

/* The header buttons used to be spaced with hardcoded <br><br> tags. The nav
   is generated from the pages table now, so the row breaks cannot be hand
   placed - the buttons lay themselves out and wrap when they run out of room. */
.navButtons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 0;
  padding: 16px 8px;
}

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

/* was .w3-sidebar (plus .w3-bar-block, which only mattered for its bar items).
   No `top` is set, matching the original: the sidebars begin where they sit in
   the document, below the header, and stay put while the page scrolls. */
.sidebar {
  position: fixed;
  height: 100%;
  width: 15%;
  background-color: #fff;
  overflow: auto;
  z-index: 1;
}

.sidebarLeft  { left: 0; }
.sidebarRight { right: 0; }

/* was .w3-container + .bodyContent */
.bodyContent {
  margin-left: 15%;
  margin-right: 15%;
  padding: 0.01em 16px;
}

/* was .w3-row-padding */
.rowPad {
  padding: 0 8px;
}

/* Admin screens have no sidebars, so their content runs the full width. */
.adminContent {
  padding: 0.01em 16px;
}

.siteFooter {
  padding: 16px 8px;
}

/* --- buttons -------------------------------------------------------------- */

.headerButton {
  color: blue;
  background-color: yellow;
  padding: 15px 25px;
  text-decoration: none;
  box-shadow: 6px 6px black;
}

.headerButton:hover  { background-color: white; }
.headerButton:active { background-color: gray; }

.sideButton {
  display: block;
  width: 100%;
  color: blue;
  background-color: yellow;
  padding: 15px 25px;
  text-decoration: none;
  text-align: center;
}

.sideButton:hover  { background-color: white; }
.sideButton:active { background-color: gray; }

.diveButton {
  display: inline-block;
  color: yellow;
  background-color: aqua;
  padding: 15px 25px;
  text-decoration: none;
  border-radius: 20px;
  box-shadow: 3px 3px black;
}

.diveButton:hover  { background-color: gray; }
.diveButton:active { background-color: black; }

/* was .w3-btn - admin screens only */
.adminButton {
  display: inline-block;
  border: none;
  padding: 8px 16px;
  vertical-align: middle;
  text-decoration: none;
  color: inherit;
  background-color: #f1f1f1;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
}

.adminButton:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

/* --- images --------------------------------------------------------------- */

.thumbnail {
  display: inline-block;
  padding: 15px;
}

.sidePic {
  width: 100%;
  height: auto;
}

/* --- tables --------------------------------------------------------------- */

/* was .w3-table-all, shared by the public item tables and the admin lists */
.itemTable, .adminTable {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  display: table;
  border: 1px solid #ccc;
}

.itemTable tr, .adminTable tr {
  border-bottom: 1px solid #ddd;
}

.itemTable tr:nth-child(odd),  .adminTable tr:nth-child(odd)  { background-color: #fff; }
.itemTable tr:nth-child(even), .adminTable tr:nth-child(even) { background-color: #f1f1f1; }

.itemTable td, .itemTable th, .adminTable td, .adminTable th {
  padding: 8px;
  vertical-align: middle;
}

/* Admin lists are dense and read as columns of text, so they keep the
   left alignment w3.css gave them rather than the site-wide centring. */
.adminTable td, .adminTable th {
  text-align: left;
  vertical-align: top;
}

/* was .w3-light-blue */
.tableHead {
  color: #000;
  background-color: #87CEEB;
}

/* was .w3-right-align */
.rightAlign {
  text-align: right;
}

.sold {
  color: gray;
}

.error {
  color: #FF0000;
}

/* ===========================================================================
   Narrow screens - phones and small tablets.

   Everything above assumes a wide window with two fixed sidebars. Below 800px
   the sidebars stop being fixed and the page becomes one column. The source
   order is header, left sidebar, right sidebar, content, footer - which would
   put the decorative photos above the content - so the column is reordered
   with flexbox to put the content third and the photos last.
   =========================================================================== */

@media (max-width: 800px) {

  body {
    display: flex;
    flex-direction: column;
  }

  .header       { order: 1; }
  .sidebarLeft  { order: 2; }
  .bodyContent  { order: 3; }
  .sidebarRight { order: 4; }
  .siteFooter   { order: 5; }

  /* Release the sidebars: full width, in the flow, no scrollbars of their own. */
  .sidebar {
    position: static;
    width: 100%;
    height: auto;
    overflow: visible;
  }

  .bodyContent {
    margin-left: 0;
    margin-right: 0;
    padding: 0 12px;
  }

  /* Full-width nav buttons are far easier to hit with a thumb than a row of
     small ones, and the shadow offsets look wrong at this size. */
  .navButtons {
    flex-direction: column;
    gap: 10px;
    padding: 12px;
  }

  .headerButton {
    display: block;
    width: 100%;
    padding: 16px 10px;
    box-shadow: 3px 3px black;
  }

  .sideButton {
    padding: 16px 10px;
  }

  /* The two decorative photos sit side by side rather than stacking, so they
     do not push the footer a screen and a half down the page. */
  .sidebarRight {
    display: flex;
    gap: 8px;
    padding: 12px;
  }

  .sidebarRight a {
    flex: 1;
    min-width: 0;
  }

  /* A four-column table cannot fit a phone. Each row becomes a card: item,
     price, photo and the Details button stacked and centred. */
  .itemTable, .itemTable tbody, .itemTable tr, .itemTable td {
    display: block;
    width: 100%;
  }

  .itemTable {
    border: none;
  }

  .itemTable tr {
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-bottom: 14px;
    padding: 10px 6px;
  }

  .itemTable td {
    border: none;
    padding: 6px;
    text-align: center;
  }

  /* Price is right-aligned in the desktop table; centred reads better in a card. */
  .itemTable td.rightAlign {
    text-align: center;
    font-weight: bold;
  }

  .thumbnail {
    padding: 6px;
  }

  /* Admin tables keep their columns and scroll sideways instead. They have
     header rows, and stacking cells would separate values from their headings. */
  .adminTableScroll {
    overflow-x: auto;
  }

  .adminTable {
    min-width: 700px;
  }
}