/* ===========================
   WideFlex — CLEAN + NO TOP SPACE
   =========================== */

:root{
  --header-bg:#474d51;   
  --menu-bg:#282b2d;
  --menu-txt:#ffffff;
  --body-bg:#b3b4b5;
  --text:#1a1a1a;
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  background:var(--body-bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.4;
}

/* Wide centered container */
.container{
  max-width:1400px;
  margin:0 auto;
  padding:0 16px; /* no top padding */
}

/* Width helpers */
.wide70, .wide80, .wide90 { margin:0 auto; }
.wide70 { max-width:70% !important; }
.wide80 { max-width:80% !important; }
.wide90 { max-width:90% !important; }


.wide30, .wide35, .wide50, .wide65, .wide95, .wide100{
  width:100%;
  max-width:none;
  margin:0 auto;
}

@media (min-width:768px){
  .wide30{ max-width:30%; }
  .wide35{ max-width:35%; }
  .wide50{ max-width:50%; }
  .wide65{ max-width:65%; }
  .wide95{ max-width:95%; }
  .wide100{ max-width:100%; }
}

/* =======================
   Header / Branding
   ======================= */
.site-header{ background:var(--header-bg); color:#fff; }

.header-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:50px;
  padding:5px 16px;
}

.logo{ height:64px; width:auto; display:block; }

.title-wrap{ text-align:left; }

.site-title{
  font-family:"Permanent Marker",sans-serif;
  font-size:24px;
  line-height:1.1;
}

.site-subtitle{ font-size:16px; opacity:0.9; }

/* =======================
   Menu (dropdown)
   ======================= */
.site-nav{
  background:var(--menu-bg);
  margin:0;      /* ensure no gap under header */
  padding:0;     /* ensure no gap under header */
}

.menu{
  display:flex;
  list-style:none;
  margin:0;      /* no top margin */
  padding:0;     /* no top padding */
  justify-content:center;
  width:100%;
}

.menu > li{ position:relative; }

.menu a{
  display:block;
  padding:6px 16px;
  font-size:14px;
  color:var(--menu-txt);
  text-decoration:none;
  white-space:nowrap;
}

.menu a:hover,
.menu li:focus-within > a{
  background:rgba(255,255,255,0.08);
}

/* Submenus */
.submenu{
  display:none;
  position:absolute;
  left:0;
  top:100%;
  min-width:200px;
  margin:0;
  padding:6px 0;
  list-style:none;
  background:var(--menu-bg);
  border:1px solid rgba(255,255,255,0.15);
  z-index:1000;
}

.menu li:hover > .submenu,
.menu li:focus-within > .submenu{ display:block; }

.submenu li{ position:relative; }
.submenu .submenu{ top:0; left:100%; margin-left:1px; }
.submenu a{ padding:8px 14px; }

/* Dropdown arrows (modern browsers) */
.menu > li:has(.submenu) > a::after{
  content:" ▼";
  font-size:.7em;
  margin-left:4px;
}
.submenu > li:has(.submenu) > a::after{
  content:" ▶";
  font-size:.7em;
  margin-left:6px;
}

/* Small screens: wrap top-level menu */
@media (max-width:700px){
  .menu{ flex-wrap:wrap; }
}

/* =======================
   Content & Footer
   ======================= */
/* ZERO space immediately under the menu, globally */
.content{
  margin:0 auto;   /* no top margin */
  padding:0;       /* no top padding */
}

/* Also flush for wide variant */
.content--wide{
  max-width:none;
  width:100%;
  margin:0;            /* was 20px */
  padding:0 16px;      /* side padding only */
}

/* Kill any top margin from the first block after .content/main */
.content > *:first-child,
main > *:first-child{
  margin-top:0 !important;
}

/* Ensure the first row starts flush under menu */
.content > .wf-row:first-child,
main > .wf-row:first-child{
  margin-top:0 !important;
}

.site-footer{
  text-align:center;
  padding:12px;
  background:#ddd;
  font-size:14px;
}

/* =======================
   Script Panels
   ======================= */
.script-panel{
  border:1px solid #ccc;
  background:#fff;
  padding:0 16px 16px 16px; /* NO top padding */
  min-height:120px;
  overflow:auto;
}

/* Prevent first element inside a panel from adding top space */
.script-panel > :first-child{
  margin-top:0 !important;
  padding-top:0 !important;
}

/* =======================
   Rows & Columns
   ======================= */
.wf-row{
  display:flex;
  flex-wrap:wrap;     /* stacks on mobile */
  gap:16px;
  margin:16px 0;      /* vertical rhythm BETWEEN sections */
}

/* No top margin on the very first row on the page */
.wf-row:first-child{ margin-top:0 !important; }

.wf-col{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  min-width:0;
}

/* 1-up */
.wf-1 .wf-col{ flex:1 1 100%; }

/* 2-up (50/50) */
.wf-2 .wf-col{ flex:1 1 calc(50% - 8px); }

/* 2-up (35/55) — row class only sets split */
.wf-2-35-55 .wf-col{ flex:1 1 calc(35% - 8px); }

/* 3-up */
.wf-3 .wf-col{ flex:1 1 calc(33.333% - 11px); }

@media (max-width:1100px){
  .wf-3 .wf-col{ flex:1 1 calc(50% - 8px); }
}
@media (max-width:700px){
  .wf-2 .wf-col,
  .wf-3 .wf-col,
  .wf-2-35-55 .wf-col{ flex:1 1 100%; }
}

/* =======================
   35/55 Split + utilities
   ======================= */

/* Use on the row: <section class="wf-row wf-2-35-55"> */
.wf-2-35-55{ /* inherits display/flex from .wf-row */ }

/* Left column = 35% */
.wf-2-35-55 .wf-col:first-child{
  flex:0 0 35%;
  max-width:35%;
}

/* Right column = 55% (can stack multiple panels) */
.wf-2-35-55 .wf-col:last-child{
  flex:0 0 55%;
  max-width:55%;
  gap:16px;
}

/* Stack helper */
.wf-stack{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:16px;
}

/* =======================
   Responsive header tweaks
   ======================= */
@media (max-width:900px){
  .header-inner{ gap:24px; }
  .site-title{ font-size:24px; }
}

/* =======================
   Variable-split rows (2-up / 3-up)
   ======================= */
.wf-row-var2, .wf-row-var3{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin:16px 0;
}
.wf-row-var2 .wf-col,
.wf-row-var3 .wf-col{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  min-width:0;
}

/* 2-up using CSS vars --c1 / --c2 (defaults 50/50) */
.wf-row-var2{ --c1:50%; --c2:50%; }
.wf-row-var2 .wf-col:nth-child(1){ flex:0 0 var(--c1); max-width:var(--c1); }
.wf-row-var2 .wf-col:nth-child(2){ flex:0 0 var(--c2); max-width:var(--c2); }

/* 3-up using --c1/--c2/--c3 (defaults equal thirds) */
.wf-row-var3{ --c1:33.333%; --c2:33.333%; --c3:33.333%; }
.wf-row-var3 .wf-col:nth-child(1){ flex:0 0 var(--c1); max-width:var(--c1); }
.wf-row-var3 .wf-col:nth-child(2){ flex:0 0 var(--c2); max-width:var(--c2); }
.wf-row-var3 .wf-col:nth-child(3){ flex:0 0 var(--c3); max-width:var(--c3); }

/* Mobile: stack to 100% */
@media (max-width:700px){
  .wf-row-var2 .wf-col,
  .wf-row-var3 .wf-col{
    flex:0 0 100%;
    max-width:100%;
  }
}

/* Page width presets — wrap your content in one of these if desired */
.page-compact{  max-width:900px;  margin:0 auto; padding:0 16px; }
.page-medium{   max-width:1200px; margin:0 auto; padding:0 16px; }
.page-wide{     max-width:1400px; margin:0 auto; padding:0 16px; }
.page-full{     max-width:none;   margin:0;      padding:0 16px; }

.script-panel > :first-child{ margin-top:0 !important; }
/* ===== ANTI-GAP PATCH (put at very end of site.css) ===== */

/* 0) Ensure header/menu don't create space themselves */
.site-header, .site-nav { margin-bottom: 0 !important; padding-bottom: 0 !important; }

/* 1) Remove top margin from the very first element after the menu */
.site-nav + * { margin-top: 0 !important; padding-top: 0 !important; }

/* 2) If there's a wrapper like main/.content/page-*, kill top space there */
main, .content, .page-compact, .page-medium, .page-wide, .page-full {
  margin-top: 0 !important; padding-top: 0 !important;
}

/* 3) Remove top margins from common first children (headings, blocks) */
.content > :first-child,
main > :first-child,
.page-compact > :first-child,
.page-medium > :first-child,
.page-wide > :first-child,
.page-full > :first-child,
.wf-row:first-child,
.script-panel > :first-child {
  margin-top: 0 !important; padding-top: 0 !important;
}

/* 4) Caspio containers sometimes inject margin/padding—flatten them */
[id^="caspio"], [id^="cb-"], .cbFormBlock, .cbResultSetContainer, .cbResultSetTable,
.cbFormSection, .cbHTMLBlock, .cbResultSetHeader {
  margin-top: 0 !important; padding-top: 0 !important; border-top-width: 0 !important;
}

/* 5) Headings often have default top margins—zero them when they’re first */
.content h1:first-child, .content h2:first-child, .content h3:first-child,
main h1:first-child, main h2:first-child, main h3:first-child,
.page-wide h1:first-child, .page-wide h2:first-child, .page-wide h3:first-child {
  margin-top: 0 !important;
}
/* === Back to Top Button – WideFlex Styled === */
#backToTop {
  display: none;
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 999;
  font-size: 18px;
  background-color: var(--menu-bg);     /* Matches menu tone */
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;                  /* Matches menu corners */
  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: var(--header-bg);   /* Swap tones on hover */
  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);
}

/* --- Mobile Optimization --- */
@media (max-width: 600px) {
  #backToTop {
    bottom: 16px;
    right: 16px;
    font-size: 16px;
    padding: 7px 10px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  }
}