/*
Theme Name:   Menin Motorsport
Theme URI:    https://meninmotorsport.co.za/
Description:  Astra child theme for Menin Motorsport — workshop + performance parts store.
Author:       Open Road Media
Template:     astra
Version:      1.0.0
Text Domain:  menin-motorsport
*/

/* ------------------------------------------------------------
   Tokens — brand from the original site: charcoal + race yellow.
   Yellow is only ever a fill/accent on dark or behind dark text;
   as text on white it fails contrast, so --mm-yellow-text exists.
   ------------------------------------------------------------ */
:root {
	--mm-ink: #1a1a1a;
	--mm-ink-2: #242424;
	--mm-ink-3: #333;
	--mm-yellow: #fbd202;
	--mm-yellow-hover: #e2bd00;
	--mm-yellow-text: #7a6500;
	--mm-paper: #ffffff;
	--mm-paper-2: #f4f4f2;
	--mm-line: #e3e3df;
	--mm-muted: #666;
	--mm-font-head: 'Oswald', 'Arial Narrow', Arial, sans-serif;
	--mm-font-body: 'Montserrat', Arial, sans-serif;
}

body,
button,
input,
select,
textarea {
	font-family: var(--mm-font-body);
	color: var(--mm-ink);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title,
.woocommerce-loop-product__title,
.product_title {
	font-family: var(--mm-font-head);
	text-transform: uppercase;
	letter-spacing: .02em;
	font-weight: 600;
	color: var(--mm-ink);
}

a { color: var(--mm-ink); text-decoration-color: var(--mm-yellow); text-underline-offset: 3px; }
a:hover, a:focus { color: var(--mm-yellow-text); }

::selection { background: var(--mm-yellow); color: var(--mm-ink); }

:focus-visible { outline: 3px solid var(--mm-yellow); outline-offset: 2px; }

/* ------------------------------------------------------------
   Buttons — yellow fill, dark text (never white on yellow).
   ------------------------------------------------------------ */
.ast-button,
.button,
button,
input[type="submit"],
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button.alt,
.woocommerce a.button.alt,
.wc-block-components-button:not(.is-link),
.resto-btn,
.resto-btn-primary {
	background-color: var(--mm-yellow) !important;
	color: var(--mm-ink) !important;
	border-color: var(--mm-yellow) !important;
	font-family: var(--mm-font-head);
	text-transform: uppercase;
	letter-spacing: .06em;
	font-weight: 600;
	border-radius: 3px;
}
.ast-button:hover,
.button:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button.alt:hover,
.wc-block-components-button:not(.is-link):hover,
.resto-btn:hover,
.resto-btn-primary:hover {
	background-color: var(--mm-yellow-hover) !important;
	border-color: var(--mm-yellow-hover) !important;
	color: var(--mm-ink) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent !important;
	color: inherit !important;
	border: 2px solid currentColor !important;
}

/* ------------------------------------------------------------
   Top bar + header (dark)
   ------------------------------------------------------------ */
.menin-topbar {
	background: #000;
	color: #ddd;
	font-size: 13px;
	border-bottom: 2px solid var(--mm-yellow);
}
.menin-topbar__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 7px 20px;
	display: flex;
	justify-content: flex-end;
	gap: 22px;
	flex-wrap: wrap;
}
.menin-topbar a { color: #ddd; text-decoration: none; }
.menin-topbar a:hover { color: var(--mm-yellow); }
.menin-topbar__address { margin-right: auto; }

.site-header,
.ast-primary-header-bar,
.ast-mobile-header-wrap .ast-primary-header-bar,
.main-header-bar {
	background-color: var(--mm-ink) !important;
	border-bottom: 0;
}
.site-header .main-header-menu > .menu-item > .menu-link,
.site-header .ast-header-account-wrap,
.site-header .ast-site-header-cart .ast-cart-menu-wrap,
.site-header .site-title a,
.site-header .ast-mobile-menu-trigger-minimal {
	color: #fff !important;
	font-family: var(--mm-font-head);
	text-transform: uppercase;
	letter-spacing: .06em;
	font-weight: 500;
}
.site-header .main-header-menu > .menu-item:hover > .menu-link,
.site-header .main-header-menu > .current-menu-item > .menu-link,
.site-header .main-header-menu > .current_page_item > .menu-link {
	color: var(--mm-yellow) !important;
}
.site-header .sub-menu { background: var(--mm-ink-2) !important; border-top: 2px solid var(--mm-yellow) !important; }
.site-header .sub-menu .menu-link { color: #fff !important; }
.site-header .custom-logo { max-height: 64px; width: auto; }
.ast-site-header-cart .count,
.ast-site-header-cart .ast-cart-menu-wrap .count:after { background: var(--mm-yellow) !important; color: var(--mm-ink) !important; border-color: var(--mm-yellow) !important; }

/* Mobile menu drawer */
.ast-mobile-header-content,
.ast-mobile-popup-drawer .ast-mobile-popup-inner { background: var(--mm-ink) !important; }
.ast-mobile-header-content .menu-link,
.ast-mobile-popup-drawer .menu-link { color: #fff !important; border-color: var(--mm-ink-3) !important; }

/* ------------------------------------------------------------
   Content
   ------------------------------------------------------------ */
.ast-separate-container,
.ast-separate-container #primary { background: var(--mm-paper-2); }
.entry-content > .alignfull:first-child { margin-top: 0; }

.mm-eyebrow {
	font-family: var(--mm-font-head);
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: 13px;
	color: var(--mm-yellow-text);
	font-weight: 600;
}
.has-mm-ink-background-color .mm-eyebrow,
.mm-dark .mm-eyebrow { color: var(--mm-yellow); }

/* Dark sections built with core Group/Cover blocks */
.mm-dark { background: var(--mm-ink); color: #e8e8e8; }
.mm-dark h1, .mm-dark h2, .mm-dark h3, .mm-dark h4 { color: #fff; }
.mm-dark a:not(.wp-block-button__link) { color: var(--mm-yellow); }

/* Accent rule under section headings */
.mm-rule::after {
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	background: var(--mm-yellow);
	margin-top: 12px;
}
.has-text-align-center.mm-rule::after { margin-left: auto; margin-right: auto; }

/* Service cards (core Columns > Column with .mm-card) */
.mm-card {
	background: var(--mm-paper);
	border-top: 4px solid var(--mm-yellow);
	padding: 26px 24px !important;
	box-shadow: 0 2px 14px rgba(0,0,0,.06);
	height: 100%;
}
.mm-dark .mm-card { background: var(--mm-ink-2); box-shadow: none; }

/* ------------------------------------------------------------
   WooCommerce
   ------------------------------------------------------------ */
.woocommerce ul.products li.product,
.wc-block-grid__product {
	background: var(--mm-paper);
	border: 1px solid var(--mm-line);
	padding-bottom: 16px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 17px; padding: 0 14px; }
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--mm-ink) !important; font-weight: 700; }
.woocommerce span.onsale { background: var(--mm-yellow); color: var(--mm-ink); }
.woocommerce-message,
.woocommerce-info { border-top-color: var(--mm-yellow) !important; }
.woocommerce-message::before,
.woocommerce-info::before { color: var(--mm-ink) !important; }

/* resto-layouts: dark text on yellow wherever it uses the primary as a fill */
.resto-hero .resto-btn,
.resto-cta .resto-btn,
.resto-category-card:hover .resto-category-name { color: var(--mm-ink) !important; }

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
.menin-footer { background: var(--mm-ink); color: #bdbdbd; font-size: 14px; border-top: 4px solid var(--mm-yellow); }
.menin-footer__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 48px 20px 28px;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 40px;
}
.menin-footer a { color: #e8e8e8; text-decoration: none; }
.menin-footer a:hover { color: var(--mm-yellow); }
.menin-footer__brand { font-family: var(--mm-font-head); text-transform: uppercase; font-size: 22px; color: #fff; letter-spacing: .04em; margin-bottom: 10px; }
.menin-footer__heading { font-family: var(--mm-font-head); text-transform: uppercase; letter-spacing: .1em; color: var(--mm-yellow); margin-bottom: 10px; font-weight: 600; }
.menin-footer__menu { list-style: none; margin: 0; padding: 0; }
.menin-footer__menu li { margin: 0 0 6px; }
.menin-footer__bar { border-top: 1px solid var(--mm-ink-3); text-align: center; padding: 16px 20px; font-size: 12px; color: #8a8a8a; }

@media (max-width: 921px) {
	.menin-footer__inner { grid-template-columns: 1fr; gap: 24px; }
	.menin-topbar__inner { justify-content: center; gap: 14px; }
	.menin-topbar__address { margin-right: 0; width: 100%; text-align: center; }
}

/* ------------------------------------------------------------
   Page sections (core Group blocks with these classes)
   ------------------------------------------------------------ */
.entry-content > .wp-block-group.alignfull,
.entry-content > .wp-block-image.alignfull { margin-top: 0; margin-bottom: 0; }
.mm-section { padding: 64px 20px; }
.mm-section > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
.mm-section--alt { background: var(--mm-paper-2); }
.mm-hero-strip { padding: 36px 20px; border-bottom: 4px solid var(--mm-yellow); }
.mm-hero-strip h1 { font-size: clamp(24px, 3.4vw, 38px); margin-bottom: 18px; }
.mm-banner img { width: 100%; height: auto; display: block; }
.mm-section .wp-block-columns { gap: 32px; }
.mm-cards { margin-top: 28px; }
.mm-cards + .mm-cards { margin-top: 32px; }
.mm-card h3 { font-size: 20px; margin-bottom: 8px; }
.mm-card h3 a { text-decoration: none; }
.mm-dark .mm-card h3 a { color: #fff; }
.mm-dark .mm-card h3 a:hover { color: var(--mm-yellow); }
.mm-card__icon { margin: 0 0 14px !important; }
.mm-card__icon img { width: 72px; height: 72px; border-radius: 3px; }
.mm-section .wp-block-image img { border-radius: 3px; }
.mm-section .wp-block-list li { margin-bottom: 10px; }
.mm-section h1 { font-size: clamp(30px, 4vw, 46px); line-height: 1.1; }
.mm-section h2 { font-size: clamp(24px, 3vw, 34px); }
.mm-dark .wp-block-button.is-style-outline .wp-block-button__link { color: #fff !important; }
.mm-dark .wp-block-button.is-style-outline .wp-block-button__link:hover { color: var(--mm-yellow) !important; }
@media (max-width: 781px) { .mm-section { padding: 44px 16px; } }

/* resto CTA (dark style): white heading, not the default text colour */
.resto-cta-dark { background: var(--mm-ink) !important; border-top: 4px solid var(--mm-yellow); }
.resto-cta-dark .resto-cta-title { color: #fff !important; font-family: var(--mm-font-head); text-transform: uppercase; }
.resto-cta-dark .resto-cta-subtitle { color: #cfcfcf !important; }

/* Category cards use product photos on white — contain, don't crop */
.resto-cat-card-image { background: #fff; }
.resto-cat-card-image img { object-fit: contain !important; padding: 18px 18px 56px; }

/* "Book a Service" as a button in the header menu */
.site-header .main-header-menu > .mm-menu-cta > .menu-link {
	background: var(--mm-yellow);
	color: var(--mm-ink) !important;
	border-radius: 3px;
	padding: 0 16px !important;
	line-height: 38px;
	margin-left: 8px;
}
.site-header .main-header-menu > .mm-menu-cta > .menu-link:hover { background: var(--mm-yellow-hover); color: var(--mm-ink) !important; }
.site-header .custom-logo { max-height: 72px; }

.mm-price-request { font-family: var(--mm-font-head); text-transform: uppercase; letter-spacing: .06em; font-size: 15px; color: var(--mm-ink); }
.woocommerce ul.products li.product .mm-price-request { display: block; padding: 0 14px; font-size: 13px; color: var(--mm-muted); }
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--mm-yellow) !important; border-color: var(--mm-yellow) !important; color: var(--mm-ink) !important; }
.woocommerce nav.woocommerce-pagination ul li a { color: var(--mm-ink) !important; }
.woocommerce ul.products li.product .ast-woo-product-category { padding: 0 14px; }
.site-header .main-header-menu > .mm-menu-cta { display: flex; align-items: center; }
.menin-footer__bar a { color: var(--mm-yellow); }
.menin-footer__bar a:hover { text-decoration: underline; }
.resto-cat-card-overlay { padding: 8px 10px !important; background: linear-gradient(transparent, rgba(26,26,26,.92) 35%) !important; }
.resto-cat-card-name { font-size: 13px !important; line-height: 1.25; margin: 0 !important; }
.resto-cat-card-image img { padding: 10px 10px 44px !important; }