/*
 * Clean Theme Override for Light in Extension
 * Designed to work with teal/yellow logo
 * 
 * Palette:
 * - Background: #f8f7f4 (warm off-white)
 * - Text: #2c2c2c (soft charcoal)
 * - Teal accent (muted): #3d8a8a (lighter, less glaring)
 * - Teal dark (for contrast): #2a6b6b
 * - Gold accent: #d4a84b (from logo)
 */

/* Override the gradient background with clean off-white */
body {
	background-color: #f8f7f4 !important;
	background-image: none !important;
	color: #2c2c2c !important;
}

/* Main text colour */
body, p, li, dd, dt {
	color: #2c2c2c !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
	color: #1a1a1a !important;
}

/* Links - muted teal with gold hover */
a {
	color: #3d8a8a !important;
	border-bottom-color: rgba(61, 138, 138, 0.3) !important;
}

a:hover {
	color: #d4a84b !important;
	border-bottom-color: transparent !important;
}

/* Header section */
#header {
	background-color: transparent !important;
}

#header h1 {
	color: #1a1a1a !important;
}

#header h2 {
	color: #4a4a4a !important;
}

/* Navigation */
#nav {
	background-color: rgba(248, 247, 244, 0.95) !important;
}

#nav ul li a {
	color: #2c2c2c !important;
}

#nav ul li a:hover,
#nav ul li a.active {
	color: #3d8a8a !important;
}

/* Main content sections */
#main section {
	background-color: transparent !important;
}

/* Section headers */
.major h2 {
	border-bottom-color: #3d8a8a !important;
}

.major h2:after {
	background-color: #3d8a8a !important;
}

/* Buttons - outlined style, not filled */
button,
.button {
	background-color: transparent !important;
	box-shadow: none !important;
	border: 2px solid #3d8a8a !important;
	color: #3d8a8a !important;
}

button:hover,
.button:hover {
	background-color: #3d8a8a !important;
	color: #ffffff !important;
}

button:active,
.button:active {
	background-color: #2a6b6b !important;
	color: #ffffff !important;
}

/* Primary buttons - gold accent */
button.primary,
.button.primary {
	background-color: transparent !important;
	border: 2px solid #d4a84b !important;
	color: #d4a84b !important;
}

button.primary:hover,
.button.primary:hover {
	background-color: #d4a84b !important;
	color: #1a1a1a !important;
}

/* Features/icons section */
.features li {
	border-color: rgba(44, 44, 44, 0.15) !important;
}

/* Footer */
#footer {
	background-color: #f0eeeb !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

#footer p,
#footer li,
#footer dd {
	color: #4a4a4a !important;
}

#footer h2 {
	color: #1a1a1a !important;
}

/* Spotlight sections - ensure readability */
.spotlight .content {
	background-color: transparent !important;
}

/* Statistics/icons styling */
.statistics li {
	border-color: rgba(44, 44, 44, 0.15) !important;
	color: #2c2c2c !important;
}

/* Form inputs if any */
input[type="text"],
input[type="email"],
textarea,
select {
	background-color: #ffffff !important;
	border-color: rgba(44, 44, 44, 0.25) !important;
	color: #2c2c2c !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
	border-color: #3d8a8a !important;
}

/* The fake-button styling from index.html */
.fake-button {
	border-color: #3d8a8a !important;
	background-color: transparent !important;
	transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

.fake-button a,
.fake-button a:link,
.fake-button a:visited {
	color: #3d8a8a !important;
}

.fake-button:hover {
	background-color: #5fb3b3 !important;
	border-color: #5fb3b3 !important;
}

.fake-button:hover a,
.fake-button:hover a:link,
.fake-button:hover a:visited,
.fake-button:hover a:hover {
	color: #1a1a1a !important;
}