/*
Theme Name: AoP Office
Theme URI: http://archphila.org/
Description: Archdiocese of Philadelphia
Author: AoP
Version: 2.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; 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 }

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

:root {
	--cc-blue: #0065A4;
	--black: #000000;
	--cc-navy: #003087;
	--mint-green: #49C5B1;
	--gold: #D8A95F;
	--purple: #6450A1;
	--coral-red: #EC605E;
	--sky: #D7E6EB;
	--stone: #D9DFDC;
	--cloud: #F7F5F2;
	--eggshell: #F7F4EC;
	--digital-blue: #007BFF;

	--primary-color: var(--cc-blue);
	--accent-color: var(--gold);

	--text-light:#ffffff; 
	--text-dark:#2d3436; 
	--background-light:#ffffff; 
	--background-hover:#f5f6fa; 
	--shadow-color:rgba(0, 0, 0, 0.1); 
	--transition-speed:0.3s; 

	--font-sans: 'Lato', 'Calibri', 'Segoe UI', 'Arial', sans-serif;
	--font-serif: 'Merriweather', 'Georgia', 'Times New Roman', 'Times', serif;
}
/*background:var(--primary-color);*/


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

h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); font-weight:normal; line-height:1.25; color:inherit; clear:both;}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight:inherit; color:inherit;}

.eyebrow {font-family: var(--font-sans); font-weight: 700; text-transform: uppercase;}
.subhead {font-family: var(--font-serif); font-weight: 400;}
.metric {font-family: var(--font-sans); font-weight: 800;}

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 */
#content > * {padding-left:30px; padding-right:30px; margin-left:auto; margin-right:auto;}
#content > *:not(.alignfull){max-width:1600px;}


/* counter gutenberg */
#content :where(figure){margin-bottom:unset}
nav.click-nav{margin-block-start: 0;}


/* HOME NAV */
@media screen and (min-width:1200px) {
	nav#navigation{position:sticky; top:0; z-index:99}
}



/* Custom Homepage Styles */
.hero-section { position: relative; margin-bottom: 0; }
.hero-section .wp-block-cover { min-height: 600px; display: flex; align-items: center; justify-content: center; }
.hero-title { font-size: 4rem; font-weight: 700; color: white; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
@media (max-width: 768px) { .hero-title { font-size: 2.5rem; } }
.main-content-section { padding: 3rem 1.5rem; max-width: 1200px; margin: 0 auto; }

/* Section Headings */
.section-heading { font-size: 2.5rem; font-weight: 700; color: var(--cc-blue); margin-bottom: 1.5rem; position: relative; padding-bottom: 0.75rem; }
.section-heading::after { content: ''; display: block; width: 80px; height: 4px; background: var(--gold); margin: 0.5rem auto 0; border-radius: 2px; }
@media (max-width: 768px) { .section-heading { font-size: 2rem; } }

/* Mission Section */
.mission-section { background: var(--cloud); border-radius: 8px; padding: 3rem 2rem !important; }
.mission-text { font-size: 1.1rem; line-height: 1.8; color: var(--text-dark); max-width: 900px; margin: 0 auto; text-align: center; }
@media (max-width: 768px) { .mission-section { padding: 2rem 1.5rem !important; } .mission-text { font-size: 1rem; } }

/* Services Section */
.services-columns { gap: 2rem !important; margin-top: 2rem; }
.service-column { background: white; border-radius: 8px; padding: 2rem !important; box-shadow: 0 2px 8px rgba(0,0,0,0.08); border-left: 4px solid var(--mint-green); transition: transform 0.2s, box-shadow 0.2s; }
.service-column:hover { transform: translateY(-4px); box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
.service-heading { font-size: 1.75rem; color: var(--cc-navy); margin-bottom: 0.75rem !important; font-weight: 600; }
.service-hours { font-weight: 700; color: var(--gold); font-size: 1.1rem; margin-bottom: 1rem !important; font-family: var(--font-sans); }
.service-contact { font-weight: 600; color: var(--cc-blue); margin-top: 1rem !important; }
@media (max-width: 768px) { .services-columns { flex-direction: column; gap: 1.5rem !important; } .service-column { padding: 1.5rem !important; } .service-heading { font-size: 1.5rem; } }

/* Get Involved Section */
.get-involved-section { background: var(--sky); border-radius: 8px; padding: 3rem 2rem !important; }
.involved-columns { gap: 2rem !important; margin-top: 1rem; }
.involved-column { background: white; border-radius: 8px; padding: 2rem !important; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.involved-column p { font-size: 1.05rem; line-height: 1.7; color: var(--text-dark); }
@media (max-width: 768px) { .get-involved-section { padding: 2rem 1.5rem !important; } .involved-columns { flex-direction: column; gap: 1.5rem !important; } .involved-column { padding: 1.5rem !important; } }

/* Support Section (existing - enhance slightly) */
.support-columns { min-height: 400px; }
.support-text-col { padding: 3rem 2rem !important; }
.support-text-col h2 { font-size: 2.5rem; margin-bottom: 2rem; }
.donate-btn .wp-block-button__link { font-size: 1.25rem; padding: 1rem 3rem !important; font-weight: 700; border-radius: 50px; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 4px 12px rgba(236,96,94,0.3); }
.donate-btn .wp-block-button__link:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(236,96,94,0.4); }
.support-image-col img { object-fit: cover; height: 100%; width: 100%; }
@media (max-width: 768px) { .support-columns { flex-direction: column-reverse !important; } .support-image-col { min-height: 300px; } .support-text-col h2 { font-size: 2rem; } }



	

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

/*TOUCH MODE*/
/* menu button shows/hides menu in js */
.touch-nav #menulabel{text-align:center;width:100%;padding:10px 0; background:#4068a4;color:WHITE;border: 0;}
.touch-nav .nav-bar{display:none;}
.show-main-menu .touch-nav .nav-bar{display:block;}
/* the menu */
.touch-nav{margin:1px; color:BLACK}
.touch-nav ul, .touch-nav li{padding:0; margin:0; text-align:center; background:#7689b9; color:#FFF;display: block;}
.touch-nav a{display:block;padding:10px 0; border-bottom:1px dotted WHITE;}
.touch-nav .submenuopen a{ background:var(--accent-color); color:BLACK}
/* add arrows to show open/close state */
.touch-nav li.menu-item-has-children>a::after{content:'\25B6';padding-left:10px;width:25px;display:inline-block;transition: transform .2s ease;}
.touch-nav li.menu-item-has-children.submenuopen>a::after,
.touch-nav li.menu-item-has-children.sub-submenuopen>a::after{transform: rotate(90deg);}
/*smooth accordion, closed*/
.touch-nav .sub-menu a,
.touch-nav .submenuopen>.sub-menu .sub-menu a{max-height:1px; min-height:0; opacity:0; overflow:hidden; visibility:hidden; line-height:0; padding:0 10px 0 40px; border-bottom-width:0; transition:opacity .1s, max-height .1s, line-height .1s, padding .1s, visibility .1s, min-height .1s; } 
/*smooth accordion, opened*/
.touch-nav .submenuopen>.sub-menu a, 
.touch-nav .submenuopen>.sub-menu .sub-submenuopen .sub-menu a{max-height:300px; min-height:0; opacity:1; visibility:visible; line-height:1.8; padding:10px 10px 10px 40px; border-bottom:1px dotted;}


/*CLICK MODE*/
.click-nav #menulabel{display:none;}
.click-nav { clear: both; margin: 0 auto; width: 100%; box-sizing: border-box;}
.click-nav .noparent{flex:1;display: flex; justify-content: center;/*! align-items: center; */}
.click-nav a { color:WHITE; display: flex; padding: 10px; text-decoration: none; justify-content: center;align-items: center;}
.click-nav a[href="#"] {cursor:default;}
.click-nav .noparent > a{font-family:var(--font-sans); flex: 1;}
.click-nav ul { list-style:none; margin:0; padding:0; text-align:center; display:flex; gap:1px; flex-wrap: wrap;justify-content: space-around;}
.click-nav ul li{ position:relative; margin:0; }
/* sub menus */
.click-nav ul ul { box-shadow: 0 3px 3px rgba(0,0,0,0.2); opacity:0; height:0; overflow:hidden; transition:opacity 0.2s ease-out; border:0 none; margin:0; position:absolute; top:100%; left:0; width:300px; z-index:111;}
.click-nav ul ul a { border-bottom: 1px dotted #ddd; color:WHITE; height:auto; text-align:center; padding:10px; width:300px;}
.click-nav ul ul ul { left:100%; top:0;}
.click-nav ul li:hover > ul, .click-nav ul li:focus-within > ul { opacity:1; display:block; height:auto; overflow:visible;}
.click-nav ul li li {border:none;}
/* colors, hover accents */
.click-nav li{ background:var(--primary-color); border-bottom: 1px solid WHITE;border-top: 1px solid WHITE;}
/*.click-nav li.noparent:nth-child(2n+2){ background: #7689b9; }*/
.click-nav ul ul{background: LIGHTGRAY;}
.click-nav li.noparent:hover > a, .click-nav li.noparent a:focus, .click-nav li.noparent.current_page_item > a {color:BLACK; background:var(--accent-color);}
.click-nav ul ul li:hover > a, .click-nav ul ul li a:focus, .click-nav ul ul li.current_page_item > a {color:BLACK; background:var(--accent-color);}
.click-nav ul li:focus-within > a{background:var(--accent-color); color:BLACK}
/*arrows for inner*/
.click-nav .noparent li.menu-item-has-children>a::after{content:'\25B6';padding-left:10px;width:25px;display:inline-block;transition: transform .2s ease;}
.click-nav .noparent li.menu-item-has-children.submenuopen>a::after{transform: rotate(90deg);}
/* last menu item pushes left, all else can push right safely; not so good if menu breaks onto second line */
.click-nav > ul > li:last-child ul{left:auto; right:0;}
.click-nav > ul > li:last-child ul ul{left:-100%;}
.click-nav > ul > li:last-child ul li.menu-item-has-children>a::after{content:none;}
.click-nav > ul > li:last-child ul li.menu-item-has-children>a::before{content:'\25C0';padding-right:10px; width:25px; display:inline-block;}


/* -------------------------------------------------- 
	:: Footer
	---------------------------------------------------*/
#footer { background: var(--cc-blue); color: var(--eggshell); padding: 3rem 2rem 2rem; margin-top: 3rem; border-top: 6px solid var(--gold); }
#footer .wp-block-group { max-width: 1200px; margin: 0 auto; }
#footer .wp-block-columns { gap: 3rem !important; }
#footer .wp-block-column { padding: 1.5rem; }
#footer h2 { color: var(--eggshell); font-size: 1.5rem; font-weight: 600; margin-bottom: 1.25rem; padding-bottom: 0.5rem; border-bottom: 3px solid var(--gold); display: inline-block; }
#footer p { color: var(--eggshell); line-height: 1.8; margin-bottom: 0.75rem; font-size: 1rem; }
#footer a { color: var(--gold); text-decoration: none; transition: color 0.2s; font-weight: 500; }
#footer a:hover { color: var(--eggshell); text-decoration: underline; }

/* Footer Form Styling */
#footer .wpcf7-form { margin-top: 1rem; }
#footer .wpcf7-form label { display: block; font-weight: 600; margin-bottom: 0.5rem; color: var(--eggshell); font-size: 1rem; }
#footer .wpcf7-form input[type="email"] { width: 100%; padding: 0.75rem 1rem; border: 2px solid var(--gold); border-radius: 4px; font-size: 1rem; background: white; color: var(--text-dark); transition: border-color 0.2s, box-shadow 0.2s; margin-bottom: 1rem; }
#footer .wpcf7-form input[type="email"]:focus { outline: none; border-color: var(--mint-green); box-shadow: 0 0 0 3px rgba(73,197,177,0.2); }
#footer .wpcf7-form input[type="submit"] { background: var(--coral-red); color: white; padding: 0.75rem 2rem; border: none; border-radius: 50px; font-size: 1.1rem; font-weight: 700; cursor: pointer; transition: background 0.2s, transform 0.2s, box-shadow 0.2s; box-shadow: 0 4px 12px rgba(236,96,94,0.3); }
#footer .wpcf7-form input[type="submit"]:hover { background: var(--gold); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(216,169,95,0.4); }
#footer .wpcf7-form input[type="submit"]:active { transform: translateY(0); }
#footer .wpcf7-response-output { margin-top: 1rem; padding: 0.75rem; border-radius: 4px; font-size: 0.95rem; }
#footer .hidden-fields-container { display: none; }

@media (max-width: 768px) { #footer { padding: 2rem 1.5rem 1.5rem; } #footer .wp-block-columns { flex-direction: column; gap: 2rem !important; } #footer .wp-block-column { padding: 0; } #footer h2 { font-size: 1.35rem; } }