/* Dark Mode Styles for Flex Theme */

/* Self-hosted Plus Jakarta Sans for GDPR compliance */
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/static/fonts/PlusJakartaSans-Variable.ttf') format('truetype-variations');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --text-primary: #333333;
    --text-secondary: #666666;
    --link-color: #D83D19;
    --border-color: #e0e0e0;
    --code-bg: #f5f5f5;
    --transition: background-color 0.3s ease, color 0.3s ease;
}

/* Font System - Plus Jakarta Sans for all typography */
body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 400;
    letter-spacing: -0.005em;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand,
.site-title,
#sitetitle {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 700;
    letter-spacing: -0.015em;
}

h1 {
    font-weight: 800;
}

h2 {
    font-weight: 700;
}

h3, h4 {
    font-weight: 600;
}

code, pre, kbd, samp,
.highlight code,
.codehilite code {
    font-family: 'Plus Jakarta Sans', 'Consolas', 'Courier New', monospace;
    font-weight: 400;
    font-size: 0.9em;
}

/* Better line spacing for readability */
article p,
.page-content p,
.article-content p {
    line-height: 1.6;
}

article ul,
article ol,
.page-content ul,
.page-content ol,
.article-content ul,
.article-content ol {
    line-height: 1.5;
}

article li,
.page-content li,
.article-content li {
    margin-bottom: 0.5em;
}

/* Skip to content link */
.skip-to-content {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--link-color);
  color: white;
  padding: 0.5em 1em;
  text-decoration: none;
  z-index: 100;
}

.skip-to-content:focus {
  top: 0;
}

/* Smooth scroll to anchor */
html {
  scroll-behavior: smooth;
}

#main-content {
  scroll-margin-top: 20px;
  display: block;
}

[data-theme="dark"] {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --link-color: #FF8855;
    --border-color: #404040;
    --code-bg: #2d2d2d;
}

/* Apply theme colors */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: var(--transition);
}

.main-navigation,
.sidebar {
    background-color: var(--bg-secondary);
    transition: var(--transition);
}

a {
    color: var(--link-color);
    transition: var(--transition);
}

code, pre {
    background-color: var(--code-bg);
    transition: var(--transition);
}

.article-content,
.page-content {
    color: var(--text-primary);
}

blockquote {
    border-left-color: var(--link-color);
    color: var(--text-secondary);
}

hr {
    border-color: var(--border-color);
}

/* Dark mode toggle button */
.dark-mode-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--bg-secondary);
    border: 2px solid var(--border-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 1;
    transition: var(--transition);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    z-index: 1000;
    padding: 0;
}

.dark-mode-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.dark-mode-toggle .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
    line-height: 1;
}

[data-theme="light"] .dark-mode-toggle .moon-icon {
    display: flex;
}

[data-theme="light"] .dark-mode-toggle .sun-icon {
    display: none;
}

[data-theme="dark"] .dark-mode-toggle .moon-icon {
    display: none;
}

[data-theme="dark"] .dark-mode-toggle .sun-icon {
    display: flex;
}

/* Improve contrast for dark mode */
[data-theme="dark"] .highlight {
    background-color: var(--code-bg);
}

[data-theme="dark"] img:not(.site-logo) {
    opacity: 0.9;
}

/* Logo container - use fixed light grey background in all modes */
aside > div > a > span {
    background: #f5f5f5 !important;
}

/* Logo image - full opacity in all modes */
.site-logo {
    opacity: 1 !important;
}

[data-theme="dark"] .site-logo {
    opacity: 1 !important;
}

/* Navigation adjustments */
[data-theme="dark"] nav a {
    color: var(--text-primary);
}

[data-theme="dark"] nav a:hover {
    color: var(--link-color);
}

/* Card/box elements */
[data-theme="dark"] .article-card,
[data-theme="dark"] .testimonial {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

/* Footer */
[data-theme="dark"] footer {
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
}

/* Sidebar flexbox layout to push button to bottom */
aside {
    display: flex !important;
    flex-direction: column !important;
}

/* Gratiscoaching button - compact style */
/* This is no longer used for a ribbon, but we'll keep it clean */
.gc-button {
  /* The button is now part of the coach list, no special styling needed here */
}

/* --- ADVANCED STICKY SIDEBAR (DESKTOP) --- */
@media screen and (min-width: 1120px) {
    aside {
        position: -webkit-sticky;
        position: sticky;
        top: 1.5rem;
        align-self: start;
        max-height: calc(100vh - 3rem);
        overflow-y: auto;
        /* No smooth scrolling - JavaScript handles it precisely */
        scroll-behavior: auto;
    }

    /* Hide scrollbar but keep functionality */
    aside::-webkit-scrollbar {
        width: 0px;
        background: transparent;
    }

    main {
        padding-left: 0 !important;
        height: auto !important; /* Override theme's 100vh to allow page scrolling */
    }
}


.container-flex {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping for mobile */
}

/* Fix for narrow article rendering on pages with short content (e.g., 404) */
@media screen and (min-width: 768px) {
    main article {
        width: 100%;
        min-width: 600px; /* Ensure minimum width even with very short content */
    }
    
    /* Ensure article header also maintains width */
    main article header {
        width: 100%;
    }
}

/* Custom responsive override to fix sidebar overlap */
@media screen and (max-width: 1119px) {
    aside {
        width: 100% !important;
        height: auto !important;
        position: static !important;
        max-height: none; /* Reset max-height for mobile */
        overflow-y: visible; /* Reset overflow for mobile */
    }

    main {
        padding-left: 0 !important;
    }

    .coaches-sidebar ul.list {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.8em !important;
        padding: 0 1em !important;
    }

    .coaches-sidebar ul.list li {
        flex: 1 1 150px;
        max-width: 200px;
    }
}


/* ========================================
   BRAND COLOR OVERRIDES (WCAG AA Compliant)
   Override LESS variables with accessible colors
   ======================================== */

/* Override orange color from LESS for light mode */
main a,
article a,
.page-content a,
.article-content a,
button,
.btn,
.tag-cloud a,
blockquote {
    color: #D83D19;
}

main a:hover,
article a:hover,
.page-content a:hover,
.article-content a:hover,
.btn:hover,
.tag-cloud a:hover {
    color: #E84D2A;
}

/* Sidebar links must remain white */
aside a,
aside a:hover {
    color: #ffffff !important;
}

/* Button backgrounds */
.btn,
button:not(.dark-mode-toggle),
.tag-cloud a {
    background-color: #D83D19;
}

.btn:hover,
button:not(.dark-mode-toggle):hover,
.tag-cloud a:hover {
    background-color: #E84D2A;
}

/* Dark mode overrides */
[data-theme="dark"] main a,
[data-theme="dark"] article a,
[data-theme="dark"] .page-content a,
[data-theme="dark"] .article-content a {
    color: #FF8855;
}

[data-theme="dark"] main a:hover,
[data-theme="dark"] article a:hover,
[data-theme="dark"] .page-content a:hover,
[data-theme="dark"] .article-content a:hover {
    color: #FF9966;
}

/* Sidebar links must remain white in dark mode */
[data-theme="dark"] aside a,
[data-theme="dark"] aside a:hover {
    color: #ffffff !important;
}

[data-theme="dark"] .btn,
[data-theme="dark"] button:not(.dark-mode-toggle),
[data-theme="dark"] .tag-cloud a {
    background-color: #FF8855;
}

[data-theme="dark"] .btn:hover,
[data-theme="dark"] button:not(.dark-mode-toggle):hover,
[data-theme="dark"] .tag-cloud a:hover {
    background-color: #FF9966;
}

/* Ensure skip-to-content uses accessible color */
.skip-to-content {
    background: #D83D19;
}

[data-theme="dark"] .skip-to-content {
    background: #FF8855;
}

/* Blockquote border */
blockquote {
    border-left-color: #D83D19;
}

[data-theme="dark"] blockquote {
    border-left-color: #FF8855;
}