/*
Theme Name: ChristelNani Child
Theme URI: https://christelnani.com
Description: Child theme for ChristelNani — Sacred Choices edition. Cobalt blue, antique gold, and forest green. Put your custom tweaks here so they're never lost when the parent theme updates.
Author: Christel Nani
Template: christelnani
Version: 2.9.24
Text Domain: christelnani-child
*/

/* ===================================================================
   CUSTOM TWEAKS
   Palette: cobalt #1E3AE0 · navy #101C66 · gold #C9A227 · forest #1F7A4D
            cream #FFFDF8 / #FBF7F0
   =================================================================== */

/* -------------------------------------------------------------------
   1) HEADER LOGO — two-line stacked logo:
   "Christel Nani" (gold script) over "Clairvoyant Integrity" (navy caps).
   The parent theme outputs .cn-logo-name and .cn-logo-sub spans.
   These rules force the stacked layout and override any older styles.
   ------------------------------------------------------------------- */
.cn-nav-logo {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center;
  line-height: 1.1;
}
.cn-nav-logo span + span { margin-left: 0 !important; }  /* cancel old side-by-side gap */
.cn-nav-logo .cn-logo-name {
  display: block;
  font-family: var(--cn-font-display);
  font-style: italic;
  font-size: 1.6rem;
  color: var(--cn-gold);
}
.cn-nav-logo .cn-logo-sub {
  display: block;
  font-family: var(--cn-font-body);
  font-style: normal;
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cn-deep);
  margin-top: 0.15rem;
}

/* -------------------------------------------------------------------
   2) ABOUT PAGE HERO PORTRAIT — keep the new hero portrait tidy and
   centered, and let it sit comfortably beside the title on desktop.
   ------------------------------------------------------------------- */
.cn-about-hero { align-items: center; }
.cn-about-hero-portrait { max-width: 380px; width: 100%; margin-left: auto; }

@media (max-width: 880px) {
  /* On smaller screens the grid stacks; show the portrait first */
  .cn-about-hero { gap: 2rem; }
  .cn-about-hero-portrait { max-width: 320px; margin: 0 auto; order: -1; }
}

/* -------------------------------------------------------------------
   3) PRIMARY NAV — safety net so the menu never runs off the page.
   With several items, let them wrap to a second line instead of
   overflowing to the right. (Best paired with a lean menu.)
   ------------------------------------------------------------------- */
.cn-nav-menu { flex-wrap: wrap; justify-content: flex-end; row-gap: 0.15rem; }

/* Remove bullet points from the primary nav items */
.cn-nav-menu,
.cn-nav-menu ul,
.cn-nav-menu li { list-style: none !important; margin: 0; padding-left: 0; }
.cn-nav-menu li::marker { content: none; }

/* -------------------------------------------------------------------
   4) FOOTER NEWSLETTER SIGNUP  (shortcode: [cn_newsletter])
   Styled for the dark footer; also degrades fine on light backgrounds.
   ------------------------------------------------------------------- */
.cn-footer-newsletter { margin-top: 1.5rem; }
.cn-newsletter-label {
  display: block;
  font-family: var(--cn-font-body);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cn-gold-light);
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.cn-newsletter-sub {
  font-size: 0.85rem;
  line-height: 1.5;
  font-weight: 300;
  color: rgba(255,255,255,0.7);
  margin: 0 0 0.85rem;
}
.cn-newsletter-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cn-newsletter-row input[type="email"] {
  flex: 1 1 150px;
  min-width: 0;
  padding: 0.65rem 0.8rem;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--cn-radius-sm);
  background: rgba(255,255,255,0.96);
  color: var(--cn-taupe);
  font-family: var(--cn-font-body);
  font-size: 0.95rem;
}
.cn-newsletter-row input[type="email"]:focus { outline: none; border-color: var(--cn-gold); }
.cn-newsletter-row .cn-btn { flex: 0 0 auto; }
.cn-newsletter-msg { margin-top: 0.7rem; font-size: 0.85rem; }
.cn-newsletter-ok { color: var(--cn-gold-light); }
.cn-newsletter-err { color: #ffb4a8; }
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
}

/* ===================================================================
   HERO VIDEO POSTER (featured image)
   The parent theme outputs the front page's Featured Image as the
   video poster but never sizes it, so it would sit at its natural
   size instead of filling the frame. Make it cover the frame neatly.
   =================================================================== */
.cn-video-wrapper img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mobile menu — show & style sub-page (child) links */
.cn-mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.cn-mobile-nav .sub-menu {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	background: none;
	border: none;
	box-shadow: none;
	min-width: 0;
	margin: 0.1rem 0 0.9rem;
	padding: 0;
}
.cn-mobile-nav .sub-menu a {
	font-size: 1.35rem;
	color: var(--cn-deep);
	opacity: 0.8;
	padding: 0.3rem 0;
	border: none;
	letter-spacing: normal;
	text-transform: none;
}
.cn-mobile-nav .sub-menu a:hover { color: var(--cn-gold); opacity: 1; }

/* ===================================================================
   PAGE-TITLE BANNER HEIGHT
   The parent theme's .cn-page-hero (the big serif page title at the
   top of interior pages — Power Animals, Christel Cards, the quizzes,
   Q&A, Enneagram, etc.) was running very tall and leaving a large
   empty gap before the content. Tighten it site-wide: keep the title,
   lose the wasted space.
   =================================================================== */
.cn-page-hero{
	padding-top: clamp(3rem, 6vw, 4.5rem) !important;
	padding-bottom: clamp(0.5rem, 2vw, 1.25rem) !important;
	min-height: 0 !important;
}
.cn-page-hero .cn-container{
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
/* Pull the first content section up close to the title, so there's no
   big empty band between the page title and "Before You Begin" / content. */
.cn-page-hero + .cn-section{
	padding-top: clamp(0.75rem, 3vw, 2rem) !important;
}

/* -------------------------------------------------------------------
   TESTIMONIALS PAGE — trim the oversized "Voices of Transformation"
   title so the testimonial cards come into view sooner. Scoped to the
   testimonials template only, so other page titles are untouched.
   ------------------------------------------------------------------- */
.page-template-page-testimonials-php .cn-page-hero h1{
	font-size: clamp(2.3rem, 4.5vw, 4rem) !important;
	line-height: 1.08 !important;
}

/* -------------------------------------------------------------------
   HEALING TECHNIQUES (page 143) — dark cobalt hero (.cn-page-hero--dark).
   The header floats transparently over it, so the normal dark menu text
   was unreadable on the blue. Make the menu light while the header is at
   the top over the hero; once it goes solid on scroll (.scrolled) it
   returns to the normal dark style. Scoped to this page only.
   ------------------------------------------------------------------- */
.page-id-143 #cn-header:not(.scrolled) .cn-nav-menu a{
	color: var(--cn-sand) !important;
}
.page-id-143 #cn-header:not(.scrolled) .cn-nav-menu a:hover{
	color: var(--cn-gold-light) !important;
}

/* ===================================================================
   GLOBAL SPACING TRIM
   Take the worst air out of the interior pages while keeping the airy
   feel. Two levers:
   1) The colour heroes (Angel Signs, Ask Christel, Power Animals, and
      the library index pages) carried up to 8rem top / 5.5rem bottom
      padding — that's the "extra blue/green space." Brought down to a
      calmer, consistent size.
   2) .cn-section is the theme's between-sections spacing; eased so
      stacked sections sit closer without feeling cramped.
   Site-wide. !important so it wins over each page's inline hero styles.
   (The prayer-cards cream hero is intentionally left as-is.)
   =================================================================== */
.cn-angel-hero,
.cn-ask-hero,
.cn-pa-hero,
.cn-lib-hero{
	padding-top: clamp(3rem, 6vw, 4.5rem) !important;
	padding-bottom: clamp(2rem, 4vw, 3rem) !important;
}
.cn-section{
	padding-top: clamp(2.5rem, 5vw, 4rem) !important;
	padding-bottom: clamp(2.5rem, 5vw, 4rem) !important;
}

/* ==========================================================================
   FREE-FORM PAGE TEMPLATE — styles blocks the user adds in the editor
   ========================================================================== */
.cn-freeform-title { color: var(--cn-earth); }
.cn-freeform-content { font-size: 1.05rem; line-height: 1.8; color: var(--cn-taupe); }
.cn-freeform-content h2 { color: var(--cn-earth); margin: 2rem 0 1rem; }
.cn-freeform-content h3 { color: var(--cn-earth); margin: 1.6rem 0 0.8rem; }
.cn-freeform-content h4 { color: var(--cn-forest); margin: 1.4rem 0 0.6rem; }
.cn-freeform-content p { margin: 0 0 1.2rem; }
.cn-freeform-content a { color: var(--cn-forest); }
.cn-freeform-content img { border-radius: 8px; height: auto; max-width: 100%; }
.cn-freeform-content ul, .cn-freeform-content ol { margin: 0 0 1.2rem 1.4rem; }
.cn-freeform-content li { margin-bottom: 0.5rem; }
.cn-freeform-content blockquote {
  font-family: var(--cn-font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--cn-earth);
  border-left: 3px solid var(--cn-gold);
  padding-left: 1.2rem;
  margin: 1.6rem 0;
}
/* WordPress button blocks inherit brand look */
.cn-freeform-content .wp-block-button__link {
  background: var(--cn-forest);
  color: #fff;
  border-radius: var(--cn-radius-sm);
  padding: 0.8rem 1.8rem;
  text-decoration: none;
}

/* ==========================================================================
   CONSOLIDATED FIXES v2.9.22 — dots, circles, header overlap
   Maximum specificity so these win over everything.
   ========================================================================== */

/* 1) NAV DOTS — kill every possible source (list bullets AND pseudo dots) */
#cn-header .cn-nav-menu li,
#cn-header .cn-nav-menu ul li,
.cn-nav-menu li {
  list-style: none !important;
  list-style-type: none !important;
}
#cn-header .cn-nav-menu li::marker { content: "" !important; }
#cn-header .cn-nav-menu li::before,
#cn-header .cn-nav-menu li::after { content: none !important; display: none !important; }
/* In case a separator was added via the link */
#cn-header .cn-nav-menu > li > a::before { content: none !important; }

/* 2) CIRCLE RINGS behind hero + corner brackets — force gone */
.cn-hero-deco,
.cn-hero-deco::before,
.cn-hero-deco::after,
.cn-frame-corner,
.cn-hero-visual .cn-frame-corner { display: none !important; }

/* 3) HEADER / TAGLINE OVERLAP — push content clear of the fixed header */
#main-content { padding-top: 96px !important; }
.admin-bar #main-content { padding-top: 128px !important; }
.cn-tagline-banner { position: relative; z-index: 1; margin-top: 0; }

/* ==========================================================================
   MOBILE HEADER FIX (child, guaranteed) v2.9.23
   ========================================================================== */
@media (max-width: 900px) {
  .cn-nav-menu { display: none !important; }
  .cn-hamburger { display: flex !important; flex-shrink: 0; }
  .cn-nav-logo { max-width: 68%; }
  .cn-logo-name { font-size: 1.15rem !important; line-height: 1.1; }
  .cn-logo-sub  { font-size: 0.5rem !important; letter-spacing: 0.18em; }
  .cn-nav-inner { display: flex !important; align-items: center; justify-content: space-between; gap: 0.5rem; }
  .cn-tagline-banner { padding: 1.1rem 1rem; }
  .cn-tagline-quote  { font-size: 1.1rem !important; line-height: 1.3; }
  .cn-tagline-author { font-size: 0.62rem !important; margin-top: 0.4rem; }
}
@media (max-width: 480px) {
  .cn-logo-name { font-size: 1rem !important; }
  .cn-logo-sub  { font-size: 0.45rem !important; }
  .cn-tagline-quote { font-size: 1rem !important; }
}