/**
 * Habitats Post Type CSS
 * Habitats-specific styling for single habitat 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';

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

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

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

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

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

.habitat-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;
    margin-bottom: var(--spacing-xl) !important;
}

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

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

.habitat-details-table .habitat-label {
    width: 250px !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;
}

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

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

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

/* Habitat Action Buttons - habitat specific feature */
.habitat-action-buttons {
    display: flex !important;
    gap: var(--spacing-sm) !important;
    flex-wrap: wrap !important;
    margin-top: var(--spacing-lg) !important;
}

.btn-habitat {
    background: var(--primary-green) !important;
    color: var(--text-white) !important;
    padding: 8px var(--spacing-xl) !important;
    border-radius: var(--border-radius-sm) !important;
    text-decoration: none !important;
    font-weight: var(--font-weight-semibold) !important;
    font-size: var(--font-size-lg) !important;
    border: none !important;
    transition: background-color var(--transition-fast) !important;
    display: inline-block !important;
    cursor: pointer !important;
}

.btn-habitat:hover {
    background: var(--primary-green-hover) !important;
    color: var(--text-white) !important;
    text-decoration: none !important;
}

.btn-habitat:focus {
    background: var(--primary-green-hover) !important;
    color: var(--text-white) !important;
    text-decoration: none !important;
    outline: none !important;
    box-shadow: 0 0 0 3px var(--primary-green-focus) !important;
}

.habitat-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 */
.habitat-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;
}

/* Species Section */
.species-section .habitat-species-card {
    /*background: #000 !important;*/
    color: #fff !important;
    border-radius: var(--border-radius-md) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-light) !important;
    transition: transform var(--transition-fast) !important;
    /*height: 100% !important;*/
    width: 310px !important;
}

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

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

.species-section .habitat-species-image {
    width: 100% !important;
    height: var(--card-height-lg) !important;
    object-fit: fill !important;
}

.species-section .habitat-species-title {
    padding: var(--spacing-lg) !important;
    font-size:1rem !important;
    color: #fff !important;
    text-align: center !important;
    line-height: var(--line-height-normal) !important;
    margin: 0 !important;
    background: #000;
}

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

.habitat-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;
}

.habitat-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;
}

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

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

.habitat-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;
}

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

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

.habitat-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;
}

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

.habitat-category-image .card-body {
    text-align: center !important;
    padding: var(--spacing-lg) !important;
    font-size: .85rem;
}

.habitat-archive-post-image .card-body{
    font-size: .85rem;
    height: 100%;
}

.habitat-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;
}


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



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


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

.habitat-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: 280px !important;

}

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

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

.habitat-post-link img {
    width: 280px !important;
    height: 180px !important;
    object-fit: fill !important;
}

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

#content{
    width: 100% !important;
}

/* Species Categories Section */
.species-categories-section .species-category-card {
    cursor: pointer !important;
    transition: all var(--transition-fast) !important;
    text-align: center !important;
    border-radius: var(--border-radius-md) !important;
    background: var(--bg-white) !important;
    box-shadow: var(--shadow-light) !important;
    border: 2px solid transparent !important;
}

.species-categories-section .species-category-card.active {
    color: var(--text-white) !important;
    border-color: var(--primary-green-hover) !important;
}

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

.species-categories-section .species-category-card.active .species-category-title{
    background: var(--primary-green) !important;
    color: var(--text-white) !important;
    border-color: var(--primary-green-hover) !important;
}

.species-categories-section .species-category-image {
    width: 100% !important;
    height: var(--image-size-md) !important;
    object-fit: fill !important;
    border-radius: 4px 4px 0 0;
}

.species-categories-section .species-category-title {
    font-size: var(--font-size-lg) !important;
    font-weight: var(--font-weight-semibold) !important;
    text-align: center !important;
    margin: 0 !important;
    background: #000;
    color: #fff !important;
    border-radius: 0 0 4px 4px !important;
}

.habitat-map-image{
    width: 17% !important;
}

.habitat-label div {
    margin-bottom: -15px !important;
    margin-top: -15px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.habitat-value div {
    margin-top: -15px !important;
}


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

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

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

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

    .habitat-action-buttons {
        justify-content: center !important;
        margin-top: var(--spacing-sm) !important;
    }

    .btn-habitat {
        padding: 6px var(--spacing-md) !important;
        font-size: var(--font-size-md) !important;
    }

    .species-section .col-lg-3 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    .species-section .habitat-species-title {
        font-size: var(--font-size-sm) !important;
        padding: var(--spacing-md) !important;
    }

    .species-section .habitat-species-image {
        height: var(--card-height-sm) !important;
    }
}