/* === Your provided shared CSS === */
@font-face { font-family: 'DefaultFont'; src: url('/assets/fonts/codenewroman.otf') format('opentype'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Header1'; src: url('/assets/fonts/conthrax.otf') format('opentype'); font-weight: normal; font-style: normal; }
body { font-family: 'DefaultFont', sans-serif; margin: 0; padding: 0; background: linear-gradient(to bottom, #58b0f0b2, #f0bb4869); color: #000000; font-family: Arial, sans-serif; background-repeat: no-repeat; background-size: 100vw 100vh; background-attachment: fixed; }
.logo { display: block; width: 512px; height: 150px; background: url('/assets/images/logo-long.png') no-repeat center/contain; }
.logo:hover { background-image: url('/assets/images/logo-long-hover.png'); }
.acc-box { display: block; width: 50px; height: 50px; position: absolute; top: 2%; right: 2%; border: 10px solid transparent; border-image-source: url('/assets/images/frame2.png'); border-image-slice: 10 fill; border-image-repeat: round; border-image-width: 5px; border-image-outset: 0; background-image: url('/assets/images/logo.png'); background-size: cover; background-repeat: no-repeat; cursor: pointer; }
.acc-box[data-logged-in="false"] { width: 75px; height: 30px; border-image-source: url('/assets/images/frame2.png'); background-image: url(''); }
.acc-box:hover { border-image-source: url('/assets/images/frameBtnHover.png'); }
.acc-dropdown { display: none; }
.acc-dropdown[data-visible="true"] { display: block; width: 125px; height: 150px; position: absolute; top: -20%; right: 110%; border: 10px solid transparent; border-image-source: url('/assets/images/frame2.png'); border-image-slice: 10 fill; border-image-repeat: round; border-image-width: 5px; border-image-outset: 0; }
.acc-dropdown:hover { border-image-source: url('/assets/images/frameBtnHover.png'); }
.separator { display: block; width: 97.5%; height: 5px; margin: 16px auto; background-color: rgba(255,255,255,0.5); border: none; }
.content-below-header{ position: relative; padding: 0px; }
.center-content-container{ position: absolute; width: 100%; }
.center-content { width: 45%; height: auto; border: 10px solid transparent; border-image-source: url('/assets/images/frame2.png'); border-image-slice: 10 fill; border-image-repeat: round; border-image-width: 5px; border-image-outset: 0; margin: 0px auto; }
.left-content { width: 22.5%; height: auto; border: 10px solid transparent; border-image-source: url('/assets/images/frame2.png'); border-image-slice: 10 fill; border-image-repeat: round; border-image-width: 5px; border-image-outset: 0; position: absolute; left: 10px; margin: 0; }
.right-content-container{ position: absolute; width: 100%; }
.right-content { width: 22.5%; height: auto; border: 10px solid transparent; border-image-source: url('/assets/images/frame2.png'); border-image-slice: 10 fill; border-image-repeat: round; border-image-width: 5px; border-image-outset: 0; position: absolute; right: 10px; top: 0; margin: 0; }
.inner-content, .right-inner-content, .left-inner-content { width: fit-content; height: auto; border: 10px solid transparent; border-image-source: url('/assets/images/frame2.png'); border-image-slice: 10 fill; border-image-repeat: round; border-image-width: 5px; border-image-outset: 0; }
.center{ margin: 5px auto; width: fit-content; }
.right { margin: 5px 0 5px auto; width: fit-content; }
.header-button, .content-button, .text-input-9slice, .toggle-button { font-family: 'DefaultFont', sans-serif; }
.header-button{ margin-left: 5px; height: auto; border: 10px solid transparent; border-image-source: url('/assets/images/frameBtn.png'); border-image-slice: 10 fill; border-image-repeat: round; border-image-width: 5px; border-image-outset: 0; background-color: transparent; cursor: pointer; }
.header-button[data-active="true"], .content-button[data-active="true"], .content-button[data-pf-follow="true"] { border-image-source: url('/assets/images/frameBtnOnHere.png'); }
.header-button:hover, .content-button:hover { border-image-source: url('/assets/images/frameBtnHover.png'); }
.header-button:active, .content-button:active, .toggle-button:active, .dropdown-menu:active { border-image-source: url('/assets/images/frameBtnClick.png'); }
.content-button{ font-size: 16px; border: 10px solid transparent; border-image-source: url('/assets/images/frameBtn.png'); border-image-slice: 10 fill; border-image-repeat: round; border-image-width: 5px; border-image-outset: 0; background-color: transparent; cursor: pointer; }
.content-button[data-leaf="true"]{ border-image-source: url('/assets/images/toggleI.png'); }
.text-input-9slice{ font-size: 16px; width: 200px; padding: 4px; border: 10px solid transparent; background: transparent; outline: none; border-image-source: url('/assets/images/frameBtn.png'); border-image-slice: 10 fill; border-image-repeat: round; border-image-width: 5px; border-image-outset: 0; }
.toggle-button{ font-size: 16px; cursor: pointer; border: 10px solid transparent; border-image-source: url('/assets/images/toggleO.png'); border-image-slice: 10 fill; border-image-repeat: round; border-image-width: 5px; border-image-outset: 0; background-color: transparent; outline: none; }
.toggle-button.active{ border-image-source: url('/assets/images/toggleI.png'); }
.ff-image{ border-radius: 5px; border: 1px solid #0000; }
.dropdown-menu{ border: 10px solid transparent; border-image-source: url('/assets/images/frame2.png'); border-image-slice: 10 fill; border-image-repeat: round; border-image-width: 5px; border-image-outset: 0; margin: 5px 0; padding: 5px; }
.hidden{ display:none; }
.dropdown-submenu{ margin-left:20px; }

/* Header + footer glue */
.fw-header, .fw-footer { width: 97.5%; margin: 8px auto; }
.fw-header .topbar { display:flex; align-items:center; gap:12px; }
.fw-header .search-wrap { flex:1; display:flex; gap:8px; align-items:center; }
.fw-header input[type="search"] { width:100%; }
.fw-footer ul { display:flex; gap:16px; list-style:none; padding:0; margin:0; justify-content:center; }
.fw-footer a { text-decoration:none; }
.modal { position:fixed; inset:0; display:none; align-items:center; justify-content:center; background: rgba(0,0,0,0.4); }
.modal .panel { background:#fff; padding:16px; border-radius:6px; max-height:80vh; overflow:auto; min-width:320px; }
.modal[data-open="true"] { display:flex; }
.card-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:12px; }
.video-card { border:1px solid #ccc; border-radius:6px; padding:8px; background:#fff; }
.video-card img { width:100%; height:120px; object-fit:cover; border-radius:6px; }
.small { font-size:.9rem; color:#444; }

/* ===== Sticky footer and stacking fixes ===== */

/* Make body a vertical flex container so footer can sit at the bottom */
html, body { height: 100%; }
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Keep header and footer on top and clickable */
.fw-header { flex: 0 0 auto; position: relative; z-index: 10; }
.fw-footer {
  flex: 0 0 auto;
  margin-top: auto;          /* push footer to bottom on short pages */
  position: absolute;
  z-index: 10;               /* above main panels */
  background: rgba(255, 255, 255, 0);
}

/* Prevent content from sitting under the footer */
:root { --fw-footer-height: 56px; }
.content-below-header { padding-bottom: var(--fw-footer-height); }

/* Main panels should sit below header and footer in stacking order */
.center-content-container,
.right-content-container,
.left-content,
.right-content,
.center-content {
  z-index: 1;
}

/* Modal should float over everything */
.modal { z-index: 1000; }