@charset "UTF-8";

/* CSS Document */

/*
Theme Name: Middle Peninsula Planning District Commission
Theme URI: https://mppdc.org/
Author: Consociate
Author URI: consociate.marketing
Text Domain: mppdc
*/

/* GENERAL 
#################################################### */

html, body {
  overflow-x: hidden;
}

body { font-family: "montserrat", sans-serif; font-weight: 500; font-style: normal; font-size: 18px }

h1, h2 { font-family: "trajan-pro-3", serif; font-weight: 700; color: #015697;
	line-height: 1.25em; margin-bottom: 1.25rem }
h3, h4, h5, h6 { font-family: "montserrat", sans-serif; font-weight: 700; color: #015697;
	line-height: 1.25em; margin-bottom: 1.25rem }
h1 { font-size: 60px }
h2 { font-size: 50px }
h3 { font-size: 36px }
h4 { font-size: 32px }
h5 { font-size: 28px }
h6 { font-size: 22px }

.left { text-align: left }
.right { text-align: right }
.center { text-align: center }

.light { font-weight: 300 }
.norm { font-weight: 400 }
.medium { font-weight: 500 }
b, strong, .bold { font-weight: 700; }

.caps { text-transform: uppercase }
.small, small { }

.slab { font-family: "roboto-slab", serif; font-weight: 400; }
.sans { font-family: "source-sans-pro", sans-serif; font-weight: 400 }
.semi { font-family: "source-sans-pro", sans-serif; font-weight: 600 }

.txt-green, .txt-green a { color: #429547 }
.txt-blue { color: #015697 }
.txt-white { color: #fff }

.bg-blue { background-color: #015697 }

/* Header */

.cap { width: 100%; height: 47px; position: absolute; z-index: 5 }

#header { background-color: #015697; border-top: 10px solid #429547 }
#header .cap { background: url("images/bg-header-curve-blue.svg") center top no-repeat; bottom: 15px }
#header .icon { width: 500px; height: auto; position: absolute; bottom: 35px; right: -25px; z-index: 10 } 

/* Nav */

.navbar .container-fluid { padding: 25px 0 0 5% } 
.navbar .logo { background: url(/wp-content/themes/mppdc/images/logo-mppdc-white-500.webp) center center no-repeat; width: 200px; height: 100px; background-size: contain }
.home .navbar .logo { background: url(/wp-content/themes/mppdc/images/logo-mppdc-white-500.webp) center center no-repeat; width: 200px; height: 100px; background-size: contain }

.end-cap { background: url("images/bg-navbar-blue-cap.webp") center center no-repeat; width: 134px; height: 73px;
	position: absolute; left: -134px; top: 0; text-indent: 30px } 
.end-cap a { color: #015697 } 
.end-cap a:hover { color: #429547 }

.navbar-nav { background: #015697; padding: 15px 35px; position: relative;
	box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px; }
.nav-link { color: #fff; font-weight: 700; text-transform: uppercase }
.nav-link:hover { color: #1F9156 !important }
.navbar-expand-lg .navbar-nav .nav-link { margin-right: 25px; margin-left: 25px; padding-right: 0; padding-left: 0 }
.navbar-nav .nav-link.active { color: #fff; border-bottom: 2px solid #429547; padding-bottom: 0 }

.dropdown-item { color: #015697; font-weight: 700 }
.dropdown-item:hover { background-color: #015697 ; color: #fff }
.dropdown-item.active { background-color: #429547 }

/* Home Sections */

#programs { background: #015697; background: linear-gradient(180deg, rgba(1, 86, 151, 1) 0%, rgba(1, 64, 112, 1) 100%);
	padding-top: 100px; padding-bottom: 25px; position: relative; z-index: 999 }
#programs .wrap { position: relative; border-bottom: 10px solid #429547 }
#programs span, 
	#programs .wrap div { position: absolute; bottom: 15px; right: 25px; z-index: 15; font-size: 25px; font-weight: 700; text-align: right; 
		text-shadow:  1px 1px 1px rgba(0,0,0,.50) }
#programs .wrap a { color: #fff; font-weight: 400 }
#programs .wrap a:hover {  }
#programs .wrap img { position: absolute; top: 0; z-index: 10 }
#programs .wrap a img:hover { transform: translateY(-7px); opacity: .8 }

#programs .row.fl-right { padding-left: 50px; margin-bottom: 35px }
#programs .row.fl-right>* { padding-left: 15px; padding-right: 0 }
#programs .row.fl-left { padding-right: 50px; margin-bottom: 35px }
#programs .row.fl-left>* { padding-left: 0; padding-right: 15px }
#programs .label { margin-right: -25px; margin-bottom: 25px }

#events { background: #014070; background: linear-gradient(180deg, rgba(1, 64, 112, 1) 0%, rgba(1, 43, 76, 1) 100%);
	padding-top: 0; padding-bottom: 150px; color: #000; }
#events img { border-bottom: 10px solid #015697; padding-bottom: 1px; }
#events .title { font-size: 35px; font-weight: 700 }
#events img.boat { width: 700px; height: auto; margin-bottom: -40px; margin-left: -100px; border: 0; display: block }
#events img:hover { opacity: 1 }

#news { background: #fff url("images/bg-fade-marsh-grass.jpg") center center no-repeat; background-size: cover; 
	margin-top: -200px; padding-top: 500px; padding-bottom: 200px; }
#news .title { font-size: 35px; font-weight: 700 }

footer { position: relative; margin-top: -65px; text-align: center; color: #fff }
footer .cap { background: url("images/bg-footer-curve-green.svg") center top no-repeat; top: -47px }
footer img { width: 350px }
footer i { font-size: 25px; margin: 0 10px } /* FA icons */
footer .copyright { margin-top: 25px }
footer a { color: #003a67 }
footer a:hover { color: #015697 }
.bg { background: #429547; background: linear-gradient(180deg, rgba(66, 149, 71, 1) 35%, rgba(30, 114, 116, 1) 100%);
	padding-top: 75px; padding-bottom: 100px; border-bottom: 10px solid #015697 }

.bordered i { font-size: 50px; vertical-align: top; margin: 0 10px; }

/* Pages */

.curve { background: url("/wp-content/themes/mppdc/images/bg-main-curve-white.svg") center top no-repeat; width: 100%; height: 50px; margin-top: -48px; position: relative; z-index: 25; background-size: cover }

#main { padding-top: 75px; padding-bottom: 150px }

#page-header { height: 500px; padding-top: 100px; position: relative }
#page-header .title { color: #fff; position: absolute; bottom: 75px; left: 75px; font-size: 50px; font-weight: 700 }

/* EVENTS */

.tribe-events-before-html { font-weight: 700; font-size: 34px; margin-bottom: 25px !important; text-align: center }

/* BLOG */

.pagination {
	margin-top: 40px;
	text-align: center;
}

.pagination .page-numbers {
	display: inline-block;
	margin: 0 4px;
	padding: 8px 14px;
	background: #015697;
	color: #000;
	text-decoration: none;
}

.pagination .page-numbers.current {
	background: #000;
	color: #fff;
}

/*
####################################################
C O M P O N E N T S
####################################################
*/

/* IMAGES */

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

.rotate { border: 10px solid #fff; rotate: 5deg;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px !important; }


/* LINKS */

a { text-decoration: none; transition: 200ms; font-weight: 700; color: #015697 }
a:hover { color: #429547 }

a img { transition: 200ms }
a img:hover { opacity: .8 }

/* BUTTONS */

.btn { padding: 12px 20px 10px 20px; background: #429547; border: 2px solid #429547; color: #fff; 
	text-transform: uppercase; font-weight: 700 }
.btn:hover { background: #015697; color: #fff }

.btn-blue { background: #015697; color: #015697 }

.btn-border { border: 2px solid #015697; background: #fff; color: #015697 }

.wp-block-button__link { background-color: #429547; color: #fff; font-weight: 700; font-size: 18px; text-transform: uppercase;
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;  }
.wp-block-button__link:hover { background-color: #2C7931 !important; color: #fff !important; text-decoration: none }


/* Shadows */

.shadowed { box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px !important; }

.shadow-text { text-shadow: -1px -1px 1px #fff, 1px 1px 1px rgba(0,0,0,.50) }

/* Spacing */

.max-800, .max-1000, .max-1200, .max-w { margin-left: auto; margin-right: auto }
.max-800 { max-width: 800px }
.max-1000 { max-width: 1000px }
.max-1200 { max-width: 1000px }

.mar-0 { margin: 0 }
.mar-btm-0 { margin-bottom: 0 !important }
.mar-btm-25 { margin-bottom: 25px }
.mar-top-0 { margin-top: 0 !important }
.mar-top-25 { margin-top: 25px }

.flush { padding-left: 0; padding-right: 0 }

/*
####################################################
E X T R A S
####################################################
*/

/* Anchor scroll sticky menu offset */
html {
  scroll-padding-top: 200px;
}

/* WP admin bar offset */
body.admin-bar .navbar {
    margin-top: 32px;
}

/* Nav scroll */

.navbar-fixed-top.scrolled .logo {
  width: 100px;
  transition: width 200ms ease
}
.navbar-fixed-top.scrolled .container-fluid { 
  padding: 0 0 0 5%;
  transition: padding 200ms ease
}
.navbar-fixed-top.scrolled  {
  background: #429547;
  transition: background 200ms ease
}
.navbar-fixed-top.scrolled  {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  transition: box-shadow 200ms ease
}
.home .navbar.navbar-fixed-top.scrolled .logo { 
	background: url(/wp-content/themes/mppdc/images/logo-mppdc-white-500.webp) center center no-repeat; width: 150px; height: 100px; background-size: contain;
	transition: background 200ms ease
}

/* Full-width in WP Block Editor (Cover block) */
.alignfull {
    width:  100vw;
    max-width:  100vw;
    margin-left:  calc(50% - 50vw);
}
.wp-block-cover.alignfull {
    padding-top: 100px; padding-bottom: 100px; margin-top: 50px; margin-bottom: 75px
}

.wp-block-cover__inner-container { max-width: 1200px }

#XXX { overflow-x: hidden } /* Fix for PC horizontal scroll bars with .alignfull */

/* Image Wraps */

.wrap, .ecs-event { height: 325px }

.wrap img,
.ecs-event img { 
	object-fit: cover;
    width: 100%;
    height: 100% !important;
}

.ecs-event a { height: 325px }

/* Nav dropdown on hover */
.dropdown:hover>.dropdown-menu {
  display: block;
}

.dropdown>.dropdown-toggle:active {
  /*Without this, clicking will make it sticky*/
    pointer-events: none;
}

/* HEADING LINES */

/* under + left */
.bordered { position: relative; display: inline-block; margin-bottom: 50px }
.bordered::after { 
	content: "";
	position: absolute;
	bottom: -20px; /* Aligns with bottom of parent */
	left: 0;   /* Starts at left */
	width: 150px;
	height: 8px; /* Adjust thickness as needed */
	background-color: #429547; /* Adjust color */
}

.heading {
  position: relative;
  display: inline-block; /* keeps text width tight */
  text-align: center;
}
.heading::after {
  content: "";
  display: block;
  width: 100px; /* set your line width */
  height: 10px; /* thickness of the line */
  background-color: #D22630; /* color of the line */
  margin: 8px auto 0; /* centers line below text */
}

/* Line centered after text vertically */
.line {
  display:inline-block;
  padding: 10px 10px 15px; /* bottom padding should be higher to make up for pseudo border height */
  background: linear-gradient(90deg, transparent 25%, #fff 25%, #fff 75%, transparent 75%);
  background-size: 100% 5px;
  background-position: 0% 100%;
  background-repeat: no-repeat;
}

/* Line after text Horizontally */
#partners .heading-line { 
  display: flex;
  align-items: center;
  gap: 1em; /* space between text and line */ }
#partners .line { 
  flex-grow: 1;
  height: 10px;
  background-color: #64B9AE; /* line color */ }


/*
####################################################
M E D I A  Q U E R I E S
####################################################
*/

/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 4 breakpoints
*/

/* Custom */
@media (min-width: 1925px) {

}

/* Extra large devices (large desktops, 1200px and up)
 * No media query since this is the default in Bootstrap because it is "mobile first"
 */
@media (min-width: 1400px) {

}

/* Large devices (desktops, 1199px and up) */
@media (max-width: 1399px) {
	
	.end-cap { height: 70px }
	.navbar-expand-lg .navbar-nav .nav-link {  margin-right: 20px; margin-left: 20px; font-size: 16px }
	
}


/* Large devices (desktops, 992px and up) */
@media (max-width: 1199px) {
	
	.navbar-expand-lg .navbar-nav .nav-link { margin-right: 10px; margin-left: 10px; font-size: 14px; }
	
	.end-cap { height: 67px }
	
	#programs span { font-size: 21px }

}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (max-width: 991px) {
	
	.m-hide { display: none }
	.m-show { display: block }
	
	/* Breaks WP BLOCK columns early w/ tweaks */
	.wp-block-columns { display:block } 
	.wp-block-column:nth-child(2n),
		.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:nth-child(2n) { margin-left: 0 }
	
	/*
	.offcanvas { background: rgb(10,99,153);
		background: linear-gradient(166deg, rgba(10,99,153,1) 0%, rgba(108,201,244,1) 30%, rgba(0,147,216,1) 100%); }
	.offcanvas-title { color: #fff }
	.offcanvas-title img { max-width: 200px }
	.navbar-expand-lg .navbar-nav .nav-link { color: #0A6399; font-size: 22px; font-weight: 700 }
	.offcanvas .navbar-nav .nav-link.active { border-bottom: 0 }
	*/
	
	.offcanvas { background: linear-gradient(170deg,rgba(66, 149, 71, 0.5) 0%, rgba(1, 86, 151, 0.95) 100%),
    url('/wp-content/uploads/2026/03/pic-midpen-water-beach-1920.jpg');
	  background-size: cover;
	  background-position: center;
	  background-repeat: no-repeat; }
	
	.offcanvas-title img { width: 150px }
	
	h1 { font-size: 50px }
	h2 { font-size: 36px }
	h3 { font-size: 32px }
	h4 { font-size: 28px }
	h5 { font-size: 24px }
	h6 { font-size: 20px }
	
	body { font-size: 16px }
	
	.navbar-toggler { background-color: #0A6399; border-color: #0A6399; color: #fff; font-size: 25px }
	.navbar-nav .nav-link.active { border-bottom: 0; padding-bottom: 10px }
	
	.navbar .container-fluid { padding: 0 25px; }
	
	#header .icon { right: 0 } 
	
	#programs .wrap { margin-bottom: 25px }
	
	.ecs-event  { width: 100% !important; margin-bottom: 25px }
	.ecs-event .duration { color: #429547 !important }
	.ecs-event { height: auto }
	
	#events { color: #fff; padding-bottom: 75px; margin-bottom: 75px; }
	
	#content .docs .wp-block-image img { max-width: 200px }
	
	#news { margin-top: 0; padding-top: 0; padding-bottom: 100px }

	#events .duration { margin-bottom: 35px }
	#events .ecs-event-list { padding-left: 0 }
	
	.end-cap { display: none }
	
	.navbar-nav { background: none; box-shadow: none; padding: 15px; }
	
	#programs { padding-top: 25px }
	#programs .row.fl-right { padding-left: 0 }
	#programs .row.fl-left { padding-right: 0 }
	
	.navbar-fixed-top.scrolled .container-fluid { padding: 0 15px }
	
	.social { margin-bottom: 25px }
	
	.bg { padding-top: 0; padding-bottom: 50px }
	
	.dropdown-item { font-size: 14px }
	
	#main { padding-top: 25px }
	
	#page-header { height: 400px }
	#page-header .title { left: 15px; font-size: 30px }
	
	#post { padding-bottom: 25px; margin-bottom: 15px; }
	
	.wp-block-cover.alignfull { padding-top: 75px; padding-bottom: 50px }
	
	/* Events */
	.tribe-events .tribe-events-l-container { padding-bottom: 0; padding-top: 0 }
	.tribe-events-before-html { font-size: 26px; line-height: 1.25em }
	

}

/* Small devices (landscape phones, 544px and up) */
@media (max-width: 767px) {
	
	.reverse-mobile { flex-direction: column-reverse }
	
	#programs span { font-size: 25px }
	
	.feat.rotate { margin-top: 50px }
	
	.btn { margin-bottom: 25px }
}

/* Extra small devices (portrait phones, less than 544px) */
@media (max-width: 543px) {

}

/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Custom media queries
*/

/* Set width to make card deck cards 100% width */
@media (max-width: 950px) {

}