/*
 * Premium responsive layout v8.0
 * A single content grid for legacy sections and the shared v3-v7 components.
 * Does not replace content, FAQ, article SEO, related keywords or footer.
 */
:root {
  --site-layout-max: 1200px;
  --site-layout-gutter: clamp(16px, 3vw, 32px);
}

/* One common left/right baseline throughout every public page. */
.container,
.article-section > .container,
.premium-article .pa-wrap,
.premium-faq .pq-container,
.pr-section .pr-wrap,
.premium-footer .pf-container {
  box-sizing: border-box;
  width: min(var(--site-layout-max), calc(100% - (var(--site-layout-gutter) * 2))) !important;
  max-width: var(--site-layout-max) !important;
  min-width: 0;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Make the original logo-and-name lock-up a tidy, tappable home link. */
.topbar .nav {
  min-width: 0;
  max-width: 100%;
}
.topbar .brand {
  min-width: 0;
  max-width: 100%;
  flex-shrink: 1;
  overflow-wrap: anywhere;
  line-height: 1.36;
  border-radius: 14px;
  transition: color .18s ease;
}
.topbar .brand img {
  width: clamp(80px, 9vw, 118px);
  height: auto;
  flex: 0 0 auto;
  object-fit: contain;
}
.topbar .brand span { min-width: 0; overflow-wrap: anywhere; }
.topbar .brand:hover { color: #98632e; }
.topbar .brand:focus-visible {
  outline: 3px solid #c08b48;
  outline-offset: 4px;
}

/* Guard against wide children in grids/flex rows when text is customized. */
:is(.hero-grid,.card-grid,.trust,.split,.dense-grid,.mini-cards,.links-intro,.link-grid,.contact-row) > * {
  min-width: 0;
}
:is(.container,.premium-article,.premium-faq,.pr-section,.premium-footer)
  :is(h1,h2,h3,p,li,address) {
  overflow-wrap: break-word;
}
:is(.container,.premium-article,.premium-faq,.pr-section,.premium-footer) img {
  max-width: 100%;
}
/* Keep card buttons within their available column, without clipping text. */
.container .btn,
.premium-footer .pf-button,
.premium-faq .pq-action,
.pr-section .pr-outro-cta {
  max-width: 100%;
}

/* Anchor sections must not be hidden behind the sticky header. */
main [id], section[id] { scroll-margin-top: 104px; }

@media (max-width: 980px) {
  :root { --site-layout-gutter: clamp(16px, 3vw, 26px); }
  .topbar .navlinks { min-width: 0; }
  .premium-article .pa-wrap,
  .premium-faq .pq-container,
  .pr-section .pr-wrap,
  .premium-footer .pf-container { min-width: 0; }
}

@media (max-width: 640px) {
  :root { --site-layout-gutter: 16px; }
  .topbar .nav {
    gap: 10px;
    min-height: 66px;
    padding: 9px 0;
  }
  .topbar .brand { gap: 10px; font-size: clamp(13px, 3.65vw, 16px); }
  .topbar .brand img { width: 76px; }
  .hero-main-card,
  .hero-copy-below,
  .wide-img,
  .panel,
  .article { min-width: 0; max-width: 100%; }
  .hero-copy-below h1 { overflow-wrap: anywhere; }
  .container .contact-row > .btn { min-width: 0; }
  main [id], section[id] { scroll-margin-top: 82px; }
}

@media (max-width: 360px) {
  .topbar .brand img { width: 66px; }
  .topbar .brand { gap: 8px; font-size: 13px; }
  .premium-footer .pf-button,
  .pr-section .pr-outro-cta { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .topbar .brand { transition: none; }
}