/*
  Shared component styles — one class per reusable piece from js/components.jsx.
  Mobile-first: base rules target the smallest viewport, @media (min-width) layers
  on tablet (768px) and desktop (1025px) enhancements. See tokens.css for the
  breakpoint rationale.
*/

/* ---------- Header & Navigation ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-height);
  background: var(--color-paper);
  border-bottom: 1px solid rgba(58, 50, 43, 0.08);
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.3s ease, visibility 0s linear 0s;
}

/* Slides out as the user scrolls down (pushing content up); reappears on scroll-up */
.site-header--hidden {
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.3s ease, visibility 0s linear 0.3s;
}

.site-header__row {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-header__logo {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  /* The brand's one red moment — Yuji Syuku brush wordmark in Seal Red.
     Do not reuse Seal Red elsewhere on the page. */
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--color-seal);
  text-decoration: none;
}

/* Red seal from the lihyanteh.com.au logo, sits before the brush wordmark */
.site-header__seal {
  display: block;
  height: 38px;
  width: auto;
  flex-shrink: 0;
}

.site-header__logo svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

/* Desktop nav — hidden until desktop breakpoint */
.site-nav {
  display: none;
}

.hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-ink);
}

.hamburger svg {
  width: 26px;
  height: 26px;
}

@media (min-width: 1025px) {
  .site-nav {
    display: flex;
    gap: var(--space-4);
  }

  .site-nav a {
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--color-ink);
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s ease, color 0.2s ease;
  }

  .site-nav a:hover {
    border-bottom-color: var(--color-blossom);
  }

  .hamburger {
    display: none;
  }
}

/* Full-screen mobile menu overlay — a purpose-built pattern, not a squeezed desktop nav */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--color-blush);
  display: flex;
  flex-direction: column;
  padding: var(--space-3);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.3s ease, visibility 0s linear 0.3s;
}

.mobile-menu[data-open="true"] {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.3s ease, visibility 0s linear 0s;
}

.mobile-menu__close {
  align-self: flex-end;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--color-ink);
  cursor: pointer;
}

.mobile-menu__links {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.mobile-menu__links a {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  color: var(--color-ink);
  text-decoration: none;
}

@media (min-width: 1025px) {
  .mobile-menu {
    display: none;
  }
}

/* ---------- Modal — centered lightbox for text that's too long to keep
   inline on a card (e.g. tea-ceremony package descriptions). Above the
   mobile menu (z-index 60) and floating bar (40) so it can open over either. */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(58, 50, 43, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  overflow-y: auto;
}

.modal {
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card-hover);
  max-width: 560px;
  width: 100%;
  padding: var(--space-5) var(--space-3);
  margin: auto;
}

@media (min-width: 768px) {
  .modal {
    padding: var(--space-5) var(--space-4);
  }
}

.modal__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--color-ink);
  cursor: pointer;
}

/*
  Scrollable variant (Modal scrollable prop). The box is capped at the
  viewport height minus the overlay's padding, so it never touches the
  screen edges. Its top padding is a band that holds the close button; the
  .modal__scroll region sits below that band, so scrolled content never
  passes under the X. Side and bottom padding move onto the scroll region
  so the scrollbar sits at the box edge.
*/
.modal--scroll {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 2 * var(--space-3));
  max-height: calc(100dvh - 2 * var(--space-3));
  padding: 64px 0 0;
  overflow: hidden;
}

.modal__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--space-3) var(--space-4);
}

.modal__scroll:focus {
  outline: none;
}

.modal__scroll:focus-visible {
  outline: 2px solid var(--color-pastel-gold);
  outline-offset: -2px;
}

@media (min-width: 768px) {
  .modal--scroll {
    padding: 64px 0 0;
  }

  .modal__scroll {
    padding: 0 var(--space-4) var(--space-5);
  }
}

.modal--scroll .modal__title {
  padding-right: 0;
}

.modal__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  color: var(--color-ink);
  margin: 0 0 var(--space-2);
  padding-right: var(--space-4);
}

.modal__body {
  color: var(--color-ink);
}

.modal__body p {
  margin: 0 0 var(--space-2);
}

.modal__body p:last-child {
  margin-bottom: 0;
}

/*
  Floating pill on mobile — hamburger + primary CTA always in thumb reach,
  without docking a full-width bar across the screen. Frosted-glass pill,
  centered, sized to its content; adapted from the pattern validated on
  aitecl.com (see docs/website-best-practices.md) into the warm teal palette.
*/
.floating-bar {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 6px 6px 6px var(--space-2);
  width: max-content;
  background: rgba(58, 50, 43, 0.62);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-pill);
  box-shadow: 0 10px 30px rgba(58, 50, 43, 0.3);
}

/* Homepage: two compact booking buttons in the floating bar */
.floating-bar .btn.floating-bar__btn {
  padding: 8px 11px;
  min-height: 42px;
  font-size: 0.8125rem;
  white-space: nowrap;
}

/* Tighter bar when it holds two buttons, so it fits a 360px phone */
.floating-bar:has(.floating-bar__btn) {
  gap: 6px;
  padding-left: 6px;
}

.floating-bar .hamburger {
  color: var(--color-white);
  width: 40px;
  height: 40px;
}

@media (min-width: 1025px) {
  .floating-bar {
    display: none;
  }
}

@media (min-width: 1025px) {
  .floating-bar-spacer {
    display: none;
  }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}

.btn:hover {
  transform: scale(1.03);
}

.btn--primary {
  background: var(--color-ink);
  color: var(--color-white);
}

.btn--primary:hover {
  background: var(--color-ink-hover);
  box-shadow: var(--shadow-card-hover);
}

.btn--secondary {
  background: transparent;
  border-color: var(--color-ink);
  color: var(--color-ink);
}

.btn--secondary:hover {
  background: var(--color-ink);
  color: var(--color-white);
}

.btn--outline-teal {
  background: transparent;
  border-color: var(--color-ink);
  color: var(--color-ink);
}

.btn--outline-teal:hover {
  background: var(--color-ink);
  color: var(--color-white);
}

.btn--block {
  width: 100%;
}

/* ---------- Section wrapper ---------- */

.section {
  padding: var(--space-5) 0;
  position: relative;
}

@media (min-width: 768px) {
  .section {
    padding: var(--space-6) 0;
  }
}

@media (min-width: 1025px) {
  .section {
    padding: var(--space-7) 0;
  }
}

/*
  Only two section backgrounds exist in this system — Paper and Blush.
  The old teal/earth variants both collapse onto Blush here (their class
  names stay as-is since js/pages/home.jsx references them; only the colors
  they resolve to have changed) so no section ever needs a third background.
*/
.section--teal,
.section--earth {
  background: var(--color-blush);
  color: var(--color-ink);
}

.section--cream {
  background: var(--color-paper);
  color: var(--color-ink);
}

.section__eyebrow {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: var(--space-2);
}

/* Blush sections: Ink for all text, per the design system (Bark/Blossom both fail contrast on Blush) */
.section--teal .section__eyebrow,
.section--earth .section__eyebrow {
  color: var(--color-ink);
}

/* Paper sections: Bark is the eyebrow-label accent (Blossom is decorative-only, not text-safe) */
.section--cream .section__eyebrow {
  color: var(--color-bark);
}

.section__heading {
  font-size: var(--fs-h1);
}

.section__subheading {
  font-size: var(--fs-h3);
  font-family: var(--font-body);
  font-weight: 500;
  max-width: 640px;
}

.section--cream .section__subheading {
  color: var(--color-bark);
}

.section__header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto var(--space-5);
}

/* ---------- Curved section divider ---------- */

.divider {
  display: block;
  width: 100%;
  height: 48px;
  line-height: 0;
}

@media (min-width: 768px) {
  .divider {
    height: 64px;
  }
}

/* ---------- Icon badge ---------- */

.icon-badge {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--color-blossom);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-badge svg {
  width: 28px;
  height: 28px;
  color: var(--color-white);
}

/* ---------- Portrait / placeholder frame ---------- */

.portrait-frame {
  width: 280px;
  max-width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-pill);
  border: 4px solid var(--color-pastel-gold);
  background: var(--color-blush);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: var(--shadow-card-hover);
}

.portrait-frame__mark {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  color: var(--color-ink);
}

.portrait-frame__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ---------- Cards ---------- */

.card {
  background: var(--color-white);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

/*
  Bordered card variant — for cards placed on the Blush alchemy section.
  A near-transparent tint doesn't give reliable text contrast on Blush,
  so this is a solid white card with a hairline border instead —
  still reads as "lifted" off the section without risking illegible text.
*/
.card--on-teal {
  background: var(--color-white);
  border: 1px solid rgba(58, 50, 43, 0.12);
  box-shadow: var(--shadow-card);
}

.card--on-teal:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.card__title-rule {
  width: 40px;
  height: 3px;
  background: var(--color-blossom);
  margin: var(--space-1) 0 var(--space-2);
  border-radius: 2px;
}

.card__tagline {
  font-style: italic;
  color: var(--color-bark);
  font-size: 0.9rem;
  margin: 0 0 var(--space-1);
}

.card--cream .card__tagline {
  color: var(--color-bark);
}

.card__link {
  display: inline-block;
  margin-top: var(--space-2);
  font-weight: 700;
  text-decoration: none;
  color: var(--color-ink);
}

.card--cream .card__link {
  color: var(--color-ink);
}

.card__link:hover {
  text-decoration: underline;
}

/* Compact modality card (acupuncture pillar) */
.mini-card {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-white);
  border-radius: var(--radius-card);
  padding: var(--space-2) var(--space-3);
  box-shadow: var(--shadow-card);
}

.mini-card__title {
  font-weight: 700;
  color: var(--color-ink);
  margin: 0 0 2px;
}

.mini-card__desc {
  font-size: 0.875rem;
  color: var(--color-bark);
  margin: 0;
}

/* ---------- Grids ---------- */

.grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1025px) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- Testimonial carousel (native scroll-snap, no JS) ---------- */

.carousel {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: var(--space-1) var(--space-3) var(--space-3);
  margin: 0 calc(var(--space-3) * -1);
  -webkit-overflow-scrolling: touch;
}

.carousel::-webkit-scrollbar {
  height: 6px;
}

.carousel::-webkit-scrollbar-thumb {
  background: var(--color-blossom);
  border-radius: var(--radius-pill);
}

.carousel__item {
  scroll-snap-align: center;
  flex: 0 0 85%;
}

@media (min-width: 768px) {
  .carousel__item {
    flex-basis: 60%;
  }
}

@media (min-width: 1025px) {
  .carousel__item {
    flex-basis: 32%;
  }
}

/* ---------- Instagram strip ---------- */

.ig-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-1);
}

@media (min-width: 768px) {
  .ig-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

.ig-grid__tile {
  aspect-ratio: 1;
  border-radius: 8px;
  background: linear-gradient(150deg, var(--color-blossom), var(--color-ink));
  text-decoration: none;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--color-blush);
  color: var(--color-ink);
  padding: var(--space-6) 0 calc(96px + env(safe-area-inset-bottom));
}

/* Extra clearance above is only needed under the floating pill (mobile-only) */
@media (min-width: 1025px) {
  .site-footer {
    padding-bottom: var(--space-4);
  }
}

.site-footer__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

@media (min-width: 768px) {
  .site-footer__columns {
    grid-template-columns: repeat(3, 1fr);
  }
}

.site-footer__col-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--color-ink);
  margin: 0 0 var(--space-2);
}

.site-footer__col a {
  display: block;
  /* Ink-on-Blush is 9:1, but kept undimmed for consistency with the rest of the system */
  color: var(--color-ink);
  text-decoration: none;
  padding: 6px 0;
}

.site-footer__col a:hover {
  text-decoration: underline;
}

.site-footer__base {
  border-top: 1px solid rgba(58, 50, 43, 0.15);
  padding-top: var(--space-3);
  font-size: 0.875rem;
}

/* ---------- Booking note + acupuncture booking button ---------- */

/* Highlighted "where to book" note (Contact + Acupuncture pages) */
.booking-note {
  max-width: 760px;
  margin: 0 auto var(--space-5);
  background: var(--color-white);
  border: 1px solid rgba(58, 50, 43, 0.12);
  border-left: 4px solid var(--color-blossom);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  box-shadow: var(--shadow-card);
  padding: var(--space-2) var(--space-3);
}

.booking-note p {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-ink);
}

.booking-note a {
  color: var(--color-ink);
  font-weight: 700;
  text-decoration-color: var(--color-blossom);
  text-underline-offset: 3px;
}

/* Acupuncture booking: button with the phone line beneath */
.acu-book {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.acu-book__phone {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-bark);
}

.acu-book__phone a {
  color: inherit;
  font-weight: 700;
}

/* Bark fails contrast on Blush sections, so the phone line goes Ink there */
.section--teal .acu-book__phone,
.section--earth .acu-book__phone {
  color: var(--color-ink);
}

/* Under the Acupuncture intro, sit closer to the text above */
.acu-prose + .booking-note {
  margin-top: var(--space-4);
}

/* ---------- Footer social link (Instagram) ---------- */

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.site-footer__social {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-ink);
  text-decoration: none;
  font-weight: 500;
}

.site-footer__social svg {
  width: 20px;
  height: 20px;
}

.site-footer__social:hover {
  text-decoration: underline;
}

/* Instagram strip tiles now hold real photos (home page). */
.ig-grid__tile {
  display: block;
  overflow: hidden;
}

.ig-grid__tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.ig-grid__tile:hover img {
  transform: scale(1.04);
  opacity: 0.9;
}