/*
Theme Name: Briefing Fox Child
Theme URI: https://briefingfox.com/
Description: Astra child theme for Briefing Fox. Provides custom page templates (Canvas, Legal) that replace Elementor, and folds in the site's additional CSS.
Author: Briefing Fox
Template: astra
Version: 1.0.1
Text Domain: briefingfox-child
*/

/* ============================================
   BRIEFING FOX — Complete Blog CSS
   Background: deep navy (#0D1B2A) — matches main app
   ============================================ */

/* --- Global --- */
::selection {
  background: #1A9AB5;
  color: #fff;
}

* {
  scrollbar-color: rgba(26, 154, 181, 0.4) #0D1B2A !important;
}

/* --- Page background — black everywhere --- */
body,
body.single,
body.blog,
body.archive,
.site,
.site-content,
#primary,
#content,
#page {
  background-color: #0D1B2A !important;
}

/* --- Hide WordPress chrome on single posts --- */
.single .site-header,
.single .site-footer,
.single .entry-meta,
.single .comments-area {
  display: none !important;
}

.single .site-content {
  padding-top: 0 !important;
}

.single #primary {
  padding-bottom: 30px !important;
  margin-top: 0 !important;
}

/* ============================================
   BRIEFING FOX HEADER — full width on posts
   ============================================ */
.single .briefing-fox-app-wrapper.mode-header,
.single .briefing-fox-app-wrapper.mode-library {
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  background-color: #0D1B2A !important;
  min-height: auto !important;
  display: flex !important;
  flex-direction: column !important;
}

.single .briefing-fox-app-wrapper.mode-header .ambient-glow,
.single .briefing-fox-app-wrapper.mode-library .ambient-glow {
  display: none !important;
}

.single .briefing-fox-app-wrapper.mode-header .noise-overlay,
.single .briefing-fox-app-wrapper.mode-library .noise-overlay {
  display: none !important;
}

.single .briefing-fox-app-wrapper.mode-header .ai-site-header,
.single .briefing-fox-app-wrapper.mode-library .ai-site-header {
  background: transparent !important;
}

/* ============================================
   SINGLE POST — Article card
   ============================================ */
article.ast-article-single,
.ast-separate-container article.ast-article-single {
  background-color: #0D1B2A !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 40px !important;
  margin-top: 0 !important;
}

/* ============================================
   SINGLE POST — Post header
   ============================================ */
.single .entry-header {
  max-width: 740px !important;
  margin: 0 auto !important;
  padding: 1rem 0 1.5rem !important;
}

/* On desktop (no header bar), add top breathing room */
@media (min-width: 1101px) {
  .single .entry-header {
    padding-top: 2rem !important;
  }
}

.single .entry-title,
.entry-header .entry-title,
h1.entry-title {
  color: #ffffff !important;
  font-size: 2.4rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.2 !important;
  margin: 0 0 1rem !important;
}

/* ============================================
   SINGLE POST — Body content
   ============================================ */
.entry-content {
  max-width: 740px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  color: #c8c8d4 !important;
  font-size: 1.05rem !important;
  line-height: 1.85 !important;
}

.entry-content p {
  color: #c8c8d4 !important;
  margin-bottom: 1.5rem !important;
}

.entry-content li {
  color: #c8c8d4 !important;
  margin-bottom: 0.5rem !important;
}

/* Headings */
.entry-content h2 {
  color: #ffffff !important;
  font-size: 1.55rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  margin: 3rem 0 1rem !important;
  padding-bottom: 0.6rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.entry-content h3 {
  color: #ffffff !important;
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  margin: 2rem 0 0.75rem !important;
}

.entry-content h4 {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  margin: 1.5rem 0 0.5rem !important;
}

/* Links */
.entry-content a {
  color: #82DEFF !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(130, 222, 255, 0.3) !important;
  transition: color 0.2s, border-color 0.2s !important;
}

.entry-content a:hover {
  color: #B8F0FF !important;
  border-bottom-color: #82DEFF !important;
}

/* Blockquotes */
.entry-content blockquote {
  margin: 2rem 0 !important;
  padding: 1.25rem 1.5rem !important;
  border-left: 3px solid #1A9AB5 !important;
  border-radius: 0 8px 8px 0 !important;
  background: rgba(26, 154, 181, 0.06) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-style: italic !important;
}

/* Inline code */
.entry-content code {
  background: rgba(26, 154, 181, 0.12) !important;
  border: 1px solid rgba(26, 154, 181, 0.25) !important;
  border-radius: 4px !important;
  color: #B8F0FF !important;
  font-size: 0.88em !important;
  padding: 0.15em 0.4em !important;
}

/* Code blocks */
.entry-content pre {
  background: rgba(26, 154, 181, 0.06) !important;
  border: 1px solid rgba(26, 154, 181, 0.2) !important;
  border-radius: 10px !important;
  padding: 1.5rem !important;
  margin: 2rem 0 !important;
  overflow-x: auto !important;
}

.entry-content pre code {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: #B8F0FF !important;
  font-size: 0.9rem !important;
  line-height: 1.7 !important;
}

/* Horizontal rules */
.entry-content hr {
  border: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
  margin: 2.5rem 0 !important;
}

/* ============================================
   BLOG / ARCHIVE listing page
   ============================================ */

/* --- Hide default WP header & footer on blog/archive --- */
.blog .site-header,
.archive .site-header,
.blog .site-footer,
.archive .site-footer {
  display: none !important;
}

/* --- Briefing Fox header on blog page — full width --- */
.blog .briefing-fox-app-wrapper.mode-header,
.blog .briefing-fox-app-wrapper.mode-library,
.archive .briefing-fox-app-wrapper.mode-header,
.archive .briefing-fox-app-wrapper.mode-library {
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  background-color: #0D1B2A !important;
  min-height: 70px !important;
  display: flex !important;
  flex-direction: column !important;
}

.blog .briefing-fox-app-wrapper.mode-header .ambient-glow,
.blog .briefing-fox-app-wrapper.mode-library .ambient-glow,
.archive .briefing-fox-app-wrapper.mode-header .ambient-glow,
.archive .briefing-fox-app-wrapper.mode-library .ambient-glow,
.blog .briefing-fox-app-wrapper.mode-header .noise-overlay,
.blog .briefing-fox-app-wrapper.mode-library .noise-overlay,
.archive .briefing-fox-app-wrapper.mode-header .noise-overlay,
.archive .briefing-fox-app-wrapper.mode-library .noise-overlay {
  display: none !important;
}

.blog .briefing-fox-app-wrapper.mode-header .ai-site-header,
.blog .briefing-fox-app-wrapper.mode-library .ai-site-header,
.archive .briefing-fox-app-wrapper.mode-header .ai-site-header,
.archive .briefing-fox-app-wrapper.mode-library .ai-site-header {
  background: transparent !important;
}

.blog .site-content,
.archive .site-content {
  padding-top: 0 !important;
}

/* --- Blog grid — 3 columns with spacing --- */
.blog .ast-row,
.archive .ast-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

.blog .ast-row article,
.archive .ast-row article {
  width: calc((100% - 48px) / 3) !important;
  flex: 0 0 calc((100% - 48px) / 3) !important;
  max-width: calc((100% - 48px) / 3) !important;
}

@media (max-width: 900px) {
  .blog .ast-row article,
  .archive .ast-row article {
    width: calc((100% - 24px) / 2) !important;
    flex: 0 0 calc((100% - 24px) / 2) !important;
    max-width: calc((100% - 24px) / 2) !important;
  }
}

@media (max-width: 600px) {
  .blog .ast-row article,
  .archive .ast-row article {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* --- Blog article cards — compact dark glass style --- */
.blog article,
.archive article {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 12px !important;
  padding: 1.1rem 1.2rem !important;
  margin-bottom: 0 !important;
  transition: border-color 0.25s ease, background 0.25s ease, opacity 0.3s ease, transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: transform, opacity;
}

.blog article:hover,
.archive article:hover {
  border-color: rgba(26, 154, 181, 0.4) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Inner card wrapper — flex column for fixed layout zones */
.blog .ast-article-inner,
.archive .ast-article-inner {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.blog .post-content,
.archive .post-content {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* --- Hide metadata (category tag, author, date) --- */
.blog .ast-taxonomy-container,
.archive .ast-taxonomy-container,
.blog .entry-meta,
.archive .entry-meta,
.blog .ast-blog-meta-container,
.archive .ast-blog-meta-container,
.blog .entry-header,
.archive .entry-header,
.blog .ast-blog-featured-section,
.archive .ast-blog-featured-section {
  display: none !important;
}

/* --- Zone 1: Post titles — fixed height (2 lines) --- */
/* 1.15rem * 1.35 line-height * 2 lines ≈ 3.1rem */
.blog .entry-title,
.archive .entry-title {
  margin-top: 0 !important;
  height: 3.1rem !important;
  min-height: 3.1rem !important;
  max-height: 3.1rem !important;
  display: flex !important;
  align-items: flex-start !important;
  margin-bottom: 0.5rem !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

.blog .entry-title a,
.archive .entry-title a {
  color: #ffffff !important;
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
  line-height: 1.35 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.blog .entry-title a:hover,
.archive .entry-title a:hover {
  color: #82DEFF !important;
}

/* --- Zone 2: Excerpt text — clamp only, no fixed height --- */
.blog .ast-excerpt-container,
.archive .ast-excerpt-container,
.blog .entry-content,
.archive .entry-content {
  overflow: hidden !important;
  flex-shrink: 0 !important;
  margin-bottom: 0.6rem !important;
}

.blog .entry-content p,
.archive .entry-content p,
.blog .ast-excerpt-container p,
.archive .ast-excerpt-container p,
.entry-summary p {
  color: rgba(255, 255, 255, 0.45) !important;
  line-height: 1.65 !important;
  font-size: 0.88rem !important;
  margin-bottom: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 6 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* --- Zone 3: Read More button — pinned to bottom --- */
.bf-read-more {
  display: inline-block !important;
  margin-top: auto !important;
  padding: 7px 18px !important;
  background: transparent !important;
  border: 1px solid rgba(26, 154, 181, 0.35) !important;
  border-radius: 6px !important;
  color: #82DEFF !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
  letter-spacing: 0.02em !important;
  align-self: flex-start !important;
  flex-shrink: 0 !important;
}

.bf-read-more:hover {
  background: rgba(26, 154, 181, 0.12) !important;
  border-color: #82DEFF !important;
  color: #B8F0FF !important;
}

/* --- Ensure cards stretch to equal height --- */
.blog article,
.archive article {
  display: flex !important;
  flex-direction: column !important;
}

/* --- Kill transitions during FLIP invert phase --- */
.blog article.bf-no-transition,
.archive article.bf-no-transition {
  transition: none !important;
}

/* --- Hidden cards must fully collapse in flex layout --- */
.blog article.bf-hidden,
.archive article.bf-hidden {
  display: none !important;
  width: 0 !important;
  flex: 0 0 0px !important;
  max-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* --- Mobile: tighter card padding --- */
@media (max-width: 600px) {
  .blog article,
  .archive article {
    padding: 0.75rem 0.9rem !important;
  }
}

/* --- Mobile: zero out Astra top padding on blog/archive/single --- */
@media (max-width: 768px) {
  .blog #primary,
  .archive #primary,
  .single #primary,
  .blog #main,
  .archive #main,
  .single #main,
  .blog .ast-container,
  .archive .ast-container,
  .single .ast-container,
  .blog main,
  .archive main,
  .single main {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

/* --- Hide pagination on blog/archive pages --- */
.blog .ast-pagination,
.archive .ast-pagination,
.blog .pagination,
.archive .pagination,
.blog nav.navigation,
.archive nav.navigation {
  display: none !important;
}

/* Remove ambient glow and noise on blog posts — solid black only */
.single .briefing-fox-app-wrapper.mode-header .ambient-glow,
.single .briefing-fox-app-wrapper.mode-library .ambient-glow {
  display: none !important;
}

.single .briefing-fox-app-wrapper.mode-header .noise-overlay,
.single .briefing-fox-app-wrapper.mode-library .noise-overlay {
  display: none !important;
}
/* Hide previous/next post navigation */
.single .post-navigation {
  display: none !important;
}
/* Reduce dead space at top of posts */
.single .briefing-fox-app-wrapper.mode-header,
.single .briefing-fox-app-wrapper.mode-library {
  min-height: auto !important;
}

@media (max-width: 768px) {
  .single .briefing-fox-app-wrapper.mode-header,
  .single .briefing-fox-app-wrapper.mode-library {
    min-height: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
}

@media (max-width: 768px) {
  .single .entry-header {
    padding-top: 0 !important;
  }
}

/* ============================================
   LEGAL PAGES (ToS / Privacy / Refund)
   Container styling for the Legal page template.
   Reuses the post .entry-content typography by
   adding that class in the template.
   ============================================ */
.briefingfox-legal-page .briefingfox-legal-content {
  padding: 2.5rem 1.5rem 4rem !important;
}

@media (max-width: 768px) {
  .briefingfox-legal-page .briefingfox-legal-content {
    padding: 1.5rem 1rem 3rem !important;
  }
}