/*
Theme Name: AoP Office
Theme URI: http://archphila.org/
Description: Archdiocese of Philadelphia
Author: AOP
Version: 2.0.20
*/

	/* CSS Reset */
html{box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}
html{font-size:100%;}
main,article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}
html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
html,button,input,select,textarea{font-family:sans-serif}
ul{list-style:none}
ol,ul{margin:1em 0; padding:0 0 0 40px}
button,input,select,textarea{margin:0}
img,video{height:auto;max-width:100%}
iframe{border:0}
table{border-collapse:collapse;border-spacing:0}
td,th{padding:0}
button,input,select,textarea{font-size:100%;margin:0;vertical-align:middle}
button,input{line-height:normal}
textarea{overflow:auto;vertical-align:top}


:root {
	--cc-blue: #0065A4;
	--black: #000000;
	--cc-navy: #003087;
	--mint-green: #49C5B1;
	--gold: #D8A95F;
	--purple: #6450A1;
	--coral-red: #EC605E;
	--sky: #D7E6EB;
	--stone: #D9DFDC;
	--cloud: #F7F5F2;
	--eggshell: #F7F4EC;
	--digital-blue: #007BFF;

	--primary-color: var(--cc-blue);
	--accent-color: var(--gold);

	--text-light:#ffffff; 
	--text-dark:#2d3436; 
	--background-light:#ffffff; 
	--background-hover:#f5f6fa; 
	--shadow-color:rgba(0, 0, 0, 0.1); 
	--transition-speed:0.3s; 

	--font-sans: 'Aptos', 'Calibri', 'Segoe UI', 'Arial', sans-serif;
	--font-serif: 'Georgia', 'Times New Roman', 'Times', serif;
}
/*background:var(--primary-color);*/

.eyebrow {font-family: var(--font-sans); font-weight: 700; text-transform: uppercase;}
.subhead {font-family: var(--font-serif); font-weight: 400;}
.metric {font-family: var(--font-sans); font-weight: 800;}




	body {background-color: #FFF; font:100%/1.5 var(--font-sans); padding:0; margin:0 auto; text-align:left; color:#444; display:block; width:100%; min-width:250px; }
	
	h1, h2, h3, h4, h5, h6 { font-family: Garamond, Baskerville, Baskerville Old Face, Hoefler Text, Times New Roman, serif; line-height:1.25; color:inherit; clear:both; margin-bottom:1em;}
	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight:inherit; color:inherit;}
	h1 { font-size: 200%; font-weight:bold; color:var(--primary-color);}
	h2 { font-size: 150%;  font-weight:bold; color:var(--primary-color);}
	h3 { font-size: 120%; font-weight:bold; color:var(--primary-color);}
	h4, h5, h6 { font-size: 1em; }

	p { margin: 0 0 1em; }
	p img { margin: 0; }
	ul, ol { margin-bottom: 1em; padding: 0 0 0 1em;}
	ul li, ol li{margin-bottom:0;}
	#content ul{list-style:disc}

	em, i { font-style: italic; line-height: inherit; }
	strong, b { font-weight: bold; line-height: inherit; }
	small { font-size: 80%; line-height: inherit; }

	hr { border: solid currentColor;  border-width: 1px 0 0; clear: both; margin: 1.65em auto; height: 0; }

	a { text-decoration: none; color: var(--primary-color); line-height: inherit; }
	a:hover { text-decoration:none }
	a:focus { text-decoration:none }
	p a, p a:visited { line-height: inherit; }
	#content a{text-decoration: underline}
	#content a:hover, #content a:focus, #content a:active{text-decoration: none}
	
	img { max-width: 100%; height: auto; }
	object, embed, iframe { max-width: 100%; }

	blockquote { font-style: italic; padding: 0 3em; }
	blockquote cite{ font-style:normal; text-align: right; display: block;}

	a.assistive-text, .screen-reader-text { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); height: 1px; margin: -1px; overflow: hidden; padding: 0; width: 1px; }
	a.assistive-text:hover,	a.assistive-text:active, a.assistive-text:focus { background: #fff; border: 2px solid #333; clip: auto !important; color: #000; display: block; font-size: 12px; padding: 12px; position: absolute; top: 5px; left: 5px; margin: auto; overflow: visible; height: auto;  width: auto; z-index: 1000; }
	
	nav.pagination {margin:10px 0; display:block; padding:10px 0;}
	.nav-links, .wp-block-query-pagination-numbers {display:table; width:100%; text-align:center; table-layout:fixed; border-collapse:collapse;}
    .page-numbers {background:#FFF; padding:10px 0; border:1px solid #111; display:table-cell;}
	.page-numbers.current, .page-numbers:hover {background:var(--primary-color); color:#FFF;}

	form input[type="text"], form textarea{ display: block; width: 100%; border: 1px solid var(--primary-color); padding: 10px; border-radius: 3px; }
	input[type="checkbox"], input[type="radio"]{margin:0 5px;}
	input[type="submit"] { background:var(--primary-color); border:none; color:#FFF; border-radius:3px; padding: 10px; width:auto; display:inline-block; margin: 1em auto; }

/* -------------------------------------------------- 
	:: Layout
	---------------------------------------------------*/
#page{background:var(--eggshell);}
.center, h1.title, article#single{max-width:1200px; margin-left:auto; margin-right:auto;}
h1.title{margin-top: 50px;}
#header{background: white;}
#topbar{background:var(--stone); padding:10px 20px;}
#topbar>div{display:flex; flex-wrap:wrap; align-items: center;}
#topbar .socialrow{flex:1;}
.socialrow a{color:var(--primary-color); fill:var(--primary-color); display:inline-block; margin-right:10px}
.toplinks a{color:var(--primary-color); display:inline-block; margin-left: 20px; font-size:80%;}
@media screen and (min-width: 600px) and (min-height:700px) {
	#navigation{position: sticky; top: 0; z-index: 99;}
}

#siteheader{padding:10px 0 0;}
#navigation{display:table; width:100%; background: var(--cc-blue); max-width: none;}

.featureimage{text-align: center; margin-bottom:1em;}

figcaption{color:var(--primary-color); text-align: center;}

.wp-block-image.aligncenter{margin:0 auto;}

main#content{padding:10px 20px 50px;}

body.home main#content{padding:0;}
body.home article#single{max-width:100%;}

.wp-block-group.background{background:url(https://saintjohnshospice.org/wp-content/uploads/2025/10/skylineblue.jpg) no-repeat fixed; background-size: cover;}
body.home .wp-block-group{padding:60px 20px; overflow:auto;}
body.home .wp-block-group>*{max-width:1600px;margin-left:auto; margin-right:auto}
body.home .wp-block-group .wp-block-columns:last-of-type{margin-bottom:0}
body.home h2{font-size: 38px;}
.background h2{color:#fbf5e7}

.about1::before{content:'';border-radius:50%;display:block;background:url(./images/about1.png?nocache) no-repeat center center #8a2d2c;width:80px;height:80px;margin:0 auto 1em;}
.about2::before{content:'';border-radius:50%;display:block;background:url(./images/about2.png?nocache) no-repeat center center #8a2d2c;width:80px;height:80px;margin:0 auto 1em;}
.about3::before{content:'';border-radius:50%;display:block;background:url(./images/about3.png?nocache) no-repeat center center #8a2d2c;width:80px;height:80px;margin:0 auto 1em;}
.about4::before{content:'';border-radius:50%;display:block;background:url(./images/about4.png?nocache) no-repeat center center #8a2d2c;width:80px;height:80px;margin:0 auto 1em;}
.about5::before{content:'';border-radius:50%;display:block;background:url(./images/about5.png?nocache) no-repeat center center #8a2d2c;width:80px;height:80px;margin:0 auto 1em;}
.about6::before{content:'';border-radius:50%;display:block;background:url(./images/about6.png?nocache) no-repeat center center #8a2d2c;width:80px;height:80px;margin:0 auto 1em;}
.about7::before{content:'';border-radius:50%;display:block;background:url(./images/about7.png?nocache) no-repeat center center #8a2d2c;width:80px;height:80px;margin:0 auto 1em;}
.about8::before{content:'';border-radius:50%;display:block;background:url(./images/about8.png?nocache) no-repeat center center #8a2d2c;width:80px;height:80px;margin:0 auto 1em;}
.about9::before{content:'';border-radius:50%;display:block;background:url(./images/about9.png?nocache) no-repeat center center #8a2d2c;width:80px;height:80px;margin:0 auto 1em;}
.about10::before{content:'';border-radius:50%;display:block;background:url(./images/about10.png?nocache) no-repeat center center #8a2d2c;width:80px;height:80px;margin:0 auto 1em;}

body.home .intheirwords p{color:#fbf5e7}
body.home .intheirwords a{color:#fbf5e7; display:inline-block; border:1px solid; padding:5px 10px}

body.home iframe{display:block;margin-left:auto;margin-right:auto;}

.sjhstats .wp-block-column{color:#fbf5e7; padding:1em}
.sjhstats strong{font-size:40px;}
.sjhstats p{margin:0; line-height:1.2; letter-spacing: .3px}

.recipelist img{height:250px; object-fit: cover}

footer{background:var(--stone);}
/*footer>div{display:flex; flex-wrap:wrap; padding-top:40px; padding-bottom:40px;}
footer>div>div{flex:1 200px; padding:0 10px}
@media screen and (max-width: 600px) {
	footer>div{flex-direction:column}
}*/
footer div.center{display:grid; padding-top:40px; padding-bottom:40px;grid-template-columns: max-content 1fr 1fr;}
footer section{padding:0 20px}
img#footerbreadline{display:block;margin:auto;height:100%;}
@media screen and (max-width: 600px) {
	footer>div.center{grid-template-columns:1fr}
}

#copyright{background:var(--primary-color); color:#FFF; font-size:12px; text-align:center; padding:20px; margin:0;}

.grf_items{display: flex; flex-wrap:wrap; flex-direction: column;}
.grf_item{margin:0 0 30px; }
h3.grf_item_title{margin:0 0 10px; color:var(--primary-color)}
.grf_item_date{font-size:80%;}
#single .grf_item img{display:block; margin:0 15px 15px 0;float: left; max-width: 200px}

body.home .grf_items{flex-direction:row;}
body.home .grf_item{ flex:1 200px;}
body.home .grf_item:not(:first-child):not(:last-child){margin:0 20px}
#front .grf_item img{display:block;margin:1em auto; width:100%;}

#content .wp-block-post-template{list-style:none}

/* Slideshow block */
.wp-block-gallery.slideshow{position: relative; height:600px;max-height:90vh;}
.slideanimation{height:600px;max-height:90vh; width:100%;position: absolute;top:0;left:0;background-position:center 10%;background-size:cover; background-repeat:no-repeat; background-color:transparent;}
.slideanimation figcaption{ display:flex; width:100%; color:#FFF; font-size:38px; font-weight:bold; text-shadow: 2px 2px 5px #000; height: 100%; justify-content: center; align-items: center; text-align: center; line-height:1.2}
/*captions= inline img with bold*/
.slideanimation strong{display:block; width:100%; background-color: RGBA(0, 101, 164, 0.55); border: 4px solid rgba(255, 255, 255, 0.8);border-width: 4px 0;}
.slideanimation img{display:block; margin:10px auto}
@keyframes slidefadein { 0% {opacity: 0;} 100% {opacity: 1;} }
@keyframes slidebg { 0% {background-position-y: 15%;} 100% {background-position-y: 10%;} }
.slideanimation.currentslide{
	animation-name: slidefadein, slidebg;
	animation-duration: 1s, 6s;
	animation-timing-function: linear, ease-out;
}

/* turbolnx */
#loaderoverlay{display:none; position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background: rgba(255, 255, 255, 0.6); z-index: 9999;justify-content: center;align-items: center;}
.pgloading #loaderoverlay{display:flex;}
@keyframes donut-spin { 0% {transform: rotate(0deg); } 100% {transform: rotate(360deg);} }
.pgloading #loaderspinner{display: inline-block;border: 9px solid var(--primary-color);border-left-color:var(--stone);border-radius: 50%;width: 80px;height: 80px;animation: donut-spin 1.2s linear infinite;}

/*donate form*/
#single [id$="contentView"] {background-color:transparent !important;}

#content a img{transition: transform .3s, box-shadow .3s}
#content a img:hover{transform: scale(1.05); box-shadow: 0 0 2px 6px var(--primary-color); z-index:9}

.wp-block-post-featured-image img { aspect-ratio: 52/33; object-fit: cover;}


.alignleft {float: left; margin: 0 1em 1em 0;}
.alignright {float: right; margin: 0 0 1em 1em;}

/* -------------------------------------------------- 
	:: Navigation
	---------------------------------------------------*/

/*TOUCH MODE*/
/* menu button shows/hides menu in js */
.touch-nav #menulabel{text-align:center;width:100%;padding:10px 0; color:var(--primary-color); background:#e8e2d4; border:0; font-family:sans-serif;}
.touch-nav .nav-bar{display:none;}
.show-main-menu .touch-nav .nav-bar{display:block;}
/* the menu */
.touch-nav{margin:1px; color: #333;flex: 1;align-self: center;}
.touch-nav ul, .touch-nav li{padding:0; margin:0; text-align:center;}
.touch-nav a{display:block;padding:10px 0; border-bottom:1px solid #e8e2d4; color:#e8e2d4; text-decoration:none;}
.touch-nav .submenuopen a{ background:var(--primary-color); color:#e8e2d4;}
/* add arrows to show open/close state */
.touch-nav li.menu-item-has-children>a::after{content:'\25B6';padding-left:10px;width:25px;display:inline-block;transition: transform .2s ease;}
.touch-nav li.menu-item-has-children.submenuopen>a::after,
.touch-nav li.menu-item-has-children.sub-submenuopen>a::after{transform: rotate(90deg);}
/*smooth accordion, closed*/
.touch-nav .sub-menu a,
.touch-nav .submenuopen>.sub-menu .sub-menu a{max-height:1px; min-height:0; opacity:0; overflow:hidden; visibility:hidden; line-height:0; padding:0 10px 0 40px; border-bottom-width:0; transition:opacity .1s, max-height .1s, line-height .1s, padding .1s, visibility .1s, min-height .1s; } 
/*smooth accordion, opened*/
.touch-nav .submenuopen>.sub-menu a, 
.touch-nav .submenuopen>.sub-menu .sub-submenuopen .sub-menu a{max-height:300px; min-height:0; opacity:1; visibility:visible; line-height:1.8; padding:10px; border-bottom:1px dotted;}

@media screen and (max-width: 600px) { 
	.touch-nav { align-self: stretch; }
}

/*CLICK MODE*/
.is-touch .mobileonly{display:none;} /* a top-level menu item in the nav bar can be clicked on for desktop, but touch would only open its dropdown because of the js, so duplicate the link into the dropdown for touch, and add 'mobileonly' class to it to hide from desktop */
.click-nav #menulabel{display:none;}
.click-nav { font-size:15px; clear: both; margin: 0 auto; box-sizing: border-box; font-family: "Roboto Condensed", sans-serif;}
.click-nav a { color:#FFF; display:block; padding:1em; text-decoration:none; font-weight:bold;}
.click-nav a[href="#"] {cursor:default;}
.click-nav ul { text-transform: uppercase; list-style:none; margin:0; padding:0; text-align:center; display:flex; justify-content:center; flex-wrap:wrap;}
.click-nav ul li{ position:relative; margin:0; }
/* sub menus */
.click-nav ul ul { box-shadow: 2px 2px 3px rgba(0,0,0,0.2); opacity:0; filter:alpha(opacity=0); height:0; overflow:hidden; transition:opacity 0.2s ease-out; border:0 none; margin:0; position:absolute; top:100%; left:0; width:300px; z-index:111;}
.click-nav ul ul li { border-bottom:1px solid #FFF}
.click-nav ul ul a { height:auto; text-align:left; padding:10px; width:300px; font-weight:normal}
.click-nav ul ul ul { left:100%; top:0;}
.click-nav ul li:hover > ul, .click-nav ul li.generatedhover > ul { opacity:1; filter:alpha(opacity=100); display:block; height:auto; overflow:visible;}
/* colors, hover accents */
.click-nav ul ul li a{background:var(--stone); color:#333; font-weight:bold;}
.click-nav ul ul li:hover > a, .click-nav ul ul li a:focus, .click-nav ul ul li.current_page_item > a {background:#FFF}
/*arrows for inner*/
.click-nav>ul>li.menu-item-has-children>a::after{content:'\25BC';padding-left:2px;width:5px;display:inline-block}