/* =========================================================
   BLOG REDESIGN KIT — base.css
   Structural rules shared by every theme. Colors come from
   CSS variables set inline (see enqueue in main plugin file)
   based on the admin's chosen accent color, so this works on
   any site regardless of brand palette.
   ========================================================= */

.brk-wrap * { box-sizing: border-box; }

.brk-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 50px 24px 90px;
  font-family: -apple-system, "Segoe UI", Inter, Arial, sans-serif;
  color: var(--brk-ink);
}

.brk-wrap a { text-decoration: none; }
.brk-wrap img { max-width: 100%; display: block; }

.brk-page-title {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  color: var(--brk-ink);
  margin: 0 0 12px;
  text-align: center;
}

.brk-page-sub {
  text-align: center;
  color: var(--brk-muted);
  font-size: 16px;
  max-width: 620px;
  margin: 0 auto 44px;
}

/* ---------- Layout: content + optional sidebar ---------- */
.brk-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

.brk-layout.has-sidebar {
  grid-template-columns: 2.2fr 1fr;
  align-items: start;
}

@media (max-width: 900px) {
  .brk-layout.has-sidebar {
    grid-template-columns: 1fr;
  }
}

/* ---------- Post grid & cards (shared skeleton) ---------- */
.brk-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.brk-layout.has-sidebar .brk-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.brk-card {
  background: var(--brk-card-bg);
  border: 1px solid var(--brk-border);
  border-radius: var(--brk-radius);
  overflow: hidden;
}

.brk-card-link { display: block; color: inherit; }

.brk-card-img {
  height: 170px;
  background-size: cover;
  background-position: center;
  background-color: var(--brk-bg-soft);
}

.brk-card-body { padding: 20px; }

.brk-card-meta {
  display: block;
  margin-bottom: 8px;
  color: var(--brk-primary);
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.brk-card-title {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--brk-ink);
}

.brk-card-excerpt {
  margin: 0 0 14px;
  color: var(--brk-muted);
  font-size: 14px;
  line-height: 1.55;
}

.brk-card-more {
  color: var(--brk-primary);
  font-size: 13.5px;
  font-weight: 800;
}

/* ---------- Pagination ---------- */
.brk-pagination {
  grid-column: 1 / -1;
  margin-top: 40px;
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.brk-pagination a,
.brk-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--brk-border);
  border-radius: 999px;
  color: var(--brk-ink);
  font-weight: 700;
  font-size: 14px;
}

.brk-pagination .current {
  background: var(--brk-primary);
  border-color: var(--brk-primary);
  color: #ffffff;
}

/* ---------- Sidebar ---------- */
.brk-sidebar {
  position: sticky;
  top: 90px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (max-width: 900px) {
  .brk-sidebar {
    position: static;
  }
}

.brk-sidebar-box {
  padding: 22px;
  border: 1px solid var(--brk-border);
  border-radius: var(--brk-radius);
  background: var(--brk-card-bg);
}

.brk-sidebar-box h4 {
  margin: 0 0 16px;
  font-size: 15px;
  color: var(--brk-ink);
}

.brk-search { display: flex; gap: 8px; }

.brk-search input {
  flex: 1;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--brk-border);
  border-radius: var(--brk-radius);
  background: var(--brk-bg-soft);
  font-size: 14px;
  color: var(--brk-ink);
}

.brk-search button {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: var(--brk-radius);
  background: var(--brk-primary);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.brk-search svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }

.brk-list { list-style: none; margin: 0; padding: 0; }
.brk-list li { border-bottom: 1px solid var(--brk-border); }
.brk-list li:last-child { border-bottom: none; }
.brk-list a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 2px; color: var(--brk-ink); font-size: 14px; font-weight: 600;
}
.brk-list-count { color: var(--brk-muted); font-size: 12.5px; font-weight: 700; }

.brk-recent { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.brk-recent a { display: flex; gap: 12px; }
.brk-recent-thumb {
  width: 54px; height: 54px; flex-shrink: 0; border-radius: 8px;
  background-size: cover; background-position: center; background-color: var(--brk-bg-soft);
}
.brk-recent strong { display: block; color: var(--brk-ink); font-size: 13.5px; line-height: 1.35; }
.brk-recent em { display: block; margin-top: 4px; color: var(--brk-muted); font-size: 12px; font-style: normal; }

.brk-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.brk-tags a {
  padding: 6px 12px; border-radius: 999px; background: var(--brk-bg-soft);
  color: var(--brk-primary); font-size: 12.5px; font-weight: 800;
}

/* Per-post promo links — visually a step up from "Recent Posts"
   since this is manually curated, higher-intent content */
.brk-promo-box {
  border-color: var(--brk-primary);
  border-width: 1.5px;
}

.brk-promo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.brk-promo-item a {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.brk-promo-img {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-color: var(--brk-bg-soft);
}

.brk-promo-item strong {
  display: block;
  color: var(--brk-ink);
  font-size: 14px;
  line-height: 1.35;
}

.brk-promo-item em {
  display: block;
  margin-top: 4px;
  color: var(--brk-muted);
  font-size: 12.5px;
  font-style: normal;
  line-height: 1.4;
}

.brk-cta {
  padding: 24px; border-radius: var(--brk-radius);
  background: var(--brk-ink); color: #fff;
}
.brk-cta h4 { margin: 0 0 8px; color: #fff; }
.brk-cta p { margin: 0 0 18px; color: rgba(255,255,255,0.78); font-size: 13.5px; line-height: 1.5; }
.brk-cta-btn {
  display: block; text-align: center; width: 100%; padding: 13px;
  border-radius: var(--brk-radius); background: var(--brk-primary);
  color: #fff; font-weight: 800; font-size: 14px;
}

/* ---------- Single post ---------- */
.brk-single { max-width: 100%; }
.brk-layout.has-sidebar .brk-single { max-width: none; }

.brk-breadcrumb {
  margin-bottom: 18px;
  color: var(--brk-muted);
  font-size: 13.5px;
}
.brk-breadcrumb a { color: var(--brk-muted); }
.brk-breadcrumb a:hover { color: var(--brk-primary); }

.brk-single-meta {
  display: block;
  margin-bottom: 14px;
  color: var(--brk-primary);
  font-size: 12.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.brk-single-title {
  margin: 0 0 26px;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  line-height: 1.15;
  color: var(--brk-ink);
}

.brk-featured-img {
  height: 380px;
  border-radius: var(--brk-radius);
  background-size: cover;
  background-position: center;
  background-color: var(--brk-bg-soft);
  margin-bottom: 32px;
}

.brk-content {
  font-size: 17px;
  line-height: 1.75;
  color: var(--brk-ink);
  max-width: 760px;
  word-wrap: break-word;
}

.brk-content p { margin: 0 0 22px; }
.brk-content h2 { font-size: 26px; font-weight: 800; margin: 42px 0 16px; line-height: 1.3; color: var(--brk-ink); }
.brk-content h3 { font-size: 21px; font-weight: 800; margin: 32px 0 14px; line-height: 1.35; color: var(--brk-ink); }
.brk-content h4 { font-size: 18px; font-weight: 700; margin: 26px 0 12px; color: var(--brk-ink); }
.brk-content a { color: var(--brk-primary); text-decoration: underline; text-underline-offset: 2px; }
.brk-content strong { color: var(--brk-ink); }
.brk-content ul, .brk-content ol { margin: 0 0 22px; padding-left: 22px; }
.brk-content li { margin-bottom: 8px; line-height: 1.65; }
.brk-content li > ul, .brk-content li > ol { margin-top: 8px; margin-bottom: 0; }

.brk-content blockquote {
  margin: 28px 0; padding: 16px 22px; border-left: 4px solid var(--brk-primary);
  background: var(--brk-bg-soft); border-radius: 0 var(--brk-radius) var(--brk-radius) 0;
  font-style: italic; color: var(--brk-ink);
}
.brk-content blockquote p:last-child { margin-bottom: 0; }

.brk-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--brk-radius);
  margin: 28px auto;
  display: block;
}
.brk-content figure { margin: 28px 0; }
.brk-content figure img { margin: 0 auto; }
.brk-content figcaption {
  margin-top: 10px;
  text-align: center;
  color: var(--brk-muted);
  font-size: 13.5px;
}

/* Tables: horizontal scroll on small screens instead of breaking layout */
.brk-content table { width: 100%; margin: 28px 0; border-collapse: collapse; font-size: 15px; }
.brk-content th, .brk-content td { padding: 10px 14px; border: 1px solid var(--brk-border); text-align: left; }
.brk-content th { background: var(--brk-bg-soft); font-weight: 800; }

/* FAQ support — native <details><summary> accordion, the simplest
   reliable way to add FAQs in the block/classic editor without a
   special plugin block. Wrap each Q&A like:
   <details><summary>Question?</summary><p>Answer.</p></details> */
.brk-content details {
  margin: 0 0 14px;
  padding: 16px 20px;
  border: 1px solid var(--brk-border);
  border-radius: var(--brk-radius);
  background: var(--brk-bg-soft);
}
.brk-content summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--brk-ink);
  font-size: 16px;
}
.brk-content details[open] summary { margin-bottom: 12px; }
.brk-content details p:last-child { margin-bottom: 0; }

.brk-content hr {
  margin: 40px 0;
  border: none;
  border-top: 1px solid var(--brk-border);
}

@media (max-width: 640px) {
  .brk-content { font-size: 16px; }
  .brk-content h2 { font-size: 22px; margin-top: 34px; }
  .brk-content h3 { font-size: 19px; margin-top: 26px; }
  .brk-content table { display: block; overflow-x: auto; white-space: nowrap; }
}

.brk-tag-footer {
  margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--brk-border);
  display: flex; flex-wrap: wrap; gap: 8px;
}
.brk-tag-footer a {
  padding: 6px 14px; border-radius: 999px; background: var(--brk-bg-soft);
  color: var(--brk-primary); font-size: 13px; font-weight: 800;
}

.brk-related { margin-top: 60px; padding-top: 40px; border-top: 1px solid var(--brk-border); }
.brk-related h3 { font-size: 22px; margin: 0 0 22px; color: var(--brk-ink); }

/* Related Articles always renders as a plain, compact card grid —
   deliberately NOT using .brk-grid/.brk-card, so no theme's
   list-style or other layout override can ever apply here. */
.brk-related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.brk-related-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--brk-border);
  border-radius: var(--brk-radius);
  overflow: hidden;
  background: var(--brk-card-bg);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.brk-related-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
  border-color: var(--brk-primary);
}

.brk-related-card-link {
  display: flex;
  flex-direction: column;
  flex: 1;
  color: inherit;
}

.brk-related-card .brk-card-img {
  background-color: var(--brk-bg-soft);
  background-image: linear-gradient(135deg, var(--brk-primary), var(--brk-ink));
  opacity: 0.9;
  overflow: hidden;
  transition: transform 0.4s ease;
}
.brk-related-card:hover .brk-card-img {
  transform: scale(1.05);
}
/* When a real featured image exists it's set inline and simply
   overrides the gradient fallback above via the same property. */

.brk-related-card .brk-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.brk-related-card .brk-card-more {
  margin-top: auto;
  padding-top: 6px;
}

@media (max-width: 900px) {
  .brk-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .brk-related-grid { grid-template-columns: 1fr; }
}

/* ---------- Comments ---------- */
.brk-comments {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid var(--brk-border);
  max-width: 760px;
}

.brk-comments h3 {
  font-size: 22px;
  margin: 0 0 26px;
  color: var(--brk-ink);
}

.brk-comment-list {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
}

.brk-comment-list > li {
  display: flex;
  gap: 14px;
  padding: 20px 0;
  border-bottom: 1px solid var(--brk-border);
}

.brk-comment-list ul.children {
  list-style: none;
  margin: 0;
  padding: 0 0 0 46px;
}

.brk-comment-list ul.children > li {
  display: flex;
  gap: 14px;
  padding: 20px 0 0;
  border-bottom: none;
}

.brk-comment-avatar img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: block;
}

.brk-comment-body { flex: 1; }

.brk-comment-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}

.brk-comment-meta strong { color: var(--brk-ink); font-size: 14.5px; }
.brk-comment-meta span { color: var(--brk-muted); font-size: 12.5px; }

.brk-comment-pending {
  color: var(--brk-primary);
  font-size: 13px;
  margin: 0 0 8px;
}

.brk-comment-content {
  color: var(--brk-ink);
  font-size: 15px;
  line-height: 1.65;
}
.brk-comment-content p { margin: 0 0 10px; }
.brk-comment-content p:last-child { margin-bottom: 0; }

.brk-comment-reply {
  margin-top: 8px;
}
.brk-comment-reply a {
  color: var(--brk-primary);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.brk-comments-closed {
  color: var(--brk-muted);
  font-size: 14.5px;
}

.brk-comment-form { margin: 0; }

.brk-comment-form-field { margin: 0 0 16px; }

.brk-comment-form input[type="text"],
.brk-comment-form input[type="email"],
.brk-comment-form input[type="url"],
.brk-comment-form textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--brk-border);
  border-radius: var(--brk-radius);
  background: var(--brk-bg-soft);
  color: var(--brk-ink);
  font: inherit;
  font-size: 15px;
}

.brk-comment-form textarea {
  resize: vertical;
  min-height: 110px;
}

.brk-comment-form input:focus,
.brk-comment-form textarea:focus {
  outline: none;
  border-color: var(--brk-primary);
}

.brk-comment-form .comment-form-cookies-consent {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 13.5px;
  color: var(--brk-muted);
}

.brk-comment-form .brk-cta-btn {
  display: inline-block;
  width: auto;
  padding: 13px 30px;
  border: none;
  cursor: pointer;
  font-size: 14.5px;
}

@media (max-width: 900px) {
  .brk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brk-featured-img { height: 260px; }
}
@media (max-width: 640px) {
  .brk-grid { grid-template-columns: 1fr; }
}