/* Base Card Component Styles */

:root {
    /* Base card variables */
    --card-bg: rgba(10, 10, 10, 0);  /* Changed to semi-transparent background */
    --card-text: #e0e0e0;
    --card-border: rgba(255, 255, 255, 0.192);
    --card-shadow: rgba(0, 0, 0, 0.3);
    --card-radius: 8px;
    --card-padding: 15px;
    --card-margin: 15px;
    --card-transition: all 0.3s ease-in-out;
    
    /* Interaction colors */
    --card-hover-shadow: rgba(0, 0, 0, 0.5);
    --highlight-color: var(--circle-primary-color, #D4AF37);
}

/* Base card component - all cards should have these styles */
[class*="-card"], .footer-card, .search-toggle-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: start;
    background-color: var(--card-bg) !important;
    border-radius: var(--card-radius);
    padding: var(--card-padding);
    margin-bottom: var(--card-margin);
    text-align: left;
    transition: var(--card-transition);
    box-shadow: 0 2px 4px var(--card-shadow) !important;
    border: 1px solid var(--card-border);
    z-index: 2;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

/* Header card styles moved to card-header.css */

/* Base transform and shadow effect for all cards when hovered */
[class*="-card"]:not(.navbar-card):not(.header-card):not(.footer-card):hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 16px var(--card-hover-shadow) !important;
    z-index: 3;
}

/* General content cards (non-OS cards) get the selected color on hover */
.content-section:hover,
[class*="-card"]:not(.header-card):not(.footer-card):not(.navbar-card):not(.distro-card):hover,
.distro-card:not(.debian):not(.ubuntu):not(.fedora):not(.arch):not(.mint):not(.gentoo):not(.slackware):not(.pureos):not(.opensuse):not(.manjaro):not(.popos):not(.elementary):not(.zorin):not(.kali):not(.rocky):not(.endeavouros):not(.footer-card):hover {
    border-color: var(--highlight-color) !important;
    background-color: rgba(var(--circle-primary-color-rgb, 212, 175, 55), 0.01) !important;
}

/* Header, navbar and footer hover effects - maintain original styling */
.header-card:hover,
.navbar-card:hover,
.footer-card:hover,
.distro-card.footer-card:hover,
#disktro-card.footer-card:hover,
.guides-section:hover, 
.resource-section:hover {
    border-color: var(--card-border) !important;
    background-color: var(--card-bg) !important;
    transform: none !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
}

/* Hover effect for search container */
.search-toggle-container:hover {
    border-color: var(--card-border) !important;
    background-color: var(--card-bg) !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 16px var(--card-hover-shadow) !important;
    z-index: 10 !important; /* Higher z-index to stay on top */
}

/* Card header - common to all cards */
.card-header {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 6px;
    position: relative;
}

/* Card content area - common to all cards */
.card-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0px;
    margin-top: 0;
    padding-top: 10px;
}

/* Common subtitle style */
.card-subtitle {
    font-size: 14px;
    color: #aaaaaa;
    font-style: italic;
    margin: 0;
    padding: 0 0 8px 0;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    display: block;
}

/* Common title style */
.card-title {
    flex-grow: 1;
    margin: 0;
    font-size: 1.5rem;
}

/* Responsive adjustments for all cards */
@media (max-width: 768px) {
    [class*="-card"], .footer-card, .search-toggle-container {
        padding: 12px;
    }
}

@media (max-width: 576px) {
    [class*="-card"], .footer-card, .search-toggle-container {
        padding: 10px;
    }
    
    .card-content {
        width: 100%;
        box-sizing: border-box;
    }
}

/* Card base styles */
.card,
.distro-card,
.header-card,
.footer-card,
.content-section {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
    will-change: transform, box-shadow, border-color, background-color;
}

/* Make sure all cards have position:relative for proper stacking */
.distro-card,
.header-card,
.search-toggle-container,
.footer-card,
#disktro-card {
    position: relative;
    /* Ensure transitions are short so they don't conflict with ripple animation */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}