/* ==========================================================================
   Thai Massage Bahrain — Swedish Massage page
   Page-specific rules only. Shared tokens/utilities live in style.css and
   the Tailwind config in partials/header.php.
   Mobile breakpoint mirrors style.css / Tailwind "md" (max-width 767.98px),
   so mobile rules never overlap Tailwind md: desktop classes at exactly 768px.
   Selectors are prefixed with .sm so they win over Tailwind CDN utilities,
   which are injected after this stylesheet.
   ========================================================================== */

/* --- Anchors clear the sticky header ------------------------------------ */
.sm [id] {
  scroll-margin-top: 6rem;
}

/* --- Subtle gold underlined text links ---------------------------------- */
/* Light sections: darker gold text (AA 4.9:1 on #EDE3CE / #F7F2E8), gold underline. */
.sm .sm-link {
  color: #7b5c00;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: #C8A248;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.sm .sm-link:hover {
  color: #14332D;
  text-decoration-color: #14332D;
}
/* Dark sections: gold text (AA 5.6:1 on #14332D). */
.sm .sm-dark .sm-link {
  color: #C8A248;
  text-decoration-color: rgba(200, 162, 72, 0.6);
}
.sm .sm-dark .sm-link:hover {
  color: #EDE3CE;
  text-decoration-color: #EDE3CE;
}

/* Stand-alone links get a 44px tap target. */
.sm .sm-tap {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* --- Visible focus states ------------------------------------------------ */
.sm a:focus-visible,
.sm button:focus-visible,
.sm summary:focus-visible,
.sm [tabindex]:focus-visible {
  outline: 3px solid #7b5c00;
  outline-offset: 3px;
  border-radius: 4px;
}
.sm .sm-dark a:focus-visible,
.sm .sm-dark button:focus-visible,
.sm .sm-dark [tabindex]:focus-visible {
  outline-color: #C8A248;
}

/* --- FAQ (<details>) ----------------------------------------------------- */
.sm details > summary {
  list-style: none;
}
.sm details > summary::-webkit-details-marker {
  display: none;
}
.sm details[open] > summary .sm-chevron {
  transform: rotate(180deg);
}

/* --- Accordions (Good to know / After your session) -------------------- */
.sm .sm-acc-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: default;
}
.sm .sm-acc-icon {
  display: none;
  margin-left: auto;
  transition: transform 0.2s ease;
}

/* --- Tabs (mobile only) -------------------------------------------------- */
.sm .sm-tablist {
  display: none;
}

/* ==========================================================================
   Mobile (under 768px)
   ========================================================================== */
@media (max-width: 767.98px) {

  /* No horizontal scroll anywhere */
  .sm {
    overflow-x: hidden;
  }

  /* Sections are full-width, edge to edge, 20px side padding, 24px vertical */
  .sm section,
  .sm .sm-section {
    width: 100%;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    box-sizing: border-box;
  }

  /* Hero photo: full-width 4:3, max-height 220px, 16px rounded corners */
  .sm .sm-hero-photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    max-height: 220px;
    border-radius: 1rem;
    object-fit: cover;
  }

  /* Every other photo on mobile: full content width, 16:9 crop, max-height 180px, 16px rounded corners */
  .sm .sm-photo {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 180px;
    border-radius: 1rem;
    object-fit: cover;
  }

  /* Horizontal swipe carousels (85% wide card, peek of next) */
  .sm .sm-carousel {
    display: flex;
    gap: 0.875rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-inline: -1.25rem;
    padding: 0.75rem 1.25rem 0.5rem;
    scroll-padding-inline: 1.25rem;
    scrollbar-width: none;
  }
  .sm .sm-carousel::-webkit-scrollbar {
    display: none;
  }
  .sm .sm-carousel > * {
    flex: 0 0 85%;
    max-width: 320px;
    scroll-snap-align: start;
    transform: none;
  }

  /* Explore treatments horizontal scroll row on mobile */
  .sm .sm-explore-row {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-inline: -1.25rem;
    padding: 0.5rem 1.25rem 0.75rem;
    scroll-padding-inline: 1.25rem;
    scrollbar-width: none;
  }
  .sm .sm-explore-row::-webkit-scrollbar {
    display: none;
  }
  .sm .sm-explore-row > * {
    flex: 0 0 75%;
    max-width: 280px;
    scroll-snap-align: start;
  }

  /* Compact vertical timeline for "Your Swedish massage, step by step" */
  .sm .sm-timeline {
    position: relative;
    padding-left: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }
  .sm .sm-timeline::before {
    content: '';
    position: absolute;
    left: 0.875rem;
    top: 1rem;
    bottom: 1rem;
    width: 2px;
    background: #C8A248;
    opacity: 0.4;
  }
  .sm .sm-timeline-item {
    position: relative;
  }
  .sm .sm-timeline-num {
    position: absolute;
    left: -2rem;
    top: 0.75rem;
    margin-bottom: 0;
    z-index: 1;
    border: 2px solid #C8A248;
    background: #14332D;
    color: #C8A248;
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.8125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    font-weight: 700;
  }

  /* Tabs: Studio / Home or hotel on mobile */
  .sm .sm-tabs.is-enhanced .sm-tablist {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem;
    margin: 0 0 1.25rem;
    background: #FAF6EE;
    border: 1px solid rgba(200, 162, 72, 0.4);
    border-radius: 0.75rem;
  }
  .sm .sm-tab {
    flex: 1 1 0;
    min-height: 48px;
    padding: 0.5rem 0.25rem;
    border-radius: 0.5rem;
    color: #14332D;
    font-size: 0.875rem;
    font-weight: 500;
    background: transparent;
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  .sm .sm-tab[aria-selected="true"] {
    background: #C8A248;
    color: #0F2722;
    font-weight: 600;
  }
  .sm .sm-tabs.is-enhanced .sm-panel:not(.is-active) {
    display: none;
  }

  /* Accordions become interactive on mobile */
  .sm .sm-acc-btn {
    cursor: pointer;
    min-height: 48px;
  }
  .sm .sm-acc-icon {
    display: inline-block;
  }
  .sm .sm-acc-btn[aria-expanded="true"] .sm-acc-icon {
    transform: rotate(180deg);
  }
  .sm .sm-acc-head {
    border-bottom: 0;
    padding-bottom: 0;
  }
  .sm .sm-acc-panel {
    padding-top: 1rem;
  }
}

/* ==========================================================================
   Desktop (768px and up)
   ========================================================================== */
@media (min-width: 768px) {
  /* Accordion content is always visible */
  .sm .sm-acc-panel[hidden] {
    display: block;
  }

  /* Desktop timeline items in grid */
  .sm .sm-timeline-num {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Ensure desktop header fits cleanly at 768px tablet portrait */
@media (min-width: 768px) and (max-width: 1024px) {
  header .max-w-7xl {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  header nav {
    gap: 0.875rem !important;
  }
}