/* TOXICOTRIBE — editorial pages (page.php) and the 404.
   Content comes from the block editor, so this styles the elements an
   editor actually produces rather than assuming a fixed structure. */

.page-hero{ padding-block: var(--sp-7) var(--sp-5); }
.page-hero__intro{ color: var(--c-text-muted); max-width:58ch; margin-top: var(--sp-3); }
.page-feature{ margin-bottom: var(--sp-7); }
.page-feature img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }

/* A comfortable measure for long-form copy — the same reason the PDP
   description is capped rather than running the full page width. */
.page-content{ max-width:72ch; padding-bottom: var(--sp-9); }
.page-content > * + *{ margin-top: var(--sp-4); }
.page-content h2{
  font-family: var(--font-display); font-weight:700; font-size: var(--fs-h2);
  text-transform:uppercase; letter-spacing: var(--ls-tight); line-height: var(--lh-snug);
  margin-top: var(--sp-7);
}
.page-content h3{
  font-family: var(--font-display); font-weight:600; font-size: var(--fs-h3);
  text-transform:uppercase; letter-spacing:0.01em; margin-top: var(--sp-6);
}
.page-content h4{
  font-family: var(--font-display); font-weight:600; font-size: var(--fs-h4);
  text-transform:uppercase; letter-spacing: var(--ls-cap); margin-top: var(--sp-5);
}
.page-content p,
.page-content li{ font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-relaxed); }
.page-content ul,
.page-content ol{ padding-left: var(--sp-5); }
.page-content li + li{ margin-top: var(--sp-2); }
.page-content a{ text-decoration:underline; text-underline-offset:3px; }
.page-content a:hover{ color: var(--tt-red); }
.page-content img{ max-width:100%; height:auto; }
.page-content blockquote{
  border-left:3px solid var(--tt-red); padding-left: var(--sp-4); margin-left:0;
  font-size: var(--fs-body-lg);
}
.page-content hr{ height:1px; background: var(--c-border); border:0; margin-block: var(--sp-6); }
.page-content table{ width:100%; border-collapse:collapse; }
.page-content th,
.page-content td{ text-align:left; padding: var(--sp-3); border:1px solid var(--c-border); font-size: var(--fs-body-sm); }
.page-content thead th{
  background: var(--c-surface);
  font-family: var(--font-display); font-weight:600; text-transform:uppercase;
  letter-spacing: var(--ls-cap); font-size:0.8rem;
}
/* Details/summary is how an FAQ is usually built in the editor. */
.page-content details{ border-bottom:1px solid var(--c-border); padding-block: var(--sp-4); }
.page-content details summary{
  cursor:pointer; list-style:none;
  font-family: var(--font-display); font-weight:600; text-transform:uppercase;
  letter-spacing: var(--ls-cap); font-size:0.95rem;
  display:flex; justify-content:space-between; align-items:center; gap: var(--sp-3);
}
.page-content details summary::-webkit-details-marker{ display:none; }
.page-content details summary::after{ content:"+"; font-family: var(--font-body); font-weight:400; }
.page-content details[open] summary::after{ content:"–"; }

/* ---------------------------------------------------------
   404
   --------------------------------------------------------- */
.error-404{ padding-block: var(--sp-9) var(--sp-7); }
.error-404 .t-display{ margin-block: var(--sp-2) var(--sp-4); }
.error-404__search{ display:flex; gap: var(--sp-3); align-items:stretch; max-width:560px; margin-top: var(--sp-6); }
.error-404__search .search-form__input{
  flex:1; min-width:0; font-family: var(--font-display); font-size:1.1rem;
  border:0; border-bottom:2px solid var(--tt-black); background:transparent; padding: var(--sp-2) 0;
}
.error-404__search .search-form__input:focus{ outline:none; border-color: var(--tt-red); }
.error-404__actions{ display:flex; flex-wrap:wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.error-404__sports{ margin-top: var(--sp-7); }
.error-404__sports .t-meta{ margin-bottom: var(--sp-3); }

/* ---------------------------------------------------------
   Size Chart ([toxicotribe_size_chart], inc/template-tags.php)
   Real tables, never images: a picture of a size chart can't be
   read by a screen reader, zoomed usefully on a phone, or indexed —
   and "what size am I" is the highest-intent question this shop gets.
   --------------------------------------------------------- */

/* Visually hidden but available to assistive tech. WordPress core ships
   this class in its own admin styles only, so the theme has to define it
   or every <caption> here would render as visible stray text. */
.screen-reader-text{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip-path: inset(50%); white-space:nowrap; border:0;
}

.page-hero__eyebrow{ color: var(--tt-red); margin-bottom: var(--sp-2); }

/* Jump links. Sticky under the header so a customer comparing two garments
   doesn't have to scroll back up to switch chart. */
.chart-jump{
  position:sticky; top:0; z-index:5;
  display:flex; flex-wrap:wrap; gap: var(--sp-2);
  padding-block: var(--sp-4);
  background: var(--c-bg);
  border-bottom:1px solid var(--c-border);
}
.chart-jump__link{
  font-family: var(--font-display); font-weight:600;
  font-size: var(--fs-label); text-transform:uppercase; letter-spacing: var(--ls-cap);
  padding: 8px 14px; border:1px solid var(--c-border-strong);
  transition: background .15s ease, color .15s ease;
}
.chart-jump__link:hover,
.chart-jump__link:focus-visible{ background: var(--c-bg-inverse); color: var(--c-text-inverse); }

.size-chart{ padding-block: var(--sp-7); border-bottom:1px solid var(--c-border); scroll-margin-top: 96px; }
.size-chart__head{ margin-bottom: var(--sp-5); }
.size-chart__desc{ color: var(--c-text-muted); margin-top: var(--sp-2); max-width:56ch; }

/* The scroll container, not the table, takes the overflow — so a narrow
   phone scrolls the table sideways instead of the whole page. tabindex
   makes that scroll reachable from the keyboard. */
.size-chart__scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.size-chart__scroll:focus-visible{ outline:2px solid var(--tt-red); outline-offset:2px; }

.size-table{ width:100%; border-collapse:separate; border-spacing:0; min-width:340px; }
.size-table th,
.size-table td{
  padding: var(--sp-3) var(--sp-4);
  text-align:left; font-size: var(--fs-body-sm);
  border-bottom:1px solid var(--c-border);
}
.size-table thead th{
  background: var(--tt-red); color: var(--c-text-inverse);
  font-family: var(--font-display); font-weight:700;
  text-transform:uppercase; letter-spacing: var(--ls-cap); font-size: var(--fs-label);
  border-bottom:0; white-space:nowrap;
}
.size-table__unit{
  font-weight:400; letter-spacing:0; text-transform:none;
  opacity:.75; margin-left:4px; font-size: var(--fs-micro);
}
.size-table__size{
  font-family: var(--font-display); font-weight:700;
  text-transform:uppercase; letter-spacing: var(--ls-cap);
  white-space:nowrap;
}
.size-table tbody tr:nth-child(odd) td,
.size-table tbody tr:nth-child(odd) th{ background: var(--tt-red-tint); }
.size-table tbody tr:hover td,
.size-table tbody tr:hover th{ background: var(--tt-gray-100); }
.size-table .is-num{ font-variant-numeric: tabular-nums; }

/* How to measure */
.measure-guide{ padding-block: var(--sp-8); }
.measure-guide__lede{ color: var(--c-text-muted); max-width:60ch; margin-top: var(--sp-3); }
.measure-steps{
  list-style:none; padding:0; margin: var(--sp-6) 0 0;
  display:grid; gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.measure-step{ display:flex; gap: var(--sp-4); align-items:flex-start; }
.measure-step__num{
  font-family: var(--font-accent); font-size: var(--fs-h3);
  color: var(--tt-red); line-height:1; flex-shrink:0;
}
.measure-step h3{ margin-bottom: var(--sp-2); }
.measure-step p{ color: var(--c-text-muted); }

/* Closing CTA */
.size-help{ margin-bottom: var(--sp-9); }
.size-help__inner{
  background: var(--c-bg-inverse); color: var(--c-text-inverse);
  padding: var(--sp-7);
}
.size-help__inner p{ color: var(--tt-gray-300); max-width:60ch; margin-top: var(--sp-3); }
.size-help__actions{ display:flex; flex-wrap:wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
/* The outline button is drawn for light backgrounds; invert it here rather
   than adding a second modifier used in exactly one place. */
.size-help__actions .btn--outline-dark{ border-color: var(--tt-white); color: var(--tt-white); }
.size-help__actions .btn--outline-dark:hover{ background: var(--tt-white); color: var(--tt-black); }

@media (max-width: 640px){
  .size-help__inner{ padding: var(--sp-5); }
  .size-table th,
  .size-table td{ padding: var(--sp-3); }
}

/* The size chart is a full-width component, so it opts out of the 72ch
   reading measure that editorial pages are capped to. Later in the file
   than .page-content, so it wins at equal specificity. */
.page-content--size-chart{ max-width:none; }

/* page.php styles every heading the block editor might emit, and those
   rules out-rank the .t-* type classes on specificity. Restate the intended
   sizes inside the chart so its headings don't inherit editorial sizing. */
.page-content .size-chart-app h2,
.page-content .size-chart-app h3,
.page-content .size-chart-app h4{ margin-top:0; }
.page-content .size-chart-app .t-h3{ font-size: var(--fs-h3); }
.page-content .size-chart-app .t-h4{ font-size: var(--fs-h4); }
.page-content .size-chart-app p{ line-height: var(--lh-normal); }
.page-content .size-chart-app ol{ padding-left:0; }
.page-content .size-chart-app table th,
.page-content .size-chart-app table td{ border:0; border-bottom:1px solid var(--c-border); }

/* .page-content underlines every link it contains, which is right for prose
   and wrong for the chips and buttons the chart renders. Scoped overrides
   rather than loosening the prose rule. */
.page-content .chart-jump__link,
.page-content .btn{ text-decoration:none; }
.page-content .chart-jump__link:hover,
.page-content .chart-jump__link:focus-visible{ color: var(--c-text-inverse); }
.page-content .size-help__actions .btn--outline-dark:hover{ color: var(--tt-black); }

/* Three columns across a 1440px page put the size and its measurement about
   a foot apart on a desktop monitor, which is exactly the eye-travel a size
   chart must not have. Cap the measure; the scroll container still handles
   narrow screens. */
.size-table{ max-width: 720px; }

/* .btn--primary is black, which is invisible on the black CTA panel. Red is
   the only brand colour that reads on it. */
.size-help__actions .btn--primary{ background: var(--tt-red); border-color: var(--tt-red); color: var(--tt-white); }
.size-help__actions .btn--primary:hover{ background: var(--tt-red-dark); border-color: var(--tt-red-dark); }

/* ---------------------------------------------------------
   Contact ([toxicotribe_contact])
   --------------------------------------------------------- */
.contact-grid{
  display:grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: var(--sp-6);
}
.contact-card{
  display:flex; flex-direction:column; gap: var(--sp-2);
  padding: var(--sp-5);
  border:1px solid var(--c-border-strong);
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.contact-card:hover{ background: var(--c-bg-inverse); color: var(--c-text-inverse); transform: translateY(-2px); }
.contact-card__icon svg{ width:24px; height:24px; }
.contact-card__label{
  font-family: var(--font-display); font-weight:700; font-size: var(--fs-label);
  text-transform:uppercase; letter-spacing: var(--ls-cap); color: var(--tt-red);
}
.contact-card:hover .contact-card__label{ color: var(--tt-red); }
.contact-card__value{ font-size: var(--fs-body-lg); word-break:break-word; }
.contact-card__note{ font-size: var(--fs-body-sm); color: var(--c-text-muted); }
.contact-card:hover .contact-card__note{ color: var(--tt-gray-300); }
/* The whole card is a link, so the underline .page-content puts on links
   would run the full width of it. */
.page-content .contact-card{ text-decoration:none; }
.page-content .contact-card:hover{ color: var(--c-text-inverse); }

.contact-split{
  display:grid; gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-top: var(--sp-8); margin-bottom: var(--sp-9);
}
.contact-panel{ border-top:3px solid var(--tt-red); padding-top: var(--sp-5); }
.contact-address{
  font-style:normal; display:flex; flex-direction:column; gap:2px;
  margin-top: var(--sp-4); font-size: var(--fs-body-lg); line-height: var(--lh-normal);
}
.contact-panel__note{ color: var(--c-text-muted); margin-top: var(--sp-4); }
.contact-checklist{ list-style:none; padding:0; margin: var(--sp-4) 0 0; }
.contact-checklist li{
  position:relative; padding-left: var(--sp-5); margin-top: var(--sp-3);
  font-size: var(--fs-body-sm); line-height: var(--lh-relaxed);
}
.contact-checklist li::before{
  content:""; position:absolute; left:0; top:.65em;
  width:8px; height:8px; background: var(--tt-red);
}
.page-content .contact-checklist{ padding-left:0; }
.contact-panel__actions{ display:flex; flex-wrap:wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.page-content .contact-app h2{ margin-top:0; }
.page-content .contact-app .t-h3{ font-size: var(--fs-h3); }