/*
Theme Name:   Hal Lindsey (Kadence Child)
Theme URI:    https://www.hallindsey.com/
Description:  Kadence child theme for the hallindsey.com rebuild. Dark brand shell, header/footer treatment, single-article and archive styling, and block patterns mirroring the legacy home page. Brand tokens per /Web Development/hallindsey-brand-tokens.md (locked 2026-05-13).
Author:       Hal Lindsey Media Ministries (Heath Thomas)
Template:     kadence
Version:      1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  hallindsey-child
*/

/* =====================================================================
   1. Brand tokens (source of truth: hallindsey-brand-tokens.md)
   ===================================================================== */
:root {
	--hl-primary:        #2a8fca; /* Accent 1 — brand blue */
	--hl-primary-hover:  #32abf0; /* Accent 2 — hover blue */
	--hl-commerce:       #a85a00; /* Accent 3 — AA-safe commerce orange */
	--hl-commerce-hover: #8a4a00;
	--hl-bg:             #171717; /* Base 1 — site background */
	--hl-surface-1:      #1f1f1f; /* card backgrounds on dark */
	--hl-surface-2:      #2a2a2a; /* elevated / hover on dark */
	--hl-border:         #333333; /* hairlines on dark */
	--hl-heading:        #ffffff;
	--hl-body:           #cccccc;
	--hl-muted:          #999999;
	--hl-light-border:   #e5e5e5; /* hairlines on light island */
	--hl-tag-red:        #bc1111; /* "Latest" / "Breaking" pills */
}

/* =====================================================================
   2. Header — dark treatment
   (Fixes the white-header-over-hero issue; matches header-fixes spec.)
   ===================================================================== */
#masthead,
#masthead .site-header-row-container-inner,
#masthead .site-main-header-wrap .site-header-row-container-inner,
#masthead .site-top-header-wrap .site-header-row-container-inner,
#masthead .site-main-header-inner-wrap {
	background: var(--hl-bg);
}

#masthead {
	border-bottom: 0;
}

/* Text site-title fallback (if no logo set) renders white, sane size */
.site-branding .site-title,
.site-branding .site-title a {
	color: var(--hl-heading);
	font-size: 24px;
	font-weight: 900;
}

/* Primary nav */
.main-navigation .primary-menu-container > ul > li.menu-item > a,
.main-navigation ul.menu > li.menu-item > a {
	color: var(--hl-heading);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
.main-navigation .primary-menu-container > ul > li.menu-item > a:hover,
.main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a,
.main-navigation ul.menu > li.menu-item > a:hover {
	color: var(--hl-primary);
}

/* Dropdown submenus on dark */
.main-navigation .sub-menu,
.main-navigation ul ul {
	background: var(--hl-surface-1);
	border: 1px solid var(--hl-border);
}
.main-navigation .sub-menu li a,
.main-navigation ul ul li a {
	color: var(--hl-body);
}
.main-navigation .sub-menu li a:hover {
	color: var(--hl-heading);
	background: var(--hl-surface-2);
}

/* Mobile trigger + off-canvas drawer */
#masthead .menu-toggle-open,
#masthead .search-toggle-open {
	color: var(--hl-heading);
	background: transparent;
}
#mobile-drawer .drawer-inner,
#mobile-drawer .drawer-content {
	background: var(--hl-bg);
}
#mobile-drawer .mobile-navigation ul li a {
	color: var(--hl-heading);
	border-color: var(--hl-border);
}
#mobile-drawer .mobile-navigation ul li a:hover {
	color: var(--hl-primary);
}
#mobile-drawer .drawer-header .drawer-toggle {
	color: var(--hl-heading);
}

/* =====================================================================
   3. Footer — dark treatment per IA spec §3
   ===================================================================== */
#colophon,
#colophon .site-footer-row-container-inner,
.site-footer .site-footer-wrap {
	background: #0f0f0f;
}
#colophon .site-bottom-footer-wrap .site-footer-row-container-inner {
	background: #000000;
}
#colophon,
#colophon .footer-html {
	color: var(--hl-muted);
}
#colophon a {
	color: var(--hl-body);
}
#colophon a:hover {
	color: var(--hl-primary);
}
#colophon .widget-title {
	color: var(--hl-heading);
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
/* IA spec: no social icons. Kadence starter ships a footer-social block
   with dead links; hide it defensively (also remove in Footer Builder). */
#colophon .footer-social-wrap {
	display: none;
}

/* =====================================================================
   4. Buttons
   ===================================================================== */
.hl-btn,
a.hl-btn {
	display: inline-block;
	background: var(--hl-primary);
	color: #ffffff;
	padding: 14px 18px;
	border-radius: 4px;
	text-decoration: none;
	text-align: center;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	transition: background-color 0.15s ease;
}
.hl-btn:hover,
a.hl-btn:hover {
	background: var(--hl-primary-hover);
	color: #ffffff;
}
.hl-btn--block { display: block; width: 100%; }
/* Commerce-only orange (cart / checkout / store CTAs) */
.hl-btn--commerce { background: var(--hl-commerce); }
.hl-btn--commerce:hover { background: var(--hl-commerce-hover); }

/* Eyebrow + pill mannerisms */
.hl-eyebrow {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--hl-primary);
	line-height: 1;
}
.hl-pill {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #ffffff;
	background: var(--hl-primary);
	padding: 6px 12px;
	border-radius: 2px;
	line-height: 1;
}
.hl-pill--red { background: var(--hl-tag-red); }

/* =====================================================================
   5. Home hero — white "island" (locked Session 8 design)
   Pattern: patterns/home-hero.php
   ===================================================================== */
.hl-light-island {
	background: #ffffff;
	color: #1f1f1f;
}
.hl-light-island h1,
.hl-light-island h2,
.hl-light-island h3,
.hl-light-island h4 {
	color: #171717;
}
.hl-hero-title {
	margin: 18px 0 0;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	color: #171717;
}
.hl-card {
	display: block;
	background: #ffffff;
	border: 1px solid var(--hl-light-border);
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 12px;
	text-decoration: none;
	color: inherit;
	transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.hl-card:hover {
	background: #f7f7f7;
	border-color: #d4d4d4;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.hl-card img {
	width: 100%;
	display: block;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: #222222;
}
.hl-card-body { padding: 14px 16px 14px; }
.hl-card-body .hl-eyebrow { margin-bottom: 6px; }
.hl-card-title {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.35;
	color: #171717;
}

/* Dark variant of the card (news / archive strips on the dark base) */
.hl-card--dark {
	background: var(--hl-surface-1);
	border-color: var(--hl-border);
}
.hl-card--dark:hover {
	background: var(--hl-surface-2);
	border-color: #3d3d3d;
	box-shadow: none;
}
.hl-card--dark .hl-card-title { color: var(--hl-heading); }

/* =====================================================================
   6. News section (mirrors legacy home "News" layout, on dark)
   Pattern: patterns/news-section.php
   ===================================================================== */
.hl-section-title {
	color: var(--hl-heading);
	font-size: 32px;
	font-weight: 700;
	margin: 0 0 24px;
}
.hl-news-lead img {
	width: 100%;
	display: block;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 6px;
	background: #222222;
}
.hl-news-lead h2 a,
.hl-news-item h3 a {
	color: var(--hl-heading);
	text-decoration: none;
}
.hl-news-lead h2 a:hover,
.hl-news-item h3 a:hover {
	color: var(--hl-primary);
}
.hl-news-meta {
	color: var(--hl-muted);
	font-size: 14px;
	margin: 6px 0 12px;
}
.hl-news-excerpt {
	color: var(--hl-body);
	font-size: 18px;
	line-height: 1.6;
}
.hl-related {
	border-top: 1px solid var(--hl-border);
	margin-top: 18px;
	padding-top: 14px;
}
.hl-related-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--hl-muted);
	margin: 0 0 8px;
}
.hl-related ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.hl-related li {
	padding: 6px 0;
	border-bottom: 1px dashed var(--hl-border);
	font-size: 16px;
}
.hl-related li:last-child { border-bottom: 0; }
.hl-related li a { color: var(--hl-body); text-decoration: none; }
.hl-related li a:hover { color: var(--hl-primary); }
.hl-related li .hl-news-meta { display: inline; font-size: 13px; margin-left: 8px; }

/* =====================================================================
   7. Donate CTA band + TV schedule
   Patterns: patterns/donate-cta.php, patterns/tv-schedule.php
   ===================================================================== */
.hl-donate-band {
	background: linear-gradient(135deg, #123a52 0%, var(--hl-bg) 70%);
	border-top: 1px solid var(--hl-border);
	border-bottom: 1px solid var(--hl-border);
	text-align: center;
	padding: 48px 24px;
}
.hl-donate-band h2 {
	color: var(--hl-heading);
	font-size: 32px;
	font-weight: 700;
	margin: 0 0 8px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.hl-donate-band p {
	color: var(--hl-body);
	margin: 0 0 20px;
}
.hl-schedule {
	text-align: center;
	padding: 24px;
}
.hl-schedule .hl-eyebrow { display: block; margin-bottom: 10px; }
.hl-schedule h2 {
	color: var(--hl-heading);
	font-size: 32px;
	font-weight: 700;
	margin: 0 0 16px;
}
.hl-schedule-rows {
	color: var(--hl-body);
	font-size: 18px;
	line-height: 1.8;
	margin: 0 0 20px;
}
.hl-schedule-rows strong { color: var(--hl-heading); }

/* =====================================================================
   8. Single article — /weekly-watch/<slug>/ (brief §5.4)
   ===================================================================== */
.single-post .site-main .entry-content-wrap,
.single-post .site-main .entry-header {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}
.single-post .entry-header h1.entry-title {
	font-size: 44px;
	line-height: 1.2;
	color: var(--hl-heading);
}
.single-post .entry-meta,
.single-post .entry-meta a {
	color: var(--hl-muted);
}
.single-post .post-thumbnail img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 6px;
}
.single-post .entry-content {
	font-size: 18px;
	line-height: 1.6;
	color: var(--hl-body);
}
.single-post .entry-content a { color: var(--hl-primary); }
.single-post .entry-content a:hover { color: var(--hl-primary-hover); }
/* Companion-video slot appended via the_content filter (functions.php) */
.hl-companion-video {
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--hl-border);
}

/* =====================================================================
   9. Posts archive — /weekly-watch/ (brief §5.5)
   Set Customizer → Posts → Archive columns to 3; CSS themes the grid
   and enforces the 3 / 2 / 1 breakpoints.
   ===================================================================== */
.blog .site-main .grid-cols,
.archive .site-main .grid-cols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
@media (max-width: 1024px) {
	.blog .site-main .grid-cols,
	.archive .site-main .grid-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 719px) {
	.blog .site-main .grid-cols,
	.archive .site-main .grid-cols { grid-template-columns: 1fr; }
}
.blog .site-main article.loop-entry,
.archive .site-main article.loop-entry {
	background: var(--hl-surface-1);
	border: 1px solid var(--hl-border);
	border-radius: 6px;
	overflow: hidden;
	transition: background-color 0.15s ease;
}
.blog .site-main article.loop-entry:hover,
.archive .site-main article.loop-entry:hover {
	background: var(--hl-surface-2);
}
.loop-entry .post-thumbnail img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	width: 100%;
	display: block;
}
.loop-entry .entry-content-wrap { padding: 16px 18px 18px; }
.loop-entry .entry-meta,
.loop-entry .entry-meta a {
	color: var(--hl-primary);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.loop-entry h2.entry-title,
.loop-entry h2.entry-title a {
	color: var(--hl-heading);
	font-size: 20px;
	line-height: 1.35;
	text-decoration: none;
}
.loop-entry h2.entry-title a:hover { color: var(--hl-primary); }
.loop-entry .entry-summary {
	color: var(--hl-body);
	font-size: 16px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* =====================================================================
   10. Misc
   ===================================================================== */
/* Keyboard focus visibility on dark (don't strip parent outlines) */
.hl-card:focus-visible,
.hl-btn:focus-visible,
.main-navigation a:focus-visible {
	outline: 2px solid var(--hl-primary-hover);
	outline-offset: 2px;
}
/* Breaking-news stub note styling (visible only until RSS Aggregator lands) */
.hl-stub-note {
	border: 1px dashed var(--hl-border);
	border-radius: 6px;
	color: var(--hl-muted);
	font-size: 14px;
	font-style: italic;
	padding: 18px;
	text-align: center;
}