/* Titan's Pho — responsive overrides.
   The pages themselves are built with inline styles (design-tool export),
   so these rules use !important to win over inline `style=""` at the
   breakpoints below rather than rewriting the pages into classes. */

/* ---- Hamburger nav: base state (desktop) ---- */
.tp-nav-details { display: none; }
.tp-nav-details summary { list-style: none; cursor: pointer; }
.tp-nav-details summary::-webkit-details-marker { display: none; }
.tp-nav-details summary::marker { content: ""; }

.tp-nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 22px;
  line-height: 1;
  color: var(--titan-ink-900);
}

.tp-nav-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--titan-paper-50);
  border: 1px solid var(--titan-line);
  border-radius: 6px;
  padding: 10px;
  box-shadow: 0 12px 28px rgba(30, 30, 30, 0.14);
}

.tp-nav-dropdown a {
  padding: 10px 12px;
  border-radius: 4px;
}

.tp-nav-dropdown a:hover {
  background: var(--titan-paper-100);
}

/* ---- Tablet & phone ---- */
@media (max-width: 768px) {
  /* Nav: collapse the inline link list behind a hamburger */
  .tp-nav { padding-left: 20px !important; padding-right: 20px !important; }
  .tp-nav-links { display: none !important; }
  .tp-nav-details { display: block !important; position: relative; }

  /* Any max-width wrapper: tighten side padding */
  .tp-container { padding-left: 20px !important; padding-right: 20px !important; }

  /* Large section vertical padding */
  .tp-section-pad { padding-top: 56px !important; padding-bottom: 56px !important; }

  /* Section heading scale */
  .tp-section h1 { font-size: 40px !important; }
  .tp-section h2 { font-size: 28px !important; }

  /* Hero */
  .tp-hero-grid { grid-template-columns: 1fr !important; min-height: auto !important; }
  .tp-hero-copy {
    padding: 40px 20px !important;
    max-width: none !important;
    justify-self: stretch !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .tp-hero-copy h1 { font-size: 36px !important; }
  .tp-hero-copy p { font-size: 17px !important; }
  .tp-hero-media { min-height: 280px !important; }

  /* Grids */
  .tp-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .tp-grid-2 { grid-template-columns: 1fr !important; gap: 40px !important; }
  .tp-stats-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .tp-footer-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .tp-menu-dish-grid { grid-template-columns: 1fr !important; }
  .tp-cta-box { padding: 28px !important; }
}

/* ---- Phone ---- */
@media (max-width: 480px) {
  .tp-section h1 { font-size: 32px !important; }
  .tp-section h2 { font-size: 24px !important; }
  .tp-hero-copy h1 { font-size: 30px !important; }
  .tp-grid-3 { grid-template-columns: 1fr !important; }
  .tp-stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .tp-container { padding-left: 16px !important; padding-right: 16px !important; }
}