/* ═══════════════════════════════════════════════════════════
   Prairie Aikikai — Student Guide Inner Pages
   css/student-guide.css
   ═══════════════════════════════════════════════════════════
   Loaded by all pages inside studentGuide/ via page-head.php's
   $pageCSSFiles mechanism.  Relies on design tokens and base
   styles defined in css/site.css.
   ═══════════════════════════════════════════════════════════ */

/* ── STUDENT GUIDE INNER PAGE LAYOUT ── */

/* Two-column layout: sidebar left, content right */
.sg-layout { max-width: var(--max-w); margin: 0 auto; padding: clamp(2.5rem,6vw,5rem) clamp(1.5rem,5vw,3rem); display: grid; grid-template-columns: 220px 1fr; gap: 4rem; align-items: start; }

/* ── SIDEBAR ── */
.sg-sidebar { position: sticky; top: 6rem; }
.sg-sidebar-title { font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; color: var(--ink); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.9rem; padding-bottom: 0.6rem; border-bottom: 1px solid rgba(0,0,0,0.1); }
.sg-nav { list-style: none; padding: 0; margin: 0 0 0.5rem 0; display: flex; flex-direction: column; gap: 0; }
.sg-nav li a { display: block; font-size: 0.82rem; color: var(--clr-prose-light); font-weight: var(--fw-body); padding: 0.45rem 0.6rem; text-decoration: none; border-left: 2px solid transparent; transition: color 0.15s, border-color 0.15s, background 0.15s; line-height: 1.4; }
.sg-nav li a:hover { color: var(--ink); border-left-color: var(--vermillion); background: rgba(0,0,0,0.03); }
.sg-nav li a.sg-nav-active { color: var(--ink); border-left-color: var(--vermillion); font-weight: 400; background: rgba(0,0,0,0.04); }
.sg-nav li a.sg-nav-section-active { color: var(--vermillion); font-weight: 600; border-left-color: var(--vermillion); background: rgba(192,57,43,0.05); }
.sg-nav-all-resources { color: #888 !important; font-style: italic; }
.sg-sidebar-divider { border: none; border-top: 1px solid rgba(0,0,0,0.08); margin: 1rem 0; }
.sg-nav--cross li a { font-size: 0.78rem; color: #888; }
.sg-nav--cross li a:hover { color: var(--ink); }

/* ── CONTENT AREA ── */
.sg-content { min-width: 0; }
.sg-breadcrumb { font-size: 0.75rem; color: var(--clr-prose-secondary-light); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 1.8rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.sg-breadcrumb a { color: var(--clr-prose-secondary-light); text-decoration: none; transition: color 0.15s; }
.sg-breadcrumb a:hover { color: var(--ink); }
.sg-breadcrumb span { color: #bbb; }

.sg-content h1 { font-family: var(--font-display); font-size: clamp(1.8rem,4vw,2.6rem); font-weight: 300; color: var(--ink); line-height: 1.15; margin-bottom: 0.3rem; }
.sg-content .sg-subtitle { font-size: 0.82rem; color: var(--vermillion); letter-spacing: 0.08em; font-weight: 400; margin-bottom: 2rem; font-style: italic; }
.sg-content p, .sg-content li { font-size: 0.92rem; line-height: 1.9; color: var(--clr-prose-light); font-weight: var(--fw-body); margin-bottom: 1.2rem; }
.sg-content p:last-of-type { margin-bottom: 0; }

/* Technique/guidelines list used on rank pages */
.sg-guidelines { margin: 1.5rem 0 2rem; }

/* Section header — larger, with underline */
.sg-guidelines h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; color: var(--ink); margin: 1.8rem 0 0; padding-bottom: 0.3rem; border-bottom: 1px solid rgba(0,0,0,0.07); }
.sg-guidelines h3:first-child { margin-top: 0; }

/* Item list — indented, smaller */
.sg-guidelines ul { list-style: disc; padding-left: 1.5rem; margin: 0.6rem 0 0; }
.sg-guidelines ul li { font-size: 0.88rem; font-weight: var(--fw-body); color: var(--clr-prose-light); line-height: 1.75; padding: 0.05rem 0; }

/* 'All previous techniques, plus:' note */
.sg-guidelines .sg-cumulative { font-size: 0.85rem !important; color: var(--clr-prose-secondary-light) !important; font-style: italic; margin: 0.4rem 0 0 !important; }

/* 'No X' sections — same header style, then indented italic 'none required' below */
.sg-guidelines .sg-none { font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; color: var(--ink) !important; margin: 1.8rem 0 0 !important; padding-bottom: 0; }
.sg-guidelines .sg-none::after { content: 'none required'; display: block; font-family: var(--font-body); font-size: 0.88rem; font-weight: var(--fw-ornamental); font-style: italic; color: var(--clr-prose-secondary-light); padding-left: 1.5rem; padding-top: 0.5rem; padding-bottom: 0.4rem; margin-top: 0.3rem; border-top: 1px solid rgba(0,0,0,0.07); }

/* Prev/Next navigation */
.sg-nav-buttons { display: flex; justify-content: space-between; align-items: center; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(0,0,0,0.08); }
.sg-nav-btn { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); text-decoration: none; font-weight: 400; transition: gap 0.2s, color 0.2s; padding: 0.6rem 0; }
.sg-nav-btn:hover { color: var(--vermillion); gap: 0.75rem; }
.sg-nav-btn.sg-nav-btn--prev:hover { gap: 0.75rem; }
.sg-nav-btn--placeholder { min-width: 80px; }

/* Tables on testing pages */
.sg-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.85rem; }
.sg-table th { text-align: left; font-family: var(--font-display); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--clr-prose-secondary-light); border-bottom: 1px solid rgba(0,0,0,0.1); padding: 0.5rem 0.75rem 0.6rem; }
.sg-table td { padding: 0.65rem 0.75rem; border-bottom: 1px solid rgba(0,0,0,0.05); color: var(--clr-prose-light); vertical-align: middle; font-weight: var(--fw-body); }
.sg-table td a { color: var(--ink); text-decoration: none; font-weight: 400; }
.sg-table td a:hover { color: var(--vermillion); }
.sg-table tr:last-child td { border-bottom: none; }
.sg-table .center { text-align: center; }

/* Section header within testing tables */
.sg-table-section-head { font-family: var(--font-display); font-size: 1.15rem; font-weight: 400; color: var(--ink); margin: 2.5rem 0 0.8rem; }

/* Belt color badge */
.belt-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

/* Note box */
.sg-note { background: rgba(184,169,122,0.1); border-left: 3px solid var(--gold); padding: 1rem 1.2rem; font-size: 0.84rem; line-height: 1.75; color: var(--clr-prose-light); margin: 1.5rem 0; }
.sg-note strong { color: var(--ink); font-weight: 500; }

/* Legacy class-based guidelines names — kept for backward compat but superseded by h3/ul rules above */
.sg-guidelines-category { font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; color: var(--ink); margin: 1.8rem 0 0; border-bottom: 1px solid rgba(0,0,0,0.07); padding-bottom: 0.3rem; }
.sg-guidelines-items { list-style: disc; padding-left: 1.5rem; margin: 0.6rem 0 0; }
.sg-guidelines-items li { font-size: 0.88rem; font-weight: var(--fw-body); color: var(--clr-prose-light); line-height: 1.75; padding: 0.05rem 0; }
.sg-guidelines-none { font-size: 0.88rem; font-weight: var(--fw-ornamental); color: var(--clr-prose-secondary-light); font-style: italic; padding-left: 1.5rem; margin: 0.5rem 0 0; }
.sg-eval-intro { font-size: 0.88rem; color: var(--clr-prose-light); line-height: 1.8; font-weight: var(--fw-body); margin-top: 1.5rem; }
.sg-eval-intro ol { padding-left: 1.4rem; margin: 0.8rem 0; }
.sg-eval-intro ol li { margin-bottom: 0.4rem; }

/* Page background */
.sg-page { background: var(--paper); }

/* Responsive */
@media (max-width: 820px) {
  .sg-layout { grid-template-columns: 1fr; gap: 2rem; }
  .sg-sidebar { position: static; }
}

/* ── EXERCISE LISTS (warmups, aikiTaisos) ── */
.sg-exercise-list { padding-left: 1.5rem; margin: 1.5rem 0; }
.sg-exercise-list li { font-size: 0.9rem; font-weight: var(--fw-body); color: var(--clr-prose-light); line-height: 1.7; padding: 0.2rem 0; }

/* ── GLOSSARY (aikidoTerms) ── */
.sg-glossary-search-wrap { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0 0.5rem; }
.sg-glossary-search { flex: 1; max-width: 380px; padding: 0.55rem 0.9rem; font-size: 0.88rem; font-family: var(--font-body); font-weight: var(--fw-body); border: 1px solid rgba(0,0,0,0.15); border-radius: 3px; outline: none; transition: border-color 0.2s; background: #fff; color: var(--ink); }
.sg-glossary-search:focus { border-color: var(--vermillion); }
.sg-glossary-count { font-size: 0.75rem; color: #999; letter-spacing: 0.05em; white-space: nowrap; }

.sg-glossary { display: block; margin: 0.5rem 0 2rem; }
.sg-glossary-item { padding: 0.6rem 0; border-bottom: 1px solid rgba(0,0,0,0.06); }
.sg-glossary-item:last-child { border-bottom: none; }
.sg-glossary-item dt { font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; color: var(--ink); margin-bottom: 0.15rem; }
.sg-glossary-item dd { font-size: 0.83rem; font-weight: var(--fw-body); color: var(--clr-prose-light); line-height: 1.65; margin: 0; padding-left: 1.5rem; }
.sg-glossary-no-results { font-size: 0.9rem; color: #999; font-style: italic; text-align: center; padding: 2rem 0; }

/* Reference tables (counting, body parts) */
.sg-reference-tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 260px)); gap: 2.5rem; margin: 2.5rem 0 1.5rem; }
.sg-reference-table h3 { font-family: var(--font-display); font-size: 1rem; font-weight: 500; color: var(--ink); margin-bottom: 0.8rem; }
.sg-reference-table .sg-table td { font-size: 0.84rem; }
.sg-reference-table .sg-table td:first-child { font-weight: 500; color: var(--ink); width: 50%; }

/* ── PHRASES TABLE ── */
.sg-table--phrases { margin: 1.5rem 0; }
.sg-table--phrases th:first-child, .sg-table--phrases td:first-child { width: 38%; font-weight: 500; color: var(--ink); }

/* ── BOOK GRID (suggestedReading) ── */
.sg-book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.8rem 1.5rem; margin: 2rem 0; }
.sg-book { display: flex; flex-direction: column; gap: 0.6rem; }
.sg-book-cover { height: 180px; display: flex; align-items: flex-end; justify-content: center; }
.sg-book-cover img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; display: block; box-shadow: 2px 3px 8px rgba(0,0,0,0.18); border-radius: 2px; }
.sg-book p { font-size: 0.78rem; font-weight: var(--fw-body); color: var(--clr-prose-light); line-height: 1.6; margin: 0; text-align: center; }
.sg-book p a { color: var(--ink); text-decoration: none; border-bottom: 1px dotted rgba(0,0,0,0.2); transition: border-color 0.15s, color 0.15s; }
.sg-book p a:hover { color: var(--vermillion); border-bottom-color: var(--vermillion); }
.sg-book p em { font-style: italic; }