/* Sticky header for motorbike pages */
.sticky-header {
	position: sticky;
	top: 0;
	background: var(--bg);
	z-index: 100;
	box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
/* Showcase styles */
.showcase {
	max-width: 1100px;
	margin: 2rem auto 0 auto;
	padding: 0 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.slider-nav {
	width: 100%;
	max-width: 1100px;
	margin-bottom: 2rem;
	overflow-x: auto;
	background: none;
	display: flex;
	justify-content: center;
}
.slider-nav-list {
	display: flex;
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
	justify-content: center;
	align-items: center;
}
.slider-nav-btn {
	background: #fff;
	border: 2px solid var(--accent);
	color: var(--accent);
	border-radius: 2rem;
	padding: 0.5rem 1.5rem;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
	box-shadow: 0 2px 8px rgba(25,102,217,0.06);
}
.slider-nav-btn.active {
	background: var(--accent);
	color: #fff;
	border-color: var(--primary-blue);
}
.car-grids {
	width: 100%;
	margin: 0 auto;
}
.car-grid {
	width: 100%;
	margin: 0 auto 2rem auto;
	padding: 0;
}
.car-grid-inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
	width: 100%;
	margin: 0 auto;
	padding: 1rem 0;
}
.car-card {
	background: #fff;
	border-radius: 1rem;
	box-shadow: 0 2px 16px rgba(25,102,217,0.08);
	padding: 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	font-size: 1.1rem;
	font-weight: 400;
	color: #222;
	min-height: 220px;
	transition: box-shadow 0.2s;
	position: relative;
	overflow: hidden;
}
.car-card:hover {
	box-shadow: 0 4px 24px rgba(25,102,217,0.18);
}
.car-img {
	width: 100%;
	max-width: 160px;
	height: 90px;
	object-fit: cover;
	border-radius: 0.75rem;
	margin-bottom: 1rem;
	box-shadow: 0 2px 8px rgba(25,102,217,0.10);
}
.car-link { display: block; color: inherit; text-decoration: none; width: 100%; height: 100%; }
.car-card .car-link { display:flex; flex-direction:column; align-items:center; justify-content:space-between; height:100%; padding:0.5rem; }
.car-card .car-link:focus { outline: 3px solid rgba(33,133,255,0.16); border-radius: 0.75rem; }
.car-card .car-info { padding-bottom: 0.5rem; }
.car-card .car-name { margin-top: 0.5rem; }
.car-info {
	text-align: center;
}
.car-name {
	font-size: 1.15rem;
	font-weight: 600;
	margin: 0.5rem 0 0.25rem 0;
}
.car-type {
	font-size: 0.95rem;
	color: var(--muted);
	margin-bottom: 0.25rem;
}
.car-price {
	font-size: 1.05rem;
	color: var(--accent);
	font-weight: 500;
	margin-bottom: 0.25rem;
}
.car-grids .car-grid {
	display: none;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 260ms ease, transform 260ms ease;
}
.car-grids .car-grid.active {
	display: block;
	opacity: 1;
	transform: translateY(0);
}

/* when removing, add a class for leaving animation if needed */
.car-grid.fade-out {
	opacity: 0;
	transform: translateY(6px);
}
@media (max-width: 900px) {
	.car-grid-inner {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.2rem;
	}
}
/* Basic reset and layout */
* { box-sizing: border-box; }
html,body{ margin:0; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; color:#111; }
:root{
    scroll-behavior: smooth;
}
:root{
	--accent:#c79b2a; /* warm gold */
	--primary-blue:#0b74ff; /* vivid blue */
	--bg:#fafafa;
	--muted:#6b6b6b;
	--surface:#0f1720; /* deep charcoal */
	--glass: rgba(255,255,255,0.6);
	--card-shadow: 0 8px 30px rgba(16,24,40,0.08);
}

.skip-link{
	position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{ position:static; width:auto; height:auto; padding:.5rem 1rem; background:#000; color:#fff; z-index:1000; }

header{ background:var(--bg); border-bottom:1px solid #eee; position:relative; z-index:20; }
.header-inner{ max-width:1100px; margin:0 auto; padding:0.75rem 1rem; display:flex; align-items:center; gap:1rem; position:relative; }
.logo{ margin:0; font-size:1.125rem; }
.logo a{ text-decoration:none; color:inherit; font-weight:600; }

/* subtle entrance animations */
.fade-in-up{ transform: translateY(8px); opacity:0; transition: transform .45s cubic-bezier(.2,.9,.2,1), opacity .45s ease; }
.fade-in-up.visible{ transform: translateY(0); opacity:1; }

/* Nav styles */
.nav{ margin-left:auto; }
.nav-list{ list-style:none; margin:0; padding:0; display:flex; gap:1rem; }
.nav-list a{ text-decoration:none; color:var(--muted); padding:.5rem; border-radius:4px; }
.nav-list a:hover, .nav-list a:focus{ color:var(--accent); background:rgba(10,116,218,.06); outline:none; }

/* Toggle button (hamburger) */
.nav-toggle{ display:none; background:none; border:0; padding:.5rem; cursor:pointer; }
.hamburger{ display:inline-block; width:22px; height:2px; background:var(--muted); position:relative; }
.hamburger::before, .hamburger::after{ content:""; position:absolute; left:0; right:0; height:2px; background:var(--muted); }
.hamburger::before{ top:-7px; }
.hamburger::after{ top:7px; }

/* Responsive: collapse to mobile */
@media (max-width:700px){
	.nav-toggle{ display:inline-flex; margin-left:auto; }
		.nav{ position:absolute; top:100%; right:0; left:0; background:var(--bg); border-top:1px solid #eee; transform-origin:top; transition:transform .18s ease, opacity .18s ease; z-index:25; }
	.nav-list{ flex-direction:column; gap:0; }
	.nav-list li{ border-bottom:1px solid #f3f3f3; }
	.nav-list a{ display:block; padding:0.75rem 1rem; }
	.nav[data-open="false"]{ transform:scaleY(0); opacity:0; pointer-events:none; }
	.nav[data-open="true"]{ transform:scaleY(1); opacity:1; pointer-events:auto; }
}

/* Small helpers */
/* Hero */
.hero{ background: linear-gradient(180deg, #f7fbff 0%, #fff 100%); padding:3rem 1rem; border-bottom:1px solid #eee; }
.hero-inner{ max-width:1100px; margin:0 auto; text-align:left; }
.hero-title{ margin:0 0 .5rem 0; font-size:1.75rem; }
.hero-sub{ margin:0 0 1rem 0; color:var(--muted); }
.hero-cta{ margin-top:1rem; }
.btn{ display:inline-block; background:var(--accent); color:#111; padding:.6rem 1rem; border-radius:8px; text-decoration:none; font-weight:700; box-shadow: 0 10px 30px rgba(11,116,255,0.06); transition: transform .18s ease, box-shadow .18s ease, background .12s ease; }
.btn:hover, .btn:focus{ background:#a77b07; color:#fff; transform: translateY(-2px); box-shadow: 0 18px 40px rgba(11,116,255,0.08); }

/* Hero CTA: keep blue tones for the Browse button */
.hero .btn{ background:var(--primary-blue); color:#fff; }
.hero .btn:hover, .hero .btn:focus{ background:#1966d9; color:#fff; }

/* Small helpers */
main{ max-width:1100px; margin:1.5rem auto; padding:0 1rem; }
footer{ max-width:1100px; margin:1.5rem auto; padding:0 1rem; color:var(--muted); }

@media (min-width:900px){
	.hero-inner{ display:flex; align-items:center; justify-content:space-between; gap:2rem; }
	.hero-title{ font-size:2.25rem; }
}

/* Moto grid */
.moto-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:1rem; margin-top:1rem; }
.moto-card{ background:linear-gradient(180deg, rgba(255,255,255,0.96), rgba(250,250,250,0.96)); border-radius:12px; overflow:hidden; box-shadow:var(--card-shadow); display:flex; flex-direction:column; transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s ease; }
.moto-card img{ width:100%; height:160px; object-fit:cover; display:block; filter: saturate(1.02) contrast(1.02); }
.moto-card .card-body{ padding:1rem; display:flex; flex-direction:column; gap:0.5rem; }
.moto-card .model-name{ font-weight:700; }
.moto-card .model-desc{ color:var(--muted); font-size:.95rem; }
.moto-card .model-price{ margin-top:auto; font-weight:700; color:var(--surface); }
.moto-card .view-btn{ margin-top:.5rem; align-self:flex-start; }

/* Make the whole card look clickable */
.moto-card { cursor: pointer; }
.moto-card:hover{ transform: translateY(-6px) scale(1.004); box-shadow: 0 18px 40px rgba(16,24,40,0.12); }

/* Restyle view button to match main CTA */
.moto-card .view-btn {
	background: var(--primary-blue);
	color: #fff;
	border: none;
	padding: 0.4rem 0.75rem;
	border-radius: 6px;
	font-weight: 700;
	cursor: pointer;
}
.moto-card .view-btn:hover,
.moto-card .view-btn:focus {
	background: #1966d9;
	outline: none;
}

/* Modal */
.modal{
	position:fixed;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
	background:rgba(0,0,0,.55);
	z-index:200;
	opacity:0;
	visibility:hidden;
	pointer-events:none;
	transition: opacity 220ms ease, visibility 220ms ease;
}
.modal[aria-hidden="false"]{
	opacity:1;
	visibility:visible;
	pointer-events:auto;
}
.modal-content{
	background: linear-gradient(180deg, rgba(255,255,255,0.96), #fff);
	padding:1.25rem;
	border-radius:12px;
	max-width:960px;
	width:92%;
	display:flex;
	gap:1.25rem;
	align-items:flex-start;
	transform: translateY(12px) scale(.995);
	opacity:0;
	transition: transform 260ms cubic-bezier(.2,.9,.2,1), opacity 260ms ease, box-shadow 260ms ease;
	box-shadow: 0 20px 60px rgba(16,24,40,0.18);
}
.modal[aria-hidden="false"] .modal-content{
	transform: translateY(0) scale(1);
	opacity:1;
}
.modal-content img{ max-width:62%; height:auto; border-radius:8px; box-shadow: 0 10px 30px rgba(16,24,40,0.08); }
.modal-info{ max-width:38%; }
.modal-info h4{ margin-top:0; font-size:1.25rem; }
.modal-info .modal-specs{ margin-top:.75rem; }
.modal-specs dt{ font-weight:700; color:#222; }
.modal-specs dd{ margin:0 0 8px 0; color:var(--muted); }

/* Community hangar styles */
.community-hangar{ background: linear-gradient(180deg, rgba(11,116,255,0.03), rgba(199,155,42,0.02)); padding:1.5rem 1rem; margin-top:2rem; border-radius:12px; }
.community-inner{ max-width:1100px; margin:0 auto; }
.community-hangar .lead{ color:var(--muted); margin-bottom:0.75rem; }
.hangar-details{ list-style:none; padding:0; margin:0 0 1rem 0; display:grid; gap:6px; color:#222; }
.hangar-cta .btn-light{ background:transparent; border:1px solid rgba(11,116,255,0.12); color:var(--primary-blue); padding:.5rem .75rem; border-radius:8px; }
.hangar-cta .btn-light:hover{ background:rgba(11,116,255,0.04); transform:translateY(-2px); }

/* Outline button variant: white background, blue text/border (for back links etc) */
.btn-outline{ background:#fff; color:var(--primary-blue); border:1px solid rgba(11,116,255,0.12); padding:.5rem .75rem; border-radius:8px; display:inline-block; text-decoration:none; font-weight:700; }
.btn-outline:hover, .btn-outline:focus{ background: rgba(11,116,255,0.04); transform: translateY(-2px); }

/* Primary blue button variant */
.btn-primary{ background:var(--primary-blue); color:#fff; }
.btn-primary:hover{ background:#0a62d6; }

/* Per-model page styles (used by generated moto/<slug>/index.html) */
.model-page { max-width:1100px; margin:1.5rem auto; padding:1rem; }
.model-gallery { display:grid; gap:8px; margin-bottom:1rem; }
.model-gallery .gallery-item { overflow:hidden; border-radius:10px; }
.model-gallery .gallery-item img{ width:100%; height:100%; display:block; object-fit:cover; border-radius:10px; }
.g-cols-1 { grid-template-columns: 1fr; }
.g-cols-2 { grid-template-columns: 1fr 1fr; }
.g-cols-3 { grid-template-columns: 1.6fr 1fr; grid-auto-rows: minmax(160px, 1fr); }
.g-cols-3 .gallery-item:first-child{ grid-column: 1 / 2; grid-row: span 2; min-height:360px; }
@media (max-width:700px){ .g-cols-2, .g-cols-3 { grid-template-columns: 1fr; } .g-cols-3 .gallery-item:first-child{ grid-row: auto; } }
.model-gallery .gallery-item img[src$=".webp"]{ image-rendering: auto; }
.model-meta { margin-top: 1rem; }
.model-price { font-size:1.15rem; color:var(--primary-blue); font-weight:800; margin-top:0.5rem; }

/* Modal image and info improvements */
.modal-content { align-items: stretch; }
.modal-content img{ width:100%; height:100%; max-height:68vh; object-fit:contain; border-radius:8px; }
.modal-info{ max-width:36%; padding-left:1rem; display:flex; flex-direction:column; justify-content:flex-start; }
.modal-info p, .modal-info dd { color:var(--muted); }
.modal-info dt{ color:#111; font-weight:800; margin-top:0.4rem; }
.modal-specs { margin-top:0.6rem; }

/* Improve modal buttons */
.modal .btn-primary{ padding:.6rem .9rem; border-radius:8px; box-shadow: 0 8px 24px rgba(11,116,255,0.12); }

/* Slightly larger, more legible typography */
h2{ font-size:1.55rem; line-height:1.15; }
.model-desc{ font-size:1rem; line-height:1.6; }
.lead{ font-size:1.05rem; line-height:1.6; }
.specs-list { display:grid; grid-template-columns: auto 1fr; gap:6px 12px; margin-top:0.5rem; }
.booking-form { margin-top:1rem; border:1px solid #eee; padding:1rem; border-radius:8px; }
.booking-row { display:flex; gap:8px; margin-bottom:8px; }
.booking-row input, .booking-row select { flex:1; padding:0.5rem; border-radius:6px; border:1px solid #ddd; }

.modal-close, .modal-prev, .modal-next{ position:fixed; background:transparent; border:0; color:#fff; font-size:2rem; cursor:pointer; }
.modal-close{ top:1rem; right:1rem; }
.modal-prev{ left:1rem; top:50%; transform:translateY(-50%); }
.modal-next{ right:1rem; top:50%; transform:translateY(-50%); }
.modal-close:focus, .modal-prev:focus, .modal-next:focus{ outline:2px solid #fff; }