/**
 * Modern Apple-Style Read More Toggle CSS
 * Clean, simple, reliable - guaranteed to work
 * NUCLEAR OVERRIDE - Nothing can block this
 */

/* ============================================================
   CRITICAL: Ensure parent containers don't block content
   ============================================================ */
.container.homepage-intro-container,
div.container.homepage-intro-container,
.homepage-intro-container,
.homepage-intro,
div.homepage-intro {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
    min-height: auto !important;
    position: relative !important;
    z-index: 1 !important;
}

/* ============================================================
   Base state - hidden by default
   ============================================================ */
.intro-hidden,
div.intro-hidden,
#homepage-intro-hidden,
div#homepage-intro-hidden {
    display: none !important;
    opacity: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, max-height 0.4s ease, visibility 0.3s ease !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Collapsed intro paragraphs - hidden by default */
.intro-collapsed,
div.intro-collapsed,
#homepage-intro-collapsed,
div#homepage-intro-collapsed {
    display: none !important;
    opacity: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, max-height 0.4s ease, visibility 0.3s ease !important;
    margin: 0 !important;
    padding: 0 !important;
}

.intro-collapsed.is-visible,
div.intro-collapsed.is-visible,
#homepage-intro-collapsed.is-visible,
div#homepage-intro-collapsed.is-visible {
    display: block !important;
    opacity: 1 !important;
    max-height: 5000px !important;
    overflow: visible !important;
    visibility: visible !important;
    height: auto !important;
    min-height: auto !important;
    width: auto !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}

/* Base state when no class is set - also hidden */
.intro-hidden:not(.is-visible):not(.is-hidden) {
    display: none !important;
    visibility: hidden !important;
}

/* ============================================================
   Visible state - when toggled (NUCLEAR OVERRIDE)
   ============================================================ */
.intro-hidden.is-visible,
div.intro-hidden.is-visible,
#homepage-intro-hidden.is-visible,
div#homepage-intro-hidden.is-visible,
.homepage-intro .intro-hidden.is-visible,
.homepage-intro-container .intro-hidden.is-visible,
.container .intro-hidden.is-visible,
div.homepage-intro div.intro-hidden.is-visible,
/* Also target when NOT is-hidden (in case class toggle fails) */
.intro-hidden:not(.is-hidden),
#homepage-intro-hidden:not(.is-hidden) {
    display: block !important;
    opacity: 1 !important;
    max-height: 5000px !important; /* Large enough for any content */
    overflow: visible !important;
    visibility: visible !important;
    height: auto !important;
    min-height: auto !important;
    width: auto !important;
    position: relative !important;
    z-index: 10 !important;
    margin-top: 20px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* ============================================================
   Hidden state - explicitly hidden
   ============================================================ */
.intro-hidden.is-hidden,
div.intro-hidden.is-hidden,
#homepage-intro-hidden.is-hidden,
div#homepage-intro-hidden.is-hidden {
    display: none !important;
    opacity: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================================
   Ensure parent doesn't interfere
   ============================================================ */
.homepage-intro,
div.homepage-intro {
    position: relative !important;
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
}

/* Toggle button styling - Desktop: Bold */
.read-more-toggle,
.read-more-toggle-intro {
    font-weight: 600;
    display: inline-block;
    margin-top: 12px;
    margin-bottom: 0;
    cursor: pointer;
    color: #007bff;
    transition: color 0.2s ease;
    text-decoration: none;
}

.read-more-toggle:hover,
.read-more-toggle-intro:hover {
    color: #0056b3;
    text-decoration: none;
}

/* Mobile: Unbold read more toggles */
@media (max-width: 767px) {
    .read-more-toggle,
    .read-more-toggle-intro {
        font-weight: 500;
    }
}

/* Toggle placeholder at end of expanded content */
.read-more-toggle-end-placeholder {
    margin-top: 20px;
    margin-bottom: 10px;
}

.read-more-toggle-end-placeholder .read-more-toggle-intro {
    margin-top: 0;
    margin-bottom: 0;
}

/* Mobile-only read more toggle (after first paragraph) */
.read-more-toggle-mobile {
    font-weight: 500; /* Mobile: Unbold */
    display: none;
    margin-top: 12px;
    margin-bottom: 12px;
    cursor: pointer;
    color: #007bff;
    transition: color 0.2s ease;
    text-decoration: none;
}

.read-more-toggle-mobile:hover {
    color: #0056b3;
    text-decoration: none;
}

/* Semantic intro mobile toggle */
.read-more-toggle-semantic-mobile {
    font-weight: 500; /* Mobile: Unbold */
    display: none;
    margin-top: 12px;
    margin-bottom: 0;
    cursor: pointer;
    color: #007bff;
    transition: color 0.2s ease;
    text-decoration: none;
}

.read-more-toggle-semantic-mobile:hover {
    color: #0056b3;
    text-decoration: none;
}

/* Mobile-collapsible semantic intro paragraphs */
.semantic-intro-mobile-collapsed,
#semantic-intro-mobile-collapsed {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Mobile: Show mobile toggle, hide desktop toggle */
@media (max-width: 767px) {
    .read-more-toggle-mobile {
        display: inline-block !important;
    }
    
    /* Show semantic mobile toggle on mobile */
    .read-more-toggle-semantic-mobile {
        display: inline-block !important;
    }
    
    /* Hide desktop toggle on mobile */
    .read-more-toggle {
        display: none !important;
    }
    
    /* Hide semantic intro paragraphs 2-4 initially on mobile */
    .semantic-intro-mobile-collapsed,
    #semantic-intro-mobile-collapsed {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        transition: opacity 0.3s ease, max-height 0.4s ease, visibility 0.3s ease !important;
    }
    
    /* Show semantic intro paragraphs when expanded on mobile */
    .semantic-intro-mobile-collapsed.mobile-expanded,
    #semantic-intro-mobile-collapsed.mobile-expanded {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-height: 5000px !important;
        overflow: visible !important;
        margin-top: 12px !important;
        padding: 0 !important;
    }
    
    /* Hide second paragraph initially on mobile */
    #homepage-intro-mobile-hidden {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Show second paragraph when expanded on mobile */
    #homepage-intro-mobile-hidden.mobile-expanded {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-height: 5000px !important;
        overflow: visible !important;
        margin-top: 12px !important;
        padding: 0 !important;
    }
}

/* Desktop: Show desktop toggle, hide mobile toggle */
@media (min-width: 768px) {
    .read-more-toggle-mobile {
        display: none !important;
    }
    
    /* Hide semantic mobile toggle on desktop */
    .read-more-toggle-semantic-mobile {
        display: none !important;
    }
    
    .read-more-toggle {
        display: inline-block !important;
    }
    
    /* Always show semantic intro paragraphs on desktop */
    .semantic-intro-mobile-collapsed,
    #semantic-intro-mobile-collapsed {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    /* Always show second paragraph on desktop */
    #homepage-intro-mobile-hidden {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-height: none !important;
        overflow: visible !important;
    }
}

/* ============================================================
   CRITICAL: Ensure parent containers don't block moretext2
   ============================================================ */
.seo-text-section,
.seo-text,
div.seo-text,
.container .seo-text {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
    position: relative !important;
}

/* ============================================================
   Second read more toggle (moretext2 and moretext)
   ============================================================ */
.moretext2,
.moretext,
div.moretext2,
span.moretext {
    display: none !important;
    opacity: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, max-height 0.4s ease, visibility 0.3s ease !important;
    margin-top: 20px !important;
}

/* Base state when no class is set - also hidden */
.moretext2:not(.is-visible):not(.is-hidden),
.moretext:not(.is-visible):not(.is-hidden) {
    display: none !important;
    visibility: hidden !important;
}

.moretext2.is-visible,
.moretext.is-visible,
div.moretext2.is-visible,
span.moretext.is-visible,
.moretext2[style*="display: block"],
.moretext2[style*="display:block"],
.moretext[style*="display: inline"],
.moretext[style*="display:inline"],
/* Fallback - when NOT is-hidden */
.moretext2:not(.is-hidden),
.moretext:not(.is-hidden) {
    display: block !important;
    opacity: 1 !important;
    max-height: 5000px !important;
    overflow: visible !important;
    visibility: visible !important;
    height: auto !important;
    width: auto !important;
    position: relative !important;
    z-index: 10 !important;
}

.moretext.is-visible,
span.moretext.is-visible {
    display: inline !important;
}

.moretext2.is-hidden,
.moretext.is-hidden,
div.moretext2.is-hidden,
span.moretext.is-hidden {
    display: none !important;
    opacity: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}