/* ============================================================================
   BENTO-STYLE CARD PATTERNS - SITE-WIDE
   Apply the complete bento-style design pattern from home.css to all pages

   Pattern: Cards flip backgrounds between light/dark modes
   - Dark mode: Cards use LIGHT backgrounds (#E8E0D4 cream) with dark text
   - Light mode: Cards use DARK backgrounds (#1A1A1A) with light text
   - Images: Grayscale → Color on hover
   - Content banners: Get gradient overlay on hover
   ========================================================================== */

/* ============================================================================
   PROJECTS PAGE - .project-card Elements
   ========================================================================== */

/* Dark mode: cream cards with dark text */
:root .project-card,
[data-theme="dark"] .project-card {
  background: #E8E0D4;
  border: 1px solid rgba(21, 21, 21, 0.12);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

:root .project-card:hover,
[data-theme="dark"] .project-card:hover {
  border-color: rgba(21, 21, 21, 0.2);
}

/* Light mode: dark cards with light text */
[data-theme="light"] .project-card {
  background: #1A1A1A;
  border: 1px solid rgba(243, 241, 234, 0.12);
}

[data-theme="light"] .project-card:hover {
  border-color: rgba(243, 241, 234, 0.2);
}

/* Project thumbnail - grayscale to color */
.project-thumbnail img {
  filter: grayscale(100%);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), filter 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-card:hover .project-thumbnail img {
  transform: scale(1.03);
  filter: grayscale(0%);
}

/* Project content area - background flip with hover gradient */
:root .project-content,
[data-theme="dark"] .project-content {
  background: #E8E0D4;
}

:root .project-card:hover .project-content,
[data-theme="dark"] .project-card:hover .project-content {
  background: linear-gradient(135deg, rgba(90, 90, 90, 0.7) 0%, rgba(60, 60, 60, 0.8) 100%);
}

[data-theme="light"] .project-content {
  background: #1A1A1A;
}

[data-theme="light"] .project-card:hover .project-content {
  background: linear-gradient(135deg, rgba(243, 241, 234, 0.15) 0%, rgba(239, 238, 231, 0.25) 100%);
}

/* Project text colors - dark mode */
:root .project-type,
:root .project-date,
[data-theme="dark"] .project-type,
[data-theme="dark"] .project-date {
  color: #101010; /* Dark grey on cream bg */
}

:root .project-title,
[data-theme="dark"] .project-title {
  color: #0e0e0e; /* Darkest grey heading on cream bg */
}

:root .project-description,
[data-theme="dark"] .project-description {
  color: #101010; /* Dark grey on cream bg */
}

/* Project text colors - dark mode hover */
:root .project-card:hover .project-title,
[data-theme="dark"] .project-card:hover .project-title {
  color: #F4EEE0; /* Light on hover */
}

:root .project-card:hover .project-type,
:root .project-card:hover .project-date,
:root .project-card:hover .project-description,
[data-theme="dark"] .project-card:hover .project-type,
[data-theme="dark"] .project-card:hover .project-date,
[data-theme="dark"] .project-card:hover .project-description {
  color: #E8E0D4;
}

/* Project text colors - light mode */
[data-theme="light"] .project-type,
[data-theme="light"] .project-date {
  color: #F3F1EA; /* Cream text on dark bg */
}

[data-theme="light"] .project-title {
  color: #FFFDF5; /* Light heading on dark bg */
}

[data-theme="light"] .project-description {
  color: #F3F1EA; /* Cream text on dark bg */
}

/* Project text colors - light mode hover */
[data-theme="light"] .project-card:hover .project-title {
  color: #0e0e0e; /* Dark on hover (when bg goes light) */
}

[data-theme="light"] .project-card:hover .project-type,
[data-theme="light"] .project-card:hover .project-date,
[data-theme="light"] .project-card:hover .project-description {
  color: #101010; /* Dark grey on hover (when bg goes light) */
}

/* Project tags - bento style */
:root .project-tag,
[data-theme="dark"] .project-tag {
  background: rgba(21, 21, 21, 0.08);
  border: 1px solid rgba(21, 21, 21, 0.15);
  color: #101010; /* Dark grey on cream bg */
}

:root .project-card:hover .project-tag,
[data-theme="dark"] .project-card:hover .project-tag {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  color: #F4EEE0; /* Light on gradient hover */
}

[data-theme="light"] .project-tag {
  background: rgba(243, 241, 234, 0.08);
  border: 1px solid rgba(243, 241, 234, 0.15);
  color: #F3F1EA; /* Cream on dark bg */
}

[data-theme="light"] .project-card:hover .project-tag {
  background: rgba(21, 21, 21, 0.4);
  border-color: rgba(21, 21, 21, 0.5);
  color: #0e0e0e; /* Dark on gradient hover */
}

/* ============================================================================
   TUTORIAL PAGE - Card Elements
   ONLY usage cards (Instant Feedback, Lightweight, etc.) should flip
   ========================================================================== */

/* Usage cards - bento flip */
:root .usage-card,
[data-theme="dark"] .usage-card {
  background: #E8E0D4;
  border: 1px solid rgba(21, 21, 21, 0.12);
}

:root .usage-card:hover,
[data-theme="dark"] .usage-card:hover {
  border-color: rgba(21, 21, 21, 0.18);
}

[data-theme="light"] .usage-card {
  background: #1A1A1A;
  border: 1px solid rgba(243, 241, 234, 0.12);
}

[data-theme="light"] .usage-card:hover {
  border-color: rgba(243, 241, 234, 0.18);
}

/* Usage card text - dark mode */
:root .usage-card h4,
[data-theme="dark"] .usage-card h4 {
  color: #0e0e0e; /* Dark heading on cream bg - NO ORANGE */
}

:root .usage-card p,
[data-theme="dark"] .usage-card p {
  color: #101010; /* Dark grey body text on cream bg */
}

/* Usage card text - light mode */
[data-theme="light"] .usage-card h4 {
  color: #FFFDF5; /* Light heading on dark bg - NO ORANGE */
}

[data-theme="light"] .usage-card p {
  color: #F3F1EA; /* Cream body text on dark bg */
}

/* ============================================================================
   COURSES PAGE - .course-card Elements
   ========================================================================== */

/* Course cards - bento flip */
:root .course-card,
[data-theme="dark"] .course-card {
  background: #E8E0D4;
  border: 1px solid rgba(21, 21, 21, 0.12);
}

:root .course-card:hover,
[data-theme="dark"] .course-card:hover {
  background: linear-gradient(135deg, rgba(90, 90, 90, 0.7) 0%, rgba(60, 60, 60, 0.8) 100%);
  border-color: rgba(21, 21, 21, 0.2);
}

[data-theme="light"] .course-card {
  background: #1A1A1A;
  border: 1px solid rgba(243, 241, 234, 0.12);
}

[data-theme="light"] .course-card:hover {
  background: linear-gradient(135deg, rgba(243, 241, 234, 0.15) 0%, rgba(239, 238, 231, 0.25) 100%);
  border-color: rgba(243, 241, 234, 0.2);
}

/* Course card text - dark mode */
:root .course-card h3,
[data-theme="dark"] .course-card h3 {
  color: #0e0e0e; /* Dark heading on cream bg */
}

:root .course-card p,
:root .course-card ul,
:root .course-card li,
[data-theme="dark"] .course-card p,
[data-theme="dark"] .course-card ul,
[data-theme="dark"] .course-card li {
  color: #101010; /* Dark grey body text on cream bg */
}

/* Course card text - dark mode hover */
:root .course-card:hover h3,
[data-theme="dark"] .course-card:hover h3 {
  color: #F4EEE0; /* Light on gradient hover */
}

:root .course-card:hover p,
:root .course-card:hover ul,
:root .course-card:hover li,
[data-theme="dark"] .course-card:hover p,
[data-theme="dark"] .course-card:hover ul,
[data-theme="dark"] .course-card:hover li {
  color: #E8E0D4; /* Light on gradient hover */
}

/* Course card text - light mode */
[data-theme="light"] .course-card h3 {
  color: #FFFDF5; /* Light heading on dark bg */
}

[data-theme="light"] .course-card p,
[data-theme="light"] .course-card ul,
[data-theme="light"] .course-card li {
  color: #F3F1EA; /* Cream body text on dark bg */
}

/* Course card text - light mode hover */
[data-theme="light"] .course-card:hover h3 {
  color: #0e0e0e; /* Dark on gradient hover */
}

[data-theme="light"] .course-card:hover p,
[data-theme="light"] .course-card:hover ul,
[data-theme="light"] .course-card:hover li {
  color: #101010; /* Dark grey on gradient hover */
}

/* Coming soon badge - bento style */
:root .coming-soon-badge,
[data-theme="dark"] .coming-soon-badge {
  background: rgba(255, 230, 184, 0.25);
  border: 1px solid var(--primary-accent-dark);
  color: var(--primary-accent-dark);
}

:root .course-card:hover .coming-soon-badge,
[data-theme="dark"] .course-card:hover .coming-soon-badge {
  background: rgba(255, 255, 255, 0.3);
  border-color: #F4EEE0;
  color: #F4EEE0;
}

[data-theme="light"] .coming-soon-badge {
  background: rgba(var(--primary-accent-rgb), 0.15);
  border: 1px solid var(--primary-accent);
  color: var(--primary-accent);
}

[data-theme="light"] .course-card:hover .coming-soon-badge {
  background: rgba(21, 21, 21, 0.4);
  border-color: #1A1A1A;
  color: #1A1A1A;
}

/* ============================================================================
   SHMUP LANDING PAGE - .feature-card Elements
   ========================================================================== */

/* Feature cards - bento flip (override default gradient hover) */
:root .feature-card,
[data-theme="dark"] .feature-card {
  background: #E8E0D4;
  border: 1px solid rgba(21, 21, 21, 0.12);
}

:root .feature-card:hover,
[data-theme="dark"] .feature-card:hover {
  background: linear-gradient(135deg, rgba(90, 90, 90, 0.7) 0%, rgba(60, 60, 60, 0.8) 100%);
  border-color: rgba(21, 21, 21, 0.2);
}

[data-theme="light"] .feature-card {
  background: #1A1A1A;
  border: 1px solid rgba(243, 241, 234, 0.12);
}

[data-theme="light"] .feature-card:hover {
  background: linear-gradient(135deg, rgba(243, 241, 234, 0.15) 0%, rgba(239, 238, 231, 0.25) 100%);
  border-color: rgba(243, 241, 234, 0.2);
}

/* Feature card icons - use same accent color in both themes */
:root .feature-icon,
[data-theme="dark"] .feature-icon,
[data-theme="light"] .feature-icon {
  background: var(--primary-accent); /* Same accent color in both themes */
}

:root .feature-card:hover .feature-icon,
[data-theme="dark"] .feature-card:hover .feature-icon {
  background: #F4EEE0; /* Light bg on hover in dark mode */
}

[data-theme="light"] .feature-card:hover .feature-icon {
  background: #1A1A1A; /* Dark bg on hover in light mode */
}

:root .feature-icon svg,
[data-theme="dark"] .feature-icon svg,
[data-theme="light"] .feature-icon svg {
  fill: #1e1f26; /* Dark icon fill in both themes */
}

:root .feature-card:hover .feature-icon svg,
[data-theme="dark"] .feature-card:hover .feature-icon svg {
  fill: var(--primary-accent); /* Accent color icon on hover */
}

[data-theme="light"] .feature-card:hover .feature-icon svg {
  fill: var(--primary-accent); /* Accent color icon on hover */
}

/* Feature card text - dark mode */
:root .feature-title,
[data-theme="dark"] .feature-title {
  color: #0e0e0e; /* Dark heading on cream bg */
}

:root .feature-description,
[data-theme="dark"] .feature-description {
  color: #101010; /* Dark grey body text on cream bg */
}

/* Feature card text - dark mode hover */
:root .feature-card:hover .feature-title,
[data-theme="dark"] .feature-card:hover .feature-title {
  color: #F4EEE0; /* Light on gradient hover */
}

:root .feature-card:hover .feature-description,
[data-theme="dark"] .feature-card:hover .feature-description {
  color: #E8E0D4; /* Light on gradient hover */
}

/* Feature card text - light mode */
[data-theme="light"] .feature-title {
  color: #FFFDF5; /* Light heading on dark bg */
}

[data-theme="light"] .feature-description {
  color: #F3F1EA; /* Cream body text on dark bg */
}

/* Feature card text - light mode hover */
[data-theme="light"] .feature-card:hover .feature-title {
  color: #0e0e0e; /* Dark on gradient hover */
}

[data-theme="light"] .feature-card:hover .feature-description {
  color: #101010; /* Dark grey on gradient hover */
}

/* ============================================================================
   TESTIMONIALS - Bento Style
   ========================================================================== */

:root .testimonial,
[data-theme="dark"] .testimonial {
  background: #E8E0D4;
  border: 1px solid rgba(21, 21, 21, 0.12);
}

:root .testimonial:hover,
[data-theme="dark"] .testimonial:hover {
  border-color: var(--primary-accent-dark);
}

[data-theme="light"] .testimonial {
  background: #1A1A1A;
  border: 1px solid rgba(243, 241, 234, 0.12);
}

[data-theme="light"] .testimonial:hover {
  border-color: var(--primary-accent);
}

/* Testimonial text - dark mode */
:root .testimonial-text,
[data-theme="dark"] .testimonial-text {
  color: #101010; /* Dark grey body text on cream bg */
}

:root .testimonial-author,
[data-theme="dark"] .testimonial-author {
  color: #0e0e0e; /* Dark heading on cream bg */
}

/* Testimonial text - light mode */
[data-theme="light"] .testimonial-text {
  color: #F3F1EA; /* Cream body text on dark bg */
}

[data-theme="light"] .testimonial-author {
  color: #FFFDF5; /* Light heading on dark bg */
}

/* ============================================================================
   IMAGES - Grayscale to Color Hover (Site-Wide)
   ========================================================================== */

/* Apply to any card-like element with images */
.feature-card img,
.testimonial img,
.usage-card img {
  filter: grayscale(100%);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), filter 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-card:hover img,
.testimonial:hover img,
.usage-card:hover img {
  transform: scale(1.03);
  filter: grayscale(0%);
}

/* ============================================================================
   CARDS PAGE - Link Buttons (Already Bento-Compliant)
   The cards.html page link buttons already follow the bento pattern:
   - They use the accent color background with dark text
   - They have proper contrast and hover states
   - No additional styling needed
   ========================================================================== */

/* Email signup section on cards page - bento style */
.email-signup-section {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
}

/* Dark mode: email inputs on cards page */
:root .email-input,
[data-theme="dark"] .email-input {
  background: #1A1A1A;
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
}

/* Social icons grid - ensure consistency */
.social-icon {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.social-icon:hover {
  border-color: var(--primary-accent);
}

/* ============================================================================
   STATS ELEMENTS - Background Flip (like home page trust-stats)
   Apply to all stat card elements across all pages
   ========================================================================== */

/* Dark mode: cream stat cards with dark text */
:root .trust-stat,
:root .projects-stats .trust-stat,
[data-theme="dark"] .trust-stat,
[data-theme="dark"] .projects-stats .trust-stat {
  background: #E8E0D4;
  border: 1px solid rgba(21, 21, 21, 0.12);
}

:root .trust-stat .trust-number,
:root .projects-stats .trust-number,
[data-theme="dark"] .trust-stat .trust-number,
[data-theme="dark"] .projects-stats .trust-number {
  color: #0e0e0e; /* Dark grey on light bg - NO ORANGE */
}

:root .trust-stat .trust-label,
:root .projects-stats .trust-label,
[data-theme="dark"] .trust-stat .trust-label,
[data-theme="dark"] .projects-stats .trust-label {
  color: #101010; /* Slightly lighter dark grey on light bg */
}

/* Light mode: dark stat cards with light text */
[data-theme="light"] .trust-stat,
[data-theme="light"] .projects-stats .trust-stat {
  background: #1A1A1A;
  border: 1px solid rgba(243, 241, 234, 0.12);
}

[data-theme="light"] .trust-stat .trust-number,
[data-theme="light"] .projects-stats .trust-number {
  color: #FFFDF5; /* Cream white on dark bg - NO ORANGE */
}

[data-theme="light"] .trust-stat .trust-label,
[data-theme="light"] .projects-stats .trust-label {
  color: #F3F1EA; /* Slightly darker cream on dark bg */
}

/* ============================================================================
   PATREON BUTTONS - Site-wide Patreon gradient styling
   Apply only to button-styled elements, not text links
   ========================================================================== */

/* Primary Patreon button styling - matches nav bar */
.btn-patreon,
.btn.patreon,
.btn[data-link="patreon"],
.project-link[data-link="patreon"],
button[data-link="patreon"] {
  background: linear-gradient(135deg, #FF424D 0%, #FF6B35 100%);
  color: #fff;
  border: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-patreon:hover,
.btn.patreon:hover,
.btn[data-link="patreon"]:hover,
.project-link[data-link="patreon"]:hover,
button[data-link="patreon"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  color: #fff;
}

/* Exception: Don't style nav-patreon again (already styled in global.css) */
.nav-patreon {
  /* Keep existing nav-patreon styles */
}