/*
Theme Name:         Siena House Custom Theme
Theme URI:          https://sienahouseshelter.org/
Description:        A proprietary, custom-built theme designed exclusively for the Siena House Shelter of NYC. Unauthorized distribution or copying is prohibited.
Version:            1.0.0
Author:             Stig Greve
Author URI:         https://hirestig.com/
Text Domain:        siena-house
License:            Proprietary / All Rights Reserved
*/

/* Global */
	
	:root {
	--white: #fff;
	--offwhite: #f5f5f5;
	--yellow: #f8d87b;
	--green: #95d6c4;
	--blue: #65a6d5;
	--darkgreen: #1c332b;
	--darkyellow: #f4c455;
	}
	body{
		background: var(--offwhite);
		color: var(--white);
		font-family: "tenon", sans-serif;
		font-weight: 400;
		font-style: normal;
		font-size: clamp(1rem, 0.8rem + 0.5vw, 2rem);
		line-height: 1.4em;
		margin: 0;
		padding: 0;
	}
	.webp body {
		background: var(--offwhite);
	}
	.no-webp body,
	.no-js body {
		background: var(--offwhite);
	}
	p{
		margin: 0 0 clamp(1rem, 1.56vw, 2rem);
	}
	strong, b{
		font-weight: 600;
	}
	em, i{
		font-style: italic;
	}
	.center{
		text-align: center;
	}
	::selection {
		background-color: var(--darkgreen);
		color: var(--white);
	}
	::-moz-selection {
		background-color: var(--darkgreen);
		color: var(--white);
	}
	.white{
		fill: var(--white);
		color: var(--white);
	}
	.sweep_top{
		position: relative;
		width: 100%;
		height: 2.24vw;
		background: url(images/sweep_top.webp);
		background-image: url(images/sweep_top.svg), none;
		background-size: 100vw 2.24vw;
		background-repeat: no-repeat;
		background-position: center -1px;
		margin-top: 0;
	}
	.sweep_bottom{
		position: relative;
		width: 100%;
		height: 2.24vw;
		background: url(images/sweep_bottom.webp);
		background-image: url(images/sweep_bottom.svg), none;
		background-size: 100vw 2.24vw;
		background-repeat: no-repeat;
		background-position: center 1px;
		margin-top: 0;
	}
	.spacer{
		position: relative;
		width: 100%;
		min-height: 6vw;
		background: var(--offwhite);
		margin: 0;
		padding: 0;
	}
	.tall{
		height: 22vw;
	}
	
/* Header */

	div#headjacket {
		background: var(--offwhite);
		width: 100%;
		padding: 2vw 0 0;
	}
	
	header {
		position: relative;
		display: grid;
		grid-template-columns: 14.58vw 1fr 14.58vw;
		grid-template-rows: 8.2602vw auto;
		grid-column-gap: 3.07vw;
		grid-row-gap: 0px;  
		width: 85%;
		margin: 0 auto;
		padding: 0;
	}
	
	.spc01 { 
		grid-area: 1 / 1 / 2 / 2; 
	}
	
	.spc02_logo { 
		grid-area: 1 / 2 / 2 / 3;
		display: flex;
		justify-content: center; 
		align-items: center;
	}
	
	.spc03 {
		grid-area: 1 / 3 / 2 / 4;
	}
	.spc03 .mobile_nav{
		display: none;
	}
	.spc03 .donate {
		display: inline-block;
		background-color: var(--yellow);
		height: 6.04vw;
		display: flex;
		align-items: center;
		justify-content: center;
		-webkit-border-radius: 0.75vw;
		-moz-border-radius: 0.75vw;
		border-radius: 0.75vw;
		margin-top: 1vw;
	}
	
	.spc03 .donate a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		color: var(--darkgreen);
		font-size: 2.1875vw;
		font-weight: 500;
		text-decoration: none;
		-webkit-border-radius: 0.75vw;
		-moz-border-radius: 0.75vw;
		border-radius: 0.75vw;
		transition: background-color 300ms ease-in-out 0ms;
	}
	
	.spc03 .donate a:hover,
	.spc03 .donate a:active,
	footer .sock .mobilenav a:hover,
	footer .sock .mobilenav a:active {
		background-color: var(--darkyellow);
	}
	
	.spc04 { 
		grid-area: 2 / 1 / 3 / 4;
	}
	
	header h1 {
		display: block;
		position: relative;
		/* Removed the hard width that was pushing grid lines out of alignment */
		width: 100%; 
		max-width: 31.77vw;
		height: 8.2602vw;
		background: url(images/shlogo_color.webp);
		background-image: url(images/shlogo_color.svg), none;
		background-size: contain; /* Changed to contain so it scales safely inside its box */
		background-repeat: no-repeat;
		background-position: center top;
		text-indent: -9999vw;
		overflow: hidden;
		margin: 0;
		padding: 0;
	}
	
	nav {
		position: relative;
		font-size: 1.2em;
		line-height: 1em;
		font-weight: 500;
		text-align: center;
		padding: 2vw 0 3vw;
	}
	
	nav a {
		display: inline-block;
		margin: 0 2vw 0 0;
		color: var(--darkgreen);
		text-decoration: none;
	}
	
	nav a:last-child { 
		margin: 0; 
	}
	
/* Animated Text */
	
	section#welcome svg.wave-svg {
		width: 100%;
		height: auto;
		display: block;
		overflow: visible;
	}
	section#welcome .wave-text {
		font-family: "Caveat", cursive;
		font-weight: 500;
		font-style: normal;
		dominant-baseline: alphabetic;
	}
	
/* Welcome Section */
	
	section#welcome {
		position: relative;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 2.24vw auto auto 2.24vw; 
		grid-column-gap: 0px;
		grid-row-gap: 0px;
		width: 100%;
		background: var(--blue) url(images/blue_bg.jpg) no-repeat center -17vw;
		background-size: cover;
		z-index: 1;
	}
	section#welcome .sweep_top { 
		grid-area: 1 / 1 / 2 / 2; 
	}
	section#welcome .viewport-container {
		grid-area: 2 / 1 / 3 / 2;
		width: 100%;
		height: 4.5vw;     
		overflow: visible; 
		padding: 0;
		margin: 0;         
	}
	section#welcome .sock {
		grid-area: 3 / 1 / 4 / 2;
		position: relative;
		width: 85%;
		min-height: 50vw;
		margin: 0 auto;
		padding: 0.5vw 0;
	}
	section#welcome .sock .greeting{
		position: absolute;
		top: 12.5vw;
		left: 0;
		width: 42vw;
		height: 18vw;
		font-size: 2.75vw;
		line-height: 3.5vw;
		text-align: center;
		overflow: hidden;
	} 
	section#welcome .sweep_bottom { 
		grid-area: 4 / 1 / 5 / 2;
	}
	
		/* Get Help and Get Involved */
		
	section#welcome .helpusout {
		display: grid;
		position: absolute;
		top: 37vw;
		left: 0;
		width: 100%;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, auto);
		grid-column-gap: 3.07vw;
		grid-row-gap: 10px;
		text-align: center;
		z-index: 100;
	}
	section#welcome .helpusout h5,
	section#welcome .helpusout h5,
	section#programs h5,
	section#mission h5{
		display: inline-block;
		width: 100%;
		font-size: 5.5vw;
		line-height: 1em;
		font-weight: 600;
		margin: 0;
		padding: 0;
		text-align: center;
	}
	section#welcome .gethelp { grid-area: 2 / 1 / 3 / 2; }
	section#welcome .getinvolved { grid-area: 2 / 2 / 3 / 3; }
	
	section#welcome .cosh {
		min-height: 18vw;
		background: var(--offwhite);
		padding: 3vw;
		-webkit-border-radius: 0.75vw;
		-moz-border-radius: 0.75vw;
		border-radius: 0.75vw;
		box-shadow: 0px 0px 1.25vw 1vw rgba(14, 42, 69, 0.2);
	}
	
	section#welcome .gethelp .clk,
	section#welcome .getinvolved .clk {
		font-size: 2.75vw;
		font-weight: 500;
		line-height: 9vw;
		color: var(--darkgreen);
		padding: 0;
		-webkit-border-radius: 0.75vw;
		-moz-border-radius: 0.75vw;
		border-radius: 0.75vw;
		transition: background-color 300ms ease-in-out 0ms;
		overflow: hidden;
	}
	
	section#welcome .gethelp .clk:first-child,
	section#welcome .getinvolved .clk:first-child {
		margin-bottom: 2vw;
	}
	
	section#welcome .gethelp .clk {
		background-color: var(--green);
	}
	section#welcome .gethelp .clk:hover,
	section#welcome .gethelp .clk:active {
		background-color: #70c2a9;
	}
	
	section#welcome .getinvolved .clk {
		background-color: var(--blue);
		color: var(--white);
	}
	section#welcome .getinvolved .clk:hover,
	section#welcome .getinvolved .clk:active {
		background-color: #4083c0;
	}
	
	section#welcome .getinvolved .clk:nth-child(2) {
		background-color: var(--yellow);
		color: var(--darkgreen);
	}
	section#welcome .getinvolved .clk:nth-child(2):hover,
	section#welcome .getinvolved .clk:nth-child(2):active {
		background-color: var(--darkyellow);
	}
	
	section#welcome .gethelp .clk a,
	section#welcome .getinvolved .clk a {
		display: block;
		width: 100%;
		height: 100%;
		color: inherit;
		text-decoration: none;
		overflow: hidden;
	}
	
/* Programs */
	
	section#programs {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 2.24vw max-content auto 2.24vw; 
		grid-column-gap: 3.07vw;
		grid-row-gap: 0px;
		position: relative;
		width: 100%;
		min-height: 75vw;
		background: var(--green) url(images/green_bg.jpg) no-repeat center -24vw;
		background-size: 100vw 93.426vw;
	}
	section#programs .sweep_top { grid-area: 1 / 1 / 2 / 2; }
	section#programs h5 { 
		grid-area: 2 / 1 / 3 / 2; 
		margin: 4vw 0 3vw;
		padding: 0;
		line-height: 1;
	}
	.progsock {
		grid-area: 3 / 1 / 4 / 2;
		position: relative;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-template-rows: auto;
		grid-column-gap: 3.07vw;
		grid-row-gap: 0px; 
		width: 85%;
		margin: 0 auto 4vw;
	}
	.progsock .prog{
		box-sizing: border-box;
		position: relative;
		width: 100%;
		background: var(--offwhite);
		color: var(--darkgreen);
		padding: 2vw 3vw;
		-webkit-border-radius: 0.75vw;
		-moz-border-radius: 0.75vw;
		border-radius: 0.75vw;
	}
	.progsock .prog p:first-child{
		font-size: 1.2em;
	}
	.progsock .prog ul {
		margin: 0;
		padding: 0 0 0 2vw;
		list-style-type: disc;
	}
	.progsock .prog ul li {
		margin: 0 0 1.5vw;
	}
	.progsock .prog:last-child ul li{
		margin: 0 0 0.75vw;
	}
	section#programs .sweep_bottom { grid-area: 4 / 1 / 5 / 2; }
	.progsock .prog ul blockquote{
		margin: 1vw 1.5vw;
		list-style-type: circle;
	}
	
/* Mission */
	
	section#mission{
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 2.24vw 1fr 2.24vw;
		grid-column-gap: 0px;
		grid-row-gap: 0px; 
		background: var(--darkgreen) url(images/dark_bg.jpg) no-repeat center top;
		background-size: cover;
	}
	section#mission h5{
		margin: 4vw 0 3vw;
		padding: 0;
		line-height: 1;
	}
	section#mission .sweep_top{grid-area: 1 / 1 / 2 / 2;}
	section#mission .sock{grid-area: 2 / 1 / 3 / 2;}
	section#mission .sock .ourmission{
		position: relative;
		width: 85%;
		margin: 0 auto 5vw;
	}
	section#mission .sock .ourmission blockquote {
		display: block;
		position: relative;
		font-size: 1.2em;
		line-height: 1.5em;
		border-left: 0.5vw solid var(--green);
		padding: 2vw 4vw 1vw;
		margin: 3vw 4vw 0vw;
	}
	section#mission .sock .ourmission cite{
		display: block;
		position: relative;
		width: 85%;
		font-size: 1.3em;
		line-height: 1em;
		font-weight: 600;
		font-style: normal;
		text-align: right;
		padding: 0 4vw;
		margin: 0 4vw 3vw;
	}
	section#mission .sweep_bottom{grid-area: 3 / 1 / 4 / 2;}
	
/* Subpages */

	.breadcrumbs{
		position: relative;
		background: var(--offwhite);
		width: 85%;
		height: 1.2em;
		margin: 0 auto;
		padding: 0 7.5%;
		color: var(--darkgreen);
	}
	.breadcrumbs a{
		color: var(--green);
		text-decoration: none;
		transition: color 300ms ease-in-out 0ms;
	}
	.breadcrumbs a:hover,
	.breadcrumbs a:active{
		color: var(--blue);
		text-decoration: none;
	}
	.webp section#page {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 2.24vw 1fr 2.24vw;
		grid-column-gap: 0px;
		grid-row-gap: 0px; 
		background: var(--blue) url(images/blue_bg2.webp) no-repeat center top;
		background-size: 100vw 86.06vw;
		min-height: calc(100dvh - 32.5vw); 
	}
	
	.no-webp section#page {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 2.24vw 1fr 2.24vw;
		grid-column-gap: 0px;
		grid-row-gap: 0px; 
		background: var(--blue) url(images/blue_bg2.jpg) no-repeat center top;
		background-size: 100vw 86.06vw;
		min-height: calc(100dvh - 32.5vw); 
	}
	section#page .content{
		position: relative;
		width: 85%;
		min-height: 50vw;
		margin: 2.5vw auto;
	}
	section#page .content a{
		color: var(--yellow);
		text-decoration: underline;
		font-weight: 600;
		transition: color 300ms ease-in-out 0ms;
	}
	section#page .content a:hover,
	section#page .content a:active{
		color: var(--white);
	}
	section#page .content h2.pagetitle{
		display: inline-block;
		font-size: 5.21vw;
		line-height: 1em;
		text-align: left;
		margin: 0 0 2vw;
		padding: 0;
	}
	
		/* Editor Styles */
				
				.content h1,
				.content h2{
					font-size: 2em;
					line-height: 1em;
					font-weight: 600;
					padding: 0;
					margin: 1em 0 1.5em;
				}
				.content h3,
				.content h4{
					font-size: 1.75em;
					line-height: 1em;
					font-weight: 600;
					padding: 0;
					margin: 0.8em 0 1em;
				}
				.content h5{
					font-size: 1.2em;
					line-height: 1em;
					font-weight: 600;
					padding: 0;
					margin: 0.7em 0 0.9em;
				}
				
				.content ul,
				.content ol{
					display: block;
					margin: 0;
					padding: 0 4vw 3vw;
				}
				.content ul li,
				.content ol li{
					margin: 0 0 0.25vw;
					padding: 0;
				}
				.content ul ul,
				.content ol ol,
				.content ul ol{
					display: block;
					margin: 0;
					padding: 0 1.5vw 1vw;
				}
				
				section#page .content img,
				section#page .content figure,
				section#page .content iframe {
					max-width: 100%;
					height: auto;
					-webkit-border-radius: 0.75vw;
					-moz-border-radius: 0.75vw;
					border-radius: 0.75vw;
				}
				section#page .content figure figcaption{
					font-size: 0.8em;
					line-height: 1em;
					color: var(--darkgreen);
				}
				
				section#page .content blockquote {
					font-size: 1.2em;
					width: 85%;
					border-left: 0.5vw solid var(--yellow);
					padding: 2vw 4vw 1vw;
					margin: 3vw 4vw 4vw;
				}
				section#page .content cite{
					display: block;
					position: relative;
					width: 85%;
					font-size: 1.3em;
					line-height: 1em;
					font-weight: 600;
					font-style: normal;
					text-align: right;
					padding: 0 4vw 2vw;
					margin: 1vw 4vw 3vw;
					clear: both;
				}
				
				section#page .content hr{
					display: block;
					width: 90%;
					height: 0.15vw;
					background: var(--offwhite);
					margin: 3vw auto;
					padding: 0;
					border-style: none;
				}
				
				section#page .content :not(.wp-block-image).alignleft {
					float: left;
					width: max-content;
					margin: 0 2vw 2vw 0;
				}
				section#page .content :not(.wp-block-image).alignright {
					float: right;
					width: max-content;
					margin: 0 0 2vw 2vw;
				}
				section#page .content :not(.wp-block-image).aligncenter {
					display: block;
					width: max-content;
					margin: 2vw auto;
					text-align: center;
				}
				section#page .content table {
					width: 100%;
					color: var(--darkgreen);
					background: var(--offwhite);
					border-collapse: separate;
					border-spacing: 0;
					border-radius: 0.75vw;
					overflow: hidden;
					margin: 0 auto 2vw;
				}
				
				section#page .content table th,
				section#page .content table td {
					padding: clamp(0.75rem, 1.5vw, 1.5rem);
					text-align: left;
					vertical-align: top;
					border-right: 0.15vw solid var(--blue);
				}
				
				section#page .content table th:last-child,
				section#page .content table td:last-child {
					border-right: none;
				}
				
				section#page .content table th {
					font-weight: 600;
					border-bottom: 0.25vw solid var(--blue);
				}
				
				section#page .content table td {
					border-bottom: 0.15vw solid var(--blue);
				}
				
				section#page .content table tbody tr:last-child td {
					border-bottom: none;
				}
				section#page .content figure.wp-block-image {
					display: table !important;
					max-width: 100% !important;
					margin: 0 0 clamp(1rem, 1.56vw, 2rem) 0;
					padding: 0;
				}
				
				section#page .content figure.wp-block-image img {
					display: block !important;
					max-width: 100% !important;
					height: auto !important;
					margin: 0 auto !important;
					-webkit-border-top-left-radius: 0.75vw;
					-webkit-border-top-right-radius: 0.75vw;
					-moz-border-radius-topleft: 0.75vw;
					-moz-border-radius-topright: 0.75vw;
					border-top-left-radius: 0.75vw;
					border-top-right-radius: 0.75vw;
				}
				
				section#page .content figure.wp-block-image figcaption {
					display: table-caption !important;
					caption-side: bottom !important;
					max-width: 100% !important;
					box-sizing: border-box !important;
					white-space: normal !important;
					word-wrap: break-word !important;
					padding: 1vw;
					font-size: 0.7em;
					line-height: 1.3em;
					color: var(--darkgreen);
					text-align: center;
					background: var(--offwhite);
					-webkit-border-bottom-right-radius: 0.75vw;
					-webkit-border-bottom-left-radius: 0.75vw;
					-moz-border-radius-bottomright: 0.75vw;
					-moz-border-radius-bottomleft: 0.75vw;
					border-bottom-right-radius: 0.75vw;
					border-bottom-left-radius: 0.75vw;
				}
				
				section#page .content figure.wp-block-image.alignleft {
					float: left !important;
					margin: 0.5vw 2vw 2vw 0 !important;
				}
				
				section#page .content figure.wp-block-image.alignright {
					float: right !important;
					margin: 0.5vw 0 2vw 2vw !important;
				}
				
				section#page .content figure.wp-block-image.aligncenter {
					display: table !important;
					margin: 2vw auto !important;
					float: none !important;
				}

/* Community Partners Logos Grid */

.ourpartners {
	display: grid;
	width: 85%;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: auto;
	gap: 24px; 
	margin: 0 auto;
}

.ourpartners > div {
	display: flex;
	align-items: center;     
	justify-content: center; 
}

.ourpartners div img {
	display: block; 
	width: 17.77vw !important; 
	height: auto !important;
}

/* ==========================================================================
   Community Partners Waterfall Grid Engine & Lightbox System
   ========================================================================== */

.partners-divider {
	border: 0;
	height: 1px;
	background: #e2e8f0;
	margin: 3rem 0;
}

.waterfall-container {
	width: 100%;
	margin-top: 2rem;
}

.waterfall-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	grid-auto-rows: 10px;    /* Fine-grained layout track slices */
	grid-gap: 24px;          /* Reverted back to the original clean spacing */
	align-items: start;
}

.waterfall-item {
	grid-row-end: span 30;   /* Baseline container safety value */
	will-change: grid-row-end;
}

/* Clear button architecture defaults to maintain layout performance */
button.waterfall-content {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background: #ffffff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
	cursor: pointer;
	text-align: left;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

button.waterfall-content:hover,
button.waterfall-content:focus {
	transform: translateY(-4px);
	box-shadow: 0 12px 20px -8px rgba(0, 0, 0, 0.15);
	outline: none;
	border-color: #cbd5e1;
}

.waterfall-media img,
.waterfall-media video {
	display: block;
	width: 100%;
	height: auto;
}

/* Enforce precise fluid boundaries on modern native vertical phone captures */
.vertical-video video {
	aspect-ratio: 9 / 16;
	object-fit: cover;
	background-color: #000000;
}

/* ==========================================================================
   Modal Lightbox Overlay Presentation Layers
   ========================================================================== */

.lightbox-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(15, 23, 42, 0.95); /* Deep translucent slate drop */
	z-index: 99999;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	padding: 40px;
	box-sizing: border-box;
}

.lightbox-modal[aria-hidden="false"] {
	opacity: 1;
	pointer-events: auto;
}

.lightbox-stage {
	max-width: 100%;
	max-height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.lightbox-stage img,
.lightbox-stage video {
	max-width: 90vw;
	max-height: 85vh;
	object-fit: contain;
	border-radius: 6px;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.lightbox-stage video {
	background: #000000;
}

.lightbox-close {
	position: absolute;
	top: 20px;
	right: 20px;
	background: none;
	border: 0;
	color: #ffffff;
	font-size: 2.5rem;
	line-height: 1;
	cursor: pointer;
	padding: 10px;
	opacity: 0.7;
	transition: opacity 0.2s ease;
}

.lightbox-close:hover {
	opacity: 1;
}
/* ==========================================================================
   Waterfall Filtering System Control Interface
   ========================================================================== */

.waterfall-filters {
	display: flex;
	gap: 12px;
	margin: 1.5rem 0;
}

.filter-btn {
	padding: 10px 20px;
	border: 1px solid var(--offwhite);
	background: #ffffff;
	color: var(--darkgreen);
	font-size: 1.1rem;
	font-weight: 500;
	border-radius: 0.75vw;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	transition: all 0.2s ease;
}

.filter-btn:hover {
	border-color: var(--offwhite);
	background: var(--offwhite);
}

.filter-btn:focus {
	outline: 2px solid var(--darkgreen);
	outline-offset: 2px;
}

.filter-btn.active {
	background: var(--darkgreen);
	color: var(--white);
	border-color: var(--darkgreen);
}

/* Structural utility to clean grid items cleanly from calculations */
.waterfall-item.is-hidden {
	display: none !important;
}

/* Wishlist Page */

.dosanddonts {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 1fr;
	grid-column-gap: 24px;
	grid-row-gap: 0px;
}
.dosanddonts div{
	background: var(--offwhite);
	color: var(--darkgreen);
	font-size: 1.1em;
	line-height: 1.3em;
	padding: 2vw;
	-webkit-border-radius: 0.75vw;
	-moz-border-radius: 0.75vw;
	border-radius: 0.75vw;
}
	
/* Footer */
	
	footer {
		position: relative;
		background: var(--offwhite);
		width: 100%;
	}
	footer small a{
		color: var(--darkgreen);
		text-decoration: none;
		font-weight: 600;
	}
	footer .sock {
		display: grid;
		position: relative;
		grid-template-columns: 19.27vw 1fr 11.98vw;
		/* Changed first row from 4.38vw to auto */
		grid-template-rows: auto auto;
		grid-column-gap: 3.07vw;
		grid-row-gap: 0px; 
		width: 85%;
		margin: 0 auto;
		padding: 0 0 2vw;
		color: var(--darkgreen);
	}
	footer .sock .logo {
		display: block;
		grid-area: 1 / 1 / 2 / 2;
		width: 19.27vw;
		height: 4.38vw;
		background: url(images/shlogo_black.webp);
		background-image: url(images/shlogo_black.svg), none;
		background-size: 19.27vw 4.38vw;
		background-repeat: no-repeat;
		background-position: center top;
		text-indent: -9999vw;
		overflow: hidden;
	}
	footer .sock ul.navigation {
		grid-area: 1 / 2 / 2 / 3;
		display: flex;
		flex-wrap: wrap;
		gap: 1vw 1.5vw;
		padding: 2vw 0 0;
		margin: 0;
		list-style: none;
	}
	footer .sock ul.navigation li {
		font-size: 1.5625vw;
		line-height: 1.4em;
	}
	footer .sock ul.navigation li a {
		color: inherit;
		font-weight: 500;
		text-decoration: none;
	}
	footer .sock .donate {
		display: block;
		grid-area: 1 / 3 / 2 / 4;
	}
	footer .sock .donate .helpout {
		background-color: var(--yellow);
		font-size: 1.797vw;
		line-height: 4.38vw;
		font-weight: 500;
		text-align: center;
		-webkit-border-radius: 0.75vw;
		-moz-border-radius: 0.75vw;
		border-radius: 0.75vw;
		transition: background-color 300ms ease-in-out 0ms;
	}
	footer .sock .donate .helpout:hover {
		background-color: var(--darkyellow);
	}
	footer .sock .donate .helpout a {
		display: block;
		width: 100%;
		height: 4.38vw;
		color: var(--darkgreen);
		text-decoration: none;
	}
	footer .sock .copyright {
		grid-area: 2 / 1 / 3 / 4;
		padding: 2vw 0 1vw;
		font-size: 0.8em;
		text-align: center;
	}
	footer .sock .mobilenav{
		display: none;
	}
	
	/* Get Help Instructions */
	
	.gethelp_instructions {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-column-gap: 2.6vw;
		grid-row-gap: 0px;
	}
	
	.gethelp_instructions .white1,
	.gethelp_instructions .white2 {
		font-size: 1.25em;
		line-height: 1.5em;
		font-weight: bold;
		margin-bottom: 1vw;
	}
	
	.gethelp_instructions .instruction-box {
		background: var(--offwhite);
		color: var(--darkgreen);
		padding: 3vw 2vw;
		-webkit-border-radius: 0.75vw;
		-moz-border-radius: 0.75vw;
		border-radius: 0.75vw;
	}
	.instruction-en a,
	.instruction-es a{
		color: var(--blue) !important;
		text-decoration: none !important;
	}
	.instruction-en a:active,
	.instruction-en a:hover,
	.instruction-es a:active,
	.instruction-es a:hover{
		color: var(--green) !important;
	}
	
	/* Video Styling */
	
	.wp-block-video video,
	.wp-video-shortcode {
		display: block;
		float: left; /* Temporary, change this when you have a better idea of the section's content */
		aspect-ratio: auto;
		object-fit: contain;
		margin: 0 2vw 2vw 0;
		-webkit-border-radius: 0.75vw;
		-moz-border-radius: 0.75vw;
		border-radius: 0.75vw;
	}
	
/* Donation Page */

.donation_types {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: 1fr;
	grid-column-gap: 24px;
	grid-row-gap: 0px;
	margin: 4vw 0 0;
}
.donation_types .whitebox{
	min-height: 10vw;
	background: var(--offwhite);
	padding: 3vw 4.69vw;
	-webkit-border-radius: 0.75vw;
	-moz-border-radius: 0.75vw;
	border-radius: 0.75vw;
	color: var(--darkgreen);
	line-height: 1em;
	text-align: center;
}
.donation_types .whitebox .dono_btn{
	width: 100%;
	background: var(--yellow);
	color: var(--darkgreen);
	font-size: 1.5em;
	line-height: 2em;
	font-weight: 500;
	padding: 0;
	margin: 0 0 1vw;
	-webkit-border-radius: 0.75vw;
	-moz-border-radius: 0.75vw;
	border-radius: 0.75vw;
	transition: background-color 300ms ease-in-out 0ms;
}
.donation_types .whitebox .dono_btn.green{
	background: var(--green) !important;
}
.donation_types .whitebox .dono_btn a{
	display: block;
	width: 100%;
	height: 6vw;
	line-height: 6vw;
	color: var(--darkgreen) !important;
	text-align: center;
	text-decoration: none !important;
	overflow: hidden;
}
.donation_types .whitebox .dono_btn:hover,
.donation_types .whitebox .dono_btn:active{
	background: var(--darkyellow);
	color: inherit !important;
}
.donation_types .whitebox .dono_btn.green:hover,
.donation_types .whitebox .dono_btn.green:active{
	background: #76c5ad !important;
	color: inherit !important;
}
.donation_types .pp {grid-area: 1 / 1 / 2 / 2;}
.donation_types .pp img.pplogo,
.donation_types .vm img.vmlogo,
.donation_types .pp img.qrcode,
.donation_types .vm img.qrcode{
	display: block;
	width: 90% !important;
	margin: 0 auto 5vw !important;
	padding: 0;
	border: none;
}
.donation_types .pp img.qrcode,
.donation_types .vm img.qrcode{
	width: 100% !important;
	margin: 0 0 1vw !important;
}
.donation_types .vm {grid-area: 1 / 2 / 2 / 3;}
.donation_types .cc {grid-area: 1 / 3 / 2 / 4; text-align: left; line-height: 1.2em;}
.donation_types .cc span.heading{
	display: block;
	font-size: 1.5em;
	line-height: 1em;
	font-weight: 600;
	text-align: center;
	margin: 0 0 2vw;
}
.donation_types .cc blockquote{
	font-size: 1.1em !important;
	width: 85%;
	border-left: none !important;
	padding: 0 2vw 1vw !important;
	margin: 0 0 1vw !important;
	line-height: 1.2em;
	font-weight: 500;
}

	
	@media screen and (max-width: 768px) {
		
		/* Global */
		
		body{
			font-size: clamp(1.2rem, 0.9rem + 1.2vw, 2rem);
			line-height: 1.5em;
		}
		section#welcome .helpusout h5,
		section#welcome .helpusout h5,
		section#programs h5,
		section#mission h5{
			font-size: 11vw;
		}
		.sweep_top{
			height: 3.52vw;
			background: url(images/mobile_sweep_top.png);
			background-image: url(images/mobile_sweep_top.svg), none;
			background-size: 100vw 3.53vw;
			background-position: center 0px;
			margin-top: -1px;
		}
		.sweep_bottom{
			height: 3.52vw;
			background: url(images/mobile_sweep_bottom.png);
			background-image: url(images/mobile_sweep_bottom.svg), none;
			background-size: 100vw 3.53vw;
			background-position: center 0px;
			margin-top: 1px;
		}
		.spacer{
			min-height: 12vw;
		}
		.tall{
			height: 36vw;
		}
		
		/* Header */
		
		div#headjacket {
			padding: 5vw 0 0;
		}
		header {
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: 17.33vw 14.65vw; 
			grid-row-gap: 5vw; 
			width: 83%;
			margin: 0 auto;
			padding: 0 0 5vw;
		}
		.spc01,
		.spc04,
		footer .sock .logo,
		footer .sock ul.navigation,
		footer .sock .donate { 
			display: none; 
		}
		.spc02_logo { 
			grid-area: 1 / 1 / 2 / 2;
			display: flex;
			justify-content: center; 
			align-items: center;
		}
		
		.spc03 {
			grid-area: 2 / 1 / 3 / 2;
			display: flex;
			align-items: stretch; 
			justify-content: space-between;
		}
		
		header h1 {
			max-width: 66.28vw;
			height: 17.33vw;
		}
		
		.spc03 select.mobile_nav,
		footer .sock .mobilenav select.mobile_nav {
			display: block;
			width: 51.16vw;
			height: 14.65vw;
			appearance: none;
			-webkit-appearance: none;
			-moz-appearance: none;
			border: none;
			padding: 0;
			text-indent: -9999vw;
			opacity: 1;
			background: transparent url(images/mobile_nav.png);
			background-image: url(images/mobile_nav.svg), none;
			background-size: 51.16vw 14.65vw;
			background-repeat: no-repeat;
			background-position: center top;
			margin: auto 2.33vw auto 0; 
		}
		.spc03 .donate,
		footer .sock .mobilenav .donate {
			flex-grow: 1; 
			background-color: var(--yellow);
			height: 14.65vw;
			display: flex;
			align-items: center;
			justify-content: center;
			-webkit-border-radius: 1vw;
			-moz-border-radius: 1vw;
			border-radius: 1vw;
			margin: auto 0; 
		}
		.spc03 .donate a,
		footer .sock .mobilenav .donate a {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;
			color: var(--darkgreen);
			text-decoration: none;
			font-size: 5.5vw;
			font-weight: 600;
		}
		
		/* Animated Text */
		section#welcome .viewport-container {
			/* Height adjustment to account for the deeper mobile curve */
			height: 8vw; 
			margin: 1.25vw 0 0;
		}
		
		section#welcome .wave-text {
			/* Scales down the text to look balanced on the 860px vector layout */
			font-size: 66px; 
		}
		
		/* Welcome Section */
			
			section#welcome {
				grid-template-rows: 3.53vw auto auto 3.53vw; 
				background: var(--blue) url(images/blue_bg.jpg) no-repeat -122vw -54vw;
				background-size: cover;
				z-index: 1;
			}
			section#welcome .sweep_top { 
				grid-area: 1 / 1 / 2 / 2;
			}
			section#welcome .sock {
				grid-area: 2 / 1 / 3 / 2;
				width: 83%;
				min-height: 206vw;
				padding: 0.5vw 0;
			}
			section#welcome .sock .greeting{
				top: 57.5vw;
				left: 0;
				width: 83vw;
				height: 35vw;
				font-size: 5.5vw;
				line-height: 7vw;
				overflow: hidden;
			} 
			section#welcome .sweep_bottom { 
				grid-area: 4 / 1 / 5 / 2;
			}
		/* Get Help and Get Involved */
				
			section#welcome .helpusout {
				top: 105vw;
				grid-template-columns: 1fr;
				grid-template-rows: auto 1fr auto 1fr;
				grid-column-gap: 0;
				grid-row-gap: 3vw;
			}
			section#welcome .gethelp { grid-area: 2 / 1 / 3 / 2; }
			section#welcome .getinvolved { grid-area: 4 / 1 / 5 / 2; }
			
			section#welcome .cosh {
				min-height: 18vw;
				background: var(--offwhite);
				padding: 4.5vw;
				-webkit-border-radius: 2.5vw;
				-moz-border-radius: 2.5vw;
				border-radius: 2.5vw;
				box-shadow: 0px 0px 2.5vw 2vw rgba(14, 42, 69, 0.2);
			}
			
			section#welcome .gethelp .clk,
			section#welcome .getinvolved .clk {
				font-size: 5.5vw;
				font-weight: 500;
				line-height: 18vw;
				color: var(--darkgreen);
				padding: 0;
				-webkit-border-radius: 2.5vw;
				-moz-border-radius: 2.5vw;
				border-radius: 2.5vw;
				transition: background-color 300ms ease-in-out 0ms;
			}
			
			section#welcome .gethelp .clk:first-child,
			section#welcome .getinvolved .clk:first-child {
				margin-bottom: 3vw;
			}
			
			section#welcome .gethelp .clk a,
			section#welcome .getinvolved .clk a {
				display: block;
				width: 100%;
				height: 100%;
				color: inherit;
				text-decoration: none;
				overflow: hidden;
			}
			section#welcome .getinvolved .clk {
			  color: var(--white);
			}
			
		/* Programs */
			
			section#programs {
				grid-template-columns: 1fr;
				grid-template-rows: 3.53vw max-content auto 3.53vw; 
				grid-column-gap: 0;
				grid-row-gap: 3vw;
				width: 100%;
				min-height: 100vw;
				background: var(--green) url(images/green_bg.jpg) no-repeat center -11vw;
				background-size: 120vw 112.11vw;
			}
			section#programs .sweep_top { grid-area: 1 / 1 / 2 / 2; }
			section#programs h5 { 
				grid-area: 2 / 1 / 3 / 2;
				margin: 0 0 3vw;
			}
			.progsock {
				grid-area: 3 / 1 / 4 / 2;
				grid-template-columns: 1fr;
				grid-template-rows: repeat(3, auto); 
				grid-column-gap: 0;
				grid-row-gap: 3vw;
				width: 83%;
				margin: 24vw auto 4vw;
			}
			.progsock .prog{
				padding: 6vw;
				-webkit-border-radius: 2.5vw;
				-moz-border-radius: 2.5vw;
				border-radius: 2.5vw;
				overflow: hidden;
			}
			.progsock .prog p:first-child{
				font-size: 2em;
				line-height: 1.1em;
			}
			.progsock .prog ul {
				padding: 0 0 0 4vw;
			}
			.progsock .prog ul li {
				margin: 0 0 2.5vw;
			}
			.progsock .prog:last-child ul li{
				margin: 0 0 1.5vw;
			}
			section#programs .sweep_bottom { grid-area: 4 / 1 / 5 / 2; }
			.progsock .prog ul blockquote{
				margin: 2vw 3vw;
				list-style-type: circle;
			}
			
		/* Mission */
			
			section#mission{
				grid-template-rows: 3.53vw 1fr 3.53vw;
				background: var(--darkgreen) url(images/dark_bg.jpg) no-repeat -97vw top;
				background-size: 200vw 151.1vw;
			}
			section#mission .sock .ourmission{
				width: 83%;
				margin: 0 auto 10vw;
			}
			section#mission .sock .ourmission blockquote {
				border-left: 1vw solid var(--green);
				padding: 2vw 4vw 1vw;
				margin: 6vw 8vw 1vw;
			}
			section#mission .sock .ourmission cite{
				width: 75%;
				padding: 0 8vw;
				margin: 0 8vw 6vw;
			}
			section#mission .sweep_bottom{grid-area: 3 / 1 / 4 / 2;}
			
		/* Subpages */
		
			.breadcrumbs{
				position: relative;
				background: var(--offwhite);
				width: 85%;
				height: 1.2em;
				margin: 0 auto;
				padding: 0 7.5%;
				color: var(--darkgreen);
			}
			.breadcrumbs a{
				color: var(--green);
				text-decoration: none;
				transition: color 300ms ease-in-out 0ms;
			}
			.breadcrumbs a:hover,
			.breadcrumbs a:active{
				color: var(--blue);
				text-decoration: none;
			}
			.webp section#page {
				grid-template-rows: 3.53vw 1fr 3.53vw;
				background-size: 200vw 150.1vw;
			}
			
			.no-webp section#page {
				grid-template-rows: 3.53vw 1fr 3.53vw;
				background-size: 200vw 150.1vw;
			}
			section#page .content{
				position: relative;
				width: 83%;
				min-height: 50vw;
				margin: 5vw auto;
			}
			section#page .content h2.pagetitle{
				font-size: 10vw;
				line-height: 1em;
				margin: 0 0 4vw;
			}
			.content ul,
			.content ol{
				display: block;
				margin: 0;
				padding: 0 8vw 5vw;
			}
			.content ul li,
			.content ol li{
				margin: 0 0 0.25vw;
				padding: 0;
			}
			.content ul ul,
			.content ol ol,
			.content ul ol{
				display: block;
				margin: 0;
				padding: 0 3vw 2vw;
			}
			
		/* Get Help Instructions */
		
		.gethelp_instructions {
			display: grid;
			grid-template-columns: 1fr;
			grid-row-gap: 6vw;
		}
		
		.gethelp_instructions .instruction-box {
			-webkit-border-radius: 1.5vw;
			-moz-border-radius: 1.5vw;
			border-radius: 1.5vw;
		}
		
		@media (min-width: 768px) {
			.gethelp_instructions {
				grid-template-columns: 1fr 1fr;
				grid-column-gap: 4vw;
				grid-row-gap: 0;
			}
		}
		
		/* Donation Page */
		
		.donation_types {
			grid-template-columns: 1fr;
			grid-template-rows: repeat(3, 1fr);
			grid-column-gap: 0px;
			grid-row-gap: 24px; 
			margin: 4vw 0 0;
		}
		.donation_types .whitebox{
			min-height: 5vw;
			padding: 6vw 10vw;
			-webkit-border-radius: 1.5vw;
			-moz-border-radius: 1.5vw;
			border-radius: 1.5vw;
		}
		.donation_types .whitebox .dono_btn{
			width: 75%;
			font-size: 1.5em;
			line-height: 2em;
			margin: 0 auto 1vw;
			-webkit-border-radius: 1.5vw;
			-moz-border-radius: 1.5vw;
			border-radius: 1.5vw;
		}
		.donation_types .whitebox .dono_btn a{
			height: 20vw;
			line-height: 20vw;
		}
		.donation_types .pp {grid-area: 1 / 1 / 2 / 2;}
		.donation_types .pp img.pplogo,
		.donation_types .vm img.vmlogo,
		.donation_types .pp img.qrcode,
		.donation_types .vm img.qrcode{
			width: 67% !important;
			margin: 3vw auto 15vw !important;
		}
		.donation_types .pp img.qrcode,
		.donation_types .vm img.qrcode{
			width: 67% !important;
			margin: 0 auto 3vw !important;
		}
		.donation_types .vm {grid-area: 2 / 1 / 3 / 2;}
		.donation_types .cc {grid-area: 3 / 1 / 4 / 2; line-height: 1.2em;}
		.donation_types .cc span.heading{
			margin: 0 0 4vw;
		}
		.donation_types .cc blockquote{
			padding: 0 4vw 2vw !important;
			margin: 0 0 2vw !important;
		}
		
		/* Community Partners Logos Grid */
		
			.ourpartners {
				width: 100%;
				grid-template-columns: repeat(2, 1fr);
			}
			.ourpartners div img {
				width: 39vw !important; 
			}
			
	/* Wishlist Page */
	
	.dosanddonts {
		grid-template-columns: 1fr;
		grid-template-rows: repeat(2, 1fr);
		grid-column-gap: 0px;
		grid-row-gap: 24px; 
	}
	.dosanddonts div{
		padding: 3vw;
		-webkit-border-radius: 1.5vw;
		-moz-border-radius: 1.5vw;
		border-radius: 1.5vw;
	}
		
		/* Footer */
			
			footer .sock {
				grid-template-columns: 1fr;
				grid-template-rows: auto 1fr;
				grid-column-gap: 0px;
				grid-row-gap: 3vw; 
				width: 83%;
				padding: 0 0 4vw;
			}
			footer .sock .mobilenav {
				display: flex;
				align-items: stretch;
				justify-content: space-between;
				width: 100%;
			}
			footer .sock .mobilenav a{
				-webkit-border-radius: 1.5vw;
				-moz-border-radius: 1.5vw;
				border-radius: 1.5vw;
				transition: background-color 300ms ease-in-out 0ms;
			}
			footer .sock .copyright {
				grid-area: 2 / 1 / 3 / 2;
				padding: 4vw 0 2vw;
				font-size: 1em;
			}
	}