html {
    font-size: 14px;
    scroll-behavior: smooth;
    @media (max-width: 800px) {
        font-size:12px;
    }
}
/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
    box-sizing: border-box;
}
/* 2. Remove default margin */
* {
    margin: 0;
}

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body {
    /* 3. Add accessible line-height */
    line-height: 1.5;
    /* 4. Improve text rendering */
    -webkit-font-smoothing: antialiased;
    font-size:1.25rem;
    color:#2E3A3D;
}
p {
    margin-bottom:1em;
}
/* 5. Improve media defaults */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}
/* 6. Inherit fonts for form controls */
input, button, textarea, select {
    font: inherit;
}
/* 7. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}
/* 8. Improve line wrapping */
p {
    text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
    margin-bottom:1em;
    font-weight:900;
    color:var(--cacblue);
    line-height:1.2;
}
main :is(h1,h2,h3,h4) {
    text-wrap:pretty;
}
/*
9. Create a root stacking context
*/
#root, #__next {
    isolation: isolate;
}

/* simple overrides */

:root {
    --border : rgba(0,0,0,0.1);
    --radius: 1rem;
    --bigradius: 1.5rem;
    --cacblue: #034759;
    --cacblue2: #006882;
    --cacblue3: #C9DAE2;
    --gap:4rem;
    --biggap:6rem;
    --caclightblue: #C9DAE2;
    --cacwhite: #F6F7F0;
    --bigwidth: 98rem;
    --mainwidth: 71rem;
    --copy: #2E3A3D;
    --link: #006882;
}
body {
    /* grid-template-columns: 1fr min(80rem, 90%) 1fr; */
    display:block; /* negates grid above for now 
    /* grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    min-height: 100dvh; */
    font-family:"museo-sans", Arial, Helvetica, sans-serif;
    background:var(--cacwhite);
    font-weight:400;
}
input {
    width:100%;
}
aside {
    float:none;
    width:auto;
    margin-inline-start:0px;
    padding:var(--gap);
    font-size:inherit;
}
aside#messages {
    padding:0px;
    margin:0px;
}
section {
    margin:0px;
    border-bottom:none;
    padding:0px;
}
section:first-of-type {
    margin-bottom:0px;
}
button, .button {
    margin-bottom:0px;
}
img, video {
    border-radius:0%;
}

h1 {
    font-size:4.375rem;
}
h2 {
    font-size:3.125rem;
}

h4 {
    font-size:1.56rem;
}
p {
    font-size:1.25rem;
    font-weight:400;
    line-height:1.5;
    color:var(--copy);
}

/* nav

<section id='desktop_nav'>
        <div class="contain">
            <div class="frosty">
                <div class="flex">
                    <a class='logo' href='/'>
                        <img src='/assets/images/cac-logo-white.png' alt='Childrens Advocacy Center Logo'>
                    </a>
                    <?php CMS::Instance()->render_widgets('Top Nav');?>
                </div>
            </div>
        </div>
    </section>

    */


.flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.contain {
    max-width: var(--bigwidth);
    margin:0 auto;
    padding:0 1rem;
}
.contain.readable, body.view_1 main, body.view_4 main, body.view_5 main {
    max-width: var(--mainwidth);
    margin:0 auto;
    padding:0 1rem;
}

body.view_ {
    /* widgets only */
    main {
        display:none;
    }
}

body.view_5:has(.hero:not(.has_heading)) main {
    margin-top:var(--gap);
}

body main, body.view_1 main {
    margin-top:var(--gap);
    margin-bottom:var(--gap);
    h2 {
        margin-top:1em;
        margin-bottom:1em;
    }
    a:not(.btn):not(.button) {
        color:var(--link);
        &:hover {
            color:var(--link-hover);
        }
    }
}

p.charity {
    text-align: center;
    margin: 2rem 0 0 0;
    font-size: 1rem;
}

body.view_1 main {
    img {
        margin:calc(var(--gap) * 0.5) 0;
        border-radius:var(--radius);
        aspect-ratio:16/9;
        width:1000%;
        display:inline-block;
        object-fit:cover;
    }
}

a.btn, a.button {
    padding:0.6rem 2rem;
    background:var(--cacblue);
    color:white;
    text-decoration:none;
    border-radius:3rem;
    border:3px solid var(--cacblue);
    text-transform:uppercase;
    font-weight:900;
    font-size:1.2rem;
    transition:all 0.3s ease;
    &:hover {
        background:var(--cacblue2);
        border-color:var(--cacblue2);
    }
}
a.btn.white, a.button.white {
    background:white;
    color:var(--cacblue);
    text-decoration:none;
    &:hover {
        background:var(--cacblue3);
        border-color:var(--cacblue);
    }
}

nav a {
    &:hover {
        text-decoration:underline !important;
    }
}

.anchor_target {
    /* ensure when linking to an anchor, the content isn't hidden behind the fixed nav */
    scroll-margin-top:10rem;
}

span.arrow {
    display:inline-flex;
    margin-left:0.5rem;
    img {
        width:1.5em;
        height:1.5em;
    }
    background:white;
    padding:0.25rem;
    border-radius:50%;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
}

#desktop_nav {
    position:fixed;
    margin-left:auto;
    margin-right:auto;
    left:0;
    right:0;
    z-index:3;
    top:3rem;
    a {
        color:white;
        text-decoration:none;
        font-size:1.125rem;
        display:flex;
        height:6rem;
        padding:0 1rem;
        align-items: center;
        
    }
    li:hover {
        ul {
            display:block;
        }
    }
    a.logo {
        display:flex;
        align-items:center;
        gap:1rem;
        max-width: 43vw;
        img {
            max-height:4.25rem;
        }
        
    }
    ul {
        list-style:none;
        display:flex;
        gap:2rem;
        li ul {
            display:none;
            position:absolute;
            margin:0px;
            padding:0px;
            padding-bottom:1rem;
            background: rgba(3, 71, 89, 1);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-radius:0px 0px var(--radius) var(--radius);
            li {
                margin:0px;
                a {
                    padding:0 2rem;
                    height:3rem;
                    font-size:1rem;
                }
            }
            padding-top:8px;
            li {
                background:rgba(3, 71, 89, 1);
            }
            /* first li border radius top left and top right */
            li:first-child {
                border-top-left-radius: var(--radius);
                border-top-right-radius: var(--radius);
            }
            /* last li border radius bottom left and bottom right */
            li:last-child {                
                border-bottom-left-radius: var(--radius);
                border-bottom-right-radius: var(--radius);
            }
        }
    }
    .frosty {
        background: rgba(3, 71, 89, 0.43);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        padding: 0rem 4rem;
        border-radius:var(--radius);
    }
}

.mobile-nav-toggle, #close_mobile_nav {
    display:none;
    background:none;
    border:none;
    cursor:pointer;
    img {
        pointer-events:none; /* only button is interactive, not the image inside */
    }
}

body.no-scroll {
    overflow: hidden;
}


/* hide desktop nav < 1400px */
@media (max-width: 1400px) {
    #menu_desktop-nav {
        display:none;
    }
    .mobile-nav-toggle {
        display:block;
        &:hover {
            cursor:pointer;
        }
    }
    #close_mobile_nav {
        display:block;
        position:absolute;
        top:2rem;
        right:2rem;
        z-index:12;
    }
    .frosty {
        padding: 0rem 2rem !important;
    }
}

#mobile_nav {
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100dvh;
    background: rgba(3, 71, 89, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index:10;
    padding:2rem;
    opacity:0;
    pointer-events:none;
    transition: opacity 0.3s ease;
    a {
        color:white;
        text-decoration:none;
        font-size:1.5rem;
        display:block;
        padding:1rem 0;
    }
    /* sub uls are hidden until active and they become full screen fixed position */
    ul {
        list-style: none;
        padding: 0px;
        margin: 0px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 98dvh;
        li ul {
            display:none;
            position:fixed;
            top:0;
            left:0;
            width:100%;
            height:100dvh;
            background: rgba(3, 71, 89, 0.95);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            z-index:10;
            padding:2rem;
            a {
                color:white;
                text-decoration:none;
                font-size:1.5rem;
                display:block;
                padding:1rem 0;
            }
        }
        li.active > ul {
            display:flex;  
        }
    }
}
#mobile_nav.active {
    display:block;
    opacity:1;
    pointer-events:auto;
}

/* Update existing #mobile_nav styles */
#mobile_nav {
    display: block; /* Change from none to block to allow transitions */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    background: rgba(3, 71, 89, 0.98); /* Slightly more opaque for readability */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 10;
    padding: 2rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    overflow: hidden; /* Prevent double scrollbars */
}

#mobile_nav.active {
    opacity: 1;
    pointer-events: auto;
}

#mobile_nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

#mobile_nav li {
    width: 100%;
    text-align: center;
}

#mobile_nav a {
    color: white;
    text-decoration: none;
    font-size: 1.8rem;
    display: block;
    padding: 1.2rem 0;
    font-weight: 900;
}

#menu_mobile-nav {
    height:calc(100dvh - 4rem);
}

/* Sub-menu Drill Down Logic */
#mobile_nav li.parent > ul {
    display: flex; 
    position: fixed;
    top: 0;
    left: 100%; /* Start off-screen to the right */
    width: 100%;
    height: 100dvh;
    background: #034759; /* Solid color to cover the menu underneath */
    z-index: 11;
    padding: 2rem;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* When the parent LI is active, slide the UL in */
#mobile_nav li.parent.active > ul {
    left: 0;
}

/* Back Button Styling */
#mobile_nav li.back-button a {
    color: var(--caclightblue);
    font-size: 1.2rem;
    text-transform: uppercase;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* Target only the top-level parent links in the mobile nav */
#mobile_nav li.parent > a {
    position: relative;
    display:flex; 
    align-items: center;
    justify-content: center;
    padding-right: 2rem; /* Make space for the arrow */
}

/* Add the arrow icon as a pseudo-element */
#mobile_nav li.parent > a::after {
    content: "";
    width: 1.5rem;
    height: 1.5rem;
    background-image: url('/src/templates/cac/images/arrow_forward_white.svg');
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    margin-left: 2rem;
}

/* Ensure sub-menu links don't inherit the arrow if they aren't parents themselves */
#mobile_nav li:not(.parent) > a::after {
    display: none;
}




footer {
    border-radius: var(--bigradius) var(--bigradius) 0px 0px;
    max-width:var(--bigwidth);
    margin:0 auto;
    background:var(--cacblue);
    padding:var(--gap) calc(2 * var(--gap));
    * {
        color:var(--cacwhite);
    }
    nav {
        a {
            text-decoration:none;
            color:var(--cacwhite);
            /* font-weight:200; */
        }
        li.parent > a {
            font-size:1.56rem;
            font-weight:900;
        }
        
        ul {
            list-style:none;
            display:flex;
            gap:2.5rem;
            flex-wrap:wrap; 
            margin:0px;
            padding:0px;
            justify-content: space-between;
            li {
                max-width:13rem;
                ul {
                    display:flex;
                    flex-direction:column;
                    gap:1rem;
                    margin-top:1em;
                }
                
            }
        }
        & > ul > li:not(:has(ul, li)) a {
            font-size:1.56rem;
            font-weight:900;
        }
    }
    .footer-text.center {
        text-align:center;
        margin-top:var(--gap);
        display:flex;
        gap:2rem;
        justify-content: center ;
        align-items:center;
        p {
            margin-bottom:0px;
        }
    }
    .flex.footer-social {
        display:flex;
        gap:2rem;
    }
}

.front_end_edit_wrap {
    position:absolute;
    z-index:99;
    a {
        text-decoration:none;
        padding:1em 2em;
        background:var(--cacblue2);
        color:white !important;
        border-radius:var(--radius);
        border:4px solid var(--cacwhite);
        font-size:12px !important;
        font-weight:400 !important;
        filter:drop-shadow(0.5rem 0.5rem 0.5rem rgba(0,0,0,0.25));
        opacity:1;
    }
    a:hover {
        background:var(--cacblue);
    }
}

#menu_support-materials-nav, main nav {
    margin-top:var(--gap);
    margin-bottom:var(--gap);
    ul {
        list-style:none;
        margin:0px;
        padding:0px;
        display:flex;
        gap:2rem;
    }
    a {
        background:var(--caclightblue);
        padding:0.63em 1.3em;
        border-radius:var(--radius);
        color:var(--cacblue2);
        text-decoration:none;
        font-weight:900;
        display: inline-block;
    }
}

/* < 800px */
@media (max-width: 1350px) {
    #menu_footer-menu {
        display:none;
    }
    .footer-text.center {
        flex-direction: column;
        text-align: center;
    }
    footer {
        padding:var(--gap);
        .footer-text.center p a {
            display:block;
            margin-top:var(--gap);
        }
    }
}