/* ==================
   MMPC PEST LIBRARY
===================== */

.pest-container { 
    max-width: 900px; 
    margin: 0 auto; 
    padding: 0 20px; 
    width: 100%; 
    box-sizing: border-box;
}

/* --- TYPOGRAPHY (Matched to service-landing.css) --- */
.pest-hero-headline {
    margin-top: 0;
    margin-bottom: 1.5rem;
    color: #184343;
}

.pest-hero-intro {
    font-size: 1.125rem;
    line-height: 1.5625rem;
    color: #184343;
    margin-top: 0;
}

.pest-section-header h2 {
    font-size: 2.5rem; 
    font-weight: 300; 
    line-height: 1.1;
    margin-bottom: 1.5rem; 
    color: #184343;
}

.pest-fact-text p,
.pest-id-text p,
.pest-hub-hero-content p,
.o-drawer-section__content p {
    font-size: 1.125rem;
    line-height: 1.5625rem;
    color: #184343;
}

/* Strip unwanted top/bottom margins from global theme */
.pest-fact-text > *:first-child,
.pest-id-text > *:first-child {
    margin-top: 0 !important;
}

.pest-fact-text > *:last-child,
.pest-id-text > *:last-child {
    margin-bottom: 0 !important;
}

/* --- DYNAMIC HIGHLIGHT MARKERS --- */
.pest-marker-dynamic,
.pest-scientific-name {
    display: inline-block;
    background: linear-gradient(transparent 55%, #53dc31 55%);
    padding: 0 6px 0 2px;
    color: #184343;
    transition: background 0.3s ease;
}

.pest-marker-dynamic:hover,
a:hover .pest-marker-dynamic {
    background: linear-gradient(transparent 55%, #ffe800 55%);
}

.pest-scientific-name { 
    font-style: italic; 
    font-size: 1.25rem; 
    margin: 0 0 20px 0; 
}

/* --- BREADCRUMBS --- */
.pest-breadcrumbs-wrap { 
    width: 100%; 
    margin-bottom: 20px; 
}

.pest-breadcrumbs { 
    display: inline-flex; 
    align-items: center; 
    flex-wrap: wrap; 
    background-color: #ffffff; 
    padding: 10px 14px 11px; 
    border-radius: 50px; 
    margin: 0; 
    font-size: 0.75rem; 
    text-transform: uppercase; 
    letter-spacing: 0.05em; 
    font-weight: 600; 
}

.pest-breadcrumbs a { 
    color: rgba(24, 67, 67, 0.6); 
    text-decoration: none; 
    display: inline-flex; 
    align-items: center; 
    transition: color 0.2s ease-in-out; 
}

.pest-breadcrumbs a:hover { 
    color: #184343; 
}

.pest-breadcrumbs a::after { 
    content: ""; 
    display: inline-block; 
    width: 4px; 
    height: 4px; 
    border-right: 1.5px solid rgba(24, 67, 67, 0.4); 
    border-top: 1.5px solid rgba(24, 67, 67, 0.4); 
    transform: rotate(45deg); 
    margin: 0 10px 0 8px; 
}

.pest-breadcrumbs span { 
    color: #184343; 
    font-weight: 700; 
}

/* --- SHARED FACTS GRID --- */
.pest-facts-grid,
.pest-control-grid { 
    display: flex; 
    flex-direction: column; 
    gap: 3.5rem; 
    max-width: 880px; 
    margin: 0 auto; 
}

.pest-fact-row { 
    display: flex; 
    align-items: center; 
    gap: 50px; 
}

.pest-fact-row:nth-child(even) { 
    flex-direction: row-reverse; 
}

.pest-fact-media { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
}

.pest-fact-media img { 
    width: 100%; 
    height: auto; 
    display: block; 
    border-radius: 15px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
    object-fit: cover; 
}

.pest-fact-text { 
    flex: 1; 
}

.pest-fact-text.is-full-width { 
    flex: 0 0 100%; 
    max-width: 100%; 
    padding: 2rem 0; 
}

.pest-img-attribution { 
    font-size: 0.85rem; 
    color: #666; 
    font-style: normal; 
    text-align: left; 
    display: block; 
    margin-top: -5px; 
    line-height: 1.4; 
}

/* --- CTA & CONTACT LINKS (Ported from service-landing.css) --- */
.mmpc-contact-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    text-decoration: none;
    font-size: inherit; 
    font-weight: inherit;
    color: #184343;
    transition: color 0.3s ease;
}

.mmpc-contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mmpc-contact-icon svg {
    width: 1.5rem;
    height: auto;
    transition: transform 0.3s ease;
}

.mmpc-contact-link:hover .mmpc-contact-icon svg {
    transform: scale(1.02);
}

.mmpc-contact-icon svg path,
.mmpc-contact-icon svg rect,
.mmpc-contact-icon svg circle {
    fill: #184343;
    transition: fill 0.3s ease;
}

/* =========================================
   HUB TEMPLATE STYLES (pest-library-pages)
========================================= */

.pest-hub-hero {
    position: relative;
    height: 500px; 
    padding: 0 20px; 
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center; 
    text-align: center;
    background-color: #ecf4f7; 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
    
.pest-hub-hero::before,
.pest-bottom-cta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(236, 244, 247, 0.85); /* 85% opacity of the theme's light blue/gray */
    backdrop-filter: grayscale(100%);
    -webkit-backdrop-filter: grayscale(100%);
    z-index: 1;
    pointer-events: none;
}

.pest-hub-hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.pest-hub-hero-content .pest-breadcrumbs-wrap { text-align: center; }
.pest-hub-hero-content .pest-breadcrumbs { justify-content: center; }

.pest-hub-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin-top: 1.5rem;
}
    
.pest-hub-link {
    font-style: italic;
    font-size: 1.25rem;
    text-decoration: none;
}

.pest-hub-section {
    padding: 3.5rem 0;
    background-color: #ffffff;
}
    
.pest-hub-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
}
    
.pest-section-header {
    text-align: center;
    margin-bottom: 3.5rem;
}

.pest-section-header p {
    color: #15973a;
    margin: 0;
}

.pest-species-section {
    background-color: #ecf4f7; 
    padding: 4rem 20px;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    box-sizing: border-box;
}

.pest-species-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px 60px; 
    max-width: 1200px; 
    margin: 0 auto;
}

.pest-species-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 200px;
    text-decoration: none;
}

.pest-species-circle {
    width: 120px;
    height: 120px;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    overflow: hidden;
    transition: transform 0.3s ease;
}
    
.pest-species-card:hover .pest-species-circle { transform: scale(1.15); }

.pest-species-circle img {
    width: 70%;
    height: 70%;
    object-fit: contain;
}

.pest-species-name {
    color: #184343;
    font-size: 1.125rem;
    font-weight: 500;
    margin: 0 0 5px 0;
}

.pest-species-scientific {
    font-size: 0.9rem;
    font-style: italic;
}

/* ACCORDIONS */
.pest-accordion-wrapper { 
    width: 100%; 
    margin-bottom: 4rem; 
}

/* New Floating Media Wrapper */
.pest-accordion-media {
    float: right;
    width: 35%; 
    margin: 0 0 1.5rem 2rem; 
}

.pest-accordion-media img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.pest-accordion-media .pest-img-attribution {
    display: block; 
    font-size: 0.85rem; 
    color: #666; 
    margin-top: 8px;
    text-align: right;
}

/* --- UNLOCK FAQ TEXT WRAPPING (FAILSAFE) --- */
.o-drawer-section__content {
    display: block !important; 
}

.o-drawer-section__content p,
.o-drawer-section__content div {
    max-width: none !important;
    overflow: visible !important;
    display: block !important;
    clear: none !important;
}

/* Clearfix prevents the floating image from spilling out the bottom of the drawer */
.o-drawer-section__content::after {
    content: "";
    display: table;
    clear: both;
}

/* =========================================
   SPECIES TEMPLATE STYLES (pest-library-species)
========================================= */

.pest-hero-section { 
    background-color: #ecf4f7; 
    height: 500px; 
    padding: 0; 
    display: flex;
    align-items: center; 
}

.pest-hero-grid { 
    display: grid; 
    grid-template-columns: 1.5fr 1fr; 
    grid-template-rows: auto 1fr; 
    column-gap: 60px; 
    row-gap: 0; 
}

.pest-hero-grid .pest-breadcrumbs-wrap { 
    grid-column: 1; 
    grid-row: 1; 
    align-self: end; 
}

.pest-hero-left { 
    grid-column: 1; 
    grid-row: 2; 
    align-self: center; 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
}

.pest-hero-image-wrapper { 
    grid-column: 2; 
    grid-row: 1 / span 2; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    width: 100%; 
    position: relative; 
    z-index: 1; 
}

.pest-hero-content { 
    width: 100%; 
    margin: 0; 
}

/* MAGNIFYING GLASS */
.pest-hero-image-wrapper::before { 
    content: ""; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 130px; 
    height: 12px; 
    background-color: #53dc31; 
    transform: translate(-50%, -50%) rotate(135deg) translate(162px, 0); 
    z-index: -1; 
    opacity: 0; 
    transition: opacity 0.2s ease; 
}

.pest-circle-frame { 
    transition: box-shadow 0.2s ease; 
    width: 100%; 
    max-width: 320px; 
    aspect-ratio: 1/1; 
    border-radius: 50%; 
    background-color: #ffffff; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
    overflow: hidden; 
    position: relative; 
    padding: 35px; 
    box-sizing: border-box; 
    cursor: crosshair; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    background-size: contain; 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-origin: content-box; 
    touch-action: none; 
    -webkit-user-select: none; 
    user-select: none; 
}

.pest-hero-image-wrapper:hover .pest-circle-frame,
.pest-hero-image-wrapper:has(.is-zooming) .pest-circle-frame { 
    box-shadow: 0 0 0 12px #53dc31, 0 4px 15px rgba(0,0,0,0.05); 
}

.pest-hero-image-wrapper:hover::before,
.pest-hero-image-wrapper:has(.is-zooming)::before { opacity: 1; }
.pest-circle-frame.is-zooming { background-size: 250%; background-origin: border-box; }

.pest-hero-image { 
    width: 100%; 
    height: 100%; 
    object-fit: contain; 
    display: block; 
    background-color: #ffffff; 
    margin: 0; 
    transition: opacity 0.1s ease-out; 
    pointer-events: none; 
    -webkit-touch-callout: none; 
}

.pest-circle-frame.is-zooming .pest-hero-image { opacity: 0; }

.pest-content-section.l-page-section { 
    padding: 3.5rem 0; 
    background-color: #ffffff; 
    border-bottom: none; 
}
.pest-divided-section { border-top: 1px solid #53dc31; }

/* IDENTIFICATION TABLE */
.pest-id-table { border: 1px solid #bbdde6; border-radius: 8px; overflow: hidden; }
.pest-id-row { display: grid; grid-template-columns: 280px 1fr; border-bottom: 1px solid #bbdde6; }
.pest-id-row:last-child { border-bottom: none; }
.pest-id-visual { border-right: 1px solid #bbdde6; background-color: #f9f9f9; display: flex; align-items: center; justify-content: center; }
.pest-id-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pest-id-visual.pest-size-visual { padding: 30px; gap: 20px; align-items: center; }
.pest-id-visual.pest-size-visual img { width: auto; height: auto; object-fit: contain; box-shadow: none; }
.pest-id-visual.pest-size-visual img.size-ref-img { height: 110px; flex-shrink: 0; }
.pest-id-visual.pest-size-visual img.size-bug-img { height: calc(110px * var(--pest-scale, 1)); flex-shrink: 0; }

.pest-color-swatches { display: flex; flex-wrap: wrap; gap: 12px; width: 100%; height: 100%; padding: 20px; box-sizing: border-box; align-items: center; justify-content: center; }   
.pest-color-swatch { flex: 0 0 auto; width: 65px; height: 80px; border-radius: 8px; border: 1px solid rgba(0,0,0,0.05); box-shadow: 0 4px 10px rgba(0,0,0,0.05); }

.pest-id-visual.pest-features-visual { padding: 30px; display: flex; flex-direction: column; gap: 20px; align-items: center; justify-content: flex-start; }
.pest-feature-img-wrapper { width: 100%; display: flex; flex-direction: column; }
.pest-id-visual.pest-features-visual .pest-feature-img-wrapper img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: 6px; border: 1px solid rgba(0,0,0,0.1); }

.pest-id-text { background-color: #ecf4f7; padding: 30px; display: flex; flex-direction: column; justify-content: center; }   

/* PHOTO GALLERY */
.pest-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pest-photo-item { position: relative; }
.pest-photo-item img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; border-radius: 8px; }
.pest-no-download { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

.pest-photo-item::after { 
    content: attr(data-watermark); 
    position: absolute; bottom: 15px; left: 0; right: 0; 
    text-align: center; color: rgba(255, 255, 255, 0.7); 
    font-size: 12px; font-weight: 500; letter-spacing: 0.5px; 
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8); pointer-events: none; z-index: 10; 
}   

/* LIGHTBOX */
.pest-expandable-img { cursor: zoom-in; transition: opacity 0.2s ease; }
.pest-expandable-img:hover { opacity: 0.8; }

.pest-lightbox { 
    display: none; position: fixed; z-index: 99999; left: 0; top: 0; width: 100%; height: 100%; 
    background-color: rgba(0,0,0,0.9); justify-content: center; align-items: center; 
    padding: 20px; box-sizing: border-box; cursor: zoom-out; 
}
.pest-lightbox.is-open { display: flex; }
.pest-lightbox-content-wrapper { position: relative; display: flex; max-width: 100%; max-height: 90vh; }
.pest-lightbox-content-wrapper img { max-height: 90vh; width: auto; max-width: 100%; display: block; object-fit: contain; border-radius: 4px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.pest-lightbox-watermark { 
    display: none; position: absolute; bottom: 15px; left: 0; right: 0; text-align: center; 
    color: rgba(255, 255, 255, 0.7); font-size: 14px; font-weight: 500; text-shadow: 1px 1px 3px rgba(0,0,0,0.8); 
    z-index: 100000; pointer-events: none; 
}   
.pest-lightbox.is-open .pest-lightbox-watermark { display: block; }
.pest-lightbox-close { position: absolute; top: 20px; right: 30px; color: #fff; font-size: 40px; font-weight: bold; line-height: 1; cursor: pointer; }

/* THEME BORDER FIXES */
.pest-hub-hero ~ .l-content-container .l-page-section,
.pest-hub-hero ~ .l-content-container .l-page-section__inner { border-bottom: none; }

/* =========================================
   NEW BOTTOM CTA MODULE
========================================= */
.pest-bottom-cta {
    position: relative;
    padding: 5rem 20px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    box-sizing: border-box;
}

.pest-cta-inner {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
}

.pest-cta-heading {
    font-size: 2.5rem;
    font-weight: 300;
    color: #184343;
    margin: 0;
}

.pest-cta-body {
    font-size: 1.125rem;
    line-height: 1.6;
    color: #184343;
    margin: 0;
}

.pest-cta-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.pest-cta-button {
    box-shadow: 4px 4px 0px #184343; 
    transition: all 0.2s ease;
    text-transform: uppercase;
    font-weight: 600;
    padding: 12px 35px;
}

.pest-cta-button:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px #184343;
}

.pest-cta-phone-highlight {
    background: linear-gradient(transparent 55%, #ffe800 55%);
    padding: 0 6px 0 2px;
    color: #184343;
    font-weight: 600;
}

/* =========================================
   MOBILE RESPONSIVE (Aligned to 768px break)
========================================= */
@media (max-width: 768px) {
    
    /* Shared Features */
    .pest-hero-headline { font-size: 1.875rem; margin-bottom: 1.5rem; }
    .pest-hero-intro { font-size: 1rem; margin-bottom: 15px; }
    .pest-section-header h2,
    .pest-content-section h2,
    .pest-fact-text h2 {
        font-size: 2.5rem; 
        font-weight: 300; 
        line-height: 1.1;
        margin-bottom: 1.5rem; 
        color: #184343;
    }

    .pest-fact-row, 
    .pest-fact-row:nth-child(even) { flex-direction: column; gap: 20px; }
    .pest-fact-media { width: 100%; }
    .pest-breadcrumbs-wrap { margin-bottom: 0; text-align: center; }
    .pest-breadcrumbs { padding: 10px 14px; }
    
    .mmpc-cta-actions { flex-direction: column; gap: 15px; }
    .mmpc-contact-link { font-size: 1.25rem; gap: .5rem; }

    /* Hub Overrides */
    .pest-hub-hero { min-height: 400px; padding: 2rem 20px; background-attachment: scroll; }
    .pest-hub-section { padding: 3rem 0; }
    
    /* Make the floating image stack neatly on mobile */
    .pest-accordion-media { 
        float: none; 
        width: 100%; 
        margin: 0 0 1.5rem 0; 
    }

    /* Species Overrides */
    .pest-hero-section { height: auto; min-height: 400px; padding: 3rem 0; }
    .pest-hero-grid { grid-template-columns: 1fr; grid-template-rows: auto auto auto; text-align: center; gap: 20px; }
    .pest-hero-image-wrapper { grid-column: 1; grid-row: 2; margin: 20px 0; }       
    .pest-hero-left { grid-column: 1; grid-row: 3; align-items: center; }
    
    .pest-hero-image-wrapper::before { 
        width: 100px; height: 12px; transform: translate(-50%, -50%) rotate(135deg) translate(135px, 0); opacity: 1; 
    }
    .pest-circle-frame { max-width: 250px; box-shadow: 0 0 0 12px #53dc31, 0 4px 15px rgba(0,0,0,0.05); }
    .pest-hero-image { max-width: 100%; }
    
    .pest-id-row { display: flex; flex-direction: column; }
    .pest-id-row:nth-child(odd) { flex-direction: column-reverse; }
    .pest-id-visual { border-right: none; border-top: 1px solid rgba(0,0,0,0.1); height: auto; padding: 30px 20px; }
    .pest-id-text { padding: 20px; }
    
    .pest-photo-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }

    /* CTA Overrides */
    .pest-bottom-cta { padding: 4rem 20px; }
    .pest-cta-heading { font-size: 1.875rem; }
	
	/* --- ABOUT THIS SPECIES MOBILE STACK --- */
    .pest-about-row {
        display: flex !important;
        flex-direction: column-reverse; /* Puts the text above the image */
        gap: 20px;
    }
    
    .pest-about-media {
        float: none !important;
        width: 100% !important;
        margin: 0 0 35px 0 !important;
    }
}

@media (max-width: 480px) { 
    .pest-photo-grid { grid-template-columns: 1fr; } 
}

/* =========================================
   STAGES OR CASTES GRID LAYOUT
========================================= */

/* Force the grid to override the global theme's flex/float settings */
.l-collapsible-grid .mmpc-boxes-wrapper {
    display: grid !important;
    gap: 20px !important;
    width: 100% !important;
}

.l-collapsible-grid.mmpc-grid-cols-3 .mmpc-boxes-wrapper {
    grid-template-columns: repeat(3, 1fr) !important;
}

.l-collapsible-grid.mmpc-grid-cols-4 .mmpc-boxes-wrapper {
    grid-template-columns: repeat(4, 1fr) !important;
}

.l-collapsible-grid__content {
    grid-column: 1 / -1 !important;
    width: 100%;
    border-bottom: none !important; /* Removes the global theme's extra line */
    padding: 0 !important; /* Kills default theme padding */
    margin: 0 !important;  /* Kills default theme margins */
}

/* Removes the global theme's bottom border from the main grid wrapper */
.pest-content-section .l-collapsible-grid {
    border-bottom: none !important;
}

/* Prevents child elements from hijacking the click event so the JS finds the data-trigger */
.pest-sc-title,
.pest-sc-mag {
    pointer-events: none;
}

/* =========================================
   STAGES OR CASTES SECTION
========================================= */

.pest-sc-card {
    width: 100% !important; 
    box-sizing: border-box;
    background-color: #ecf4f7;
    padding: 35px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; 
    text-align: center;
    border-radius: 0;
    height: 100%;
    position: relative; /* <--- ADD THIS LINE */
    transition: all 0.3s ease; 
}

/* Optional: Slight hover effect to indicate it's clickable */
.pest-sc-card:hover {
    background-color: #e2eff3;
}

.pest-sc-title {
    text-transform: uppercase;
    font-size: 1.125rem; /* Increased default size to match service-landing */
    font-weight: 600;
    letter-spacing: 0.05em;
    margin: 0 0 25px 0;
    color: #184343;
    transition: all 0.3s ease; /* Smooth font shrink transition */
}

/* =========================================
   MAGNIFYING GLASS STYLING
========================================= */

.pest-sc-mag {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 6px solid #53dc31;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    margin-bottom: 20px;
    flex-shrink: 0;
    z-index: 1; /* Creates a layering context so we can tuck the handle behind the border */
    transition: all 0.3s ease; /* Smooth image shrink transition */
}

/* Perfect mathematical scale of the flat Hero handle */
.pest-sc-mag::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;  
    height: 6px;  
    background-color: #53dc31;
    transform: translate(-50%, -50%) rotate(135deg) translate(68px, 0); 
    
    border-radius: 0; 
    z-index: -1; 
    transition: all 0.3s ease;
}

.pest-sc-mag img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fills the space completely without stretching rectangular photos */
    position: relative;
    z-index: 2;
    border-radius: 50%; /* Forces the square photo into a perfect circle flush with the border */
}

/* =========================================
   DYNAMIC SHRINK BEHAVIOR (EXPANDED STATE)
========================================= */

/* 1. Hide ALL magnifying glasses when the grid is open */
.l-collapsible-grid:has(.pest-sc-card.is-active) .pest-sc-mag {
    display: none;
}

/* 2. Style the ACTIVE card (dark green background, white text) */
.pest-sc-card.is-active {
    background-color: #184343;
	z-index: 5;
}

.pest-sc-card.is-active .pest-sc-title {
    color: #ffffff;
}

/* 3. Shrink padding of ALL cards when the grid is open */
.l-collapsible-grid:has(.pest-sc-card.is-active) .pest-sc-card {
    padding: 15px 10px;
}

/* 4. Shrink font size and center text vertically for ALL cards when grid is open */
.l-collapsible-grid:has(.pest-sc-card.is-active) .pest-sc-title {
    font-size: 0.85rem;
    margin-bottom: 0; /* Removes the bottom margin since the images are gone */
}

/* =========================================
   EXPANDED TEXT FORMATTING (Drawer)
========================================= */

/* 1. Add the horizontal line under the tabs when expanded */
.l-collapsible-grid:has(.pest-sc-card.is-active) .mmpc-boxes-wrapper {
    border-bottom: 1px solid #184343;
    padding-bottom: 10px;
    position: relative;
}

/* 2. Add the downward-pointing caret to the active tab */
.pest-sc-card.is-active::after {
    content: "";
    position: absolute;
    display: block; 
    left: 50%;
    top: 100%;
    margin: 0; 
    padding: 0;
    transform: translate(-50%, calc(10px - 50%)) rotate(45deg);
    width: 14px;  /* SHRINK FROM 18px TO 14px */
    height: 14px; /* SHRINK FROM 18px TO 14px */
    background-color: #ffffff; 
    border-right: 1px solid #184343;
    border-bottom: 1px solid #184343;
    border-top: 2px solid #ffffff; 
    border-left: 2px solid #ffffff; 
    z-index: 10; /* Bring it safely back to the front */
}

/* 3. Reformat the expanded drawer to match the clean white look */
.pest-sc-expanded-text {
    background-color: transparent;
    padding: 2.5rem 0; /* Reduced from 3.5rem to perfectly match service-landing */
    border: none;
    font-size: 1.125rem;
    line-height: 1.5625rem;
    color: #184343;
}

.pest-sc-expanded-title {
    color: #184343;
    font-size: 1.75rem;
    font-weight: 300;
    margin-top: 0;
    margin-bottom: 1.25rem;
}

/* Strips default margins from the first/last paragraphs */
.pest-sc-expanded-text-col > *:last-child { margin-bottom: 0 !important; }

/* 4. Flex layout to support a side-by-side image if you ever add one */
.pest-sc-expanded-row {
    display: flex;
    align-items: flex-start;
    gap: 50px;
}

.pest-sc-expanded-text-col {
    flex: 1;
}

.pest-sc-expanded-media {
    flex: 1;
}

.pest-sc-expanded-media img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

@media (max-width: 768px) {
    .pest-sc-expanded-row { 
        flex-direction: column; 
        gap: 20px; 
    }
}

/* =========================================
   MOBILE RESPONSIVE TABS (HORIZONTAL SWIPE)
========================================= */

@media (max-width: 768px) {
    /* 1. Inactive State: Stack into a 2-column grid so images aren't squished */
    .l-collapsible-grid.mmpc-grid-cols-4 .mmpc-boxes-wrapper,
    .l-collapsible-grid.mmpc-grid-cols-3 .mmpc-boxes-wrapper {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* 2. Active State: Create a swipeable horizontal row */
    .l-collapsible-grid:has(.is-active) .mmpc-boxes-wrapper,
    .l-collapsible-grid:has(.active) .mmpc-boxes-wrapper {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 20px !important; /* Room for the arrow */
        scrollbar-width: none; /* Hides scrollbar on Firefox */
    }
    
    /* Hides scrollbar on Chrome/Safari/Edge */
    .l-collapsible-grid:has(.is-active) .mmpc-boxes-wrapper::-webkit-scrollbar,
    .l-collapsible-grid:has(.active) .mmpc-boxes-wrapper::-webkit-scrollbar {
        display: none;
    }

    /* 3. Give tabs a fixed width so long words always fit perfectly */
    .l-collapsible-grid:has(.is-active) .l-collapsible-grid__item,
    .l-collapsible-grid:has(.active) .l-collapsible-grid__item {
        flex: 0 0 140px !important; 
        max-width: 140px !important;
        min-width: 140px !important;
    }
}

/* =========================================
   ABOUT THIS SPECIES (WRAPPING LAYOUT)
========================================= */

.pest-about-row {
    display: block !important; 
}

/* Clearfix prevents floated image from spilling out */
.pest-about-row::after {
    content: "";
    display: table;
    clear: both;
}

.pest-about-media {
    float: right;
    width: 35%; /* Keeps it proportional, matching your other media sizes */
    margin: 20px 0 1.5rem 2.5rem; /* Adds breathing room on the left and bottom */
}

.pest-about-media img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 15px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.pest-about-text {
    display: block;
}

.pest-about-text p,
.pest-about-text div {
    max-width: none !important;
    overflow: visible !important;
    display: block !important;
    clear: none !important;
}

/* =========================================
   SPECIES ACCORDION: CUSTOM COLOR OVERRIDES
========================================= */

/* 1. Sets the dividing lines to the light blue */
.pest-species-accordion .o-drawer-section__header,
.pest-species-accordion .o-drawer-section,
.pest-species-accordion .l-page-section__inner {
    border-color: #bbdde6 !important;
}

/* 2. Sets the chevron arrow to the medium blue */
.pest-species-accordion .o-drawer__arrow {
    border-color: #6899ae !important;
    color: #6899ae !important;
}

/* Catches the arrow if your theme draws it using pseudo-elements */
.pest-species-accordion .o-drawer__arrow::before,
.pest-species-accordion .o-drawer__arrow::after {
    background-color: #6899ae !important;
}

/* =========================================
   SECONDARY ACCORDION BUTTON (BREADCRUMB STYLE)
========================================= */

.pest-secondary-btn {
    display: inline-flex;
    align-items: center;
    background-color: #ffe800; 
    color: #184343 !important; 
    padding: 10px 16px 11px;
    border-radius: 50px; 
    font-size: 0.75rem;
    line-height: 1 !important; /* NEW: Forces the internal text height to exactly 12px */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700; 
    text-decoration: none;
    box-shadow: none !important; 
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.pest-secondary-btn:hover {
    transform: translateY(-2px);
    background-color: #f0da00; 
}

/* Draws the vector arrow to match the breadcrumbs exactly */
.pest-secondary-btn::after {
    content: ""; 
    display: inline-block; 
    width: 4px; 
    height: 4px; 
    border-right: 1.5px solid #184343; /* Matches the dark blue text */
    border-top: 1.5px solid #184343; /* Matches the dark blue text */
    transform: rotate(45deg); 
    margin: 0 0 0 8px; 
}