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

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block } 
body { margin: 0 } 
[hidden] { display: none } 
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; scroll-behavior: smooth; } 
ol, ul { margin: 1em 0; padding: 0 0 0 40px } 
figure { margin: 0 } 
form { margin: 0 } 
button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: normal; text-transform: none; margin: 0 } 
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; height: 13px; width: 13px } 
textarea { overflow: auto; vertical-align: top } 
table { border-collapse: collapse; border-spacing: 0; text-indent: 0; border-color: inherit; } 
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline }

:root { 
	--primary-color:#9e1b32; 
	--primary-dark:#7a1526;
	--accent-color:#f0c600; 
	--text-light:#f4f4f4; 
	--text-dark:#222222; 
	--background-light:#f9f9f9; 
	--background-hover:#f5f6fa; 
	--shadow-color:rgba(0, 0, 0, 0.1); 
	--transition-speed:0.3s; 
	--section-spacing:80px;
	/* Typography - Google Fonts (matching design reference) */
	--font-heading: 'Poppins', sans-serif;
	--font-body: 'Open Sans', sans-serif;
	--base-font: var(--font-body);
}

html {box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}

body { 
	background-color: #f1f0ea;
	font:100%/1.5 var(--base-font); 
	padding:0; 
	margin:0 auto; 
	text-align:left; 
	color:#444; 
	display:block; 
	width:100%; 
}

h1, h2, h3, h4, h5, h6 { 
	font-family: var(--font-heading);
	font-weight:700; 
	line-height:1.2; 
	color:inherit; 
	clear:both;
}
h1{font-size:3.5em}
h2{font-size: clamp(1.5rem, 4vw, 3em);}
h3{font-size: clamp(1.2rem, 4vw, 2em);}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight:inherit; color:inherit;}

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;}

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; 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 {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;}



/* full width vs not */
@media screen and (min-width:1200px) {
	#content > * {padding-left:60px; padding-right:60px; margin-left:auto; margin-right:auto;}
	#content > *:not(.alignfull){max-width:1600px;}
}

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

/*button hover inverse*/
.wp-block-button__link.has-background { transition: filter 0.3s ease; }
.wp-block-button__link.has-background:hover { filter: invert(100%); }





/* --- Navbar --- */
.navbar { background:white; height:80px; display:flex; justify-content:center; align-items:center; font-family:var(--font-heading); position:sticky; top:0; z-index:999; box-shadow:0 2px 10px rgba(0,0,0,0.1); width:100%; }
.navbar .container { width:90%; max-width:1200px; margin:0 auto; }
.nav-container { display:flex; justify-content:space-between; align-items:center; height:100%; }

/* Logo */
.navbar .logo { margin:0; }
.navbar .logo a { font-family:var(--font-heading); font-size:1.5rem; font-weight:800; color:var(--primary-color); text-decoration:none; transition:color 0.3s ease; }
.navbar .logo a:hover { color:var(--primary-dark); }

/* Nav Menu */
.nav-menu { display:flex; align-items:center; list-style:none; margin:0; padding:0; }
.nav-menu li { margin:0; list-style:none; position:relative; }
.nav-link { display:block; padding:0.5rem 0; margin-left:2rem; font-weight:600; font-size:0.9rem; text-transform:uppercase; color:var(--text-dark); text-decoration:none; transition:color 0.3s ease; }
.nav-link:hover, .nav-link:focus { color:var(--primary-color); outline:none; }

/* Current Page & Ancestor Highlighting */
.nav-menu .current-menu-item > .nav-link, .nav-menu .current_page_item > .nav-link { color:var(--primary-color); border-bottom:2px solid var(--primary-color); }
.nav-menu .current-menu-ancestor > .nav-link, .nav-menu .current-page-ancestor > .nav-link, .nav-menu .current_page_parent > .nav-link { color:var(--primary-color); }

/* Keyboard Focus Visibility */
.nav-link:focus-visible { outline:2px solid var(--primary-color); outline-offset:2px; border-radius:2px; }
.nav-menu .sub-menu .nav-link:focus-visible { outline-offset:0; }

/* Dropdown Arrow for Parent Items */
.nav-menu .menu-item-has-children > .nav-link::after { content:''; display:inline-block; width:0; height:0; margin-left:6px; vertical-align:middle; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid currentColor; transition:transform 0.3s ease; }
.nav-menu .menu-item-has-children:hover > .nav-link::after, .nav-menu .menu-item-has-children:focus-within > .nav-link::after { transform:rotate(180deg); }

/* Sub Menu (Dropdown) */
.nav-menu .sub-menu { position:absolute; top:100%; left:0; min-width:200px; background:white; list-style:none; margin:0; padding:0.5rem 0; box-shadow:0 8px 20px rgba(0,0,0,0.15); border-radius:8px; opacity:0; visibility:hidden; transform:translateY(10px); transition:all 0.3s ease; z-index:1000; }
.nav-menu .menu-item-has-children:hover > .sub-menu, .nav-menu .menu-item-has-children:focus-within > .sub-menu { opacity:1; visibility:visible; transform:translateY(0); }
.nav-menu .sub-menu li { margin:0; }
.nav-menu .sub-menu .nav-link { margin:0; padding:0.75rem 1.5rem; font-size:0.85rem; text-transform:none; font-weight:500; white-space:nowrap; border-bottom:none; }
.nav-menu .sub-menu .nav-link:hover, .nav-menu .sub-menu .nav-link:focus { background:var(--background-light); color:var(--primary-color); }
.nav-menu .sub-menu .current-menu-item > .nav-link { color:var(--primary-color); background:var(--background-light); font-weight:600; }

/* Nested Sub Menus (3rd level) */
.nav-menu .sub-menu .sub-menu { top:0; left:100%; margin-left:0; }
.nav-menu .sub-menu .menu-item-has-children > .nav-link::after { border-top:4px solid transparent; border-bottom:4px solid transparent; border-left:5px solid currentColor; border-right:none; margin-left:auto; }

/* Donate Button Style */
.nav-menu .menu-item-donate > a, .nav-link.btn-donate { background-color:var(--primary-color); color:white !important; padding:10px 25px !important; border-radius:30px; margin-left:2rem; border-bottom:none !important; }
.nav-menu .menu-item-donate > a:hover, .nav-menu .menu-item-donate > a:focus, .nav-link.btn-donate:hover { background-color:var(--primary-dark); }

/* Mobile Menu Toggle */
.menu-toggle { display:none; flex-direction:column; cursor:pointer; padding:5px; }
.menu-toggle .bar { height:3px; width:25px; background-color:var(--text-dark); margin:3px 0; transition:0.4s; border-radius:2px; }
.menu-toggle.active .bar:nth-child(1) { transform:translateY(9px) rotate(45deg); }
.menu-toggle.active .bar:nth-child(2) { opacity:0; }
.menu-toggle.active .bar:nth-child(3) { transform:translateY(-9px) rotate(-45deg); }

/* Mobile Responsive */
@media screen and (max-width:768px) {
	.menu-toggle { display:flex; z-index:1001; }
	.nav-menu { position:fixed; top:0; right:-100%; width:80%; max-width:300px; height:100vh; background:white; flex-direction:column; justify-content:flex-start; padding:5rem 2rem 2rem; transition:right 0.4s ease; box-shadow:-5px 0 15px rgba(0,0,0,0.1); overflow-y:auto; align-items:stretch; }
	.nav-menu.active { right:0; }
	.nav-menu > li { border-bottom:1px solid #eee; }
	.nav-link { margin:0; padding:1rem 0; font-size:1.1rem; }
	/* Mobile Dropdowns - Accordion Style */
	.nav-menu .menu-item-has-children > .nav-link { padding-right:2rem; }
	.nav-menu .menu-item-has-children > .nav-link::after { position:absolute; right:0; top:50%; transform:translateY(-50%); transition:transform 0.3s ease; }
	.nav-menu .menu-item-has-children.submenu-open > .nav-link::after, .nav-menu .menu-item-has-children:focus-within > .nav-link::after { transform:translateY(-50%) rotate(180deg); }
	.nav-menu .sub-menu { position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border-radius:0; max-height:0; overflow:hidden; transition:max-height 0.3s ease; padding:0; background:var(--background-light); margin:0; }
	.nav-menu .menu-item-has-children.submenu-open > .sub-menu, .nav-menu .menu-item-has-children:focus-within > .sub-menu { max-height:500px; padding:0.5rem 0; }
	.nav-menu .sub-menu .nav-link { padding:0.75rem 1rem 0.75rem 1.5rem; font-size:1rem; border-bottom:none; }
	.nav-menu .sub-menu .sub-menu { margin-left:1rem; background:transparent; }
	.nav-menu .sub-menu .current-menu-item > .nav-link { background:transparent; border-left:3px solid var(--primary-color); }
	/* Mobile Donate Button */
	.nav-menu .menu-item-donate > a, .nav-link.btn-donate { margin:1rem 0; display:inline-block; text-align:center; }
}


.is-style-rounded img { width:100%; height:100%; object-fit:cover; border-radius:50%; aspect-ratio:1 / 1; }
.is-style-rounded figure, .is-style-rounded .wp-block-image { aspect-ratio:1 / 1; width:100%; display:grid; place-items:center; }
.is-style-rounded figure { margin:0; overflow:hidden; line-height:0; }

.wp-block-spacer { clear: both; }
.wp-block-button__link:focus { outline: 2px solid var(--accent-color); outline-offset: 2px; }
.alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100%; width: 100vw; }
.pagetitle h2 { font-family: var(--font-heading); font-weight: 800; letter-spacing: 1px; }


/* ============================================= */
/* TEMPLE NEWMAN CENTER - FRONTPAGE STYLES      */
/* ============================================= */

/* --- Hero Section --- */
.hero { position:relative; }
.hero h1 { font-size:clamp(2.5rem, 8vw, 4rem); margin-bottom:1rem; text-shadow:2px 2px 4px rgba(0,0,0,0.5); font-family:var(--font-heading); font-weight:700; }
.hero p { font-size:clamp(1rem, 3vw, 1.5rem); margin-bottom:2rem; }
.hero .wp-block-button__link { background-color:var(--primary-color); color:white; border:2px solid var(--primary-color); padding:12px 30px; border-radius:50px; font-weight:600; text-transform:uppercase; letter-spacing:1px; transition:all 0.3s ease; text-decoration:none; }
.hero .wp-block-button__link:hover { background-color:var(--primary-dark); border-color:var(--primary-dark); transform:translateY(-3px); box-shadow:0 5px 15px rgba(158, 27, 50, 0.3); filter:none; }

/* --- About/Mission Section --- */
.ourmission { padding:var(--section-spacing) 0; }
.ourmission h2 { color:var(--primary-color); text-transform:uppercase; letter-spacing:1px; }
.ourmission .wp-block-media-text__content p { font-size:1.1rem; color:#555; }
.ourmission .wp-block-media-text__media img { border-radius:12px; box-shadow:0 15px 30px rgba(0,0,0,0.1); }

/* --- Events Section --- */
.events-section { padding:0; }
.events-section h2 { color:var(--primary-color); text-transform:uppercase; letter-spacing:1px; margin-bottom:1rem; }

/* --- Schedule Section --- */
.schedule-section { padding:0; }
.schedule-section h2 { color:var(--primary-color); text-transform:uppercase; letter-spacing:1px; }
.schedule-grid { gap:2rem !important; }
.schedule-card { background:white; padding:3rem 2rem; border-radius:16px; text-align:center; box-shadow:0 10px 30px rgba(0,0,0,0.08); border-top:5px solid transparent; transition:0.3s ease; }
.schedule-card:hover { border-top-color:var(--primary-color); }
.schedule-card h3 { margin-bottom:1.5rem !important; }
.schedule-card .card-icon { margin-bottom:1rem !important; }
.schedule-card .schedule-list { text-align:left; list-style:none; padding:0; margin-bottom:1.5rem; }
.schedule-card .schedule-list li { margin-bottom:0.8rem; font-size:1.1rem; }
.schedule-card .note { margin-top:1rem; }

/* --- Connect Section --- */
.connect-section { padding:0; }
.connect-grid { gap:4rem !important; }
.connect-block { text-align:center; padding:2rem; }
.connect-block h2 { margin-bottom:1.5rem !important; }
.qr-container img { margin:2rem auto !important; }
.connect-section .is-style-outline .wp-block-button__link { border:2px solid white !important; color:white !important; background:transparent !important; }
.connect-section .is-style-outline .wp-block-button__link:hover { background:white !important; color:var(--text-dark) !important; filter:none !important; }
.insta-embed-container { width:100%; max-width:540px; margin:0 auto; display:flex; justify-content:center; }
.instagram-media { margin:0 auto !important; width:100% !important; min-width:326px !important; }

/* --- Location Section --- */
.location-section { padding:0; }
.location-grid { gap:3rem !important; align-items:start; }
.location-text h2 { color:var(--primary-color); text-transform:uppercase; letter-spacing:1px; }
.location-text .address { font-size:1.2rem; margin-bottom:2rem; }
.location-details p { margin-bottom:0.5rem !important; font-size:1.1rem; display:flex; align-items:center; gap:10px; }
.building-photo img { border-radius:12px; }
.map-container iframe { border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,0.1); }

/* --- Contact Page --- */
.contact-page { padding:0 0 var(--section-spacing); }
.contact-page > h2 { text-transform:uppercase; letter-spacing:1px; margin-bottom:1rem; }
.contact-grid { gap:2rem !important; }
.contact-card-inner { box-shadow:0 10px 30px rgba(0,0,0,0.08); border-top:5px solid transparent; transition:all 0.3s ease; text-align:center; height:100%; }
.contact-card-inner:hover { border-top-color:var(--primary-color); transform:translateY(-5px); box-shadow:0 15px 40px rgba(0,0,0,0.12); }
.contact-card-inner h3 { margin-bottom:1rem !important; text-transform:uppercase; letter-spacing:1px; }
.contact-card-inner p { margin-bottom:0.75rem; }
.contact-card-inner .wp-block-buttons { margin-top:1rem; }
.contact-card-inner .wp-block-button__link { font-weight:600; text-transform:uppercase; letter-spacing:0.5px; font-size:0.9rem; }
.contact-card-inner .is-style-outline .wp-block-button__link { border:2px solid var(--primary-color); color:var(--primary-color); }
.contact-card-inner .is-style-outline .wp-block-button__link:hover { background:var(--primary-color); color:white; filter:none; }

/* --- Staff Page --- */
.staff-page { padding:var(--section-spacing) 0; }
.staff-page .section-heading { font-family:var(--font-heading); font-size:2rem; font-weight:700; text-transform:uppercase; letter-spacing:2px; color:var(--text-dark); margin-bottom:2rem; padding-bottom:0.5rem; border-bottom:4px solid var(--primary-color); display:inline-block; }

/* Staff Grid */
.staff-grid { gap:2rem !important; margin-bottom:2rem; }
.staff-card { text-align:center; }
.staff-card .staff-photo img { width:100%; max-width:280px; height:auto; object-fit:cover; border-radius:8px; margin:0 auto 1rem; box-shadow:0 4px 15px rgba(0,0,0,0.1); }
.staff-card .staff-name { font-size:1.25rem; font-weight:700; margin-bottom:0.25rem !important; color:var(--text-dark); }
.staff-card .staff-title { font-size:0.95rem; color:#666; margin-bottom:0.5rem !important; font-style:italic; }
.staff-card .staff-email { margin-bottom:0.75rem !important; }
.staff-card .staff-email a { color:var(--primary-color); text-decoration:none; font-size:0.9rem; }
.staff-card .staff-email a:hover { text-decoration:underline; }
.staff-funfact { background:linear-gradient(135deg, #fef3f3 0%, #fff 100%); border-left:3px solid var(--primary-color); padding:0.75rem 1rem; font-size:0.9rem; color:#555; margin-top:0.75rem !important; border-radius:0 8px 8px 0; }
.staff-funfact strong { color:var(--primary-color); }

/* Missionary Grid */
.missionary-grid { gap:1.5rem !important; }
.missionary-card { text-align:center; }
.missionary-card .missionary-photo img { width:100%; max-width:220px; height:auto; object-fit:cover; border-radius:8px; margin:0 auto 0.75rem; box-shadow:0 4px 15px rgba(0,0,0,0.1); }
.missionary-card .missionary-name { font-size:1.1rem; font-weight:600; margin-bottom:0.5rem !important; color:var(--text-dark); }

/* Student Leader Grid */
.leader-grid { gap:2rem !important; margin-bottom:2rem; }
.leader-card { background:#fff; border-radius:12px; padding:1.5rem; box-shadow:0 4px 20px rgba(0,0,0,0.08); border:1px solid #eee; }
.leader-card-inner { gap:1.25rem !important; align-items:flex-start !important; }
.leader-card .leader-photo { flex-shrink:0; margin:0 !important; }
.leader-card .leader-photo img { width:150px; height:170px; object-fit:cover; border-radius:8px; box-shadow:0 3px 10px rgba(0,0,0,0.1); }
.leader-card .leader-info { flex:1; }
.leader-card .leader-info p { margin-bottom:0.75rem !important; }
.leader-card .leader-year-major { font-size:0.9rem; color:#555; line-height:1.6; }
.leader-card .leader-description { font-size:0.9rem; color:#444; line-height:1.6; }
.leader-card .leader-name { font-size:1.2rem; font-weight:700; margin:1rem 0 0.25rem !important; color:var(--text-dark); }
.leader-card .leader-title { font-size:0.9rem; color:var(--primary-color); font-weight:600; margin-bottom:0.25rem !important; }
.leader-card .leader-email { margin-bottom:0 !important; }
.leader-card .leader-email a { color:var(--primary-color); text-decoration:none; font-size:0.85rem; }
.leader-card .leader-email a:hover { text-decoration:underline; }
.leader-card .staff-funfact { margin-top:0.5rem !important; font-size:0.85rem; padding:0.5rem 0.75rem; }

/* --- Footer Enhancements --- */
#footer { background:#111; color:#aaa; padding:3rem 0; text-align:center; }
#footer a { color:white; }
#footer a:hover { color:var(--primary-color); }

/* --- Mobile Responsiveness --- */
@media screen and (max-width:782px) {
	:root { --section-spacing:50px; }
	.hero h1 { font-size:2.5rem; }
	.hero p { font-size:1.1rem; }
	.about-grid, .connect-grid, .location-grid, .schedule-grid, .events-grid, .contact-grid, .staff-grid, .missionary-grid, .leader-grid { flex-direction:column; }
	.schedule-card, .event-card { padding:1.5rem; }
	.connect-grid { gap:0 !important; }
	.connect-block { padding:3rem 1rem; border-bottom:1px solid #333; }
	.connect-block:last-child { border-bottom:none; }
	.event-card-inner { flex-direction:column !important; text-align:center; }
	.event-date { margin-bottom:1rem; }
	.contact-grid { gap:1.5rem !important; }
	.contact-card-inner { padding:2rem 1.5rem !important; }
	/* Staff page mobile */
	.staff-card .staff-photo img, .missionary-card .missionary-photo img { max-width:200px; }
	.leader-card-inner { flex-direction:column !important; }
	.leader-card .leader-photo img { width:120px; height:140px; margin:0 auto !important; }
	.leader-card .leader-info { text-align:center; }
	.leader-card .staff-funfact { text-align:left; }
}