/*
 * Custom Color Palette for Namera Consulting
 * Colors: #2C3E50, #F4F2EC, #C8A356, #6B8FAD, #BFC6C9
 */

:root {
	--primary: #2C3E50;
	--secondary: #F4F2EC;
	--accent-gold: #C8A356;
	--accent-blue: #6B8FAD;
	--neutral: #BFC6C9;
}

/* Background - tinted overlay on top of bg.jpg photo */
body {
	background-color: #1a2332 !important;
}

html {
	background-color: #1a2332 !important;
}

/* Overlay layer (z-index 2) — sits on top of the photo for readability */
#bg:before {
	background-image: linear-gradient(to top, rgba(26, 35, 50, 0.65), rgba(44, 62, 80, 0.55)) !important;
	background-size: auto !important;
	z-index: 2;
}

/* Photo layer (z-index 1) — the actual bg.jpg with zoom/blur transitions */
/* These are inherited from main.css; we just ensure the override is removed */

/* Preload background */
body.is-preload #bg:before {
	background-color: #1a2332 !important;
}

/* Header and Navigation */
#header {
	background: transparent !important;
	background-image: none !important;
}

#header .content {
	background: transparent !important;
	border-color: rgba(244, 242, 236, 0.5) !important;
	border-top-width: 1px !important;
	border-bottom-width: 1px !important;
}

#header .content .inner {
	background: transparent !important;
}

/* Vertical divider lines between header elements */
#header > *:before {
	background: rgba(244, 242, 236, 0.5) !important;
	width: 1px !important;
}

/* Navigation vertical lines between items */
#header nav ul {
	border-color: rgba(244, 242, 236, 0.5) !important;
}

#header nav ul li {
	border-left: solid 1px rgba(244, 242, 236, 0.5) !important;
}

/* Middle vertical line for even number of nav items - ensure it matches others */
#header nav.use-middle:after {
	background: rgba(244, 242, 236, 0.5) !important;
	width: 1px !important;
	left: calc(50% - 0.5px) !important;
}

/* Remove border from middle item to prevent doubling */
#header nav.use-middle ul li.is-middle {
	border-left: 0 !important;
}

#header .logo .icon {
	color: #C8A356;
}

#header .content .inner h1 {
	color: #F4F2EC;
}

#header .content .inner p {
	color: #BFC6C9;
}

#header nav ul li a {
	color: #F4F2EC;
	border-bottom-color: rgba(244, 242, 236, 0.3);
}

#header nav ul li a:hover {
	color: #C8A356;
	border-bottom-color: #C8A356;
}

/* Main Content */
#main article {
	background: rgba(44, 62, 80, 0.98);
	color: #F4F2EC;
}

#main article h2.major {
	border-bottom-color: #C8A356;
	color: #F4F2EC;
}

#main article p {
	color: #BFC6C9;
}

#main article a {
	color: #6B8FAD;
	border-bottom-color: rgba(107, 143, 173, 0.5);
}

#main article a:hover {
	color: #C8A356;
	border-bottom-color: #C8A356;
}

/* Buttons */
.button.primary,
input[type="submit"].primary {
	background: #6B8FAD;
	color: #F4F2EC;
	border-color: #6B8FAD;
}

.button.primary:hover,
input[type="submit"].primary:hover {
	background: #C8A356;
	border-color: #C8A356;
	color: #F4F2EC;
}

.button,
input[type="submit"],
input[type="reset"] {
	background: transparent;
	color: #F4F2EC;
	border-color: #BFC6C9;
}

.button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
	background: #6B8FAD;
	border-color: #6B8FAD;
	color: #F4F2EC;
}

/* Form Elements */
input[type="text"],
input[type="email"],
textarea,
select {
	background: rgba(244, 242, 236, 0.1);
	border-color: #BFC6C9;
	color: #F4F2EC;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
	border-color: #6B8FAD;
	box-shadow: 0 0 0 1px #6B8FAD;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
textarea::placeholder {
	color: #BFC6C9;
}

/* Close Button */
#main article .close {
	color: #F4F2EC;
	border-color: #BFC6C9;
}

#main article .close:hover {
	background: #6B8FAD;
	border-color: #6B8FAD;
	color: #F4F2EC;
}

/* Footer */
#footer {
	color: #BFC6C9;
}

#footer a {
	color: #6B8FAD;
	border-bottom-color: rgba(107, 143, 173, 0.5);
}

#footer a:hover {
	color: #C8A356;
	border-bottom-color: #C8A356;
}

/* Social Icons */
.icons a {
	color: #BFC6C9;
}

.icons a:hover {
	color: #C8A356;
}

/* Custom SVG icons (X, Substack) – hide Font Awesome :before and center SVG */
.icons a.icon-x:before,
.icons a.icon-substack:before {
	content: none !important;
}

.icons a.icon-x,
.icons a.icon-substack {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}

.icons a.icon-x svg,
.icons a.icon-substack svg {
	fill: currentColor;
	flex-shrink: 0;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
	color: #F4F2EC;
}

/* Logo container to match beta site */
#header .content .inner .logo-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 24px;
}

/* Title styling to match beta site exactly */
#header .content .inner .logo-container h1 {
	font-family: 'Playfair Display', serif;
	font-size: 3rem;
	font-weight: 700;
	letter-spacing: 2px;
	line-height: 1;
	color: #F4F2EC;
	margin-bottom: 4px;
	margin-top: 0;
	text-transform: none;
}

/* Logo subtitle to match beta site exactly */
#header .content .inner .logo-container .logo-subtitle {
	font-size: 11px;
	font-weight: 500;
	color: #C8A356;
	letter-spacing: 4px;
	text-transform: uppercase;
	line-height: 1;
	margin-top: 4px;
	font-family: 'Inter', sans-serif;
}

@media screen and (max-width: 736px) {
	#header .content .inner .logo-container h1 {
		font-size: 2.25rem;
	}
}

@media screen and (max-width: 480px) {
	#header .content .inner .logo-container h1 {
		font-size: 1.875rem;
	}
	
	#header .content .inner .logo-container .logo-subtitle {
		font-size: 10px;
		letter-spacing: 3px;
	}
}

/* Text Elements */
strong, b {
	color: #F4F2EC;
}

/* Links */
a {
	color: #6B8FAD;
	border-bottom-color: rgba(107, 143, 173, 0.5);
}

a:hover {
	color: #C8A356;
	border-bottom-color: #C8A356;
}

/* Blockquote */
blockquote {
	border-left-color: #C8A356;
	color: #BFC6C9;
}

/* HR */
hr {
	border-bottom-color: rgba(244, 242, 236, 0.3);
}

/* Code */
code {
	background: rgba(107, 143, 173, 0.2);
	color: #F4F2EC;
}

/* Tables */
table thead th {
	color: #F4F2EC;
	border-bottom-color: #C8A356;
}

table tbody td {
	color: #BFC6C9;
	border-color: rgba(191, 198, 201, 0.2);
}

table tbody tr:hover {
	background: rgba(107, 143, 173, 0.1);
}