/* Regular weight */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/inter-v20-latin-regular.woff2') format('woff2');
}

/* Semi-bold weight */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./fonts/inter-v20-latin-600.woff2') format('woff2');
}

/* Extra-bold weight */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('./fonts/inter-v20-latin-800.woff2') format('woff2');
}

/*html.dark:root :root {*/
html.dark:root {
    --primary-blue: #60a5fa;      
    --primary-blue-dark: #3b82f6; 
    --secondary-grey: #4b5563;    
    --secondary-grey-dark: #6b7280; 
    --text-dark: #f3f4f6;         
    --text-light: #d1d5db;        
    --background-light: #1f2937;  
    --background-white: #374151;  
    --shadow-light: rgba(255, 255, 255, 0.1);
    --shadow-medium: rgba(255, 255, 255, 0.2);
}

html.dark:root {
    color-scheme: dark !important; 
    filter: none !important;
    -webkit-filter: none !important;
}

html.dark:root body {
    background-color: var(--background-light) !important; 
    color: var(--text-light) !important; 
}

html.dark:root #quiz-container {
    background-color: var(--background-white) !important; 
    box-shadow: 0 25px 50px -12px var(--shadow-light) !important;
}

html.dark:root .bg-indigo-500 {
    background-color: var(--background-white) !important;
    color: var(--text-dark) !important; 
    border-color: var(--primary-blue-dark) !important;
}

html.dark:root header {
    background-color: var(--background-light) !important;
    text-align: center;
    margin-bottom: 0 !important;
    /*box-shadow: 0 4px 6px -1px var(--shadow-light), 0 2px 4px -2px var(--shadow-light) !important;*/
}

html.dark:root header a.text-3xl {
    color: var(--text-dark) !important;
}

html.dark:root #header a:hover {
    color: var(--primary-blue) !important;
}

html.dark:root header p.text-sm {
    color: var(--text-light) !important;
}

html.dark:root header nav a {
    color: var(--text-light) !important; 
}

html.dark:root header nav a:hover {
    color: var(--primary-blue) !important;
}

html.dark:root #next-button,
html.dark:root #stop-quiz-button,
html.dark:root #result-area button:not(#share-button),
html.dark:root .grid-option-button {
    background-color: var(--primary-blue-dark) !important;
    color: var(--color-white) !important;
}

html.dark:root #next-button:hover,
html.dark:root #stop-quiz-button:hover,
html.dark:root #result-area button:not(#share-button):hover,
html.dark:root .grid-option-button:hover {
    background-color: var(--primary-blue) !important;
}

html.dark:root #options-container button  {
    background-color: var(--background-light) !important; 
    color: var(--text-dark) !important;
    border-color: var(--secondary-grey) !important;
}

html.dark:root #options-container button:hover  {
    background-color: var(--secondary-grey) !important;
    color: var(--text-dark) !important;
}

html.dark:root #share-button {
    background-color: var(--primary-blue-dark) !important;
    color: var(--color-white) !important;
}

html.dark:root #share-button:hover {
    background-color: var(--primary-blue) !important;
}

html.dark:root #autoNextToggle {
    background-color: var(--background-light) !important;/*transparent*/
    color: var(--text-dark) !important;
    border-color: var(--secondary-grey) !important;
}

html.dark:root #autoNextToggle.auto-enabled {
    background-color: var(--primary-blue-dark) !important;
    color: var(--text-dark) !important;
    border-color: var(--primary-blue) !important;
}

html.dark:root #quiz-title {
    color: var(--text-dark) !important;
}

html.dark:root #result-area p.text-xl,
html.dark:root #result-area p.text-lg {
    color: var(--text-light) !important;
}

html.dark:root #result-area h2 {
    color: var(--text-dark) !important;
}

html.dark:root #copy-message {
    color: #4ade80 !important;
}

html.dark:root #question-text {
    color: var(--text-dark) !important;
}

html.dark:root #progress-text {
    color: var(--primary-blue) !important;
}

html.dark:root #quiz-container span,
html.dark:root #quiz-container h1,
html.dark:root #quiz-container h2,
html.dark:root #quiz-container h3 {
    color: var(--text-dark) !important; 
}

html.dark:root #options-container .correct,
html.dark:root #options-container .correct:hover,
html.dark:root #options-container .correct.selected,
html.dark:root #options-container .correct.selected:hover {
    background-color: #10B981 !important; 
    color: var(--color-white) !important;
    border: 2px solid #059669 !important;
}
html.dark:root #options-container .incorrect,
html.dark:root #options-container .incorrect:hover,
html.dark:root #options-container .incorrect.selected,
html.dark:root #options-container .incorrect.selected:hover {
    background-color: var(--color-red-500) !important; 
    color: var(--color-white) !important;
    border: 2px solid #DC2626 !important; 
}

html.dark:root .checkmark-icon {
    color: #f59e0b; 
}

html.dark:root footer {
    background-color: var(--background-light) !important;
    color: var(--text-light) !important;
}
html.dark:root footer a {
    color: var(--primary-blue) !important; 
}

html.dark:root #mobileMenu {
    background-color: var(--secondary-grey) !important;
    box-shadow: 0 4px 6px var(--shadow-medium); 
}

html.dark:root #mobileMenu a {
    color: var(--text-dark) !important;
}

html.dark:root #mobileMenu a:hover {
    color: var(--primary-blue) !important;
    background-color: var(--transparent) !important;
}

html.dark:root #header button,
html.dark:root #header svg {
    color: var(--text-dark) !important;
}

html.dark:root #header svg {
    stroke: var(--text-dark) !important;
    fill: var(--text-dark) !important;
}

html.dark:root #header button:hover,
html.dark:root #header svg:hover {
    color: var(--text-dark) !important;
}

html.dark:root #header svg:hover {
    stroke: var(--primary-blue) !important;
    fill: var(--text-dark) !important;
}

html.dark:root #theme-toggle {
    background-color: var(--background-white) !important;
    color: var(--color-gray-200) !important;
}

/*html.dark:root .theme-toggle:hover .theme-toggle-text {
    color: var(--color-secondary-brown) !important; 
}*/

html.dark:root #theme-toggle:hover {
    background-color: var(--primary-blue) !important;
}

/* Dark Mode */
html.dark:root .topBanner {
    background-color: var(--secondary-grey-dark) !important;
    color: var(--text-dark) !important;
}

html.dark:root .mb-8.p-4 {
    background-color: var(--background-light) !important;
    border-color: var(--background-white) !important; 
    /*box-shadow: 0 10px 15px -3px var(--shadow-light) !important;*/
}

html.dark:root #seriesSearch {
    background-color: var(--background-light) !important;
    color: var(--text-dark) !important;
    border-bottom-color: var(--primary-blue-dark) !important; 
}

html.dark:root #seriesSearch::placeholder {
    color: var(--text-dark); 
    opacity: 1;
}

html.dark:root .series-card { 
    background-color: var(--secondary-grey) !important;
    border-top-color: var(--primary-blue-dark) !important;
}

html.dark:root .series-card h3, .series-card p { 
    color: var(--text-dark) !important; 
}

html.dark:root .series-card h3 {
    border-bottom-color: var(--secondary-grey-dark) !important; 
}

html.dark:root .series-card .text-primary-leaf {
    color: var(--primary-blue) !important;
}

html.dark:root .series-card .text-stone-700 {
    color: var(--text-light) !important;
}

html.dark:root .series-card a:hover .group-hover\:text-secondary-brown {
    color: var(--primary-blue) !important;
}

html.dark:root .unpublished-blog-link {
    pointer-events: none;
    cursor: default;
    opacity: 0.7;
}

html.dark:root .unpublished-blog-link .text-primary-leaf {
    color: var(--secondary-grey-dark) !important;
}

html.dark:root .unpublished-blog-link .text-stone-700,
html.dark:root .unpublished-blog-link:hover .group-hover\:text-secondary-brown {
    color: var(--secondary-grey-dark) !important;
}

html.dark:root .unpublished-blog-link div.py-2.px-3:hover {
    background-color: transparent !important;
}

html.dark:root main {
    color: var(--text-light) !important;
}

html.dark:root .mb-8.p-4 header {
    background-color: transparent !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

html.dark:root .mb-8.p-4 {
    background-color: var(--background-white) !important;
    border-color: var(--secondary-grey) !important;
    box-shadow: 0 4px 8px var(--shadow-light) !important;
    color: var(--text-dark) !important;
}

html.dark:root .mb-8.p-4 p {
    color: var(--text-dark) !important;
}

html.dark:root .mb-8.p-4 page-header {
    color: var(--text-dark) !important;
}

html.dark:root .mb-8.p-4 a {
    color: var(--primary-blue) !important;
}

html.dark:root .mb-8.p-4 a:hover {
    color: var(--primary-blue-dark) !important;
}

html.dark:root .button {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 8px var(--shadow-light) !important;
    min-width: 200px;
    max-width: 100%;
    border: 2px solid var(--primary-blue) !important;
    color: var(--primary-blue) !important; /*also defined in mb-8 p-4*/
}

html.dark:root .button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15) !important;
    color: var(--primary-blue-dark) !important; /*also defined in mb-8 p-4*/
}

/*html.dark:root .button {
    background-color: var(--background-light) !important;
    color: var(--color-gray-800);
}*/

html.dark:root .button:hover {
    background-color: var(--background-light) !important;
}

html.dark:root page-header {
    color: var(--text-light) !important;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    font-weight: 600;
    font-size: 2.0rem;
    font-weight: 700;
    text-align: center;
    /*display: block;*/
}

html.dark:root section-header {
    color: var(--text-light) !important;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    font-weight: 600;
    font-size: 1.3rem;
    font-weight: 700;
    display: block;
}

html.dark:root .checkmark-icon {
    color: var(--text-dark);
}

html.dark:root .milestone-alert {
    background-color: #1a4f3d !important;
    color: #4ade80 !important;
    border-color: #4ade80 !important;
}

/* --- Dark Mode Overrides (Using the html.dark selector) --- */
html.dark:root .search-submit-button {
    background-color: var(--primary-blue-dark); /* Leaf Accent */
    color: var(--color-white);
}

html.dark:root .search-submit-button:hover {
    background-color: var(--primary-blue); /* Deep Brown on hover */
}

html.dark:root .search-submit-button:focus {
    /* Ensures the offset border is dark in dark mode */
    box-shadow: 0 0 0 2px var(--color-gray-800), 0 0 0 4px var(--color-primary-leaf);
}

/* --- Dark Mode Overrides for Search Results Card (.search-result-card) --- */

html.dark:root .search-result-card {
    background-color: var(--secondary-grey) !important; 
    /* shadow-xl -> Use a dark mode shadow */
    box-shadow: 0 20px 25px -5px var(--shadow-medium), 0 8px 10px -6px var(--shadow-medium) !important;
    border-top-color: var(--primary-blue-dark) !important; 
}

html.dark:root .search-result-card:hover {
    /* hover:shadow-2xl */
    box-shadow: 0 25px 50px -12px var(--shadow-medium) !important;
}

html.dark:root .search-result-card h3 {
    color: var(--primary-blue) !important;
}

html.dark:root .search-result-card h4 {
    color: var(--text-dark) !important;
}

html.dark:root .search-result-card h4:hover {
    color: var(--primary-blue) !important;
}

html.dark:root .search-result-card p {
    color: var(--text-light) !important;
}

html.dark:root .search-result-card a {
    color: var(--primary-blue) !important;
}

/* --- Dark Mode Overrides (Using the html.dark selector) --- */
html.dark:root .search-submit-button {
    background-color: var(--primary-blue-dark); /* Leaf Accent */
    color: var(--color-white);
}

html.dark:root .search-submit-button:hover {
    background-color: var(--primary-blue); /* Deep Brown on hover */
}

html.dark:root .search-submit-button:focus {
    /* Ensures the offset border is dark in dark mode */
    box-shadow: 0 0 0 2px var(--color-gray-800), 0 0 0 4px var(--color-primary-leaf);
}

html.dark:root .result-summary-text {
    margin-bottom: 1rem; /* This replicates the functionality of mb-4 */
    /* margin-bottom: 1rem; is equivalent to mb-4 */
    color: var(--text-light);
}

/* Add this inside the html.light:root { ... } block in style.css */
html.dark:root #seriesSearch {
    background-color: var(--color-white) !important;
    color: var(--color-gray-800) !important;
}

html.dark:root #searchFormContainer {
    background-color: var(--color-gray-800);
    border-color: var(--color-gray-700);
}

html.dark:root #seriesSearch {
    background-color: var(--color-gray-800) !important;
    color: var(--color-white) !important;
    border-color: var(--color-gray-700) !important;
}

html.dark:root #seriesSearch::placeholder {
    color: var(--color-gray-300);
}

html.dark:root #seriesSearch:focus {
    border-color: var(--color-primary-blue) !important;
}

html.dark:root .last-updated-badge {
    background-color: var(--background-white) !important;
    color: var(--text-dark) !important;
    border: 1px solid var(--secondary-grey) !important;
    box-shadow: 0 1px 2px var(--shadow-light);
}

html.dark:root .last-updated-dot {
    color: #4ade80 !important;
}

html.dark:root a {
    color: var(--primary-blue) !important;
    text-decoration: none;
    font-weight: bold;
}

html.dark:root .footer-policies a {
    color: var(--text-light) !important;
    text-decoration: underline;
}

html.dark:root .coming-soon-container {
    border-color: var(--text-light) !important;
}

html.dark:root .data-table-container {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    max-width: 1000px;
    margin: 0 auto;
    border-collapse: collapse;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background-color: transparent !important; 
    border-radius: 8px;
}
html.dark:root .data-table-container th, 
html.dark:root .data-table-container td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--text-light) !important; 
    font-size: 14px;
}
html.dark:root .data-table-container th {
    background-color: transparent;
    color: var(--primary-blue);
    font-weight: 800;
    text-align: left;
    padding: 12px 16px;
    border-bottom: 2px solid var(--primary-blue-dark);
    border-right: 1px solid transparent;
    text-transform: uppercase;
}
}

html.dark:root .data-table-container td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--text-light);
    border-right: 1px solid var(--text-light);
    color: var(--primary-blue);
    vertical-align: top;
}