/* ============================================
   JOHANNA RAMOS PORTFOLIO — GLOBAL CSS
   Paste into: Appearance → Customize → Additional CSS
   Replace any previous version entirely with this
   ============================================ */


/* ── 1. SUPPRESS THEME DEFAULT HEADER & NAV ── */
header.site-header,
.site-header,
nav.main-navigation,
.main-navigation,
#site-navigation,
.navbar,
.header-navigation,
.top-navigation,
.primary-menu-container {
  display: none !important;
}


/* ── 2. REMOVE WHITESPACE GAPS ── */
.site-content,
.content-area,
#content,
.entry-content,
.page-content {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
}

.wp-site-blocks,
.site-main,
main#main,
.hentry,
article.page,
article.post {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Remove beige WP spacer block at top of homepage */
.wp-site-blocks > .wp-block-group:first-child {
  display: none !important;
}


/* ── 3. HIDE THEME AUTO-GENERATED TITLES ── */
.page-header,
.entry-header,
.page-title,
.entry-title,
.post-title {
  display: none !important;
}


/* ── 4. FORCE FULL WIDTH RENDERING ── */
.wp-block-html,
.wp-block-freeform,
.wp-block-group {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}


/* ── 5. NAV LINK VISIBILITY — applies to all pages ── */
.jr-link {
  color: rgba(255, 255, 255, 0.88) !important;
}
.jr-link:hover {
  color: #ffffff !important;
}
.jr-logo-title {
  color: rgba(255, 255, 255, 0.6) !important;
}
.jr-mobile-link {
  color: rgba(255, 255, 255, 0.88) !important;
}


/* ── 6. DARK HEADINGS ON LIGHT SECTIONS ── */
/* NOTE: white-heading overrides for dark sections come AFTER this block */
.section h2, .section h3,
.fp-body h2,
.pc-body h3,
.intro-block h2, .intro-block h3,
.skill-card h4, .pillar-row h4,
.result-card h3, .phase-content h3,
.step-content h4, .journey-body h3,
.tl-content h4, .fact-text h4,
.kb-card h4, .agent-body h4,
.post-content h2, .post-content h3, .post-content h4,
.related-body h4,
.cs-featured-body h2,
.cs-card-bottom h3,
.ig-callout h4,
.topic-card h4 {
  color: #1a1a1a !important;
}


/* ── 7. WHITE HEADINGS ON DARK SECTIONS ── */
/* Placed AFTER section 6 so same-specificity !important rules win */
.hero h1, .hero h2, .hero h3, .hero h4,
.ai-strip h2, .ai-strip h3,
.brand-strip h3,
.subscribe-strip h3,
.bottom-cta h2, .bottom-cta h3,
.cs-featured-visual h2,
.cs-card-top h3,
.quote-block h3,
.post-hero h1, .post-hero h2,
.post-cta h3,
.ba-col-header h2, .ba-col-header h3 {
  color: #ffffff !important;
}


/* ── 8. PLAYFAIR DISPLAY ON KEY HEADINGS ── */
.hero h1, .hero h2,
.bottom-cta h2,
.cs-featured-visual h2,
.section h2,
.fp-body h2,
.pc-body h3,
.post-hero h1,
.post-content h2, .post-content h3,
.brand-strip h3,
.subscribe-strip h3,
.quote-block p,
.quote-strip p {
  font-family: 'Playfair Display', Georgia, serif !important;
}


/* ── 9. ABOUT ME PAGE FIXES ── */
.skills-grid {
  grid-template-columns: repeat(2, 1fr) !important;
}

.section-label {
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  font-size: 12px !important;
}

.site-footer,
footer.site-footer,
#colophon {
  display: none !important;
}


/* ── 10. STICKY NAV ── */
.jr-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
}

/* Fix Case Studies filter bar hiding behind nav */
.filter-bar {
  top: 64px !important;
  z-index: 998 !important;
}


/* ── 11. HOMEPAGE TEXT CONTRAST ── */

.hero-sub {
  color: rgba(255, 255, 255, 0.85) !important;
}
.hero-stat .l {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 12px !important;
}
.cs-card-body p {
  color: #3d3d3d !important;
}
.cs-num {
  font-size: 11px !important;
}
.cs-metric .m-l {
  font-size: 11px !important;
  color: #666 !important;
}
.pillar-row p {
  color: #4a4a4a !important;
}
.quote-title {
  font-size: 12px !important;
  color: #666 !important;
}
.ai-strip p {
  color: rgba(255, 255, 255, 0.85) !important;
}
.agent-row-text p {
  color: rgba(255, 255, 255, 0.78) !important;
}
.footer {
  color: rgba(255, 255, 255, 0.78) !important;
}
.footer-links a {
  color: rgba(255, 255, 255, 0.78) !important;
}


/* ── 12. CASE STUDIES PAGE TEXT CONTRAST ── */

.hero p {
  color: rgba(255, 255, 255, 0.85) !important;
}
.hero-meta-item {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 12px !important;
}
.cs-featured-num {
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.65) !important;
}
.cs-card-top .cs-num {
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.65) !important;
}
.cs-m .ml {
  font-size: 11px !important;
  color: #666 !important;
}
.cs-card-m .l {
  font-size: 11px !important;
  color: #666 !important;
}
.cs-card-bottom p {
  color: #3d3d3d !important;
}
.bottom-cta p {
  color: rgba(255, 255, 255, 0.85) !important;
}


/* ── 13. BLOG PAGE TEXT CONTRAST ── */

/* Hero subtitle */
.hero-sub {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Baking strip paragraph — was rgba(white,0.65) on dark brown */
.brand-strip p {
  color: rgba(255, 255, 255, 0.88) !important;
}

/* Subscribe strip paragraph */
.subscribe-strip p {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Post card excerpt text */
.fp-excerpt {
  color: #444 !important;
}
.pc-excerpt {
  color: #444 !important;
}

/* Instagram callout */
.ig-callout p {
  color: #444 !important;
}

/* Topic card subtext */
.topic-card p {
  font-size: 12px !important;
  color: #777 !important;
}


/* ── 14. BLOG POST BODY TYPOGRAPHY ── */
/* Scoped to .single to avoid overriding other pages' dark sections */

.single .entry-content p {
  font-size: 16px !important;
  color: #2a2a2a !important;
  line-height: 1.85 !important;
  margin-bottom: 20px !important;
}
.single .entry-content h2 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 26px !important;
  color: #1a1a1a !important;
  margin: 40px 0 16px !important;
  line-height: 1.3 !important;
}
.single .entry-content h3 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 20px !important;
  color: #1a1a1a !important;
  margin: 32px 0 12px !important;
  line-height: 1.3 !important;
}
.single .entry-content h4 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  margin: 24px 0 10px !important;
}
.single .entry-content ul,
.single .entry-content ol {
  padding-left: 24px !important;
  margin-bottom: 20px !important;
}
.single .entry-content li {
  font-size: 16px !important;
  color: #2a2a2a !important;
  margin-bottom: 8px !important;
  line-height: 1.7 !important;
}
.single .entry-content a {
  color: #0f3460 !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(15,52,96,0.3) !important;
}
.single .entry-content strong {
  color: #1a1a1a !important;
  font-weight: 600 !important;
}
.single .entry-content blockquote {
  border-left: 3px solid #0f3460 !important;
  padding: 16px 24px !important;
  margin: 28px 0 !important;
  background: #f5f8fe !important;
  border-radius: 0 8px 8px 0 !important;
}
.single .entry-content blockquote p {
  font-style: italic !important;
  color: #3a3a3a !important;
}
.single .entry-content img {
  border-radius: 10px !important;
  margin: 24px 0 !important;
  max-width: 100% !important;
}
.single .entry-content {
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 48px 32px 64px !important;
}
.single .entry-title {
  display: none !important;
}
/* ── FIX GAP ON INNER PAGES (Case Studies, Blog, About Me) ── */
header.wp-block-template-part {
  display: none !important;
}

main.wp-block-group {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.wp-block-post-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
/* Fix WP logical-property spacing gap on inner pages */
.wp-site-blocks > * {
  margin-block-start: 0 !important;
}

main.wp-block-group {
  margin-block-start: 0 !important;
  padding-block-start: 0 !important;
}

.wp-block-post-content {
  padding-block-start: 0 !important;
}
/* ── OVERRIDE WP SPACING VARIABLES CAUSING INNER PAGE GAP ── */
:root {
  --wp--preset--spacing--20: 0px;
  --wp--style--root--padding-top: 0px;
  --wp--style--root--padding-bottom: 0px;
}

.wp-site-blocks {
  padding-block-start: 0 !important;
  padding-block-end: 0 !important;
}

.wp-site-blocks > * {
  margin-block-start: 0 !important;
}

.wp-block-post-content {
  padding-block-start: 0 !important;
}
/* Homepage case study card titles — override .section h3 dark rule */
.cs-card-hero h3 {
  color: #ffffff !important;
}

.cs-card-hero .cs-num {
  color: rgba(255, 255, 255, 0.7) !important;
}