/*
Theme Name: AoP Office
Theme URI: http://archphila.org/
Description: AoP office theme
Author: AoP
Version: 1.0
*/

/*██ VARIABLES - Referenced from theme.json */
:root {
		
	/* Typography */
	--font-sans: -apple-system, BlinkMacSystemFont, Arial, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
	--font-serif: Georgia, 'Times New Roman', Times, serif;
	--body-copy: var(--font-serif);
	--headers: 'IM FELL Double Pica', var(--font-sans);
	
	/* Colors - from theme.json palette (--wp--preset--color--{slug}) */
	--primary-color: var(--wp--preset--color--primary);
	--accent-color: var(--wp--preset--color--accent);
	--primary-contrast-color: var(--wp--preset--color--primary-contrast);
	--accent-contrast-color: var(--wp--preset--color--accent-contrast);

	--current-hover-bg: var(--wp--preset--color--current-hover-bg);
	--current-hover-color: var(--wp--preset--color--current-hover-color);

	--text-dark: var(--wp--preset--color--text-dark);
	--text-light: var(--wp--preset--color--text-light);

	--background-color: var(--wp--preset--color--background);

	/* Navigation colors - reassign to any color variable above */
	--nav-bg: #FFF; /* bar, dropdown & mobile panel background */
	--nav-text: var(--text-dark); /* top-level link text on the bar */
	--nav-submenu-text: var(--text-dark); /* dropdown & mobile link text */
	--nav-highlight-bg: var(--current-hover-bg); /* hover, focus & current-item background */
	--nav-highlight-text: var(--current-hover-color); /* hover, focus & current-item text */
	--nav-accent: var(--accent-color); /* active underline bar & menu-button accent */
	--nav-shadow: transparent; /*var(--shadow-color); /* shadow under the bar & dropdowns */
	--nav-border: rgba(0, 0, 0, 0.1); /* divider between mobile menu items */

	/* Spacing - from theme.json spacingSizes */
	--spacing-sm: var(--wp--preset--spacing--40);
	--spacing-md: var(--wp--preset--spacing--50);
	--spacing-lg: var(--wp--preset--spacing--60);
	--spacing-xl: var(--wp--preset--spacing--70);
	/* Layout - from theme.json layout settings */
	--content-width: var(--wp--style--global--content-size, 1600px);
	--wide-width: var(--wp--style--global--wide-size, 1800px);
	/* Custom - from theme.json custom settings (--wp--custom--{category}--{key}) */
	--gutter: var(--wp--custom--spacing--gutter);
	--transition-speed: var(--wp--custom--transition--base);
	--shadow-color: var(--wp--custom--shadow--color);
}

/*██ CSS RESET */
*, *::before, *::after { box-sizing: border-box; }
html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
a:not([class]) { text-decoration-skip-ink: auto; color: currentColor; }
:target { scroll-margin-block: 5ex; }

/*██ BASE */
body { background-color: var(--background-color); font-size: 1.2em; line-height: 1.6;  font-family: var(--body-copy); text-align: left; color: var(--text-dark); }

h1, h2, h3, h4, h5, h6 { font-family: var(--headers); font-weight: normal; line-height: 1.25; color: inherit; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; color: inherit; text-decoration: none; }

p { margin: 0 0 1em; }
ul, ol { margin-bottom: 1em; padding: 0 0 0 1.5em; list-style-position: inside; }

em, i { font-style: italic; }
strong, b { font-weight: bold; }
small { font-size: 80%; }

hr { border: solid currentColor; border-width: 1px 0 0; clear: both; margin: var(--spacing-md) auto; height: 0; }

a { color: inherit; text-decoration: underline; }
a:hover, a:focus { text-decoration: none; }

img { height: auto; }
object, embed, iframe { max-width: 100%; }

/*██ ACCESSIBILITY */
.screen-reader-text, .assistive-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.screen-reader-text:focus, .assistive-text:focus { background: var(--primary-color); border: 2px solid var(--primary-contrast-color); clip: auto !important; clip-path: none !important; color: var(--primary-contrast-color); display: block; font-size: 0.875rem; padding: var(--spacing-sm); position: absolute; top: 5px; left: 5px; width: auto; height: auto; z-index: 100000; }

/*██ PAGINATION */
nav.pagination { margin: var(--spacing-sm) 0; display: block; padding: var(--spacing-sm) 0; }
.nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; }
.page-numbers { background: var(--primary-color); padding: var(--spacing-sm); border: 1px solid var(--primary-contrast-color); flex: 1 1 auto; text-align: center; text-decoration: none; }
.page-numbers.current, .page-numbers:hover { background: var(--current-hover-bg); color: var(--current-hover-color); }

/*██ LAYOUT */
#content { overflow-x: hidden; display: block; } /* "display block" so "overflow-x hidden" works */
#content > * { padding-left: var(--gutter); padding-right: var(--gutter); margin-left: auto; margin-right: auto; }
#content > *:not(.alignfull) { max-width: var(--content-width); }
#content .alignfull { max-width:100vw; }

/* WP defaults */
img.alignleft, .alignleft { float:left; margin:0 1.5em 1.5em 0; }
img.alignright, .alignright { float:right; margin:0 0 1.5em 1.5em; }
img.aligncenter, .aligncenter { display:block; margin-left:auto; margin-right:auto; margin-bottom:1.5em; }
.wp-caption.alignleft, figure.alignleft { float:left; margin:0 1.5em 1.5em 0; }
.wp-caption.alignright, figure.alignright { float:right; margin:0 0 1.5em 1.5em; }
.wp-caption.aligncenter, figure.aligncenter { display:block; margin:0 auto 1.5em; }


/*██ ARCHIVES */
.archiveblock { margin-bottom: var(--spacing-md); padding-bottom: var(--spacing-md); border-bottom: 1px solid var(--shadow-color); }
.archiveblock h3 { margin-bottom: var(--spacing-sm); }
.archiveblock a { text-decoration: none; }


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

/*TOUCH MODE*/
/* menu button shows/hides menu in js */
.touch-nav #menulabel{text-align:center;width:100%;padding:10px 0; background: #000517;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; list-style: none;}
.touch-nav a{display:block;padding:10px 0; border-bottom:1px solid GRAY;}
.touch-nav .submenuopen a{ background:GOLD;}
/* 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 .mobile-only{display:none;}
.click-nav { clear: both; margin: 0 auto; width: 100%; box-sizing: border-box;}
.click-nav a { color:WHITE; display: block; padding: 1em; text-decoration: none; }
.click-nav a[href="#"] {cursor:default;}
.click-nav .noparent > a{border-top:3px solid transparent;}
.click-nav ul { list-style:none; margin:0; padding:0; text-align:center; display:flex; justify-content:center; flex-wrap: wrap;}
.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:#333; height:auto; text-align:left; 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{ background:#000517; border-bottom: 1px solid WHITE;}
.click-nav ul ul{background: GOLD;}
.click-nav li.noparent:hover > a, .click-nav li.noparent a:focus, .click-nav li.noparent.current_page_item > a {color:GOLD; border-top: 3px solid GOLD;}
.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; border-color:transparent; background:WHITE;}
/*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;}


/*██ PRINT STYLES */
@media print {
	*, *::before, *::after { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; }
	a, a:visited { text-decoration: underline; }
	a[href]::after { content: " (" attr(href) ")"; font-size: 0.875em; }
	a[href^="#"]::after, a[href^="javascript:"]::after { content: ""; }
	abbr[title]::after { content: " (" attr(title) ")"; }
	pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
	img, tr { page-break-inside: avoid; }
	p, h2, h3 { orphans: 3; widows: 3; }
	h2, h3 { page-break-after: avoid; }
	thead { display: table-header-group; }
	img { max-width: 100% !important; max-height: 4in; }
	#navigation, .no-print, nav.pagination { display: none !important; }
	.print-only { display: block !important; }
	body { font-size: 12pt; line-height: 1.4; }
	#content > * { max-width: 100%; padding: 0; }
}