/*
 * Hinnasto (price list)
 *
 * Styles plain classic-editor markup wrapped in <div class="hinnasto">:
 *   h2            category heading (give it an id for the jump links)
 *   ul > li       "Palvelu <strong>hinta</strong>" rows
 *   table         prices by hair length (Lyhyet / Puolipitkät / Pitkät)
 *   p             small notes under a category
 * Optional helpers: p.hinnasto-intro, p.hinnasto-nav, div.hinnasto-cta
 *
 * Note: html font-size is 62.5%, so 1rem = 10px.
 */

.hinnasto {
  --hn-ink: #333;
  --hn-muted: #6b6b6b;
  --hn-line: #e4e2df;
  --hn-soft: #f5f4f2;

  max-width: 760px;
  margin: 0 auto 4rem;
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--hn-ink);
}

/* Page title rendered by page.php right above the content */
.wrapper:has(> .hinnasto) > h1 {
  margin: 4.8rem 0 1.6rem;
  /* scales down so "PARTURIKAMPAAMO" fits a 320px screen */
  font-size: clamp(2rem, 7vw, 2.6rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-align: center;
}

/* Intro + jump links */
.hinnasto .hinnasto-intro {
  max-width: 54ch;
  margin: 0 auto 2.4rem;
  font-size: 1.5rem;
  color: var(--hn-muted);
  text-align: center;
}

.hinnasto .hinnasto-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  margin: 0 0 1.6rem;
}

.hinnasto .hinnasto-nav a {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  border: 1px solid var(--hn-line);
  border-radius: 999px;
  font-family: Montserrat, sans-serif;
  font-size: 1.3rem;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.hinnasto .hinnasto-nav a:hover,
.hinnasto .hinnasto-nav a:focus-visible {
  background: var(--hn-ink);
  border-color: var(--hn-ink);
  color: #fff;
}

/* Category headings */
.hinnasto h2 {
  margin: 4.8rem 0 0.4rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--hn-ink);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  scroll-margin-top: 2rem;
}

/* Single-price rows: "Palvelu <strong>hinta</strong>" */
.hinnasto ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hinnasto li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--hn-line);
}

.hinnasto li strong {
  flex-shrink: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}

/* Prices by hair length */
.hinnasto table {
  width: 100%;
  margin: 2rem 0 0;
  border-collapse: collapse;
}

.hinnasto th {
  padding: 0 0 0.8rem 1.2rem;
  border-bottom: 1px solid var(--hn-ink);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hn-muted);
  text-align: right;
  white-space: nowrap;
}

.hinnasto td {
  padding: 1.1rem 0 1.1rem 1.2rem;
  border-bottom: 1px solid var(--hn-line);
  vertical-align: baseline;
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hinnasto th:first-child,
.hinnasto td:first-child {
  padding-left: 0;
  text-align: left;
  font-weight: 400;
  white-space: normal;
}

.hinnasto td:not(:first-child) {
  width: 7rem;
}

/* Notes under a category */
.hinnasto p {
  margin: 1.2rem 0 0;
  font-size: 1.35rem;
  color: var(--hn-muted);
}

/* Booking call to action */
.hinnasto .hinnasto-cta {
  margin-top: 5.6rem;
  padding: 3.2rem 2rem;
  background: var(--hn-soft);
  text-align: center;
}

.hinnasto .hinnasto-cta h2 {
  margin: 0 0 0.8rem;
  padding: 0;
  border: 0;
}

.hinnasto .hinnasto-cta p {
  margin: 0 0 2rem;
  font-size: 1.5rem;
}

.hinnasto .hinnasto-cta p:last-child {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin: 0;
}

.hinnasto .hinnasto-cta a {
  display: inline-block;
  padding: 1.2rem 2rem;
  border: 1px solid var(--hn-ink);
  background: var(--hn-ink);
  color: #fff;
  font-family: Merriweather, Georgia, serif;
  font-size: 1.4rem;
  text-transform: uppercase;
  transition: background-color 0.15s, color 0.15s;
}

.hinnasto .hinnasto-cta a + a {
  background: transparent;
  color: var(--hn-ink);
}

.hinnasto .hinnasto-cta a:hover,
.hinnasto .hinnasto-cta a:focus-visible {
  background: #000;
  border-color: #000;
  color: #fff;
}

/* Small screens: stack each table row — name on its own line, the three
   length prices in columns under the Lyhyet / Puolipitkät / Pitkät labels. */
@media only screen and (max-width: 35.49em) {
  .hinnasto table,
  .hinnasto thead,
  .hinnasto tbody {
    display: block;
  }

  .hinnasto tr {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 1.2rem;
  }

  .hinnasto thead tr {
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--hn-ink);
  }

  .hinnasto tbody tr {
    row-gap: 0.4rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--hn-line);
  }

  .hinnasto th,
  .hinnasto td,
  .hinnasto td:not(:first-child) {
    width: auto;
    padding: 0;
    border: 0;
  }

  .hinnasto th:first-child {
    display: none;
  }

  .hinnasto td:first-child {
    grid-column: 1 / -1;
  }
}

@media only screen and (min-width: 48em) {
  .wrapper:has(> .hinnasto) > h1 {
    margin-top: 6.4rem;
    font-size: 3.6rem;
  }

  .hinnasto {
    font-size: 1.6rem;
  }

  .hinnasto h2 {
    margin-top: 6.4rem;
    font-size: 2.6rem;
  }

  .hinnasto th {
    font-size: 1.2rem;
  }

  .hinnasto td:not(:first-child) {
    width: 10rem;
  }
}