/* Wheels on the Bay - Custom Overrides for HTML5UP Editorial */

:root {
	--charcoal: #2d2d2d;
	--charcoal-light: #3a3a3a;
	--amber: #c97b3a;
	--amber-dark: #a8612a;
	--amber-light: #e8a96a;
	--offwhite: #f7f5f2;
	--warmgray: #e8e4de;
	--text: #3a3a3a;
	--text-light: #6b6b6b;
}

/* ---- Base Typography ---- */
body {
	font-family: 'Source Serif 4', Georgia, serif;
	color: var(--text);
	background: var(--offwhite);
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
	color: var(--charcoal);
	font-weight: 700;
}

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

a:hover {
	color: var(--amber-dark);
}

/* ---- Header ---- */
#header .logo strong {
	font-family: 'Barlow', sans-serif;
	font-weight: 700;
	color: var(--charcoal);
}

/* ---- Sidebar (dark charcoal theme) ---- */
#sidebar {
	background-color: var(--charcoal);
}

#sidebar > .inner {
	color: #ccc;
}

/* Override ALL internal border colors for dark sidebar */
#sidebar > .inner > * {
	border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Search bar */
#sidebar > .inner > .alt {
	background-color: rgba(255, 255, 255, 0.05);
}

#sidebar > .inner > .alt input {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.1);
}

#sidebar > .inner > .alt input::placeholder {
	color: rgba(255, 255, 255, 0.4);
}

/* Menu */
#sidebar nav#menu header.major h2 {
	border-bottom-color: rgba(201, 123, 58, 0.3);
	color: #fff;
}

#sidebar nav#menu ul li a {
	border-bottom-color: rgba(255, 255, 255, 0.08);
	color: #ccc;
}

#sidebar nav#menu ul li a:hover {
	color: var(--amber);
}

/* Submenu openers */
#sidebar > .inner > nav#menu > ul > li > .opener {
	color: #fff;
}

#sidebar > .inner > nav#menu > ul > li > .opener::before {
	color: var(--amber);
}

#sidebar > .inner > nav#menu > ul > li > .opener + ul {
	border-bottom: none;
}

#sidebar > .inner > nav#menu > ul > li > .opener + ul li a {
	color: #aaa;
	border-bottom-color: rgba(255, 255, 255, 0.04);
}

#sidebar > .inner > nav#menu > ul > li > .opener + ul li a:hover {
	color: var(--amber-light);
}

/* Section headers in sidebar */
#sidebar section header.major h2 {
	border-bottom-color: rgba(201, 123, 58, 0.3);
	color: #fff;
}

/* Sidebar links */
#sidebar .inner a {
	color: var(--amber-light);
}

#sidebar .inner a:hover {
	color: var(--amber);
}

/* Mini posts in sidebar */
#sidebar .mini-posts article {
	border-bottom-color: rgba(255, 255, 255, 0.08);
}

#sidebar .mini-posts article p {
	color: #aaa;
}

/* Footer in sidebar */
#sidebar #footer {
	border-bottom: none;
}

#sidebar #footer .copyright {
	color: #666;
	border-bottom: none;
}

#sidebar #footer .copyright a {
	color: #888;
}

#sidebar #footer .copyright a:hover {
	color: var(--amber-light);
}

/* Sidebar toggle button (mobile) */
#sidebar .toggle {
	background-color: var(--charcoal-light);
}

#sidebar .toggle::before {
	color: #fff;
}

#sidebar .toggle:after {
	background: rgba(255, 255, 255, 0.15);
}

#sidebar .toggle:hover {
	background-color: var(--amber-dark);
}

/* ---- Buttons ---- */
.button {
	font-family: 'Barlow', sans-serif;
	font-weight: 600;
}

.button.primary,
input[type="submit"].primary,
input[type="reset"].primary,
input[type="button"].primary {
	background-color: var(--amber);
	border-color: var(--amber);
	color: #fff;
}

.button.primary:hover {
	background-color: var(--amber-dark);
	border-color: var(--amber-dark);
}

.button:not(.primary) {
	color: var(--charcoal);
	border-color: var(--charcoal);
}

.button:not(.primary):hover {
	background-color: var(--charcoal);
	color: #fff;
}

/* ---- Section headers ---- */
header.major h2 {
	border-bottom-color: var(--amber);
}

header.major h2::after {
	background-color: var(--amber);
}

/* ---- Banner / Hero ---- */
#banner {
	border-bottom-color: var(--amber);
}

#banner .content header h1 {
	font-family: 'Barlow', sans-serif;
}

/* ---- Posts grid ---- */
.posts article {
	border-left-color: var(--warmgray);
}

.posts article .image img {
	transition: opacity 0.2s ease;
}

.posts article:hover .image img {
	opacity: 0.85;
}

/* ---- Article content ---- */
.article-meta {
	font-family: 'Barlow', sans-serif;
	font-size: 0.85em;
	color: var(--text-light);
	margin-bottom: 1.5em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.article-meta .category {
	color: var(--amber);
	font-weight: 600;
}

/* Related articles at bottom */
.related-articles {
	margin-top: 3em;
	padding-top: 2em;
	border-top: 2px solid var(--warmgray);
}

.related-articles h3 {
	font-size: 1.1em;
	margin-bottom: 0.75em;
}

.related-articles ul {
	list-style: none;
	padding: 0;
}

.related-articles ul li {
	padding: 0.4em 0;
}

.related-articles ul li a {
	color: var(--amber);
}

.related-articles ul li a:hover {
	color: var(--amber-dark);
}

/* ---- Image handling ---- */
.image.main img,
.image.fit img {
	border-radius: 3px;
}

/* ---- Misc overrides ---- */
hr.major {
	border-top-color: var(--warmgray);
}

/* Main content area background */
#main > .inner {
	background: var(--offwhite);
}

/* Features section icons */
.features article .icon {
	color: var(--amber);
}
