/* ==========================================================================
   Shire Fire Guides — only the shapes the child theme doesn't already have.

   Every colour, size and space comes from the child theme's tokens
   (style.css section 1), with a literal fallback so nothing breaks if the
   theme is ever changed. Reused as-is from the theme: .sfd-lead,
   .sfd-eyebrow, .sfd-faq__item, .sfd-note, .sfd-final, .sfd-dark, .sfd-prose.

   Contrast: every text colour here is a theme token already checked at AA
   on the ground it sits on (docs/brand-tokens.md).
   ========================================================================== */

/* The inner column every band uses: 1140px, with the site's side gutter. */
.sfd-band__inner {
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: var(--sfd-space-md, 2rem);
}

@media (max-width: 600px) {
  .sfd-band__inner { padding-inline: var(--sfd-space-sm, 1rem); }
}

/* Headings jumped to from "On this page" must clear the sticky header. */
.sfd-guide h2[id] { scroll-margin-top: 7rem; }


/* --- Head band -------------------------------------------------------- */

.sfd-guide-head {
  background: var(--sfd-paper-alt, #F7F5F3);
  padding-block: var(--sfd-space-lg, 4rem);
}

.sfd-guide-head__title {
  max-width: 24ch;
  margin: var(--sfd-space-xs, 0.5rem) 0 0;
}

.sfd-guide-head .sfd-lead { max-width: 60ch; }
.sfd-guide-head .sfd-lead p { margin: 0 0 var(--sfd-space-xs, 0.5rem); }
.sfd-guide-head .sfd-lead p:last-child { margin-bottom: 0; }

.sfd-guide-head__meta,
.sfd-hub__meta {
  margin: var(--sfd-space-sm, 1rem) 0 0;
  font-family: var(--sfd-font-ui, sans-serif);
  font-size: var(--sfd-size-small, 0.9375rem);
  font-variant-numeric: tabular-nums;
  color: var(--sfd-muted, #5C554F);
}

/* A one-step breadcrumb. The trailing slash is decoration. */
.sfd-crumbs {
  font-family: var(--sfd-font-ui, sans-serif);
  font-size: var(--sfd-size-small, 0.9375rem);
  font-weight: 700;
  margin-bottom: var(--sfd-space-sm, 1rem);
}
.sfd-crumbs a { color: var(--sfd-accent, #CE2A27); text-underline-offset: 0.15em; }
.sfd-crumbs a::after { content: " /"; color: var(--sfd-muted, #5C554F); }

/* Standards as labels — not links, because they have no pages of their own. */
.sfd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0 0 var(--sfd-space-xs, 0.5rem);
  padding: 0;
}

.sfd-chips li {
  font-family: var(--sfd-font-ui, sans-serif);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.5;
  padding: 0.1rem 0.55rem;
  border: 1px solid var(--sfd-line, #DFD9D4);
  border-radius: 2px;
  background: var(--sfd-paper, #FFFFFF);
  color: var(--sfd-ink, #231F20);
  font-variant-numeric: tabular-nums;
}


/* --- Body: "On this page" beside the guide ------------------------------ */

/* An explicit white ground, rather than whatever the Customizer's content
   background happens to be. */
.sfd-guide-body,
.sfd-hub { background: var(--sfd-paper, #FFFFFF); }

.sfd-guide-body { padding-block: var(--sfd-space-lg, 4rem) var(--sfd-space-xl, 6rem); }

.sfd-guide-body.has-toc .sfd-guide-body__grid {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: var(--sfd-space-lg, 4rem);
  align-items: start;
}

.sfd-guide-body__main { min-width: 0; }

.sfd-toc {
  position: sticky;
  top: 7rem;
  font-family: var(--sfd-font-ui, sans-serif);
  font-size: var(--sfd-size-small, 0.9375rem);
  line-height: 1.4;
}

.sfd-toc .sfd-eyebrow { margin: 0 0 var(--sfd-space-xs, 0.5rem); }

.sfd-toc ol { list-style: none; margin: 0; padding: 0; }

.sfd-toc a {
  display: block;
  padding: 0.4rem 0 0.4rem 0.85rem;
  border-left: 2px solid var(--sfd-line, #DFD9D4);
  color: var(--sfd-body, #3D3833);
  text-decoration: none;
}

.sfd-toc a:hover,
.sfd-toc a:focus-visible {
  border-left-color: var(--sfd-red, #CE2A27);
  color: var(--sfd-ink, #231F20);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Below desktop the contents sit above the guide, as a boxed list. */
@media (max-width: 1024px) {
  .sfd-guide-body.has-toc .sfd-guide-body__grid { display: block; }
  .sfd-toc {
    position: static;
    margin-bottom: var(--sfd-space-md, 2rem);
    padding: var(--sfd-space-sm, 1rem) var(--sfd-space-sm, 1rem) var(--sfd-space-xs, 0.5rem);
    border: 1px solid var(--sfd-line, #DFD9D4);
    background: var(--sfd-paper-alt, #F7F5F3);
  }
}


/* --- The guide's own text ---------------------------------------------- */

.sfd-guide .sfd-prose > :first-child { margin-top: 0; }

.sfd-guide .sfd-prose > h2,
.sfd-guide .sfd-prose > h3 { max-width: 30ch; }

.sfd-guide .sfd-prose > blockquote,
.sfd-guide .sfd-prose > figure,
.sfd-guide .sfd-prose > .wp-block-table { max-width: 68ch; }

/* Tables recur in guides — inspection frequencies, defects, FRLs. */
.sfd-guide .sfd-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--sfd-size-small, 0.9375rem);
  line-height: 1.5;
}

.sfd-guide .sfd-prose th,
.sfd-guide .sfd-prose td {
  text-align: left;
  vertical-align: top;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--sfd-line, #DFD9D4);
}

.sfd-guide .sfd-prose th {
  font-family: var(--sfd-font-ui, sans-serif);
  font-weight: 700;
  color: var(--sfd-ink, #231F20);
  border-bottom-width: 2px;
}

/* A wide table scrolls inside itself on a phone rather than widening the page. */
.sfd-guide .sfd-prose .wp-block-table { overflow-x: auto; }

.sfd-guide .sfd-prose figcaption {
  font-family: var(--sfd-font-ui, sans-serif);
  font-size: var(--sfd-size-small, 0.9375rem);
  color: var(--sfd-muted, #5C554F);
}


/* --- Common questions, and where we come in ---------------------------- */

.sfd-guide-faq { max-width: 68ch; }
.sfd-guide-faq h2 { margin: var(--sfd-space-lg, 4rem) 0 var(--sfd-space-sm, 1rem); }
.sfd-guide-faq .sfd-faq__item a { color: var(--sfd-accent, #CE2A27); }

.sfd-guide-services {
  max-width: 68ch;
  margin-top: var(--sfd-space-lg, 4rem);
  padding: var(--sfd-space-md, 2rem);
  border: 1px solid var(--sfd-line, #DFD9D4);
  border-top: 3px solid var(--sfd-red, #CE2A27);
  background: var(--sfd-paper, #FFFFFF);
}

.sfd-guide-services .sfd-eyebrow { margin: 0 0 var(--sfd-space-xs, 0.5rem); }

.sfd-guide-services ul { list-style: none; margin: 0; padding: 0; }

.sfd-guide-services li { padding-block: 0.3rem; }

.sfd-guide-services a {
  font-family: var(--sfd-font-ui, sans-serif);
  font-weight: 700;
  color: var(--sfd-accent, #CE2A27);
  text-underline-offset: 0.15em;
}

.sfd-guide .sfd-note { max-width: 68ch; }


/* --- The hub ----------------------------------------------------------
   The wrapper is .sfd-guides-index, not .sfd-guides: the theme already uses
   .sfd-guides for the home page band, with padding of its own. */

.sfd-hub { padding-block: var(--sfd-space-lg, 4rem) var(--sfd-space-xl, 6rem); }

.sfd-hub__list { list-style: none; margin: 0; padding: 0; max-width: 72ch; }

.sfd-hub__item {
  padding-block: var(--sfd-space-md, 2rem);
  border-bottom: 1px solid var(--sfd-line, #DFD9D4);
}

.sfd-hub__item:first-child { padding-top: 0; }

.sfd-hub__title {
  font-size: var(--sfd-size-h3, 1.5rem);
  margin: var(--sfd-space-xs, 0.5rem) 0 0;
}

.sfd-hub__title a { color: var(--sfd-ink, #231F20); text-decoration: none; }

.sfd-hub__title a:hover,
.sfd-hub__title a:focus-visible {
  color: var(--sfd-accent, #CE2A27);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.sfd-hub__summary { margin: var(--sfd-space-xs, 0.5rem) 0 0; color: var(--sfd-body, #3D3833); }

.sfd-hub__meta { margin-top: var(--sfd-space-xs, 0.5rem); }

.sfd-guides-index .sfd-hub a:not(.wp-block-button__link) { color: var(--sfd-accent, #CE2A27); }
.sfd-guides-index .sfd-hub .sfd-hub__title a { color: var(--sfd-ink, #231F20); }


/* --- Closing band -------------------------------------------------------
   .sfd-final and .sfd-dark come from the theme. Outside .entry-content the
   theme's band gutter rule doesn't reach, so restate it here. */

/* Padding goes on the inner column, as in .sfd-band__inner, so the band's
   text lines up with the head and body above it. */
.sfd-guide-final { padding-inline: 0; }
.sfd-guide-final > .wp-block-group__inner-container { padding-inline: var(--sfd-space-md, 2rem); }
.sfd-guide-final .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: var(--sfd-space-md, 2rem); }

@media (max-width: 600px) {
  .sfd-guide-final > .wp-block-group__inner-container { padding-inline: var(--sfd-space-sm, 1rem); }
}

/* Fire door assembly animation ([sfd_door_assembly], 1.0.2). The frame's height is set by script; 620px is the no-script fallback. */
.sfd-door-assembly{margin:2em 0}
.sfd-door-assembly iframe{display:block;width:100%;height:620px;border:0}