/* Goldstein Accounting and Tax Services: colors and imagery carried over from the original site. */

:root {
	--bg: #ffffff;
	--text: #1a1a1a;
	--muted: #555555;
	--bar: #b6d3d1;          /* the original menu/footer teal */
	--bar-text: #4d4d4d;     /* original menu grey #666666, a shade darker for contrast on teal */
	--bar-hover: #9fc4c1;
	--link: #1f5f8b;
	--date: #e00000;         /* original calendar red, slightly deepened for contrast */
	--rule: #d7e6e5;
	--banner-font: "Times New Roman", Times, serif;
	--body-font: Arial, Verdana, sans-serif;
	--menu-font: Verdana, Geneva, sans-serif;
	--width: 60rem;
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #131918;
		--text: #e6ecea;
		--muted: #a9b8b6;
		--bar: #2b4341;
		--bar-text: #d4e6e4;
		--bar-hover: #375653;
		--link: #8cc7f0;
		--date: #ff6b6b;
		--rule: #2b3a39;
		color-scheme: dark;
	}
}

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 1.0625rem/1.55 var(--body-font);
}

img { max-width: 100%; height: auto; }

a { color: var(--link); }

.skip {
	position: absolute;
	left: -999px;
	top: 0.5rem;
	background: var(--bg);
	padding: 0.5rem 1rem;
}
.skip:focus { left: 0.5rem; z-index: 10; }

/* Each band is centered at the original column width, scaled up for today's screens. */
.banner, .menu, main, .footer {
	max-width: var(--width);
	margin-inline: auto;
}

.banner { padding: 1.5rem 1rem 1rem; }

.brand {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	color: inherit;
	text-decoration: none;
	font: bold clamp(1.35rem, 4vw, 2.1rem)/1.15 var(--banner-font);
	text-align: center;
}
.brand img { flex: none; }

.menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	background: var(--bar);
	font-family: var(--menu-font);
}
.menu a {
	flex: 1 1 auto;
	padding: 0.45rem 0.75rem;
	text-align: center;
	color: var(--bar-text);
	text-decoration: none;
}
.menu a:hover, .menu a:focus-visible { background: var(--bar-hover); }
.menu a[aria-current="page"] { font-weight: bold; }

/* The 1040 form photo behind each page heading, as on the original site. The text stays dark
   in both themes because it sits on the photo. */
.page-title {
	min-height: 125px;
	padding: 0.6rem 1.25rem;
	background: #efe6d6 url("/images/Frm1040-800x125.jpg") left top / cover no-repeat;
}
.page-title h1 {
	margin: 0;
	color: #000;
	font-size: 1.6rem;
	text-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}

main > .content {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 1.25rem 1.5rem;
	padding: 1.25rem 1rem 1.5rem;
	align-items: start;
}
.content > * { min-width: 0; }
.content > .aside { justify-self: center; }
.content > .wide { grid-column: 1 / -1; }

@media (max-width: 40rem) {
	main > .content { grid-template-columns: 1fr; }
}

.badge { display: block; margin-inline: auto; }

h2.list-header {
	margin: 0 0 0.25rem;
	font-size: 1.2rem;
	text-decoration: underline;
}

.content section ul { margin-top: 0.25rem; padding-left: 1.25rem; }

.columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 0.5rem 2rem;
}

/* A photo with the ProAdvisor badge under it */
.stack { display: grid; gap: 1.25rem; justify-items: center; }

/* Links */
.links { margin: 0; }
.links dt { font-weight: bold; margin-top: 0.9rem; }
.links dt:first-child { margin-top: 0; }
.links dd { margin: 0.15rem 0 0; color: var(--muted); }

/* Contact */
address { font-style: normal; line-height: 1.7; }
address strong { display: block; }

/* Calendar */
.cal-note { color: var(--muted); font-size: 0.95rem; margin-top: 0; }
.cal-years { display: flex; gap: 1rem; margin: 0.5rem 0 0.5rem; font-weight: bold; }
.cal-year h2 {
	margin: 1.5rem 0 0.25rem;
	padding-bottom: 0.2rem;
	border-bottom: 2px solid var(--bar);
	font-size: 1.5rem;
}
.cal-month h3 { margin: 1.1rem 0 0.4rem; font-size: 1.2rem; }
.due {
	display: grid;
	grid-template-columns: 5rem 1fr;
	gap: 0 0.75rem;
	padding: 0.5rem 0;
	border-top: 1px solid var(--rule);
}
.due time { color: var(--date); font-weight: bold; font-size: 1.2rem; line-height: 1.3; }
.due ul { margin: 0; padding-left: 1.1rem; }
.due li + li { margin-top: 0.35rem; }
.due.past { opacity: 0.55; }
.due.past time::after {
	content: "past";
	display: block;
	color: var(--muted);
	font-size: 0.75rem;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

@media (max-width: 30rem) {
	.due { grid-template-columns: 1fr; }
}

.footer {
	background: var(--bar);
	color: var(--bar-text);
	text-align: center;
	font-size: 0.8rem;
	padding: 0.35rem 1rem;
}
.footer p { margin: 0.15rem 0; }
.footer a { color: inherit; }