/*
Theme Name: CaseAid
Text Domain: caseaid
Version: 1.0.0
Description: Official WordPress theme for CaseAid.org, migrating the platform to a fully integrated CMS experience.
Author: CaseAid
*/

/* Core WP Alignments */
.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%;
    /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

/* ===================================
   WordPress Overrides for Mobile
   =================================== */

/* Prevent WP admin bar from breaking fixed header positioning */
@media screen and (max-width: 600px) {
    #wpadminbar {
        position: fixed !important;
    }

    html {
        margin-top: 0 !important;
    }

    body.admin-bar header.fixed {
        top: 46px;
    }
}

@media screen and (min-width: 601px) {
    body.admin-bar header.fixed {
        top: 32px;
    }
}

/* Prevent WP block editor global styles from interfering */
body .wp-site-blocks,
body .is-layout-flow,
body .is-layout-constrained {
    all: unset;
}

/* Ensure WP doesn't add unexpected margins/padding */
body {
    margin: 0 !important;
    padding: 0 !important;
    /* Override Tailwind's overflow-x:hidden which breaks position:sticky.
       'clip' still prevents horizontal overflow but doesn't create a scroll container. */
    overflow-x: clip !important;
}

/* Note: Do NOT add .hidden or md:flex !important overrides here.
   Tailwind's app.css already handles these correctly.
   Adding !important would break responsive image swapping. */

/* Mobile menu overlay */
#caseaid-mobile-menu {
    animation: fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Accordion animation overrides for static HTML */
[data-state="closed"][role="region"] {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
}

[data-state="open"][role="region"] {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
}

/* ===================================
   Sticky Section Positioning
   =================================== */
:root {
    --sticky-header-h: 64px;
    --sticky-admin-h: 0px;
    --sticky-tabs-h: 80px;
}

.admin-bar {
    --sticky-admin-h: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar {
        --sticky-admin-h: 46px;
    }
}

/* Impact tabs container */
#impact-tabs-container {
    top: calc(var(--sticky-header-h) + var(--sticky-admin-h));
}

/* Impact sections - stack below tabs */
#discover, #onboard, #host, #measure {
    top: calc(var(--sticky-header-h) + var(--sticky-admin-h) + var(--sticky-tabs-h));
}

/* Virtual Reception title */
#virtual-reception-sticky {
    top: calc(var(--sticky-header-h) + var(--sticky-admin-h));
}

/* Virtual Reception sections - stack below title */
#reception-1, #reception-2 {
    top: calc(var(--sticky-header-h) + var(--sticky-admin-h) + var(--sticky-tabs-h));
}