/* AstaYoga overrides, loaded after Webflow's stylesheet. */

/* No flash on page load: until Webflow's animation engine has set the load
   animation's starting states (it adds .w-mod-ix), the browser would paint the
   side panel, the vertical labels and the phone bars fully visible, then hide
   them and fade them back in. Keep the page hidden for that moment.
   .w-mod-js comes from Webflow's inline head script, so pages without JS show.
   js/asta.js adds .w-mod-ix after 3s if the engine never starts. */
html { background-color: #000; }
/* .asta-ready is set by js/asta.js once Webflow's engine AND the fonts are
   ready (capped at 1.5s), so the page appears once, settled, and the text
   doesn't switch fonts in front of the visitor. */
html.w-mod-js:not(.asta-ready) body {
  visibility: hidden;
  animation: asta-failsafe 0s linear 3s forwards; /* shows the page even if asta.js never runs */
}
@keyframes asta-failsafe { to { visibility: visible; } }

/* Drawer photo runs to the drawer's right edge (Webflow centres a narrower box). */
.expanded-navigation .nav-fixed-img.slideout-img {
  width: 100%;
  height: 100%; /* fills the 360px box on ≥1920 screens; auto below */
  margin: 0;
}
.expanded-navigation .nav-fixed-img.slideout-img > img {
  height: 100%;
  object-fit: cover;
}

/* Phone top bar: solid once the page scrolls, so text doesn't run under the
   logo (it's transparent at the top so the home hero shows behind it).
   .asta-scrolled is set by js/asta.js. */
.mobile-nav-wrapper { transition: background-color 0.25s ease; }
html.asta-scrolled .mobile-nav-wrapper { background-color: #000; }

/* Desktop drawer: the rows share the height under the photo, so every item
   stays on screen whatever the count. It was a fixed 600px scroll box, which
   pushed Contact (row 8) below the fold on a 900px-tall laptop. */
.expanded-navigation {
  display: flex;
  flex-direction: column;
}
.expanded-navigation > .img-parent { flex: none; }
.expanded-navigation > .scroll-column {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  padding-bottom: 0;
}
.expanded-navigation > .scroll-column > .column {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.expanded-navigation .nav-row {
  flex: 1 1 0;
  min-height: 52px;
  max-height: 85px;
}
/* Whole-pixel row heights so the 1px dividers never fall between pixels.
   --nav-count is written onto .scroll-column by tools/build.py. */
@supports (height: round(down, 10px, 1px)) {
  .expanded-navigation > .scroll-column { container-type: size; }
  .expanded-navigation .nav-row {
    flex: none;
    height: clamp(52px, round(down, 100cqh / var(--nav-count, 8), 1px), 85px);
  }
}

/* Home popup: switched off from site.json, and never over the open phone menu. */
body.asta-popup-off .popup-container { display: none !important; }
body:has(.menu-parent-slide[style*="flex"]) .popup-container { display: none !important; }

/* Buttons in the page content line up with the text above them (Webflow gave
   every .button an 8px left margin). */
.col-right .button { margin-left: 0; }

/* Contact header: more room between the social icons and the button. */
.fixed-header-container .row.margins + .button {
  margin: 18px 0 0; /* + the row's 14px below the icons = 32px */
}

/* Social icons: 44px tap area around the 20px glyph, same visual position. */
.link-icon {
  width: 44px;
  height: 44px;
  padding: 12px;
  margin: -12px 23px -12px -12px; /* keeps Webflow's 55px icon spacing */
}

/* Content photos fill their column up to 500px. Webflow's box was 30% of the
   column with a 400px floor: on tablets the floor is dropped (photos shrank to
   ~144px) and on an iPad in landscape the floor overflowed the column. */
.img-wrapper.max-500 {
  width: 100%;
  min-width: 0;
  max-width: 500px;
}

/* Mysore calendar: use the content width so event titles aren't cut off
   (it was a 300–400px box). */
#has-overlay.iframe-form {
  width: 100%;
  max-width: 720px;
}
#has-overlay.iframe-form iframe { width: 100%; }
/* its row shrank to the iframe's default 300px inside the flex column */
.row:has(> #has-overlay) { align-self: stretch; }

/* Past-event notice on a training page (inserted by tools/build.py). */
.asta-ended {
  margin: 16px 0 0;
  padding: 12px 16px;
  border: 1px solid rgba(237, 231, 212, 0.35);
  color: #ede7d4;
  font-size: 15px;
  line-height: 1.5;
}
.asta-ended a { display: inline; color: inherit; text-decoration: underline; }

/* Words that must not split across lines (used in the home fine print). */
.asta-nowrap { white-space: nowrap; }

/* Home: short studio description in fine print along the bottom of the hero,
   on the headline's left edge (site.json "home_fineprint", inserted by the
   build). The left offsets mirror Webflow's headline offsets. */
.asta-hero-fineprint {
  position: absolute;
  z-index: 3;
  left: 7vw;
  bottom: 40px;
  max-width: min(800px, calc(100% - 7vw - 40px)); /* two lines on desktop */
  text-wrap: balance; /* lines of even length */
  margin: 0;
  color: var(--old-lace);
  opacity: 0;
  font-family: Lato, sans-serif;
  font-size: 12px;
  line-height: 1.6;
}
/* fades in as the headline lands (below), once the page is revealed */
html.asta-ready .asta-hero-fineprint { animation: asta-fineprint-in 0.8s ease 0.9s forwards; }
@keyframes asta-fineprint-in { to { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) {
  .asta-hero-fineprint { animation: none; opacity: 0.55; }
}
@media (max-width: 991px) {
  .asta-hero-fineprint { left: calc(7vw + 15px); bottom: 32px; }
}
@media (max-width: 767px) {
  /* above the fixed Get Started bar. The hero is 100vh tall, which on iPhone
     includes the area behind Safari's toolbar; (100vh - 100dvh) is that area. */
  .asta-hero-fineprint { left: 30px; right: 30px; max-width: none; bottom: 84px; }
  @supports (height: 100dvh) {
    .asta-hero-fineprint { bottom: calc(84px + 100vh - 100dvh); }
  }
}
@media (max-width: 479px) {
  .asta-hero-fineprint { left: 20px; right: 20px; }
}

/* Phone Get Started bar: black like the page (was Webflow's slate blue), so
   Safari also paints the strip under it, behind its toolbar, black. A faint
   hairline keeps the bar defined against the black page. */
@media (max-width: 767px) {
  .fixed_mobile-row {
    background-color: #000;
    border-top: 1px solid rgba(237, 231, 212, 0.14);
  }
}

/* Content buttons: one standard size (Gary). Webflow mixed a "small" 42px,
   a regular 46px and a 54px button with widths from 106 to 260px; every
   button in the page content is now 270 x 46 with a centred label, wide
   enough for the longest ("10 Class - Auto Renewal"). The left panel's
   View Schedule follows it too (narrower on tablets, where the panel is);
   only the compact phone Get Started bar keeps its own size. */
.col-right .button,
.fixed-schedule .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  /* !important: Webflow's .wide / .top-10 variants set their own sizes */
  width: 270px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 46px !important;
  padding: 0 20px !important;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .col-right .button,
  .fixed-schedule .button { font-size: 13px; }
}

/* Paired buttons (Rocket "Get In Touch" + "Sign Up"): side by side on wide
   screens, stacked on phones; the same 12px gap either way. */
.col-right .button.right-margin { margin-right: 12px; }
.col-right .button.right-margin,
.col-right .button.right-margin + .button { margin-top: 12px; }

/* Rocket page teacher bio: photo and bio 600px wide, the same as the
   "Interested?" text below (was Webflow's fixed 400px); narrower with the
   column on small screens. Photo keeps its 4:5 shape. */
.flex-horizontal > .asta-teacher {
  flex: 0 1 600px;
  width: 100%;
  max-width: 600px;
}
.asta-teacher .img-wrapper.profile {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
}
.asta-teacher .paragraph { max-width: none !important; }

/* Page intro text under the H1 (Classes, Mysore, ...): about 60% of the
   content column on desktop for an easier reading line (Gary). Narrower
   windows (where 60% would be a thin column), tablets and phones keep the
   full column. */
@media (min-width: 1200px) {
  .col-right .fixed-header-container .paragraph.p-grey { max-width: 60%; }
}

/* Home headline: rises in as soon as the page appears (Webflow's own animation
   waited a full second first). A CSS animation outranks the engine's inline
   styles, so this replaces its timing without touching its data. */
html.asta-ready .double-column_hero .h1.h-beige {
  animation: asta-rise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.05s both;
}
@keyframes asta-rise {
  from { opacity: 0; transform: translate3d(0, 40px, 0); }
  to { opacity: 1; transform: none; }
}

/* Background videos fade in over their still frame once they actually play
   (they used to cut in); if autoplay is blocked the still frame just stays. */
.w-background-video > video { opacity: 0; transition: opacity 1s ease; }
.w-background-video > video.asta-playing { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html.asta-ready .double-column_hero .h1.h-beige { animation: none; opacity: 1; transform: none; }
  html.asta-ready .asta-hero-fineprint { animation: none; opacity: 0.55; }
  .w-background-video > video { transition: none; }
}

/* ---------------------------------------------------------------------------
   Spacing standard for content stacks (Gary). Every heading / line / text /
   button pair uses one gap, on every page and at every width:
     H1 -> its subtitle line ................ 12px
     H1 -> text ............................. 16px
     section heading -> level line .......... 6px   (they read as one unit)
     section heading -> text or list ........ 14px
     level line -> text or list ............. 12px
     short stacked lines (page header) ...... 12px
     paragraph -> paragraph (body copy) ..... 24px  (= the blank line inside paragraphs)
     text or list -> a new level line ....... 24px
     anything -> a button ................... 24px
   The first element's bottom margin is zeroed so the next one's top margin
   is the whole gap. !important because Webflow's .bottom-20 / .bottom-40 /
   .max-500 combinations set margins with more specific rules. The Momence
   schedule widget is third-party and keeps its own spacing. */
.col-right :is(h1, h3, .pricing, p, ul):has(+ :is(h3, .pricing, p, ul, .button)) { margin-bottom: 0 !important; }
.col-right ul > li:last-child,
.col-right ul > li:last-child > p:last-child { margin-bottom: 0 !important; }
.col-right h1 + .pricing { margin-top: 12px !important; }
.col-right h1 + p { margin-top: 16px !important; }
.col-right h3 + .pricing { margin-top: 6px !important; }
.col-right h3 + :is(p, ul) { margin-top: 14px !important; }
.col-right .pricing + :is(p, ul) { margin-top: 12px !important; }
.col-right p + p { margin-top: 24px !important; }
.col-right .fixed-header-container p + p { margin-top: 12px !important; }
.col-right p + p.asta-ended { margin-top: 16px !important; }
.col-right :is(p, ul) + .pricing { margin-top: 24px !important; }
.col-right :is(h1, h3, .pricing, p, ul) + .button { margin-top: 24px !important; }
/* a button after a whole content block (Classes "View Schedule"): same 24px */
.col-right .column:has(+ .button),
.col-right .column:has(+ .button) > :last-child { margin-bottom: 0 !important; }
.col-right .column + .button { margin-top: 24px !important; }

/* Accessibility: the tan accent (level lines, highlights, list bullets) was
   4.32:1 on black, just under the 4.5:1 minimum for text; 2% lighter = 4.66:1. */
:root { --peru: #897358; }