/* =====================================================
   CENTRAL STYLE SHEET
   Header + Shared Menu + Flexible Caspio Columns
   ===================================================== */


/* =========================
   RESET
   ========================= */
*{
    box-sizing:border-box;
}

html,
body{
    width:100%;
    margin:0;
    padding:0;
}

body{
    font-family:Arial, sans-serif;
    background-color:#cedfeb;
    color:#333;
    overflow-x:hidden; /* Helps with Caspio sticky headers */
}


/* =====================================================
   HEADER — FIXED ABOVE MENU
   ===================================================== */
.header-container{
    position:relative;
    background-color:#cedfeb;
    border-bottom:1px solid transparent;
    padding:10px 0;
    z-index:6000;
}

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

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

.site-title{
    margin:0;
    font-family:Verdana, sans-serif;
    font-size:24px;
    color:#ffffff;
    font-weight:400;
}


/* =====================================================
   SHARED MENU — SAFE (ARROWS ONLY WHEN NEEDED)
   ===================================================== */
#menu-placeholder{
    position:relative;
    z-index:5000;
}

.site-nav{
    background:#1b2e3c;
    border-top:1px solid transparent;
    border-bottom:0;
    position:relative;
    z-index:5000;
}

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

.menu > li{
    position:relative;
}

.menu > li > a{
    display:block;
    padding:6px 16px;
    color:#cedfeb;
    text-decoration:none;
    font-size:14px;
    white-space:nowrap;
}


/* =========================================
   ARROWS — DEFAULT OFF
   ========================================= */
.menu > li > a::after,
.submenu li > a::after{
    content:"";
}


/* =========================================
   ARROWS — ONLY WHEN SUBMENU EXISTS
   (requires JS to add .has-submenu)
   ========================================= */

/* Top level ▼ */
.menu > li.has-submenu > a::after{
    content:" ▼";
    font-size:11px;
    margin-left:6px;
}

/* Submenu ▶ */
.submenu li.has-submenu > a::after{
    content:" ▶";
    font-size:11px;
    float:right;
    margin-left:8px;
}


/* =========================================
   DROPDOWN
   ========================================= */
.submenu{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    min-width:220px;
    background:#1b2e3c;
    list-style:none;
    margin:0;
    padding:0;
    font-size:14px;
    border:1px solid #16381d;
    z-index:9999;
}

.submenu li{
    position:relative;
}

.submenu li a{
    display:block;
    padding:10px 14px;
    color:#fff;
    text-decoration:none;
    white-space:nowrap;
}

/* Show dropdown */
.menu li:hover > .submenu{
    display:block;
}

/* Third-level flyout */
.submenu .submenu{
    top:0;
    left:100%;
}

/* Hover colors */
.menu > li > a:hover,
.submenu li a:hover{
    background:#5f5f5f;
}


/* =====================================================
   MAIN CONTENT
   ===================================================== */
.main-content{
    width:100%;
    max-width:none;
    padding:10px 0 20px;
}


/* =====================================================
   FLEXIBLE COLUMN LAYOUT
   ===================================================== */
.row{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:50px;
    width:96%;            /* Leaves a 2% margin on each side */
    max-width:none;       /* Allows the Caspio page to use the available width */
    margin:0 auto 20px;
    padding:0;
}

.col{
    min-width:0;
}

/* Fixed-width options */
.col-10{ flex:0 0 10%; max-width:10%; }
.col-15{ flex:0 0 15%; max-width:15%; }
.col-20{ flex:0 0 20%; max-width:20%; }
.col-25{ flex:0 0 25%; max-width:25%; }
.col-30{ flex:0 0 30%; max-width:30%; }
.col-33{ flex:0 0 33.333%; max-width:33.333%; }
.col-40{ flex:0 0 40%; max-width:40%; }
.col-50{ flex:0 0 50%; max-width:50%; }
.col-60{ flex:0 0 60%; max-width:60%; }
.col-70{ flex:0 0 70%; max-width:70%; }
.col-80{ flex:0 0 80%; max-width:80%; }
.col-90{ flex:0 0 90%; max-width:90%; }
.col-95{ flex:0 0 95%; max-width:95%; }
.col-100{ flex:0 0 100%; max-width:100%; }

/* Flexible fill */
.col-flex{
    flex:1 1 0;
    max-width:none;
}


/* =====================================================
   CASPIO EMBED SAFETY
   ===================================================== */
.cbResultSet,
.cbResultSetContainer,
.cbForm,
.cbSearchPanel,
.cbSearchTable{
    max-width:100%;
}

.cbResultSetTable{
    border-collapse:collapse;
}


/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width:1200px){
    .row{
        flex-wrap:wrap;
    }

    .col-15,
    .col-20,
    .col-25,
    .col-30,
    .col-33,
    .col-40,
    .col-50{
        flex:0 0 calc(50% - 25px);
        max-width:calc(50% - 25px);
    }

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

    .site-inner{
        text-align:center;
    }
}

@media (max-width:700px){
    .row{
        flex-wrap:wrap;
        width:96%;
    }

    .col{
        flex:0 0 100% !important;
        max-width:100% !important;
    }

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

    .menu > li > a{
        text-align:center;
    }

    .submenu,
    .submenu .submenu{
        position:static;
        border:none;
        min-width:unset;
    }

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


/* =====================================================
   BACK TO TOP BUTTON
   ===================================================== */
#backToTop{
    display:none;
    position:fixed;
    bottom:28px;
    right:28px;
    z-index:999;
    font-size:18px;
    background-color:#1b2e3c;
    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);
}

#backToTop:hover{
    background-color:#16381d;
}


/* =====================================================
   FOOTER
   ===================================================== */
.footer-container{
    text-align:center;
    padding:5px;
    font-size:12px;
    background-color:#242021;
    color:#ffffff;
}