/* Big Boy Suds blog styles.
   Loaded after /assets/pages.css and relies on its custom properties
   (--deep-blue, --mid-blue, --blue, --light-blue, --off-white, --gray,
   --light-gray) plus its .btn-*, .section-label, .faq-item, .cta-band,
   .related-card, and .sticky-cta components so the blog cannot drift from
   the rest of the site. */

/* ------------------------------------------------------- reading progress */
.reading-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1100;
  background: transparent; pointer-events: none;
}
.reading-progress span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--blue), var(--light-blue));
  transform-origin: 0 50%; will-change: width;
}

/* ------------------------------------------------------------ index cards */
.blog-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 26px; margin-top: 30px;
}
.blog-grid-featured { grid-template-columns: 1fr; }

.blog-card {
  display: flex; flex-direction: column; background: white;
  border: 1px solid rgba(30, 95, 172, 0.12); border-radius: 18px; overflow: hidden;
  box-shadow: 0 4px 20px rgba(10, 22, 40, 0.07);
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.blog-card:hover, .blog-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(10, 22, 40, 0.14);
  border-color: rgba(30, 95, 172, 0.3);
}
.blog-card-media { position: relative; display: block; background: var(--light-gray); }
.blog-card-media img { display: block; width: 100%; height: auto; aspect-ratio: 12 / 7; object-fit: cover; }
.blog-card-badge {
  position: absolute; left: 14px; bottom: 14px;
  background: rgba(10, 22, 40, 0.88); color: var(--light-blue);
  font-size: 0.66rem; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase;
  padding: 6px 12px; border-radius: 100px; border: 1px solid rgba(77, 166, 255, 0.35);
}
.blog-card-body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.blog-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  color: var(--gray); font-size: 0.8rem; font-weight: 600;
}
.blog-meta-dot { color: rgba(30, 95, 172, 0.45); }
.blog-card-title { margin: 10px 0 10px; font-size: 1.22rem; line-height: 1.35; }
.blog-card-title a { color: var(--deep-blue); text-decoration: none; }
.blog-card-title a:hover { color: var(--blue); }
.blog-card-excerpt { color: var(--gray); line-height: 1.7; font-size: 0.94rem; margin-bottom: 18px; }
.blog-read-more {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; margin-top: auto;
  background: linear-gradient(135deg, var(--blue), var(--light-blue)); color: white;
  padding: 11px 20px; border-radius: 8px; font-weight: 800; font-size: 0.86rem;
  text-decoration: none; box-shadow: 0 4px 16px rgba(30, 95, 172, 0.32); transition: transform 0.2s, box-shadow 0.2s;
}
.blog-read-more:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(77, 166, 255, 0.45); }
.blog-read-more svg { transition: transform 0.2s; }
.blog-read-more:hover svg { transform: translateX(3px); }

.blog-card-featured { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: stretch; }
.blog-card-featured .blog-card-media img { height: 100%; aspect-ratio: auto; min-height: 300px; }
.blog-card-featured .blog-card-body { padding: 34px 36px; justify-content: center; }
.blog-card-featured .blog-card-title { font-size: clamp(1.4rem, 2.4vw, 1.95rem); }
.blog-card-featured .blog-card-excerpt { font-size: 1rem; }

.blog-list-header { margin-top: 62px; }
.blog-empty-note {
  margin-top: 30px; background: var(--off-white); border-left: 4px solid var(--blue);
  padding: 24px; border-radius: 0 14px 14px 0;
}
.blog-empty-note h3 { color: var(--deep-blue); margin-bottom: 8px; }
.blog-empty-note p { color: var(--gray); line-height: 1.7; }
.blog-empty-note a { color: var(--blue); font-weight: 700; }

/* ----------------------------------------------------------- post header */
.post-header {
  background: linear-gradient(135deg, var(--deep-blue) 0%, var(--mid-blue) 62%, #0d2444 100%);
  padding: 128px 24px 58px; position: relative; overflow: hidden;
}
.post-header::before {
  content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%;
  border: 1px solid rgba(77, 166, 255, 0.2); right: -140px; top: 30px;
  box-shadow: 0 0 0 70px rgba(77, 166, 255, 0.04), 0 0 0 140px rgba(77, 166, 255, 0.025);
}
.post-header-inner { max-width: 900px; margin: 0 auto; position: relative; z-index: 1; }
.post-header .breadcrumbs span { color: #a8c4e8; }
.post-header h1 {
  color: white; font-size: clamp(1.85rem, 4.4vw, 3rem); line-height: 1.14;
  font-weight: 900; margin: 10px 0 20px;
}
.post-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  color: #a8c4e8; font-size: 0.86rem; font-weight: 600;
}
.post-author { display: inline-flex; align-items: center; gap: 9px; color: white; }
.post-author img {
  border-radius: 50%; background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(77, 166, 255, 0.4); padding: 2px;
}

.post-hero-figure { max-width: 1060px; margin: -34px auto 0; padding: 0 24px; }
.post-hero-figure img {
  display: block; width: 100%; height: auto; aspect-ratio: 12 / 7; object-fit: cover;
  border-radius: 18px; background: var(--light-gray);
  box-shadow: 0 18px 50px rgba(10, 22, 40, 0.24); border: 1px solid rgba(255, 255, 255, 0.5);
}
.post-hero-figure figcaption {
  color: var(--gray); font-size: 0.82rem; line-height: 1.6; text-align: center;
  margin-top: 12px; max-width: 760px; margin-inline: auto;
}

/* ----------------------------------------------------------- post layout */
.post-layout {
  max-width: 1200px; margin: 0 auto; padding: 48px 24px 70px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(272px, 320px); gap: 52px; align-items: start;
}
.post-main { min-width: 0; }
/* The aside holds the quote card only. It follows the article in the DOM, so on
   narrow screens the single-column layout puts the full article first. */
.post-aside { display: grid; gap: 22px; position: sticky; top: 100px; }
.post-lead {
  color: var(--deep-blue); font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.8;
  font-weight: 500; padding-bottom: 4px;
}

.takeaways {
  margin-top: 30px; background: var(--off-white); border: 1px solid rgba(30, 95, 172, 0.16);
  border-left: 5px solid var(--blue); border-radius: 0 16px 16px 0; padding: 26px 28px;
}
.takeaways h2 {
  color: var(--deep-blue); font-size: 0.78rem; font-weight: 800;
  letter-spacing: 2.6px; text-transform: uppercase; margin-bottom: 14px;
}
.takeaways ul { list-style: none; display: grid; gap: 12px; }
.takeaways li { position: relative; padding-left: 28px; color: var(--gray); line-height: 1.7; font-size: 0.95rem; }
.takeaways li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--blue); font-weight: 900; }

/* ------------------------------------------------------------ post prose */
.article-section { margin-top: 46px; scroll-margin-top: 100px; }
.article-body h2 {
  color: var(--deep-blue); font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.25;
  font-weight: 900; margin-bottom: 16px; padding-bottom: 12px; scroll-margin-top: 100px;
  border-bottom: 2px solid var(--light-gray);
}
.article-body h3 {
  color: var(--mid-blue); font-size: clamp(1.08rem, 1.7vw, 1.22rem);
  font-weight: 800; margin: 30px 0 10px; scroll-margin-top: 100px;
}
.article-body p { color: var(--gray); line-height: 1.85; font-size: 1.02rem; }
.article-body p + p { margin-top: 16px; }
.article-body a { color: var(--blue); font-weight: 700; }

.article-list, .article-steps { margin: 18px 0 0; display: grid; gap: 12px; }
.article-list { list-style: none; }
.article-list li { position: relative; padding-left: 30px; color: var(--gray); line-height: 1.75; font-size: 1rem; }
.article-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--blue); font-weight: 900; }
.article-steps { list-style: none; counter-reset: step; }
.article-steps li {
  position: relative; padding-left: 44px; color: var(--gray); line-height: 1.75;
  font-size: 1rem; min-height: 32px; padding-top: 4px;
}
.article-steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0; width: 32px; height: 32px;
  display: grid; place-items: center; background: var(--blue); color: white;
  border-radius: 50%; font-weight: 900; font-size: 0.86rem;
}

.article-note {
  margin: 24px 0 0; background: var(--light-gray); border-left: 4px solid var(--light-blue);
  border-radius: 0 12px 12px 0; padding: 18px 22px; color: var(--deep-blue);
  line-height: 1.75; font-size: 0.97rem; font-weight: 500;
}

.article-table-wrap { margin-top: 26px; overflow-x: auto; border-radius: 14px; border: 1px solid rgba(30, 95, 172, 0.14); }
.article-table { width: 100%; border-collapse: collapse; min-width: 560px; background: white; }
.article-table caption {
  caption-side: top; text-align: left; padding: 14px 18px; color: var(--deep-blue);
  font-weight: 800; font-size: 0.8rem; letter-spacing: 1.4px; text-transform: uppercase;
  background: var(--off-white);
}
.article-table th, .article-table td {
  padding: 14px 18px; text-align: left; font-size: 0.92rem; line-height: 1.6;
  border-top: 1px solid rgba(30, 95, 172, 0.12);
}
.article-table thead th { background: var(--deep-blue); color: white; font-weight: 800; font-size: 0.84rem; border-top: none; }
.article-table tbody th { color: var(--deep-blue); font-weight: 800; }
.article-table td { color: var(--gray); }
.article-table tbody tr:nth-child(even) { background: rgba(240, 246, 255, 0.6); }

.article-cta {
  margin: 32px 0 0; background: linear-gradient(135deg, var(--deep-blue), var(--mid-blue));
  border-radius: 18px; padding: 30px 32px; box-shadow: 0 14px 40px rgba(10, 22, 40, 0.2);
}
.article-cta h3 { color: white; font-size: 1.25rem; margin: 0 0 10px; font-weight: 900; }
.article-cta p { color: #a8c4e8; line-height: 1.7; margin-bottom: 20px; }
.article-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------------------------------------------------------------- sharing */
.share-bar {
  margin-top: 50px; padding-top: 26px; border-top: 2px solid var(--light-gray);
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px;
}
.share-label {
  color: var(--deep-blue); font-size: 0.74rem; font-weight: 800;
  letter-spacing: 2.4px; text-transform: uppercase;
}
.share-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.share-btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: var(--light-gray); color: var(--blue); border: 1px solid rgba(30, 95, 172, 0.18);
  padding: 10px 15px; border-radius: 100px; font-size: 0.82rem; font-weight: 800;
  font-family: inherit; text-decoration: none; transition: background 0.2s, color 0.2s, transform 0.2s;
}
.share-btn:hover { background: var(--blue); color: white; transform: translateY(-2px); }
.share-btn.copied { background: #14804a; color: white; border-color: #14804a; }

/* --------------------------------------------------- table of contents */
/* The TOC sits in normal document flow at the top of the article on every
   device. It is never sticky or fixed, so it cannot overlap the article, and
   it has no inner scroll container — a nested scroller here is what traps
   touch scrolling on iOS Safari. It scrolls away with the rest of the page. */
.post-toc {
  margin-top: 30px; position: static;
  background: white; border: 1px solid rgba(30, 95, 172, 0.14); border-radius: 16px;
  padding: 6px 22px 8px; box-shadow: 0 4px 20px rgba(10, 22, 40, 0.07);
}
/* The list is wrapped in a <nav> for screen readers. Keep it an ordinary
   in-flow block: site-wide navigation styling must never pin it to the
   viewport, or it covers the article and cannot be scrolled past. */
.post-toc nav {
  position: static; inset: auto; z-index: auto; float: none;
  display: block; max-height: none; overflow: visible;
  background: none; backdrop-filter: none; border: 0; box-shadow: none;
  padding: 0; margin: 0; transform: none;
}
.post-toc > summary {
  cursor: pointer; list-style: none; color: var(--deep-blue); font-size: 0.74rem;
  font-weight: 800; letter-spacing: 2.4px; text-transform: uppercase;
  padding: 16px 26px 16px 0; position: relative;
}
.post-toc > summary::-webkit-details-marker { display: none; }
.post-toc > summary::after {
  content: "–"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  color: var(--blue); font-size: 1.3rem; font-weight: 700;
}
.post-toc:not([open]) > summary::after { content: "+"; }
.toc-list { list-style: none; counter-reset: toc; padding: 0 0 14px; }
.toc-list > li { counter-increment: toc; margin-top: 4px; }
.toc-list > li > a {
  display: block; color: var(--mid-blue); text-decoration: none; font-size: 0.88rem;
  font-weight: 700; line-height: 1.5; padding: 7px 0 7px 26px; position: relative;
  border-left: 2px solid transparent; transition: color 0.2s, border-color 0.2s;
}
.toc-list > li > a::before {
  content: counter(toc); position: absolute; left: 8px; top: 7px;
  color: rgba(30, 95, 172, 0.5); font-size: 0.74rem; font-weight: 800;
}
.toc-list > li > a:hover, .toc-list a.active { color: var(--blue); border-left-color: var(--blue); }
.toc-list ul { list-style: none; padding: 2px 0 6px 26px; display: grid; gap: 2px; }
.toc-list ul a {
  display: block; color: var(--gray); text-decoration: none; font-size: 0.81rem;
  line-height: 1.5; padding: 4px 0 4px 12px; border-left: 2px solid var(--light-gray);
  transition: color 0.2s, border-color 0.2s;
}
.toc-list ul a:hover, .toc-list ul a.active { color: var(--blue); border-left-color: var(--light-blue); }
/* Full-width in the main column, so split the entries into two tracks above
   phone width to keep the block from pushing the article too far down. */
@media (min-width: 760px) {
  .toc-list {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 26px; align-items: start;
  }
}

.post-cta { position: static; }
.post-cta h2 { font-size: 1.24rem; }
.post-cta p { font-size: 0.92rem; }

/* -------------------------------------------------------------- related */
.related-kicker {
  display: inline-block; color: var(--blue); background: var(--light-gray);
  font-size: 0.62rem; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 100px; margin-bottom: 12px;
}

/* ---------------------------------------------------------- breakpoints */
@media (max-width: 1050px) {
  .post-layout { grid-template-columns: 1fr; gap: 34px; }
  .post-aside { position: static; }
}
@media (max-width: 900px) {
  .blog-card-featured { grid-template-columns: 1fr; }
  .blog-card-featured .blog-card-media img { min-height: 0; aspect-ratio: 12 / 7; }
  .blog-card-featured .blog-card-body { padding: 26px 24px 28px; }
}
@media (max-width: 768px) {
  .blog-grid { grid-template-columns: 1fr; gap: 22px; }
  .post-header { padding: 118px 18px 52px; }
  .post-hero-figure { padding: 0 18px; margin-top: -26px; }
  .post-hero-figure img { border-radius: 14px; }
  .post-layout { padding: 34px 18px 56px; gap: 28px; }
  .article-section { margin-top: 38px; }
  .article-body p { font-size: 1rem; }
  .article-cta { padding: 24px 22px; }
  .article-cta-actions .btn-primary, .article-cta-actions .btn-quote { width: 100%; justify-content: center; }
  .share-bar { flex-direction: column; align-items: flex-start; }
  .share-btn span { font-size: 0.78rem; }
  .takeaways { padding: 22px 20px; }
  .blog-list-header { margin-top: 46px; }
}
@media (max-width: 420px) {
  .share-buttons { width: 100%; }
  .share-btn { flex: 1 1 calc(50% - 10px); justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .blog-card, .blog-read-more, .blog-read-more svg, .share-btn { transition: none; }
  .blog-card:hover, .blog-read-more:hover, .share-btn:hover { transform: none; }
}
.blog-card-title a:focus-visible, .blog-read-more:focus-visible, .share-btn:focus-visible,
.toc-list a:focus-visible, .post-toc > summary:focus-visible {
  outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px;
}