/* Shared styles for all TutorGrids pages. Single source of truth for the
   palette, resets, animations, hover states, and responsive rules. */

:root {
  /* Brand */
  --coral: #DE5F49;
  --coral-dark: #c34a35;
  --teal: #0F8B80;
  --teal-dark: #0b6b62;
  --teal-bright: #4fc9bd;  /* accent on dark grounds only — fails contrast on sand */
  --amber: #D99411;
  --amber-dark: #a86f08;
  --violet: #6553C2;

  /* Grounds */
  --dark: #14443B;
  --sand: #F2E4DA;
  --cream: #FFF6EF;
  --mint: #D9EAE2;

  /* Text */
  --ink: #17171C;
  --ink-soft: #2c2c33;
  --body: #3a3a42;
  --muted: #565A66;
  --faint: #8a8a90;
  --mist: #D9E4E2;      /* body text on dark */
  --mist-dim: #AEC4BF;
  --sage: #7FA99B;      /* labels on dark */

  /* Lines */
  --border: #E0CDBC;
  --border-warm: #D5BFAC;  /* borders over --mint */
  --rule: #C8AE9A;
  --dark-line: #2E6357;
  --dark-line-soft: #1F5349;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--sand); color: var(--ink); font-family: 'IBM Plex Sans', sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-dark); }
::selection { background: var(--coral); color: var(--sand); }

@keyframes rise { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  /* Content fades in via the `rise` animation from an inline opacity:0. With
     animations disabled (iOS Reduce Motion / Low Power Mode both trigger this),
     that fade never runs — so force the end-state or the hero renders blank. */
  [style*="opacity:0"] { opacity: 1 !important; transform: none !important; }
}

/* Smooth cross-fade between pages (cross-document View Transitions). Every page
   shares this stylesheet, so all navigations opt in; unsupported browsers just
   fall back to an instant page swap. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.32s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
}

.nav-link:hover { color: var(--teal); }
.nav-pill-group { display: inline-flex; align-items: center; gap: 10px; }
.nav-pill { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border: 1px solid var(--border-warm); border-radius: 2px; background: var(--cream); color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1; box-shadow: 0 1px 1px rgba(60,40,20,0.05); transition: background .2s, border-color .2s, transform .2s, box-shadow .2s; }
.nav-pill:hover { background: #fff; border-color: var(--teal); color: var(--teal); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(60,40,20,0.12); }
.nav-pill:active { transform: translateY(0); box-shadow: 0 1px 1px rgba(60,40,20,0.05); }
/* Social icons pulled from the /assets/icons.svg sprite via <use>; sized and coloured here. */
.icon { width: 16px; height: 16px; flex: none; fill: currentColor; }
.icon-link { display: inline-flex; align-items: center; gap: 9px; }
.cta-coral:hover { background: var(--teal); }
.cta-coral-lift:hover { background: var(--teal); transform: translateY(-2px); }
.cta-teal:hover { background: var(--teal-dark); }
.cta-teal-lift:hover { background: var(--teal-dark); transform: translateY(-2px); }
.footer-link { color: var(--mist); font-size: 15px; transition: color .2s; }
.footer-link:hover { color: var(--sand); }

/* Workshop FAQ accordion */
.faq { border-top: 1px solid var(--border); }
.faq > summary { list-style: none; cursor: pointer; padding: 26px 0; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
.faq > summary::-webkit-details-marker { display: none; }
.faq .q { font-family: 'Newsreader', serif; font-size: 22px; line-height: 1.25; }
.faq .sign { font-family: 'IBM Plex Mono', monospace; color: var(--teal); font-size: 20px; flex-shrink: 0; }
.faq .sign::before { content: '+'; }
.faq[open] .sign::before { content: '\2212'; }
.faq p { padding: 0 0 26px; font-size: 16px; line-height: 1.6; color: #3a3a42; max-width: 64ch; }

@media (max-width: 760px) {
  [data-m~="nav"] { flex-wrap: wrap; row-gap: 12px; padding: 14px 20px !important; }
  [data-m~="navlinks"] { flex-wrap: wrap; gap: 12px 16px !important; width: 100%; }
  [data-m~="stack"] { grid-template-columns: 1fr !important; }
  [data-m~="stack"] > * { border-right: none !important; }
  [data-m~="cols2"] { grid-template-columns: 1fr 1fr !important; }
  [data-m~="cols2"] > *:nth-child(even) { border-right: none !important; }
  [data-m~="flush"] { padding-left: 0 !important; padding-right: 0 !important; }
  [data-m~="gap40"] { gap: 40px !important; }
}