/**
 * Theme Cohesion CSS - February 2026
 *
 * Purpose: Create cohesive professional theme that ties together with site background
 * Colors: Blue/teal palette matching animal background (sky, ocean, nature)
 * Goal: Beautiful, clean, professional with excellent contrast
 */

/* ============================================
   COLOR PALETTE - BLUE/TEAL NATURE THEME
   ============================================ */
:root {
    /* Primary theme colors - blues and teals from site background */
    --theme-primary: #1a5f7a;        /* Deep teal - headers, important elements */
    --theme-secondary: #4a90e2;      /* Sky blue - accents, buttons */
    --theme-accent: #2c91c7;         /* Bright blue - hover states, links */
    --theme-success: #4ECDC4;        /* Turquoise - positive actions */
    --theme-dark: #0d3b4d;           /* Dark blue-gray - deep contrast */

    /* Neutral colors */
    --text-primary: #2d3436;         /* Almost black for body text */
    --text-secondary: #636e72;       /* Gray for secondary text */
    --bg-white: #ffffff;             /* Pure white for cards */
    --bg-light: #f8f9fa;             /* Light gray backgrounds */

    /* Remove coral/red from theme - doesn't match blue nature background */
}

/* ============================================
   LINK COLORS - BLUE THEME (NO RED)
   ============================================ */

/* Body links - replace red hover with blue */
.body-links a:hover {
    color: var(--theme-accent) !important; /* Blue instead of red */
    text-decoration: underline;
}

.refresh-link a:hover {
    color: var(--theme-accent) !important; /* Blue instead of red */
}

.single-url a:hover {
    color: var(--theme-accent) !important; /* Blue instead of red */
}

/* Navigation links - ensure white text, blue hover background */
nav li:hover {
    background: rgba(255, 255, 255, 0.15) !important; /* Slightly more visible */
}

nav li a {
    color: #fff !important;
    transition: all 0.3s ease;
}

nav li a:hover {
    color: #fff !important; /* Keep white, don't change to red */
}

/* ============================================
   PAGE TITLES & SECTION HEADERS - COHESIVE BLUES
   ============================================ */

/* Main page title - dark teal on white for excellent contrast */
.page-title {
    background: var(--bg-white) !important;
    color: var(--theme-primary) !important; /* Dark teal */
    border: 2px solid rgba(26, 95, 122, 0.15) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12) !important;
}

/* Section sub-titles - slightly lighter for hierarchy */
.page-sub-titles {
    background: var(--bg-white) !important;
    color: var(--theme-primary) !important; /* Dark teal */
    border: 2px solid rgba(26, 95, 122, 0.12) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.10) !important;
}

/* H2 headers in content */
.animal-page-content h2 {
    color: var(--theme-primary) !important; /* Dark teal */
}

/* ============================================
   FEATURE LIST - BLUE ACCENTS (NO CORAL)
   ============================================ */

/* Cool Facts list items - replace coral with blue/teal */
.feature-list li {
    border-left: 6px solid var(--theme-secondary) !important; /* Sky blue */
}

.feature-list li:hover {
    border-left-color: var(--theme-primary) !important; /* Dark teal on hover */
}

.feature-list li strong {
    color: var(--theme-primary) !important; /* Dark teal instead of coral */
}

/* ============================================
   QUICK FACTS BOX - BLUE THEME
   ============================================ */

/* Quick Facts table labels - replace coral with dark teal */
.quick-facts-table td:first-child {
    color: var(--theme-primary) !important; /* Dark teal instead of coral */
    font-weight: bold;
}

/* ============================================
   PAGE INTRODUCTION BOX - COHESIVE BLUES
   ============================================ */

.page-introduction {
    background: linear-gradient(135deg, #e3f2fd 0%, #f0f9ff 100%) !important; /* Light blues */
    border-left: 5px solid var(--theme-secondary) !important; /* Sky blue instead of coral */
}

/* ============================================
   CATEGORY NAVIGATION - CONSISTENT WITH THEME
   ============================================ */

.back-to-category {
    background: linear-gradient(135deg, var(--theme-secondary) 0%, var(--theme-success) 100%) !important;
    /* Blue to turquoise gradient instead of red/turquoise */
}

.back-to-category:hover {
    filter: brightness(1.1);
}

/* ============================================
   PARAGRAPH SPACING - READABILITY FIX
   ============================================ */

/* Add proper paragraph breaks for readability */
.animal-page-content p,
.main-box p,
.box1 p,
.box2 p {
    margin-bottom: 1.2rem !important; /* Ensure space between paragraphs */
    line-height: 1.8 !important; /* Comfortable reading */
}

/* Prevent last paragraph from having excess bottom margin */
.animal-page-content p:last-of-type,
.main-box p:last-of-type,
.box1 p:last-of-type,
.box2 p:last-of-type {
    margin-bottom: 0.5rem !important;
}

/* Ensure paragraph spacing even in older content */
p + p {
    margin-top: 1.2rem !important;
}

/* ============================================
   BUTTONS & INTERACTIVE ELEMENTS - BLUE THEME
   ============================================ */

/* Circular navigation buttons - ensure cohesive colors */
.circle-buttons {
    transition: all 0.3s ease;
}

.circle-buttons:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

/* ============================================
   NAVIGATION FIX - REMOVE WHITE BAR
   ============================================ */

/* Remove border that creates white line below navigation */
#top-menu-background {
    border-bottom: none !important;
    border-top: none !important;
}

/* ============================================
   PROFESSIONAL POLISH
   ============================================ */

/* Smooth transitions throughout */
* {
    transition-timing-function: ease-in-out;
}

/* Focus states for accessibility - blue instead of red */
a:focus,
button:focus,
input:focus {
    outline: 3px solid var(--theme-accent) !important;
    outline-offset: 2px;
}

/* Selection color - blue theme */
::selection {
    background: var(--theme-accent);
    color: white;
}

::-moz-selection {
    background: var(--theme-accent);
    color: white;
}

/* ============================================
   MOBILE OPTIMIZATIONS
   ============================================ */

@media (max-width: 768px) {
    /* Ensure good contrast on mobile */
    .page-title {
        font-size: 6vw !important;
        padding: 1.2rem !important;
    }

    .page-sub-titles {
        font-size: 5vw !important;
        padding: 1rem !important;
    }

    /* Ensure paragraph spacing on mobile */
    p {
        margin-bottom: 1rem !important;
    }
}

/* ============================================
   CONTRAST IMPROVEMENTS
   ============================================ */

/* Ensure all text has sufficient contrast */
.main-box,
.box1,
.box2 {
    color: var(--text-primary) !important;
}

/* Links within content - sufficient contrast */
.animal-page-content a,
.main-box a,
.box1 a,
.box2 a {
    color: var(--theme-primary);
    text-decoration: underline;
}

.animal-page-content a:hover,
.main-box a:hover,
.box1 a:hover,
.box2 a:hover {
    color: var(--theme-accent);
}

/* ============================================
   SUMMARY
   ============================================ */

/*
THEME COLORS USED:
- Dark Teal (#1a5f7a): Headers, titles, important text
- Sky Blue (#4a90e2): Buttons, accents, borders
- Bright Blue (#2c91c7): Hover states, links
- Turquoise (#4ECDC4): Success states, positive actions

REMOVED:
- Coral Red (#FF6B6B): Replaced with blues
- Bright Red (#FF0000): Replaced with blue hover states

RESULT:
- Cohesive blue/teal theme matching animal nature background
- Professional appearance with excellent contrast
- Better readability with proper paragraph spacing
- Accessible focus states and color choices
*/