/* ============ Base / existing styles (unchanged) ============ */
* { box-sizing:border-box; margin:0; padding:0; }

body {
  font-family:"Open Sans", Arial, sans-serif;
  background:linear-gradient(135deg,#ffffff 0%,#fff 100%);
  color:#444;
}

header {
  background:#653b00;
  color:#fff;
  padding:1.5rem;
  text-align:center;
  position:relative;
}

header h1 { font-size:1.8rem; }

.menu-icon { display:none; position:absolute; top:1rem; right:1rem; font-size:2rem; cursor:pointer; color:#fff; }
#toggle-menu { display:none; }

nav.hop-menu { margin-bottom:1.5rem; text-align:center; }
nav.hop-menu ul { list-style:none; display:inline-flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-top:.3rem; }

nav.hop-menu a.button {
  display:inline-block; padding:.1rem .4rem; text-decoration:none;
  border:2px solid #653b00; border-radius:2px; background:#653b00; color:#fff;
  font-weight:bold; cursor:pointer; transition:background-color .2s ease;
}
nav.hop-menu a.button:hover { background:#2d4d2d; }

.content {
  margin:2rem auto;
  width:90%; max-width:1000px;
  background:#fff; padding:1.5rem 2rem; border-radius:6px;
  box-shadow:0 3px 10px rgba(0,0,0,.1);
  position:relative;
}

.qr-code {
  position:absolute; bottom:10px; right:10px;
  width:110px; height:110px; border:2px solid #653b00; border-radius:4px;
}

/* ============ Mobile tweaks ============ */
@media (max-width:600px) {
  .menu-icon { display:block; }
  #toggle-menu:not(:checked) ~ nav.hop-menu ul { display:none; }
  #toggle-menu:checked ~ nav.hop-menu ul { display:inline-flex; flex-wrap:wrap; gap:.5rem; justify-content:center; }
  .qr-code { width:80px; height:80px; }
}


/* ============ NEW: full‑width viewer styles ============ */
.viewer {
  margin:0;
  padding:0;
  width:100%;
  max-width:none;
  background:none;
  box-shadow:none;
  position:relative;           /* keep QR positioned */
}

.viewer iframe {
  display:block;
  width:100vw;                 /* stretch edge‑to‑edge */
  height:calc(100vh - 170px);  /* header + nav ≈170 px */
  border:none;
}

@media (max-width:600px) {
  .viewer iframe { height:calc(100vh - 120px); }
}