/* =====================================================
   CENTRAL STYLE SHEET
   Clean Layout + Centered Title + Dropdown Navigation
   ===================================================== */


/* =========================
   RESET AND PAGE LAYOUT
   ========================= */

*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

html{
    min-height:100%;
}

body{
    min-height:100vh;
    display:flex;
    flex-direction:column;

    font-family:Arial, sans-serif;
    background-color:#fefaf0;
    color:#333;

    /* Required for Caspio sticky headers */
    overflow-x:hidden;
}


/* =====================================================
   HEADER — Centered Title + Logo
   ===================================================== */

.header-container{
    position:relative;
    flex-shrink:0;
    background-color:#fefaf0;
    border-bottom:2px solid #1f4f2a;
    padding:15px 0;
}

.site-inner{
    max-width:1200px;
    margin:0 auto;
    padding:0 20px;
    position:relative;
    text-align:center;
}

.logo{
    position:absolute;
    left:300px;
    top:50%;
    transform:translateY(-50%);
    width:200px;
    height:auto;
}

.site-title{
    margin:0;
    font-family:"Bookman Old Style", Georgia, serif;
    font-size:32px;
    color:#1f4f2a;
    font-weight:bold;
}


/* =====================================================
   DROPDOWN NAVIGATION
   ===================================================== */

#menu-placeholder{
    flex-shrink:0;
    margin:0 !important;
    padding:0 !important;
}

#menu-placeholder nav,
#menu-placeholder .site-nav{
    margin:0 !important;
    padding:0 !important;
}

.site-nav{
    background-color:#fefaf0;
    margin:0 !important;
    padding:0 !important;
    line-height:1 !important;
}

.menu{
    list-style:none;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:0 !important;
    padding:0 !important;
}

.menu > li{
    position:relative;
}


/* TOP-LEVEL MENU ITEMS */

.menu > li > a{
    display:block;
    padding:6px 18px !important;
    text-decoration:none;
    color:#403f2b;
    font-weight:600;
    font-size:16px;
}

.menu > li > a:hover{
    background-color:#a9aaa2;
}


/* SUBMENUS */

.submenu{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    list-style:none;
    background-color:#333;
    min-width:375px;
    padding:0;
    margin:0;
    z-index:1000;
}

.submenu li{
    position:relative;
}

.submenu li a{
    display:block;
    padding:10px;
    color:#ffffff;
    text-decoration:none;
    font-size:14px;
}

.submenu li a:hover{
    background-color:#444;
}


/* Show dropdown */

.menu li:hover > .submenu{
    display:block;
}


/* =====================================================
   DROPDOWN ARROWS
   ===================================================== */

/* Top-level menu arrow */

.menu > li.has-submenu > a::after{
    content:"";
    display:inline-block;
    margin-left:6px;
    width:0;
    height:0;

    border-left:4px solid transparent;
    border-right:4px solid transparent;
    border-top:5px solid #403f2b;

    transition:transform 0.2s ease, opacity 0.2s ease;
    opacity:0.75;
}

.menu > li.has-submenu:hover > a::after{
    transform:rotate(180deg);
    opacity:1;
}


/* Submenu arrow for deeper dropdowns */

.submenu > li.has-submenu > a::after{
    content:"";
    display:inline-block;
    margin-left:6px;
    width:0;
    height:0;

    border-top:4px solid transparent;
    border-bottom:4px solid transparent;
    border-left:5px solid #ffffff;
}


/* =====================================================
   MAIN CONTENT
   ===================================================== */

.main-content{
    /*
       This makes the main content fill unused space,
       keeping the footer at the bottom of short pages.
    */
    flex:1 0 auto;

    width:100%;
    max-width:none;
    margin:0 !important;
    padding:0 !important;
}


/* =====================================================
   CASPIO WIDTH AND CENTERING
   ===================================================== */

.caspio-wrap{
    margin-left:auto;
    margin-right:auto;
}

.caspio-w100{ width:100%; }
.caspio-w95{ width:95%; }
.caspio-w90{ width:90%; }
.caspio-w85{ width:85%; }
.caspio-w80{ width:80%; }
.caspio-w75{ width:75%; }
.caspio-w70{ width:70%; }
.caspio-w60{ width:60%; }
.caspio-w50{ width:50%; }
.caspio-w40{ width:40%; }



/* =====================================================
   CASPIO SCRIPT ROWS
   ===================================================== */

.caspio-row{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    flex-wrap:wrap;

    gap:20px;
    width:90%;
    margin:0 auto 20px;
}

.caspio-script-container{
    background:#ffffff;
    padding:15px;
    border-radius:4px;
    box-shadow:0 2px 5px rgba(0,0,0,0.1);
}


/* Individual column widths */

.caspio-col-40{ flex:0 0 40%; }
.caspio-col-30{ flex:0 0 30%; }
.caspio-col-25{ flex:0 0 25%; }


/* General width helpers */

.w-5{ width:5%; }
.w-10{ width:10%; }
.w-15{ width:15%; }
.w-20{ width:20%; }
.w-25{ width:25%; }
.w-30{ width:30%; }
.w-33{ width:32%; }
.w-35{ width:35%; }
.w-40{ width:40%; }
.w-45{ width:45%; }
.w-50{ width:48%; }
.w-55{ width:55%; }
.w-60{ width:60%; }
.w-65{ width:65%; }
.w-70{ width:70%; }
.w-75{ width:75%; }
.w-80{ width:80%; }
.w-85{ width:85%; }
.w-90{ width:90%; }
.w-95{ width:95%; }
.w-100{ width:100%; }


/* =====================================================
   REMOVE EXTRA SPACE ABOVE CASPIO
   ===================================================== */

.cbOuterTable,
.cbFormOuterTable,
.cbResultSetTable{
    margin-top:0 !important;
    padding-top:0 !important;
}

.cbResultSet,
.cbForm,
.cbFormTable{
    margin-top:0 !important;
}


/* =====================================================
   FOOTER — STAYS AT BOTTOM
   ===================================================== */

.footer-container{
    /*
       margin-top:auto keeps the footer at the bottom
       when the page has only a small amount of content.
    */
    flex-shrink:0;
    margin-top:auto;

    width:100%;
    background-color:#214d24;
    color:#ffffff;
    font-size:14px;
    text-align:center;
    padding:20px;
}


/* =====================================================
   SCROLL ARROWS
   ===================================================== */

.scroll-arrows{
    position:fixed;
    right:20px;
    bottom:20px;
    display:flex;
    flex-direction:column;
    gap:10px;
    z-index:9999;
}

.scroll-arrow{
    background-color:#0056b3;
    color:#ffffff;
    text-decoration:none;
    padding:10px 15px;
    border-radius:5px;
    font-weight:bold;
    text-align:center;
    opacity:0.8;
}

.scroll-arrow:hover{
    opacity:1;
}


/* =====================================================
   BACK TO TOP BUTTON
   ===================================================== */

#backToTop{
    display:none;
    position:fixed;
    bottom:28px;
    right:28px;
    z-index:999;

    font-size:18px;
    background-color:#1f4f2a;
    color:#ffffff;

    border:1px solid rgba(255,255,255,0.15);
    border-radius:12px;
    padding:8px 12px;
    cursor:pointer;

    box-shadow:0 3px 6px rgba(0,0,0,0.25);
    transition:all 0.25s ease;
}

#backToTop:hover{
    background-color:#627065;
    transform:translateY(-2px);
    box-shadow:0 4px 10px rgba(0,0,0,0.3);
}

#backToTop:active{
    transform:translateY(0);
    box-shadow:0 2px 5px rgba(0,0,0,0.2);
}


/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width:1100px){

    .logo{
        left:40px;
    }
}


@media (max-width:900px){

    .caspio-col-40,
    .caspio-col-30,
    .caspio-col-25{
        flex:0 0 100%;
    }
}


@media (max-width:700px){

    .logo{
        position:static;
        transform:none;
        display:block;
        margin:0 auto 10px;
        width:120px;
    }

    .site-title{
        font-size:24px;
    }

    .menu{
        flex-direction:column;
        align-items:center;
    }

    .submenu{
        position:static;
        width:100%;
        min-width:0;
    }

    .caspio-wrap{
        width:95%;
    }
}