/* ===========================================================
   Theme-only fixes, loaded right after main.css.

   main.css is copied from the prototype by tools/sync-prototype.js
   and must not be edited in the theme. Each rule below is a fix the
   prototype does not have yet. When the prototype owner adds a rule
   to prototype/css/main.css, delete it here (see docs/THEME.md,
   "Theme-only CSS to sync back").
   =========================================================== */

/* 1. WhatsApp button over the hero text.
      The fixed .wa button (16px from the bottom, 50px tall) covered
      "Udaipur, Rajasthan" in the hero bar at 390px wide, and the hero
      line at 768px and 1280px. Keep the bar above the button. */
.hero__bar { bottom: max(clamp(1.5rem, 4vh, 2.5rem), calc(16px + 50px + 1rem)); }

/* 2. Enquiry form, "Other" country code.
      assets/js/wp-bridge.js adds a small code field after the list;
      it takes a middle column while "Other" is chosen. The list only
      has to show "Other" then, so it narrows and the phone number
      keeps room for 9 to 10 digits at 390px wide. */
.field__phone.is-other { grid-template-columns: 6.6rem 4.6rem minmax(0, 1fr); }
.field__code[hidden] { display: none; }

/* 3. Phones: shorter page (owner, 17 Sep 2026).
      Services become a side-swipe row instead of six stacked cards,
      the footer clears the WhatsApp button, and the form is tighter. */
@media (max-width: 760px) {
  .svc__list { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 var(--pad) .4rem; margin-inline: calc(var(--pad) * -1); }
  .svc__list::-webkit-scrollbar { display: none; }
  .svc__list::before, .svc__no { display: none; }
  .svc__item { flex: 0 0 84%; scroll-snap-align: center; }
  .svc__card, .motion .svc__item:not(.is-active) .svc__card { height: 100%; align-content: start; opacity: 1; transform: none; }
  .svc__media { aspect-ratio: 16 / 10; }
  .svc__tags li:nth-child(n+3) { display: none; }
  .svc__intro { margin-bottom: .4rem; }
  .footer__base { padding-bottom: calc(16px + 50px + .5rem); }
  .contact { padding-block: 2.5rem; }
  .enquiry .field textarea { min-height: 64px; }
  .tags, .svc__tags li { font-size: .7rem; }
}

/* 4. Phones: shorter enquiry form. Month and guests share a row. */
@media (max-width: 760px) {
  .enquiry__grid { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .enquiry__grid > .field, .enquiry__grid > .consent { grid-column: 1 / -1; }
  .enquiry__grid > .field:has(#eq-date), .enquiry__grid > .field:has(#eq-guests) { grid-column: auto; }
  .contact__grid { gap: 1.6rem; }
  .contact__list { gap: .5rem; }
}

/* Phone and tablet menu (owner, 17 Sep 2026): compact numbered list, staggered entrance, contact card. */
.overlay { align-items: start; overflow-y: auto; padding: 92px 0 2rem; }
.overlay__grid { align-items: start; gap: 2rem; }
.overlay__nav { counter-reset: m; border-top: 1px solid var(--line-dark); }
.overlay__nav a { counter-increment: m; display: flex; align-items: baseline; gap: 1rem; padding: .78rem 0; border-bottom: 1px solid var(--line-dark); font-family: var(--sans); font-weight: 600; letter-spacing: -.03em; font-size: clamp(1.55rem, 6.4vw, 2.6rem); line-height: 1.1; color: var(--cream); opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .6s var(--ease-out), color .3s var(--ease), padding .4s var(--ease-out); }
.overlay__nav a::before { content: counter(m, decimal-leading-zero); font-size: .66rem; font-weight: 700; letter-spacing: .16em; color: var(--gold); min-width: 1.6rem; }
.overlay__nav a::after { content: "→"; margin-left: auto; font-size: 1rem; color: var(--gold); opacity: 0; transform: translateX(-8px); transition: opacity .3s var(--ease), transform .4s var(--ease-out); }
.overlay__nav a:hover, .overlay__nav a:focus-visible { color: #E2C08F; padding-left: .3rem; }
.overlay__nav a:hover::after, .overlay__nav a:focus-visible::after { opacity: 1; transform: none; }
.overlay__nav a:hover, .overlay__nav a:focus-visible { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0; }
.menu-open .overlay__nav a { opacity: 1; transform: none; }
.menu-open .overlay__nav a:nth-child(2) { transition-delay: .04s; } .menu-open .overlay__nav a:nth-child(3) { transition-delay: .08s; }
.menu-open .overlay__nav a:nth-child(4) { transition-delay: .12s; } .menu-open .overlay__nav a:nth-child(5) { transition-delay: .16s; }
.menu-open .overlay__nav a:nth-child(6) { transition-delay: .2s; } .menu-open .overlay__nav a:nth-child(7) { transition-delay: .24s; }
.overlay__side { gap: .2rem; padding: 1.1rem 1.2rem; border-radius: var(--r); background: rgba(251,245,239,.06); font-size: .9rem; }
.overlay__side .eyebrow { margin-bottom: .5rem; color: var(--gold); }
.overlay__side a, .overlay__side span:not(.eyebrow) { padding: .35rem 0; word-break: break-word; }
.overlay__side a:hover { color: #E2C08F; }
@media (prefers-reduced-motion: reduce) { .overlay__nav a { opacity: 1; transform: none; transition: none; } }