/*
Theme Name: AoP Parish
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:#084f08; 
	--accent-color:#F9D71C; 

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

/* -------------------------------------------------- 
:: WordPress Alignment Classes
---------------------------------------------------*/

/* Image and Content Alignment */
.alignleft { float: left; margin: 0.5em 1.5em 1em 0; }
.alignright { float: right; margin: 0.5em 0 1em 1.5em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; clear: both; }

/* Text Alignment */
.has-text-align-left { text-align: left; }
.has-text-align-center { text-align: center; }
.has-text-align-right { text-align: right; }
.has-text-align-justify { text-align: justify; }

/* Wide and Full Width */
.alignwide { margin-left: auto; margin-right: auto; max-width: 1200px; width: 100%; }
.alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; width: 100vw; }

/* Figures with alignment */
figure.alignleft { float: left; margin: 0.5em 1.5em 1em 0; }
figure.alignright { float: right; margin: 0.5em 0 1em 1.5em; }
figure.aligncenter { display: block; margin-left: auto; margin-right: auto; clear: both; }

/* Images within aligned figures */
.alignleft img, .alignright img, .aligncenter img { display: block; }

/* Caption styling for aligned images */
.wp-caption { max-width: 100%; }
.wp-caption.alignleft { float: left; margin: 0.5em 1.5em 1em 0; }
.wp-caption.alignright { float: right; margin: 0.5em 0 1em 1.5em; }
.wp-caption.aligncenter { display: block; margin-left: auto; margin-right: auto; clear: both; }
.wp-caption img { display: block; margin: 0; max-width: 100%; }
.wp-caption-text { font-size: 0.9em; font-style: italic; color: #666; margin-top: 0.5em; text-align: center; }

/* Block alignments */
.wp-block-image.alignleft { float: left; margin: 0.5em 1.5em 1em 0; }
.wp-block-image.alignright { float: right; margin: 0.5em 0 1em 1.5em; }
.wp-block-image.aligncenter { display: block; margin-left: auto; margin-right: auto; clear: both; }

/* Responsive adjustments for alignment */
@media (max-width: 768px) {
	.alignleft, .alignright, figure.alignleft, figure.alignright, .wp-caption.alignleft, .wp-caption.alignright, .wp-block-image.alignleft, .wp-block-image.alignright { float: none; margin: 1em auto; display: block; max-width: 100%; }
	.alignwide { max-width: 100%; padding-left: 1rem; padding-right: 1rem; }
}

/* Clear floats */
.clear { clear: both; }
.clearfix::after { content: ""; display: table; clear: both; }




/* 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; justify-content:space-between;}
#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}

.toplogo figcaption{font-family: var(--font-pagetitle); text-align: center; color:#000}
.invert{filter: invert(1);}

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

.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; }
h2.pagetitle, .pagetitle h2 { font-family: var(--font-pagetitle); font-weight: 800; letter-spacing: 1px; }

/* -------------------------------------------------- 
:: Home Page Custom Styles
---------------------------------------------------*/

/* Hero Section */
.hero .wp-block-cover__inner-container { padding: 3rem 1.5rem; }
.hero h2 { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 700; margin-bottom: 1rem; text-shadow: 2px 4px 8px rgba(0, 0, 0, 0.4); letter-spacing: 3px; border-bottom: 1px solid; max-width: max-content; padding-bottom: 17px; font-family: var(--font-pagetitle);}
.hero p { font-size: clamp(1.1rem, 2.5vw, 1.5rem); font-weight: 300; letter-spacing: 1px; text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.8); max-width: 800px; margin: 0 auto; }

/* Our Mission Section */
.ourmission { padding: 2rem 1.5rem; }
.ourmission h2 { color: var(--primary-color); margin-bottom: 2rem; position: relative; display: inline-block; left: 50%; transform: translateX(-50%); }
.ourmission h2::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 80px; height: 3px; background: var(--accent-color); }
.ourmission .wp-block-media-text { border-radius: 8px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); background: white; box-shadow 0.3s ease; }
.ourmission .wp-block-media-text__content { padding: 2.5rem; display: flex; align-items: center; }
.ourmission .wp-block-media-text__content p { font-size: clamp(1rem, 2vw, 1.2rem); line-height: 1.8; color: #333; text-align: justify; }
.ourmission .wp-block-media-text__media img { object-fit: cover; height: 100%; }

/* Mass Times Section */
.masstimes { padding: 4rem 1.5rem; }
.masstimes .wp-block-cover__inner-container { max-width: 1200px; margin: 0 auto; }
.masstimes .wp-block-columns { gap: 3rem; }
.masstimes .wp-block-column { background: rgba(255, 255, 255, 0.95); border-radius: 12px; padding: 2.5rem 2rem; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); backdrop-filter: blur(10px); box-shadow 0.3s ease; border-top: 4px solid var(--accent-color); }
.masstimes h2 { color: var(--primary-color); margin-bottom: 1.5rem; font-size: clamp(1.8rem, 3vw, 2.5rem); position: relative; padding-bottom: 0.5rem; }
.masstimes h2::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 2px; background: var(--accent-color); }
.masstimes p { color: #2d3436; line-height: 1.9; font-size: clamp(1rem, 2vw, 1.1rem); margin-bottom: 1.2rem; }
.masstimes p strong, .masstimes p b { color: var(--primary-color); font-weight: 600; }
.masstimes p em { color: #555; font-style: italic; }
.masstimes a { color: var(--primary-color); font-weight: 500; }
.masstimes a:hover { text-decoration: none; }

/* Contact Section */
.contact-section h2 { color: var(--primary-color); margin-bottom: 2rem; position: relative; display: inline-block; left: 50%; transform: translateX(-50%); }
.contact-section h2::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 80px; height: 3px; background: var(--accent-color); }
.contact-section p { font-size: clamp(1rem, 2vw, 1.15rem); margin-bottom: 1.5rem; color: #333; }
.contact-section p strong { color: var(--primary-color); font-weight: 600; display: block; margin-bottom: 0.3rem; }
.contact-section p a { color: var(--primary-color); font-weight: 500; text-decoration: none; border-bottom: 2px solid transparent; display: inline-block; }
.contact-section p a:hover { border-bottom-color: var(--accent-color); }

/* Additional Polish */
.wp-block-spacer { clear: both; }
.wp-block-cover { position: relative; }
.wp-block-cover__inner-container { position: relative; z-index: 2; }

/* Responsive adjustments for Mass Times */
@media (max-width: 781px) {
	.masstimes .wp-block-columns { gap: 2rem; }
	.masstimes .wp-block-column { padding: 2rem 1.5rem; }
	.ourmission .wp-block-media-text__content p { text-align: left; }
}

@media (max-width: 600px) {
	.hero .wp-block-cover__inner-container { padding: 2rem 1rem; }
	.hero h2 { letter-spacing: 2px; }
	.ourmission { padding: 1.5rem 1rem; }
	.ourmission .wp-block-media-text__content { padding: 1.5rem; }
	.ourmission .wp-block-media-text__content p { text-align: left; }
	.masstimes { padding: 3rem 1rem; }
	.masstimes .wp-block-column { padding: 1.5rem 1rem; }
	.masstimes .wp-block-column:hover { transform: none; }
	.contact-section { padding: 2rem 1rem; margin: 1rem; }
}





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

/* TOUCH MODE */
.touch-nav .menulabel { width:100%; padding:1rem; background:var(--accent-color); color:var(--primary-color); 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 { width: 100%; max-width: 600px; 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(--primary-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 8px rgba(0, 0, 0, 0.15); 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 1.2rem; display:block; font-weight:500; transition:all var(--transition-speed); letter-spacing:0.5px; }
.home .click-nav a { padding:.5rem 1.2rem;}

/* 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 8px 20px rgba(0, 0, 0, 0.12); border-radius:6px; opacity:0; visibility:hidden; position:absolute; top:100%; left:0; min-width:220px; z-index:9999; transform:translateY(-10px); transition:all var(--transition-speed); display:block; padding:0.5rem 0; border-top:3px solid var(--accent-color); }
.click-nav ul ul a { color:var(--text-dark); padding:0.85rem 1.2rem; }
.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; }
}