/* Tablet-friendly responsive type and a single-line header toolbar. */
header {
  gap: clamp(8px, 2vw, 24px);
  padding-inline: clamp(12px, 2.5vw, 36px);
}

.brand {
  min-width: 0;
  flex: 1 1 auto;
}

.brand img {
  height: clamp(44px, 7vw, 68px) !important;
  max-width: 100%;
  object-fit: contain;
}

.header-actions {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: clamp(4px, 1vw, 8px);
}

.header-actions button {
  white-space: nowrap;
  line-height: 1;
  font-size: clamp(0.8rem, 1.45vw, 1rem);
  padding: clamp(8px, 1.25vw, 10px) clamp(9px, 1.8vw, 15px);
}

.welcome h1 {
  font-size: clamp(1.55rem, 3vw, 2rem);
}

nav button {
  font-size: clamp(0.875rem, 1.5vw, 1rem);
  padding-inline: clamp(12px, 2.2vw, 25px);
}

.menu-text h3 {
  font-size: clamp(0.875rem, 1.4vw, 0.95rem);
}

.order-head h2 {
  font-size: clamp(1.125rem, 2vw, 1.3125rem);
}

@media (max-width: 760px) {
  header {
    height: 72px;
  }

  .content {
    min-height: calc(100vh - 72px);
  }

  .header-actions button {
    font-size: clamp(0.75rem, 2.2vw, 0.875rem);
    padding-inline: clamp(7px, 1.8vw, 11px);
  }
}

/* Keep scrolling inside the kiosk instead of dragging the outer browser page. */
@media screen {
  html { height: 100%; overflow: hidden; overscroll-behavior: none; }
  body { position: fixed; inset: 0; height: 100%; overflow-y: auto; overscroll-behavior-y: none; -webkit-overflow-scrolling: touch; }
  .cart-items, .option-card, .complete-card, .scenario-card { overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
  .modal { overscroll-behavior: none; }
  #fullscreenHelp p, #fullscreenHelp li { font-size: 1rem; line-height: 1.65; }
  #fullscreenHelp li + li { margin-top: .65rem; }
  #fullscreenHelp h2 { padding-right: 24px; }
}