/* ===========================
   BritishV8 responsive tweaks
   =========================== */

/* Make media flexible and prevent overflow */
html { box-sizing: border-box; }
*,*::before,*::after { box-sizing: inherit; }
img, svg, video { max-width: 100%; height: auto; }

/* 1) Container: replace absolute-centering with fluid, centered block */
#main {
  position: relative !important;   /* override absolute */
  left: auto !important;
  top: auto !important;
  margin: 5px auto 0 !important;   /* center */
  width: 100% !important;          /* fluid on small screens */
  max-width: 800px;                /* keep classic width at desktop */
  padding-left: 16px;
  padding-right: 16px;
  background-position: top center; /* preserve banner centering */
}

/* 2) Navbar: let it size naturally and wrap on small screens */
#navbar {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  height: auto !important;
  margin: 0;
  padding: 8px 0;
}

/* Use flex for the top-level menu so items wrap neatly on phones */
ul#navlist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
}
ul#navlist li { float: none !important; }
ul#navlist li a {
  width: auto !important;          /* remove hard 153px width */
  padding: 10px 12px;              /* bigger tap target */
  display: block;
}

/* Keep subnavs hidden until hover/focus; your z-index remains */
ul#subnavlist1,
ul#subnavlist2,
ul#subnavlist3,
ul#subnavlist4,
ul#subnavlist5,
ul#subnavlist6,
ul#subnavlist8 {
  position: absolute;
  visibility: hidden;
}

/* 3) Content blocks: stop absolute positioning and fixed widths */
#text, #text2, #text2b, #text2c, #text2d, #text2e, #text2f, #text3 {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  margin: 16px 0 !important;
  width: 100% !important;
  max-width: 700px;                /* keep readable line length */
}

#illustration, #wrench {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  margin: 16px 0 !important;
  width: 100% !important;          /* stack on mobile */
  text-align: center;
}

/* Footer spans fluid width, keeps brand color */
#navfooter {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  margin: 24px auto 0 !important;
  width: 100% !important;
  max-width: 800px;
  height: auto !important;
  padding: 16px;
  text-align: center;
}


/* ================================
   Hamburger: mobile-first behavior
   ================================ */

/* Visually hide the raw checkbox but keep it accessible if needed */
.nav-toggle {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
  clip-path: inset(50%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}

/* The button that users see on phones/tablets */
.menu-toggle {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  background: #003930;         /* your brand green */
  color: #FFFAEC;              /* your cream text */
  border: 2px outset #FFFAEC;
  border-radius: 4px;
  font: inherit;
  padding: 8px 12px;
  cursor: pointer;
}

/* Three-line burger icon */
.menu-toggle .burger {
  position: relative;
  width: 22px;
  height: 2px;
  background: currentColor;
  display: inline-block;
}
.menu-toggle .burger::before,
.menu-toggle .burger::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: currentColor;
}
.menu-toggle .burger::before { top: -6px; }
.menu-toggle .burger::after  { top:  6px; }

/* Mobile/tablet: hide the navbar until toggled */
#navbar { display: none; }
.nav-toggle:checked ~ #navbar { display: block; }

/* Make the list vertical when opened on small screens */
ul#navlist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0;
  margin: 0;
}
ul#navlist li { float: none; }

/* Ensure dropdowns work without hover on touch */
ul#navlist li:focus-within > ul[id^="subnavlist"],
ul#navlist li:focus > ul[id^="subnavlist"] {
  visibility: visible;
  display: block;
  position: relative;      /* stack under parent item on mobile */
  background: #003930;
  padding: 4px 0;
  margin: 0;
}
ul#navlist li > ul[id^="subnavlist"] li a {
  width: auto; padding: 6px 10px; border: none; text-align: left;
}

/* Prevent images/content from overflowing narrow screens */
img { max-width: 100%; height: auto; }

/* ================================
   Desktop: keep your current look
   ================================ */
@media (min-width: 900px) {
  /* Hide the hamburger UI on desktop */
  .menu-toggle, .nav-toggle { display: none; }

  /* Show your original navbar and layout */
  #navbar { display: block; }

  /* Horizontal menu (and wrapping if you already added it) */
  ul#navlist {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Restore your hover-based dropdowns */
  ul#navlist li:hover > ul[id^="subnavlist"] {
    visibility: visible;
    display: block;
    position: absolute;
    padding: 2px 0 0 0;
    margin: 0;
    background: #003930;
    z-index: 999; /* aligns with your inline style */
  }
  ul#navlist li:hover > ul[id^="subnavlist"] li a {
    min-width: 200px;
    padding: 6px 10px;
    border: none;
    text-align: left;
  }
}