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

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 }

@font-face {
	font-family: 'Revive80';
	src: url('fonts/Revive80.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
}

/* Base styles */
:root { 
	/* Colors */
	--primary-color:#6a3028; 
	--accent-color:#B8846A; 
	--text-light:#ffffff; 
	--text-dark:#2d3436; 
	--background-light:#ffffff; 
	--background-hover:#f5f6fa; 
	--shadow-color:rgba(0, 0, 0, 0.1); 
	
	/* Transitions */
	--transition-speed:0.3s; 
	
	/* Font Families */
	--base-font: "Poppins", sans-serif;
	--display-font: "Playfair Display", serif;
	--accent-font: "Revive80", serif;
}

/* Font Classes */
.revive{font-family: var(--accent-font); font-size: 60px;}
#content .reviveitalics {line-height:1; margin:0}
.reviveitalics em {font-family: var(--accent-font); font-size: 100px; padding: 0 15px;}
.letterspacing{letter-spacing:2px;}


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

h2.line{display:flex; align-items:center;}
h2.line:after {content: ''; display:block; flex-grow:1; border-top:3px solid; margin:0px 0 0 1ch; }

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

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

.aligncenter{margin-left:auto; margin-right:auto}

/* HOME */
.home .wp-block-cover{position:relative;}
@media screen and (min-width:1200px) {
	.offset-up{transform: translateY(-35px);}
}
.twist{transform:rotate(5deg)}
.wp-block-button{font-family: var(--display-font); font-weight:bold}

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

/* Hide on specific devices */
.hide-for-mobile{display:block !important;} @media screen and (max-width:768px) {.hide-mobile{display:none !important;}}
.hide-for-tablet{display:block !important;} @media screen and (min-width:769px) and (max-width:1199px) {.hide-tablet{display:none !important;}}
.hide-for-desktop{display:block !important;} @media screen and (min-width:1200px) {.hide-desktop{display:none !important;}}
/* Show only on specific devices */
.show-mobile-only{display:none !important;} @media screen and (max-width:768px) {.show-mobile-only{display:block !important;}}
.show-tablet-only{display:none !important;} @media screen and (min-width:769px) and (max-width:1199px) {.show-tablet-only{display:block !important;}}
.show-desktop-only{display:none !important;} @media screen and (min-width:1200px) {.show-desktop-only{display:block !important;}}
/* Combination classes */
.hide-mobile-tablet{display:block !important;} @media screen and (max-width:1199px) {.hide-mobile-tablet{display:none !important;}}
.show-mobile-tablet{display:none !important;} @media screen and (max-width:1199px) {.show-mobile-tablet{display:block !important;}}
.hide-tablet-desktop{display:block !important;} @media screen and (min-width:769px) {.hide-tablet-desktop{display:none !important;}}
.show-tablet-desktop{display:none !important;} @media screen and (min-width:769px) {.show-tablet-desktop{display:block !important;}}


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


.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); }
.content-with-sidebar { display:flex; flex-wrap:wrap; gap:20px;}
.page-sidebar { flex:250px; padding:50px 0; background:#efeee9; }
.page-content { flex:1 75%; padding:15px; }
.page-sidebar ul{list-style: none; margin:0;padding: 0;}
.page-sidebar a{padding:5px 15px; display:block; text-decoration: none}
.page-sidebar ul a{padding:5px 30px;}
.page-sidebar .current_page_item a{font-weight: bold; background:#FFF}
.page-sidebar a:hover{background:#FFF}
@media screen and (max-width:1200px) {
	.page-sidebar{display:none}
}

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

.whiteoverlay{filter: brightness(0) invert(1);}

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

.dotted{border-left: 5px dotted #6a3028; padding-left: 1em;}

main .hovershadow {transition: transform .3s, box-shadow .3s}
main .hovershadow:hover{transform: scale(1.05); box-shadow: 2px 2px 6px 4px rgba(0,0,0,0.5) !important; z-index:9}

/* -------------------------------------------------- 
:: 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; 
	/* 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{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); /*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:center; 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; }
}