/*
Theme Name: AoP Office
Theme URI: http://archphila.org/
Description: Archdiocese of Philadelphia
Author: L Gilbert
Version: 2.0.24
*/

html {box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}
body { margin: 0 }
[hidden] { display: none }
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100% } 
button, input, optgroup, select, textarea { font: inherit; } 

body { font:100%/1.5 "Helvetica Neue", Arial, sans-serif; padding:0; margin:0; display:block; width:100%; min-width:300px; }

h1, h2, h3, h4, h5, h6 { line-height:1.25; color:inherit; clear:both;}

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 { color: inherit; text-decoration: underline; line-height: inherit; }
a:hover { text-decoration:none }
a:focus { text-decoration:none }
p a, p a:visited { line-height: inherit; }

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

a.assistive-text, #page .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:WHITE; border: 2px solid #333; clip: auto !important; color:BLACK; display: block; 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 {display:table; width:100%; text-align:center; table-layout:fixed; border-collapse:collapse;}
.page-numbers {background:WHITE; padding:10px 0; border:1px solid BLACK; display:table-cell;}
.page-numbers.current, .page-numbers:hover {background:cornflowerblue; color:WHITE !important;}

.aligncenter { display:block; margin-left:auto; margin-right:auto; text-align:center; }
.alignleft { float:left; margin:0 1em 1em 0; }
.alignright { float:right; margin:0 0 1em 1em; }
.alignnone { display:block; margin:0 0 1em 0; }
.wp-caption { background:#f1f1f1; border:1px solid #ddd; max-width:100%; padding:5px; text-align:center; }
.wp-caption img { border:0 none; margin:0; padding:0; max-width:100%; height:auto; }
.wp-caption p.wp-caption-text { font-size:0.85em; line-height:1.5; margin:0; padding:5px 0; }
img.aligncenter, img.alignleft, img.alignright, img.alignnone { max-width:100%; height:auto; }

h2.headline{text-align:center}

#header > div{display: flex;justify-content: space-between; width: 100%; padding: 20px;}
#header .wp-block-group > div{flex:none}

/* full width vs not */
#content > * {padding-left:30px; padding-right:30px; margin-left:auto; margin-right:auto;}
#content > *:not(.alignfull){max-width:1600px;}

/* nav spacing */
@media screen and (max-width: 600px) {
	#header ul.wp-block-navigation-submenu a.wp-block-navigation-item__content{padding-bottom:20px; display:block;}
	#header .wp-block-navigation__responsive-container.is-menu-open{padding:20px}
}

#footer > div:last-child{margin-bottom:0}
#footer > * {padding-left:30px; padding-right:30px; margin-left:auto; margin-right:auto;}
#footer > *:not(.alignfull){max-width:1600px;}


.wp-block-cover.alignfull.title{margin-left: -30px; margin-right: -30px; border-radius: 0 0 33% 33%;}

/* counter gutenberg */
#content :where(figure){margin-bottom:unset}



/* front page */
.callout .wp-block-column{box-shadow: 1px 1px 2px 1px #00000070; border-radius: 7px; padding: 15px 5px;}
#content .didyouknow { font-family:'Arial', sans-serif; background:linear-gradient(135deg, #4a90e2 0%, #27ae60 100%); min-height:100vh; overflow-x:hidden; max-width:100%}
.didyouknowcontainer { max-width:1200px; margin:0 auto; padding:20px; }
.hero-section { text-align:center; padding:20px 0; position:relative; }
.main-title { font-size:4rem; font-weight:bold; color:white; margin-bottom:20px; text-shadow:2px 2px 4px rgba(0, 0, 0, 0.3); animation:fadeInUp 1s ease-out; }
.subtitle { font-size:1.5rem; color:rgba(255, 255, 255, 0.9); margin-bottom:50px; animation:fadeInUp 1s ease-out 0.2s both; }
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:30px; margin:50px 0; }
.stat-card { background:rgba(255, 255, 255, 0.95); backdrop-filter:blur(10px); border-radius:20px; padding:30px; text-align:center; transform:translateY(20px); opacity:0; animation:slideInUp 0.8s ease-out forwards; box-shadow:0 20px 40px rgba(0, 0, 0, 0.1); position:relative; overflow:hidden; }
.stat-card:nth-child(1) { animation-delay:0.1s; }
.stat-card:nth-child(2) { animation-delay:0.2s; }
.stat-card:nth-child(3) { animation-delay:0.3s; }
.stat-card:nth-child(4) { animation-delay:0.4s; }
.stat-icon { font-size:3rem; margin-bottom:15px; display:block; }
.stat-number { font-size:2.5rem; font-weight:bold; color:#2c3e50; margin-bottom:10px; }
.stat-text { font-size:1.1rem; color:#555; line-height:1.4; }
.cta-section { background:rgba(255, 255, 255, 0.95); backdrop-filter:blur(10px); border-radius:30px; padding:50px; margin:50px 0; text-align:center; animation:fadeInUp 1s ease-out 0.6s both; box-shadow:0 25px 50px rgba(0, 0, 0, 0.1); }
.cta-title { font-size:2.5rem; color:#2c3e50; margin-bottom:20px; font-weight:bold; }
.cta-subtitle { font-size:1.3rem; color:#555; margin-bottom:40px; line-height:1.6; }
.roles-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:25px; margin:40px 0; }
.role-card { background:#4a90e2; color:white; padding:25px; border-radius:15px; text-align:center; transform:scale(0.9); opacity:0; animation:popIn 0.6s ease-out forwards; }
.role-card:nth-child(1) { animation-delay:0.7s; }
.role-card:nth-child(2) { animation-delay:0.8s; }
.role-card:nth-child(3) { animation-delay:0.9s; }
.role-card:nth-child(4) { animation-delay:1.0s; }
.role-icon { font-size:2.5rem; margin-bottom:15px; display:block; }
.role-text { font-size:1rem; line-height:1.4; }
.action-section { background:linear-gradient(135deg, #2980b9, #16a085); color:white; padding:40px; border-radius:20px; text-align:center; margin:30px 0; animation:fadeInUp 1s ease-out 1.2s both; }
.action-text { font-size:1.2rem; margin-bottom:25px; line-height:1.6; }
.btn { display:inline-block; padding:15px 30px; margin:10px; background:white; color:#2980b9; text-decoration:none; border-radius:50px; font-weight:bold; font-size:1.1rem; transition:all 0.3s ease; box-shadow:0 5px 15px rgba(0, 0, 0, 0.2); }
.btn:hover { transform:translateY(-3px); box-shadow:0 10px 25px rgba(0, 0, 0, 0.3); background:#f8f9fa; }
@keyframes fadeInUp { from { opacity:0; transform:translateY(30px); }
	to { opacity:1; transform:translateY(0); }
}
@keyframes slideInUp { from { opacity:0; transform:translateY(50px); }
	to { opacity:1; transform:translateY(0); }
}
@keyframes popIn { from { opacity:0; transform:scale(0.8); }
	to { opacity:1; transform:scale(1); }
}
@media (max-width:768px) { .main-title { font-size:2.5rem; }
	.stats-grid { grid-template-columns:1fr; }
	.cta-section { padding:30px 20px; }
	.roles-grid { grid-template-columns:1fr; }
}