/* ==========================================================================
   Responsive overrides – mobile only (max-width: 820px)
   Desktop layout stays untouched.
   ========================================================================== */

/* ---- Burger button (hidden on desktop) ---- */
#burger-toggle {
  display: none;
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 200;
  background: #dadada;
  border: 1px solid #999;
  border-radius: 4px;
  width: 40px;
  height: 36px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
#burger-toggle span,
#burger-toggle span::before,
#burger-toggle span::after {
  display: block;
  width: 22px;
  height: 2px;
  background: #333;
  margin: 0 auto;
  position: relative;
  transition: transform .25s, opacity .2s;
}
#burger-toggle span::before,
#burger-toggle span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 22px;
}
#burger-toggle span::before { top: -7px; }
#burger-toggle span::after  { top:  7px; }

/* animate to X when open */
#burger-toggle.open span            { background: transparent; }
#burger-toggle.open span::before    { top: 0; transform: rotate(45deg); }
#burger-toggle.open span::after     { top: 0; transform: rotate(-45deg); }

/* ---- Menu overlay backdrop ---- */
#menu-backdrop {
  display: none;
}

@media screen and (max-width: 820px) {

  /* Show burger */
  #burger-toggle { display: block; }

  /* Backdrop */
  #menu-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 149;
  }
  #menu-backdrop.visible { display: block; }

  /* Slide-in sidebar */
  #menu {
    width: 260px !important;
    position: fixed !important;
    top: 0; bottom: 0; left: 0;
    transform: translateX(-100%);
    transition: transform .3s ease;
    z-index: 150;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: 50px;
  }
  #menu.open {
    transform: translateX(0);
  }

  /* Content takes full width */
  #content {
    margin: 0 !important;
    padding-top: 56px; /* room for burger */
  }

  /* --- Fluid widths --- */
  #content p,
  #img-container p {
    width: auto !important;
    max-width: 100% !important;
  }

  #content .container {
    padding: 8px 12px 25px 12px;
  }

  /* All images fluid */
  #content img,
  #img-container img {
    max-width: 100% !important;
    height: auto !important;
    width: auto;
  }

  /* Iframes responsive */
  iframe {
    width: 100% !important;
    max-width: 100%;
    height: 56vw !important;   /* ~16:9 ratio */
    min-height: 260px;
  }

  /* Thickbox thumbnail grid – 2 columns on small screens */
  #img-container a.thickbox {
    display: inline-block;
    width: calc(50% - 6px);
    margin: 0 3px 6px 3px;
    vertical-align: top;
  }
  #img-container a.thickbox img {
    width: 100% !important;
    height: auto !important;
  }

  /* Grow/vaska gallery images */
  .img-bot,
  #img-container .img-bot {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Font sizes bump for readability */
  body {
    font-size: 14px;
  }
  #menu .container p font[size="3"] b,
  #menu .container p b {
    font-size: 18px !important;
  }

  /* Menu link tap targets */
  #menu ul li a {
    display: block;
    padding: 6px 0;
    font-size: 14px;
  }

  /* Section titles in menu */
  #menu ul li.section-title {
    font-size: 13px;
    font-weight: bold;
    padding-top: 8px;
  }
}

/* ---- Thickbox overlay – mobile-friendly ---- */
@media screen and (max-width: 820px) {
  #TB_overlay {
    position: fixed !important;
    inset: 0;
  }
  #TB_window {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.92);
    z-index: 200 !important;
  }
  #TB_window img,
  #TB_Image {
    max-width: 96vw !important;
    max-height: 80vh !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    object-fit: contain;
  }
  #TB_caption {
    color: #ccc !important;
    padding: 8px 12px !important;
    font-size: 13px;
    max-width: 96vw;
  }
  #TB_secondLine {
    color: #aaa !important;
  }
  #TB_secondLine a,
  #TB_caption a {
    color: #ccc !important;
  }
  #TB_closeWindowButton {
    color: #fff !important;
    font-size: 14px;
  }
}

/* Small phones */
@media screen and (max-width: 480px) {
  #img-container a.thickbox {
    width: 100%;
    margin: 0 0 6px 0;
  }
  iframe {
    height: 65vw !important;
    min-height: 200px;
  }
}