/*
Theme Name: Storefront Child — J-Lube
Template: storefront
Description: Reproduces the look of the old Shopify Debut theme (Muli/Mulish, navy #162950, red-orange #da2f0c).
Version: 1.2.3
*/

/* --- Typography: Muli (now Mulish), navy text, big friendly base size --- */
body, button, input, select, textarea {
	font-family: 'Mulish', sans-serif;
	color: #162950;
}
body { font-size: 18px; }
@media (min-width: 768px) {
	body { font-size: 20px; }
}
h1, h2, h3, h4, h5, h6 {
	font-family: 'Mulish', sans-serif;
	font-weight: 600;
	color: #162950;
}

/* --- Links: navy, blue on hover (Debut behaviour) --- */
a { color: #162950; }
a:hover, a:focus { color: #27488c; }

/* --- Buttons: Debut red-orange, 2px radius, exact hover shade --- */
.button, button.button, input[type="submit"], .wp-block-button__link,
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button,
.added_to_cart, .single_add_to_cart_button {
	border-radius: 2px;
}
.button:hover, button.button:hover, input[type="submit"]:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.single_add_to_cart_button:hover {
	background-color: #aa2509 !important;
	color: #fff !important;
}

/* --- Header: white like Debut; logo image (includes fist, bubbles, NZ map) at fixed height --- */
.site-header, .storefront-primary-navigation, .main-navigation ul.menu ul.sub-menu {
	background-color: #fff;
}
.site-header { border-bottom: 1px solid #e4e4e4; }


/* --- Price in navy, not grey --- */
.woocommerce-Price-amount { color: #162950; }

/* --- Front page: hide page title, centred intro, Debut-style feature rows --- */
.home.page .entry-title { display: none; }
.jl-intro { text-align: center; margin: 10px auto 55px; }
.jl-intro h2 { font-size: clamp(26px, 3.2vw, 40px); margin-bottom: 16px; }
.jl-intro p { max-width: 760px; margin-left: auto; margin-right: auto; }
.jl-feature {
	display: flex; align-items: center; gap: 40px;
	margin: 0 0 55px;
}
.jl-feature--flip { flex-direction: row-reverse; }
.jl-feature img { width: 50%; height: auto; }
.jl-feature__text { width: 50%; }
@media (max-width: 700px) {
	.jl-feature, .jl-feature--flip { flex-direction: column; }
	.jl-feature img, .jl-feature__text { width: 100%; }
}

/* --- Footer: Debut layout — centered Quick links in one row, plain copyright --- */
.site-footer .widget { text-align: center; margin-bottom: 1em; }
.site-footer .widget h4 { font-size: 17px; margin-bottom: 12px; color: #3d4246; }
.site-footer .widget ul { list-style: none; margin: 0; padding: 0; }
.site-footer .widget ul li { display: inline-block; margin: 0 14px 5px; }
.site-footer .widget ul li a { color: #3d4246; text-decoration: none; }
.site-footer .widget ul li a:hover { color: #27488c; }
.jl-copyright { text-align: center; font-size: 15px; padding: 6px 0 0; }

/* --- Header logo sizing: undo Storefront 230px cap --- */
.site-header .site-branding img.custom-logo { max-width: none; width: auto; height: auto; max-height: 100px; }
@media (max-width: 767px) {
	.site-header .site-branding img.custom-logo { max-height: 64px; max-width: 100%; }
}

/* --- Intro row: text left, NZ map right (alternates with rows below) --- */
.jl-intro-row { display: flex; align-items: center; gap: 40px; margin: 10px 0 55px; }
.jl-intro-text { width: 62%; text-align: left; }
.jl-intro-text h2 { font-size: clamp(26px, 3.2vw, 40px); margin-bottom: 16px; }
.jl-intro-map { width: 38%; text-align: center; }
.jl-intro-map img { max-height: 330px; width: auto; display: inline-block; }
@media (max-width: 700px) {
	.jl-intro-row { flex-direction: column; }
	.jl-intro-text, .jl-intro-map { width: 100%; }
	.jl-intro-map img { max-height: 220px; }
}