/* TALK - CONVERSATION GUIDES LIGHT THEME
   Aligns Conversation Guides with approved Homepage, About, App Check, Respond, and Protect visual system
   Scoped to .talk-page body class only
   Does not affect other pages */

/* Override main page background and text color */
.talk-page {
    background-color: #FFFFFF;
    color: #000000;
}

/* Override dark-theme variables inherited from css/style.css */
.talk-page {
    --bg-white: #FFFFFF;
    --bg-light: #F9F9F9;
    --text-gray: #333333;
    --text-dark: #000000;
    --border-color: #E8E8E8;
}

/* Main container */
.talk-page main.container {
    background-color: #FFFFFF;
    color: #000000;
}

/* Page heading */
.talk-page h1 {
    color: #000000;
}

/* Page subtitle */
.talk-page .subtitle {
    color: #333333;
}

/* Intro text (What kind of conversation do you need help with?) */
.talk-page p[style*="text-align: center"][style*="color: var(--text-gray)"] {
    color: #333333 !important;
}

/* PRIMARY CONVERSATION CARDS */
/* Three full-card links styling */
.talk-page a[href*="/understand"][style*="text-decoration: none"],
.talk-page a[href*="/resources"][style*="text-decoration: none"],
.talk-page a[href*="/understand"][style*="text-decoration: none"] {
    color: inherit;
    text-decoration: none;
}

.talk-page div[style*="background: var(--bg-white)"] {
    background: #FFFFFF !important;
    border-color: #E8E8E8 !important;
}

.talk-page div[style*="background: var(--bg-white)"] h3 {
    color: var(--primary);
}

.talk-page div[style*="background: var(--bg-white)"] p {
    color: #333333;
}

.talk-page div[style*="background: var(--bg-white)"] > div[style*="color: var(--primary)"] {
    color: var(--primary);
}

/* Hover state - preserved through onmouseover handler */
.talk-page div[style*="background: var(--bg-white)"]:hover {
    border-color: var(--primary) !important;
}

/* Focus state for accessibility */
.talk-page a[href*="/understand"],
.talk-page a[href*="/resources"] {
    outline: none;
}

.talk-page a[href*="/understand"]:focus,
.talk-page a[href*="/resources"]:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* SUPPORTING SECTIONS */

/* Other Conversation Starters section - dark background → light */
.talk-page section[style*="background: var(--bg-light)"] {
    background: #F9F9F9 !important;
}

.talk-page section[style*="background: var(--bg-light)"] h2 {
    color: var(--primary);
}

.talk-page section[style*="background: var(--bg-light)"] h3 {
    color: var(--primary);
}

.talk-page section[style*="background: var(--bg-light)"] p {
    color: #333333 !important;
}

/* Border styling on sections */
.talk-page section[style*="border-left: 4px solid var(--secondary)"] {
    border-left-color: var(--secondary);
}

.talk-page div[style*="border-top: 1px solid var(--border-color)"] {
    border-top-color: #E8E8E8 !important;
}

/* Also Part of DigitalCap section - gradient background */
.talk-page section[style*="background: linear-gradient(135deg, rgba(78, 205, 196"] {
    background: linear-gradient(135deg, rgba(78, 205, 196, 0.05) 0%, rgba(78, 205, 196, 0.02) 100%) !important;
}

.talk-page section[style*="background: linear-gradient"] h2 {
    color: var(--primary);
}

.talk-page section[style*="background: linear-gradient"] h3 {
    color: var(--primary);
}

.talk-page section[style*="background: linear-gradient"] p {
    color: #333333 !important;
}

/* CTA/Button-styled links */
.talk-page a.btn,
.talk-page .btn {
    color: inherit;
    text-decoration: none;
}

.talk-page a[href*="/app-check"],
.talk-page a[href*="/guides/"],
.talk-page a[href*="/respond"],
.talk-page a[href*="/protect"] {
    color: #2B7A78;
    text-decoration: underline;
}

.talk-page a[href*="/app-check"]:hover,
.talk-page a[href*="/guides/"]:hover,
.talk-page a[href*="/respond"]:hover,
.talk-page a[href*="/protect"]:hover {
    color: #1a5450;
    text-decoration: underline;
}

.talk-page a[href*="/app-check"]:focus,
.talk-page a[href*="/guides/"]:focus,
.talk-page a[href*="/respond"]:focus,
.talk-page a[href*="/protect"]:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.talk-page a[href*="/app-check"]:visited,
.talk-page a[href*="/guides/"]:visited,
.talk-page a[href*="/respond"]:visited,
.talk-page a[href*="/protect"]:visited {
    color: #2B7A78;
}

/* FOOTER */
.talk-page footer {
    color: #333333;
    background-color: #F9F9F9;
}

.talk-page footer a {
    color: #2B7A78;
    text-decoration: none;
}

.talk-page footer a:hover {
    text-decoration: underline;
}

/* COMPREHENSIVE DARK-THEME VARIABLE OVERRIDES */

/* All text using var(--text-gray) */
.talk-page [style*="color: var(--text-gray)"] {
    color: #333333 !important;
}

.talk-page p[style*="color: var(--text-gray)"] {
    color: #333333 !important;
}

/* Grid and flex layouts */
.talk-page div[style*="display: grid"],
.talk-page div[style*="display: flex"] {
    /* Layout preserved, colors overridden by child selectors */
}

/* RESPONSIVE DESIGN */
@media (max-width: 1024px) {
    .talk-page main.container {
        padding: 1.5rem;
    }

    .talk-page h1 {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .talk-page main.container {
        padding: 1rem;
    }

    .talk-page h1 {
        font-size: 1.8rem;
    }

    .talk-page div[style*="display: grid"][style*="gap: 1.5rem"] {
        gap: 1rem !important;
    }
}

@media (max-width: 480px) {
    .talk-page main.container {
        padding: 0.75rem;
    }

    .talk-page h1 {
        font-size: 1.5rem;
    }

    .talk-page div[style*="display: grid"][style*="gap: 1.5rem"] {
        grid-template-columns: 1fr !important;
    }

    .talk-page section {
        padding: 1.5rem !important;
    }
}