/*
 Theme Name:   Kadence Child — Moto Deal Fribourg
 Theme URI:    https://motodeal-fribourg.ch
 Description:  Child theme for Kadence — Moto Deal Fribourg (by Garage des Grives)
 Author:       Patrick Yersin
 Author URI:   https://motodeal-fribourg.ch
 Template:     kadence
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  mdf
*/

/* ==========================================================================
   CSS Custom Properties — Moto Deal Fribourg
   ========================================================================== */

:root {
	/* Colors */
	--color-bg:            #0A0A0A;
	--color-surface:       #1C1C1C;
	--color-surface-2:     #252525;
	--color-accent:        #E73223;
	--color-accent-hover:  #C92A1D;
	--color-accent-bg:     rgba(231, 50, 35, 0.10);
	--color-accent-border: rgba(231, 50, 35, 0.30);
	--color-text:          #F5F5F0;
	--color-muted:         #8A8A8A;
	--color-border:        #222222;
	--color-electric:      #0EA5E9;

	/* Typography */
	--font-heading: 'Syne', sans-serif;
	--font-body:    'DM Sans', sans-serif;

	/* Spacing scale */
	--space-xs:  0.25rem;
	--space-sm:  0.5rem;
	--space-md:  1rem;
	--space-lg:  2rem;
	--space-xl:  3rem;
	--space-2xl: 5rem;

	/* Border radius */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;

	/* Transitions */
	--transition-fast: 150ms ease;
	--transition-base: 250ms ease;
}

/* ==========================================================================
   Base — Dark Mode Foundation
   ========================================================================== */

html {
	color-scheme: dark;
}

body {
	background-color: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-text);
}

/* ==========================================================================
   Global Links
   ========================================================================== */

a {
	color: var(--color-accent);
	text-decoration: none;
	transition: color var(--transition-fast);
}

a:hover,
a:focus-visible {
	color: var(--color-accent-hover);
}

/* Navigation links — neutral until hovered */
.site-header a,
.nav--toggle-sub a,
.navigation a {
	color: var(--color-text);
}

.site-header a:hover,
.site-header a:focus-visible,
.nav--toggle-sub a:hover,
.navigation a:hover {
	color: var(--color-accent);
}

/* Footer links */
.site-footer a {
	color: var(--color-muted);
}

.site-footer a:hover,
.site-footer a:focus-visible {
	color: var(--color-accent);
}

/* Focus ring for accessibility (keyboard navigation) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* ==========================================================================
   Components — Cards (base)
   ========================================================================== */

.mdf-card {
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: border-color var(--transition-base), transform var(--transition-base);
}

.mdf-card:hover {
	border-color: var(--color-accent-border);
	transform: translateY(-2px);
}

/* ==========================================================================
   Global Buttons
   ========================================================================== */

/* --- Shared button base --- */
.mdf-btn,
.kb-button,
.wp-block-button__link,
button[type="submit"],
input[type="submit"],
.wpcf7-submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .widget_price_filter .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	padding: 0.75rem 1.5rem;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	line-height: 1.4;
	border: 2px solid transparent;
	border-radius: var(--radius-sm);
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--transition-fast),
	            border-color var(--transition-fast),
	            color var(--transition-fast),
	            transform var(--transition-fast);
}

/* --- Primary (default — filled red) --- */
.mdf-btn,
.mdf-btn--primary,
.kb-button,
.wp-block-button:not(.is-style-outline) .wp-block-button__link,
button[type="submit"],
input[type="submit"],
.wpcf7-submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	color: #fff;
}

.mdf-btn:hover,
.mdf-btn--primary:hover,
.kb-button:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.wpcf7-submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background-color: var(--color-accent-hover);
	border-color: var(--color-accent-hover);
	color: #fff;
}

/* --- Outline variant --- */
.mdf-btn--outline,
.wp-block-button.is-style-outline .wp-block-button__link,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background-color: transparent;
	border-color: var(--color-accent);
	color: var(--color-accent);
}

.mdf-btn--outline:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background-color: var(--color-accent-bg);
	border-color: var(--color-accent);
	color: var(--color-accent);
}

/* --- Active press feedback --- */
.mdf-btn:active,
.kb-button:active,
.wp-block-button__link:active,
button[type="submit"]:active,
.woocommerce a.button:active,
.woocommerce button.button:active {
	transform: scale(0.98);
}

/* --- Disabled state --- */
.mdf-btn:disabled,
button:disabled,
.woocommerce a.button.disabled,
.woocommerce button.button.disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

/* ==========================================================================
   Components — Badges
   ========================================================================== */

.mdf-badge {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	font-family: var(--font-heading);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-radius: var(--radius-sm);
}

.mdf-badge--disponible {
	background-color: rgba(34, 197, 94, 0.15);
	color: #22C55E;
}

.mdf-badge--vendu {
	background-color: rgba(107, 107, 107, 0.15);
	color: var(--color-muted);
}

.mdf-badge--bientot {
	background-color: var(--color-accent-bg);
	color: var(--color-accent);
}

.mdf-badge--electrique {
	background-color: rgba(14, 165, 233, 0.15);
	color: var(--color-electric);
}

.mdf-badge--catalogue {
	background-color: rgba(14, 165, 233, 0.15);
	color: var(--color-electric);
}

/* Catalogue card — subtle visual distinction */
.mdf-card--catalogue {
	border-style: dashed;
}

/* ==========================================================================
   Components — Prix
   ========================================================================== */

.mdf-prix {
	font-family: var(--font-heading);
	font-weight: 800;
	color: var(--color-text);
}

.mdf-prix--promo {
	color: var(--color-accent);
}

.mdf-prix--ancien {
	text-decoration: line-through;
	color: var(--color-muted);
	font-weight: 400;
	font-size: 0.875em;
}

/* ==========================================================================
   Layout — Sections
   ========================================================================== */

.mdf-section {
	padding: var(--space-xl) 0;
}

.mdf-section--surface {
	background-color: var(--color-surface);
}

/* ==========================================================================
   Global Forms
   ========================================================================== */

.mdf-input,
.mdf-textarea,
.mdf-select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="search"],
textarea,
select,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea,
.woocommerce input.input-text,
.woocommerce textarea,
.woocommerce select {
	width: 100%;
	padding: 0.75rem 1rem;
	background-color: var(--color-surface-2);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: 1rem;
	transition: border-color var(--transition-fast);
}

.mdf-input:focus,
.mdf-textarea:focus,
.mdf-select:focus,
input:focus,
textarea:focus,
select:focus,
.wpcf7 input:focus,
.wpcf7 textarea:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 1px var(--color-accent-border);
}

::placeholder {
	color: var(--color-muted);
	opacity: 1;
}

label,
.wpcf7 label {
	color: var(--color-text);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 0.875rem;
	margin-bottom: var(--space-xs);
}

/* ==========================================================================
   Utilities
   ========================================================================== */

/* Inline SVG icons — inherit color from parent via currentColor */
.mdf-icon-svg {
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
}

.mdf-text-muted {
	color: var(--color-muted);
}

.mdf-text-accent {
	color: var(--color-accent);
}

.mdf-visually-hidden,
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   Mobile Bottom Bar
   ========================================================================== */

.mdf-bottom-bar {
	display: flex;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 999;
	background-color: var(--color-surface);
	border-top: 1px solid var(--color-border);
	padding-bottom: env(safe-area-inset-bottom, 0);
}

.mdf-bottom-bar__item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 8px 0;
	min-height: 56px;
	color: var(--color-muted);
	text-decoration: none;
	font-family: var(--font-heading);
	font-size: 0.625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	transition: color var(--transition-fast);
}

.mdf-bottom-bar__item:hover,
.mdf-bottom-bar__item:active {
	color: var(--color-accent);
}

.mdf-bottom-bar__item--call {
	color: var(--color-accent);
}

.mdf-bottom-bar__item svg {
	flex-shrink: 0;
}

body {
	padding-bottom: 56px;
}

@media (min-width: 48em) {
	.mdf-bottom-bar {
		display: none;
	}

	body {
		padding-bottom: 0;
	}
}

/* ==========================================================================
   Responsive — Mobile-first breakpoints
   ========================================================================== */

@media (min-width: 48em) {
	.mdf-section {
		padding: var(--space-2xl) 0;
	}
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header .site-branding {
	line-height: 0;
	max-width: fit-content;
	flex-shrink: 0;
}

.site-header .site-branding a.brand,
.site-header .site-branding a.has-logo-image {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	max-width: fit-content;
	height: auto;
}

.site-header .site-branding img {
	max-height: 55px !important;
	width: auto !important;
	max-width: 160px !important;
	height: auto !important;
	object-fit: contain;
	display: block;
}

.header-navigation .primary-menu-container > ul {
	flex-wrap: nowrap;
	white-space: nowrap;
}

.header-button-wrap .button {
	white-space: nowrap;
	padding: 0.5rem 1rem;
	font-size: 0.8125rem;
}

/* ==========================================================================
   Layout — Content Container
   ========================================================================== */

.mdf-container {
	max-width: 1290px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--space-lg);
	padding-right: var(--space-lg);
}

.site .site-container {
	max-width: 1290px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--space-lg);
	padding-right: var(--space-lg);
}

.site #inner-wrap .content-wrap {
	padding-left: var(--space-lg);
	padding-right: var(--space-lg);
}

.entry-content-wrap,
.content-area {
	max-width: 1290px;
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 64em) {
	.site #inner-wrap .content-wrap {
		padding-left: var(--space-xl);
		padding-right: var(--space-xl);
	}
}

/* ==========================================================================
   Header — Cart icon (hide when empty)
   ========================================================================== */

.mdf-cart-empty .header-cart-wrap {
	display: none !important;
}

.header-cart-wrap .header-cart-button {
	color: var(--color-text);
}

.header-cart-wrap .header-cart-button:hover {
	color: var(--color-accent);
}

/* ==========================================================================
   Page bottom spacing — consistent gap before footer
   ========================================================================== */

.mdf-page-home,
.mdf-page-contact,
.mdf-page-atelier,
.mdf-page-transport,
.mdf-page-legal,
.mdf-single-vehicule,
.mdf-archive-vehicule {
	padding-bottom: var(--space-2xl);
}

/* ==========================================================================
   Placeholder Images (shared)
   ========================================================================== */

.mdf-placeholder-img {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	width: 100%;
	height: 100%;
	min-height: 240px;
	background-color: var(--color-surface);
	border: 1px dashed var(--color-border);
	border-radius: var(--radius-lg);
	color: var(--color-muted);
	font-size: 0.875rem;
}