/*
Theme Name: Anderson
Theme URI: https://nycanderson.com/
Author: Moya Solutions
Description: Lightweight classic theme for Anderson Communications. Reproduces the look of the original Catalyst/Dynamik design (840px centred column, textured background, EB Garamond headings, Courier New navigation) and adds a fluid mobile layout. No page builder required.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: GPLv2 or later
Text Domain: anderson
*/

/* ---------------------------------------------------------------
   Tokens
---------------------------------------------------------------- */
:root {
	--ac-text: #111111;
	--ac-body: #5f5f5f;
	--ac-list: #4f4f4f;
	--ac-heading: #333333;
	--ac-link: #2f752f;
	--ac-link-hover: #000000;
	--ac-green: #006d38;
	--ac-subhead: #347e5b;
	--ac-tan: #b79f87;
	--ac-rule: #cec2ab;
	--ac-serif: "EB Garamond", Garamond, "Times New Roman", serif;
	--ac-sans: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	--ac-arial: Arial, "Helvetica Neue", Helvetica, Geneva, sans-serif;
	--ac-mono: "Courier New", Courier, monospace;
}

/* ---------------------------------------------------------------
   Reset (as the old theme)
---------------------------------------------------------------- */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, code, del, em, img, ins, q, s, small, strong, sub, sup, b, u, i,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot,
thead, tr, th, td, figure, figcaption, details, summary {
	margin: 0;
	padding: 0;
}
article, aside, details, figcaption, figure, footer, header, main, nav, section, summary {
	display: block;
}
img {
	border: 0;
	max-width: 100%;
	height: auto;
}
*, *::before, *::after {
	box-sizing: content-box;
}

/* ---------------------------------------------------------------
   Base
---------------------------------------------------------------- */
body {
	background: #fafafa url(assets/images/brown-bkgrnd.jpg) top repeat;
	margin: 0 auto;
	color: var(--ac-text);
	font-family: Arial, sans-serif;
	font-size: 14px;
	line-height: 23px;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
a, a:visited {
	color: var(--ac-link);
	text-decoration: none;
}
a:hover, a:focus {
	color: var(--ac-link-hover);
	text-decoration: none;
}
a:focus-visible, summary:focus-visible {
	outline: 2px solid var(--ac-link);
	outline-offset: 2px;
}
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}
.skip-link:focus {
	background: #fff;
	clip: auto;
	clip-path: none;
	color: var(--ac-text);
	display: block;
	height: auto;
	left: 6px;
	padding: 10px 16px;
	top: 6px;
	width: auto;
	z-index: 100000;
}

/* ---------------------------------------------------------------
   Layout
---------------------------------------------------------------- */
#wrap {
	width: 840px;
	margin: 20px auto;
	padding: 0;
}
#wrap::after {
	content: "";
	display: block;
	clear: both;
}

/* Header / logo */
#header {
	width: 840px;
	height: 70px;
	margin: 0 auto;
	font-size: 12px;
	overflow: hidden;
}
#header-left {
	width: 506px;
	height: 30px;
	margin: 40px 0 0 164px;
	padding: 0;
	overflow: hidden;
}
#title {
	margin: 0;
	padding: 0;
	font-size: 34px;
	line-height: 30px;
	font-weight: normal;
}
#title a,
#title img {
	display: block;
	width: 506px;
	height: 30px;
}

/* Navigation */
#navbar-1 {
	width: 840px;
	height: 38px;
	margin: 20px auto 0;
	padding: 0;
	color: var(--ac-heading);
	font-family: var(--ac-mono);
	font-size: 16px;
	line-height: 1em;
}
#nav-1 {
	margin: 0 0 0 25px;
	padding: 0;
	list-style: none;
}
#nav-1::after {
	content: "";
	display: block;
	clear: both;
}
#nav-1 li {
	float: left;
	margin: 0;
	padding: 0;
	list-style: none;
}
#nav-1 li a,
#nav-1 li a:link,
#nav-1 li a:visited {
	display: block;
	position: relative;
	margin: 0 25px;
	padding: 11px 15px;
	background: transparent;
	color: var(--ac-heading);
	text-decoration: none;
}
#nav-1 li a:hover,
#nav-1 li a:active,
#nav-1 li a:focus {
	background: url(assets/images/nav-hover-line.png) no-repeat center 25px;
	color: #000;
}

/* Content area */
#container-wrap {
	margin: 0;
	padding: 20px;
	clear: both;
}
#container-wrap::after,
.entry-content::after {
	content: "";
	display: block;
	clear: both;
}
#content {
	width: 800px;
	margin: 0;
	padding: 0;
}
#content article {
	margin: 0 0 20px;
	padding: 0;
}

/* ---------------------------------------------------------------
   Typography inside content
---------------------------------------------------------------- */
#content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {
	margin: 0 0 4px;
	padding: 0;
	color: var(--ac-heading);
	font-family: var(--ac-serif);
	font-weight: normal;
	line-height: 120%;
}
#content h1 { font-size: 41px; }
#content h3 { font-size: 20px; }
#content h5 { font-size: 16px; }
#content h6 { font-size: 14px; }

/* Green sub-heads (old: #content div.entry-content h2) */
#content .entry-content h2 {
	display: block;
	margin-top: 17px;
	color: var(--ac-green);
	font: bold 16px var(--ac-arial);
}
#content h4 {
	margin-top: 15px;
	color: var(--ac-subhead);
	font: bold 13px var(--ac-arial);
}

#content p,
.footer-contact p,
#footer p {
	margin: 0;
	padding: 0 0 6px;
	color: var(--ac-body);
	font: 15px/130% var(--ac-sans);
}
#content ul,
#content ol {
	margin: 0;
	padding: 0 0 15px;
}
#content ul li,
#content ol li {
	margin: 0 0 0 20px;
	padding: 0;
	color: var(--ac-list);
	font-family: Arial, sans-serif;
	font-size: 14px;
}
#content ul li { list-style-type: square; }
#content ul[type="circle"] > li { list-style-type: circle; }
#content ul[type="disc"] > li { list-style-type: disc; }
#content ul ul,
#content ol ol {
	padding: 0 0 0 20px;
}
#content blockquote p {
	color: var(--ac-list);
	font-family: Arial, sans-serif;
	font-size: 14px;
}
#content .entry-content a,
#content .entry-content a:visited {
	color: var(--ac-link);
}
#content .entry-content a:hover {
	color: #000;
}
#content figure {
	margin: 0;
}

/* WordPress alignment classes */
img.alignnone { margin: 0 0 10px; display: inline; }
img.alignleft { margin: 0 10px 10px 0; display: inline; float: left; }
img.alignright { margin: 0 0 10px 10px; display: inline; float: right; }
img.aligncenter, .aligncenter { margin: 0 auto 10px; display: block; }
.alignleft { float: left; margin: 0 10px 0 0; }
.alignright { float: right; margin: 0 0 0 10px; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 12px; color: var(--ac-list); }

/* Posts (index.php) */
#content .entry-header { margin: 0 0 8px; }
#content .entry-title a { color: var(--ac-heading); }

/* ---------------------------------------------------------------
   Footer
---------------------------------------------------------------- */
.footer-contact {
	clear: both;
	margin: 0;
	padding: 0;
	color: var(--ac-list);
	text-align: center;
}
.footer-contact p {
	font-size: 12px;
	line-height: 130%;
	text-transform: uppercase;
}
.footer-contact img {
	display: block;
	width: 354px;
	height: 25px;
	margin: 0 auto 10px;
}
.footer-contact strong {
	font-size: 15px;
	text-transform: capitalize;
}
#footer {
	width: 840px;
	margin: 0 auto;
	padding: 10px 0;
	clear: both;
	text-align: center;
}
#footer .footer-copyright {
	font-size: 11px;
}

/* ---------------------------------------------------------------
   Home page: paper sheet
---------------------------------------------------------------- */
.ac-paper {
	width: 447px;
	min-height: 566px;
	margin: 0 auto;
	padding: 43px 55px 39px 69px;
	background: url(assets/images/paper.png) no-repeat;
}
#content .ac-paper h3 {
	margin-bottom: 17px;
	font-size: 32px;
	line-height: 34px;
}
#content .ac-paper h5 {
	font-size: 15px;
	font-style: italic;
	line-height: 18px;
}
.ac-footnotes {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0 16px;
	padding-right: 27px;
}
span.strikeout {
	background: url(assets/images/strikeout.png) no-repeat 0 6px;
}

/* ---------------------------------------------------------------
   Process: legal pad on the right
---------------------------------------------------------------- */
div.process {
	background: url(assets/images/pad-listen.gif) no-repeat 382px 45px;
	padding: 8px 410px 55px 35px;
}

/* ---------------------------------------------------------------
   Two-part pages with a picture on the right (About Me, Projects)
---------------------------------------------------------------- */
.ac-layout {
	position: relative;
	min-height: 530px;
}
.ac-layout .ac-main {
	position: relative;
	z-index: 1;
}
.ac-layout .ac-side {
	position: absolute;
	z-index: -1; /* behind the text, like the old background image */
	margin: 0;
}
.ac-layout .ac-side img {
	display: block;
	max-width: none;
}
.ac-about { margin-bottom: 35px; }
.ac-about .ac-main { width: 452px; }
.ac-about .ac-side { left: 463px; top: 9px; }
#content .ac-about p strong { color: #373737; }

.ac-projects { margin-bottom: 35px; }
.ac-projects .ac-main { width: 420px; }
.ac-projects .ac-main > h1,
.ac-projects .ac-main > p { width: 442px; }
.ac-projects .ac-side { left: 379px; top: 31px; }

/* Expandable sections (were Visual Composer toggles) */
.ac-toggle {
	margin: 0 0 4px;
	padding: 0;
}
.ac-toggle > summary {
	position: relative;
	display: block;
	padding: 0 0 0 24.2px;
	color: var(--ac-subhead);
	font: bold 13px/23px var(--ac-arial);
	cursor: pointer;
	list-style: none;
	-webkit-user-select: none;
	user-select: none;
}
.ac-toggle > summary::-webkit-details-marker { display: none; }
.ac-toggle > summary::before,
.ac-toggle > summary::after {
	content: "";
	position: absolute;
	box-sizing: border-box;
	background: #bababa;
	border: 1px solid #acacac;
}
/* horizontal bar */
.ac-toggle > summary::before {
	left: 5px;
	top: 10px;
	width: 10px;
	height: 4px;
}
/* vertical bar (hidden when open -> minus) */
.ac-toggle > summary::after {
	left: 8px;
	top: 7px;
	width: 4px;
	height: 10px;
}
.ac-toggle[open] > summary::after { display: none; }
.ac-toggle > summary:hover { color: #000; }
.ac-toggle-content {
	margin: 1em 0 21.74px;
	padding: 0 0 0 24.2px;
	overflow: hidden;
}
#content .ac-toggle-content p {
	margin-bottom: 8px;
	font-size: 13px;
	line-height: 16px;
}
#content .ac-toggle-content li { font-size: 13px; line-height: 18px; }
#content .ac-toggle-content h3 { font-size: 18px; margin-top: 4px; }
.ac-partners { margin-top: 35px; }

hr.ac-sep {
	height: 0;
	margin: 18px 0 20px;
	border: 0;
	border-top: 1px dotted var(--ac-rule);
}
.ac-project-list {
	margin: 20px 0 0;
	padding-left: 26px;
}
#content .ac-project-list p {
	margin-bottom: 9px;
	font-size: 12px;
	line-height: 15px;
}

/* ---------------------------------------------------------------
   Quotable
---------------------------------------------------------------- */
.ac-quote-top {
	display: grid;
	grid-template-columns: 523px 247px;
	column-gap: 30px;
	align-items: start;
}
.ac-quote-image img {
	display: block;
	width: 247px;
	height: auto;
}
#content .ac-quote-intro h1 { margin-bottom: 4px; }
#content .ac-quote-intro h5 i {
	display: block;
	margin-top: 8px;
	font-size: 17px;
	line-height: 20px;
}
.ac-quote.ac-quote-first {
	width: 463px;
	margin-top: 35px;
}
.ac-quote-cols {
	display: grid;
	grid-template-columns: 385px 385px;
	column-gap: 30px;
	align-items: start;
}
.ac-quote {
	margin: 0 0 35px;
}
.ac-quote::after {
	content: "";
	display: block;
	clear: both;
}
#content .ac-quote p strong {
	color: #262626;
}

/* ---------------------------------------------------------------
   Contact
---------------------------------------------------------------- */
.page-slug-contact .entry-content {
	padding: 2px 54px 0 0;
}
.page-slug-contact #content h1 {
	margin-top: 17px;
}
.page-slug-contact #content p strong {
	display: block;
	margin-top: 11px;
	font-size: 16px;
}
.page-slug-contact #content p a:hover strong {
	text-decoration: underline;
}
.page-slug-contact #content h6 {
	margin-top: 13px;
	color: var(--ac-tan);
	font-size: 25px;
	font-style: italic;
	text-transform: capitalize;
}
.page-slug-contact span.established {
	font-size: 18px;
}

/* ---------------------------------------------------------------
   Mobile / narrow screens: fluid column below 860px.
   The desktop rules above are untouched.
---------------------------------------------------------------- */
@media (max-width: 859px) {
	#wrap,
	#header,
	#navbar-1,
	#content,
	#footer {
		width: auto;
	}
	#wrap {
		margin: 16px 16px 20px;
	}
	#header {
		height: auto;
	}
	#header-left {
		width: auto;
		height: auto;
		margin: 16px 0 0;
		text-align: center;
	}
	#title a {
		display: inline-block;
		width: auto;
		height: auto;
		max-width: 100%;
	}
	#title img {
		width: 506px;
		max-width: 100%;
		height: auto;
	}
	#navbar-1 {
		height: auto;
		margin-top: 12px;
	}
	#nav-1 {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin: 0;
	}
	#nav-1 li {
		float: none;
	}
	#nav-1 li a,
	#nav-1 li a:link,
	#nav-1 li a:visited {
		margin: 0;
		padding: 11px 10px;
	}
	#container-wrap {
		padding: 16px 0;
	}

	/* Home paper sheet scales with the screen */
	.ac-paper {
		width: auto;
		min-height: 0;
		max-width: 447px;
		padding: 9% 9% 8% 11%;
		background-size: 100% 100%;
	}
	#content .ac-paper h3 {
		font-size: 24px;
		line-height: 27px;
		margin-bottom: 12px;
	}

	/* Process: legal pad drops below the lists */
	div.process {
		padding: 0 0 calc(min(100%, 404px) * 549 / 404 + 10px);
		background-position: center bottom;
		background-size: min(100%, 404px) auto;
	}

	/* Pictures on About Me / Projects flow with the content */
	.ac-layout { min-height: 0; }
	.ac-about .ac-main,
	.ac-projects .ac-main {
		width: auto;
	}
	.ac-layout .ac-side {
		position: static;
		margin: 16px auto;
		text-align: center;
	}
	.ac-layout .ac-side img {
		display: inline-block;
		max-width: 100%;
	}
	.ac-about .ac-side img { max-height: 520px; width: auto; }

	/* Quotable: one column */
	.ac-quote-top,
	.ac-quote-cols {
		display: block;
	}
	.ac-quote.ac-quote-first { width: auto; }
	.ac-projects .ac-main > h1,
	.ac-projects .ac-main > p { width: auto; }
	.ac-quote-image {
		margin: 0 0 30px;
		text-align: center;
	}
	.ac-quote-image img {
		display: inline-block;
		width: 215px;
	}

	/* Contact */
	.page-slug-contact .entry-content { padding-right: 0; }
	.page-slug-contact #content h1 img { display: block; }

	#content h1 { font-size: 34px; }
	.footer-contact img { width: 280px; max-width: 100%; height: auto; }
}

@media (max-width: 420px) {
	#nav-1 li a,
	#nav-1 li a:link,
	#nav-1 li a:visited {
		padding: 9px 7px;
		font-size: 15px;
	}
	#content .ac-paper h3 {
		font-size: 21px;
		line-height: 24px;
	}
}

@media print {
	body { background: #fff; }
	#navbar-1 { display: none; }
	.ac-toggle-content { display: block; }
}