/**
 * Tutorial Module Theme Overrides
 * 
 * This file contains ONLY the customizations specific to the Tutorial module.
 * All base styles are inherited from the main static/styles files.
 */

/* || Theme Variables */

:root {
   --bg-main: #F6FFF8;
   --bg-card: #FAFFFE;
   --bg-surface: #F8FFF9;
   --bg-surface-muted: #F0FFF4;
   --bg-surface-strong: #E8F5ED;
   --bg-note-info: #FFE4ED;
   --bg-note-tip: #E8F5E9;
   --bg-note-warning: #FFF3E0;
   --bg-block-quote: #FFF5F7;
   --border-block-quote: #FFE4ED;
   --border-block-warning: #FFB84D;

   --bg-option-1: #48A868;
   --bg-option-2: #5A9FD4;

   --colour-link: #48A868;
   --colour-link-hover: #3D8B56;
   --colour-accent: #48A868;
   --colour-accent-strong: #3D8B56;
   --colour-accent-soft: #E8F5ED;
   --colour-accent-amber: #FFB84D;
   --colour-table-head: #2E7D44;
   --colour-thead: var(--colour-table-head);

   --shadow-card: 0 2px 4px rgba(72, 168, 104, 0.08);
   --shadow-nav: 0 2px 12px rgba(72, 168, 104, 0.1);
   --shadow-soft: 0 8px 24px rgba(72, 168, 104, 0.12);
   --shadow-card-hover: 0 4px 12px rgba(232, 81, 122, 0.15);
   --shadow-item-hover: 0 8px 24px rgba(232, 81, 122, 0.15);
   --shadow-quiz-button: 0 2px 8px rgba(232, 81, 122, 0.2);
   --shadow-quiz-button-hover: 0 8px 20px rgba(232, 81, 122, 0.3);

   --radius-medium: 10px;
   --radius-round: 14px;
   --gradient-soft-sunrise: linear-gradient(135deg, #FBFFFB 0%, #F5FFF7 45%, #FBFFFB 100%);
}

/* || General Styles */

html,
body {
   background: var(--gradient-soft-sunrise);
   color: var(--colour-primary);
   min-height: 100vh;
}

nav {
   background: var(--bg-surface);
   border-bottom: 1px solid var(--border-subtle);
   box-shadow: var(--shadow-nav);
}

nav #nav-logo {
   letter-spacing: -0.02em;
   color: var(--colour-primary);
   font-weight: 700;
}

nav #nav-opt a {
   padding: 8px 16px;
   border-radius: var(--radius-medium);
   background-color: transparent;
   transition: color var(--transition-base), background-color var(--transition-base), box-shadow var(--transition-base);
}

nav #nav-opt a:hover {
   color: var(--colour-accent-strong);
   background-color: var(--colour-accent-soft);
}

nav #nav-opt a#start-learning-btn {
   /* T-FE07 */
   background-color: color-mix(in srgb, var(--colour-accent-amber) 40%, transparent);
   color: var(--colour-primary);
}

nav #nav-opt a#start-learning-btn:hover {
   background-color: color-mix(in srgb, var(--colour-accent-amber) 80%, transparent);
   box-shadow: var(--shadow-quiz-button);
}

nav #nav-opt img {
   padding: 8px;
   border-radius: var(--radius-pill);
   background: var(--bg-surface-muted);
   box-shadow: var(--shadow-card);
   transition: background-color var(--transition-base), transform var(--transition-base);
}

nav #nav-opt img:hover {
   background-color: var(--colour-accent-soft);
   transform: scale(1.08);
   box-shadow: var(--shadow-card-hover);
}

#body {
   max-width: 1200px;
   margin: auto;
   margin-top: calc(var(--nav-height) + 40px);
}

.lesson-item {
   background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-surface-muted) 100%);
   border: 1px solid var(--border-subtle);
   box-shadow: var(--shadow-card);
   border-radius: var(--radius-round);
   transition: all var(--transition-base);
}

.lesson-item:hover {
   transform: translateY(-4px);
   border-color: var(--colour-accent);
   box-shadow: var(--shadow-item-hover);
}

#lesson-container {
   background: var(--bg-card);
   border: 1px solid var(--border-subtle);
   border-radius: var(--radius-round);
   box-shadow: var(--shadow-soft);
   padding: 40px 3vw;
}

#lesson-container .lesson-title {
   color: var(--colour-primary);
   letter-spacing: -0.02em;
   font-weight: 700;
}

#lesson-container h1,
#lesson-container h2,
#lesson-container h3,
#lesson-container h4 {
   color: var(--colour-primary);
}

#lesson-container .note {
   border-radius: var(--radius-medium);
   box-shadow: var(--shadow-card);
}

#lesson-container .note.info {
   border-left-color: var(--colour-accent);
   background: var(--bg-note-info);
}

#lesson-container .note.tip {
   border-left-color: var(--bg-option-1);
   background: var(--bg-note-tip);
}

#lesson-container .note.warning {
   border-left-color: var(--colour-accent-amber);
   background: var(--bg-note-warning);
}

#lesson-container .block.blockquote {
   background: linear-gradient(135deg, var(--bg-block-quote) 0%, var(--colour-surface-white) 100%);
   border-color: var(--border-block-quote);
   border-left-color: var(--colour-accent);
}

#lesson-container .block.warning {
   border-color: var(--border-block-warning);
   box-shadow: var(--shadow-soft);
}

.quiz {
   border-color: var(--border-subtle);
   background: var(--bg-surface);
   box-shadow: var(--shadow-card);
   border-radius: var(--radius-round);
}

.quiz button {
   background: var(--colour-accent);
   box-shadow: var(--shadow-quiz-button);
   font-weight: 600;
   border: none;
   border-radius: var(--radius-medium);
   transition: all var(--transition-base);
   color: var(--colour-text-on-accent);
}

.quiz button:hover {
   background: var(--colour-accent-strong);
   transform: translateY(-2px);
   box-shadow: var(--shadow-quiz-button-hover);
}

.quiz button:disabled {
   background: var(--colour-muted);
   opacity: 0.6;
}

#directory-panel {
   background: var(--bg-surface);
   border: 1px solid var(--border-subtle);
   border-radius: var(--radius-round);
   box-shadow: var(--shadow-card);
   padding: 16px;
}

#lesson-container ruby rt {
   margin-top: 2px;
}