/* ==========================================================================
   PAGE FURNITURE
   Headers, contents rails, editorial cards, enquiry pages.
   ========================================================================== */

/* ---- Page header ------------------------------------------------------- */

.ssc-page-head {
  padding-block: var(--ss-space-l) var(--ss-space-m);
  --ss-motif-opacity: 0.05;
}

.ssc-page-head--dark {
  background: var(--ssp-ink);
  color: var(--ssp-surface);
  --ss-motif-opacity: 0.18;
}

.ssc-page-head--dark a { color: inherit; }

.ssc-page-head__title {
  font-size: var(--ss-step-5);
  margin-block-start: var(--ss-space-2xs);
}

.ssc-page-head__standfirst {
  margin-block-start: var(--ss-space-s);
  max-width: 52ch;
  font-size: var(--ss-step-1);
  font-weight: 300;
  color: var(--ssp-ink-muted);
}

.ssc-page-head--dark .ssc-page-head__standfirst { color: inherit; opacity: .8; }

/* The right angle, drawn as the header's terminal rule. */
.ssc-page-head__rule {
  display: block;
  width: 4rem;
  height: 0;
  margin-block-start: var(--ss-space-m);
  border-block-start: 4px solid var(--ssp-accent);
}

/* ---- Contents rail ----------------------------------------------------- */

.ssc-rail { position: sticky; top: var(--ss-space-m); }

.ssc-rail__head {
  padding-block-end: var(--ss-space-2xs);
  border-block-end: 2px solid var(--ssp-ink);
  margin-block-end: var(--ss-space-2xs);
}

.ssc-rail__list { padding: 0; list-style: none; }

.ssc-rail__list li { border-block-end: 1px solid var(--ssp-line); }

.ssc-rail__list a {
  display: block;
  padding-block: var(--ss-space-2xs);
  color: var(--ssp-ink);
  text-decoration: none;
  font-size: var(--ss-step--1);
}

.ssc-rail__list a:hover { color: var(--ssp-accent); }

.ssc-rail__list li.is-current a {
  color: var(--ssp-accent);
  font-weight: 700;
}

/* ---- Editorial cards --------------------------------------------------- */

.ssc-card--post,
.ssc-card--link {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ssp-line);
  background: var(--ssp-surface);
}

.ssc-card--post:hover,
.ssc-card--link:hover { border-color: var(--ssp-ink); }

.ssc-card--post .ssc-card__media { aspect-ratio: 16 / 9; }

.ssc-card__cat {
  letter-spacing: var(--ss-tracking-label);
  text-transform: uppercase;
  color: var(--ssp-accent);
}

.ssc-card--post .ssc-card__eyebrow,
.ssc-card--link .ssc-card__eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ss-space-2xs);
  font-size: var(--ss-step--2);
  color: var(--ssp-ink-muted);
}

.ssc-card--post .ssc-card__title a,
.ssc-card--link .ssc-card__title a { color: var(--ssp-ink); text-decoration: none; }
.ssc-card--post .ssc-card__title a:hover,
.ssc-card--link .ssc-card__title a:hover { color: var(--ssp-accent); }

/* ---- Enquiry ----------------------------------------------------------- */

.ssc-enquiry__subject {
  display: flex;
  gap: var(--ss-space-s);
  align-items: center;
  padding: var(--ss-space-xs);
  border: 1px solid var(--ssp-line);
  background: var(--ssp-surface-alt);
  margin-block-end: var(--ss-space-m);
}

.ssc-enquiry__thumb { flex: 0 0 5rem; }
.ssc-enquiry__thumb img { width: 100%; height: auto; }

.ssc-enquiry__name { font-family: var(--ssp-font-display); font-size: var(--ss-step-1); line-height: 1.1; }

.ssc-enquiry__intro { margin-block-end: var(--ss-space-m); }

.ssc-enquiry__placeholder {
  padding: var(--ss-space-m);
  border: 1px dashed var(--ssp-line);
  text-align: center;
}

.ssc-enquiry__aside { position: sticky; top: var(--ss-space-m); }

.ssc-steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--ss-space-xs);
  margin-block-start: var(--ss-space-2xs);
}

.ssc-steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: var(--ss-space-2xs);
  font-size: var(--ss-step--1);
}

.ssc-steps li::before {
  content: counter(step);
  font-family: var(--ssp-font-display);
  font-size: var(--ss-step-1);
  line-height: 1;
  color: var(--ssp-accent);
  font-variant-numeric: tabular-nums;
}

/* ---- Prose refinements for policy pages -------------------------------- */

.ssc-page__body h2 {
  font-size: var(--ss-step-2);
  margin-block-start: var(--ss-space-xl);
}

.ssc-page__body h3 {
  font-size: var(--ss-step-1);
  margin-block-start: var(--ss-space-l);
}

.ssc-page__body table { width: 100%; margin-block: var(--ss-space-s); }

/* ==========================================================================
   BREADCRUMBS
   Used on nine templates and never given a rule until now. Woo's own
   breadcrumb output has no list wrapper, so both shapes are covered.
   ========================================================================== */

.ssc-crumbs {
  font-size: var(--ss-step--1);
  color: var(--ssp-ink-muted);
  margin-block-end: var(--ss-space-s);
}

.ssc-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ss-space-3xs) var(--ss-space-2xs);
  padding: 0;
  margin: 0;
  list-style: none;
}

.ssc-crumbs__item { display: inline-flex; align-items: baseline; gap: var(--ss-space-2xs); }

/* Separator drawn rather than marked up, so it is never read aloud. */
.ssc-crumbs__item + .ssc-crumbs__item::before {
  content: "/";
  color: var(--ssp-line);
}

.ssc-crumbs a { color: var(--ssp-ink-muted); text-decoration: none; }
.ssc-crumbs a:hover { color: var(--ssp-accent); }
.ssc-crumbs [aria-current="page"] { color: var(--ssp-ink); }

/* Woo's breadcrumb when it renders its own markup inside our wrapper. */
.ssc-crumbs .woocommerce-breadcrumb { display: flex; flex-wrap: wrap; gap: var(--ss-space-2xs); }

/* ---- Fallback entries (index.php) --------------------------------------- */

.ssc-entry__title { font-size: var(--ss-step-3); }
.ssc-entry__title a { color: var(--ssp-ink); text-decoration: none; }
.ssc-entry__title a:hover { color: var(--ssp-accent); }

.ssc-footer__col { min-width: 0; }

/* ---- Search results ----------------------------------------------------- */

.ssc-results-list { display: grid; gap: var(--ss-space-2xs); padding: 0; list-style: none; }

.ssc-results-list__item a {
  display: block;
  padding: var(--ss-space-xs);
  border: 1px solid var(--ssp-line);
  background: var(--ssp-surface);
  color: var(--ssp-ink);
  text-decoration: none;
}

.ssc-results-list__item a:hover { border-color: var(--ssp-accent); }
.ssc-results-list__item b { display: block; font-family: var(--ssp-font-display); font-size: var(--ss-step-1); }
.ssc-results-list__item span { display: block; font-size: var(--ss-step--1); color: var(--ssp-ink-muted); margin-block-start: 2px; }

.ssc-results-group .ssc-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ss-space-xs);
  padding-block-end: var(--ss-space-2xs);
  border-block-end: 2px solid var(--ssp-ink);
  margin-block-end: var(--ss-space-s);
}

.ssc-search-again { max-width: 28rem; margin-inline: auto; }

/* ---- Commerce pages -----------------------------------------------------
   Cart, checkout and account: full width, no reading measure, because
   these are tables and forms rather than prose. */

.ssc-page__body--commerce { max-width: none; }