/* ==========================================================================
   Theme Patch (Non-breaking)
   - Adds theme variables + minimal dark-mode overrides
   - Avoids touching layout/spacing of existing design
   ========================================================================== */

/* 1) Theme tokens (light defaults) */
:root{
  --bg: var(--bg, #ffffff);
  --text: var(--text, #111827);
  --muted: var(--muted, rgba(17,24,39,0.65));
  --surface: var(--surface, #ffffff);
  --surface-2: var(--surface-2, #f3f4f6);
  --border: var(--border, rgba(17,24,39,0.12));
}

/* 2) Dark theme variables (works with JS: html[data-theme="dark"]) */
html[data-theme="dark"]{
  --bg: #0f1115;
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.65);
  --surface: #161a22;
  --surface-2: #1b2030;
  --border: rgba(255,255,255,0.12);
}

/* 3) Apply variables safely */
body{
  background-color: var(--bg);
  color: var(--text);
  transition: background-color .25s ease, color .25s ease;
}

.muted{ color: var(--muted); }

/* 4) Header search fix (prevents button dropping under input) */
.site-header .header-tools{
  display:flex;
  align-items:center;
  gap:10px;
}

.site-header .header-search{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
}

.site-header .header-search input[type="search"],
.site-header .header-search .input{
  height:40px;
  line-height:40px;
  border-radius:14px;
}

.site-header .header-search button,
.site-header .header-search .btn{
  height:40px;
  line-height:40px;
  white-space:nowrap;
  flex:0 0 auto;
}

.site-header .theme-toggle{
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* ==========================================================================
   5) Dark-mode surface fixes (cards stayed white -> fix here)
   Only active in dark mode. Light mode remains untouched.
   ========================================================================== */

html[data-theme="dark"] .card,
html[data-theme="dark"] .site-header,
html[data-theme="dark"] .footer-links a,
html[data-theme="dark"] .tale-card,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu{
  background-color: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}


:root {
    --footer-bg: linear-gradient(61deg,
            rgb(198 216 255) 0%,
            rgb(237 243 255) 49%,
            rgb(211 255 225) 100%);
}
html[data-theme="dark"] {
    --footer-bg: linear-gradient(61deg,
            rgb(18 22 36) 0%,
            rgb(22 28 44) 49%,
            rgb(18 36 28) 100%);
}

/* ==========================================================
   Breadcrumb – Dark Mode Fix
   ========================================================== */

html[data-theme="dark"] .breadcrumb-arrow-list a {
    background: linear-gradient(to right, #1f2433, #191d29);
    color: rgba(255, 255, 255, 0.92);
}

html[data-theme="dark"] .breadcrumb-arrow-list a::after {
    border-left-color: #191d29;
}

html[data-theme="dark"] .breadcrumb-arrow-list a::before {
    border-left-color: #141824;
}

html[data-theme="dark"] .breadcrumb-arrow-list a:hover {
    background: linear-gradient(to right, #262b3d, #20253a);
}

html[data-theme="dark"] .breadcrumb-arrow-list a:hover::after {
    border-left-color: #20253a;
}
/* ==========================================================
   Breadcrumb – Dark Mode Fix
   ========================================================== */

html[data-theme="dark"] .breadcrumb-arrow-list a {
    background: linear-gradient(to right, #1f2433, #191d29);
    color: rgba(255,255,255,0.92);
}

html[data-theme="dark"] .breadcrumb-arrow-list a::after {
    border-left-color: #191d29;
}

html[data-theme="dark"] .breadcrumb-arrow-list a::before {
    border-left-color: #141824;
}

html[data-theme="dark"] .breadcrumb-arrow-list a:hover {
    background: linear-gradient(to right, #262b3d, #20253a);
}

html[data-theme="dark"] .breadcrumb-arrow-list a:hover::after {
    border-left-color: #20253a;
}

/* ==========================================================
   Badge – Dark Mode Fix
   ========================================================== */

html[data-theme="dark"] .badge {
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

/* Card inner muted text */
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .footer-desc,
html[data-theme="dark"] .muted{
  color: var(--muted) !important;
}

/* Inputs */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select{
  background-color: var(--surface-2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Links readability */
html[data-theme="dark"] a,
html[data-theme="dark"] .hero p {
  color: rgba(160, 190, 255, 0.95);
}
html[data-theme="dark"] a:hover{
  color: rgba(190, 210, 255, 0.98);
}

/* Optional: borders used as separators */
html[data-theme="dark"] hr,
html[data-theme="dark"] .hr{
  border-color: var(--border) !important;
}