/*
Theme Name: Makoh Auto Parts
Template: astra
Description: Automotive/car-parts brand skin for the Astra theme — bold industrial palette, Oswald + Inter typography, hero/category/card components for a car parts retailer.
Author: Makoh Dev
Version: 1.0.0
*/

:root {
	--auto-dark: #14181b;
	--auto-dark-2: #1e2429;
	--auto-red: #d62828;
	--auto-red-dark: #a81f1f;
	--auto-grey: #495057;
	--auto-grey-light: #8a919a;
	--auto-light: #f4f5f7;
	--auto-white: #ffffff;
	--auto-text: #1d2226;
	--auto-amber: #f4a300;
	--auto-font-head: 'Oswald', 'Arial Narrow', sans-serif;
	--auto-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---------- Base typography ---------- */
body,
button,
input,
select,
textarea {
	font-family: var(--auto-font-body);
	color: var(--auto-text);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title,
.site-title {
	font-family: var(--auto-font-head);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--auto-dark);
}

h1 { font-weight: 700; }

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

/* ---------- Header ---------- */
#masthead,
.site-header,
.main-header-bar {
	background-color: var(--auto-white);
	border-bottom: 3px solid var(--auto-red);
}

#masthead .site-title a {
	color: var(--auto-dark);
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.03em;
}

#masthead .site-description {
	font-family: var(--auto-font-body);
	text-transform: none;
	color: var(--auto-grey);
}

.main-header-bar-navigation .main-nav-menu > .menu-item > a,
.main-header-menu > .menu-item > a {
	font-family: var(--auto-font-head);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.9rem;
	letter-spacing: 0.03em;
}

.main-header-bar-navigation .main-nav-menu > .menu-item > a:hover,
.main-header-bar-navigation .current-menu-item > a {
	color: var(--auto-red);
}

/* ---------- Buttons ---------- */
.ast-button,
button,
.button,
input[type="submit"],
.wp-block-button__link,
.wpcf7-submit {
	background-color: var(--auto-red) !important;
	border-color: var(--auto-red) !important;
	color: var(--auto-white) !important;
	font-family: var(--auto-font-head) !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 600 !important;
	border-radius: 3px !important;
	padding: 0.85em 1.8em !important;
	transition: background-color 0.2s ease, transform 0.15s ease;
}
.ast-button:hover,
button:hover,
.button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.wpcf7-submit:hover {
	background-color: var(--auto-red-dark) !important;
	border-color: var(--auto-red-dark) !important;
	transform: translateY(-1px);
}

.btn-outline .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent !important;
	color: var(--auto-white) !important;
	border: 2px solid var(--auto-white) !important;
}
.btn-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--auto-white) !important;
	color: var(--auto-dark) !important;
}

.btn-dark .wp-block-button__link {
	background-color: var(--auto-dark) !important;
	border-color: var(--auto-dark) !important;
}
.btn-dark .wp-block-button__link:hover {
	background-color: var(--auto-dark-2) !important;
}

.btn-whatsapp .wp-block-button__link {
	background-color: #25d366 !important;
	border-color: #25d366 !important;
}
.btn-whatsapp .wp-block-button__link:hover {
	background-color: #1ebe5a !important;
}

/* ---------- Hero ---------- */
.autoparts-hero {
	position: relative;
	background-size: cover;
	background-position: center;
	background-color: var(--auto-dark);
	padding: 100px 24px;
	text-align: center;
	color: var(--auto-white);
}
.autoparts-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20,24,27,0.75) 0%, rgba(20,24,27,0.88) 100%);
}
.autoparts-hero > * {
	position: relative;
	z-index: 1;
}
.autoparts-hero h1 {
	color: var(--auto-white);
	font-size: clamp(2rem, 5vw, 3.4rem);
	max-width: 900px;
	margin: 0 auto 16px;
}
.autoparts-hero p {
	font-size: 1.15rem;
	max-width: 640px;
	margin: 0 auto 28px;
	color: #e6e8ea;
}
.autoparts-hero .wp-block-buttons {
	justify-content: center;
}

.autoparts-eyebrow {
	display: inline-block;
	font-family: var(--auto-font-head);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.8rem;
	color: var(--auto-red);
	background: rgba(214,40,40,0.12);
	padding: 6px 14px;
	border-radius: 3px;
	margin-bottom: 14px;
}

/* ---------- Trust strip ---------- */
.autoparts-trust {
	background: var(--auto-dark);
	color: var(--auto-white);
	padding: 20px 0;
}
.autoparts-trust .wp-block-column {
	text-align: center;
	font-family: var(--auto-font-head);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 0.95rem;
	color: #e6e8ea;
}

/* ---------- Category / part cards ---------- */
.autoparts-card {
	background: var(--auto-white);
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(20,24,27,0.08);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	height: 100%;
}
.autoparts-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 24px rgba(20,24,27,0.14);
}
.autoparts-card img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	display: block;
}
.autoparts-card-body {
	padding: 18px 20px 22px;
}
.autoparts-card-body h3 {
	font-size: 1.1rem;
	margin: 0 0 8px;
}
.autoparts-card-body p {
	color: var(--auto-grey);
	font-size: 0.92rem;
	margin: 0 0 14px;
}
.autoparts-card-body a.autoparts-card-link {
	font-family: var(--auto-font-head);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.82rem;
	letter-spacing: 0.03em;
	color: var(--auto-red);
	text-decoration: none;
}
.autoparts-card-body a.autoparts-card-link:hover {
	color: var(--auto-red-dark);
}

/* ---------- Section helpers ---------- */
.autoparts-section-dark {
	background: var(--auto-dark);
	color: var(--auto-white);
}
.autoparts-section-dark h2,
.autoparts-section-dark h3 {
	color: var(--auto-white);
}
.autoparts-section-dark p {
	color: #c9ccd0;
}
.autoparts-section-light {
	background: var(--auto-light);
}

.autoparts-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--auto-font-head);
	text-transform: uppercase;
	font-size: 0.85rem;
	letter-spacing: 0.02em;
}
.autoparts-badge::before {
	content: "";
	width: 8px;
	height: 8px;
	background: var(--auto-red);
	border-radius: 50%;
	flex-shrink: 0;
}

/* ---------- Stats ---------- */
.autoparts-stat {
	text-align: center;
}
.autoparts-stat .num {
	font-family: var(--auto-font-head);
	font-size: 2.6rem;
	font-weight: 700;
	color: var(--auto-red);
	display: block;
	line-height: 1.1;
}
.autoparts-stat .label {
	font-family: var(--auto-font-head);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 0.85rem;
	color: var(--auto-grey);
}
.autoparts-section-dark .autoparts-stat .label {
	color: #c9ccd0;
}

/* ---------- Footer ---------- */
#colophon,
.site-footer,
.ast-small-footer {
	background-color: var(--auto-dark) !important;
	color: #c9ccd0;
}
#colophon a,
.site-footer a {
	color: #e6e8ea;
}
#colophon a:hover,
.site-footer a:hover {
	color: var(--auto-red);
}
#colophon h1, #colophon h2, #colophon h3, #colophon h4,
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4 {
	color: var(--auto-white);
}

/* ---------- Breadcrumb / misc ---------- */
.ast-breadcrumbs,
.woocommerce-breadcrumb {
	font-family: var(--auto-font-head);
	text-transform: uppercase;
	font-size: 0.8rem;
	letter-spacing: 0.03em;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
	.autoparts-hero {
		padding: 64px 20px;
	}
	.autoparts-stat .num {
		font-size: 2rem;
	}
}