/* =========================================================================
   Play and Party — single settings file.
   Re-theme the whole site by editing ONLY the variables in this file.
   Light, dark, and high-contrast are three sets of the same variables.
   Colors come in bg/ink pairs so text is never invisible.
   ========================================================================= */

:root,
[data-theme="light"] {
  /* surfaces + text (pairs) */
  --color-bg: #fff7fb;          /* page background */
  --color-ink: #2b1a2f;         /* text on bg */
  --color-surface: #ffffff;     /* raised sections */
  --color-surface-ink: #2b1a2f; /* text on surface */

  /* brand pairs */
  --color-primary: #e6337f;     /* playful magenta/pink */
  --color-primary-ink: #ffffff;
  --color-secondary: #ffb703;   /* sunny yellow */
  --color-secondary-ink: #3a2a00;
  --color-accent: #1fb6b6;      /* teal accent */
  --color-accent-ink: #062e2e;

  --color-muted: #f3e6ee;       /* soft tint blocks */
  --color-muted-ink: #6b5566;   /* secondary text */

  --color-warning: #c81d3c;     /* form errors */
  --color-warning-ink: #ffffff;

  --color-border: #ecd7e4;
  --color-ring: #e6337f;

  /* shape + scale */
  --radius-card: 1rem;
  --radius-pill: 999px;
  --shadow-soft: 0 10px 30px -12px rgba(43,26,47,.25);
  --measure: 62ch;
}

[data-theme="dark"] {
  --color-bg: #17101b;
  --color-ink: #f6ecf3;
  --color-surface: #221830;      /* clearly lighter than bg */
  --color-surface-ink: #f6ecf3;

  --color-primary: #ff5fa2;
  --color-primary-ink: #2a0016;
  --color-secondary: #ffc94d;
  --color-secondary-ink: #2a1e00;
  --color-accent: #35d6d6;
  --color-accent-ink: #052222;

  --color-muted: #2c2036;
  --color-muted-ink: #c6aebd;

  --color-warning: #ff6b81;
  --color-warning-ink: #2a0008;

  --color-border: #3a2c46;
  --color-ring: #ff5fa2;

  --shadow-soft: 0 10px 30px -12px rgba(0,0,0,.6);
}

/* High-contrast: stronger separation for both intents */
@media (prefers-contrast: more) {
  :root, [data-theme="light"] {
    --color-bg: #ffffff; --color-ink: #12000a;
    --color-surface: #fff0f6; --color-surface-ink: #12000a;
    --color-primary: #b5005e; --color-primary-ink: #ffffff;
    --color-border: #b5005e; --color-muted-ink: #3a2130;
  }
  [data-theme="dark"] {
    --color-bg: #000000; --color-ink: #ffffff;
    --color-surface: #14101a; --color-surface-ink: #ffffff;
    --color-border: #ff8fbb;
  }
}

/* Respect reduced motion — turn off animation/transition. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
      transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* Save-data: drop decorative imagery weight (Tailwind has no shortcut for this). */
@media (prefers-reduced-data: reduce) {
  img[loading="lazy"] { content-visibility: auto; }
}

html { scroll-behavior: smooth; }
body { min-height: 100vh; }

svg { flex: 0 0 auto; }

/* Keep the shared navigation crisp and readable over every page hero. */
#site-header {
  background: #fff !important;
  color: #2b1a2f;
  border-color: #ecd7e4;
}
#site-header .text-surface-ink,
#site-header [data-theme-toggle],
#site-header [data-menu-toggle],
#site-header [data-loc-toggle] { color: #2b1a2f; }
#site-header [data-loc-menu],
#site-header [data-mobile-menu] nav {
  background: #fff;
  color: #2b1a2f;
  border-color: #ecd7e4;
}
#site-header > div:first-child > a img {
  width: auto;
  height: 2.75rem;
}
#site-header nav[aria-label="Primary"] { font-size: 1.0625rem; }

/* Predictable touch targets and icon alignment throughout the shared header. */
[data-theme-toggle],
[data-menu-toggle],
header a[aria-label="WhatsApp us"] {
  min-width: 2.75rem;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
}

[data-theme-toggle],
header a[aria-label="WhatsApp us"] {
  display: inline-flex;
}

[data-menu-toggle] { display: inline-flex; }

@media (min-width: 768px) {
  [data-menu-toggle] { display: none; }
}

[data-mobile-menu] nav { max-height: calc(100vh - 5.5rem); overflow-y: auto; }
[data-mobile-menu] a { min-height: 2.75rem; display: flex; align-items: center; }
[data-loc-toggle] .dropdown-chevron { transition: transform .2s ease; }
[data-loc-toggle][aria-expanded="true"] .dropdown-chevron { transform: rotate(180deg); }

/* WhatsApp CTA: site-brand pink with a clear, consistently sized white glyph. */
.whatsapp-icon { color: #25D366; }

.whatsapp-cta {
  position: relative;
  isolation: isolate;
}
a.whatsapp-cta > svg.whatsapp-icon {
  color: #fff;
  transition: transform .2s ease;
}
a.whatsapp-cta-on-light > svg.whatsapp-icon { color: #25D366; }
.whatsapp-cta:hover svg { transform: scale(1.08) rotate(-4deg); }
.whatsapp-cta:focus-visible { outline-offset: 3px; }

@media (max-width: 639px) {
  header .whatsapp-cta {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border-radius: 999px;
  }
}

/* Homepage hero keeps the original venue photography while improving readability. */
.hero-home {
  min-height: min(760px, calc(100vh - 4rem));
  display: grid;
  align-items: center;
  background-image: url('../images/play-and-party-bengaluru.jpeg');
  background-size: cover;
  background-position: center;
}

.hero-overlay {
  background:
    linear-gradient(90deg, rgba(31, 10, 35, .88) 0%, rgba(31, 10, 35, .64) 52%, rgba(31, 10, 35, .26) 100%),
    linear-gradient(0deg, rgba(31, 10, 35, .32), transparent 45%);
}

.hero-home h1,
.hero-home p { text-shadow: 0 2px 18px rgba(0, 0, 0, .28); }

/* Fixed-color contrast helper for white controls in both site themes. */
.contrast-on-white { color: #2b1a2f; }

.location-card { position: relative; overflow: hidden; }
.location-card::after {
  content: '';
  position: absolute;
  inset: auto -2rem -3.5rem auto;
  width: 8rem;
  height: 8rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  transition: transform .25s ease;
}
.location-card:hover::after { transform: scale(1.2); }

.service-card {
  min-width: 0;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.service-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-primary);
  box-shadow: 0 16px 36px -18px rgba(43, 26, 47, .36);
}
.service-card-media { aspect-ratio: 4 / 3; overflow: hidden; }
.service-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.service-card:hover .service-card-media img { transform: scale(1.035); }
.service-card-copy {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.location-service-list a { min-height: 2.75rem; }
.feature-pill {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .8rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
}

/* Hennur location landing page. */
.location-hero {
  min-height: min(700px, calc(100vh - 7rem));
  display: grid;
  align-items: center;
}
.location-hero-overlay {
  background:
    linear-gradient(90deg, rgba(31, 10, 35, .94) 0%, rgba(31, 10, 35, .74) 50%, rgba(31, 10, 35, .28) 100%),
    linear-gradient(0deg, rgba(31, 10, 35, .35), transparent 55%);
}
.location-hero h1,
.location-hero p { text-shadow: 0 2px 20px rgba(0, 0, 0, .3); }

.location-highlight {
  min-height: 5.75rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1.1rem;
  border-inline-end: 1px solid var(--color-border);
}
.location-highlight:last-child { border-inline-end: 0; }
.location-highlight strong,
.location-highlight span { display: block; }
.location-highlight strong { font-size: .9rem; }
.location-highlight span { margin-top: .1rem; color: var(--color-muted-ink); font-size: .75rem; }

.location-number {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: var(--color-primary-ink);
  background: var(--color-primary);
  font-size: .75rem;
  font-weight: 700;
}

.location-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, 13rem);
  gap: 1rem;
}
.location-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
}
.location-gallery img:first-child { grid-column: span 2; grid-row: span 2; }
.location-gallery img:nth-child(2) { grid-column: span 2; }

.location-step {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, #fff 10%, transparent);
}
.location-step > span {
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--color-secondary);
  color: var(--color-secondary-ink);
  font-weight: 700;
}
.location-step p { opacity: .88; font-size: .875rem; line-height: 1.55; }

.location-faq {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  overflow: hidden;
}
.location-faq summary {
  min-height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
}
.location-faq summary::-webkit-details-marker { display: none; }
.location-faq summary svg { transition: transform .2s ease; }
.location-faq[open] summary svg { transform: rotate(180deg); }
.location-faq p { padding: 0 1.25rem 1.25rem; color: var(--color-muted-ink); line-height: 1.65; }

.location-cta {
  background:
    radial-gradient(circle at 88% 15%, rgba(255, 183, 3, .45), transparent 24%),
    linear-gradient(135deg, #401542, #8f1d5e 62%, #e6337f);
}
.location-cta::after {
  content: '';
  position: absolute;
  width: 13rem;
  height: 13rem;
  right: -4rem;
  bottom: -7rem;
  border: 2rem solid rgba(255, 255, 255, .08);
  border-radius: 999px;
}

.location-mobile-actions {
  position: fixed;
  z-index: 60;
  inset: auto .75rem .75rem;
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: .5rem;
  padding: .5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-surface) 94%, transparent);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(14px);
}
.location-mobile-actions > a {
  min-height: 2.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  border-radius: var(--radius-pill);
  font-size: .875rem;
  font-weight: 700;
}
.location-mobile-actions > a:first-child { color: var(--color-surface-ink); background: var(--color-muted); }
.location-mobile-actions > a:last-child { color: #fff; background: var(--color-primary); }

@media (min-width: 768px) {
  .location-mobile-actions { display: none; }
}

main img { background-color: var(--color-muted); }

@media (max-width: 639px) {
  .hero-home { min-height: 620px; background-position: 58% center; }
  .hero-overlay { background: rgba(31, 10, 35, .72); }
  .hero-home h1 { font-size: clamp(2.75rem, 13vw, 3.5rem); }
  .service-card:hover { transform: none; }
  .location-hero { min-height: 620px; }
  .location-hero-overlay { background: rgba(31, 10, 35, .72); }
  .location-highlight { min-height: 6.5rem; padding: .9rem; border-bottom: 1px solid var(--color-border); }
  .location-highlight:nth-child(2n) { border-inline-end: 0; }
  .location-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 15rem 10rem 10rem; }
  .location-gallery img:first-child { grid-column: span 2; grid-row: auto; }
  .location-gallery img:nth-child(2) { grid-column: auto; }
  body { padding-bottom: 5rem; }
}

/* Embedded map/widget tweaks (markup isn't ours) */
iframe { display: block; width: 100%; }