/*
 Theme Name:   CarOnline
 Theme URI:    https://www.caronline.net
 Description:  CarOnline child theme — dark mode, modern search, EV calculator
 Author:       CarOnline
 Template:     dynamic-news-lite
 Version:      1.0.0
*/

/* =====================================================================
   CSS CUSTOM PROPERTIES — color tokens for light & dark mode
   ===================================================================== */

:root {
	--co-primary:      #2563eb;
	--co-primary-dk:   #1d4ed8;
	--co-primary-lt:   #dbeafe;
	--co-accent-ev:    #16a34a;
	--co-accent-ev-lt: #dcfce7;
	--co-bg:           #f5f5f5;
	--co-surface:      #ffffff;
	--co-text:         #111111;
	--co-text-muted:   #555555;
	--co-border:       #e0e0e0;
	--co-nav-bg:       #1e293b;
	--co-topnav-bg:    #e84747;  /* original brand red */
	--co-shadow:       0 2px 8px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] {
	--co-bg:           #0f172a;
	--co-surface:      #1e293b;
	--co-text:         #f1f5f9;
	--co-text-muted:   #94a3b8;
	--co-border:       #334155;
	--co-nav-bg:       #0f172a;
	--co-topnav-bg:    #1e293b;
	--co-shadow:       0 2px 8px rgba(0, 0, 0, 0.4);
}

/* =====================================================================
   GLOBAL — apply tokens to base elements
   ===================================================================== */

body {
	background-color: var(--co-bg);
	color: var(--co-text);
	transition: background-color 0.2s, color 0.2s;
}

/* =====================================================================
   TOP NAVIGATION BAR — keep original red, darken in dark mode
   ===================================================================== */

#topnavi-wrap,
.top-navigation {
	background-color: var(--co-topnav-bg);
}

/* =====================================================================
   MAIN NAVIGATION — replace dark gray with navy
   ===================================================================== */

/* Top-level bar only gets dark background — sub-menu dropdowns stay white */
#navi-wrap,
#mainnav,
.main-navigation-menu {
	background-color: var(--co-nav-bg);
}

/* Sub-menu dropdowns: white bg, dark text (same as parent defaults) */
.main-navigation-menu ul {
	background-color: #ffffff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.main-navigation-menu ul a,
.main-navigation-menu ul a:link,
.main-navigation-menu ul a:visited {
	color: #333333;
}

/* Dark mode: sub-menu gets dark surface */
[data-theme="dark"] .main-navigation-menu ul {
	background-color: var(--co-surface);
}

[data-theme="dark"] .main-navigation-menu ul a,
[data-theme="dark"] .main-navigation-menu ul a:link,
[data-theme="dark"] .main-navigation-menu ul a:visited {
	color: var(--co-text);
}

/* Nav hover: light mode uses parent's red (#e84747); dark mode uses blue */
[data-theme="dark"] .main-navigation-menu > li > a:hover,
[data-theme="dark"] .main-navigation-menu > li > a:focus,
[data-theme="dark"] .main-navigation-menu li li a:hover,
[data-theme="dark"] .main-navigation-menu li li a:focus {
	background-color: var(--co-primary);
}

/* =====================================================================
   HEADER
   ===================================================================== */

#header-wrap,
#header {
	background-color: var(--co-surface);
}

/* Dark mode toggle button — floated right inside the nav bar */
#co-dark-toggle {
	float: right;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	background: transparent;
	color: #ffffff;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	margin: 10px 0 10px 12px;
	transition: background 0.2s, border-color 0.2s;
}

#co-dark-toggle:hover {
	background: rgba(255, 255, 255, 0.15);
	border-color: rgba(255, 255, 255, 0.6);
}

/* =====================================================================
   SEARCH FORM — modern rounded pill style
   ===================================================================== */

.co-search-form {
	display: flex;
	align-items: stretch;
	max-width: 420px;
}

.co-search-form .search-field {
	flex: 1;
	border-radius: 24px 0 0 24px;
	padding: 9px 18px;
	border: 2px solid var(--co-primary);
	border-right: none;
	background: var(--co-surface);
	color: var(--co-text);
	font-size: 0.9rem;
	outline: none;
	transition: border-color 0.2s;
}

.co-search-form .search-field:focus {
	border-color: var(--co-primary-dk);
}

.co-search-form .search-submit {
	border-radius: 0 24px 24px 0;
	background: var(--co-primary);
	color: #fff;
	padding: 9px 16px;
	border: 2px solid var(--co-primary);
	border-left: none;
	cursor: pointer;
	font-size: 1rem;
	transition: background 0.2s;
}

.co-search-form .search-submit:hover {
	background: var(--co-primary-dk);
	border-color: var(--co-primary-dk);
}

/* =====================================================================
   CONTENT AREAS — surface and text tokens
   ===================================================================== */

#content,
.widget,
.type-post,
.type-page {
	background-color: var(--co-surface);
	color: var(--co-text);
}

.widgettitle,
.widgettitle span {
	color: var(--co-text);
	border-color: var(--co-border);
}

.entry-meta,
.postmeta,
.post-info,
.postinfo {
	color: var(--co-text-muted);
}

.entry-meta a,
.postmeta a,
.postinfo a {
	color: var(--co-text-muted);
}

/* Buttons: keep parent theme's red for general buttons.
   Blue is scoped only to the search form and EV calculator. */

/* =====================================================================
   SIDEBAR
   ===================================================================== */

#sidebar,
.secondary {
	background-color: var(--co-bg);
}

/* =====================================================================
   FOOTER
   ===================================================================== */

#footer {
	background-color: var(--co-nav-bg);
	color: var(--co-text-muted);
	border-top: 1px solid var(--co-border);
}

#footer a {
	color: var(--co-text-muted);
}

#footer a:hover {
	color: #fff;
}

/* =====================================================================
   EV FEATURE CARD — green accent for EV-related content
   ===================================================================== */

.co-ev-card {
	background: var(--co-accent-ev-lt);
	border: 1px solid var(--co-accent-ev);
	border-radius: 10px;
	padding: 16px 20px;
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 20px;
	text-decoration: none;
	color: var(--co-text);
	transition: box-shadow 0.2s;
}

.co-ev-card:hover {
	box-shadow: var(--co-shadow);
	color: var(--co-text);
}

[data-theme="dark"] .co-ev-card {
	background: rgba(22, 163, 74, 0.15);
	border-color: var(--co-accent-ev);
}

.co-ev-card__icon {
	font-size: 2rem;
	line-height: 1;
}

.co-ev-card__title {
	font-weight: 700;
	font-size: 1rem;
	color: var(--co-accent-ev);
}

.co-ev-card__sub {
	font-size: 0.85rem;
	color: var(--co-text-muted);
}

/* =====================================================================
   EV CALCULATOR PAGE
   ===================================================================== */

.co-calc-wrap {
	max-width: 720px;
	margin: 40px auto;
	padding: 0 16px;
}

.co-calc-card {
	background: var(--co-surface);
	border-radius: 16px;
	box-shadow: var(--co-shadow);
	padding: 32px 36px;
	border: 1px solid var(--co-border);
}

.co-calc-card h1 {
	font-size: 1.5rem;
	margin-bottom: 8px;
	color: var(--co-text);
}

.co-calc-card .co-calc-subtitle {
	color: var(--co-text-muted);
	margin-bottom: 28px;
	font-size: 0.95rem;
}

.co-calc-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 16px;
}

.co-calc-field-full {
	grid-column: 1 / -1;
}

.co-calc-fields label,
.co-calc-field-full label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--co-text-muted);
	margin-bottom: 6px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.co-calc-fields select,
.co-calc-fields input,
.co-calc-field-full select,
.co-calc-field-full input {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--co-border);
	border-radius: 8px;
	background: var(--co-bg);
	color: var(--co-text);
	font-size: 0.95rem;
}

.co-calc-fields select:focus,
.co-calc-fields input:focus {
	outline: 2px solid var(--co-primary);
	border-color: var(--co-primary);
}

#co-calc-btn {
	display: block;
	width: 100%;
	padding: 13px;
	background: var(--co-accent-ev);
	color: #fff;
	border: none;
	border-radius: 10px;
	font-size: 1.05rem;
	font-weight: 700;
	cursor: pointer;
	margin-top: 8px;
	transition: background 0.2s;
}

#co-calc-btn:hover {
	background: #15803d;
}

.co-calc-results {
	margin-top: 28px;
	display: none;
}

.co-calc-results.visible {
	display: block;
}

.co-calc-savings {
	text-align: center;
	padding: 20px;
	background: var(--co-accent-ev-lt);
	border-radius: 10px;
	margin-bottom: 20px;
}

[data-theme="dark"] .co-calc-savings {
	background: rgba(22, 163, 74, 0.15);
}

.co-calc-savings__label {
	font-size: 0.9rem;
	color: var(--co-text-muted);
	margin-bottom: 4px;
}

.co-calc-savings__amount {
	font-size: 2.2rem;
	font-weight: 800;
	color: var(--co-accent-ev);
}

.co-calc-savings__period {
	font-size: 0.85rem;
	color: var(--co-text-muted);
}

#co-calc-chart-wrap {
	position: relative;
	height: 260px;
}

.co-calc-share {
	margin-top: 20px;
	text-align: center;
}

.co-calc-share a {
	display: inline-block;
	padding: 10px 24px;
	background: #00b900;
	color: #fff;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.95rem;
}

.co-calc-share a:hover {
	background: #009900;
	color: #fff;
}

/* Responsive */
@media (max-width: 560px) {
	.co-calc-fields {
		grid-template-columns: 1fr;
	}
	.co-calc-card {
		padding: 22px 18px;
	}
}