@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&display=swap');
/*
  silva-module.css
  Shared styles for all curriculum module pages.
  Set --course-accent in each page's <style> block.
*/

:root {
  --course-accent: #007474;
  --max-width: 1200px;   /* header content column, matches curriculum.html --max-width */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #080808;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
  color: #fff;
  -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════════════
   LIBRARY NAV
   ═══════════════════════════════════════════ */

.silva-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  border-top: 3px solid var(--course-accent);
  background: rgba(8, 8, 8, 0.58);
  backdrop-filter: blur(22px) saturate(125%);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.silva-nav-inner {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 20px;
  gap: 10px;
}

/* ── Unified header (built by silva-nav.js): pixel-identical to the Curriculum
   Catalog home header, so NOTHING shifts when you move between pages. Every metric
   here MUST match curriculum.html's .catalog-titlebar / .cat-bar / .cbc-* values.
   .silva-nav is the full-width glass bar; .silva-uni-inner is the centered column
   (mirrors .catalog-sticky-inner). Teacher-only (outside #top, never pasted). ── */
.silva-uni-inner { max-width: var(--max-width, 1200px); margin: 0 auto; padding: 0 32px; }
.silva-uni-titlebar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 0 15px; }
.silva-uni-title {
  margin: 0 auto 0 0; flex: 0 1 auto; min-width: 0; text-decoration: none;
  font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.005em;
  font-size: clamp(1.45rem, 2.9vw, 2.05rem); line-height: 1.05; color: #ffffff; transition: color 0.15s ease;
}
.silva-uni-title:hover { color: #9df0f0; }
.silva-uni-cal {
  margin-left: 0; flex: 0 0 auto; height: 32px; box-sizing: border-box;
  display: inline-flex; align-items: center; padding: 0 22px;
  font-family: 'Oswald', sans-serif; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  font-size: 0.78rem; color: #fff; text-decoration: none; white-space: nowrap;
  background: #007474; border: 1px solid #00b8b8; transition: filter 0.15s ease;
}
.silva-uni-cal:hover { filter: brightness(1.18); }
.silva-uni-searchbtn {
  flex: 0 0 auto; height: 32px; box-sizing: border-box;
  display: inline-flex; align-items: center; padding: 0 20px;
  font-family: 'Oswald', sans-serif; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  font-size: 0.78rem; color: #fff; text-decoration: none; white-space: nowrap;
  background: #007474; border: 1px solid #00b8b8; transition: filter 0.15s ease;
}
.silva-uni-searchbtn::before {
  content: ""; width: 15px; height: 15px; margin-right: 9px; flex: 0 0 auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cline x1='15.5' y1='15.5' x2='21' y2='21'/%3E%3C/svg%3E") no-repeat center / contain;
}
.silva-uni-searchbtn:hover { filter: brightness(1.18); }
.silva-uni-search { position: relative; flex: 1 1 280px; max-width: 480px; display: flex; }
.silva-uni-search-input {
  width: 100%; box-sizing: border-box; height: 32px;
  background-color: rgba(0, 0, 0, 0.30);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2360d8d8' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cline x1='15.5' y1='15.5' x2='21' y2='21'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 15px center; background-size: 16px 16px;
  border: 1px solid rgba(0, 184, 184, 0.30); border-top: 2px solid #00b8b8;
  color: #eaf7f7; font-family: inherit; font-size: 0.92rem; padding: 0 16px 0 42px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.silva-uni-search-input::placeholder { color: rgba(234, 247, 247, 0.5); }
.silva-uni-search-input:focus { outline: none; border-color: #00b8b8; background-color: rgba(0, 0, 0, 0.5); }
.silva-uni-clock { flex: 0 0 auto; width: 158px; height: 48px; border: 0; background: transparent; display: block; }
@media (max-width: 900px) { .silva-uni-clock { display: none; } }

.silva-uni-bar {
  display: flex; align-items: stretch; flex-wrap: wrap; min-height: 50px;
  background: rgba(0, 0, 0, 0.18); border-top: 1px solid rgba(0, 184, 184, 0.24);
}
.silva-uni-logo { display: flex; align-items: center; padding: 0 20px 0 0; margin-right: 4px; border-right: 1px solid rgba(255, 255, 255, 0.08); }
.silva-uni-logo img { height: 29px; width: auto; display: block; }
.silva-uni-cat { position: relative; display: flex; align-items: center; }
.silva-uni-cattrigger {
  align-self: center; display: flex; align-items: center; gap: 9px; min-height: 32px; padding: 0 15px;
  margin: 7px 0 7px 4px; white-space: nowrap;
  font-family: 'Oswald', sans-serif; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase;
  font-size: 0.75rem; color: rgba(234, 247, 247, 0.85); cursor: pointer;
  background: rgba(0, 0, 0, 0.26); border: 1px solid rgba(0, 184, 184, 0.42);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.silva-uni-cattrigger:hover { background: rgba(0, 184, 184, 0.14); color: #fff; border-color: rgba(0, 184, 184, 0.72); }
.silva-uni-cat.open .silva-uni-cattrigger { background: rgba(0, 184, 184, 0.18); color: #fff; border-color: #00b8b8; }
.silva-uni-caret { font-size: 0.62em; opacity: 0.7; transition: transform 0.15s ease, opacity 0.15s ease; }
.silva-uni-cat.open .silva-uni-caret { transform: rotate(180deg); opacity: 1; }
.silva-uni-catmenu {
  display: none; position: absolute; top: calc(100% + 2px); left: 4px; min-width: 264px; max-height: 74vh;
  overflow-y: auto; z-index: 10000; background: rgba(6, 32, 31, 0.85); border: 1px solid rgba(0, 184, 184, 0.35);
  border-top: 3px solid #00b8b8; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6); padding: 6px;
  backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
}
.silva-uni-cat.open .silva-uni-catmenu { display: block; }
.silva-uni-cathd {
  font-family: 'Oswald', sans-serif; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; color: #00b8b8; padding: 8px 13px 5px;
}
.silva-uni-cathd:not(:first-child) { margin-top: 6px; padding-top: 11px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.silva-uni-catmod {
  display: block; color: rgba(234, 247, 247, 0.85); text-decoration: none; font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.05em; text-transform: uppercase; padding: 9px 13px; transition: background 0.12s ease, color 0.12s ease;
}
.silva-uni-cathd + .silva-uni-catmod { border-top: 1px solid rgba(0, 184, 184, 0.14); }
.silva-uni-catmod:hover { background: rgba(0, 184, 184, 0.16); color: #fff; }
/* "Main Catalog" back-link: the first menu item, set off from the courses by a divider. */
.silva-uni-catmain {
  color: #eaf7f7; font-weight: 700; letter-spacing: 0.09em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12); margin-bottom: 5px; padding-bottom: 12px;
}
.silva-uni-build {
  display: flex; align-items: center; padding: 0 19px; margin-left: 4px; white-space: nowrap;
  font-family: 'Oswald', sans-serif; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase;
  font-size: 0.75rem; color: #ffb27a; text-decoration: none; border-left: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.15s ease, color 0.15s ease;
}
.silva-uni-build:hover { background: rgba(255, 157, 77, 0.14); color: #fff; }
.silva-uni-bar .silva-pager.pg-top { margin-left: auto; align-self: center; }
@media (max-width: 760px) {
  .silva-uni-build { margin-left: auto; border-left: 0; }
}
@media (max-width: 640px) {
  .silva-uni-inner { padding: 0 16px; }
  .silva-uni-titlebar { gap: 10px; padding-bottom: 10px; }
  .silva-uni-cal { margin-left: 0; }
  .silva-uni-search { flex-basis: 100%; max-width: none; }
}

/* CTE Standards alignment box uses the browser's native disclosure triangle on the left,
   exactly like the vocab words (no custom marker needed). */

/* ── Breadcrumb ── */

/* Breadcrumb: clean text (no boxed pill), Oswald caps. The "Catalog" link
   is the interactive teal catmenu trigger; the current page reads white. */
.silva-breadcrumb {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  flex-shrink: 1;
  overflow: hidden;
  font-family: 'Oswald', Arial, Helvetica, sans-serif;
}

.silva-breadcrumb a {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6fd4d4;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.silva-breadcrumb a:hover { color: #9df0f0; }
/* Caret on the Catalog trigger so it reads as a menu. */
.silva-catmenu-trigger::after {
  content: '\25BE';
  font-size: 0.62em;
  margin-left: 5px;
  opacity: 0.7;
  vertical-align: middle;
}
.silva-catmenu.open .silva-catmenu-trigger::after { opacity: 1; }

/* Top-left "Curriculum Catalog" dropdown (teacher navigation; iPad + desktop) */
.silva-breadcrumb.catmenu-open { overflow: visible; }   /* let the dropdown escape the breadcrumb clip while open */
.silva-catmenu { position: relative; display: inline-flex; align-items: center; }
.silva-catmenu-trigger { cursor: pointer; }
.silva-catmenu-panel {
  display: none; position: absolute; top: 100%; left: 0; margin-top: 9px;
  min-width: 280px; max-height: 78vh; overflow-y: auto;
  background: #06201f; border: 1px solid rgba(0, 184, 184, 0.35); border-top: 3px solid #00b8b8;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.55);  padding: 6px; z-index: 10000;
}
.silva-catmenu.open .silva-catmenu-panel { display: block; }
.silva-catmenu-course {
  display: block; width: 100%; box-sizing: border-box; text-align: left; background: none; border: 0;
  color: #eaf7f7; font-family: inherit; font-size: 0.92rem; font-weight: 700; letter-spacing: 0.03em;
  text-transform: uppercase; padding: 11px 13px; cursor: pointer; 
}
.silva-catmenu-course:hover { background: rgba(0, 184, 184, 0.14); }
.silva-catmenu-panel .cm-caret {
  display: inline-block; width: 14px; margin-right: 8px; color: #00b8b8;
  transition: transform 0.15s ease;
}
.silva-catmenu-course.open .cm-caret { transform: rotate(90deg); }
.silva-catmenu-modules { display: none; padding: 2px 0 8px; }
.silva-catmenu-modules.open { display: block; }
.silva-catmenu-panel .silva-catmenu-module {
  display: block; color: rgba(255, 255, 255, 0.82); text-decoration: none;
  font-size: 0.88rem; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 9px 13px 9px 35px; 
}
.silva-catmenu-panel .silva-catmenu-module:hover { background: rgba(0, 184, 184, 0.18); color: #fff; }
.silva-catmenu-panel .silva-catmenu-full {
  display: block; box-sizing: border-box; color: #eaf7f7; text-decoration: none;
  font-size: 0.92rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 11px 13px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.12); margin-bottom: 4px;
}
.silva-catmenu-panel .silva-catmenu-full:hover { background: rgba(0, 184, 184, 0.14); color: #fff; }
.silva-catmenu-panel .silva-catmenu-leave {
  display: block; box-sizing: border-box; color: #eaf7f7; text-decoration: none;
  font-size: 0.92rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 11px 13px;
   border-top: 1px solid rgba(255, 255, 255, 0.12); margin-top: 4px;
}
.silva-catmenu-panel .silva-catmenu-leave:hover { background: rgba(0, 184, 184, 0.14); color: #fff; }
/* Open full catalog + Build Resources are a grouped pair; one faint divider then courses. */
.silva-catmenu-panel .silva-catmenu-full { border-bottom: none; margin-bottom: 0; }
.silva-catmenu-div { height: 1px; background: rgba(255, 255, 255, 0.14); margin: 7px 10px 9px; }

.silva-breadcrumb .bc-sep {
  font-size: 10px;
  color: rgba(0, 184, 184, 0.5);
  flex-shrink: 0;
}

.silva-breadcrumb .bc-current {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.80);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Spacer ── */

.silva-nav-spacer { flex: 1; min-width: 8px; }

/* ── Step dots ── */

.silva-dots {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.sdot {
  width: 22px;
  height: 22px;
  
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  border: 1.5px solid rgba(255, 255, 255, 0.13);
  color: rgba(255, 255, 255, 0.20);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  flex-shrink: 0;
  line-height: 1;
  cursor: default;
  user-select: none;
}

/* Module overview dot: square shape */
.sdot-module {
  
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Clickable dot (page exists, not current) */
.sdot-link {
  cursor: pointer;
  border-color: rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.50);
}
.sdot-link:hover {
  border-color: rgba(255, 255, 255, 0.55);
  color: rgba(255, 255, 255, 0.90);
  background: rgba(255, 255, 255, 0.07);
}

/* Active dot (current page) */
.sdot-active {
  background: var(--course-accent);
  border-color: var(--course-accent);
  color: #fff;
  cursor: default;
}

/* ── Step nav prev / next ── */

.silva-step-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.silva-step-btn {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 11px;
  
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.11);
  color: rgba(255, 255, 255, 0.68);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  cursor: pointer;
  font-family: inherit;
  user-select: none;
}
.silva-step-btn:hover {
  background: rgba(255, 255, 255, 0.11);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.20);
}
.silva-step-btn.disabled {
  opacity: 0.22;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Divider ── */

.silva-nav-div {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.09);
  flex-shrink: 0;
  margin: 0 4px;
}

/* ── Copy button ── */

.silva-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 13px;
  background: var(--course-accent);
  color: #fff;
  border: none;
  
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: filter 0.15s, transform 0.1s;
  font-family: inherit;
}
.silva-copy-btn:hover { filter: brightness(1.18); }
.silva-copy-btn:active { transform: scale(0.97); }
.silva-copy-btn.copied { background: #1db869; }

.silva-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 13px;
  background: transparent;
  color: var(--course-accent);
  border: 1.5px solid var(--course-accent);
  
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s, filter 0.15s, transform 0.1s;
  font-family: inherit;
}
.silva-download-btn:hover { background: rgba(0, 116, 116, 0.14); filter: brightness(1.1); }
.silva-download-btn:active { transform: scale(0.97); }

/* Download left, Copy right */
.silva-download-btn { order: 1; }
.silva-copy-btn     { order: 2; }

/* ── Prev / Next module arrows (injected by silva-nav.js) ── */

.silva-nav-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.silva-nav-arrow:hover {
  border-color: var(--course-accent);
  color: var(--course-accent);
  background: rgba(0, 116, 116, 0.12);
}

/* ── Page wrapper ── */

.silva-page {
  width: 100%;
  /* Extra top padding gives a clear margin below the sticky nav so the banner
     is not chopped right under the navigation buttons. */
  padding: 44px 28px 60px;
}

/* Content photo float (framework _lay content-photo path). A right-floated ~half-width
   image: body text wraps beside it and then fills the FULL card width once past the image
   bottom (magazine wrap). Bordered callouts carry overflow:hidden (own BFC) so they never
   slide under it. Drops to full width, stacked above the text, on phones. */
.silva-cfloat {
  float: right;
  width: 44%;
  min-width: 280px;
  max-width: 520px;
  margin: 0 0 16px 30px;
}
@media (max-width: 640px) {
  /* Drop the content photo to full width AND move it BELOW the text (never above): the float div
     sits first in source for the desktop wrap, so on narrow we flex-column the card and order the
     image last. !important beats the inline float fallback on the .silva-cfloat div. */
  .silva-floatcard { display: flex; flex-direction: column; }
  .silva-cfloat {
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 18px 0 2px !important;
    order: 1;
  }
}

/* ═══════════════════════════════════════════
   HAMBURGER BUTTON
   Hidden on desktop, visible on mobile.
   Toggles .menu-open on .silva-nav (handled by silva-nav.js).
   ═══════════════════════════════════════════ */

.silva-burger {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  margin-left: auto;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.silva-burger:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.20);
}
.silva-burger span {
  display: block;
  width: 16px;
  height: 2px;
  background: rgba(255, 255, 255, 0.75);
  
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.silva-nav.menu-open .silva-burger span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.silva-nav.menu-open .silva-burger span:nth-child(2) {
  opacity: 0;
}
.silva-nav.menu-open .silva-burger span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ═══════════════════════════════════════════
   RESPONSIVE NAV
   At narrow widths, hide internal nav items and reveal the hamburger.
   When .menu-open is set, stack the items vertically below.
   ═══════════════════════════════════════════ */

@media (max-width: 760px) {
  /* Show the hamburger */
  .silva-burger { display: inline-flex; }

  /* Hide breadcrumb intermediate items (already in place) */
  .silva-breadcrumb .bc-hide-sm { display: none; }
  .silva-breadcrumb .bc-sep.bc-hide-sm { display: none; }

  /* Hide nav items by default on mobile */
  .silva-nav-inner > .silva-dots,
  .silva-nav-inner > .silva-step-nav,
  .silva-nav-inner > .silva-nav-div,
  .silva-nav-inner > .silva-copy-btn,
  .silva-nav-inner > .silva-download-btn,
  .silva-nav-inner > .silva-nav-arrow {
    display: none;
  }

  /* When the hamburger menu is open, lay items out stacked vertically */
  .silva-nav.menu-open .silva-nav-inner {
    flex-wrap: wrap;
    align-items: stretch;
    height: auto;
    padding-top: 10px;
    padding-bottom: 14px;
    row-gap: 8px;
  }
  .silva-nav.menu-open .silva-nav-spacer {
    display: none;
  }
  .silva-nav.menu-open .silva-nav-inner > .silva-dots {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    gap: 6px;
    padding: 6px 0;
  }
  .silva-nav.menu-open .silva-nav-inner > .silva-step-nav {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: 6px;
  }
  .silva-nav.menu-open .silva-nav-inner > .silva-step-nav .silva-step-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
  .silva-nav.menu-open .silva-nav-inner > .silva-copy-btn,
  .silva-nav.menu-open .silva-nav-inner > .silva-download-btn {
    display: inline-flex;
    width: 100%;
    height: 36px;
    justify-content: center;
  }
  .silva-nav.menu-open .silva-nav-inner > .silva-nav-arrow {
    display: inline-flex;
  }
  .silva-nav.menu-open .silva-nav-inner > .silva-nav-arrow.silva-nav-arrow-prev,
  .silva-nav.menu-open .silva-nav-inner > .silva-nav-arrow.silva-nav-arrow-next {
    flex: 1 1 50%;
    height: 36px;
    justify-content: center;
  }
  .silva-nav.menu-open .silva-burger {
    margin-left: 0;
  }
}

/* ═══════════════════════════════════════════
   MOBILE: phones (≤ 640px)
   All overrides target .silva-page / #top so
   Canvas paste (which only copies #top innerHTML
   with its inline styles) is completely unaffected.
   ═══════════════════════════════════════════ */
@media (max-width: 640px) {

  /* 1. Reduce outer page padding so #top gets more width */
  .silva-page {
    padding: 10px 8px 40px;
  }

  /* 2. Compact nav on phones: tighten padding, hide download button */
  .silva-nav-inner {
    padding: 0 10px;
  }
  .silva-download-btn {
    display: none;
  }
  .silva-copy-btn {
    font-size: 10px;
    padding: 0 10px;
    letter-spacing: 0.02em;
  }

  /* 3. Pull back #top's own inline padding (28px each side → 14px) */
  #top {
    padding: 14px 14px 24px !important;
    
  }

  /* 4. Title card: shrink the PV logo; hide the empty balancing spacer div */
  #top img[style*="width:144px"] {
    width: 72px !important;
  }
  #top div[style*="width:144px"] {
    display: none !important;
  }
  /* Scale back the big name headline (28pt → 18pt) */
  #top div[style*="font-size:28pt"] {
    font-size: 18pt !important;
  }

  /* 5. Legacy content-photo floats (raw float:right on an <img>): drop full width AND move BELOW
     the text, never above. The float img sits first in its card, so we flex-column the card and
     order the image last. New framework floats use .silva-cfloat/.silva-floatcard (handled above)
     and are untouched here (their img has no inline float:right). */
  #top div:has(> img[style*="float:right"]) { display: flex; flex-direction: column; }
  #top img[style*="float:right"] {
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 18px 0 2px !important;
    display: block !important;
    order: 1;
  }

  /* 6. Multi-column grids → single column */
  #top div[style*="minmax(260px"] {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════
   CANVAS CONTENT STANDARDS (inline styles; classes are stripped by Canvas RCE)
   Font family:        font-family:Arial,sans-serif  (set on #top div, inherits)
   Title (24pt bold):  font-size:24pt;font-weight:bold, wrapped in <strong>
   Subtitle (18pt bold): font-size:18pt;font-weight:bold, wrapped in <strong>
   Body (14pt):        font-size:14pt  (no bold)
   Small label (12pt): font-size:12pt  (no bold)
   Float-right image:  float:right;width:36%;min-width:216px;height:auto;border:1px solid rgba(255,255,255,0.12);margin:0 0 16px 20px;
   Full-width image:   width:100%;height:auto;border:1px solid rgba(255,255,255,0.12);display:block;
   ═══════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   BOTTOM PAGE NAV
   ═══════════════════════════════════════════ */

.silva-bottom-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 0 8px;
  margin-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.silva-bottom-btn {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.60);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  font-family: inherit;
  user-select: none;
}
.silva-bottom-btn:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.20);
}
.silva-bottom-btn.disabled {
  opacity: 0.22;
  cursor: not-allowed;
  pointer-events: none;
}

/* ═══════════════════════════════════════════
   #TOP HORIZONTAL SCROLLERS: angular teal scrollbar
   Targets the inline overflow-x:auto card grids inside #top. Canvas
   strips this, which is fine: Canvas has its own scrollbar. This is purely
   for the creativesilva.com preview so the scroll cue is visible
   against the dark background.
   ═══════════════════════════════════════════ */
body #top *[style*="overflow-x:auto"]::-webkit-scrollbar {
  height: 10px !important;
  background: rgba(0, 0, 0, 0.50) !important;
}
body #top *[style*="overflow-x:auto"]::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.50) !important;
}
body #top *[style*="overflow-x:auto"]::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.10) !important;
}
body #top *[style*="overflow-x:auto"]::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.18) !important;
}
body #top *[style*="overflow-x:auto"]::-webkit-scrollbar-corner {
  background: transparent !important;
}
/* Firefox */
body #top *[style*="overflow-x:auto"] {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 255, 255, 0.10) rgba(0, 0, 0, 0.50) !important;
}

/* Drag-or-swipe hint: only show when actually needed.
   Most monitors are 1920-2560px wide. The biggest category (Branding,
   9 cards x 260px + gaps) needs ~2500px to fit without scroll. So at
   2500px+ everything fits; below, scrolling is needed. */
.scroll-hint { display: block; }
@media (min-width: 2500px) {
  .scroll-hint { display: none !important; }
}

/* ═══════════════════════════════════════════
   SILVA-SCROLL: styled scrollbar for long instruction sections
   Used on creativesilva.com preview. Canvas strips custom scrollbar
   styling, so always pair this class with a "Scroll for more" text
   hint and a bottom-fade gradient on the container (see framework §13).
   ═══════════════════════════════════════════ */

.silva-scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.silva-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  
}
.silva-scroll::-webkit-scrollbar-thumb {
  background: #5f8fbf;
  
  border: 2px solid transparent;
  background-clip: padding-box;
}
.silva-scroll::-webkit-scrollbar-thumb:hover {
  background: #9ecbff;
  background-clip: padding-box;
  border: 2px solid transparent;
}
.silva-scroll::-webkit-scrollbar-corner {
  background: transparent;
}
/* Firefox */
.silva-scroll {
  scrollbar-width: thin;
  scrollbar-color: #5f8fbf rgba(255, 255, 255, 0.04);
}

/* ============================================================
   Module pager (injected by silva-nav.js), styled to match the
   Curriculum Catalog: straight edges, thin outlines, Oswald caps.
   Each pager carries its own COPY HTML button at the right. Top and
   bottom share one compact size; bottom is centered, top sits in the bar.
   Website-only: lives outside #top, never copied into Canvas.
   ============================================================ */
.silva-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  width: fit-content;
  max-width: 96%;
  margin: 8px auto 44px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-family: 'Oswald', Arial, Helvetica, sans-serif;
}
.silva-pager a,
.silva-pager button { box-sizing: border-box; }
.silva-pager .pg-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 32px;
  padding: 0 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.silva-pager a.pg-num:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.32);
}
.silva-pager .pg-num.active {
  background: var(--course-accent, #007474);
  border-color: var(--course-accent, #007474);
  color: #ffffff;
}
.silva-pager .pg-edge,
.silva-pager .pg-copy {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
}
.silva-pager a.pg-edge:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.32);
}
.silva-pager .pg-prev { margin-right: 4px; }
.silva-pager .pg-next { margin-left: 4px; }
.silva-pager .pg-disabled { opacity: 0.3; cursor: default; }
.silva-pager .pg-ellipsis {
  display: inline-flex;
  align-items: flex-end;
  height: 32px;
  padding: 0 2px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 600;
}
.silva-pager .pg-copy {
  margin-left: 8px;
  cursor: pointer;
  color: #ffffff;
  background: var(--course-accent, #007474);
  border-color: var(--course-accent, #007474);
  letter-spacing: 0.15em;
}
.silva-pager .pg-copy:hover { filter: brightness(1.15); }
.silva-pager .pg-copy.copied { background: #5fcc8a; border-color: #5fcc8a; }

/* Top pager: identical size, just positioned in the nav bar (not centered)
   and held to one line so it never stacks. */
.silva-pager.pg-top {
  margin: 0;
  flex-wrap: nowrap;
  flex-shrink: 0;
  background: none;
  border: 0;
  padding: 0;
}
/* The sticky top pager is enough on desktop, so hide the bottom one there.
   On mobile the top pager is too wide, so the bottom pager takes over. */
.silva-pager.pg-bottom { display: none; }
@media (max-width: 1280px) {
  .silva-breadcrumb .bc-hide-sm { display: none; }
}
@media (max-width: 760px) {
  .silva-pager.pg-top { display: none; }
  .silva-pager.pg-bottom { display: flex; }
}
@media (max-width: 520px) {
  .silva-pager .pg-edge, .silva-pager .pg-copy { padding: 0 11px; letter-spacing: 0.1em; }
}