/* The Mercy Court — shared styles (from Claude Design handoff + chapter hub) */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: #2A070C; font-family: 'Raleway', sans-serif; -webkit-font-smoothing: antialiased; }
::selection { background: #DDC8B3; color: #2A070C; }
a { color: inherit; }
img { display: block; }
input::placeholder, textarea::placeholder { color: #9F8E87; }

@keyframes mc-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes mc-glow { 0%,100% { opacity: .55; } 50% { opacity: .9; } }
@keyframes mc-cue { 0% { transform: translateY(0); opacity: .9; } 50% { transform: translateY(7px); opacity: .35; } 100% { transform: translateY(0); opacity: .9; } }
@keyframes mc-beam { 0%,100% { opacity: .5; } 50% { opacity: .8; } }
.mc-rise { animation: mc-rise .9s cubic-bezier(.2,.7,.2,1) both; }

.mc-link:hover { color: #F5F0E8 !important; }
.mc-navlink { position: relative; }
.mc-burgundy-btn:hover { background: #1E0407 !important; }
.mc-cash-btn:hover { background: #C9AE92 !important; }
.mc-ghost-d:hover { background: rgba(221,200,179,.1) !important; }
.mc-social:hover { color: #DDC8B3 !important; border-color: #DDC8B3 !important; }
.mc-card-lift { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.mc-card-lift:hover { transform: translateY(-5px); box-shadow: 0 22px 48px -28px rgba(42,7,12,.45); }
.mc-platform:hover { background: #DDC8B3 !important; color: #2A070C !important; border-color: #DDC8B3 !important; }
.mc-input:focus { border-color: #B0895F !important; box-shadow: 0 0 0 3px rgba(176,137,95,.15) !important; }

.mc-mobtoggle { display: none; }
@media (max-width: 860px) {
  .mc-desktop-nav { display: none !important; }
  .mc-mobtoggle { display: inline-flex !important; }
  .mc-grid-2, .mc-grid-3 { grid-template-columns: 1fr !important; }
}

/* ---- Chapter hub: tabs + study blocks ---- */
.mc-tabbar { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid #E4D8C6; }
.mc-tab {
  background: none; border: none; cursor: pointer; padding: 14px 20px;
  font-family: 'Raleway', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 1.5px;
  text-transform: uppercase; color: #9F8E87; position: relative; transition: color .25s;
}
.mc-tab:hover { color: #2A070C; }
.mc-tab.is-active { color: #2A070C; }
.mc-tab.is-active::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 2px; background: #B0895F; }
.mc-tabpanel { display: none; animation: mc-rise .5s cubic-bezier(.2,.7,.2,1) both; }
.mc-tabpanel.is-active { display: block; }

.mc-studyblock { background: #FBF8F2; border: 1px solid #E4D8C6; border-radius: 8px; padding: clamp(26px,4vw,40px); }
.mc-flashcard {
  background: #FBF8F2; border: 1px solid #E4D8C6; border-radius: 8px; padding: 30px 28px; cursor: pointer;
  min-height: 150px; display: flex; align-items: center; justify-content: center; text-align: center;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.mc-flashcard:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -26px rgba(42,7,12,.4); border-color: #DDC8B3; }
.mc-flashcard .mc-fc-back { display: none; }
.mc-flashcard.is-flipped .mc-fc-front { display: none; }
.mc-flashcard.is-flipped .mc-fc-back { display: block; }

/* ---- Interactive mind map ---- */
.mc-mind-node { margin: 8px 0; }
.mc-mind-toggle { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: #FBF8F2; border: 1px solid #E4D8C6; border-radius: 6px; padding: 14px 18px; cursor: pointer; font-family: 'Playfair Display', serif; font-weight: 700; font-size: 16px; color: #2A070C; transition: background .2s; }
.mc-mind-toggle:hover { background: #F1E8DA; }
.mc-mind-chev { color: #B0895F; font-size: 11px; transition: transform .2s; flex-shrink: 0; }
.mc-mind-node.is-open > .mc-mind-toggle .mc-mind-chev { transform: rotate(90deg); }
.mc-mind-children { display: none; padding-left: 20px; margin: 6px 0 6px 9px; border-left: 1px solid #DDC8B3; }
.mc-mind-node.is-open > .mc-mind-children { display: block; }
.mc-mind-leaf { background: #fff; border: 1px solid #E4D8C6; border-radius: 6px; padding: 11px 16px; margin: 6px 0; font-family: 'Raleway', sans-serif; font-size: 14px; line-height: 1.5; color: #6B5751; }
.mc-mind-sub > .mc-mind-toggle { font-size: 14.5px; background: #fff; }
