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


/* =========================
   RESET
   ========================= */

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

html,
body{
    min-height:100%;
}

body{
    font-family:Arial, sans-serif;
    background-color:#67977f;
    color:#333;

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

    /* Sticky footer layout */
    min-height:100vh;
    display:flex;
    flex-direction:column;
}


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

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

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

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

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


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

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

.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 ITEMS */
.submenu li a{
    display:block;
    padding:10px 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
   ===================================================== */

/* Modern arrow for top-level menu items with submenus */
.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;
}

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

/* Optional fallback arrows for browsers/pages using :has */
.menu > li:has(.submenu) > a::after{
    content:" ▼";
    font-size:0.7em;
    margin-left:4px;
}

/* Submenu items that have deeper submenus */
.submenu > li:has(.submenu) > a::after{
    content:" ▶";
    font-size:0.7em;
    margin-left:6px;
}


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

.main-content{
    width:100%;
    max-width:none;
    margin:0 !important;
    padding:12px 0 0 0 !important;

    /* This makes the footer stay at the bottom */
    flex:1 0 auto;
}
/* =====================================================
   CASPIO WIDTH + CENTERING
   Single-column sizing
   ===================================================== */

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

.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-w65{ width:65%; }
.caspio-w60{ width:60%; }
.caspio-w55{ width:55%; }
.caspio-w50{ width:50%; }
.caspio-w45{ width:45%; }
.caspio-w40{ width:40%; }
.caspio-w35{ width:35%; }
.caspio-w33{ width:33%; }
.caspio-w30{ width:30%; }
.caspio-w25{ width:25%; }


/* =====================================================
   CASPIO SCRIPT ROWS
   Multiple Scripts on Same Row
   ===================================================== */

.caspio-row{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:20px;
    flex-wrap:wrap;
    width:90%;
    margin:0 auto 20px auto;
}

.caspio-row > div{
    min-width:0;
}

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

/* 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-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%;}
.w-33{width:32%;}

/* Multiple-column width options */

.caspio-col-50{ flex:0 0 calc(50% - 10px); }
.caspio-col-40{ flex:0 0 calc(40% - 12px); }
.caspio-col-33{ flex:0 0 calc(33.333% - 14px); }
.caspio-col-30{ flex:0 0 calc(30% - 14px); }
.caspio-col-25{ flex:0 0 calc(25% - 15px); }

/* Optional wider row if needed */

.caspio-row-wide{
    width:96%;
}


/* =====================================================
   CASPIO TOP SPACE REDUCTION
   ===================================================== */

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

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

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


/* =====================================================
   FOOTER
   ===================================================== */

.footer-container{
    background-color:#222;
    color:#ffffff;
    font-size:14px;
    text-align:center;
    padding:20px;
    margin-top:40px;

    /* Sticky footer support */
    flex-shrink:0;
}


/* =====================================================
   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:white;
    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:#fff;
    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-50,
    .caspio-col-40,
    .caspio-col-33,
    .caspio-col-30,
    .caspio-col-25{
        flex:0 0 100%;
    }

    .caspio-row,
    .caspio-row-wide{
        width:95%;
    }
}

@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:100%;
    }
}