/*
 * Light theme for landing CMS pages
 * Imports base styles and adds light theme-specific overrides
 * White background with transparent navbar that turns blue on "Training"
 */

@import 'landing-cms-page-base-bulma.css';

/* Override body gradient background to white for landing-cms pages */
/* Use flexbox to ensure content + footer fill viewport (no white below footer) */
body.has-gradient-background:has(.landing-cms) {
    background: white;
    background-color: white;
    color: black;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Content area grows to fill available space, pushing footer to bottom */
body.has-gradient-background:has(.landing-cms) .landing-cms {
    flex: 1 0 auto;
}

/* Footer stays at bottom */
body.has-gradient-background:has(.landing-cms) footer {
    flex-shrink: 0;
}

/* Transparent navbar for landing pages - let the white show through */
/* Invert navbar text colors for white background: black text with white shadow */
body.has-gradient-background:has(.landing-cms) .navbar a,
body.has-gradient-background:has(.landing-cms) .navbar .navbar-item,
body.has-gradient-background:has(.landing-cms) .navbar .logo-var,
body.has-gradient-background:has(.landing-cms) .navbar .logo-operator {
    color: #222 !important;
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.9);
}

/* Make "Training" in logo blue (info-blue) on landing pages */
body.has-gradient-background:has(.landing-cms) .navbar .logo-key {
    color: #337ab7 !important;
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.9);
}

/* Navbar burger menu icon - make it dark */
body.has-gradient-background:has(.landing-cms) .navbar-burger span {
    background-color: #222 !important;
}

/* When scrolled, revert to dark navbar with normal light text */
body.has-gradient-background:has(.landing-cms) .navbar.navbar-scrolled a,
body.has-gradient-background:has(.landing-cms) .navbar.navbar-scrolled .navbar-item {
    color: #ddd !important;
    text-shadow: none !important;
}

/* Logo "TalkPython" and brackets - normal light text when scrolled */
body.has-gradient-background:has(.landing-cms) .navbar.navbar-scrolled .logo-var,
body.has-gradient-background:has(.landing-cms) .navbar.navbar-scrolled .logo-operator {
    color: #ddd !important;
    text-shadow: none !important;
}

/* ONLY "Training" in logo turns yellow when scrolled */
body.has-gradient-background:has(.landing-cms) .navbar.navbar-scrolled .logo-key {
    color: #f4e04d !important;
    text-shadow: none !important;
    font-weight: normal;
}

/* Navbar burger menu icon - back to light when scrolled */
body.has-gradient-background:has(.landing-cms) .navbar.navbar-scrolled .navbar-burger span {
    background-color: #fff !important;
}

/* Light theme colors - white background with black text */
.landing-cms {
    color: black;
    background-color: white;
}

/* Heading spacing for light theme */
.landing-cms h1 {
    margin-bottom: 20px;
}

.landing-cms h2,
.landing-cms h3 {
    margin-bottom: 16px;
}

/* Override strong/bold text to be black on this white background page */
/* Strong/bold text - exclude links */
.landing-cms strong:not(a):not(a *), .landing-cms b:not(a):not(a *) {
    color: black;
}

/* Table styles for light theme - white/transparent background with borders */
/* High specificity selectors to override CMS inline styles */
/* Using !important here because CMS content may have inline styles */
.landing-cms table {
    background-color: white !important;
    color: black !important;
    border-collapse: collapse !important;
    margin-bottom: 1.5em !important;
    width: 65% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-bottom: 1px solid #ddd !important;
}

.landing-cms table thead,
.landing-cms table tbody,
.landing-cms table tr {
    background-color: transparent;
}

.landing-cms table th,
.landing-cms table td {
    background-color: white;
    color: black;
    border: 1px solid #ddd;
    padding: 8px 12px;
}

.landing-cms table th {
    background-color: #f8f9fa;
    font-weight: 600;
}

.landing-cms table tr:nth-child(even) td {
    background-color: #f8f9fa;
}

.landing-cms table tr:hover td {
    background-color: #f0f0f0;
}

/* Link color - exclude buttons (both Bulma and Bootstrap) */
.landing-cms a:not(.button):not(.btn) {
    color: #337ab7;
}

/* Code and pre elements - light gray backgrounds with dark text */
.landing-cms code {
    background-color: #f5f5f5 !important;
    color: #333333 !important;
    padding: 0.2em 0.4em;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}

.landing-cms pre {
    background-color: #f8f9fa !important;
    color: #2c3e50 !important;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 1.5em !important;
    margin-top: 1.5em !important;
    margin-bottom: 1.5em !important;
    overflow-x: auto;
}

.landing-cms pre code {
    background-color: transparent !important;
    border: none;
    padding: 0;
}

/* Lists - keep them working as they were */
.landing-cms ul,
.landing-cms ol {
    padding-left: 2em;
    margin-bottom: 1.5em;
}

.landing-cms li {
    margin-bottom: 0.5em;
}