/*
Theme Name: MotoDoctor
Theme URI: https://motodoctor.rs
Author: MotoDoctor
Description: Egyedi téma a MotoDoctor (Horgoš) weboldalához – motormentés, Hengjian motorok, felszerelés, webshop, szerviz.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.1
Text Domain: motodoctor
*/

:root {
	--red: #C1282D;
	--red-dark: #9A1F23;
	--red-light: #FF4D4D;
	--ink: #1E1F23;
	--dark: #16171A;
	--darker: #0F1012;
	--bg: #ECEBE7;
	--paper: #F7F6F3;
	--line: #D3D1CB;
	--muted: #55585F;
	--muted-light: #C9CBD0;
	--muted-mid: #A9ACB3;
	--mono: 'JetBrains Mono', ui-monospace, monospace;
	--head: 'Exo 2', 'Archivo', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 150px; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Archivo', system-ui, sans-serif; font-size: 17px; line-height: 1.55; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--red); }
a:hover { color: var(--red-dark); }
h1, h2, h3 { font-family: var(--head); letter-spacing: -.005em; text-transform: uppercase; margin: 0; }
.wrap { max-width: 1280px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 100; background: #fff; padding: 8px 12px; clip: auto; width: auto; height: auto; }
.kicker { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.on-dark .kicker, .kicker--light { color: var(--red-light); }
.btn { display: inline-block; background: var(--red); color: #fff; text-decoration: none; font-weight: 800; padding: 15px 24px; border-radius: 4px; border: 0; font: inherit; font-weight: 800; cursor: pointer; line-height: 1.3; }
.btn:hover { background: var(--red-dark); color: #fff; }
.btn--ghost { background: rgba(22,23,26,.35); border: 1px solid rgba(255,255,255,.35); color: #fff; font-weight: 700; }
.btn--ghost:hover { background: rgba(22,23,26,.6); }
.btn--dark { background: var(--dark); }
.btn--dark:hover { background: #000; }
:focus-visible { outline: 3px solid var(--red-light); outline-offset: 2px; }

/* ---------- Fejléc ---------- */
.site-top { position: sticky; top: 0; z-index: 50; box-shadow: 0 2px 12px rgba(0,0,0,.25); }
.topbar { background: var(--red); color: #fff; font-size: 15px; }
.topbar .wrap { padding-top: 9px; padding-bottom: 9px; display: flex; flex-wrap: wrap; gap: 4px 24px; justify-content: space-between; align-items: center; }
.topbar strong { text-transform: uppercase; letter-spacing: .04em; font-weight: 800; }
.topbar a { color: #fff; font-family: var(--mono); font-weight: 600; text-decoration: none; }
.site-header { background: var(--dark); }
.site-header .wrap { padding-top: 14px; padding-bottom: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
.brand img { height: 54px; width: auto; }
.main-nav { flex: 1 1 480px; display: flex; flex-wrap: wrap; gap: 0 22px; font-size: 16px; font-weight: 600; }
.main-nav a { color: #fff; text-decoration: none; padding: 10px 0; }
.main-nav a:hover { color: var(--red-light); }
.header-tools { display: flex; align-items: center; gap: 12px; }
.lang-switch { display: flex; align-items: center; gap: 2px; font-size: 14px; font-weight: 600; }
.lang-switch svg { margin-right: 4px; }
.lang-switch a { color: var(--muted-light); text-decoration: none; padding: 12px 8px; }
.lang-switch a[aria-current] { color: #fff; box-shadow: inset 0 -2px 0 var(--red-light); }
.cart-link { position: relative; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: #fff; border: 1px solid #3A3D44; border-radius: 4px; }
.cart-link:hover { color: #fff; border-color: #fff; }
.cart-count { position: absolute; top: -7px; right: -7px; background: var(--red); color: #fff; font-size: 12px; font-weight: 800; min-width: 20px; height: 20px; border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 0 5px; }
.header-cta { padding: 12px 18px; font-size: 16px; }

@media (max-width: 900px) {
	html { scroll-padding-top: 120px; }
	.site-header .wrap { gap: 8px 16px; }
	.brand img { height: 44px; }
	.main-nav { order: 3; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; gap: 0 18px; scrollbar-width: none; font-size: 15px; }
	.main-nav a { white-space: nowrap; padding: 6px 0; }
	.header-tools { margin-left: auto; }
	.header-cta { display: none; }
	.topbar .wrap { font-size: 13px; }
}

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--dark); color: #fff; overflow: hidden; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(22,23,26,.96) 0%, rgba(22,23,26,.86) 45%, rgba(22,23,26,.35) 100%); }
.hero .wrap { position: relative; z-index: 1; padding-top: 104px; padding-bottom: 112px; display: flex; flex-direction: column; gap: 26px; }
.hero h1 { font-weight: 900; font-size: clamp(46px, 8vw, 92px); line-height: .92; max-width: 12ch; }
.hero h1 span { color: var(--red-light); }
.hero p { margin: 0; font-size: 20px; color: #D5D7DB; max-width: 42ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__facts { list-style: none; margin: 12px 0 0; padding: 20px 0 0; border-top: 1px solid rgba(255,255,255,.18); display: flex; flex-wrap: wrap; gap: 10px 36px; font-size: 15px; color: #D5D7DB; max-width: 820px; }
.hero__facts strong { color: #fff; }
@media (max-width: 700px) { .hero .wrap { padding-top: 64px; padding-bottom: 72px; } .hero p { font-size: 18px; } }

/* ---------- Szekciók ---------- */
.section { padding-top: 80px; padding-bottom: 80px; }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 32px; }
.section-head h2 { font-weight: 900; font-size: clamp(38px, 5vw, 56px); line-height: 1; }
.section-head h2 span { color: var(--red); }
.section-head p { margin: 0; color: var(--muted); max-width: 46ch; }
.band-paper { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band-dark { background: var(--darker); color: #fff; }

.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2px; background: var(--line); border: 2px solid var(--line); }
.grid-cards > * { background: var(--paper); padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.grid-cards h3 { font-size: 22px; font-weight: 800; }
.grid-cards p { margin: 0; color: var(--muted); font-size: 16px; }
.grid-cards .tag { font-family: var(--mono); color: var(--red); font-weight: 600; font-size: 14px; }
.grid-cards .cta-row { background: var(--dark); color: #fff; grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.grid-cards .cta-row span { font-family: var(--mono); font-size: 13px; color: var(--muted-mid); }

.rescue { display: flex; flex-wrap: wrap; gap: 24px; }
.rescue > * { flex: 1 1 420px; min-width: 0; }
.rescue__photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; align-content: start; }
.rescue__photos img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; border-radius: 4px; }

/* Hengjian */
.bikes { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.bikes__text { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.bikes__text h2 { font-weight: 900; font-size: clamp(42px, 5vw, 64px); line-height: .92; }
.bikes__text p { margin: 0; color: var(--muted-light); max-width: 42ch; }
.bikes__text .btn { align-self: flex-start; }
.bikes__list { flex: 1.6 1 600px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.bike-card { color: #fff; text-decoration: none; border: 1px solid #3A3D44; border-radius: 4px; padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.bike-card:hover { color: #fff; border-color: var(--red-light); }
.bike-card img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; margin-bottom: 8px; }
.bike-card img.contain { object-fit: contain; background: #fff; }
.bike-card .tag { font-family: var(--mono); font-size: 12px; color: var(--red-light); }
.bike-card .tag.used { color: #FFB020; }
.bike-card .price { font-family: var(--mono); font-size: 15px; }
.bike-card .price .woocommerce-Price-amount { color: #fff; }

/* Felszerelés */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.tile { text-decoration: none; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.tile:hover { color: var(--ink); border-color: var(--ink); }
.tile strong { font-size: 19px; text-transform: uppercase; font-family: var(--head); }
.tile span { font-size: 14px; color: var(--muted); }
.tile--dark { background: var(--dark); border-color: var(--dark); color: #fff; }
.tile--dark:hover { color: #fff; }
.tile--dark span { color: var(--muted-light); }
.tile img, .tile .ph { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.ph { background-color: #D9D7D1; background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.05) 0 2px, transparent 2px 14px); color: var(--muted); display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--mono); font-size: 12px; padding: 12px; }

.parts-strip { text-decoration: none; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 16px; display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; }
.parts-strip:hover { color: var(--ink); border-color: var(--ink); }
.parts-strip img { width: 120px; height: 90px; object-fit: cover; border-radius: 2px; flex: none; }
.parts-strip .txt { flex: 1 1 280px; }
.parts-strip strong { display: block; font-size: 20px; text-transform: uppercase; font-family: var(--head); }
.parts-strip .txt span { color: var(--muted); font-size: 15px; }
.parts-strip .go { font-weight: 700; color: var(--red); }

/* Szerviz */
.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2px; background: var(--line); border: 2px solid var(--line); }
.service-grid article { background: var(--paper); padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.service-grid article.big { grid-row: span 2; }
.service-grid h3 { font-size: 24px; font-weight: 800; }
.service-grid article.big h3 { font-size: 32px; line-height: 1.05; }
.service-grid p { margin: 0; color: var(--muted); }
.service-grid img { flex: 1 1 auto; min-height: 260px; width: 100%; object-fit: cover; border-radius: 2px; }
.service-grid a { font-weight: 700; margin-top: auto; font-size: 15px; }

.quote-form { margin-top: 24px; background: #fff; border-radius: 4px; box-shadow: 0 10px 30px rgba(22,23,26,.10); padding: 24px; display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.quote-form label { flex: 1 1 200px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 700; }
.quote-form input[type=text], .quote-form input[type=tel], .quote-form select { height: 48px; border: 1px solid #C4C2BC; border-radius: 4px; padding: 0 12px; font: inherit; font-weight: 400; font-size: 16px; background: #fff; width: 100%; }
.quote-form label.check { flex: 0 1 auto; flex-direction: row; gap: 10px; align-items: center; font-size: 16px; font-weight: 600; height: 48px; }
.quote-form label.check input { width: 22px; height: 22px; accent-color: var(--red); }
.quote-form .btn { height: 48px; padding: 0 28px; }
.quote-form .note { flex: 1 1 100%; margin: 0; font-size: 14px; color: var(--muted); }
.quote-form .hp { position: absolute; left: -9999px; }
.form-msg { margin-top: 16px; padding: 14px 18px; border-radius: 4px; font-weight: 600; }
.form-msg.ok { background: #E3F1E6; color: #1E5B2E; }
.form-msg.err { background: #F8E1E1; color: #7A1A1D; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; }
.steps li { border-top: 3px solid var(--ink); padding-top: 16px; }
.steps .n { font-family: var(--mono); color: var(--red); font-weight: 600; }
.steps strong { display: block; font-size: 19px; margin: 4px 0; }
.steps span { color: var(--muted); font-size: 16px; }
.gallery-a { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.gallery-a > img { flex: 2 1 520px; min-width: 0; aspect-ratio: 16 / 9; width: 100%; object-fit: cover; border-radius: 4px; }
.gallery-a > div { flex: 1 1 260px; min-width: 0; display: grid; gap: 12px; }
.gallery-a > div img { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; border-radius: 4px; }
.gallery-b { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 12px; }
.gallery-b img { aspect-ratio: 3 / 4; width: 100%; object-fit: cover; border-radius: 4px; }
.caption { margin: 12px 0 0; font-size: 14px; color: var(--muted); }

.journal { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.journal article { display: flex; flex-direction: column; gap: 12px; }
.journal img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; border-radius: 4px; }
.journal time { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.journal p { margin: 0; }

/* ---------- Lábléc ---------- */
.site-footer { background: var(--darker); color: var(--muted-mid); font-size: 15px; }
.site-footer .cols { padding-top: 56px; padding-bottom: 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; }
.site-footer strong { color: #fff; }
.site-footer p { margin: 12px 0 0; }
.site-footer a { color: var(--muted-light); }
.site-footer .logo { height: 64px; width: auto; }
.site-footer .hours { font-family: var(--mono); font-size: 14px; }
.map-link { min-height: 160px; border-radius: 4px; background: #1E1F23 url('assets/img/radionica.jpg') center / cover; position: relative; display: flex; align-items: flex-end; padding: 16px; text-decoration: none; overflow: hidden; }
.map-link::before { content: ""; position: absolute; inset: 0; background: rgba(15,16,18,.6); }
.map-link span { position: relative; color: #fff; font-weight: 700; }
.site-footer .bottom { padding-top: 16px; padding-bottom: 28px; border-top: 1px solid #2A2C31; font-size: 13px; }

/* ---------- Általános oldal + WooCommerce ---------- */
.page-wrap { padding-top: 48px; padding-bottom: 80px; }
.page-wrap > h1, .page-wrap .entry-title, .woocommerce-products-header__title { font-weight: 900; font-size: clamp(34px, 4vw, 48px); line-height: 1; margin-bottom: 24px; }
.page-content { background: #fff; border-radius: 4px; padding: clamp(18px, 3vw, 36px); }
.woocommerce-breadcrumb { font-size: 14px; color: var(--muted); margin-bottom: 16px; }
.woocommerce-breadcrumb a { color: var(--muted); }
.woocommerce ul.products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none !important; }
.woocommerce ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.woocommerce ul.products li.product a img { aspect-ratio: 4 / 3; object-fit: cover; margin: 0 0 8px !important; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--head); font-size: 18px !important; text-transform: uppercase; color: var(--ink); padding: 0 !important; }
.woocommerce ul.products li.product .price { font-family: var(--mono); color: var(--ink) !important; font-size: 15px !important; }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt { background: var(--red) !important; color: #fff !important; border-radius: 4px !important; font-weight: 800 !important; padding: 13px 20px !important; }
.woocommerce a.button:hover, .woocommerce button.button:hover { background: var(--red-dark) !important; }
.woocommerce div.product .product_title { font-weight: 900; font-size: clamp(30px, 4vw, 44px); line-height: 1; }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--ink) !important; font-family: var(--mono); font-size: 24px !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom-color: #fff; }
.woocommerce-Tabs-panel table, .woocommerce-product-details__short-description table { border-collapse: collapse; width: 100%; max-width: 640px; }
.woocommerce-Tabs-panel th, .woocommerce-Tabs-panel td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 16px; vertical-align: top; }
.woocommerce-Tabs-panel th { width: 42%; color: var(--muted); font-weight: 600; }
.woocommerce-info, .woocommerce-message { border-top-color: var(--red) !important; }
.woocommerce-info::before, .woocommerce-message::before { color: var(--red) !important; }
.woocommerce span.onsale { background: var(--red); }
.woocommerce .single-product-wrap { background: #fff; border-radius: 4px; padding: clamp(18px, 3vw, 36px); }