/*
Theme Name: Agni Miami
Theme URI: https://agnimiami.com
Description: Custom child theme for Agni Miami — a hot yoga, strength & recovery studio in Miami. Dark "Fire + Ice" brand system built on Twenty Twenty-Five with Gutenberg blocks, block patterns and theme.json tokens. Design ported from the Agni reference site.
Author: Agency Next
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
Text Domain: agni-miami
*/

/* ==========================================================================
   Agni Miami — brand design system
   Fire (magenta) + Ice (violet) + Lime accent + Electric-blue tint.
   Colour/typography tokens live in theme.json; this file adds the brand
   textures, gradients, cards, buttons and motion that theme.json can't express.
   ========================================================================== */

:root {
  --agni-fire: #da1fb8;
  --agni-ice: #703dff;
  --agni-lime: #b8f42f;
  --agni-tint: #26a8ff;
  --agni-ink: #0b0b0f;
  --agni-surface: #16151c;
  --agni-light: #f7f5f2;
  --agni-muted-dark: #a7a3af;
  --agni-muted-light: #6b6b76;
  --agni-radius: 8px;
}

/* ---------- Base ---------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}
body {
  background-color: var(--agni-ink);
  color: var(--agni-light);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection {
  background: var(--agni-fire);
  color: var(--agni-light);
}
a { text-underline-offset: 3px; }
:where(a):focus-visible,
:where(button):focus-visible,
:where(input, textarea, select):focus-visible {
  outline: 2px solid var(--agni-tint);
  outline-offset: 3px;
}

/* Prevent horizontal scroll from full-bleed sections WITHOUT clipping an
   ancestor of the sticky header (overflow:clip/hidden on an ancestor breaks
   position:sticky on iOS/mobile). Scope the clip to the page content only. */
main.wp-block-group { overflow-x: clip; }
/* Kill the default block gap between the header and the page content. */
.wp-site-blocks > main { margin-block-start: 0 !important; }

/* ---------- Typography helpers ---------- */
.agni-display,
h1, h2, h3 {
  font-family: var(--wp--preset--font-family--geist, "Geist", system-ui, sans-serif);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.01em;
}
.agni-accent {
  font-family: var(--wp--preset--font-family--fraunces, "Fraunces", Georgia, serif);
  font-style: italic;
  font-weight: 400;
}
.agni-eyebrow {
  font-size: clamp(0.72rem, 1.4vw, 0.82rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0;
}
.has-fire-color .agni-eyebrow { color: var(--agni-fire); }

.gradient-text {
  background: linear-gradient(100deg, #f7f5f2 6%, #da1fb8 55%, #703dff 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-block: 0.14em;
  display: inline-block;
}

/* ---------- Atmosphere: grain + mesh gradients ---------- */
.grain { position: relative; isolation: isolate; }
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.07;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.grain > * { position: relative; z-index: 1; }

.mesh-dark {
  background-color: var(--agni-ink);
  background-image:
    radial-gradient(55% 50% at 80% 6%, rgba(112, 61, 255, 0.28), transparent 70%),
    radial-gradient(45% 45% at 8% 92%, rgba(218, 31, 184, 0.22), transparent 72%);
}
.mesh-light {
  background-color: var(--agni-light);
  background-image:
    radial-gradient(60% 55% at 12% 8%, rgba(112, 61, 255, 0.16), transparent 70%),
    radial-gradient(50% 50% at 88% 84%, rgba(218, 31, 184, 0.14), transparent 72%);
}
.mesh-fire {
  background-image: linear-gradient(120deg, #da1fb8 0%, #8b2ce0 52%, #703dff 100%) !important;
  color: var(--agni-light);
}
.hairline-top { border-top: 1px solid rgba(38, 168, 255, 0.2); }

/* ---------- Buttons (core button block + brand variants) ---------- */
.wp-block-button__link {
  border-radius: var(--agni-radius);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.85rem 1.6rem;
  line-height: 1.2;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  will-change: transform;
}
.wp-block-button__link:hover { transform: scale(1.03); }
.wp-block-button.btn-big .wp-block-button__link { padding: 1.05rem 2rem; font-size: 1.02rem; }

.btn-fire .wp-block-button__link {
  background: var(--agni-fire);
  color: var(--agni-light);
  box-shadow: 0 10px 30px -10px rgba(218, 31, 184, 0.85);
}
.btn-fire .wp-block-button__link:hover { box-shadow: 0 14px 44px -8px rgba(218, 31, 184, 1); }

.btn-ice .wp-block-button__link {
  background: var(--agni-ice);
  color: var(--agni-light);
  box-shadow: 0 10px 30px -10px rgba(112, 61, 255, 0.85);
}
.btn-ice .wp-block-button__link:hover { box-shadow: 0 14px 44px -8px rgba(112, 61, 255, 1); }

.btn-ghost-blue .wp-block-button__link {
  background: transparent;
  color: var(--agni-tint);
  border: 1.5px solid var(--agni-tint);
}
.btn-ghost-blue .wp-block-button__link:hover { box-shadow: 0 0 28px -6px rgba(38, 168, 255, 0.8); }

.btn-ghost-lime .wp-block-button__link {
  background: transparent;
  color: var(--agni-lime);
  border: 1.5px solid var(--agni-lime);
}
.btn-ghost-lime .wp-block-button__link:hover { box-shadow: 0 0 28px -6px rgba(184, 244, 47, 0.8); }

.btn-ghost-ink .wp-block-button__link {
  background: transparent;
  color: var(--agni-ink);
  border: 1.5px solid rgba(11, 11, 15, 0.3);
}
.btn-ghost-ink .wp-block-button__link:hover {
  border-color: var(--agni-fire);
  color: var(--agni-fire);
  box-shadow: 0 0 28px -8px rgba(218, 31, 184, 0.6);
}

/* ---------- Cards ---------- */
.agni-card {
  border: 1px solid rgba(247, 245, 242, 0.14);
  background: var(--agni-surface);
  border-radius: var(--agni-radius);
  height: 100%;
}
.agni-card--light {
  border: 1px solid rgba(11, 11, 15, 0.1);
  background: #ffffff;
  color: var(--agni-ink);
  border-radius: var(--agni-radius);
  height: 100%;
}
.agni-muted { color: var(--agni-muted-dark); }
.agni-muted-light { color: var(--agni-muted-light); }

/* Format / class cards with image background */
.agni-format-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--agni-radius);
  border: 1px solid rgba(11, 11, 15, 0.1);
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--agni-light);
  transition: transform 0.3s ease;
}
.agni-format-card:hover { transform: translateY(-4px); }
.agni-format-card .agni-format-card__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.agni-format-card .agni-format-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.72;
  transition: transform 0.5s ease;
}
.agni-format-card:hover .agni-format-card__media img { transform: scale(1.05); }
.agni-format-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, var(--agni-ink) 4%, rgba(11, 11, 15, 0.55) 46%, transparent 100%);
}
.agni-format-card > .agni-format-card__body { position: relative; z-index: 2; }
.agni-format-card--hero { min-height: 460px; }

/* Trophy / award badge */
.agni-award-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  border: 1px solid rgba(184, 244, 47, 0.45);
  background: rgba(11, 11, 15, 0.75);
  border-radius: var(--agni-radius);
  padding: 0.55rem 0.95rem;
  color: var(--agni-light);
  font-size: 0.82rem;
  line-height: 1.3;
}
.agni-award-badge svg { flex: 0 0 auto; color: var(--agni-lime); }

/* Chips */
.agni-chips { display: flex; flex-wrap: wrap; gap: 0.75rem; list-style: none; padding: 0; margin: 0; }
.agni-chips li {
  border: 1px solid rgba(247, 245, 242, 0.2);
  background: var(--agni-surface);
  border-radius: var(--agni-radius);
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}
.agni-chips--light li { border-color: rgba(11, 11, 15, 0.15); background: #fff; color: var(--agni-ink); }

/* ---------- Hero ---------- */
.agni-hero {
  position: relative;
  isolation: isolate;
  min-height: 88vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.agni-hero .agni-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.agni-hero .agni-hero__overlay--mesh {
  background: linear-gradient(to top right, rgba(112, 61, 255, 0.5), rgba(11, 11, 15, 0.5) 50%, rgba(218, 31, 184, 0.4));
  opacity: 0.9;
}
.agni-hero .agni-hero__overlay--fade {
  background: linear-gradient(to top, var(--agni-ink), rgba(11, 11, 15, 0.4) 55%, transparent);
}
@media (min-width: 1024px) { .agni-hero { min-height: 100vh; } }

/* Readability of text set over cover images (hero + interior heroes) */
.wp-block-cover__inner-container :is(h1, h2, p) {
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.7), 0 1px 4px rgba(0, 0, 0, 0.55);
}
.wp-block-cover__inner-container .agni-award-badge { text-shadow: none; }

/* Cover blocks used as hero fallback tint */
.agni-tint-ice::after { background-color: rgba(112, 61, 255, 0.35) !important; }

/* ---------- Marquee (testimonials) ---------- */
.agni-marquee { position: relative; overflow: hidden; }
.agni-marquee__track {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  animation: agni-marquee 46s linear infinite;
}
.agni-marquee:hover .agni-marquee__track { animation-play-state: paused; }
@keyframes agni-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
.agni-quote {
  flex: 0 0 auto;
  width: 320px;
  border: 1px solid rgba(247, 245, 242, 0.15);
  background: var(--agni-surface);
  border-radius: var(--agni-radius);
  padding: 1.5rem;
}
@media (min-width: 640px) { .agni-quote { width: 380px; } }
.agni-quote__mark { color: var(--agni-lime); font-family: Georgia, serif; font-size: 2.4rem; line-height: 1; }
.agni-quote blockquote { margin: 0.5rem 0 1rem; font-size: 1.05rem; line-height: 1.6; }
.agni-quote figcaption .n { font-weight: 600; }
.agni-quote figcaption .c { color: var(--agni-muted-dark); font-size: 0.9rem; }

/* ---------- Floating CTA ---------- */
.agni-floating-cta {
  position: fixed;
  z-index: 60;
  right: 0; left: 0; bottom: 0;
  transform: translateY(1rem);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  pointer-events: none;
}
.agni-floating-cta.is-visible { transform: none; opacity: 1; pointer-events: auto; }
.agni-floating-cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.5rem;
  background: var(--agni-fire);
  color: var(--agni-light);
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 -8px 30px -10px rgba(218, 31, 184, 0.9);
}
.agni-floating-cta a:hover { transform: scale(1.02); }
@media (min-width: 640px) {
  .agni-floating-cta { left: auto; right: 1.5rem; bottom: 1.5rem; }
  .agni-floating-cta a { height: 2.9rem; padding: 0 1.5rem; border-radius: var(--agni-radius); box-shadow: 0 10px 34px -8px rgba(218, 31, 184, 0.95); }
}

/* ---------- Scroll reveal (progressive enhancement) ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.42s ease-out, transform 0.42s ease-out; }
.reveal.is-in { opacity: 1; transform: none; }
.js-off .reveal { opacity: 1; transform: none; }

/* ---------- Header / nav ---------- */
.wp-block-site-title a { text-decoration: none; }
/* Stick the TEMPLATE-PART wrapper (a direct child of the full-height page
   container), NOT the inner .agni-header — position:sticky only works within
   its parent's box, and the inner div's parent is only header-height. */
header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 100;
}
.admin-bar header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) { .admin-bar header.wp-block-template-part { top: 46px; } }
.agni-header {
  position: relative;
  z-index: 100;
  /* No backdrop-filter/transform here: it would trap the fixed mobile menu overlay. */
  background: rgba(11, 11, 15, 0.96);
  box-shadow: 0 8px 30px -20px rgba(0, 0, 0, 0.85);
}

/* Constrain header + hero content to the same 1152 column as the sections
   (backgrounds stay full-bleed; only the inner content is centered). */
.agni-header > .wp-block-group {
  width: min(1152px, 100% - 3rem);
  max-width: none;
  margin-inline: auto;
}
.wp-block-cover.alignfull > .wp-block-cover__inner-container {
  width: min(1152px, 100% - 3rem) !important;
  margin-inline: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.agni-header .wp-block-site-logo img { max-height: 52px; width: auto; }
.agni-footer .wp-block-site-logo img { max-height: 48px; width: auto; }
/* Centered primary nav (logo left, nav centered, Book button right) */
.agni-header .wp-block-navigation { font-size: 0.95rem; flex: 1 1 auto; }
.agni-header .wp-block-navigation > .wp-block-navigation__container { flex-wrap: nowrap; justify-content: center; }
.agni-header .wp-block-navigation a { color: var(--agni-light); text-decoration: none; white-space: nowrap; }
.agni-header .wp-block-navigation a:hover { color: var(--agni-fire); }
.agni-header .wp-block-navigation .wp-block-navigation-submenu__toggle { color: var(--agni-light); }
.agni-header .wp-block-navigation .wp-block-navigation-submenu__toggle:hover { color: var(--agni-fire); }

/* Dropdown panel — 1:1 with the source Nav.tsx:
   w-64 rounded-md border-light/15 bg-surface p-2 shadow; items px-3 py-2.5 hover:bg-ink hover:text-fire */
.agni-header .wp-block-navigation__submenu-container {
  /* !important beats WP's has-ink-background-color preset (from overlayBackgroundColor) */
  background-color: var(--agni-surface) !important;
  background-image: none !important;
  border: 1px solid rgba(247, 245, 242, 0.15) !important;
  border-radius: 6px;
  padding: 0.5rem;
  width: 16rem;
  min-width: 16rem;
  gap: 0 !important;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.9);
  color: var(--agni-light);
}
.agni-header .wp-block-navigation__submenu-container .wp-block-navigation-item {
  margin: 0 !important;
  width: 100%;
}
.agni-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block;
  width: 100%;
  border-radius: 6px;
  /* px-3 py-2.5 from the source, forced past WP's navigation defaults */
  padding: 10px 12px !important;
  margin: 0 !important;
  font-size: 15px;
  line-height: 1.2;
  color: rgba(247, 245, 242, 0.9);
}
.agni-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.agni-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
  background-color: var(--agni-ink) !important;
  color: var(--agni-fire) !important;
}

/* ---------- Footer ---------- */
.agni-footer { background: var(--agni-ink); color: var(--agni-light); }
.agni-footer h2, .agni-footer .agni-footer__h {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--agni-lime);
  margin-bottom: 1.1rem;
}
.agni-footer a { color: var(--agni-light); text-decoration: none; }
.agni-footer a:hover { color: var(--agni-fire); }
.agni-footer .agni-footer__muted a { color: var(--agni-muted-dark); }
.agni-footer .agni-footer__muted a:hover { color: var(--agni-fire); }
.agni-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(247, 245, 242, 0.2);
  border-radius: var(--agni-radius);
  color: var(--agni-light);
}
.agni-social:hover { border-color: var(--agni-fire); color: var(--agni-fire); }

/* ---------- FAQ (details/summary) ---------- */
.agni-faq details {
  border-top: 1px solid rgba(247, 245, 242, 0.15);
  padding: 0.35rem 0;
}
.agni-faq details:last-child { border-bottom: 1px solid rgba(247, 245, 242, 0.15); }
.agni-faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 0;
  font-size: 1.05rem;
  font-weight: 500;
}
.agni-faq summary::-webkit-details-marker { display: none; }
.agni-faq summary::after {
  content: "+";
  color: var(--agni-fire);
  font-size: 1.5rem;
  line-height: 1;
  transition: transform 0.2s ease;
}
.agni-faq details[open] summary::after { content: "\2013"; }
.agni-faq details > p { padding-bottom: 1.4rem; margin: 0; color: var(--agni-muted-dark); line-height: 1.6; }
.agni-faq--light details { border-color: rgba(11,11,15,0.1); }
.agni-faq--light details > p { color: var(--agni-muted-light); }

/* ---------- Stat / number ---------- */
.agni-stat { display: flex; flex-direction: column; gap: 0.4rem; }
.agni-stat .agni-stat__num {
  font-family: var(--wp--preset--font-family--geist, "Geist", sans-serif);
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3rem);
  line-height: 1;
}
.agni-stat .agni-stat__label { font-weight: 500; }
.agni-stat .agni-stat__sub { color: var(--agni-tint); font-size: 0.8rem; }

/* Icon accent colors */
.agni-ic-fire { color: var(--agni-fire); }
.agni-ic-ice { color: var(--agni-ice); }
.agni-ic-lime { color: var(--agni-lime); }
.agni-ic-tint { color: var(--agni-tint); }

/* Maps */
.agni-map { width: 100%; aspect-ratio: 16 / 9; border: 1px solid rgba(247,245,242,0.15); border-radius: var(--agni-radius); overflow: hidden; }
.agni-map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(35%); }

/* Prose readability inside light/dark sections */
.agni-prose p { line-height: 1.7; }

/* Utility: hide an element without deleting it (reversible via block className). */
.agni-hidden { display: none !important; }

/* ---------- Announcement / promo bar (top of every page) ---------- */
.agni-promobar {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  gap: 0.75rem;
  background: var(--agni-lime, #b8f42f);
  color: var(--agni-ink, #0b0b0f);
  text-align: center;
  padding: 0.55rem 2.75rem;
  font-size: 0.92rem; font-weight: 600; line-height: 1.35;
}
.agni-promobar__text { margin: 0; }
.agni-promobar__cta { color: var(--agni-ink, #0b0b0f); text-decoration: underline; font-weight: 700; white-space: nowrap; }
.agni-promobar__cta:hover { opacity: 0.7; }
.agni-promobar__close {
  position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: var(--agni-ink, #0b0b0f);
  font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0.15rem 0.5rem;
}
.agni-promobar__close:hover { opacity: 0.7; }
.agni-promobar.is-dismissed { display: none; }
@media (max-width: 599px) {
  .agni-promobar { font-size: 0.8rem; padding: 0.5rem 2.4rem; gap: 0.4rem; }
}

/* ---------- Mobile nav overlay ---------- */
/* On mobile the header pill is hidden; the Book button lives inside the menu. */
@media (max-width: 599px) {
  .agni-header .agni-header__cta { display: none !important; }
}
/* Book button: only inside the open overlay, styled as a fire button. */
.agni-header .agni-nav-book { display: none; }
/* JS injects these into the nav content, which is ALSO the desktop menu container.
   Hide them everywhere by default; the mobile @media rules re-show them when the
   overlay is open. Without this they duplicate the logo + contact line on desktop. */
.agni-header .agni-overlay-logo,
.agni-header .agni-overlay-contact { display: none !important; }
.agni-header .is-menu-open .agni-overlay-logo,
.agni-header .is-menu-open .agni-overlay-contact { display: flex !important; }
.agni-header .is-menu-open .agni-nav-book { display: block; margin: 1.5rem 0 0; width: 100%; box-sizing: border-box; padding: 0 !important; }
.agni-header .is-menu-open .agni-nav-book a.wp-block-navigation-item__content {
  /* Exact source btnBase (kit.tsx): h-12 px-6 text-[15px] font-medium rounded-md, w-full. */
  display: flex;
  width: 100%;
  box-sizing: border-box;      /* so px-6 padding stays INSIDE the 100% width (no overflow) */
  height: 3rem;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 1.5rem !important;
  background: var(--agni-fire);
  color: var(--agni-light) !important;
  border-radius: 0.375rem;
  font-size: 15px;
  font-weight: 500;
  box-shadow: 0 10px 30px -10px rgba(218, 31, 184, 0.85);
}
@media (max-width: 599px) {
  .agni-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--agni-ink); }

  /* Hamburger sits on the RIGHT: the nav must not stretch or center on mobile. */
  .agni-header .wp-block-navigation { flex: 0 0 auto !important; margin-left: auto !important; }
  .agni-header .wp-block-navigation__responsive-container-open { margin-left: auto; }

  /* Close button: bordered rounded box in the top-right, aligned to the content padding. */
  .agni-header .is-menu-open .wp-block-navigation__responsive-container-close {
    top: 1rem !important;
    right: 1.5rem !important;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(247, 245, 242, 0.25);
    border-radius: 10px;
    color: var(--agni-light);
    background: transparent;
  }
  .agni-header .is-menu-open .wp-block-navigation__responsive-container-close svg {
    width: 1.4rem;
    height: 1.4rem;
    fill: currentColor;
  }

  /* Overlay padding matches source Nav.tsx: px-5 pt-4 pb-8. */
  .agni-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    padding: 1rem 1.25rem 2rem !important;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column;
  }
  /* Logo pinned top-left of the open menu (source: <Logo/> in the header row). */
  .agni-header .is-menu-open .agni-overlay-logo { display: block; margin: 0 0 2rem; }
  .agni-header .is-menu-open .agni-overlay-logo img { max-height: 48px; width: auto; }
  /* Contact line under the Book button (source: MapPin + "Two Miami studios · phone"). */
  .agni-header .is-menu-open .agni-overlay-contact {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    width: 100%;            /* span full width so justify-content:center actually centers it */
    align-self: stretch;   /* override the column's align-items:flex-start */
    box-sizing: border-box;
    margin-top: 1rem;
    font-size: 0.875rem;
    color: var(--agni-muted-dark);
    text-decoration: none;
  }
  .agni-header .is-menu-open .agni-overlay-contact__pin { color: var(--agni-tint); flex: 0 0 auto; }
  .agni-header .is-menu-open .agni-overlay-contact:hover { color: var(--agni-light); }
  /* Left-align EVERYTHING in the overlay. The desktop nav is right-justified,
     which makes each column-flex <li> align its link to flex-end (the right). */
  .agni-header .is-menu-open .wp-block-navigation__responsive-container-content,
  .agni-header .is-menu-open .wp-block-navigation__container { width: 100%; align-items: flex-start !important; }
  .agni-header .is-menu-open .wp-block-navigation__container { justify-content: flex-start !important; gap: 0.1rem; }
  .agni-header .is-menu-open .wp-block-navigation-item {
    width: 100%;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }
  /* Divider lines between top-level items (like the source), organized spacing */
  .agni-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:not(.agni-nav-book) {
    border-bottom: 1px solid rgba(247, 245, 242, 0.1);
  }
  .agni-header .is-menu-open .wp-block-navigation-item__content { font-size: 1.5rem; padding: 1rem 0; text-align: left !important; }
  /* No jarring focus box on tap; keep a clean outline for keyboard users only */
  .agni-header .is-menu-open a, .agni-header .is-menu-open button { -webkit-tap-highlight-color: transparent; }
  .agni-header .is-menu-open a:focus, .agni-header .is-menu-open button:focus { outline: none; }
  /* WP moves focus into the overlay on open; Safari draws a ring on the focused
     container/li. Suppress it — keep a real ring only for keyboard tabbing on links. */
  .agni-header .is-menu-open .wp-block-navigation__responsive-container-content:focus,
  .agni-header .is-menu-open .wp-block-navigation__responsive-container-content:focus-visible,
  .agni-header .is-menu-open .wp-block-navigation-item:focus,
  .agni-header .is-menu-open .wp-block-navigation-item:focus-visible,
  .agni-header .is-menu-open .wp-block-navigation-item__content:focus { outline: none !important; box-shadow: none !important; }
  .agni-header .is-menu-open a:focus-visible { outline: 2px solid var(--agni-tint); outline-offset: 2px; }

  /* Submenu parent: keep label + chevron toggle on one row, still left-aligned */
  .agni-header .is-menu-open .wp-block-navigation-submenu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100%;
  }
  .agni-header .is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content { flex: 1 1 auto; min-width: 0; }
  /* Fixed-size toggle so it can't be squished; draw our own chevron (WP's SVG collapses). */
  .agni-header .is-menu-open .wp-block-navigation-submenu__toggle {
    display: inline-flex !important;
    pointer-events: auto !important;
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    align-items: center;
    justify-content: center;
    background: transparent; border: 0; cursor: pointer; padding: 0;
  }
  .agni-header .is-menu-open .wp-block-navigation-submenu__toggle svg { display: none !important; }
  .agni-header .is-menu-open .wp-block-navigation-submenu__toggle::after {
    content: "";
    width: 0.62rem; height: 0.62rem;
    border-right: 2.5px solid var(--agni-fire);
    border-bottom: 2.5px solid var(--agni-fire);
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.2s ease;
  }
  .agni-header .is-menu-open .wp-block-navigation-submenu.agni-open > .wp-block-navigation-submenu__toggle::after {
    transform: translateY(2px) rotate(225deg);
  }

  /* Submenu items: collapsed by default, expand only when the parent is .agni-open */
  .agni-header .is-menu-open .wp-block-navigation__submenu-container {
    display: none !important;
    position: static !important; opacity: 1 !important; visibility: visible !important;
    width: 100% !important; min-width: 0 !important; border: 0 !important;
    background: transparent !important; box-shadow: none !important; transform: none !important;
    padding: 0 0 0.4rem 1rem !important;
  }
  .agni-header .is-menu-open .wp-block-navigation-submenu.agni-open > .wp-block-navigation__submenu-container {
    display: block !important;
  }
  .agni-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: 1.0625rem; padding: 0.4rem 0; color: var(--agni-muted-dark); }
}

/* ---------- Desktop dropdowns: open on hover/focus without the block's JS ---------- */
@media (min-width: 600px) {
  .agni-header .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,
  .agni-header .wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
}

/* ---------- FAQ: calm the tap/focus outline ---------- */
.agni-faq summary { -webkit-tap-highlight-color: transparent; }
.agni-faq summary:focus { outline: none; }
.agni-faq summary:focus-visible { outline: 2px solid var(--agni-tint); outline-offset: 2px; border-radius: 4px; }

/* ---------- Elementor pilot: gradient text on a heading (add class "agni-grad") ---------- */
.agni-grad .elementor-heading-title {
  background: linear-gradient(100deg, #f7f5f2 10%, #da1fb8 55%, #703dff 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-block: 0.14em;
  display: inline-block;
}
/* Elementor container using .grain needs its inner content above the grain layer */
.elementor-element.grain > .e-con-inner { position: relative; z-index: 1; }

/* Cover images fill via object-fit cover (never stretch) by default. */
.wp-block-cover__image-background,
img.wp-block-cover__image-background {
  object-fit: cover !important;
  object-position: center center;
  width: 100%;
  height: 100%;
}
/* Home hero: taller like the source (88vh / 100vh) so cover shows more of the
   image top-to-bottom; anchored like the source's object-[62%_top]. */
.agni-hero { background-color: var(--agni-ink); min-height: 88vh !important; }
@media (min-width: 1024px) { .agni-hero { min-height: 100vh !important; } }
.agni-hero .wp-block-cover__image-background,
.agni-hero img.wp-block-cover__image-background { object-fit: cover !important; object-position: 62% top !important; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .agni-marquee__track { animation: none; flex-wrap: wrap; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .agni-format-card, .wp-block-button__link { transition: none; }
}