/* =============================================================================
   The Mad House Newcastle — Blog Archive + Single Post
   ============================================================================= */


/* ═══════════════════════════════════════════════════════════════════════
   The Mad House — Blog Page Dark Redesign
   Target: body:is(.blog,.archive) (Astra blog archive)
   ═══════════════════════════════════════════════════════════════════════ */

/* Page background */
body:is(.blog,.archive),
body:is(.blog,.archive) #page,
body:is(.blog,.archive) #content,
body:is(.blog,.archive) #primary,
body:is(.blog,.archive) .ast-primary-content-area {
  background: #000 !important;
}
body:is(.blog,.archive) #main,
body:is(.blog,.archive) .site-main {
  background: #000 !important;
  padding-bottom: 80px !important;
}
/* ── Blog post grid (scoped to #main to avoid breaking nav) ────────── */
body:is(.blog,.archive) #main .ast-row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 60px 40px 80px !important;
  align-items: start !important;
}
@media (max-width: 900px) {
  body:is(.blog,.archive) #main .ast-row { grid-template-columns: repeat(2, 1fr) !important; padding: 40px 24px 60px !important; }
}
@media (max-width: 560px) {
  body:is(.blog,.archive) #main .ast-row { grid-template-columns: 1fr !important; padding: 32px 16px 48px !important; }
}

/* ── Reset Astra float/width layout inside cards ────────────────────── */
body:is(.blog,.archive) #main .ast-article-post,
body:is(.blog,.archive) #main .ast-article-inner,
body:is(.blog,.archive) #main .post-content,
body:is(.blog,.archive) #main .ast-grid-common-col {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  float: none !important;
  clear: both !important;
}

/* ── Post cards ─────────────────────────────────────────────────────── */
body:is(.blog,.archive) .ast-article-post,
body:is(.blog,.archive).ast-separate-container .ast-article-post {
  background: #111 !important;
  border: 1px solid #1e1e1e !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: border-color .25s ease !important;
  display: flex !important;
  flex-direction: column !important;
}
body:is(.blog,.archive) .ast-article-post:hover,
body:is(.blog,.archive).ast-separate-container .ast-article-post:hover {
  border-color: #F95FA0 !important;
  box-shadow: none !important;
}

/* ── Featured image ─────────────────────────────────────────────────── */
body:is(.blog,.archive) .ast-blog-featured-section,
body:is(.blog,.archive) .post-thumb-img-content,
body:is(.blog,.archive) .post-thumb {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
  display: block !important;
}
body:is(.blog,.archive) .post-thumb-img-content img,
body:is(.blog,.archive) .ast-blog-featured-section img {
  width: 100% !important;
  height: 210px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 10px 10px 0 0 !important;
  transition: transform .4s ease !important;
}
body:is(.blog,.archive) .ast-article-post:hover .post-thumb-img-content img {
  transform: scale(1.04) !important;
}

/* ── Post content area ──────────────────────────────────────────────── */
body:is(.blog,.archive) .ast-article-inner {
  padding: 0 !important;
  background: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}
body:is(.blog,.archive) .post-content.ast-grid-common-col {
  padding: 22px 24px 28px !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ── Category label ─────────────────────────────────────────────────── */
body:is(.blog,.archive) .ast-blog-single-element.ast-post-categories {
  margin-bottom: 8px !important;
}
body:is(.blog,.archive) .ast-post-categories a,
body:is(.blog,.archive) .entry-footer .cat-links a {
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .14em !important;
  color: #F95FA0 !important;
  text-decoration: none !important;
}

/* ── Title ──────────────────────────────────────────────────────────── */
body:is(.blog,.archive) .entry-title,
body:is(.blog,.archive) h2.entry-title {
  font-family: 'Oswald', sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin: 0 0 8px 0 !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
}
body:is(.blog,.archive) .entry-title a,
body:is(.blog,.archive) h2.entry-title a {
  color: #ffffff !important;
  text-decoration: none !important;
}
body:is(.blog,.archive) .entry-title a:hover,
body:is(.blog,.archive) h2.entry-title a:hover {
  color: #F95FA0 !important;
}

/* ── Meta (date, author) ────────────────────────────────────────────── */
body:is(.blog,.archive) .entry-header,
body:is(.blog,.archive) .ast-blog-meta-container {
  margin-bottom: 12px !important;
}
body:is(.blog,.archive) .entry-meta,
body:is(.blog,.archive) .entry-meta span,
body:is(.blog,.archive) .entry-meta a,
body:is(.blog,.archive) .entry-meta .posted-on {
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 11px !important;
  color: #555 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  text-decoration: none !important;
}

/* ── Excerpt ────────────────────────────────────────────────────────── */
body:is(.blog,.archive) .ast-excerpt-container,
body:is(.blog,.archive) .ast-excerpt-container p {
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 14px !important;
  color: #888 !important;
  line-height: 1.75 !important;
  margin-top: 10px !important;
}

/* ── Read More ──────────────────────────────────────────────────────── */
body:is(.blog,.archive) .ast-read-more-container {
  margin-top: 16px !important;
}
body:is(.blog,.archive) .ast-read-more-container a,
body:is(.blog,.archive) .read-more a {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  color: #F95FA0 !important;
  text-transform: uppercase !important;
  letter-spacing: .14em !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(249,95,160,.35) !important;
  padding-bottom: 2px !important;
  transition: color .2s, border-color .2s !important;
}
body:is(.blog,.archive) .ast-read-more-container a:hover {
  color: #fff !important;
  border-bottom-color: rgba(255,255,255,.35) !important;
}

/* ── Screen-reader text on read-more ────────────────────────────────── */
body:is(.blog,.archive) .screen-reader-text {
  position: absolute !important;
  left: -9999px !important;
}

/* ── Pagination ─────────────────────────────────────────────────────── */
body:is(.blog,.archive) .ast-pagination-outer-wrap,
body:is(.blog,.archive) .pagination {
  background: #000 !important;
  padding: 16px 0 60px !important;
  max-width: 820px !important;
  margin: 0 auto !important;
}
body:is(.blog,.archive) .page-numbers {
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #666 !important;
  background: #111 !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 4px !important;
  padding: 8px 14px !important;
  text-decoration: none !important;
  transition: border-color .2s, color .2s !important;
}
body:is(.blog,.archive) .page-numbers:hover {
  border-color: #F95FA0 !important;
  color: #F95FA0 !important;
}
body:is(.blog,.archive) .page-numbers.current {
  background: #F95FA0 !important;
  border-color: #F95FA0 !important;
  color: #000 !important;
}

/* ── "No posts found" message ───────────────────────────────────────── */
body:is(.blog,.archive) .no-results .page-title,
body:is(.blog,.archive) .not-found .page-title {
  font-family: 'Oswald', sans-serif !important;
  color: #fff !important;
}
body:is(.blog,.archive) .no-results .page-content p {
  font-family: 'Albert Sans', sans-serif !important;
  color: #888 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   Single Post Dark Theme — body.single-post
   ═══════════════════════════════════════════════════════════════════════ */

/* Page & containers */
body.single-post,
body.single-post #page,
body.single-post #content,
body.single-post #primary,
body.single-post .ast-primary-content-area {
  background: #000 !important;
}
body.single-post #main,
body.single-post .site-main {
  background: #000 !important;
  padding: 0 0 80px !important;
}

/* Post navigation (Prev/Next post links) */
body.single-post .post-navigation,
body.single-post .ast-post-navigation,
body.single-post .nav-links,
body.single-post .navigation.post-navigation {
  background: #000 !important;
  border-top: 1px solid #1e1e1e !important;
  padding: 24px !important;
  max-width: 780px !important;
  margin: 0 auto !important;
}
body.single-post .nav-links .nav-previous a,
body.single-post .nav-links .nav-next a,
body.single-post .post-navigation a {
  color: #888 !important;
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 13px !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}
body.single-post .nav-links .nav-previous a:hover,
body.single-post .nav-links .nav-next a:hover { color: #F95FA0 !important; }
body.single-post .nav-links .nav-next { text-align: right !important; }

/* Related posts — the white outer container */
body.single-post .ast-single-related-posts-container {
  background: #000 !important;
  padding: 40px 24px !important;
  max-width: 820px !important;
  margin: 0 auto !important;
  border-top: 1px solid #1e1e1e !important;
}

/* Constrain content width — scoped to #content only, does NOT touch header */
body.single-post #content .ast-container,
body.single-post #primary > .ast-container {
  max-width: 820px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Article card */
body.single-post .ast-article-single {
  background: #111 !important;
  border: 1px solid #1e1e1e !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  margin: 40px auto !important;
  overflow: hidden !important;
  max-width: 780px !important;
}

/* Featured image — full width across the card */
body.single-post .post-thumbnail,
body.single-post .ast-post-thumbnail-above-title,
body.single-post .single-featured-image-header {
  margin: 0 !important;
  padding: 0 !important;
}
body.single-post .post-thumbnail img,
body.single-post .single-featured-image-header img,
body.single-post .ast-article-single > .post-thumbnail img {
  width: 100% !important;
  height: 380px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 10px 10px 0 0 !important;
}

/* Entry header */
body.single-post .entry-header {
  padding: 32px 40px 0 !important;
}
body.single-post h1.entry-title {
  font-family: 'Oswald', sans-serif !important;
  font-size: 36px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: #fff !important;
  margin: 0 0 14px !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

/* Author & date meta */
body.single-post .entry-meta,
body.single-post .entry-meta *,
body.single-post .entry-meta a {
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 12px !important;
  color: #555 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  text-decoration: none !important;
}
body.single-post .ast-author-avatar img {
  border-radius: 50% !important;
  opacity: .6 !important;
}

/* Entry content */
body.single-post .entry-content {
  padding: 28px 40px 36px !important;
  background: transparent !important;
}
body.single-post .entry-content p {
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
  color: #bbb !important;
  margin-bottom: 18px !important;
}
body.single-post .entry-content h2 {
  font-family: 'Oswald', sans-serif !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: #fff !important;
  margin: 32px 0 12px !important;
  letter-spacing: .02em !important;
}
body.single-post .entry-content h3 {
  font-family: 'Oswald', sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #ddd !important;
  margin: 24px 0 10px !important;
}
body.single-post .entry-content a {
  color: #F95FA0 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}
body.single-post .entry-content ul,
body.single-post .entry-content ol {
  color: #bbb !important;
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
  padding-left: 24px !important;
}
body.single-post .entry-content blockquote {
  border-left: 3px solid #F95FA0 !important;
  margin: 24px 0 !important;
  padding: 12px 20px !important;
  background: rgba(249,95,160,.06) !important;
  border-radius: 0 6px 6px 0 !important;
}
body.single-post .entry-content blockquote p {
  color: #ddd !important;
  font-style: italic !important;
}

/* Entry footer (tags/cats) */
body.single-post .entry-footer {
  padding: 0 40px 28px !important;
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 12px !important;
  color: #555 !important;
}
body.single-post .entry-footer a { color: #F95FA0 !important; text-decoration: none !important; }

/* Related posts inner layout */
body.single-post .ast-related-posts-title-section {
  padding: 0 0 20px !important;
}
body.single-post h2.ast-related-posts-title {
  font-family: 'Oswald', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}
body.single-post .ast-related-posts-wrapper {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px !important;
  padding: 0 !important;
}
body.single-post .ast-related-post {
  background: #111 !important;
  border: 1px solid #1e1e1e !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  transition: border-color .2s !important;
}
body.single-post .ast-related-post:hover { border-color: #F95FA0 !important; }
body.single-post .ast-related-posts-inner-section { padding: 16px !important; background: transparent !important; }
body.single-post .ast-related-post .ast-related-post-featured-section img,
body.single-post .ast-related-post .post-thumb-img-content img,
body.single-post .ast-related-post .attachment-thumbnail {
  width: 100% !important;
  height: 160px !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 8px 8px 0 0 !important;
}
body.single-post .ast-related-post .entry-title,
body.single-post .ast-related-post .ast-related-posts-title {
  font-family: 'Oswald', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  margin: 0 0 6px !important;
  line-height: 1.3 !important;
}
body.single-post .ast-related-post .entry-title a,
body.single-post .ast-related-posts-title a { color: #fff !important; text-decoration: none !important; }
body.single-post .ast-related-post .entry-title a:hover { color: #F95FA0 !important; }
body.single-post .ast-related-post .entry-meta,
body.single-post .ast-related-post .entry-meta * {
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 11px !important; color: #555 !important;
  text-transform: uppercase !important; letter-spacing: .08em !important;
}

/* Comments */
body.single-post #comments,
body.single-post .comments-area {
  background: #000 !important;
  padding: 40px 24px !important;
  max-width: 820px !important;
  margin: 0 auto !important;
}
body.single-post .comments-title,
body.single-post #reply-title {
  font-family: 'Oswald', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  margin-bottom: 20px !important;
}
body.single-post .comment-list .comment-body {
  background: #111 !important;
  border: 1px solid #1e1e1e !important;
  border-radius: 8px !important;
  padding: 20px !important;
  margin-bottom: 16px !important;
}
body.single-post .comment-list .comment-meta,
body.single-post .comment-list .comment-author,
body.single-post .comment-list .comment-metadata a,
body.single-post .comment-list .comment-metadata {
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 12px !important; color: #555 !important;
  text-transform: uppercase !important; letter-spacing: .08em !important;
}
body.single-post .comment-list .comment-content p {
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 14px !important; color: #aaa !important;
  line-height: 1.7 !important;
}
/* Comment form */
body.single-post .comment-respond {
  background: #111 !important;
  border: 1px solid #1e1e1e !important;
  border-radius: 8px !important;
  padding: 28px 32px !important;
  margin-top: 24px !important;
}
body.single-post .comment-form input[type="text"],
body.single-post .comment-form input[type="email"],
body.single-post .comment-form input[type="url"],
body.single-post .comment-form textarea {
  background: #1a1a1a !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 6px !important;
  color: #ddd !important;
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 14px !important;
  padding: 12px 14px !important;
  width: 100% !important;
}
body.single-post .comment-form input:focus,
body.single-post .comment-form textarea:focus {
  border-color: #F95FA0 !important;
  outline: none !important;
}
body.single-post .comment-form label {
  color: #888 !important;
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}
body.single-post .comment-form .form-submit input[type="submit"] {
  background: #F95FA0 !important;
  color: #000 !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 13px 28px !important;
  cursor: pointer !important;
  transition: transform .2s !important;
}
body.single-post .comment-form .form-submit input[type="submit"]:hover {
  transform: translateY(-2px) !important;
}