/*
Theme Name: AoP Office
Theme URI: http://archphila.org/
Description: Archdiocese of Philadelphia
Author: Archdiocese of Philadelphia
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% } 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 } [type=button], [type=reset], [type=submit], button { -webkit-appearance: button } 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 }

/* Base styles */
:root { 
	/* Colors */
	--primary-color:#772d16;
	--accent-color:#d4af37; 
	--text-light:#ffffff; 
	--text-dark:#2c3e50; 
	--background-light:#ffffff; 
	--background-hover:#f5f6fa; 
	--shadow-color:rgba(0, 0, 0, 0.1); 
	
	/* Transitions */
	--transition-speed:0.3s; 
	
	/* Font Families */
	--base-font: "Open Sans", sans-serif;
	--display-font: "Playfair Display", serif;
}



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

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

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

/* Line-style headlines */
h1.line, h2.line, h3.line, h4.line, h5.line, h6.line { display:flex; align-items:center; }
h1.line:after, h2.line:after, h3.line:after, h4.line:after, h5.line:after, h6.line:after { content:''; display:block; flex-grow:1; border-top:1px solid; margin:0 0 0 1ch; }
/* Centered line headlines (line on both sides) */
h1.line.has-text-align-center, h2.line.has-text-align-center, h3.line.has-text-align-center, h4.line.has-text-align-center, h5.line.has-text-align-center, h6.line.has-text-align-center { justify-content:center; }
h1.line.has-text-align-center:before, h2.line.has-text-align-center:before, h3.line.has-text-align-center:before, h4.line.has-text-align-center:before, h5.line.has-text-align-center:before, h6.line.has-text-align-center:before { content:''; display:block; flex-grow:1; border-top:1px solid; margin:0 1ch 0 0; }


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

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


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

.page-cover { background-size:cover; background-position:center; padding:50px; text-align:center; height:50vh; display:flex; flex-direction:column; justify-content:center; }
h1.page-title { margin:0; font-weight:bold; font-size: clamp(30px, 5vw + 1rem, 5em); }

#header > div{margin:0 auto; max-width:1600px; padding:20px}

#footercover > * {padding-left:30px; padding-right:30px; margin-left:auto; margin-right:auto;}
#footercover > *:not(.alignfull){max-width:1600px;}
footer{ background: var(--text-dark); color: #FFF; padding: 3rem 0 1rem; }
#footercover .copyright{max-width: 100%;background: #333;margin: 20px 0 -20px;padding: 10px;text-transform: uppercase;font-size: 80%;letter-spacing: 2px;}


/* HOME NAV */
.homeheader{ background:var(--primary-color); width:100%; position:static; top:0; max-width:100% !important; padding:20px; display:flex; align-items:center; gap:10px; justify-content:space-between; }
#content .homeheader div{margin:0}
.homeheader .wp-block-column:last-of-type{display:flex; gap:20px; justify-content: right; align-items:center}
.homeheader p{margin:0}
.custom-search-form { display:flex; align-items:center; border:2px solid #FFF; border-radius:25px; padding:5px 10px; width:250px; margin:0 }
.custom-search-form .search-icon { font-size:18px; margin-right:5px; }
.custom-search-form input[type="search"] { border:none; outline:none; flex:1; font-size:16px; background:transparent; color: #FFF; width: 100%;}
.custom-search-form input[type="search"]::placeholder { color:#FFF; }

.widget-wrapper:has(nav) { flex:1; } /* Make the navigation take up remaining space */
.widget-wrapper img { flex-shrink:0; width:auto; height:auto; } /* Prevent images from shrinking */
@media screen and (min-width:1200px) {
	.homeheader{position:sticky; top:0; z-index:99}
}
@media screen and (max-width:1200px) {
	.homeheader { 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) { 
	.homeheader { padding:15px 10px; }
	.widget-wrapper figure { max-width:220px; }
}



/* HOME SLIDESHOW ALIGN */
.slideshow{font-family: var(--display-font);}
#content .slideshow p.has-text-align-left, #content .slideshow .is-content-justification-left  {padding-left:100px; width:40vw; margin-left:0 !important;}
#content .slideshow figure{padding-left:100px; margin:0 !important;}
@media (max-width:960px) {
#content .slideshow p.has-text-align-left, #content .slideshow .is-content-justification-left  {padding-left:100px; padding-right:100px; width:100%; text-align: center; justify-content: center;}
#content .slideshow figure{padding:0; margin:0 auto !important;text-align: center;}
}


.ministry-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(400px, 1fr)); gap:2rem; margin-top:2rem; }
.ministry-card { text-align:center; padding:2rem; border-radius:15px; background:linear-gradient(135deg, #f8f9fa, #e9ecef); transition:all 0.3s ease; position:relative; overflow:hidden; margin-top:0 !important; width:100%;}
.ministry-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(45deg, #d4af37, #f1c40f); }
.ministry-title, .ministry-card h3 { font-size:1.3rem; margin-bottom:1rem; color:#2c3e50; }
.ministry-description .ministry-card p{ color:#666; }


.blur .wp-block-cover__image-background{filter:blur(15px)}

.cards .wp-block-column{background: #e9ecef; padding: 1.6em; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.05); border-radius:10px;border: 1px solid #dbdfe3;}


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


/* CF7 */
.contact-form, .wpcf7-form { background:rgba(255, 255, 255, 0.1); padding:2rem; border-radius:15px; backdrop-filter:blur(10px); }
.form-group { margin-bottom:1.5rem; }
.form-group label { display:block; margin-bottom:0.5rem; color:#d4af37; }
.form-group input, .form-group textarea { width:100%; padding:0.8rem; border:none; border-radius:8px; background:rgba(255, 255, 255, 0.9); color:#333; }
.form-group textarea { height:120px; resize:vertical; }
.submit-btn, .wpcf7-submit { background:linear-gradient(45deg, #d4af37, #f1c40f); color:white; padding:1rem 2rem; border:none; border-radius:50px; font-weight:bold; cursor:pointer; transition:all 0.3s ease; width:100%; }
.submit-btn:hover, .wpcf7-submit:hover{ transform:translateY(-2px); box-shadow:0 8px 25px rgba(212, 175, 55, 0.4); }


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

/* TOUCH MODE */
.touch-nav .menulabel { width:100%; padding:1rem; background:var(--primary-color); color:var(--text-light); border:0; font-size:1rem; font-weight:500; cursor:pointer; transition:background-color var(--transition-speed); }
.home .touch-nav .menulabel, 
.touch-nav .menulabel:hover { background:var(--accent-color); }
.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; 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{position: sticky; top: 0; z-index: 99;}
body:has(#wpadminbar) nav.click-nav{ top:32px; }
.click-nav .menulabel { display:none; }
.click-nav { background:var(--primary-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; transition:background-color var(--transition-speed); }
.click-nav .noparent:hover > a, .click-nav .noparent a:focus, .click-nav .noparent.current_page_item > a, .click-nav .noparent.current_page_parent > a { background:var(--accent-color); }
/* Current page indicators */
.click-nav .current-menu-item > a { 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; width: 100%;max-width: 30em;}
	.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; }
}