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

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% } 
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:#172129; 
	--accent-color:#C7A58B; 

	/*nav*/
	--text-light:#ffffff; 
	--text-dark:#2d3436; 
	--background-light:#ffffff; 
	--background-hover:#f5f6fa; 
	--shadow-color:rgba(0, 0, 0, 0.1); 
	--transition-speed:0.3s; 
	
	/* Typography - Google Fonts */
	--font-heading: 'Cormorant Garamond', Georgia, serif;
	--font-body: 'Lato', Arial, Helvetica, sans-serif;
	--font-pagetitle: 'Playfair Display', Georgia, 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:normal; 
	line-height:1.25; 
	color:inherit; 
	clear:both; 
	font-weight: bold; 
	letter-spacing: 2px
}
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%); }




/* header */
#header{ background:var(--primary-color); width:100%; max-width:100% !important; position: sticky;top: 0;z-index: 9;}
#header.scrolled img{height:75px}
#headerinnerspacing{max-width:1600px; margin:auto; padding:10px; display:flex; flex-wrap:wrap; align-items:flex-end; gap:50px; justify-content:center;}
#headerinnerspacing div{margin:0}
#header .wp-block-column:last-of-type{display:flex; gap:20px; justify-content: right; align-items:center}
#header p{margin:0}

.widget-wrapper img { flex-shrink:0; width:auto; height:auto; } /* Prevent images from shrinking */

@media screen and (max-width:1200px) {
	#header { flex-direction:column; align-items:center; justify-content:center; text-align:center; }
	.widget-wrapper { margin-bottom:15px; width:100%; display:flex; justify-content:center; }
	.widget-wrapper:has(nav) { flex:none; width:100%; }
	.top-navigation .menulabel { display:block; margin:10px auto; padding:8px 15px; background:rgba(255, 255, 255, 0.2); border:none; border-radius:4px; cursor:pointer; }
}
@media screen and (max-width:768px) { 
	#header { padding:15px 10px; }
	.widget-wrapper figure { max-width:220px; }
}



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





/* -------------------------------------------------- 
:: Home Page Sections
---------------------------------------------------*/

/* Mission Statement Section */
.mission-statement-section { background: #f8f7f2; padding: 60px 20px; }
.mission-columns { align-items: center; gap: 40px; }
.mission-image img { border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.section-heading { color: var(--primary-color); font-size: clamp(1.8rem, 4vw, 2.5em); margin-bottom: 1.5rem; padding-bottom: 0.5rem; border-bottom: 3px solid var(--accent-color); display: inline-block; }
.mission-statement-section p { line-height: 1.8; margin-bottom: 1.2em; color: #555; }
.mission-statement-section ul { margin-left: 1.5em; }
.mission-statement-section li { margin-bottom: 0.8em; line-height: 1.7; }

/* Announcements Section */
.announcements-section { padding: 40px 20px; background: #fff; }
.section-heading-center { color: var(--primary-color); font-size: clamp(2rem, 4vw, 3em); margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 3px; }
.announcement-columns { gap: 40px; }
.announcement-card { padding: 30px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.announcement-card:hover { transform: translateY(-5px); box-shadow: 0 6px 20px rgba(0,0,0,0.15); }
.announcement-card figure { margin: 0 0 20px 0; border-radius: 6px; overflow: hidden; }
.announcement-card img { width: 100%; height: auto; display: block; }
.announcement-title { color: var(--accent-color); font-size: clamp(1.3rem, 3vw, 1.8em); margin-bottom: 1rem; }
.announcement-card p { line-height: 1.7; color: #666; margin-bottom: 1.5em; }
.announcement-button .wp-block-button__link { background: var(--accent-color); color: white; padding: 12px 30px; border-radius: 4px; text-decoration: none; font-weight: bold; transition: background 0.3s ease; }
.announcement-button .wp-block-button__link:hover { background: var(--primary-color); }
.food-pantry-times { background: #f9f9f9; padding: 15px; border-left: 4px solid var(--accent-color); margin: 1em 0; }

/* Office for Black Catholics Section */
.office-black-catholics { text-align: center; }
.office-black-catholics figure { margin: 20px auto; }
.obc-signup { font-size: 1.3em; color: var(--accent-color); margin: 1em 0; }
.register-button .wp-block-button__link { background: var(--primary-color); color: white; padding: 15px 40px; border-radius: 4px; text-decoration: none; font-weight: bold; font-size: 1.1em; transition: background 0.3s ease; }
.register-button .wp-block-button__link:hover { background: var(--accent-color); }

/* Parish Giving Section */
.parish-giving-section { background: #f8f7f2; text-align: center; }
.parish-giving-section figure { margin: 20px auto; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.parish-giving-section p { font-size: 1.1em; color: #555; margin: 1em 0; }

/* Church Information Section */
.church-info-section { background: #fff; padding: 60px 20px; }
.church-info-columns { gap: 40px; }
.info-card { padding: 0; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.info-card:hover { transform: translateY(-5px); box-shadow: 0 6px 20px rgba(0,0,0,0.15); }
.info-card figure { margin: 0; }
.info-card img { width: 100%; height: auto; display: block; }
.info-card .wp-block-heading, .info-card p { padding: 0 25px; }
.info-title { color: var(--primary-color); font-size: clamp(1.3rem, 3vw, 1.8em); margin: 20px 0 15px; text-align: center; }
.info-time { text-align: center; color: #555; line-height: 1.8; margin-bottom: 1.5em; }
.info-card p:last-child { padding-bottom: 25px; }

/* Events Section */
.events-section { background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://picsum.photos/1920/600?random=10'); background-size: cover; background-position: center; color: white; text-align: center; }
.events-image { margin-bottom: 30px; }
.events-heading { color: white; font-size: clamp(2.5rem, 5vw, 4em); letter-spacing: 5px; margin-bottom: 0.5rem; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
.events-subtitle { color: white; font-size: 1.3em; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); }

/* Contact Footer */
.contact-footer { border-top: 1px solid #ddd; }
.contact-footer h3 { color: var(--primary-color); margin-bottom: 1rem; }
.contact-footer p { color: #555; line-height: 1.8; }
.contact-footer figure { margin: 20px auto; }

/* Responsive Adjustments */
@media screen and (max-width: 782px) {
	.mission-columns, .announcement-columns, .church-info-columns { flex-direction: column; }
	.mission-columns .wp-block-column, .announcement-columns .wp-block-column, .church-info-columns .wp-block-column { flex-basis: 100% !important; }
	.section-heading { font-size: 1.8rem; }
	.section-heading-center { font-size: 2rem; }
	.announcement-card, .info-card { margin-bottom: 30px; }
}

@media screen and (max-width: 600px) {
	.mission-statement-section, .announcements-section, .church-info-section { padding: 40px 15px; }
	.section-heading { font-size: 1.5rem; }
	.section-heading-center { font-size: 1.8rem; letter-spacing: 2px; }
	.events-heading { font-size: 2rem; letter-spacing: 3px; }
}

/* Additional Styling Enhancements */
.wp-block-button { margin-bottom: 0; }
.wp-block-buttons { margin-top: 1.5em; }
.has-text-align-center { text-align: center; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

/* Slideshow adjustments */
.slideshow { margin-bottom: 0; }
.slideshow .wp-block-cover { margin-bottom: 0; }

/* Smooth scrolling */
html { scroll-behavior: smooth; }

/* Link styling in content areas */
.announcement-card a, .info-card a { color: var(--accent-color); text-decoration: none; transition: color 0.3s ease; }
.announcement-card a:hover, .info-card a:hover { color: var(--primary-color); text-decoration: underline; }

/* Spacing utilities */
.wp-block-spacer { clear: both; }

/* Typography refinements */
.mission-statement-section strong, .announcement-card strong, .info-card strong { color: var(--primary-color); font-weight: 600; }

/* Box shadow utilities */
.has-white-background-color { background-color: #fff; }
.has-background { padding: 20px; }

/* Hover effects for images */
.announcement-card figure img, .info-card figure img { transition: transform 0.3s ease; }
.announcement-card:hover figure img, .info-card:hover figure img { transform: scale(1.05); }
.announcement-card figure, .info-card figure { overflow: hidden; }

/* Button focus states */
.wp-block-button__link:focus { outline: 2px solid var(--accent-color); outline-offset: 2px; }

/* List styling in mission statement */
.mission-statement-section ul li::marker { color: var(--accent-color); }

/* Ensure proper spacing for full-width sections */
.alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100%; width: 100vw; }

/* Page Title Styling */
.pagetitle h2 { font-family: var(--font-pagetitle); font-weight: 800; letter-spacing: 1px; }

/* Print styles */
@media print {
	.slideshow, .events-section { display: none; }
	body { background: white; color: black; }
}



/* -------------------------------------------------- 
:: Programs List Styling
---------------------------------------------------*/
.programs-list { display: flex; flex-direction: column; gap: 25px; max-width: 1000px; margin: 0 auto; }
.program-item { background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border-left: 5px solid var(--primary-color); padding: 30px; border-radius: 8px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08); transition: all 0.3s ease; position: relative; overflow: hidden; }
.program-item:nth-child(even) { border-left-color: var(--accent-color); }
.program-item:nth-child(even)::before { background: var(--primary-color); }
.program-title { color: var(--primary-color); font-size: clamp(1.3rem, 3vw, 1.6em); margin: 0 0 15px 0 !important; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.program-item:nth-child(even) .program-title { color: var(--accent-color); }
.program-time { color: #555; font-weight: 600; font-size: 1.05em; margin: 0 0 10px 0 !important; display: flex; align-items: center; gap: 8px; }
.program-details { color: #666; line-height: 1.7; margin: 0 0 10px 0 !important; }
.program-contact { color: var(--primary-color); font-size: 0.95em; margin: 15px 0 0 0 !important; padding-top: 15px; border-top: 1px solid rgba(0, 0, 0, 0.1); }
@media screen and (max-width: 768px) { .program-item { padding: 20px; } .program-title { font-size: 1.2rem; } }





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

/* TOUCH MODE */
.touch-nav .menulabel { width:100%; padding:1rem; background:var(--accent-color); color:var(--text-light); border:0; font-size:1rem; font-weight:500; cursor:pointer; transition:background-color var(--transition-speed); }
.touch-nav .nav-bar { display:none; background:var(--background-light); box-shadow:0 4px 6px var(--shadow-color); }
.show-main-menu .touch-nav .nav-bar { display:block; }
.touch-nav { margin:0; color:var(--text-dark); font-family: var(--base-font); }
.touch-nav ul, .touch-nav li { padding:0; margin:0; list-style:none; }
.touch-nav a { display:block; padding:1rem; color:var(--text-dark); text-decoration:none; border-bottom:1px solid rgba(0, 0, 0, 0.1); transition:all var(--transition-speed); }
.touch-nav a:hover { background:var(--background-hover); padding-left:1.5rem; }
.touch-nav .submenuopen > a, .touch-nav .current-menu-item > a, .touch-nav .current_page_parent > a { background:var(--background-hover); color:var(--accent-color); }
.touch-nav .current-menu-item > a { font-weight:600; }

/* arrow indicators - now using separate tappable buttons */
.touch-nav .submenu-arrow { display:inline-block; width:2.5rem; height:2.5rem; position:absolute; right:0.5rem; top:50%; transform:translateY(-50%); cursor:pointer; border-radius:4px; transition:background-color var(--transition-speed); background:var(--primary-color); color:#FFF; }
.touch-nav .submenu-arrow:hover, .touch-nav .submenu-arrow:focus { background:rgba(0, 0, 0, 0.1); outline:none; }
.touch-nav .submenu-arrow::after { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%) rotate(-45deg); width:0.4rem; height:0.4rem; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transition:transform var(--transition-speed); }
.touch-nav .submenuopen .submenu-arrow::after { transform:translate(-50%, -50%) rotate(45deg); }
.touch-nav li.menu-item-has-children > a { position:relative; padding-right:3rem; }

/* Nested submenu arrows (smaller and positioned correctly) */
.touch-nav .sub-menu .submenu-arrow { width:2rem; height:2rem; right:0.25rem; background:var(--accent-color); }
.touch-nav .sub-menu .submenu-arrow::after { 
	width:0.3rem; 
	height:0.3rem; 
	/* Ensure nested arrows start pointing right (closed state) */
	transform:translate(-50%, -50%) rotate(-45deg) !important; 
}
/* Only rotate to down position when the specific nested submenu is open */
.touch-nav .sub-menu .submenuopen .submenu-arrow::after { 
	transform:translate(-50%, -50%) rotate(45deg) !important; 
}

/* Smooth accordion animations */
.touch-nav .sub-menu a { max-height:0; opacity:0; overflow:hidden; visibility:hidden; padding:0 1rem 0 2rem; border-bottom-width:0; transition:all var(--transition-speed); }
.touch-nav .submenuopen > .sub-menu > li > a { max-height:3rem; opacity:1; visibility:visible; padding:1rem 1rem 1rem 2rem; border-bottom:1px solid rgba(0, 0, 0, 0.1); }

/* Nested submenus (third level and beyond) */
.touch-nav .sub-menu .sub-menu a { max-height:0; opacity:0; overflow:hidden; visibility:hidden; padding:0 1rem 0 3rem; border-bottom-width:0; transition:all var(--transition-speed); }
.touch-nav .sub-menu .submenuopen > .sub-menu > li > a { max-height:3rem; opacity:1; visibility:visible; padding:1rem 1rem 1rem 3rem; border-bottom:1px solid rgba(0, 0, 0, 0.1); }

/* Fourth level and beyond */
.touch-nav .sub-menu .sub-menu .sub-menu a { padding-left:4rem; }
.touch-nav .sub-menu .sub-menu .submenuopen > .sub-menu > li > a { padding-left:4rem; }


/* CLICK MODE */
nav.click-nav{padding-bottom:17px;}
body:has(#wpadminbar) nav.click-nav{ top:32px; }
.click-nav .menulabel { display:none; }
.click-nav { background:var(--primary-color); /*box-shadow:0 2px 4px var(--shadow-color);*/ padding:0 1rem; font-family: var(--base-font); }
.click-nav ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; }
.click-nav ul li { position:relative; }
.click-nav a { color:var(--text-light); text-decoration:none; padding:1rem 1rem; display:block; font-weight:500; transition:all var(--transition-speed); }
.home .click-nav a { padding:.5rem 1rem;}

/* Top level items */
.click-nav .noparent > a { position:relative; }
.click-nav .noparent > a::after { content:''; position:absolute; bottom:0; left:0; width:100%; height:3px; background:var(--accent-color); transform:scaleX(0); transition:transform var(--transition-speed); }
.click-nav .noparent:hover > a::after, .click-nav .noparent a:focus::after, .click-nav .noparent.current_page_item > a::after, .click-nav .noparent.current_page_parent > a::after { transform:scaleX(1); }

/* Current page indicators */
.click-nav .current-menu-item > a { color:var(--accent-color); font-weight:600; }
.click-nav ul ul .current-menu-item > a { background:var(--background-hover); }

/* Dropdown menus */
.click-nav ul ul { background:var(--background-light); /*box-shadow:0 4px 12px var(--shadow-color);*/ border-radius:4px; opacity:0; visibility:hidden; position:absolute; top:100%; left:0; min-width:200px; z-index:9999; transform:translateY(-10px); transition:all var(--transition-speed); display:block; padding:0.5rem 0; }
.click-nav ul ul a { color:var(--text-dark); padding:0.75rem 1rem; }
.click-nav ul ul ul { left:100%; top:0; }
.click-nav ul li:hover > ul, .click-nav ul li:focus-within > ul { opacity:1; visibility:visible; transform:translateY(0); }

/* Dropdown arrows */
.click-nav .noparent li.menu-item-has-children > a::after { content:''; display:inline-block; width:0.4rem; height:0.4rem; margin-left:0.5rem; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg); }

/* Last menu item alignment */
.click-nav > ul > li:last-child ul { left:auto; right:0; }
.click-nav > ul > li:last-child ul ul { right:100%; left:auto; }

/* Hover effects */
.click-nav ul ul li:hover > a, .click-nav ul ul li a:focus { background: var(--background-hover); color: var(--accent-color); }

/* Responsive adjustments */
@media (max-width:600px) { .click-nav, .touch-nav { padding:0; }
	.touch-nav a { padding:1rem; }
	.touch-nav .submenuopen > .sub-menu > li > a { padding:1rem 1rem 1rem 2rem; }
	.touch-nav .sub-menu .submenuopen > .sub-menu > li > a { padding:1rem 1rem 1rem 3rem; }
}