/*
 * Course Plan — Homeschool Planet theme.
 * Every rule MUST be scoped under #cp-app[data-cp-theme="homeschoolplanet"].
 * Matches the homeschoolplanet.com brand palette: blue primary, slate text,
 * white surfaces with soft gray panels, warm orange accents.
 */

/* ── Variable overrides + base typography ── */

#cp-app[data-cp-theme="homeschoolplanet"] {
  --cp-primary: #3182ce;
  --cp-border:  #dcdcde;
  --cp-muted:   #718096;
  --cp-bg:      #ffffff;
  --cp-bg-alt:  #f6f7f7;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #2d3748;
}

#cp-app[data-cp-theme="homeschoolplanet"] h1,
#cp-app[data-cp-theme="homeschoolplanet"] h2,
#cp-app[data-cp-theme="homeschoolplanet"] h3,
#cp-app[data-cp-theme="homeschoolplanet"] h4,
#cp-app[data-cp-theme="homeschoolplanet"] .cp-picker-title { color: #1a202c; letter-spacing: -0.005em; }

/* ── Planner shell + toolbar ── */

#cp-app[data-cp-theme="homeschoolplanet"] .cp-planner {
  background: var(--cp-bg);
  border-color: var(--cp-border);
  box-shadow: 0 4px 16px rgba(49, 130, 206, 0.08);
}
#cp-app[data-cp-theme="homeschoolplanet"] .cp-toolbar {
  background: linear-gradient(180deg, #ebf5fc 0%, #f6f7f7 100%);
  border-bottom-color: var(--cp-border);
}

/* ── Grade-column colors (HSP brand blues, alternating by grade) ──
   Header = the brand color; the cells below are a fixed lighter version of the
   same color (universal header→cell relationship). Year N maps to grade 9..12
   left-to-right. The "Year N" text stays the unified Year-4 gray (#313042),
   which is readable on all three blues. */
#cp-app[data-cp-theme="homeschoolplanet"] .cp-year-header[data-year="1"] { background: #c5dff5; color: #313042; } /* 9th  */
#cp-app[data-cp-theme="homeschoolplanet"] .cp-year-header[data-year="2"] { background: #f1f7fc; color: #313042; } /* 10th */
#cp-app[data-cp-theme="homeschoolplanet"] .cp-year-header[data-year="3"] { background: #c5dff5; color: #313042; } /* 11th */
#cp-app[data-cp-theme="homeschoolplanet"] .cp-year-header[data-year="4"] { background: #f1f7fc; color: #313042; } /* 12th */
#cp-app[data-cp-theme="homeschoolplanet"] .cp-semester[data-year="1"] { background: #e2effa; }
#cp-app[data-cp-theme="homeschoolplanet"] .cp-semester[data-year="2"] { background: #f8fbfe; }
#cp-app[data-cp-theme="homeschoolplanet"] .cp-semester[data-year="3"] { background: #e2effa; }
#cp-app[data-cp-theme="homeschoolplanet"] .cp-semester[data-year="4"] { background: #f8fbfe; }

/* ── Cohesive grade columns: a darker brand-blue border boxes each column
   (desktop grid only — on mobile columns stack, and print has its own borders,
   so this is scoped to screen ≥769px). Inner header/fall/spring separators stay
   faint so each grade reads as one piece; the outer box is the strong line. */
@media screen and (min-width: 769px) {
  #cp-app[data-cp-theme="homeschoolplanet"] .cp-grid { gap: 0; background: transparent; }
  #cp-app[data-cp-theme="homeschoolplanet"] .cp-year-header,
  #cp-app[data-cp-theme="homeschoolplanet"] .cp-semester {
    border-left: 2px solid #6a9dd0;
    border-bottom: 1px solid rgba(106, 157, 208, 0.30);
  }
  #cp-app[data-cp-theme="homeschoolplanet"] .cp-year-header { border-top: 2px solid #6a9dd0; }
  #cp-app[data-cp-theme="homeschoolplanet"] .cp-year-header[data-year="4"],
  #cp-app[data-cp-theme="homeschoolplanet"] .cp-semester[data-year="4"] { border-right: 2px solid #6a9dd0; }
  #cp-app[data-cp-theme="homeschoolplanet"] .cp-semester.cp-summer { border-bottom: 2px solid #6a9dd0; }
}

/* 8th-grade (pre-HS) row — deeper brand blue, distinct from the 9–12 columns. */
#cp-app[data-cp-theme="homeschoolplanet"] .cp-pre-hs { background: #a7c7df; border-left-color: #6a9dd0; }
#cp-app[data-cp-theme="homeschoolplanet"] .cp-pre-hs-label { color: #1f3a52; }

/* ── Tile: clean white card with subtle blue shadow.
   IMPORTANT: declare top/right/bottom borders individually so the subject
   colored border-left from course-plan.css (.cp-subject-* rules) is not
   overridden by a `border` shorthand here. ── */

#cp-app[data-cp-theme="homeschoolplanet"] .cp-tile {
  background: #ffffff;
  border-top:    1px solid var(--cp-border);
  border-right:  1px solid var(--cp-border);
  border-bottom: 1px solid var(--cp-border);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(49, 130, 206, 0.06);
}
#cp-app[data-cp-theme="homeschoolplanet"] .cp-tile:hover {
  box-shadow: 0 4px 12px rgba(49, 130, 206, 0.12);
  border-top-color:    #93c5fd;
  border-right-color:  #93c5fd;
  border-bottom-color: #93c5fd;
}

/* ── Sidebar ── */

#cp-app[data-cp-theme="homeschoolplanet"] .cp-sidebar {
  background: var(--cp-bg-alt);
  border-left-color: var(--cp-border);
}

/* ── Buttons + accents ── */

#cp-app[data-cp-theme="homeschoolplanet"] .cp-state-pill { background: var(--cp-primary); }
#cp-app[data-cp-theme="homeschoolplanet"] .cp-toolbar-actions button.primary,
#cp-app[data-cp-theme="homeschoolplanet"] .cp-wizard-actions button.primary,
#cp-app[data-cp-theme="homeschoolplanet"] .cp-modal-card form button.primary,
#cp-app[data-cp-theme="homeschoolplanet"] .cp-btn-primary {
  background: var(--cp-primary);
  border-color: var(--cp-primary);
}
#cp-app[data-cp-theme="homeschoolplanet"] .cp-btn-primary:hover { background: #2c5282; border-color: #2c5282; }
#cp-app[data-cp-theme="homeschoolplanet"] .cp-add-course:hover {
  border-color: var(--cp-primary);
  color: var(--cp-primary);
  background: #ebf5fc;
}

/* ── Pre-HS pill uses HSP orange accent on hover for a touch of the brand's warmth ── */

#cp-app[data-cp-theme="homeschoolplanet"] .cp-pre-hs-pill:hover {
  border-color: #f76a0c;
  color: #f76a0c;
  border-style: solid;
  background: #fff7ed;
}