/*
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%; 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:#800000; 
	--accent-color:#D4AF37; 

	/*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;
	/* Spacing */
	--spacing-xs: 0.5rem;
	--spacing-sm: 1rem;
	--spacing-md: 1.5rem;
	--spacing-lg: 2rem;
	--spacing-xl: 3rem;
	/* Transitions */
	--transition-speed: 0.3s;
	/* Layout */
	--content-width: 1600px;
	--wide-width: 1800px;
	--gutter: 30px;
}

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

body { font:100%/1.5 var(--font-body); 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: clamp(2.3rem, 4vw, 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;}

.aligncenter { display:block; margin-left:auto; margin-right:auto; margin-bottom:1.5em; }
.alignleft { float:left; margin-right:1.5em; margin-bottom:1.5em; }
.alignright { float:right; margin-left:1.5em; margin-bottom:1.5em; }
.alignnone { margin-bottom:1.5em; }


body{background:url(images/bg.png) repeat fixed;}
#header, #navigation, #page{max-width:1400px; margin:0 auto;}
#header, #page{overflow: auto;}
#header{background:var(--primary-color); color: #FFF;}
#header a{text-decoration:none}
#header a:hover{color:var(--accent-color);}
#page{background:#FFF}
#headerinnerspacing{padding: 5px 20px;}

@media (max-width: 768px) {
	#headerinnerspacing p{text-align:center}
}

#page { display:flex; flex-wrap:wrap; gap:0; min-height:100vh; }
main { flex:1 500px; padding:20px; }
aside { width:100%; max-width:400px; flex:0 0 auto; background:#F2F2F2; padding:20px; }

aside h3{margin-bottom:10px}

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





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

.top-navigation { position: sticky; top: 0; z-index: 99; border-top: 1px solid var(--accent-color); }
body:has(#wpadminbar) .top-navigation { top: 32px; }
@media (max-width: 782px) { body:has(#wpadminbar) .top-navigation { top: 46px; } }

/* Menu button (mobile) */
#menulabel { display: none; width: 100%; padding: var(--spacing-sm); background: var(--primary-color); color: var(--text-light); border: 0; font-size: 1rem; font-weight: 500; cursor: pointer; transition: background-color var(--transition-speed); }
#menulabel:hover, #menulabel:focus { background: var(--accent-color); }
#menulabel[aria-expanded="true"] { background: var(--accent-color); }

/* Nav bar base */
.nav-bar { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; align-items: stretch; background: var(--primary-color); box-shadow: 0 2px 4px var(--shadow-color); }
.nav-bar li { position: relative; }
.nav-bar a { color: var(--text-light); text-decoration: none; padding: 1.25rem var(--spacing-sm); display: block; font-weight: 500; transition: all var(--transition-speed); }
.nav-bar a:hover, .nav-bar a:focus { background: rgba(255, 255, 255, 0.4); }

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

/* Dropdown menus */
.nav-bar ul { list-style: none; margin: 0; padding: 0.5rem 0; background: var(--background-light); box-shadow: 0 4px 12px var(--shadow-color); border-radius: 4px; position: absolute; top: 100%; left: 0; min-width: 200px; z-index: 9999; display: none; }
.nav-bar ul a { color: var(--text-dark); padding: 0.75rem var(--spacing-sm); }
.nav-bar ul a:hover, .nav-bar ul a:focus { background: var(--background-hover); color: var(--accent-color); }
.nav-bar ul ul { left: 100%; top: 0; }
.nav-bar ul .current-menu-item > a { background: var(--background-hover); color: var(--accent-color); }

/* Show dropdowns on hover/focus */
.nav-bar li:hover > ul, .nav-bar li:focus-within > ul, .nav-bar li.submenu-open > ul { display: block; }

/* Dropdown arrows */
.nav-bar .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); vertical-align: middle; }
.nav-bar ul .menu-item-has-children > a::after { transform: rotate(-45deg); }

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

/*█ MOBILE NAVIGATION */
@media (max-width: 768px) {
	#menulabel { display: block; }
	.nav-bar { display: none; flex-direction: column; background: var(--background-light); box-shadow: 0 4px 6px var(--shadow-color); }
	.nav-bar.menu-open { display: flex; }
	.nav-bar a { color: var(--text-dark); border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding: var(--spacing-sm); }
	.nav-bar a:hover, .nav-bar a:focus { background: var(--background-hover); }
	.nav-bar > .noparent > a::after { display: none; }
	.nav-bar .current-menu-item > a, .nav-bar .current_page_parent > a { background: var(--background-hover); color: var(--accent-color); }
	/* Mobile dropdowns */
	.nav-bar ul { position: static; box-shadow: none; border-radius: 0; padding: 0; display: none; background: var(--background-hover); }
	.nav-bar li.submenu-open > ul { display: block; }
	.nav-bar ul a { padding-left: var(--spacing-lg); }
	.nav-bar ul ul a { padding-left: var(--spacing-xl); }
	.nav-bar .menu-item-has-children > a::after { position: absolute; right: var(--spacing-sm); top: 50%; transform: translateY(-50%) rotate(45deg); transition: transform var(--transition-speed); }
	.nav-bar .menu-item-has-children.submenu-open > a::after { transform: translateY(-50%) rotate(-135deg); }
}