/**
 * doorstops.css - shared layout + component styles for the doorstop guides.
 *
 * Before this file, every doorstop pasted the same ~150 lines of CSS into an
 * inline <style> block: 51 pages defined .yonk, 22 defined .badonk/.honk, 10
 * defined the copy-paste component. Changing a component meant editing every
 * page, so in practice components drifted instead of improving.
 *
 * Pages still keep an inline <style> for anything genuinely page-specific.
 * This file only owns the rules that were byte-identical across pages.
 *
 * Load it AFTER /assets/css/style.css and BEFORE the page's own <style>, so a
 * page can still override a component deliberately.
 */

:root {
  /* one radius scale - pages previously mixed 3px, 6px and 8px on one screen */
  --ds-radius-sm: 8px;
  --ds-radius: 12px;
  --ds-radius-lg: 16px;

  --ds-shadow-sm: 0 2px 6px hsla(0, 0%, 0%, 0.05);
  --ds-shadow: 0 6px 18px hsla(0, 0%, 0%, 0.08);
  --ds-shadow-lg: 0 14px 30px hsla(0, 0%, 0%, 0.14);

  --ds-gap: 12px;
  --ds-gap-lg: 24px;

  --ds-accent: hsl(170, 75%, 41%);      /* matches --kappel in style.css */
  --ds-accent-soft: hsl(170, 60%, 96%);
  --ds-accent-line: hsl(170, 40%, 82%);

  --ds-ink: #1d2b36;
  --ds-ink-soft: #55636e;
  --ds-line: hsl(0, 0%, 89%);
  --ds-surface: #ffffff;
  --ds-surface-alt: #f6f9fc;

  --ds-focus: 0 0 0 3px hsla(170, 75%, 41%, 0.35);
}

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

.yonk {
  width: 97%;
  margin-left: 1.5%;
}

/* NOTE: the desktop 55%-wide centred column is deliberately NOT here.
   18 of the 22 doorstops had that rule commented out and render full-width;
   only 4 (hard, mean, microwave, poop) run the narrow column, and they keep
   it in their own <style>. Moving it here would silently re-narrow 18 pages,
   which is a design decision rather than a refactor - worth making on
   purpose, not as a side effect of extracting shared CSS. */

.yonk p {
  margin-bottom: 0.5em;
  margin-top: 0.7em;
  font-size: 14pt;
}

.yonk p,
.yonk h1,
.yonk h2,
.yonk h3,
.yonk li {
  color: black;
}

.yonk a {
  text-decoration: underline;
  display: inline;
}

.yonk h1 {
  font-size: 25pt;
  text-decoration: none;
}

.yonk h2 {
  margin-top: 1em;
  font-size: 20pt;
}

/* bullet lists - the base stylesheet strips list markers globally */
.badonk {
  list-style-type: disc;
  padding-left: 30px;
  font-size: 14pt;
}

.honk {
  list-style-type: disc !important;
}

.hidden { display: none; }

/* ------------------------------------------------------- drawer/accordion */

/* style.css already styles these globally: a 2px dotted teal border on
   .accordion-section and a "\25BC"/"\25B2" glyph in .accordion-header::after.
   Both have to be neutralised here, or the dotted rectangle sits outside the
   rounded card and the glyph shows through under the chevron when open. */

.accordion-menu { margin-top: 1rem; }

/* the section is the card - one border around header + content, no double box */
.accordion-section {
  margin-bottom: 10px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  background-color: var(--ds-surface);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.accordion-section:hover {
  border-color: var(--ds-accent-line);
}

/* script.js mirrors the header's open state onto the section */
.accordion-section.is-open {
  border-color: var(--ds-accent-line);
  box-shadow: var(--ds-shadow-sm);
}

/* Headers are authored as <div> across 40+ pages; script.js upgrades them to
   real controls at runtime (role, tabindex, aria-expanded, keyboard support),
   so this styles both the authored div and the upgraded control. */
.accordion-header {
  position: relative;
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  cursor: pointer;
  font-family: 'League Spartan', 'Poppins', sans-serif;
  font-size: 14pt;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ds-ink);
  background-color: transparent;
  border: 0;
  padding: 15px 46px 15px 18px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.accordion-header:hover { color: var(--ds-accent); }

.accordion-header:focus-visible {
  outline: none;
  box-shadow: inset var(--ds-focus);
}

.accordion-header.active {
  background-color: var(--ds-accent-soft);
  box-shadow: inset 0 -1px 0 var(--ds-accent-line);
}

/* one chevron, drawn from borders - replaces the glyph style.css injects */
.accordion-header::after {
  content: "";
  position: absolute;
  right: 20px;
  top: calc(50% - 6px);
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ds-ink-soft);
  border-bottom: 2px solid var(--ds-ink-soft);
  transform: rotate(45deg);
  transition: transform 0.2s ease, border-color 0.15s ease;
}

/* content:"" is load-bearing - without it style.css's active glyph reappears */
.accordion-header.active::after {
  content: "";
  top: calc(50% - 2px);
  transform: rotate(-135deg);
  border-color: var(--ds-accent);
}

.accordion-content {
  display: none;
  padding: 14px 18px 16px;
  background-color: var(--ds-surface);
}

.accordion-content p { font-size: 13pt; }
.accordion-content > :first-child { margin-top: 0; }
.accordion-content > :last-child { margin-bottom: 0; }


/* --------------------------------------------- copy-paste template blocks */

/* Unchanged from the per-page originals - this component was working, so it is
   lifted verbatim rather than redesigned. Only the accessible name, the
   clipboard call and the keyboard focus ring are new; the visual design,
   placement and the 150ms icon flash are exactly what the pages had. */

.copy-paste-element {
  position: relative;
  background-color: #f6f9fc;
  border-radius: 3px;
  border: 1px solid #dce6e9;
  padding: 15px;
  margin-bottom: 1rem;
}

.copy-paste-element p {
  margin: 0;
  line-height: 1.5;
}

.copy-icon {
  position: absolute;
  top: 10px;
  right: 25px;
  background: none;
  border: none;
  cursor: pointer;
}

.copy-icon:focus { outline: none; }

/* keyboard users had no focus indication at all before */
.copy-icon:focus-visible {
  outline: none;
  border-radius: var(--ds-radius-sm);
  box-shadow: var(--ds-focus);
}

.svg2 path {
  stroke-dasharray: 477;
  stroke-dashoffset: 477;
  animation: draw 150ms ease-out forwards;
}

@keyframes draw {
  to { stroke-dashoffset: 0; }
}


/* ------------------------------------------------------------- callouts */

.warning-box {
  border-radius: var(--ds-radius);
  padding: 16px 18px;
}

/* ----------------------------------------------------------- chip grids */

.ds-chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--ds-gap);
  margin: 0 auto;
}

.ds-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  background-color: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm);
  padding: 18px 10px;
  cursor: pointer;
  font-size: 13pt;
  font-weight: 600;
  color: var(--ds-ink);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.ds-chip:hover {
  box-shadow: var(--ds-shadow);
  border-color: var(--ds-accent-line);
  transform: translateY(-2px);
}

.ds-chip:focus-visible {
  outline: none;
  border-color: var(--ds-accent);
  box-shadow: var(--ds-focus);
}

.ds-chip.is-active {
  background-color: var(--ds-accent-soft);
  border-color: var(--ds-accent);
}

.ds-chip .topic-icon { font-size: 28px; }

@media (prefers-reduced-motion: reduce) {
  .accordion-section,
  .accordion-header,
  .accordion-header::after,
  .ds-chip {
    transition: none;
  }
  .ds-chip:hover { transform: none; }
}