/* ====== Reset ====== */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }

body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }

table { border-collapse: collapse; border-spacing: 0; }

/* ====== About box ====== */
.about {
  margin: 70px auto 40px;
  padding: 8px;
  width: 260px;
  font: 10px/18px 'Lucida Grande', Arial, sans-serif;
  color: #666;
  text-align: center;
  text-shadow: 0 1px rgba(255, 255, 255, 0.25);
  background: rgba(250, 250, 250, 0.8);
  border-radius: 4px;
  background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.1));
  box-shadow: inset 0 1px rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.1), 0 0 6px rgba(0,0,0,.2);
}
.about a {
  color: #333; text-decoration: none; border-radius: 2px; transition: background .1s;
}
.about a:hover {
  text-decoration: none; background: rgba(255,255,255,.7);
}
.about-links { height: 30px; }
.about-links > a { float: left; width: 50%; line-height: 30px; font-size: 12px; }
.about-author { margin-top: 5px; }
.about-author > a { padding: 1px 3px; margin: 0 -1px; }

/* ====== Base typography / page ====== */
body, nav, .nav > li > a, #footer, h1, h2, h3, p, label, input, textarea {
  font-family: Impact, Charcoal, sans-serif;
}
body {
  font: 13px/20px 'Lucida Grande', Tahoma, Verdana, sans-serif;
  color: #404040;
  background: #303335;
}

/* ====== Container ====== */
.container {
  margin: 40px auto;
  width: min(1200px, 94vw);   /* responsive instead of fixed 720px */
  text-align: center;
}

/* ====== Images / media scale ====== */
img, iframe, video { max-width: 100%; height: auto; display: block; }

/* ====== Nav (desktop style preserved) ====== */
.nav { height: 48px; display: inline-block; }
.nav > li, .nav:active > .active {
  float: left; position: relative; margin: 0 0 4px; height: 44px;
  color: #ccc; text-shadow: 0 1px rgba(0,0,0,.9);
  background-color: rgba(0,0,0,.05);
  border: 1px solid #232428; border-bottom-color: #1f2326;
  background-image: linear-gradient(to bottom, rgba(255,255,255,.08), rgba(255,255,255,0));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 2px #262a2e, 0 3px #1f2326, 0 4px 3px rgba(0,0,0,.2);
}
.nav > li:hover {
  color: #b0d157;
  text-shadow: 0 1px black, 0 0 20px rgba(255,255,255,.5);
}
.nav > li.active,
.nav > .active:active,
.nav > li:active {
  z-index: 2; margin: 4px 0 0; height: 43px; color: #aaa;
  text-shadow: 0 1px black;
  background-color: rgba(255,255,255,.03);
  border-color: #212425; border-width: 1px 0;
  background-image: linear-gradient(to bottom, rgba(0,0,0,.2), rgba(0,0,0,0));
  box-shadow: inset 0 1px rgba(255,255,255,.05), inset 0 -1px 1px rgba(0,0,0,.15),
              1px 0 rgba(0,0,0,.05), -1px 0 rgba(0,0,0,.05), 0 1px rgba(255,255,255,.05);
}
.nav > li:active { z-index: 3; }
.nav > li:first-child { border-left-width: 1px !important; border-left-color: #212425; border-radius: 5px 0 0 5px; }
.nav > li:last-child  { border-right-width: 1px !important; border-right-color: #212425; border-radius: 0 5px 5px 0; }
.nav > li + li, .nav:active > .active + li, .nav:active > li + .active { border-left-width: 0; }
.nav > .active + li,
.nav > .active:active + li,
.nav > li:active + li,
.nav > li:active + .active { border-left-width: 1px; }
.nav > li > a {
  display: block; line-height: 44px; padding: 0 20px; font-size: 12px; font-weight: bold;
  color: inherit; text-decoration: none; outline: 0;
}
.nav .nav-icon { padding: 0 15px; }

/* ====== Icon sprite ====== */
[class*="icon-"] {
  display: inline-block; width: 16px; height: 16px; vertical-align: text-top;
  background-image: url("../img/icons.png"); background-repeat: no-repeat; background-color: transparent;
  font: 0/0 serif; text-shadow: none; color: transparent;
}
.icon-home { background-position: 0 0; }

/* ====== Ninja Slider responsive video ====== */
#ninja-slider { width: 100%; }
#ninja-slider .slider-inner { width: 100%; }
#ninja-slider .video,
#ninja-slider .video-container {
  position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
}
@supports not (aspect-ratio: 16 / 9) {
  #ninja-slider .video,
  #ninja-slider .video-container { height: 0; padding-bottom: 56.25%; }
}
#ninja-slider .video iframe,
#ninja-slider .video-container iframe {
  position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0;
}

/* ====== Simple utility ====== */
img { max-width: 100%; height: auto; }
.nav-button { display: inline-block; padding: 10px; font-size: 1em; }

/* ====== Mobile/Tablet fixes for nav ====== */
@media (max-width: 768px) {
  .nav {
    display: flex !important;
    flex-wrap: nowrap !important;     /* keep everything on one row */
    overflow-x: auto !important;      /* scroll horizontally if too wide */
    -webkit-overflow-scrolling: touch;
    gap: 6px !important;              /* control spacing */
    padding: 10px 12px;
    height: auto !important;
    white-space: nowrap;
  }

  .nav > li {
    float: none !important;
    flex: 0 0 auto !important;
    margin: 0 !important;             /* no vertical margin */
    height: auto !important;
  }

  .nav > li > a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 12px 14px !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  .nav > li.active,
  .nav > .active:active,
  .nav > li:active {
    margin: 0 !important;
    height: auto !important;
    border-width: 1px !important;
    box-shadow:
      inset 0 1px rgba(255,255,255,.05),
      0 2px #262a2e,
      0 3px #1f2326;
  }

  .nav-button { display: block; width: 100%; }
  body { font-size: 1rem; padding: 10px; }
}
/* === Remove the residual vertical gap between nav rows on mobile === */
@media (max-width: 768px) {
  /* ensure single row or tight wrap rules are already in place */
  .nav { display:flex !important; flex-wrap:wrap !important; gap:6px 6px !important; }

  /* nuke bottom margin if any */
  .nav > li { margin-bottom: 0 !important; }

  /* flatten the 3D look that creates visual "space" between rows */
  .nav > li,
  .nav > li:hover,
  .nav > li.active,
  .nav > .active:active,
  .nav > li:active {
    border-bottom-color: transparent !important;   /* no extra line under each tab */
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.05),       /* keep subtle bevel */
      0 1px #262a2e,                               /* tiny base line */
      0 0 0 rgba(0,0,0,0) !important;              /* remove the big 0 4px 3px shadow */
  }

  /* If you want ZERO visible gap between wrapped rows, remove the grid/flex gap vertically */
  .nav { row-gap: 0 !important; } /* keep horizontal gap from 'gap' */
}
/* === Mobile nav: remove gaps between wrapped rows === */
@media (max-width: 768px) {
  .nav {
    display: flex !important;
}
/* === iPhone (mobile) nav: 2 rows OK, but NO GAPS between buttons === */
/* Paste this AT THE VERY END of your CSS */
@media (max-width: 768px) {
  /* Make the nav a single bordered box; we’ll remove all per-button spacing */
  .nav {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;              /* no built-in gaps */
    padding: 0 !important;          /* no inner padding */
    margin: 0 !important;
    overflow: hidden;                 /* hide any tiny sub-pixel seams */
    border: 1px solid #212425;        /* optional outer border */
    border-radius: 6px;               /* optional rounding for the whole group */
    background: rgba(0,0,0,0.05);
  }

  /* Each button tile: remove margins, borders, shadows that create “gaps” */
  .nav > li,
  .nav > li:hover,
  .nav > li.active,
  .nav > .active:active,
  .nav > li:active {
    float: none !important;
    margin: 0 !important;           /* kill margin-bottom and any side margins */
    height: auto !important;
    border: 0 !important;           /* remove per-button borders that double up */
    box-shadow: none !important;      /* remove drop shadow that looks like space */
    background: transparent !important;
  }

  /* The clickable area fills its tile with zero spacing */
  .nav > li > a {
    display: block !important;
    padding: 12px 14px !important;    /* touch size; change if you want tighter */
    line-height: 1.2 !important;
    font-size: 16px !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    color: inherit !important;
    border: 0 !important;
    background: transparent !important;
  }

  /* Remove the desktop “pressed” offset that creates vertical misalignment */
  .nav > li.active,
  .nav > .active:active,
  .nav > li:active {
    margin: 0 !important;
    transform: translateY(0) !important;
  }

  /* Prevent any pseudo-element underlines/bars from adding space */
  .nav::before, .nav::after,
  .nav > li::before, .nav > li::after,
  .nav > li > a::before, .nav > li > a::after {
    content: none !important;
    display: none !important;
  }
}
/* ====== Mobile Header: centered & neat ====== */
@media (max-width: 768px) {
  .nav {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);   /* 4 per row */
    justify-items: center;
    gap: 10px;
    padding: 12px;
    margin: 0 auto;
    max-width: 95%; /* balanced from sides */
    border: none;    /* remove extra big box if you don’t want it */
    background: transparent;
  }

  .nav > li {
    float: none !important;
    margin: 0 !important;
    width: 100%;
  }

  .nav > li > a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
    font-size: 16px;
    text-decoration: none;
  }
}

/* ====== Beta Testing Section Fix ====== */
@media (max-width: 768px) {
  /* Ensure headings don’t overlap */
  h1, h2, h3, .beta-title {
    font-size: clamp(20px, 6vw, 32px); /* responsive font size */
    line-height: 1.3;
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Form fields stack neatly */
  form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }

  form input, form select, form textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
}
/* Long label text wraps normally; no absolute/right positioning */
  .consent label,
  .gdpr label,
  .checkbox-row label,
  .checkbox label,
  .form-consent label,
  input[type="checkbox"] + label {
    position: static !important;
    float: none !important;
    display: block !important;
    flex: 1 1 auto;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    line-height: 1.4;
    margin: 0 !important;
  }
}

/* === Beta testing box styling === */
.beta-wrap {
  text-align:center;
  margin:40px auto;
  max-width:900px;
  padding:30px 28px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:18px;
  background:transparent;
  box-shadow:0 6px 22px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.03);
}

/* === Fix for the title to be clearly visible and not overlap === */
.beta-title {
  color: #fff;
  font-size: 260%;
  text-align: center;
  margin: 0 0 8px 0;
  padding: 0;
  text-shadow: 1px 1px 2px #000;
  font-family: Impact, Charcoal, sans-serif;
}

/* === Fix for the checkbox and text alignment === */
.beta-consent {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ddd;
  font-family: Impact, Charcoal, sans-serif;
  font-size: 14px;
  line-height: 1.4;
}

.beta-consent input[type="checkbox"] {
  flex-shrink: 0;
}

.beta-sub {
    font-size:20px;
    color:#e7e7e7;
    margin:0 0 22px 0;
    font-family:Impact,Charcoal,sans-serif;
}

.beta-form {
    display:grid;
    gap:16px;
    max-width:640px;
    margin:0 auto;
    text-align:left;
}

.beta-label {
    color:#f0f0f0;
    font-family:Impact,Charcoal,sans-serif;
    font-size:18px;
}

.beta-input, .beta-select, .beta-textarea {
    width:100%;
    padding:12px 12px;
    margin-top:6px;
    border-radius:10px;
    background:#1e1e1e;
    border:1px solid #3a3a3a;
    color:#f5f5f5;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.35);
}

.beta-input::placeholder, .beta-textarea::placeholder {
    color:#9a9a9a;
}

.beta-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.beta-btn {
    margin-top:6px;
    background:#b61419;
    color:#fff;
    font-family:Impact,Charcoal,sans-serif;
    font-size:20px;
    font-weight:bold;
    padding:12px 24px;
    border:none;
    border-radius:12px;
    cursor:pointer;
    box-shadow:0 6px 14px rgba(182,20,25,.35);
}

.beta-btn:hover {
    background:#d11c21;
}

.beta-small {
    color:#cfcfcf;
    font-size:12px;
    opacity:.8;
    text-align:center;
    font-family:Impact,Charcoal,sans-serif;
    margin-top:6px;
}
/*
 * FINAL FIXES FOR BETA TESTING SECTION
 * Place this code at the VERY END of your style.css file to ensure it works.
 */

.beta-title {
  color: #fff !important;
  text-shadow: 1px 1px 3px #000 !important;
  font-size: clamp(2.5em, 8vw, 260%) !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  word-wrap: break-word !important;
}

.beta-consent {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  word-wrap: break-word !important;
  color: #ddd !important;
}

.beta-consent input[type="checkbox"] {
  flex-shrink: 0 !important;
}