/*
Theme Name: LPF Divi Child
Theme URI: https://levelingtheprayingfield.com
Description: Divi child theme for the Leveling the Praying Field WordPress rebuild. Hosts the temporary Homepage preview template and preview styles. Does not modify the Divi parent theme.
Author: LPF Migration
Template: Divi
Version: 0.1.0
Text Domain: lpf-divi-child
*/

/* Child theme stylesheet (loaded site-wide via get_stylesheet_uri()).
   Preview-specific styles for the Divi-rebuild pages live in
   assets/css/lpf-preview-shared.css (enqueued only on those pages).

   The rules below bring the STANDARD Divi header/navigation in line with the
   live site's global chrome (a fixed black bar with white uppercase links, a
   yellow "Get It Now" pill, and a matching mobile menu). They are scoped to
   Divi header selectors only — they do NOT touch page content, section widths,
   .et_pb_row, or .container. Colors/spacing come from the live stylesheet
   (_reference/.../css/custom.css): brand yellow #f4dc35 on black #000.

   Reversible: delete this block to restore the default Divi header. */

/* ==========================================================================
   Global typography — Adobe Fonts "nexa" (kit ubd3ias, enqueued in functions.php)
   --------------------------------------------------------------------------
   The live site sets everything in Nexa (see _reference/.../css/custom.css):
     body / menu / buttons  -> NexaRegular (400)
     section & block titles -> Nexa-Bold  (700)   [<h2> author weight 800 -> 700]
     display headers       -> NexaThin   (100)
     quotes                 -> Nexa Regular Italic (400 italic)
   We only set the family here (weights stay as authored per Divi module / rule),
   so Nexa replaces Divi's default Open Sans site-wide. Fallback keeps the layout
   stable if the kit fails to load. Reversible: remove this block.
   ========================================================================== */
body,
input,
textarea,
select,
button,
.et_pb_module,
.et_pb_text,
#main-header,
#et_mobile_nav_menu,
.et_pb_button {
	font-family: "nexa", "Open Sans", Arial, Helvetica, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.et_pb_module h1,
.et_pb_module h2,
.et_pb_module h3,
.et_pb_module h4,
.et_pb_module h5,
.et_pb_module h6,
.et_pb_text h1,
.et_pb_text h2,
.et_pb_text h3 {
	font-family: "nexa", "Open Sans", Arial, Helvetica, sans-serif;
}

/* ==========================================================================
   Global header / primary navigation — match live black fixed bar (.LTPFNav)
   ========================================================================== */

/* Header bar: solid black in both the normal and scrolled (fixed) states.
   Divi paints the fixed state with high-specificity inline-ish CSS, so the
   fixed-state background needs !important; the base state does not. */
#main-header {
	background-color: #000;
	box-shadow: none;
}
.et-fixed-header#main-header {
	background-color: #000 !important;
	box-shadow: none;
}

/* Header content spans the full bar like the live site (logo flush-left, menu
   flush-right) instead of Divi's default ~1080px centered container. The right
   padding pulls the right-floated menu in from the very edge; the logo is pinned
   left below. Scoped to the header only — page `.container`/`.et_pb_row` widths
   are untouched. */
#main-header .container {
	width: 100%;
	max-width: 100%;
	padding-right: 30px;
}

/* Primary menu links: white, uppercase (live .navbar a). Kept compact (14px,
   tight item spacing) so the right-floated menu clears the left wordmark with a
   gap like the live site, instead of filling the whole bar. */
#top-menu li a,
.et-fixed-header #top-menu li a {
	color: #fff;
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: 0.3px;
}
#main-header #top-menu > li {
	padding-right: 18px;
}
#main-header #top-menu > li:last-child {
	padding-right: 0;
}

/* Hover: brand yellow (live uses #f4dc35). Divi dims via opacity, so pin it. */
#main-header #top-menu li a:hover {
	color: #f4dc35 !important;
	opacity: 1;
}

/* Highlight nav items on HOVER ONLY — no persistent "current page" highlight
   (per tester feedback). The current/active item stays white like the rest and
   only turns yellow on hover via the rule above. */
#top-menu li.current-menu-item > a,
#top-menu li.current_page_item > a {
	color: #fff;
}

/* Remove the Divi header search icon — the live site's nav has no search. */
#et_top_navigation #et_search_icon,
#main-header #et_search_icon {
	display: none;
}

/* Dropdown submenus (if any are added later): black panel, yellow hover. */
#top-menu li ul.sub-menu {
	background-color: #000;
	border-color: #f4dc35;
}
#top-menu li ul.sub-menu li a {
	color: #fff;
}

/* ---- "Get It Now" CTA pill (live a.ordernavitem) --------------------------
   Targeted via the stable menu class `lpf-nav-cta` (added to the menu item),
   never a per-environment #menu-item-<id>, so it works on lpfdev too. */
/* Divi gives every top-level link a tall `padding-bottom` (33px normal / 20px
   fixed) with higher specificity than a plain `.lpf-nav-cta a` rule, so the pill's
   yellow background stretched to the bottom of the bar. Override all four sides
   (!important) for a compact pill and nudge it up so it sits centered on the menu
   baseline, like the live `a.ordernavitem`. */
#main-header #et-top-navigation #top-menu li.lpf-nav-cta > a,
#main-header.et-fixed-header #et-top-navigation #top-menu li.lpf-nav-cta > a {
	background-color: #f4dc35;
	color: #000 !important;
	border-radius: 18px;
	padding: 7px 18px !important;
	line-height: 1.2;
	display: inline-block;
	margin-top: -8px;
}
#main-header #top-menu li.lpf-nav-cta > a:hover {
	background-color: #fff;
	color: #000 !important;
}

/* ---- Brand logo (PNG wordmark) --------------------------------------------
   The child theme's et_html_logo_container filter (functions.php) outputs the
   shipped wordmark assets/images/LTPF_Logo.png (white/transparent, made for the
   black bar). Divi applies `.et_header_style_left .logo_container{position:absolute;
   width:100%;height:100%}`, which in the centered inline header context pushed a
   wide brand over the first menu item — so we size the container to its content and
   pin it left, and size the image by height (shrinking in the fixed/scrolled state).
   If a logo is set in Divi Theme Options, the filter defers to it and Divi's default
   #logo <img> renders instead. */
.et_header_style_left .logo_container,
.logo_container {
	position: absolute;
	left: 30px;
	width: auto;
	max-width: 60%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.logo_container a.lpf-brand-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: 100%;
}
/* Size by max-height + max-width with auto width/height so the aspect ratio is
   ALWAYS preserved. A fixed `height` combined with `max-width:100%` squashed the
   wide wordmark on narrow screens (width clipped, height fixed → distorted). */
.lpf-logo-img {
	display: block;
	width: auto;
	height: auto;
	max-height: 22px;
	max-width: 100%;
}
.et-fixed-header .lpf-logo-img {
	max-height: 18px;
}

/* Spanish page brand: the header filter (functions.php) outputs the Spanish
   wordmark as text instead of the English PNG. White NexaLight uppercase to
   match the live txt-logo-es, with the accent word kept brand yellow. Sized to
   sit on one line beside the (shorter) Spanish menu; shrinks in the fixed state. */
.lpf-brand-text__mark {
	color: #fff;
	text-transform: uppercase;
	font-weight: 300;
	font-size: 15px;
	letter-spacing: 1px;
	line-height: 1.1;
	white-space: nowrap;
}
.et-fixed-header .lpf-brand-text__mark {
	font-size: 13px;
}
.lpf-brand-text .lpf-yellow {
	color: #f4dc35;
}

/* ==========================================================================
   Hide Divi's default theme footer
   --------------------------------------------------------------------------
   The real footer (GPH logo + copyright + links) is a Divi section at the end
   of each page's content (lpf_footer_section). Divi ALSO renders its own theme
   footer `#main-footer` below that — the widget area (`#footer-widgets`, default
   WordPress Archives/Categories/Meta widgets) plus the credit/social bar
   (`#footer-bottom`, "Designed by Elegant Themes" + social icons). None of that
   exists on the live site, so hide the whole Divi footer. Our footer is in page
   content, so it is unaffected. Reversible: delete this block.
   ========================================================================== */
#main-footer {
	display: none;
}

/* ==========================================================================
   Mobile menu — match the black bar (Divi #et_mobile_nav_menu)
   ========================================================================== */
.et_header_style_left #et_top_navigation .mobile_menu_bar:before,
#main-header .mobile_menu_bar:before {
	color: #fff;
}
.et_mobile_menu {
	background-color: #000;
	border-top: 3px solid #f4dc35;
}
/* Divi's dynamic CSS sets `.et_mobile_menu li a{color:rgba(0,0,0,.6)}` (same
   specificity as a bare `.et_mobile_menu li a`, but later in the cascade), which
   rendered the links near-black on our black panel — invisible. Prefixing with the
   #et_mobile_nav_menu id raises specificity so white wins. */
#et_mobile_nav_menu .et_mobile_menu li a {
	color: #fff;
	text-transform: uppercase;
}
#et_mobile_nav_menu .et_mobile_menu li a:hover {
	color: #f4dc35;
	opacity: 1;
}
#et_mobile_nav_menu .et_mobile_menu li.lpf-nav-cta a {
	color: #f4dc35;
}

/* 992–1268px: the desktop menu is still shown (Divi switches to the mobile menu
   only at <=980px), and the ~430px-wide wordmark (529x27 @22px tall) collided
   with the right-floated menu. Shrink the wordmark a little and tighten the menu
   (smaller font, less item spacing, compact CTA) so they clear each other across
   this band. Above 1268px the full-size rules above have room. */
@media (min-width: 992px) and (max-width: 1268px) {
	#top-menu li a,
	.et-fixed-header #top-menu li a {
		font-size: 12px;
		letter-spacing: 0;
	}
	#main-header #top-menu > li {
		padding-right: 12px;
	}
	#main-header #et-top-navigation #top-menu li.lpf-nav-cta > a,
	#main-header.et-fixed-header #et-top-navigation #top-menu li.lpf-nav-cta > a {
		padding: 6px 12px !important;
	}
	.lpf-logo-img {
		max-height: 16px;
	}
	.et-fixed-header .lpf-logo-img {
		max-height: 14px;
	}
}

/* 981–991px: the tight band just above Divi's <=980px mobile-menu breakpoint. The
   moderate shrink above still left the wordmark and menu touching here (tester
   report), so shrink both harder — smallest wordmark and the most compact menu —
   to guarantee clearance right up to the point the hamburger takes over. */
@media (min-width: 981px) and (max-width: 991px) {
	#top-menu li a,
	.et-fixed-header #top-menu li a {
		font-size: 11px;
		letter-spacing: 0;
	}
	#main-header #top-menu > li {
		padding-right: 8px;
	}
	#main-header #et-top-navigation #top-menu li.lpf-nav-cta > a,
	#main-header.et-fixed-header #et-top-navigation #top-menu li.lpf-nav-cta > a {
		padding: 5px 10px !important;
	}
	.lpf-logo-img {
		max-height: 13px;
	}
	.et-fixed-header .lpf-logo-img {
		max-height: 12px;
	}
}

/* On phones size the wordmark off the viewport so it always leaves ~100px on the
   right for the hamburger toggle, and never gets clipped. Dropping the container's
   percentage max-width lets the image's own viewport-based cap govern (aspect ratio
   still preserved by max-height + auto width/height above). */
@media (max-width: 980px) {
	.et_header_style_left .logo_container,
	.logo_container {
		max-width: 260px;
	}
	.lpf-logo-img {
		max-height: 20px;
		max-width: 100%;
	}
	.et-fixed-header .lpf-logo-img {
		max-height: 18px;
	}
	/* Spanish text wordmark: shrink so the full line fits the capped container
	   (~260px) next to the hamburger without clipping. */
	.lpf-brand-text__mark,
	.et-fixed-header .lpf-brand-text__mark {
		font-size: 11px;
		letter-spacing: 0.5px;
	}

	/* Fix the top bar on mobile like the live site. At <=980px Divi sets
	   `.et_fixed_nav #main-header{position:absolute}` (so the bar scrolls away)
	   even though it still reserves space via `#page-container{padding-top:80px}`.
	   Switching to `fixed` pins the bar to the top; the reserved padding already
	   offsets the content, so no extra spacing is needed. */
	.et_fixed_nav #main-header {
		position: fixed !important;
	}
}

/* Logged-in users only: WordPress shows the admin bar at the top of the front
   end. On phones (<=782px) WP makes `#wpadminbar` position:absolute so it scrolls
   away, yet Divi still offsets the fixed header down 46px to clear it
   (`body.admin-bar #main-header{top:46px}`) — leaving an empty gap above the
   header once you scroll. Pinning the admin bar keeps that 46px always occupied,
   so the header sits directly beneath it with no gap. Logged-out visitors have no
   admin bar and see the header flush at the very top (unchanged). */
@media (max-width: 782px) {
	#wpadminbar {
		position: fixed !important;
		top: 0 !important;
	}
}