/*
	Theme Name:   broad_leaf-vcc
	Template:     broad_leaf-14r1
	Version:      1.0

	revisions:
	1.0 - finalized design and build, released 2026-08-21	
	0.3 - initial design and build, not yet released	
*/
/*
	colors:
	#000 - black
	#004400 - dark green
	#333333 - dark gray
	#3D3D3D - medium gray
	#3f3f3f - light gray
	#444 - very light gray
	#484848 - slightly darker than very light gray
	#4f4f4f - even darker than very light gray
	#555 - dark gray
	#5F684B - olive green
	#616263 - dark gray
	#626C4A - forest green
	#666666 - medium gray
	#73804E - light green
	#858585 - light gray
	#95a566 - light green
	#999 - light gray
	#aaa - light gray
	#ADBE6E - light green
	#B2C977 - light green
	#bbb - light gray
	#BFBFBF - light gray
	#ccc - light gray
	#ddd - light gray
	#e3e3e3 - light gray
	#e6e6e6 - light gray
	#e8e8e8 - light gray
	#eeffbb - light green
	#f0f0f0 - light gray
	#fe3336 - 
	#fff - white
	#ffffff - white

*/

/* apply box-sizing: border-box globally  */
/* *, *::before, *::after { */
/* box-sizing: border-box; */
/* } */
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
	font-family: inherit;
	font-size: inherit;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
	scroll-margin-block: 5ex;
}

img,
video,
iframe {
	max-width: 100%;
	height: auto;
}

.rss-box {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 1.0rem;
}
/************************************************************************* */
/************************************************************************* */

/* 
 * streaming images 
 *****************************************************************************/
#streamingimages {
	clear: unset;
}

#streamingimages {
  margin: 10px 0;
  text-align: left;
}

.streaming-row {
  display: flex;
  align-items: center; /* vertical centering */
  gap: 5px;
}

.streaming-row img {
  display: block;
  width: auto;
  height: 41px;
  flex: 0 0 auto;
}

.streaming-row p {
  margin: 0;
  flex: 1;
}

.dark-rule {
  height: 10px;
  border: 0;
  background: #333333;
}

.light-rule {
  height: 1px;
  border: 0;
  background: #858585;
}

/* 
 * hamburger menu 
 *****************************************************************************/
.menu-toggle {
	display: none;
	/* Hide button on desktop */
	background: none;
	/* --- Border Properties --- */
	border: 2px solid #95A566;
	/* Thickness, style, and color */
	border-radius: 8px;
	/* Use 50% for a perfect circle, 0 for sharp corners */
	transition: all 0.3s ease;
	/* Smooth hover transition */
	cursor: pointer;
	padding: 10px;
	margin: 12px;
}

.menu-toggle .bar {
	display: block;
	width: 25px;
	height: 3px;
	background-color: #95A566;
	/* Change to match your header color */
	border-bottom: 1px solid #e5e7eb;
	margin: 5px 0;
	transition: 0.3s;
}

/* 
 * float right for slides on larger screens 
 *****************************************************************************/
div.bss-slides.polaroids {
	float: right;
	/* Ensure slides float right on larger screens */
}

/* 
 * two-column layout for news and events 
 *****************************************************************************/
.newscols {
	display: grid;
	grid-auto-flow: column;
	/* Fills columns first */
	grid-template-columns: repeat(2, 50%);
	/* 2 columns */
	grid-template-rows: repeat(3, auto);
	/* 3 rows */
	column-gap: 10px;
}

/* 
 * bottom three-column layout for news, events, and social media
 *****************************************************************************/
.bottom-container {
	/* padding-left: 10vw; */
	display: grid;
	grid-template-columns: 11fr 15fr 15fr;
	/* margin-left: 22.3vw; */
	gap: 20px;
}
#bottomcol1 {
	padding-left: 0;
	width: 18em;
}
#bottomcolright {
	width: 25em;
}
body #bottomwrap {
	padding-left: 0;
}
#bottomwide {
	max-width: 65em;
}
.bottom-column {
	border-radius: 8px;
}

/* Optional styling for visibility */
.bottom-item {
	border-radius: 8px;
	text-align: left;
}

.bottom-column li a span {
	display: none;
}

.bottom-column ul {
	display: inline;
}

.bottom-column li a:hover span {
	display: inline;
}

.event-column {
	background: url("assets/images/li_bottom.gif") no-repeat;
	padding-left: 1.3em;
	background-position: 0 0.4em;
	list-style-type: none;
}

.event-column ul li {
	padding-left: 1.3em;
	list-style-type: none;
}

.bottom-column ul li {
	background: url("assets/images/li_bottom.gif") no-repeat;
	padding-left: 1.3em;
	background-position: 0 0.4em;
	list-style-type: none;
}

/* removes the bullet points from nested lists in the news and events columns */
.entry ol li li {
	list-style-type: none;
}
#evtcal p, li {
	list-style-type: none;
}

/* 
 * hamburger menu for mobile devices
 *****************************************************************************/
.hamburger-container {
	width: 100%;
}

.hamburger-navigation {
	display: none;
	align-items: center;
	gap: 1rem;
	float: right;
}

.hamburger-navigation ul {
	display: flex;
	gap: 1rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.hamburger-navigation a {
	padding: 0.5rem 0.75rem;
	border-radius: 0.5rem;
}

.hamburger-navigation a:hover,
.hamburger-navigation a:focus {
	background: var(--muted);
}

.menu-toggle {
	display: none;
	border: 1px solid #d1d5db;
	background: #fff;
	padding: 0.65rem 0.8rem;
	border-radius: 0.5rem;
	cursor: pointer;
}

.menu-toggle span {
	display: block;
	width: 24px;
	height: 2px;
	background: #111827;
	margin: 5px 0;
}

/* working with date alignment */
.events li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.events .date {
  flex: 0 0 3rem; /* fixed date column */
  white-space: nowrap;
}

.events li a {
  flex: 1 1 auto;
  min-width: 0;   /* allows the title to wrap */
}
/* 
 * for mobile devices a different footer layout is used, with stacked blocks and centered content  
 *****************************************************************************/
/* Container Background */
#footer {
	background-color: #95A566;
	padding: 20px 0;
	width: 100%;
}

/* Base Desktop Layout */
.footer-table {
	width: 100%;
	max-width: 1120px;
	/* Replaces 70em safely */
	margin: 0 auto;
	border-collapse: collapse;
}

.footer-text-cell {
	text-align: left;
	vertical-align: bottom;
	padding: 10px;
}

.footer-logo-cell {
	text-align: right;
	vertical-align: middle;
	padding: 10px;
}

.footer-logo-cell img {
	max-width: 100%;
	height: auto;
	display: inline-block;
}

/*
 * Advanced Sermon Styles
 *****************************************************************************/
.sermon-wrapper {
	margin-top: -23em;
}

.single-sermons .sermon-audio-player-wrapper {
	margin-top: 2em;
}

.mec-single-event .mec-event-content {
	margin-top: -3em;
	padding-top: 0;	
}

/* .mejs-container { */
    /* width: 100% !important; */
    /* min-width: 100% !important; */
/* } */
/*
 * ICS Calendar Styles
 *****************************************************************************/
/* Hide event descriptions */
.ics-calendar .eventdesc {
	display: none !important;
}

/* Hide event times and all-day labels */
.ics-calendar .hide_times,
.ics-calendar .end_time,
.fc-event-time {
	display: none !important;
}

.all-day-indicator {
	display: none;
}

.entry .ics-calendar ul li {
	background: none;
	padding-left: 0;
	margin-left: 0;
}

/* Change background color and text style for today's date cell */
.ics-calendar .ics-calendar-month-grid .today .no_phone {
	color: #000 !important;
	background-color: #fff !important;
	border: 2px solid #000 !important;
	/* Bold border emphasis */
}

.ics-calendar .ics-calendar-event-date,
.ics-calendar .day {
	display: none;
}

.phone_only {
	display: none;
}

.no_phone {
	color: #eeffbb;
}
.ics-calendar-month-grid  {
		background-color: #ffffff !important; 
}
.ics-calendar-month-grid th {
	color: #eeffbb;
	text-align: center;
}
/* .ics-calendar-month-grid, */
.ics-calendar-month-grid th,
.ics-calendar-month-grid td {
    /* border: 1px solid #ffffff !important; */
		background-color: #333333 !important; 
		font-size: 0.9em;
}

.ics-calendar-month-grid td {
    /* border: 1px solid #ffffff !important; */
		background-color: #333333 !important; 
}

.ics-calendar-month-grid td.has_events {
	background-color: #333333 !important;
	/* Dark gray background for days with events */
	/* border: 1px  solid #ffffff !important; */
	/* White border for days with events */
}

.ics-calendar-month-grid .ics-calendar-day .ics-calendar-day-header .ics-calendar-day-number {
	color: #eeffbb !important;
	/* Replace with your color hex code */
}

/* Container for the single day */
.ics-calendar-list .ics-calendar-day {
	background: #ffffff;
	border-radius: 8px;
	padding: 20px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	margin-bottom: 15px;
}

/* Day Header (e.g., "Monday, August 10") */
.ics-calendar-list .ics-calendar-day .ics-calendar-list-wrapper h3 {
	font-size: 1.2rem;
	color: #111111;
	border-bottom: 2px solid #f0f0f0;
	padding-bottom: 8px;
	margin-top: 0;
}

h4.ics-calendar-date {
	display: none !important;
}

.ics-calendar-list-wrapper .ics-calendar-date h4 {
	display: none !important;
}

.ics-calendar-list-wrapper span.title {
	color: #eeffbb;
	font-size: 1.1rem;
}

/* Directs the calendar grid to only render the first anchor item per event cell */
.ics-calendar-month-grid .event a + a {
    display: none !important;
}

.title .has_desc {
	display: none !important;
}
div.descloc span.title {
	display: none !important;
}
/* 
 * @media (max-width) media query applies styles only when the browser window or 
 * device viewport is equal to or smaller than a specified width 
 * ***************************************************************************/
/* Mobile Phones and Portrait Tablets */
@media screen and (max-width: 820px) {
	.bottom-container {
		grid-template-columns: 22vw 23vw 40vw;
		/* grid-template-columns: 1fr; */
		/* One single full-width column */
		/* padding-left: 4.1em; */
		/* margin-left: 4.0em; */
		/* padding-right: 3em; */
	}
}

/* Mobile Breakpoint */
@media screen and (max-width: 768px) {

	/* Force table layers to act like stacked blocks */
	.footer-table,
	.footer-row,
	.footer-text-cell,
	.footer-logo-cell {
		display: block;
		width: 100% !important;
		box-sizing: border-box;
	}

	/* Center all content on mobile devices */
	.footer-text-cell,
	.footer-logo-cell {
		text-align: center;
		padding: 15px 20px;
	}

	/* Space out the text block from the logo below it */
	.footer-text-cell {
		padding-bottom: 5px;
	}
}

/* Mobile phones (max-width: 480px)
 * ***************************************************************************/
@media screen and (max-width: 480px) {

	/* Typography Sizes */
	h1,
	.cg-h1 {
		font-size: clamp(1.80rem, calc(1.636rem + 0.818vw), 2.25rem);
	}

	h2,
	.cg-h2 {
		font-size: clamp(1.50rem, calc(1.364rem + 0.682vw), 1.88rem);
	}

	h3,
	.cg-h3 {
		font-size: clamp(1.40rem, calc(1.273rem + 0.636vw), 1.75rem);
	}

	h4,
	.cg-h4 {
		font-size: clamp(1.30rem, calc(1.182rem + 0.591vw), 1.63rem);
	}

	h5,
	.cg-h5 {
		font-size: clamp(1.20rem, calc(1.091rem + 0.545vw), 1.50rem);
	}

	h6,
	.cg-h6 {
		font-size: clamp(1.10rem, calc(1.000rem + 0.500vw), 1.38rem);
	}

	body {
		/* font-size: 62.5%; resets to 10px */
		font-size: clamp(1.00rem, calc(0.909rem + 0.455vw), 1.25rem);
	}

	#page {
		width: 100% !important;
		position: relative;
		padding-left: 2rem;
	}

	#header {
		position: relative;
		display: grid;
		/* width: 100%; */
		margin-left: -2em;
		justify-content: space-between;
		width: 370px;
		height: 300px;
		padding-left: 2rem;
	}

	.content {
		margin-top: -10em !important;
		max-width: 80vw;
		min-width: unset;
		padding-top: 120px !important;
		margin-left: 0 !important;
		position: relative;
		z-index: 1;
		/* Ensure content is above the header */
	}

	.content h1 {
		font-size: 1.5rem;
		/* Adjust as needed */
		margin-top: 0;
		width: 80vw;
	}

	.bottom-container {
		display: grid;
		grid-template-columns: 1fr;
		gap: 20px;
		margin-left: 5vw;
		padding-left: 10vw;
	}

	.menu-toggle {
		/* Position button at the top right */
		position: absolute;
		top: 10px;
		right: 10px;
		/* Show button on mobile */
		display: block;
		margin: 10px;
	}

	/* Hide menu items on mobile until toggled */
	#navigation {
		display: none !important;
		/* clear: both; */
		width: 200px;
		padding: 0;
		margin: 0;
		list-style: none;
		z-index: 1000;
		/* Ensure the menu is above other content */
	}

	/* Show menu items vertically when parent is toggled */
	#header.toggled #navigation {
		display: block !important;
	}

	#navigation li {
		display: block;
		width: 90%;
		float: right;
		/* Resets desktop floating elements */
		background: #EEFFBA;
	}

	#navigation li a {
		display: block;
		padding: 10px 30px;
		border-bottom: 1px solid #fff;
		text-align: left;
	}

	#bottomwrap #bottomcol1,
	#bottomwrap #bottomcol2,
	#bottomwrap #bottomcolright {
		max-width: 80vw;
		margin-left: 2em;
		float: none;
	}

	#bottomwide {
		max-width: 80vw;
		padding-left: 2em;
		float: none;
	}

	.bottom-container {
		grid-template-columns: 1fr;
		/* One single full-width column */
		padding-left: 2em;
		padding-right: 3em;
	}

	.newscols {
		display: block;
		width: 90vw;
	}
	.newscols a {
		display: grid;
		grid-template-columns: 4.75rem minmax(0, 1fr);
		column-gap: 0.5rem;
		align-items: start;
	}

	.newscols .date {
		white-space: nowrap;
	}

	p.homepara {
		font-size: 1rem;
		/* Adjust as needed */
		width: 80vw;
		line-height: normal;
		/* Adjust line height for readability */
	}

	p.homepara strong {
		font-size: 1rem;
		color: #eeffbb;
	}

	p,
	li,
	.details {
		font-size: 1.0rem;
	}

	.events li {
		display: grid;
		gap: 0.5rem;
		grid-template-columns: 3.75rem minmax(0, 1fr);
	}
	.bss-slides {
		width: 80vw !important;
		/* Ensure slides take full width */
		float: none !important;
		/* Prevent slides from exceeding container */
	}

	.order-container {
		display: grid;
		/* Required to make the order property work */
		grid-template-columns: 2fr;
		/* Two column layout */
	}

	.order-1 {
		order: 2;
		/* Moves the first HTML element to be second */
	}

	.order-2 {
		order: 1;
		/* Moves the second HTML element to the be first */
	}

	.order-3 {
		order: 3;
		/* Moves the first HTML element to the end */
	}

	/* Footer Background */
	#footer {
		background-color: #95A566;
		padding: 20px 10px;
		width: 100%;
	}

	/* Base Desktop Layout */
	.footer-table {
		width: 100%;
		max-width: 1120px;
		/* Replaces 70em safely */
		margin: 0 auto;
		border-collapse: collapse;
	}

	.footer-text-cell {
		text-align: left;
		vertical-align: bottom;
		padding: 10px;
	}

	.footer-logo-cell {
		text-align: right;
		vertical-align: middle;
		padding: 10px;
	}

	.footer-logo-cell img {
		max-width: 100%;
		height: auto;
		display: inline-block;
	}
	/*
	* Advanced Sermon Styles
	*****************************************************************************/
	.sermon-wrapper {
		margin-top: 0;
	}
}


/* Force hamburger menu on mobile landscape screens */
@media screen and (orientation: landscape) and (pointer: coarse) and (max-width: 950px) {

 	 /* 1. FORCE THE HAMBURGER BUTTON TO SHOW */
	.menu-toggle {
		/* Position button at the top right */
		position: absolute;
		top: 10px;
		right: 90px;
		/* Show button on mobile */
		display: block;
		margin: 10px;
	}

	/* Hide menu items on mobile until toggled */
	#navigation {
		display: none !important;
		/* clear: both; */
		width: 200px;
		padding: 0;
		margin: 0;
		list-style: none;
		z-index: 1000;
		/* Ensure the menu is above other content */
	}

	/* Show menu items vertically when parent is toggled */
	#header.toggled #navigation {
		display: block !important;
	}

	#navigation li {
		display: block;
		width: 90%;
		float: right;
		/* Resets desktop floating elements */
		background: #EEFFBA;
	}

	#navigation li a {
		display: block;
		padding: 10px 30px;
		border-bottom: 1px solid #fff;
		text-align: left;
	}
	.bottom-container {
		grid-template-columns: 22vw 23vw 40vw;
	}
	.events li {
		display: flex;
		align-items: flex-start;
		gap: 0.5rem;
	}

}


@media screen and (max-width: 360px) {
	.menu-toggle {
		right: 40px;
	}
}