/* site-custom.css — bespoke, non-Tailwind CSS for the Cherokee Makerspace site. */
/* Linked in the Base Template's <head>, alongside tailwind.css: */
/*   <link rel="stylesheet" href="/assets/css/site-custom.css?v=1"> */
/* Everything here genuinely can't be a Tailwind utility class (keyframes, */
/* nth-of-type selectors, offset-path) — if something below CAN become a */
/* plain utility class, it belongs in tailwind.css instead, not here. */
/* Reorg from the old Base Template inline <style> block: 2026-08-06. */
/* See site-conventions.md for the full three-file CSS structure. */

/* --- Decorative brand marks --- */
.kerf { border: 1.5px dashed rgba(45,41,38,0.25); position: relative; }
.kerf::before, .kerf::after {
  content: ""; position: absolute; width: 7px; height: 7px; border-radius: 999px;
  background: radial-gradient(circle, rgba(80,158,47,0.5) 0%, rgba(80,158,47,0) 70%);
}
.kerf::before { top: -4px; left: -4px; }
.kerf::after { bottom: -4px; right: -4px; }
.kerf-dark { border: 1.5px dashed rgba(247,246,243,0.2); }
.kerf-dark::before, .kerf-dark::after {
  background: radial-gradient(circle, rgba(255,198,88,0.5) 0%, rgba(255,198,88,0) 70%);
}

/* --- Laser draw-on animation --- */
.laser-path { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: draw 2.6s ease-out forwards 0.3s; }
.laser-head {
  offset-path: path("M40,150 C120,20 260,280 340,150 S520,20 600,150 S780,280 860,150");
  animation: run-head 2.6s ease-out forwards 0.3s;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes run-head { 0% { offset-distance: 0%; opacity: 1; } 95% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }

/* --- Scroll-reveal --- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .laser-path { animation: none; stroke-dashoffset: 0; }
  .laser-head { animation: none; opacity: 0; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* --- H1-H6 fallback typography --- */
/* RESTORING 2026-08-06: this block was confirmed live and fixing a real bug */
/* (Waiver page headings losing all size/weight/margin under Tailwind's */
/* Preflight reset) as of 2026-08-02, but was missing from the block Alex */
/* pasted from the live site on 2026-08-06 — either a regression or it never */
/* actually made it into the live paste. Re-paste this into whatever ends up */
/* live (this file once linked, or back into the inline block if the new */
/* <link> tag isn't added yet) — don't assume it's already there. */
h1 { font-size: 2rem; font-weight: 700; margin: 0.67em 0; line-height: 1.2; }
h2 { font-size: 1.5rem; font-weight: 700; margin: 0.75em 0; line-height: 1.25; }
h3 { font-size: 1.25rem; font-weight: 700; margin: 0.83em 0; line-height: 1.3; }
h4 { font-size: 1.125rem; font-weight: 700; margin: 1em 0; line-height: 1.35; }
h5 { font-size: 1rem; font-weight: 700; margin: 1.1em 0; line-height: 1.4; }
h6 { font-size: 0.875rem; font-weight: 700; margin: 1.2em 0; line-height: 1.4; }

/* --- Nav --- */
.cmks-nav-links { display: none; }
@media (min-width: 768px) {
  .cmks-nav-links { display: flex; }
}

/* --- Agenda (Calendar page) event description links --- */
.agenda-desc a { color: #006272; text-decoration: underline; font-weight: 500; }
.agenda-desc a:hover { color: #004a56; }

/* --- Board & Staff page (see board-staff/board-staff-page-handoff.md) --- */
/* nth-of-type color cycling and the opacity-baked teal shade can't be */
/* expressed as Tailwind utility classes, hence living here rather than */
/* tailwind.css. */
.hover\:text-cmks-teal:hover { color: #006272; }

.cmks-board-photo { position: relative; }
.cmks-board-grid > .cmks-board-card:nth-of-type(4n+1) .cmks-board-photo { border: 3px solid #509E2F; }
.cmks-board-grid > .cmks-board-card:nth-of-type(4n+2) .cmks-board-photo { border: 3px solid #006272; }
.cmks-board-grid > .cmks-board-card:nth-of-type(4n+3) .cmks-board-photo { border: 3px solid #9A3324; }
.cmks-board-grid > .cmks-board-card:nth-of-type(4n)   .cmks-board-photo { border: 3px solid #FFC658; }

.cmks-board-title { font-size: .875rem; color: rgba(0,98,114,.7); margin: 2px 0 0; }

@media (max-width: 767px) {
  #top { padding-top: 1.5rem; padding-bottom: 1.5rem; padding-left: 1rem; padding-right: 1rem; }
  .cmks-board-card { padding: 1rem; }
  .cmks-board-grid { gap: 1rem; }
}