/*!
Theme Name: Kadence Child
Theme URI: https://www.kadencewp.com/kadence-theme/
Template: kadence
Author: Kadence WP
Author URI: https://www.kadencewp.com/
Description: A child theme for the Kadence Theme.
Version: 1.0.0
License: GNU General Public License v3.0 (or later)
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: kadence-child
*/

/* ==========================================================================
   TGG child theme styles — merged from style.css + Additional CSS, 2026-08-28
   Sections:
      1. Fonts
      2. Utility classes
      3. Per-section colors (body background + page-title hero band)
      4. Header & page-title translucent overlays
      5. Page title / hero
      6. Primary nav — per-section menu item colors
      7. Top bar (phone / email / tagline / subscribe)
      8. Layout & containers
      9. Content typography & spacing
     10. Sidebar
     11. Footer
     12. Plugin tweaks (ESSB, Gravity Forms, Facebook feed)
     13. Responsive (all breakpoints)
   ========================================================================== */

/* --------------------------------------------------------------------------
   CATEGORY STYLES
   -------------------------------------------------------------------------- */

article.category-complete .entry-title::after {
	content: "✓ Project Completed";
	display: inline-block;
	vertical-align: middle;
	margin-left: .6em;
	padding: .7em 1em .6em;
	font-size: .45em;
	font-weight: 600;
	letter-spacing: .05em;
	color: #fff;
	background: #238708;
	border-radius: 999px;
	white-space: nowrap;
}

.tgg-completed-cta, .tgg-support-cta {
	border: 2px solid #238708;
	border-radius: 12px;
	padding: 2.5rem;
	margin-top: 3rem;
}

/* --------------------------------------------------------------------------
   PROJECT STATUS PILLS
   Driven by category — assign the category and the pill appears
   beside the post title automatically.
   Category slugs: ongoing-programs / current-projects / past-projects
   -------------------------------------------------------------------------- */

.single-post .category-ongoing-programs .entry-title::after,
.single-post .category-current-projects .entry-title::after,
.single-post .category-past-projects .entry-title::after {
	display: inline-block;
	float: right;
	vertical-align: middle;
	margin-left: 1em;
	margin-top: 10px;
	padding: .7em 1em .6em;
	font-size: .3em;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #fff;
	border-radius: 999px;
	white-space: nowrap;
}

.single-post .category-ongoing-programs .entry-title::after { content: "Ongoing Program";   background-color: #243910; }
.single-post .category-current-projects .entry-title::after { content: "Current Project";   background-color: #a6172e; }
.single-post .category-past-projects .entry-title::after    { content: "Completed Project"; background-color: #A79D81; }

/* Hide placeholder-tagged posts from Kadence post grids & carousels */
ul.kt-post-grid-wrap > li.tag-placeholder {
	display: none !important;
}

/* --------------------------------------------------------------------------
   1. FONTS
   -------------------------------------------------------------------------- */

@font-face {
	font-family: 'Papyrus';
	src: url('/wp-content/uploads/fonts/Papyrus-Regular.woff2') format('woff2');
	font-display: swap;
}


/* --------------------------------------------------------------------------
   2. UTILITY CLASSES
   Add these in a block's Advanced > Additional CSS class(es) field.
   -------------------------------------------------------------------------- */

.nomarginbottom     { margin-bottom: 0; }
.slightmarginbottom { margin-bottom: 8px; }
.nomargintop        { margin-top: 0 !important; }
.slightmargintop    { margin-top: 12px !important; }

.papyrus {
	font-family: 'Papyrus', fantasy !important;
}


/* --------------------------------------------------------------------------
   3. PER-SECTION COLORS
   The section-{slug} body class comes from the body_class filter in
   functions.php (named for each page's top-level ancestor).
   First selector = page background (shows in the outer gutters),
   second = the page-title hero band's own tint.
   -------------------------------------------------------------------------- */

/* Projects — hero uses a lighter shade than the body */
body.section-projects {
	background-color: #141251;
}
.section-projects .page-hero-section .entry-hero-container-inner {
	background-color: #14246d;
}

/* Volunteer */
body.section-volunteer,
.section-volunteer .page-hero-section .entry-hero-container-inner {
	background-color: #836f57;
}

/* Indigenous Messages */
body.section-indigenous-messages,
.section-indigenous-messages .page-hero-section .entry-hero-container-inner {
	background-color: #4d280f;
}

/* Intentions */
body.section-intentions,
.section-intentions .page-hero-section .entry-hero-container-inner {
	background-color: #90862a;
}

/* Media */
body.section-media,
.section-media .page-hero-section .entry-hero-container-inner {
	background-color: #582e4d;
}

/* Donate 
body.section-donate,
.section-donate .page-hero-section .entry-hero-container-inner {
	background-color: #a6172e;
}*/

/* Voices & Events — if these sections still exist.
   NOTE: these were dead code before (a stray ".entry-hero" selector
   fragment was corrupting them); they are LIVE again as of this cleanup. */
body.section-voices {
	background-color: #993400;
}
body.section-events {
	background-color: #e5382a;
}


/* --------------------------------------------------------------------------
   4. HEADER & PAGE-TITLE TRANSLUCENT OVERLAYS
   Black at low opacity so each section's color tints through
   (old site used rgba(0,0,0,0.28) on footer/page-intro).
   -------------------------------------------------------------------------- */

.site-main-header-wrap {
	background-color: rgb(0 0 0 / 13%);
}

.site-header-bottom-section-center {
	background-color: rgb(0 0 0 / 0.5);
}


/* --------------------------------------------------------------------------
   5. PAGE TITLE / HERO
   -------------------------------------------------------------------------- */

.entry-hero .title-align-left {
	padding-left: 30px;
}


/* --------------------------------------------------------------------------
   6. PRIMARY NAV — PER-SECTION MENU ITEM COLORS
   Class names are set per menu item in Appearance > Menus (CSS Classes
   field). Colors are the lighter "hero" shade of each section.
   -------------------------------------------------------------------------- */

#primary-menu li.projects > a {
	text-decoration: none;
}

#primary-menu li.home > a                { background-color: #243910; }
#primary-menu li.projects > a            { background-color: #14246d; }
#primary-menu li.volunteer > a           { background-color: #a18268; }
#primary-menu li.indigenous-messages > a { background-color: #5a2d19; }
#primary-menu li.intentions > a          { background-color: #9f8e3d; }
#primary-menu li.media > a               { background-color: #5e3353; }
#primary-menu li.donate > a              { background-color: #b51633; }


/* --------------------------------------------------------------------------
   7. TOP BAR (phone / email / tagline / subscribe)
   Markup lives in HTML blocks in the header builder's top row.
   -------------------------------------------------------------------------- */

.tgg-topbar {
	display: flex;
	align-items: center;
	gap: .4em;
	font-size: 13px;
	color: white;
}

.tgg-topbar-item {
	display: inline-flex;
	align-items: center;
}

.tgg-topbar-item img {
	padding-right: 5px;
}

.tgg-topbar-icon {
	width: 14px;
	height: 14px;
	color: white !important;
}

.tgg-topbar a {
	color: white;
	text-decoration: none !important;
}

.tgg-topbar a:hover {
	color: white;
}

.tgg-topbar-tagline {
	opacity: .85;
	font-style: italic;
}

.tgg-topbar-subscribe {
	font-size: 13px;
	font-weight: 600;
	color: inherit;
	text-decoration: none;
}

.tgg-topbar-subscribe:hover {
	color: white;
}


/* --------------------------------------------------------------------------
   8. LAYOUT & CONTAINERS
   -------------------------------------------------------------------------- */

/* NOTE: rules in this section carry a "body" prefix on purpose — they
   override Kadence's own layout CSS, and since this file loads earlier
   than Kadence's generated styles, they need the extra specificity.
   Don't remove the prefixes. */

/* White content box over the colored page background
   (also fills the grid gap between content and sidebar) */
body .content-container.site-container {
	background: white;
}

/* Zero out Kadence's contained-layout padding (restored on mobile in §13) */
body .site-container,
body .site-header-row-layout-contained,
body .site-footer-row-layout-contained,
body .entry-hero-layout-contained,
body .alignfull > .wp-block-cover__inner-container,
body .alignwide > .wp-block-cover__inner-container {
	padding: 0;
}

.post-navigation,
.comments-area {
	padding-left: 2em;
	padding-right: 2em;
}

.comments-area {
	padding-bottom: 1em;
}

/* Homepage: content flush to top/bottom */
body.home .entry-content-wrap, body.page-id-2717 .entry-content-wrap, body.page-id-2719 .entry-content-wrap, body.page-id-2723 .entry-content-wrap, body.page-id-2725 .entry-content-wrap, body.page-id-4930 .entry-content-wrap {
	padding-top: 0;
	padding-bottom: 0;
}

/* Archives */
body.archive .content-container {
	padding: 30px;
}

body.archive .entry-content-wrap {
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
}

/* Remove Kadence's boxed-content drop shadow */
body.single .single-entry, body .entry.single-entry {
	box-shadow: none;
}


/* --------------------------------------------------------------------------
   9. CONTENT TYPOGRAPHY & SPACING
   -------------------------------------------------------------------------- */

.single-content h1,
.single-content h2,
.single-content h3,
.single-content h4,
.single-content h5,
.single-content h6 {
	margin: 0 0 12px;
}

/* Image block spacing.
 */
body .single-content figure.wp-block-image {
	margin-bottom: 15px;
}

.single-content figure.wp-block-image {
	margin-bottom: 20px;
}


/* --------------------------------------------------------------------------
   10. SIDEBAR
   -------------------------------------------------------------------------- */

.primary-sidebar h2,
.primary-sidebar h3,
.primary-sidebar h4 {
	margin-bottom: 12px;
}

.primary-sidebar h5,
.primary-sidebar h6 {
	margin-bottom: 0;
}

.primary-sidebar h4 {
	color: #217a14;
}

.primary-sidebar h2,
.primary-sidebar.widget-area .widget-title {
	text-transform: uppercase;
	font-size: 15px;
	color: #b87031;
	font-weight: 700;
}

.primary-sidebar .widget li:not(.kb-table-of-content-list li) {
	line-height: 1.5em;
}

.primary-sidebar .loop-entry .entry-summary p,
.primary-sidebar .loop-entry .entry-summary {
	margin-top: 0;
}

.primary-sidebar .entry-header {
	margin-bottom: 9px;
}

.primary-sidebar ul.kb-posts {
	row-gap: 1rem;
}

.primary-sidebar .menu li a::before {
	content: "›"; /* or ">" */
	margin-right: 0.5em;
	font-weight: bold;
}

.sidebar-postlist p {
	font-size: 15px;
	line-height: 20px;
}


/* --------------------------------------------------------------------------
   11. FOOTER
   -------------------------------------------------------------------------- */

.site-middle-footer-inner-wrap .widget {
	margin-bottom: 0;
}

footer .site-container {
	padding-left: 2rem;
	padding-right: 2rem;
}


/* --------------------------------------------------------------------------
   12. PLUGIN TWEAKS
   -------------------------------------------------------------------------- */

/* Easy Social Share Buttons — center the button row */
.essb_links {
	text-align: center !important;
	display: flex;
	justify-content: center;
}

/* Gravity Forms */
.gform_required_legend {
	font-size: 15px;
	padding-bottom: 20px !important;
}

.gform_description {
	margin-bottom: 1em !important;
}

/* Custom Facebook Feed */
#cff .cff-load-more,
#cff .cff-no-more-posts {
	width: auto !important;
	background-color: #000;
	padding: 5px 15px;
	max-width: 150px;
	float: none !important;
	margin: 0 auto;
}

/* --------------------------------------------------------------------------
   12b: Single post featured image — forced 21:9 cinematic crop
   Requires Customizer single-post image ratio = Inherit
   -------------------------------------------------------------------------- */
body.single-post .article-post-thumbnail img.wp-post-image {
	width: 100%;
	aspect-ratio: 21 / 9;   /* 3 / 1 for even shorter */
	height: auto;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   12c: Remove vertical padding from donate page.
   -------------------------------------------------------------------------- */
body.page-id-98 .entry-content-wrap, body.page-id-8111 .entry-content-wrap {
	padding-top: 0;
	padding-bottom: 0;
}



/* --------------------------------------------------------------------------
   13. RESPONSIVE (all breakpoints)
   -------------------------------------------------------------------------- */

@media screen and (min-width: 0) {
	.kb-posts.kb-posts-style-unboxed.grid-lg-col-1.item-image-style-beside article.loop-entry {
		grid-gap: 1rem !important;
	}
}

@media screen and (min-width: 1025px) {
	.has-sidebar .content-container {
		grid-gap: 1.5em;
	}
}

@media (max-width: 1024px) {
	.content-area {
		margin-bottom: 0;
	}

	.primary-sidebar {
		padding: 20px;
	}
}

@media (max-width: 780px) {
	/* Hide top-bar tagline on small screens so it doesn't wrap */
	.tgg-topbar-tagline {
		display: none;
	}
}

@media screen and (max-width: 767px) {
	/* Restore contained-layout padding zeroed in §8
	   (body prefixes must match §8's so this later rule wins) */
	body .site-container,
	body .site-header-row-layout-contained,
	body .site-footer-row-layout-contained,
	body .entry-hero-layout-contained,
	body .alignfull > .wp-block-cover__inner-container,
	body .alignwide > .wp-block-cover__inner-container {
		padding: inherit;
	}

	body .content-container.site-container {
		margin-left: 0;
		margin-right: 0;
	}

	body .entry-content-wrap {
		padding: 1rem 2rem;
	}
}