/* ─────────────────────────────────────────────────────────────
   About Ayurveda — overrides on top of panchakarma.css

   panchakarma.css is built for a panel-swap page: it hides every
   .content section and reveals only the one matching the URL hash.
   This page reads as one continuous article, so every section stays
   visible and is separated by a rule instead.
   ───────────────────────────────────────────────────────────── */

/* Width rules now live in panchakarma.css (shared by all three pages).
   This file only overrides the panel-swap behaviour. */
.content section {
  display: block;
  padding: 8px 0 8px;
  scroll-margin-top: 96px;
}

/* a quiet divider between the major sections */
.content section + section {
  margin-top: 56px;
  padding-top: 56px;
  border-top: 1px solid var(--rule);
}

/* sub-headings are anchor targets too — give them clearance */
.content h3[id] { scroll-margin-top: 96px; }

/* links inside body copy and callouts */
.content p a,
.content li a,
.callout a {
  color: var(--moss);
  text-decoration: underline;
  text-underline-offset: 3px;
  -webkit-text-decoration-color: rgba(47, 90, 85, 0.4);
  text-decoration-color: rgba(47, 90, 85, 0.4);
  -webkit-transition: color 0.25s ease;
  transition: color 0.25s ease;
}
.content p a:hover,
.content li a:hover,
.callout a:hover { color: var(--ochre-ink); }

/* the elements/dosha grid reads better with a little air above */
.content .parts-grid { margin: 28px 0 30px; }

/* sticky TOC: allow it to scroll if the list outgrows the viewport */
.toc {
  max-height: calc(100vh - 120px);
  max-height: calc(100svh - 120px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* active state already exists in panchakarma.css (.toc a.active);
   nested sub-links get a subtler treatment */
.toc-group ul a.active { font-weight: 500; }

@media (max-width: 900px) {
  .content section + section { margin-top: 40px; padding-top: 40px; }
  .toc { max-height: none; overflow: visible; }
}

/* ─────────────────────────────────────────────────────────────
   Tables — used on treatments.html for the seasonal Panchakarma
   table and the price lists. Scroll horizontally on small screens
   rather than crushing the columns.
   ───────────────────────────────────────────────────────────── */
.table-wrap {
  margin: 28px 0 32px;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--rule);
  background: rgba(255, 255, 255, 0.22);
}

.content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.6;
  text-align: left;
}

.content table caption {
  caption-side: top;
  text-align: left;
  padding: 14px 16px 10px;
  font-family: 'Fraunces', 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 15px;
  color: var(--ochre-ink);
  border-bottom: 1px solid var(--rule);
}

.content table th,
.content table td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(188, 179, 154, 0.5);
  vertical-align: top;
}

.content table thead th {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--moss);
  white-space: nowrap;
  border-bottom: 1px solid var(--rule);
}

.content table tbody th {
  font-family: 'Fraunces', 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 17px;
  color: var(--ink);
  white-space: nowrap;
}

.content table tbody tr:last-child th,
.content table tbody tr:last-child td { border-bottom: 0; }

.content table tbody tr:hover { background: rgba(188, 179, 154, 0.14); }

/* price tables: numerals sit right, tabular */
.price-table td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.price-table thead th:last-child { text-align: right; }
.price-table td:first-of-type { white-space: nowrap; color: rgba(26, 31, 36, 0.7); }

/* the seasonal table carries long prose in two columns */
.season-table td { font-size: 14.5px; }
.season-table tbody th { font-size: 18px; }

@media (max-width: 900px) {
  .content table { font-size: 14px; }
  .content table th,
  .content table td { padding: 10px 12px; }
  .season-table { min-width: 720px; }   /* force horizontal scroll, keep readable */
  .price-table  { min-width: 420px; }
}