/**
 * Species Post Type CSS
 * Species-specific styling for single species pages
 */

/* Import base styles and components */
@import '../base/variables.css';
@import '../base/post-type-base.css';
@import '../utilities/layout.css';
@import '../components/filters.css';
@import '../components/threats.css';
@import '../components/buttons.css';
@import '../components/loading.css';

.species-bootstrap-wrapper {
    font-family: var(--font-family-base);
    margin-top: var(--spacing-xl) !important;
}

/* Species-specific class aliases that use base styles */
.species-hero-section {
    display: flex !important;
    gap: var(--spacing-4xl) !important;
    margin: var(--spacing-3xl) 0 !important;
    align-items: flex-start !important;
}

.species-image-container {
    flex: 0 0 var(--image-size-lg) !important;
}

.species-image-container img {
    width: 100% !important;
    height: auto !important;
    border-radius: var(--border-radius-md) !important;
}

.species-info-container {
    flex: 1 !important;
}

.species-details-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: var(--bg-white) !important;
    border-radius: var(--border-radius-md) !important;
    overflow: hidden !important;
}

.species-details-table tr:nth-child(odd) {
    background: var(--bg-light) !important;
}

.species-details-table tr:nth-child(even) {
    background: var(--bg-white) !important;
}

.species-details-table .species-label {
    width: 200px !important;
    font-weight: var(--font-weight-semibold) !important;
    color: var(--text-primary) !important;
    padding: var(--spacing-md) var(--spacing-xl) !important;
    vertical-align: top !important;
    border: none !important;
}

.species-details-table .species-value {
    color: var(--text-secondary) !important;
    padding: var(--spacing-md) var(--spacing-xl) !important;
    vertical-align: top !important;
    border: none !important;
}

.species-link {
    color: var(--primary-green) !important;
    text-decoration: none !important;
    transition: color var(--transition-fast) !important;
}

.species-link:hover {
    color: var(--primary-green-hover) !important;
    text-decoration: underline !important;
}

.species-description-section {
    margin: var(--spacing-3xl) 0 !important;
    line-height: var(--line-height-loose) !important;
    color: #444 !important;
    font-size: var(--font-size-xl) !important;
}

/* Related Charts Section Headers */
.species-bootstrap-wrapper .related-section h3 {
    color: #000 !important;
    font-size: var(--font-size-xl) !important;
    margin: 0 0 var(--spacing-xl) 0 !important;
    padding: var(--spacing-md) var(--spacing-xl) !important;
    border-radius: 0 !important;
    font-weight: var(--font-weight-semibold) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* Ecoregions - rectangular cards (species-specific feature) */
.ecoregions-section .card {
    border: none !important;
    border-radius: var(--border-radius-md) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-light) !important;
    transition: transform var(--transition-fast) !important;
    background: var(--bg-white) !important;
}

.ecoregions-section .card:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-heavy) !important;
}

.ecoregions-section .card-img-top {
    height: var(--card-height-md) !important;
    object-fit: fill !important;
    width: 100% !important;
}

.ecoregions-section .card-body {
    padding: var(--spacing-lg) !important;
    text-align: center !important;
    color: #fff !important;
    background: #000;
}

.ecoregions-section .card-title {
    font-size: .9rem !important;
    color: #fff !important;
    line-height: var(--line-height-normal) !important;
    margin: 0 !important;
}

/* Habitats - circular images */
.habitats-section .habitat-item {
    text-align: center !important;
    margin-bottom: var(--spacing-xl) !important;
}

.habitats-section .habitat-link {
    text-decoration: none !important;
    color: inherit !important;
    display: block !important;
}

.habitats-section .habitat-image {
    width: var(--image-size-md) !important;
    height: var(--image-size-md) !important;
    border-radius: var(--border-radius-circle) !important;
    object-fit: cover !important;
    margin: 0 auto var(--spacing-sm) !important;
    display: block !important;
    border: 3px solid var(--border-light) !important;
    transition: border-color var(--transition-fast) !important;
}

.habitats-section .habitat-link:hover .habitat-image {
    border-color: var(--primary-green) !important;
}

.habitats-section .habitat-title {
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-semibold) !important;
    color: var(--text-primary) !important;
    line-height: var(--line-height-tight) !important;
    margin: 0 !important;
    text-align: center !important;
}

.habitats-section .habitat-size {
    font-size: var(--font-size-xs) !important;
    color: var(--text-muted) !important;
    margin-top: 2px !important;
}

.habitats-section .habitat-info {
    margin-left: -60px;
    margin-top: var(--spacing-xxl);
}

/* Threats section overrides for species */
.species-bootstrap-wrapper .threats-section .filter-card {
    border: none !important;
}

.species-bootstrap-wrapper .threats-section .form-label {
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-semibold) !important;
    color: var(--text-primary) !important;
    text-transform: uppercase !important;
    letter-spacing: var(--letter-spacing-wide) !important;
    margin-bottom: var(--spacing-xs) !important;
}

.species-bootstrap-wrapper .threats-section .form-select {
    font-size: var(--font-size-md) !important;
    padding: 6px var(--spacing-md) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: var(--border-radius-sm) !important;
}

.species-bootstrap-wrapper .threats-section .result-badge {
    color: #000 !important;
    font-weight: var(--font-weight-semibold) !important;
    font-size: var(--font-size-md) !important;
}

.species-bootstrap-wrapper .threats-section .threat-card {
    background: var(--bg-white) !important;
    border: none !important;
    margin-bottom: var(--spacing-lg) !important;
}

.species-bootstrap-wrapper .threats-section .threat-title {
    font-size: var(--font-size-xl) !important;
    font-weight: var(--font-weight-semibold) !important;
    margin: 0 0 var(--spacing-sm) 0 !important;
    color: #000 !important;
}

.species-bootstrap-wrapper .threats-section .threat-title a {
    color: #000 !important;
    text-decoration: none !important;
}

.species-bootstrap-wrapper .threats-section .threat-title a:hover {
    color: var(--primary-green-hover) !important;
    text-decoration: underline !important;
}

.species-bootstrap-wrapper .threats-section .threat-description {
    font-size: var(--font-size-lg) !important;
    color: var(--text-secondary) !important;
    line-height: var(--line-height-relaxed) !important;
    margin: 0 !important;
}

.species-category-image img {
    width: 280px !important;
    height: auto !important;
    object-fit: fill !important;
}

.species-category-image .card-body {
    text-wrap: nowrap !important;
    text-align: center !important;
    padding: var(--spacing-lg) !important;
}

.species-post-link .card {
    /*margin-bottom: var(--spacing-xl) !important;*/
    border-radius: var(--border-radius-md) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-light) !important;
    transition: transform var(--transition-fast) !important;
}


.species-category-image .card-body:hover {
    text-decoration: underline !important;
}



.species-category-image .card-body {
    color: #fff !important;
    background: #000;
}


.species-post-link {
    margin-bottom: var(--spacing-xl) !important;
}

.species-post-link .card {
    border: none !important;
    border-radius: var(--border-radius-md) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-light) !important;
    transition: transform var(--transition-fast) !important;
    background: var(--bg-white) !important;
    width: 310px !important;

}

.species-post-link .card-body {
    /*padding: var(--spacing-lg) !important;*/
    text-align: center !important;
    text-wrap: nowrap !important;
    padding: var(--spacing-md) !important;
    background: #000;
    color: #fff !important;
}

.species-post-link img {
    width: 100% !important;
    height: 180px !important;
    object-fit: fill !important;
}

.species-card-cover{
    background-size: cover !important;
    background-position-x: center;
    background-position-y: 0;
    height: 250px !important;
    width: 100% !important;
}

.species-post-link .card-body:hover {
    text-decoration: underline !important;
}

.species-post-link .card:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-medium) !important;
    border-color: var(--primary-green) !important;
}

#content{
    width: 100% !important;
}


/* Mobile Responsive */
@media (max-width: 768px) {
    .species-hero-section {
        flex-direction: column !important;
        gap: var(--spacing-xl) !important;
    }

    .species-image-container {
        flex: 1 !important;
    }

    .species-details-table .species-label {
        width: auto !important;
        display: block !important;
        padding-bottom: var(--spacing-xs) !important;
    }

    .species-details-table .species-value {
        display: block !important;
        padding-top: 0 !important;
    }

    .ecoregions-section .card-title {
        font-size: var(--font-size-sm) !important;
    }

    .habitats-section .habitat-image {
        width: var(--image-size-sm) !important;
        height: var(--image-size-sm) !important;
    }

    .habitats-section .habitat-title {
        font-size: var(--font-size-xs) !important;
    }
}