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


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

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

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

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


/* =====================================================
   HEADER — Centered Title + Logo 200px from Left
   ===================================================== */

.header-container{
    position:relative;
    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:50px;
    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
===================================================== */

.site-nav{
    background-color:#fefaf0;   /* ← you were missing # */
}

.site-nav{
    margin-bottom: 0;
    padding-bottom: 0;
}

.main-content{
    padding-top: 0;
}


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

.menu > li{
    position:relative;
}

/* TOP LEVEL MENU ITEMS */
.menu > li > a{
    display:block;
    padding:12px 20px;
    text-decoration:none;
    color:#403f2b;
    font-weight:600;

    font-size: 16px;   /* ← ADJUST THIS */
}

.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;   /* ← adjust submenu size separately if you want */
}

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

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

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

/* Top-level items that have submenus */
.menu > li:has(.submenu) > a::after{
    content: " ▼";
    font-size: 0.7em;
    margin-left: 4px;
}

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

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

/* Mark items that have submenus */
.menu > li {
    position: relative;
}

/* Add 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;  /* arrow color */

    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;
}



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

/* MAIN CONTENT — full width */
.main-content{
  width: 100%;
  max-width: none;     /* removes the 1200px cap */
  margin-top: -10px;   /* adjust number */
  margin: 0;
  padding: 0px 0;     /* no forced side padding */
}

/* =====================================================
   CASPIO SCRIPT ROWS (optional multi-column support)
   ===================================================== */

.caspio-row{
    display:flex;
    flex-wrap:wrap;
    gap:2%;
    margin-bottom:20px;
    justify-content:flex-start;
}

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

/* 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%;}


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

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


/* =====================================================
   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;
}


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

@media (max-width:1100px){
    .logo{ left:40px; }
}

@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%;
    }
}
/* =====================================================
   CASPIO WIDTH + 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-w50{ width:50%; }


.main-content{
  margin-top: -10px;   /* try -5px, -10px, -15px */
  padding-top: 0 !important;
}

#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;
}

/* ===== Tighten space between menu and Caspio ===== */
.site-nav{
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.menu{
  margin: 0 !important;
  padding: 0 !important;
}

/* This is the big one: reduces menu bar height */
.menu > li > a{
  padding: 6px 18px !important;   /* was 12px 20px */
}

/* Remove any "air" above the Caspio section */
.main-content{
  margin: 0 !important;
  padding: 0 !important;
}

/* =====================================================
   CASPIO ROW LAYOUT (Multiple Scripts on Same Row)
   ===================================================== */

.caspio-row{
    display:flex;
    justify-content:center;   /* center the whole group */
    align-items:flex-start;
    gap:20px;                 /* space between scripts */
    flex-wrap:wrap;           /* allows stacking on small screens */
    width:90%;                /* overall row width */
    margin:0 auto;
}

/* Individual width options */
.caspio-col-40{ flex:0 0 40%; }
.caspio-col-30{ flex:0 0 30%; }
.caspio-col-25{ flex:0 0 25%; }

/* Make them stack nicely on small screens */
@media (max-width: 900px){
    .caspio-col-40,
    .caspio-col-30,
    .caspio-col-25{
        flex:0 0 100%;
    }
}

#backToTop {
  display: none;
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 999;
  font-size: 18px;
  background-color: #1f4f2a;            /* ← updated */
  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);
}