/* ===========================
   WideFlex — clean base CSS
   =========================== */

:root{
  --header-bg:#255150;
  --menu-bg:#1a3837;
  --menu-txt:#ffffff;
  --body-bg:#f5f7f7;
  --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;
}

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

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

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

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

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

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

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

/* =======================
   Menu (dropdown)
   ======================= */
.site-nav{ background:var(--menu-bg); }

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

.menu > li{ position:relative; }

.menu a{
  display:block;
  padding:6px 16px;
  font-size:16px;
  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; }

/* Visual arrows for dropdown hints (supported in modern Chrome/Edge/Safari) */
.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: allow wrapping of top-level menu */
@media (max-width:700px){
  .menu{ flex-wrap:wrap; }
}

/* =======================
   Content & Footer
   ======================= */
.content{ margin:4px auto; padding:5px 0; }

.content--wide{
  max-width:none;
  width:100%;
  margin:20px;
  padding:1px 16px;
}

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

/* =======================
   Script Panels
   ======================= */
.script-panel{
  border:1px solid #ccc;
  background:#fff;
  padding:20px;
  min-height:120px;    /* visualize when empty */
  overflow:auto;       /* big embeds won’t break layout */
}

/* =======================
   WideFlex Rows & Columns
   ======================= */
.wf-row{
  display:flex;
  flex-wrap:wrap;      /* <-- enables stacking on mobile */
  gap:16px;
  margin:16px 0;
}

/* Generic column wrapper (safe defaults) */
.wf-col{
  display:flex;              /* lets us top-align panel content easily */
  flex-direction:column;
  justify-content:flex-start;
  min-width:0;
}

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

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

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

/* Collapse breakpoints */
@media (max-width:1100px){
  .wf-3 .wf-col{ flex:1 1 calc(50% - 8px); } /* 3-up -> 2-up */
}
@media (max-width:700px){
  .wf-2 .wf-col,
  .wf-3 .wf-col{ flex:1 1 100%; }            /* 2/3-up -> 1-up */
}

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

/* Use on the row: <section class="wf-row wf-2-35-55"> */
.wf-2-35-55{
  /* inherits display:flex; flex-wrap:wrap; gap 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 contain multiple stacked .script-panel) */
.wf-2-35-55 .wf-col:last-child{
  flex:0 0 55%;
  max-width:55%;
  gap:16px;                /* space between stacked scripts */
}

/* Stack to 1-up on mobile */
@media (max-width:700px){
  .wf-2-35-55 .wf-col{
    flex:0 0 100%;
    max-width:100%;
  }
}

/* Utility: make any container stack children vertically with a gap */
.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;           /* stacks on mobile */
  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 variables --c1 / --c2 (defaults are 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 are 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%;
  }
}

/* Utility: stack multiple scripts in a column */
.wf-stack{ display:flex; flex-direction:column; gap:16px; }

/* Page width presets — apply to a wrapper around your content */
.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; } /* edge-to-edge style */