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

/*██ VARIABLES */
:root {
	/* Colors */
	--primary-color: #6a3028;
	--accent-color: #B8846A;
	--accent-color-contrast: #F2DDD3;
	--text-light: #ffffff;
	--text-dark: #2d3436;
	--background-light: #ffffff;
	--background-hover: #f5f6fa;
	--shadow-color: rgba(0, 0, 0, 0.1);
	/* Typography */
	--font-sans: 'Arial', 'Helvetica', sans-serif;
	--font-serif: 'Georgia', 'Times New Roman', 'Times', serif;
	/* GOOGLE FONTS PLACEHOLDER: After enqueueing fonts in functions.php, update these variables:
	--font-sans: 'Your Sans Font', sans-serif;
	--font-serif: 'Your Serif Font', 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;
}

/*██ CSS RESET */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
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-light); font: 100%/1.5 var(--font-sans); text-align: left; color: var(--text-dark); }

h1, h2, h3, h4, h5, h6 { 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; text-decoration: none; }

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

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(--background-light); border: 2px solid var(--text-dark); clip: auto !important; clip-path: none !important; color: var(--text-dark); 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(--background-light); padding: var(--spacing-sm); border: 1px solid var(--text-dark); flex: 1 1 auto; text-align: center; text-decoration: none; }
.page-numbers.current, .page-numbers:hover { background: var(--accent-color); color: var(--accent-color-contrast); }

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



header{  
	display: grid; 
	grid-template-columns: 300px 1fr; 
	grid-template-rows: 1fr 1fr; 
	gap: 20px 20px; 
	grid-template-areas: "logo widget" "logo nav";
	align-items: center;
	padding: 10px 30px;
}
#headerlogo { grid-area: logo; }
#headerwidgets{ grid-area: widget; justify-self: flex-end; }
#navigation{ grid-area: nav; justify-self: flex-end; }

main#content{
	max-width:1660px;
	margin:0 auto;
	padding: 0 30px;
}

.aligncenter { clear: both; display: block; float: none; margin-right: auto; margin-left: auto; text-align: center; }
@media only screen and (min-width: 482px) { .alignright { float: right;} }

/* PAGE PADDING (#content stays 30px left/right padding) */
.alignfull, .leaflet-container {margin-left:-30px; margin-right:-30px; width:100vw;} /* compensate for the #content container's additional padding */
.alignfull .wp-block-group__inner-container{max-width: 1660px;margin: 0 auto;padding:30px;}
@media (min-width: 1660px) {
	.alignfull, .leaflet-container { margin-left: calc( (100vw - 1600px) / -2) !important; margin-right: calc( (100vw - 1600px) / -2) !important; }
	.alignfull .alignfull{margin-left:0; margin-right:0}
	/*#topheaderrow, .pagetitle, footer { padding-left: calc( (100vw - 1600px) / 2) !important; padding-right: calc( (100vw - 1600px) / 2) !important; }*/
}
body{overflow-x:hidden;}



.wp-block-lcgmm-simplerssblock.grf_items { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:20px; padding:20px; max-width:1200px; margin:0 auto; }
.grf_items br{display:none}
.grf_item_card { background:#fff; border-radius:8px; box-shadow:0 2px 8px rgba(0, 0, 0, 0.1); overflow:hidden; transition:transform 0.2s; }
.grf_item_card:hover { transform:translateY(-5px); }
.grf_item_image_link { display:block; width:100%; line-height:0; }
.grf_item_image { width:100%; height:200px; object-fit:cover; }
.grf_item_content { padding:15px; }
.grf_item_title { font-size:1.25rem; margin:0 0 10px; line-height:1.4; text-align:center}
.grf_item_description img{width:100%; max-height:400px; object-fit:contain; margin:auto;}
.grf_item_link { text-decoration:none; color:#1a0dab; }
.grf_item_link:hover { text-decoration:underline; }
.grf_item_date { font-size:0.9rem; color:#555; margin:0 0 10px; }
.grf_item_excerpt { font-size:1rem; color:#333; margin:0; line-height:1.5; }
.grf_item_excerpt span{display:block; font-size:70%; font-style: italic; color:#aaa; margin-top:10px}
@media (max-width:600px) { 
	.wp-block-lcgmm-simplerssblock.grf_items { grid-template-columns:1fr; padding:10px; }
	.grf_item_image { height:150px; }
}


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

/*TOUCH MODE*/
/* menu button shows/hides menu in js */
.touch-nav #menulabel{text-align:center;width:100%;padding:10px 0; background:BLACK;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;}
.touch-nav a{display:block;padding:10px 0; border-bottom:1px solid GRAY;}
.touch-nav .submenuopen a{ background:LIGHTGRAY;}
/* 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; font-size:1.5rem; text-transform:uppercase; font-family:serif;}
.click-nav a { 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:flex-end; 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 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:firebrick; border-top: 3px solid firebrick;}
.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; }
}