/* Site-specific additions on top of the build stylesheet (main-CtdxjNYc.css). */

/* Contact page: keep the intro heading on a single line on desktop. */
.contact-intro {
  max-width: 56rem;
}

@media (min-width: 64rem) {
  .contact-intro {
    max-width: 72rem;
  }

  .contact-intro .h-section {
    white-space: nowrap;
  }
}

/* Inquiry form: inline error state for invalid or missing fields. */
.field.is-invalid {
  border-color: #b3261e;
  background-color: #fdf1ef;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3261e' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16.5v.01'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.25rem;
  padding-right: 3rem;
}

.field.is-invalid:focus {
  border-color: #b3261e;
  outline-color: #b3261e;
}

.field-error {
  color: #b3261e;
  margin-top: 0.35rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.field-error[hidden] {
  display: none;
}

/* Header phone menu: "Call/Text" dropdown, left of the header button.
   Mobile: icon-only square button that matches .menu-toggle.
   Desktop (71rem+, the same breakpoint as the main menu): the trigger widens as space allows:
   71rem icon only, 80rem icon + number, 90rem full "Call/Text: number" matching .nav-link. */
.phone-menu {
  position: static;
}

.phone-menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 3rem;
  height: 3rem;
  color: var(--color-charcoal);
  cursor: pointer;
  list-style: none;
  background: transparent;
  border: 1.5px solid #41473359;
  border-radius: 0.875rem;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.phone-menu-trigger::-webkit-details-marker {
  display: none;
}

.phone-menu-trigger::marker {
  content: "";
}

.phone-menu-trigger:hover,
.phone-menu[open] .phone-menu-trigger {
  color: var(--color-sage-deep);
  background: var(--color-sand-soft);
  border-color: var(--color-sage-deep);
}

.phone-menu-icon {
  color: var(--color-sage-deep);
}

.phone-menu-label,
.phone-menu-chevron {
  display: none;
}

.phone-menu-panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0.75rem;
  z-index: 60;
  width: min(20rem, calc(100vw - 1.5rem));
  padding: 0.5rem;
  background: var(--color-cream);
  border: 1px solid #41473340;
  border-radius: 1rem;
  box-shadow: 0 18px 36px -18px #2a2a2873;
}

.phone-menu-link {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.8rem 0.9rem;
  color: var(--color-charcoal);
  text-decoration: none;
  border-radius: 0.75rem;
  transition: background-color 0.2s, color 0.2s;
}

.phone-menu-link + .phone-menu-link {
  border-top: 1px dashed #b89a73cc;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.phone-menu-link:hover {
  color: var(--color-sage-deep);
  background: var(--color-sand-soft);
}

.phone-menu-link .icon {
  width: 1.375rem;
  height: 1.375rem;
  color: var(--color-sage-deep);
}

.phone-menu-link-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.phone-menu-link-text strong {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
}

.phone-menu-link-text small {
  color: var(--color-muted);
  font-size: 0.875rem;
}

@media (min-width: 71rem) {
  /* Keep the existing header on one line now that it carries one more element. */
  .nav-list {
    gap: 1.25rem;
  }

  .nav-link,
  .site-header .btn {
    white-space: nowrap;
  }

  .phone-menu {
    position: relative;
  }

  .phone-menu-panel {
    top: calc(100% + 0.75rem);
    right: 0;
    width: 17rem;
  }
}

@media (min-width: 80rem) {
  .phone-menu {
    margin-right: 0.5rem;
  }

  .phone-menu-trigger {
    width: auto;
    height: auto;
    padding: 0.5rem 0.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    background: transparent;
    border: 0;
    border-radius: 0.5rem;
  }

  .phone-menu-trigger:hover,
  .phone-menu[open] .phone-menu-trigger {
    color: var(--color-sage-deep);
    background: transparent;
  }

  .phone-menu-icon {
    width: 1.25rem;
    height: 1.25rem;
  }

  .phone-menu-label {
    position: relative;
    display: inline;
    white-space: nowrap;
  }

  .phone-menu-label::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -0.35rem;
    left: 0;
    border-top: 2px dashed var(--color-tan);
    opacity: 0;
    transition: opacity 0.2s;
  }

  .phone-menu-trigger:hover .phone-menu-label::after,
  .phone-menu[open] .phone-menu-label::after {
    opacity: 1;
  }

  .phone-menu-prefix {
    display: none;
    color: var(--color-muted);
  }
}

@media (min-width: 90rem) {
  .phone-menu-prefix {
    display: inline;
  }

  .phone-menu-chevron {
    display: inline-block;
    transition: transform 0.2s;
  }

  .phone-menu[open] .phone-menu-chevron {
    transform: rotate(180deg);
  }
}

/* Very small phones: make room for the phone button next to the menu button. */
@media (max-width: 23rem) {
  .brand-logo {
    height: 2.25rem;
  }

  .phone-menu-trigger {
    width: 2.75rem;
    height: 2.75rem;
  }
}

/* Contact page: four contact tiles fit in one row from 75rem; between 64rem and 75rem keep two per row. */
@media (min-width: 64rem) and (max-width: 74.99rem) {
  .contact-tile.col-4 {
    width: calc(50% - 1rem);
  }
}

/* Inline phone menu (Contact page Phone tile): styled like the other tile action links
   ("Open Messenger ->"): semi-bold sage text with an arrow. The Call / Text options open underneath. */
.phone-menu-inline {
  position: relative;
  margin: 0;
}

.phone-menu-inline .phone-menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: 600;
  line-height: inherit;
  color: var(--color-sage-deep);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.phone-menu-inline .phone-menu-trigger:hover,
.phone-menu-inline[open] .phone-menu-trigger {
  color: var(--color-sage-darker);
  background: transparent;
}

.phone-menu-inline .phone-menu-label {
  display: inline;
}

.phone-menu-inline .phone-menu-label::after {
  display: none;
}

.phone-menu-inline .phone-menu-prefix {
  display: inline;
  color: inherit;
}

.phone-menu-inline .phone-menu-panel {
  top: calc(100% + 0.75rem);
  right: auto;
  left: 0;
  width: min(17rem, calc(100vw - 4rem));
}

/* Keep an open dropdown above the neighbouring tiles. */
.contact-tile:has(.phone-menu[open]) {
  position: relative;
  z-index: 5;
}

/* Home hero heading is three fixed lines ("Strength, / Mindful Movement / & Balance.").
   "Mindful Movement" is about 8.7em wide on phones, so size the heading to keep that line unbroken. */
#hero .h-display {
  font-size: min(2.5rem, calc((100vw - 2.5rem) / 8.9));
}

@media (min-width: 48rem) {
  #hero .h-display {
    font-size: 3.75rem;
  }
}

@media (min-width: 80rem) {
  #hero .h-display {
    font-size: 4rem;
  }
}

/* Home hero eyebrow ("Olia Yag | Personal Trainer & content creator in South Orange County"):
   one line from 38rem up. It is 577px at 13px and the text column is at most 576px, so trim it slightly.
   Phones are too narrow for one readable line, so they keep the normal wrap. */
@media (min-width: 38rem) {
  #hero .eyebrow {
    font-size: 12.5px;
    white-space: nowrap;
  }
}

/* Home hero photo: vertical focal point.
   The photo is wider than tall relative to the hero, so "cover" trims the overflow vertically.
   0 keeps the very top (tree canopy, subject sits low and her lower half is cut off); 40% trims
   some of the canopy instead, so she sits higher in the frame while the head stays clear of the header. */
@media (min-width: 48rem) {
  #hero.hero {
    background-position: 35% 40%;
  }
}

@media (min-width: 56.25rem) {
  #hero.hero {
    background-position: 50% 40%;
  }
}

/* Home hero dark layer: lighter than the build default so the photo reads brighter.
   Build default: phones 25% -> 88% black top to bottom; desktop 10% -> 35% (at 45%) -> 82% left to right.
   Now: phones 15% -> 70%; desktop 3% -> 20% (at 45%) -> 65%. The darkest part stays behind the text for contrast. */
#hero .overlay-hero {
  background: linear-gradient(#161a1226, #161a12b3);
}

@media (min-width: 56.25rem) {
  #hero .overlay-hero {
    background: linear-gradient(90deg, #161a1208, #161a1233 45%, #161a12a6);
  }
}