/* Manny's Barber & Stylist — barbershop palette override
   Charcoal #121214 / #17181A, barber red #C8102E, brass #C9A227, warm white #F5F1E8 */

:root {
	--charcoal: #121214;
	--panel: #1A1B1E;
	--barber-red: #C8102E;
	--barber-red-dark: #9E0C24;
	--brass: #C9A227;
	--bone: #F5F1E8;
	--line: #2C2D31;
}

body { background: #0B0B0D; }

#wrapper { background-color: #0B0B0D; background-image: none; }

/* Intro */
#intro { color: var(--bone); }
#intro h1 { color: var(--bone); }
#intro p { color: #D8D2C4; }
.intro-kicker {
	color: var(--brass) !important;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	font-size: 0.8rem;
	font-weight: 700;
}
.intro-rating { color: var(--brass) !important; font-weight: 700; letter-spacing: 0.05em; }
#intro .button { box-shadow: inset 0 0 0 2px var(--bone); color: var(--bone) !important; }
#intro .button:hover { box-shadow: inset 0 0 0 2px var(--brass); color: var(--brass) !important; }
#intro .button.primary { background-color: var(--barber-red); box-shadow: none; color: #fff !important; }
#intro .button.primary:hover { background-color: var(--barber-red-dark); box-shadow: none; color: #fff !important; }

/* Header + nav */
#header .logo { border-color: var(--brass); color: var(--bone) !important; }
#header .logo:hover { border-color: var(--barber-red); color: var(--brass) !important; }
#nav { background: rgba(18, 18, 20, 0.92); }
#nav ul.links li a { color: var(--bone) !important; }
#nav ul.links li.active { background: var(--barber-red); }
#nav ul.links li.active a { color: #fff !important; }
#nav ul.links li a:hover { color: var(--brass) !important; }
#nav ul.icons li a { color: var(--bone) !important; }
#nav ul.icons li a:hover { color: var(--barber-red) !important; }

/* Main panel */
#main { background: var(--charcoal); color: #E8E4D8; }
#main h1, #main h2, #main h3, #main h4 { color: var(--bone); }
#main .post { border-top-color: var(--line); }
#main .post > header.major > .date { color: var(--brass); }
#main .post.featured { border-bottom-color: var(--line); }
#main .posts > article { border-color: var(--line); background: var(--panel); }
#main a { color: var(--brass); }
#main a:hover { color: var(--barber-red); }
#main .image { background: #000; }

/* Buttons inside main */
#main .button { box-shadow: inset 0 0 0 2px var(--bone); color: var(--bone) !important; }
#main .button:hover { box-shadow: inset 0 0 0 2px var(--brass); color: var(--brass) !important; }
#main .button.primary { background-color: var(--barber-red); box-shadow: none; color: #fff !important; }
#main .button.primary:hover { background-color: var(--barber-red-dark); box-shadow: none; color: #fff !important; }

/* Table */
#main table tbody tr { border-color: var(--line); }
#main table tbody tr:nth-child(2n + 1) { background-color: rgba(255, 255, 255, 0.035); }
#main table td { color: #E8E4D8; }

/* Footer */
#footer { background: #0E0E10; color: #CFC9B8; }
#footer h2, #footer h3 { color: var(--bone); }
#footer a { color: var(--brass); }
#footer a:hover { color: var(--barber-red); }
#footer .button { box-shadow: inset 0 0 0 2px var(--bone); color: var(--bone) !important; }
#footer .button:hover { box-shadow: inset 0 0 0 2px var(--brass); color: var(--brass) !important; }
#footer .button.primary { background-color: var(--barber-red); box-shadow: none; color: #fff !important; }
#footer .button.primary:hover { background-color: var(--barber-red-dark); color: #fff !important; }
#footer > section { border-top-color: var(--line); }
#footer .split > section { border-top-color: var(--line); }
#footer .split.contact > section { border-left-color: var(--line); }

#copyright { color: #8E897B; }
#copyright a { color: #8E897B; }

/* Nav panel (mobile) */
#navPanel { background: var(--charcoal); }
#navPanel .links li a { color: var(--bone); border-top-color: var(--line); }
#navPanel .close { color: var(--bone); }