/* ==========================================================================
   Sol Remedy Massage: components
   Header, nav, buttons, section header, cards, tables, callout, figure,
   contact list, footer.
   Uses tokens only. No raw colors, sizes, weights, or dimensions.
   ========================================================================== */

/* ---------- Icons ---------- */
/* Holds <symbol> definitions; never rendered itself */
.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  flex: none;
  width: var(--size-icon);
  height: var(--size-icon);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--stroke-icon);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Brand logos (Yelp) are solid shapes, not outlines */
.icon--solid {
  fill: currentColor;
  stroke: none;
}

/* ---------- Brand (wordmark) ---------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--target-min);
  color: var(--color-heading);
  text-decoration: none;
}

.brand:hover {
  color: var(--color-heading);
}

.brand__mark {
  flex: none;
  width: var(--size-mark);
  height: auto;
}

.brand__name {
  white-space: nowrap;
}

/* On phones the name stacks to two lines so Menu fits beside it */
@media (max-width: 29.99em) {
  .brand__line {
    display: block;
  }
}

/* Logo: a sun with eight wavy, flame-like rays inside an arch frame,
   both terracotta (clay-300). Decorative only; the link's text names the business. */
.mark-frame {
  fill: none;
  stroke: var(--color-accent-clay);
  stroke-width: var(--stroke-mark-frame);
  stroke-linejoin: round;
}

.mark-sun { fill: var(--color-accent-clay); } /* terracotta, same as the frame */

/* ---------- Site header and navigation ---------- */
/* Deep sage to match the footer; no bottom border.
   Sticky, so the nav stays in reach while scrolling. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--color-bg-alt);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-3);
}

/* Scoped to the header so it outranks .btn's display */
.site-header .nav-toggle {
  display: none;
}

.site-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  list-style: none;
  padding: 0;
}

.site-nav__link {
  display: flex;
  align-items: center;
  min-height: var(--target-min);
  padding-inline: var(--space-2);
  color: var(--color-text);
  font-weight: var(--weight-regular); /* bold is saved for the current page */
  text-decoration-line: none;
}

.site-nav__link:hover {
  color: var(--color-link);
  text-decoration-line: underline;
}

/* Current page: bold cream text with a thick terracotta underline, never color alone */
.site-nav__link[aria-current="page"] {
  color: var(--color-heading);
  font-weight: var(--weight-bold);
  text-decoration-line: underline;
  text-decoration-thickness: var(--border-thick);
  text-decoration-color: var(--color-accent-clay);
  text-underline-offset: var(--underline-offset);
}

/* Phones and small tablets: the nav is a disclosure panel (only when JS is running).
   50em is where the full nav fits on one row beside the wordmark (it needs about 754px). */
@media (max-width: 49.99em) {
  /* Menu reads like the nav links: no outline box, terracotta on hover.
     Keyboard users still get the standard focus ring. */
  /* Icon only; "Menu" stays in the button for screen readers */
  .js .site-header .nav-toggle {
    display: inline-flex;
    min-width: var(--target-min);
    padding-inline: var(--space-2);
    border-color: transparent;
    color: var(--color-text);
  }

  .js .site-header .nav-toggle .icon {
    width: var(--size-icon-menu);
    height: var(--size-icon-menu);
  }

  .js .site-header .nav-toggle:hover {
    border-color: transparent;
    color: var(--color-link);
  }

  .site-nav {
    flex-basis: 100%;
  }

  .js .site-nav[data-open="false"] {
    display: none;
  }

  .site-nav__list {
    padding-block: var(--space-2) var(--space-4);
  }
}

/* Wider screens: nav sits inline */
@media (min-width: 50em) {
  .site-nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2) var(--space-4);
  }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--target-min);
  padding: var(--space-3) var(--space-5);
  border: var(--border-thick) solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-calm),
              border-color var(--duration-fast) var(--ease-calm),
              color var(--duration-fast) var(--ease-calm);
}

.btn--primary {
  background-color: var(--color-action);
  border-color: var(--color-action);
  color: var(--color-on-action);
}

.btn--primary:hover {
  background-color: var(--color-action-hover);
  border-color: var(--color-action-hover);
  color: var(--color-on-action);
}

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

.btn--secondary:hover {
  border-color: var(--color-heading);
  color: var(--color-heading);
  text-decoration-line: underline;
  text-underline-offset: var(--underline-offset);
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Windows High Contrast: keep button edges visible */
@media (forced-colors: active) {
  .btn {
    border-color: ButtonText;
  }
}

/* ---------- Section header ---------- */
.section-header {
  max-width: var(--prose-max);
  margin-bottom: var(--space-7);
}

.section-header--center {
  margin-inline: auto;
  text-align: center;
}

/* ---------- Tag ---------- */
.tag {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius);
  background-color: var(--color-bg-alt);
}

/* ---------- Cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--size-card-min)), 1fr));
  gap: var(--space-5);
  list-style: none;
  padding: 0;
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-bg-raised);
}

.card__tag {
  align-self: flex-start;
}

.card__link {
  margin-top: auto;
  padding-top: var(--space-2);
}

/* ---------- Tables ---------- */
.table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.data-table caption {
  text-align: left;
  padding-bottom: var(--space-3);
}

.data-table th,
.data-table td {
  padding: var(--space-4) var(--space-3);
  border-bottom: var(--border-thin) solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.data-table thead th {
  border-bottom: var(--border-thick) solid var(--color-border-strong);
}

.data-table tbody th {
  color: var(--color-text);
}

.data-table .num {
  text-align: right;
  white-space: nowrap;
}

.table-note {
  margin-top: var(--space-3);
}

/* ---------- Callout ---------- */
.callout {
  max-width: calc(var(--prose-max) + 2 * var(--space-6));
  padding: var(--space-6);
  border-radius: var(--radius);
  background-color: var(--color-bg-raised);
}

.callout ul {
  padding-left: var(--space-5);
}

.callout li + li {
  margin-top: var(--space-2);
}

/* ---------- Figure ---------- */
.figure {
  display: grid;
  gap: var(--space-3);
}

.figure img {
  width: 100%;
  border-radius: var(--radius);
  object-fit: cover;
}

.figure--arch img {
  border-radius: var(--radius-arch);
}


/* ---------- Contact list ---------- */
.contact-list {
  display: grid;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
}

.contact-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

/* Let text shrink inside the flex row; long emails wrap instead of overflowing */
.contact-list li > :not(.icon) {
  min-width: 0;
  overflow-wrap: anywhere;
}

.contact-list .icon {
  margin-top: var(--space-1);
  color: var(--color-accent-clay);
}

address {
  font-style: normal;
}


/* ---------- Contact form ----------
   Labels are Body at 700. Hints and errors are Body. An error always has
   text and a thicker border, never color alone. */
.form {
  display: grid;
  gap: var(--space-5);
}

.field {
  display: grid;
  gap: var(--space-2);
}

.field label {
  font-weight: var(--weight-bold);
}

.field input,
.field textarea {
  width: 100%;
  min-height: var(--target-min);
  padding: var(--space-3) var(--space-4);
  border: var(--border-thin) solid var(--color-field);
  border-radius: var(--radius);
  background-color: var(--color-field);
  color: var(--color-on-field);
  line-height: var(--leading-relaxed);
}

.field textarea {
  resize: none; /* fixed size: longer messages scroll inside the box */
  overflow-y: auto;
}

.field [aria-invalid="true"] {
  border-width: var(--border-thick);
  border-color: var(--color-error);
}

.field__error {
  color: var(--color-error);
  font-weight: var(--weight-bold);
}

/* ---------- Footer ---------- */
.site-footer {
  padding-block: var(--space-8) var(--space-6);
}

/* Two text columns that start level with each other; no logo (the name and
   logo are in the sticky header). The copyright is last on phones and
   tablets; on wide screens it sits under the about lines, level with the
   contact buttons. */
.site-footer__grid {
  display: grid;
  grid-template-areas:
    "about"
    "visit"
    "copy";
  gap: var(--space-5) var(--space-7);
}

.site-footer__about { grid-area: about; }
.site-footer__visit { grid-area: visit; }
.site-footer__copy  { grid-area: copy; }

@media (min-width: 40em) {
  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "about visit"
      "copy  copy";
  }
}

@media (min-width: 64em) {
  .site-footer__grid {
    grid-template-areas:
      "about visit"
      "copy  visit";
    row-gap: 0; /* the copyright follows the left column's lines directly */
  }

  /* Bottom edge and height match the row of 44px contact buttons */
  .site-footer__copy {
    align-self: end;
    display: flex;
    align-items: center;
    min-height: var(--target-min);
  }
}

.site-footer__col > * + * {
  margin-top: var(--space-2); /* footer lines sit close, like an address block */
}

/* ---------- Icon buttons (footer contact links) ----------
   Icon only. The label is the link's accessible name, and it appears as a
   tooltip on hover and keyboard focus (WCAG 1.4.13: it can be hovered,
   stays until the pointer or focus leaves, and Escape dismisses it). */
.icon-btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
}

/* Text lines get about 6px of breathing room from their line height; the
   44px buttons get none, so this restores a matching gap above them.
   (Scoped to the footer so it outranks the base ul[role="list"] reset.) */
.site-footer .icon-btns {
  padding-top: var(--space-2);
}

.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--target-min);
  height: var(--target-min);
  border: var(--border-thin) solid var(--color-border-strong);
  border-radius: var(--radius);
  color: var(--color-link);
  text-decoration-line: none;
  transition: color var(--duration-fast) var(--ease-calm),
              background-color var(--duration-fast) var(--ease-calm),
              border-color var(--duration-fast) var(--ease-calm);
}

/* Hover fills the button in terracotta, like the primary button */
.icon-btn:hover {
  border-color: var(--color-action);
  background-color: var(--color-action);
  color: var(--color-on-action);
}

.icon-btn__label {
  position: absolute;
  bottom: calc(100% + var(--space-2));
  left: 50%;
  z-index: 10;
  /* --tip-shift is set by main.js to keep the tooltip inside the window */
  transform: translateX(calc(-50% + var(--tip-shift, 0px)));
  width: max-content;
  max-width: calc(100vw - 2 * var(--gutter));
  padding: var(--space-1) var(--space-3);
  border: var(--border-thin) solid transparent; /* shows in forced colors */
  border-radius: var(--radius);
  background-color: var(--color-heading);
  color: var(--color-on-action);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  opacity: 0;
  pointer-events: none;
}

/* Fills the gap so the pointer can move onto the tooltip without losing it */
.icon-btn__label::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: var(--space-2);
}

.icon-btn:hover .icon-btn__label,
.icon-btn:focus-visible .icon-btn__label {
  opacity: 1;
  pointer-events: auto;
}

.icon-btn.is-dismissed .icon-btn__label {
  opacity: 0;
  pointer-events: none;
}

/* ==========================================================================
   Page components (Phase 4)
   ========================================================================== */

/* ---------- Responsive photo ---------- */
.photo {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius);
}

.photo--wide     { aspect-ratio: var(--ratio-wide); }
.photo--card     { aspect-ratio: var(--ratio-card); }
.photo--portrait { aspect-ratio: var(--ratio-portrait); }

.photo--arch {
  aspect-ratio: var(--ratio-portrait);
  border-radius: var(--radius-arch);
}

/* ---------- Hero ---------- */
.hero__inner {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

.hero__text {
  min-width: 0;
}


@media (min-width: 64em) {
  .hero__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
}

/* ---------- Media split (text beside a photo) ---------- */
.split {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

.split > * {
  min-width: 0;
}

.split__media {
  max-width: var(--size-headshot-max);
}

@media (min-width: 64em) {
  .split {
    grid-template-columns: 2fr 3fr;
    gap: var(--space-8);
  }

  .split--reverse {
    grid-template-columns: 3fr 2fr;
  }

  .split--reverse .split__media {
    order: 2;
  }

  /* Photo on the left on wide screens even though the text comes first in
     the page (so the text leads when the columns stack on phones) */
  .split--media-first .split__media {
    order: -1;
  }

  /* Sticky photo: when the text runs longer than the photo, the photo
     stays in view (just under the sticky header) while the text scrolls
     past it. Wide screens only; on phones and tablets they stack. */
  .split--sticky {
    align-items: start;
  }

  .split--sticky .split__media {
    position: sticky;
    top: var(--size-header-offset);
  }
}

/* ---------- Photo placed under the title when stacked ----------
   On phones and tablets (below 64em), a section's photo sits right after
   its title instead of after all of its text:
     .stack-photo           the section's layout container
     .stack-photo__text     the text column (its children join the stack)
     .stack-photo__before   text that stays above the photo (the title,
                            and sometimes an intro or first list)
     .stack-photo__media    the photo or gallery
   Everything else in the text column follows the photo. Wide screens keep
   their normal side-by-side layout. */
@media (max-width: 63.99em) {
  .stack-photo {
    display: flex;
    flex-direction: column;
    align-items: stretch; /* the side-by-side layouts center items; stacked, everything lines up left */
    gap: 0;
  }

  .stack-photo__text {
    display: contents;
  }

  .stack-photo__text > * {
    order: 2;
  }

  .stack-photo__text > .stack-photo__before {
    order: 0;
  }

  .stack-photo__media {
    order: 1;
    margin-block: var(--space-6);
  }
}

/* ---------- Photo cards ---------- */
.card--photo {
  padding: var(--space-4) var(--space-4) var(--space-6);
}

.card--photo > :not(.photo, picture) {
  margin-inline: var(--space-3);
}

.card--photo .photo {
  margin-bottom: var(--space-2);
}

/* ---------- Steps (a real sequence, so an ordered list) ---------- */
.steps {
  display: grid;
  gap: var(--space-6);
  list-style: none;
  padding: 0;
}

.steps__item {
  display: grid;
  gap: var(--space-2);
  counter-increment: step;
}

/* The order matters, so each step heading starts with its number: "1. Book online" */
.steps {
  counter-reset: step;
}

.steps__item h3::before {
  content: counter(step) ". ";
  color: var(--color-label);
}

/* Bulleted variant (Home "What to expect"): the site's bullet (see
   .bullets) hangs beside each heading instead of a number */
.steps--bullets .steps__item {
  position: relative;
  padding-left: var(--space-5);
}

.steps--bullets .steps__item :is(h3, h4)::before {
  content: "\2022";
  position: absolute;
  left: 0;
  color: var(--color-bullet);
}

@media (min-width: 64em) {
  .steps--row {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Finding my studio: each step is a photo with its text below. Stacked on
   phones and tablets, three side by side on wide screens. No numbers: the
   photos carry the order, and the list is still an <ol> for screen readers. */
.steps--photos .steps__item {
  align-content: start;
  gap: var(--space-4);
}

.steps--photos .steps__item h3::before {
  content: none;
}

@media (min-width: 64em) {
  .steps--photos {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- Gallery ---------- */
.gallery {
  display: grid;
  gap: var(--space-5);
  list-style: none;
  padding: 0;
}

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


/* ---------- Hours ---------- */
.hours {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-6);
}

.hours dt {
  font-weight: var(--weight-bold);
}

/* ---------- Two-column content ---------- */
.columns {
  display: grid;
  gap: var(--space-7);
}

.columns > * {
  min-width: 0;
}

@media (min-width: 64em) {
  .columns {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
}

/* Bulleted lists inside running text. One bullet style for the whole site:
   a terracotta "•" (--color-bullet) hanging in a --space-5 indent. The Home
   "What to expect" list (.steps--bullets) uses the same bullet. Lists keep
   role="list" so VoiceOver still announces them without native markers. */
.bullets {
  list-style: none;
  padding-left: 0;
}

.bullets li {
  position: relative;
  padding-left: var(--space-5);
}

.bullets li::before {
  content: "\2022";
  position: absolute;
  left: 0;
  color: var(--color-bullet);
}

.bullets li + li {
  margin-top: var(--space-2);
}

/* Link that closes a section, below a grid */
.section-footer {
  margin-top: var(--space-6);
}


/* Even counts (2 or 4 cards) sit in pairs, so no card is left alone in a row */
@media (min-width: 40em) {
  .card-grid--pairs {
    grid-template-columns: repeat(2, 1fr);
  }
}