/* ==========================================================================
   Cyber Dimensions OER Toolkit - Theme Enhancement
   ==========================================================================
   This file provides theme-specific enhancements while preserving the
   underlying Bootstrap/Quarto functionality. Works in conjunction with
   the custom.scss theme file.
   ========================================================================== */

/* Import Google Font */
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  /* --------------------------------------------------------------------------
     CORE PALETTE
     Directly sampled from the book cover for brand consistency.
     -------------------------------------------------------------------------- */

  --cd-brown-dark: #594a3d;
  --cd-off-white: #f2f0e6;
  --cd-brown-accent: #736355;

  /* --------------------------------------------------------------------------
     THEME & FUNCTIONAL COLORS
     Assigning core colors to functional roles for clear purpose.
     -------------------------------------------------------------------------- */

  /* Primary Colors (for major UI components like headers, buttons) */
  --color-primary: var(--cd-brown-dark);
  --color-accent: var(--cd-brown-accent);

  /* Background Colors */
  --bg-light: #ffffff;             /* Keep page backgrounds white */
  --bg-dark: var(--cd-brown-dark);  /* For dark-themed sections, like footers or headers */
  --bg-accent: #f8f6f0;             /* A very light off-white for subtle contrast */

  /* Text Colors */
  --text-on-light: var(--cd-brown-dark); /* Default text color for light backgrounds */
  --text-on-dark: var(--cd-off-white);   /* Default text color for dark backgrounds */
  --text-muted: #8a7c6f;                 /* For secondary information, captions, etc. */
  --text-accent: var(--cd-brown-accent); /* For links and interactive text elements */

  /* Border & Divider Colors */
  --border-color: #d1ccc0; /* A neutral color for borders, cards, and dividers */

  /* --------------------------------------------------------------------------
     SEMANTIC UI COLORS
     For UI feedback like alerts, notifications, and validation states.
     These are chosen to be harmonious with the core palette.
     -------------------------------------------------------------------------- */

  --color-success: #5a7d5a; /* A muted, earthy green for success messages */
  --color-warning: #c88a3f; /* A warm, amber/gold for warnings */
  --color-error:   #a94442; /* A desaturated, brick red for errors */
  --color-info:    #4a6e8a; /* A muted, slightly greyish blue for informational messages */

  /* --------------------------------------------------------------------------
     TYPOGRAPHY
     Font families using Work Sans from Google Fonts for consistency
     -------------------------------------------------------------------------- */

  --font-family-sans: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-heading: "Work Sans", var(--font-family-sans);
}

/* ==========================================================================
   TYPOGRAPHY & COLOR OVERRIDES
   ========================================================================== */

/* Force typography and color application */
body, .quarto-container {
  background-color: white;
  color: var(--text-on-light);
  font-family: var(--font-family-sans);
  line-height: 1.6;
}

/* Ensure TOC is visible in right margin */
.quarto-margin-sidebar {
  display: block !important;
  visibility: visible !important;
}

.quarto-margin-sidebar .toc-title {
  color: var(--color-primary) !important;
  font-weight: 600 !important;
}

.quarto-margin-sidebar .toc-actions {
  display: block !important;
}

.quarto-margin-sidebar nav[role="doc-toc"] {
  display: block !important;
}

.quarto-margin-sidebar nav[role="doc-toc"] ul {
  display: block !important;
  list-style: none;
  padding-left: 0;
}

.quarto-margin-sidebar nav[role="doc-toc"] ul li {
  margin-bottom: 0.25rem;
}

.quarto-margin-sidebar nav[role="doc-toc"] ul li a {
  color: var(--text-on-light) !important;
  text-decoration: none;
  display: block;
  padding: 0.25rem 0;
}

.quarto-margin-sidebar nav[role="doc-toc"] ul li a:hover {
  color: var(--color-primary) !important;
  text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading) !important;
  color: var(--color-primary) !important;
  font-weight: 600;
}

/* Override default Quarto styles */
.quarto-title-block .quarto-title h1.title {
  font-family: var(--font-family-heading) !important;
  color: var(--color-primary) !important;
  font-weight: 700;
}

a {
  color: var(--text-accent);
  text-decoration: none;
  transition: opacity 0.2s ease-in-out;
}

a:hover, a:focus {
  text-decoration: underline;
  opacity: 0.8;
}

/* ==========================================================================
   QUARTO BOOK THEME INTEGRATION
   ========================================================================== */

/* Main navigation and TOC styling */
.sidebar-navigation {
  background-color: var(--bg-light);
  border-right: 1px solid var(--border-color);
}

.sidebar-navigation .sidebar-item {
  color: var(--text-on-light);
}

.sidebar-navigation .sidebar-item:hover {
  background-color: var(--bg-accent);
}

.sidebar-navigation .sidebar-item.active {
  background-color: var(--color-primary);
  color: var(--text-on-dark);
}

/* Main content area */
.quarto-container {
  background-color: var(--bg-light);
}

/* Chapter headers and titles */
.content h1.title {
  color: var(--color-primary);
  border-bottom: 2px solid var(--border-color);
  padding-bottom: 0.5rem;
}

/* Part dividers */
.quarto-title-block {
  background-color: var(--bg-accent);
  border-left: 4px solid var(--color-primary);
  padding: 1rem;
  margin-bottom: 2rem;
}

/* Code blocks and syntax highlighting */
.sourceCode {
  background-color: var(--bg-accent);
  border: 1px solid var(--border-color);
  border-radius: 4px;
}

.sourceCode .co { /* comments */
  color: var(--text-muted);
}

.sourceCode .kw { /* keywords */
  color: var(--color-primary);
  font-weight: bold;
}

.sourceCode .st { /* strings */
  color: var(--color-success);
}

/* Figure and table captions */
.figure-caption, .table-caption {
  color: var(--text-muted);
  font-style: italic;
}

/* Cross-references */
.quarto-cross-ref {
  color: var(--text-accent);
  font-weight: 500;
}

.quarto-cross-ref:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Footnotes and citations */
.quarto-footnote-ref, .citation {
  color: var(--text-accent);
  font-size: 0.9em;
}

/* Page navigation */
.page-navigation {
  background-color: var(--bg-accent);
  border-top: 1px solid var(--border-color);
  padding: 1rem 0;
}

.nav-page-previous, .nav-page-next {
  color: var(--text-accent);
  border: 1px solid var(--border-color);
  padding: 0.5rem 1rem;
  border-radius: 4px;
  transition: all 0.2s ease-in-out;
}

.nav-page-previous:hover, .nav-page-next:hover {
  background-color: var(--color-primary);
  color: var(--text-on-dark);
  text-decoration: none;
}

/* Table styling */
.table {
  border-collapse: collapse;
  margin: 1rem 0;
}

.table th {
  background-color: var(--color-primary);
  color: var(--text-on-dark);
  padding: 0.75rem;
  border: 1px solid var(--border-color);
}

.table td {
  padding: 0.75rem;
  border: 1px solid var(--border-color);
}

.table tr:nth-child(even) {
  background-color: var(--bg-accent);
}

/* Blockquotes */
blockquote {
  border-left: 4px solid var(--color-accent);
  background-color: var(--bg-accent);
  padding: 1rem;
  margin: 1rem 0;
  color: var(--text-on-light);
}

blockquote p:last-child {
  margin-bottom: 0;
}

/* Search functionality */
.aa-Form {
  background-color: var(--bg-light);
  border: 1px solid var(--border-color);
}

.aa-Input {
  color: var(--text-on-light);
}

.aa-Panel {
  background-color: var(--bg-light);
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Custom callout styling integration */
.callout {
  margin: 1rem 0;
  padding: 1rem;
  border-radius: 4px;
  border-left: 4px solid;
}

.callout-title {
  font-weight: bold;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
}

.callout-title .fa {
  margin-right: 0.5rem;
}

/* Additional Quarto-specific overrides */
.navbar {
  background-color: var(--bg-dark) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.navbar-brand, .nav-link {
  color: var(--text-on-light) !important;
}

.sidebar nav {
  background-color: white !important;
}

.sidebar .sidebar-title {
  color: var(--color-primary) !important;
  font-weight: 600 !important;
}

.sidebar .sidebar-item a {
  color: var(--text-on-light) !important;
}

.sidebar .sidebar-item a:hover {
  background-color: var(--bg-accent) !important;
  color: var(--color-primary) !important;
}

.sidebar .sidebar-item.active a {
  background-color: var(--color-primary) !important;
  color: var(--text-on-light) !important;
}

/* Override Bootstrap theme colors */
.btn-primary {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

.btn-primary:hover {
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
}

/* Responsive design enhancements */
@media (max-width: 768px) {
  .sidebar-navigation {
    background-color: var(--bg-light);
  }
  
  .quarto-title-block {
    padding: 0.5rem;
  }
  
  .nav-page-previous, .nav-page-next {
    padding: 0.25rem 0.5rem;
    font-size: 0.9em;
  }
}