/* =============================================================================
   SITE-CORE GLOBAL STYLES
   Minimal overrides that inherit from Blocksy where possible
   ============================================================================= */

/* =============================================================================
   1. POST TYPE SPECIFIC COLORS
   ============================================================================= */

.quote-site {
    --theme-accent-color: #ff6600;
    --theme-link-hover-color: #cc5500;
}

.photo-site {
    --theme-accent-color: #0088ff;
    --theme-link-hover-color: #0066cc;
}

.chart-site {
    --theme-accent-color: #8a4fff;
    --theme-link-hover-color: #6b3fcc;
}

/* Force menu items to use section colors */
.quote-site .ct-menu-link:hover,
.quote-site .current-menu-item > a,
.photo-site .ct-menu-link:hover,
.photo-site .current-menu-item > a,
.chart-site .ct-menu-link:hover,
.chart-site .current-menu-item > a {
    color: var(--theme-accent-color) !important;
}

/* Chart-specific styling */
.chart-site .blog-link {
    border-color: #8a4fff;
    color: #8a4fff;
}

.chart-site .blog-link:hover {
    background: #8a4fff;
    box-shadow: 0 4px 12px rgba(138, 79, 255, 0.2);
}

.chart-site .chart-metadata-section {
    border-left-color: #8a4fff;
}

/* =============================================================================
   2. TAG CLOUD - Horizontal layout & styling for photo widget items
   ============================================================================= */

.tag-tag-cloud-container .wp-block-categories-list,
.tag-tag-cloud-container .tagcloud {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.tag-tag-cloud-container li {
    display: inline-block;
    list-style: none;
    margin: 0;
}

.tag-tag-cloud-container a {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    border: 1px solid var(--theme-palette-color-5, #E8E6E1);
    background: var(--theme-palette-color-8, #FFFFFF);
    font-size: 13px;
    line-height: 1.3;
    text-decoration: none;
    color: inherit;
}

/* ============================================================
   3. UNIVERSAL HEADER FILTER UI (DROPDOWN VERSION)
   (Shared by Photo, Quote, and Chart)
   ============================================================ */

/* 1. Outer Wrapper (The "Filter by" Row) */
.dg-filter-container {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 12px 25px;
    background: #ffffff;
    border-bottom: 1px solid #eaeaea;
    margin-bottom: 30px;
    /* Positioned relatively to stay in normal page flow */
    position: relative; 
    /* Lower z-index so main menu dropdowns appear OVER this bar */
    z-index: 10; 
}

/* 2. Heading Label (Filter by:) */
.filter-main-label {
    font-weight: 900;
    font-size: 0.8rem;
    text-transform: uppercase;
    color: #333;
    letter-spacing: 1px;
    white-space: nowrap;
}

/* 3. The Bar holding the Groups (Updated for Submit Button) */
.dg-universal-filter-bar.dropdown-style {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px; /* Slightly tighter gap to fit the button */
    flex-grow: 1;
    justify-content: flex-start;
}

/* Ensure the button and reset link sit together at the end */
.dg-filter-submit-btn, 
.filter-clear-btn {
    flex-shrink: 0;
}

@media (max-width: 1024px) {
    /* On medium screens, let the bar wrap more naturally */
    .dg-universal-filter-bar.dropdown-style {
        gap: 10px;
    }
}

/* 4. Grouping (Label + Select) */
.filter-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.filter-label {
    font-weight: 800;
    font-size: 0.7rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* 5. The Dropdown Menu (Select Element) */
.dg-universal-filter-bar select {
    padding: 6px 30px 6px 12px;
    font-size: 0.85rem;
    font-family: inherit;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f9f9f9;
    color: #333;
    cursor: pointer;
    min-width: 165px; /* Slightly increased for longer labels like "Year Created" */
    max-width: 250px;
    appearance: none; /* Removes default browser arrow */
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg%20xmlns="http://www.w3.org/2000/svg"%20width="292.4"%20height="292.4"><path%20fill="%23888"%20d="M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px top 50%;
    background-size: 10px auto;
    transition: border-color 0.2s;
}

.dg-universal-filter-bar select:hover,
.dg-universal-filter-bar select:focus {
    border-color: #f1c40f; /* Signature Yellow */
    outline: none;
}

/* 6. The Reset Button */
.filter-clear-btn {
    margin-left: auto;
    background: #333;
    color: #fff !important;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: background 0.2s;
}

.filter-clear-btn:hover {
    background: #d9534f; /* Red on hover */
}

/* 7. Mobile Responsiveness */
@media (max-width: 768px) {
    .dg-filter-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        padding: 15px;
    }
    
    .dg-universal-filter-bar.dropdown-style {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group {
        justify-content: space-between;
        width: 100%;
    }

    .dg-universal-filter-bar select {
        max-width: 60%; /* Prevents select box from squishing label on mobile */
        min-width: 0;
    }

    .filter-clear-btn {
        margin-left: 0;
        width: 100%;
        text-align: center;
    }
}

/*  8. ACTIVE FILTER BADGES */

.dg-active-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 0 25px 20px 25px;
    margin-top: -15px; /* Pulls it closer to the filter bar */
}

.badge-label {
    font-size: 0.7rem;
    font-weight: 800;
    color: #bbb;
    text-transform: uppercase;
}

.dg-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f1f1f1;
    border: 1px solid #e0e0e0;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 0.75rem;
    color: #444;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.dg-badge:hover {
    background: #f1c40f; /* Signature Yellow */
    border-color: #f1c40f;
    color: #000;
}

.badge-remove {
    font-weight: 900;
    font-size: 1rem;
    margin-left: 4px;
    color: #999;
}

.dg-badge:hover .badge-remove {
    color: #000;
}

@media (max-width: 768px) {
    .dg-active-badges {
        padding: 0 15px 15px 15px;
    }
}
/* =============================================================================
   3. BACK BUTTON
   ============================================================================= */

.post-type-back-button-container { 
    margin: 25px 0 20px; 
    display: block;
}

.post-type-back-button-container .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* =============================================================================
   4. GALLERY CARD STYLES
   ============================================================================= */

.wp-block-group {
    position: relative;
    overflow: hidden;
}

.wp-block-cover.gallery-hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    background-color: #403B36;
    transition: opacity 0.3s ease;
}

.gallery-acf-image {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
}

.gallery-acf-image img {
    object-fit: contain;
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.wp-block-group:hover .gallery-hover-overlay {
    opacity: 0.7;
}

.wp-block-group:hover .gallery-acf-image img {
    transform: scale(1.05);
}

.wp-block-button {
    position: relative;
    z-index: 3;
    margin-top: 15px;
}

.quote-actions,
.photo-actions,
.chart-actions {
    margin-top: 15px;
    text-align: center;
    width: 100%;
}

/* =============================================================================
   5. VIEW COUNTER
   ============================================================================= */

.image-views {
    display: inline-block !important;
    text-align: center;
    margin-top: 8px !important;
    font-size: 12px !important;
    color: var(--theme-button-text-initial-color, #000000) !important;
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--theme-accent-color, #ff6600) 20%, #fff),
        color-mix(in srgb, var(--theme-accent-color, #ff6600) 30%, #ffd8b2)
    ) !important;
    padding: 3px 10px !important;
    border-radius: 15px !important;
    font-weight: 600 !important;
    border: 1px solid var(--theme-accent-color, #ff9800) !important;
    box-shadow: 0 2px 4px color-mix(in srgb, var(--theme-accent-color, #ff9800) 30%, transparent) !important;
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.image-views-container {
    text-align: left;
    margin-top: 8px;
    width: 100%;
}

/* =============================================================================
   6. PHOTOSWIPE
   ============================================================================= */

.gallery-pswp-link {
    cursor: zoom-in;
    display: block;
}

.gallery-pswp-link:hover {
    opacity: 0.95;
}

.ct-media-container .gallery-pswp-link {
    display: block;
    width: 100%;
    height: 100%;
}

/* =============================================================================
   7. RESPONSIVE FEATURED IMAGES, SINGLE POST IMAGE SHADOWS, BORDERS, AND SIZE
   ============================================================================= */

.single img.wp-post-image:not(.nav-item-next img):not(.nav-item-prev img),
.page img.wp-post-image:not(.nav-item-next img):not(.nav-item-prev img) {
    max-height: 70vh;
    width: auto;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.single .ct-media-container:not(.nav-item-next figure):not(.nav-item-prev figure),
.single .wp-block-post-featured-image:not(.nav-item-next figure):not(.nav-item-prev figure),
.page .ct-media-container:not(.nav-item-next figure):not(.nav-item-prev figure),
.page .wp-block-post-featured-image:not(.nav-item-next figure):not(.nav-item-prev figure) {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 50vh;
}

/* Shadows & Border around the image in sngle post view */
/* First, make sure the container allows shadow to show */
.single-photo .ct-media-container,
.single-quote .ct-media-container,
.single-chart .ct-media-container {
    overflow: visible !important;
    display: flex;
    justify-content: center;
}


/* Shadow for ALL images */
.single-photo .ct-media-container img,
.single-quote .ct-media-container img,
.single-chart .ct-media-container img {
    box-shadow: 0 20px 30px -8px rgba(0, 0, 0, 0.65);
    display: block;
    width: 100%;
    height: auto;
}

/* Subtle border for Photo images only */
.single-photo .ct-media-container img {
    border: 1px solid rgba(0, 0, 0, 0.30);
}

/* Subtle border for Chart images only */
.single-chart .ct-media-container img {
    border: 1px solid rgba(0, 0, 0, 0.30);
}

/* Quote images remain borderless (no additional CSS needed) */

/* Fix image display on mobile for all post types */
@media (max-width: 767px) {
    .single-quote .ct-media-container,
    .single-quote .ct-media-container img,
    .single-quote .wp-block-post-featured-image img,
    .single-photo .ct-media-container,
    .single-photo .ct-media-container img,
    .single-photo .wp-block-post-featured-image img,
    .single-chart .ct-media-container,
    .single-chart .ct-media-container img,
    .single-chart .wp-block-post-featured-image img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        aspect-ratio: auto;
    }
    
    /* Ensure container doesn't restrict image */
    .single-quote .ct-media-container,
    .single-photo .ct-media-container,
    .single-chart .ct-media-container {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

/* =============================================================================
   8. ACF FIELD STYLING
   ============================================================================= */

/* Description/Context */
.description-context-section {
    margin-bottom: 30px;
    padding: 20px;
    background: #f9f9f9;
    border-left: 4px solid #ff6600;
    border-radius: 0 4px 4px 0;
}

.description-context-section h4 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #333;
    font-size: 1.2em;
}

.description-context-text { 
    line-height: 1.6; 
    color: #444; 
}

.description-context-text p { 
    margin-bottom: 15px; 
}

.description-context-text p:last-child { 
    margin-bottom: 0; 
}

/* Blog Links */
.blog-link {
    display: inline-block;
    color: var(--theme-button-text-initial-color, #ff6600);
    text-decoration: none;
    font-weight: 500;
    padding: 8px 16px;
    border: 2px solid var(--theme-button-background-initial-color, #ff6600);
    border-radius: var(--theme-button-border-radius, 6px);
    transition: all 0.3s ease;
    margin: 5px 5px 5px 0;
}

.blog-link:hover {
    background: var(--theme-button-background-hover-color, #ff6600);
    color: var(--theme-button-text-hover-color, white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 102, 0, 0.2);
}

.blog-posts-container { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 10px; 
    margin: 15px 0; 
}

/* Social Media Buttons */
.social-buttons-container { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 10px; 
    margin: 15px 0; 
}

.social-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: var(--theme-button-border-radius, 8px);
    text-decoration: none;
    font-weight: var(--theme-button-font-weight, 600);
    font-size: 14px;
    color: white !important;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    min-width: 100px;
}

.social-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
    opacity: 0.95;
}

.social-instagram { background: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d); }
.social-x { background: #000000; }
.social-youtube { background: #ff0000; }
.social-facebook { background: #1877f2; }
.social-linkedin { background: #0077b5; }
.social-bluesky { background: #0085ff; }
.social-threads { background: #000000; }

/* Photo and Chart metadata sections */
.photo-metadata-section,
.chart-metadata-section {
    margin-bottom: 25px;
    padding: 15px 20px;
    background: #f5f5f5;
    border-radius: 6px;
    border-left: 4px solid #666;
}

.photo-metadata-section p,
.chart-metadata-section p {
    margin: 5px 0;
}

.photo-metadata-section strong,
.chart-metadata-section strong {
    color: #333;
    min-width: 100px;
    display: inline-block;
}

/* Post type specific additional content containers */
.quote-additional-content,
.photo-additional-content,
.chart-additional-content {
    margin-top: 40px;
    border-top: 2px solid #eee;
    padding-top: 30px;
}

/* Data source specific styling */
.data-source {
    margin-top: 10px;
    font-style: italic;
    color: #555;
}

/* Museum Specimen Label */
.museum-specimen-label {
    background: #fff;
    border: 1px solid #e5e5e5;
    padding: 20px;
    margin: -10px auto 30px;
    max-width: 800px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    text-align: center;
}

.specimen-latin-name {
    font-family: "Playfair Display", serif;
    font-size: 1.8rem;
    margin-bottom: 15px;
    color: #111;
    letter-spacing: 0.02em;
}

.specimen-meta-grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    border-top: 1px solid #eee;
    padding-top: 15px;
    font-family: "Inter", sans-serif;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #666;
}

.meta-item strong {
    color: #999;
    margin-right: 5px;
}


/* =============================================================================
   9. TAXONOMY ARCHIVE TITLES
   ============================================================================= */

.photo-taxonomy-subject .page-title,
.photo-taxonomy-region .page-title,
.quote-taxonomy-subject .page-title,
.chart-taxonomy-subject .page-title {
    font-family: "Playfair Display", serif;
    font-size: 2.5rem;
    font-weight: 300;
    letter-spacing: 0.05em;
    text-transform: capitalize;
    text-align: center;
    margin-bottom: 2rem;
    color: #222;
    position: relative;
    padding-bottom: 15px;
}

.photo-taxonomy-subject .page-title::after,
.photo-taxonomy-region .page-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 1px;
    background-color: #ccc;
}

.photo-taxonomy-year .page-title,
.photo-taxonomy-tag .page-title,
.quote-taxonomy-year .page-title,
.quote-taxonomy-tag .page-title {
    font-family: "Playfair Display", serif;
    font-size: 2.2rem;
    font-weight: 300;
    text-align: center;
    letter-spacing: 0.03em;
}

.search-results .page-title {
    font-family: "Playfair Display", serif;
    font-size: 2rem;
    color: #444;
    font-style: italic;
}

/* =============================================================================
   10. UTILITY CLASSES
   ============================================================================= */

.no-data { 
    color: #999; 
    font-style: italic; 
    margin: 10px 0;
}

.ct-search-form {
    display: flex;
    align-items: center;
    width: 100%;
}

.ct-search-input {
    flex: 1;
    min-width: 150px;
}

/* =============================================================================
   11. RESPONSIVE ADJUSTMENTS
   ============================================================================= */

@media (max-width: 768px) {
    .social-button { 
        padding: 8px 16px; 
        font-size: 13px; 
        min-width: 90px; 
    }
    .social-bluesky, 
    .social-threads { 
        min-width: 85px; 
    }
    .description-context-section { 
        padding: 15px; 
    }
    .photo-taxonomy-subject .page-title,
    .photo-taxonomy-region .page-title,
    .quote-taxonomy-subject .page-title,
    .chart-taxonomy-subject .page-title {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .social-button { 
        padding: 6px 12px; 
        font-size: 12px; 
        min-width: 80px; 
    }
    .social-bluesky, 
    .social-threads { 
        min-width: 75px; 
    }
    .photo-taxonomy-subject .page-title,
    .photo-taxonomy-region .page-title,
    .quote-taxonomy-subject .page-title,
    .chart-taxonomy-subject .page-title {
        font-size: 1.6rem;
    }
    .specimen-meta-grid {
        flex-direction: column;
        gap: 10px;
    }
}