/*!
Theme Name: carfy
Theme URI: https://carfy.com/
Author: Carfy
Author URI: https://carfy.com/
Description: Modern Apple-style WordPress theme for car rental websites.
Version: 1.0.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: carfy
Tags: custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ==========================================================================
   CSS VARIABLES
   ========================================================================== */
:root {
	--accent: #007AFF;
	--nav-bg: #ffffff;
	--footer-bg: #1d1d1f;
	--footer-text: #f5f5f7;
	--body-bg: #ffffff;
	--text-color: #1d1d1f;
	--text-secondary: #6e6e73;
	--border-color: #e8e8ed;
	--card-bg: #fbfbfd;
	--radius: 18px;
	--radius-sm: 12px;
	--shadow-sm: 0 2px 8px rgba(0,0,0,.04);
	--shadow-md: 0 4px 24px rgba(0,0,0,.06);
	--shadow-lg: 0 12px 48px rgba(0,0,0,.08);
	--transition: .3s cubic-bezier(.25,.46,.45,.94);
	--font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--font-mono: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
	--container: 1200px;
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 16px;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	font-family: var(--font);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--text-color);
	background-color: var(--body-bg);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--accent);
	text-decoration: none;
	transition: color var(--transition);
}
a:hover {
	color: color-mix(in srgb, var(--accent) 80%, #000);
}

/* ==========================================================================
   CONTAINER
   ========================================================================== */
.container {
	max-width: var(--container);
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}

/* ==========================================================================
   TYPOGRAPHY — Apple Style
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.022em;
	color: var(--text-color);
}
h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 0.4em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); margin-bottom: 0.5em; }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); margin-bottom: 0.5em; }
h4 { font-size: 1.25rem; margin-bottom: 0.5em; }
h5 { font-size: 1.1rem; margin-bottom: 0.5em; }
h6 { font-size: 1rem; margin-bottom: 0.5em; font-weight: 600; }

p { margin-bottom: 1.4em; color: var(--text-secondary); }
p:last-child { margin-bottom: 0; }

blockquote {
	border-left: 4px solid var(--accent);
	padding: 20px 24px;
	margin: 2em 0;
	background: var(--card-bg);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	font-style: italic;
	font-size: 1.1rem;
	color: var(--text-secondary);
}
blockquote p { color: inherit; }
blockquote cite {
	display: block;
	margin-top: 12px;
	font-size: 0.9rem;
	font-style: normal;
	font-weight: 600;
	color: var(--text-color);
}

pre {
	background: #1d1d1f;
	color: #f5f5f7;
	padding: 24px;
	border-radius: var(--radius-sm);
	overflow-x: auto;
	font-family: var(--font-mono);
	font-size: 0.9rem;
	line-height: 1.6;
	margin: 2em 0;
}

code, kbd, tt, var {
	font-family: var(--font-mono);
	font-size: 0.9em;
	background: rgba(0,0,0,.05);
	padding: 2px 6px;
	border-radius: 6px;
}
pre code {
	background: none;
	padding: 0;
	border-radius: 0;
}

mark {
	background: rgba(0, 122, 255, .15);
	color: var(--text-color);
	padding: 2px 4px;
	border-radius: 4px;
}

hr {
	border: none;
	border-top: 1px solid var(--border-color);
	margin: 2.5em 0;
}

/* Lists inside content */
ul, ol {
	margin: 0 0 1.4em 1.6em;
	color: var(--text-secondary);
}
li { margin-bottom: 0.4em; }
li > ul, li > ol { margin-bottom: 0; margin-top: 0.4em; }

/* ==========================================================================
   TABLES — Content
   ========================================================================== */

/* Responsive scroll wrapper — auto-applied to .entry-content tables via JS */
.table-responsive {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 2em 0;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-color);
	box-shadow: var(--shadow-sm);
}
.table-responsive table {
	margin: 0;
	border-radius: 0;
	border: none;
	box-shadow: none;
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.93rem;
	margin: 2em 0;
	border-radius: var(--radius-sm);
	overflow: hidden;
	border: 1px solid var(--border-color);
	box-shadow: var(--shadow-sm);
}

/* Header */
thead tr {
	background: var(--card-bg);
}
thead th {
	font-weight: 650;
	font-size: 0.8rem;
	letter-spacing: .045em;
	text-transform: uppercase;
	color: var(--text-secondary);
	text-align: left;
	padding: 13px 18px;
	border-bottom: 1.5px solid var(--border-color);
	white-space: nowrap;
}

/* Body */
tbody tr {
	transition: background .15s ease;
}
/* Striped rows */
tbody tr:nth-child(odd) {
	background: #ffffff;
}
tbody tr:nth-child(even) {
	background: rgba(0,0,0,.025);
}
tbody tr:hover {
	background: rgba(0,122,255,.05) !important;
}

tbody td {
	padding: 12px 18px;
	border-bottom: 1px solid var(--border-color);
	color: var(--text-secondary);
	line-height: 1.55;
	vertical-align: top;
}
tbody tr:last-child td {
	border-bottom: none;
}

/* First column — slightly bolder label */
tbody td:first-child {
	color: var(--text-color);
	font-weight: 500;
}

/* Footer row */
tfoot td,
tfoot th {
	padding: 12px 18px;
	background: var(--card-bg);
	border-top: 1.5px solid var(--border-color);
	font-weight: 600;
	font-size: 0.88rem;
	color: var(--text-color);
}

/* ==========================================================================
   FORMS
   ========================================================================== */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="color"],
textarea,
select {
	font-family: var(--font);
	font-size: 1rem;
	color: var(--text-color);
	background: var(--body-bg);
	border: 1.5px solid var(--border-color);
	border-radius: var(--radius-sm);
	padding: 12px 16px;
	width: 100%;
	transition: border-color var(--transition), box-shadow var(--transition);
	outline: none;
}
input:focus,
textarea:focus,
select:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 4px rgba(0,122,255,.12);
}

textarea {
	min-height: 140px;
	resize: vertical;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--font);
	font-size: 1rem;
	font-weight: 600;
	color: #fff;
	background: var(--accent);
	border: none;
	border-radius: 980px;
	padding: 14px 32px;
	cursor: pointer;
	transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
	line-height: 1.2;
}
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.btn:hover {
	background: color-mix(in srgb, var(--accent) 85%, #000);
	transform: scale(1.02);
	box-shadow: var(--shadow-md);
	color: #fff;
}
button:active, .btn:active {
	transform: scale(0.98);
}

/* ==========================================================================
   HEADER / NAVIGATION — Apple-style
   ========================================================================== */
#masthead {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background: transparent;
	border: none;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 70px;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 24px;
	background: transparent;
	border: none;
	box-shadow: none;
	transition: none;
}

/* Logo */
.site-logo-link {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}
.site-logo-img {
	height: 45px;
	width: auto;
	filter: brightness(0) invert(1);
}
.site-logo-text {
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: #fff;
}
.site-logo-text:hover { color: rgba(255,255,255,.75); }

/* Desktop Nav */
#site-navigation {
	display: flex;
	align-items: center;
	gap: 8px;
}
#site-navigation > ul {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 2px;
	align-items: center;
}
#site-navigation li {
	position: relative;
}

/* Top-level links */
#site-navigation > ul > li > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	font-size: 0.875rem;
	font-weight: 700;
	color: #fff;
	border-radius: 980px;
	transition: background .22s ease, color .22s ease;
	letter-spacing: -0.01em;
	white-space: nowrap;
	line-height: 1;
}
/* Icon in top-level nav */
#site-navigation > ul > li > a i {
	font-size: 0.8rem;
	opacity: .55;
	transition: opacity .22s ease;
}
#site-navigation > ul > li > a:hover {
	color: rgba(255,255,255,.75);
	background: rgba(255,255,255,.1);
}
#site-navigation > ul > li > a:hover i {
	opacity: 1;
}
#site-navigation > ul > li.current-menu-item > a,
#site-navigation > ul > li.current_page_item > a,
#site-navigation > ul > li.current-menu-ancestor > a {
	color: #fff;
	background: rgba(255,255,255,.15);
}
#site-navigation > ul > li.current-menu-item > a i,
#site-navigation > ul > li.current_page_item > a i,
#site-navigation > ul > li.current-menu-ancestor > a i {
	opacity: 1;
}

/* Chevron for parent items */
#site-navigation > ul > li.menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: 5px;
	height: 5px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-1px);
	margin-left: 2px;
	opacity: .4;
	transition: transform .28s ease, opacity .28s ease;
}
#site-navigation > ul > li.menu-item-has-children:hover > a::after {
	transform: rotate(-135deg) translateY(-1px);
	opacity: .7;
}

/* -------- Dropdown (sub-menu) -------- */
#site-navigation ul ul {
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
	list-style: none;
	margin: 0;
	padding: 8px;
	min-width: 260px;
	background: rgba(255,255,255,.92);
	backdrop-filter: saturate(200%) blur(28px);
	-webkit-backdrop-filter: saturate(200%) blur(28px);
	border: 1px solid rgba(0,0,0,.07);
	border-radius: 16px;
	box-shadow:
		0 12px 48px rgba(0,0,0,.10),
		0 2px 8px rgba(0,0,0,.04),
		inset 0 1px 0 rgba(255,255,255,.8);
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(8px);
	transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
	z-index: 999;
}
/* Invisible bridge */
#site-navigation ul ul::before {
	content: '';
	position: absolute;
	top: -14px;
	left: 0;
	right: 0;
	height: 14px;
}
/* Show dropdown */
#site-navigation li:hover > ul,
#site-navigation li.focus > ul {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

/* Dropdown items */
#site-navigation ul ul li {
	margin: 0;
}
#site-navigation ul ul li a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 12px;
	font-size: 0.875rem;
	font-weight: 450;
	color: var(--text-color);
	border-radius: 10px;
	transition: background .18s ease, color .18s ease;
	line-height: 1.35;
}
/* Icon wrapper inside dropdown */
#site-navigation ul ul li a i {
	width: 30px;
	height: 30px;
	background: rgba(0,122,255,.08);
	color: var(--accent);
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8rem;
	flex-shrink: 0;
	transition: background .18s ease;
}
#site-navigation ul ul li a:hover {
	background: rgba(0,122,255,.07);
	color: var(--accent);
}
#site-navigation ul ul li a:hover i {
	background: rgba(0,122,255,.15);
}
#site-navigation ul ul li.current-menu-item > a {
	color: var(--accent);
	background: rgba(0,122,255,.06);
}

/* Divider between groups in dropdown */
#site-navigation ul ul li.menu-item + li.menu-item > a {
	margin-top: 1px;
}

/* 3rd-level dropdown */
#site-navigation ul ul ul {
	top: -8px;
	left: 100%;
	transform: translateX(8px) translateY(0);
}
#site-navigation ul ul li:hover > ul,
#site-navigation ul ul li.focus > ul {
	transform: translateX(0) translateY(0);
}

/* Sub-menu parent chevron (→) */
#site-navigation ul ul li.menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: 5px;
	height: 5px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(-45deg);
	margin-left: auto;
	opacity: .35;
	flex-shrink: 0;
}

/* -------- Mobile toggle -------- */
.menu-toggle {
	display: none;
	background: none;
	border: none;
	padding: 8px;
	cursor: pointer;
	line-height: 1;
	position: relative;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	transition: background .2s ease;
}
.menu-toggle:hover {
	background: rgba(255,255,255,.12);
}
.menu-toggle .bar {
	display: block;
	width: 20px;
	height: 2px;
	background: #fff;
	border-radius: 2px;
	transition: transform .3s ease, opacity .3s ease;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}
.menu-toggle .bar:nth-child(1) { top: 12px; }
.menu-toggle .bar:nth-child(2) { top: 19px; }
.menu-toggle .bar:nth-child(3) { top: 26px; }

/* Hamburger → X animation */
.is-open .menu-toggle .bar:nth-child(1) {
	top: 19px;
	transform: translateX(-50%) rotate(45deg);
}
.is-open .menu-toggle .bar:nth-child(2) {
	opacity: 0;
}
.is-open .menu-toggle .bar:nth-child(3) {
	top: 19px;
	transform: translateX(-50%) rotate(-45deg);
}
/* When mobile menu is open, X should be dark on white overlay */
.is-open .menu-toggle .bar {
	background: var(--text-color);
}

/* Body lock — use position:fixed trick so iOS Safari lets the overlay scroll */
body.menu-open {
	overflow: hidden;
	/* iOS Safari: prevents page scroll without blocking overlay scroll */
	position: fixed;
	width: 100%;
}

@media (max-width: 768px) {
	.menu-toggle {
		display: block;
	}

	/* When mobile menu is open, lock header to top */
	body.menu-open #masthead {
		position: fixed;
	}

	/* nav сам стає фіксованим оверлеєм — так drawer-footer теж у ньому */
	#site-navigation {
		position: fixed;
		top: 64px;
		left: 0;
		right: 0;
		height: calc(100dvh - 64px);
		height: calc(100vh - 64px);
		background: rgba(255,255,255,.97);
		backdrop-filter: saturate(180%) blur(24px);
		-webkit-backdrop-filter: saturate(180%) blur(24px);
		display: none;
		flex-direction: column;
		padding: 0 20px max(28px, env(safe-area-inset-bottom));
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-y: contain;
		z-index: 998;
	}
	#site-navigation.is-open {
		display: flex;
	}

	/* ul — звичайний вертикальний список всередині nav */
	#site-navigation > ul {
		display: flex;
		position: static;
		flex-direction: column;
		gap: 0;
		padding: 8px 0 0;
		background: transparent;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		border: none;
		box-shadow: none;
		overflow: visible;
		height: auto;
		width: 100%;
	}

	#site-navigation > ul > li > a {
		padding: 16px 4px;
		border-bottom: 1px solid var(--border-color);
		border-radius: 0;
		font-size: 1rem;
		font-weight: 600;
		width: 100%;
		color: var(--text-color);
	}
	#site-navigation > ul > li > a i {
		font-size: 0.95rem;
		opacity: .6;
	}
	#site-navigation > ul > li:last-child > a {
		border-bottom: none;
	}

	/* Chevron on mobile */
	#site-navigation > ul > li.menu-item-has-children > a::after {
		margin-left: auto;
		width: 7px;
		height: 7px;
		opacity: .3;
		transition: transform .3s ease;
	}
	#site-navigation > ul > li.menu-item-has-children.is-sub-open > a::after {
		transform: rotate(-135deg) translateY(0);
	}

	/* Mobile sub-menus accordion */
	#site-navigation ul ul {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		background: transparent;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		border: none;
		border-radius: 0;
		box-shadow: none;
		padding: 0 0 0 0;
		min-width: 0;
		display: none;
		border-left: 2px solid rgba(0,122,255,.15);
		margin: 4px 0 4px 12px;
	}
	#site-navigation ul ul::before {
		display: none;
	}
	#site-navigation li.is-sub-open > ul {
		display: block;
	}
	#site-navigation ul ul li a {
		padding: 12px 16px;
		border-bottom: 1px solid var(--border-color);
		border-radius: 0;
		font-size: 0.92rem;
	}
	#site-navigation ul ul li a i {
		width: 26px;
		height: 26px;
		font-size: 0.75rem;
		border-radius: 7px;
	}
	#site-navigation ul ul li:last-child a {
		border-bottom: none;
	}
	#site-navigation ul ul ul {
		top: auto;
		left: auto;
	}
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.hero-section {
	position: relative;
	background-color: #1d1d1f;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 0;
	min-height: 340px;
	display: flex;
	align-items: flex-end;
}
.hero-section__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .70) 0%, rgba(0, 0, 0, 0.42) 100%);
	z-index: 1;
}
.hero-section__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-top: 100px;
	padding-bottom: 48px;
}
.hero-section__title {
	color: #fff;
	font-size: clamp(2rem, 5vw, 2.45rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	margin-bottom: 12px;
	text-shadow: 0 2px 12px rgba(0,0,0,.2);
}

/* Hero Advantages */
.hero-advantages {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-top: 32px;
}
.hero-advantages__item {
	background: rgba(255,255,255,.1);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(255,255,255,.15);
	border-radius: var(--radius-sm);
	padding: 24px 20px;
	transition: transform var(--transition), background var(--transition);
}
.hero-advantages__item:hover {
	transform: translateY(-4px);
	background: rgba(255,255,255,.18);
}
.hero-advantages__icon {
	width: 48px;
	height: 48px;
	background: rgba(255,255,255,.15);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
	font-size: 1.25rem;
	color: #fff;
}
.hero-advantages__title {
	color: #fff;
	font-size: 0.95rem;
	font-weight: 700;
	margin-bottom: 6px;
	letter-spacing: -0.01em;
	line-height: 1.3;
}
.hero-advantages__desc {
	color: rgba(255,255,255,.7);
	font-size: 0.82rem;
	line-height: 1.5;
	margin: 0;
}

/* Breadcrumbs */
.breadcrumbs {
	margin-bottom: 24px;
}
.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0;
}
.breadcrumbs__item {
	display: flex;
	align-items: center;
	font-size: 0.85rem;
}
.breadcrumbs__link {
	color: rgba(255,255,255,.7);
	transition: color var(--transition);
}
.breadcrumbs__link:hover {
	color: #fff;
}
.breadcrumbs__sep {
	margin: 0 8px;
	color: rgba(255,255,255,.4);
	font-size: 0.65rem;
}
.breadcrumbs__item--current span {
	color: rgba(255,255,255,.95);
	font-weight: 500;
}

/* Rental Section — separate from hero, on site background */
.rental-section {
	background: var(--body-bg);
	padding: 48px 0;
	/* border-bottom: 1px solid var(--border-color); */
	/* overflow: hidden; */
}
.rental-section__widget {
	/* background: var(--card-bg); */
	/* border-radius: var(--radius); */
	/* padding: 32px; */
	/* box-shadow: var(--shadow-md); */
	/* border: 1px solid var(--border-color); */
}

/* ==========================================================================
   MAIN CONTENT
   ========================================================================== */
#primary {
	padding: 0px 0 80px;
}

.site-main {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 24px;
}

/* ==========================================================================
   CONTENT STYLES
   ========================================================================== */
.entry-content {
	font-size: 1.05rem;
	line-height: 1.8;
}
.entry-content > *:first-child {
	margin-top: 0;
}
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
	margin-top: 2em;
}
.entry-content h2 {
	padding-bottom: 12px;
	border-bottom: 1px solid var(--border-color);
}
.entry-content a {
	color: var(--accent);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: rgba(0,122,255,.3);
	text-underline-offset: 3px;
	transition: text-decoration-color var(--transition), color var(--transition);
}
.entry-content a:hover {
	text-decoration-color: var(--accent);
}

.entry-content img {
	border-radius: var(--radius-sm);
	margin: 1.5em 0;
}

.entry-content figure {
	margin: 2em 0;
}
.entry-content figcaption {
	text-align: center;
	font-size: 0.9rem;
	color: var(--text-secondary);
	margin-top: 8px;
}

/* Content lists */
.entry-content ul {
	list-style: none;
	margin-left: 0;
}
.entry-content ul > li {
	position: relative;
	padding-left: 1.6em;
}
.entry-content ul > li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent);
}

.entry-content ol {
	counter-reset: ol-counter;
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}
.entry-content ol > li {
	counter-increment: ol-counter;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding-left: 0;
}
.entry-content ol > li::before {
	content: counter(ol-counter);
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--accent);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	border-radius: 50%;
	line-height: 1;
	/* nudge circle down to optically centre on first text line (Inter cap-height offset) */
	margin-top: 3px;
}

/* WP image alignments */
.alignleft {
	float: left;
	margin: 0.5em 2em 1em 0;
}
.alignright {
	float: right;
	margin: 0.5em 0 1em 2em;
}
.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/* Galleries */
.gallery {
	display: grid;
	gap: 12px;
	margin: 2em 0;
}
.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-item img {
	border-radius: var(--radius-sm);
	width: 100%;
}

/* ==========================================================================
   POST THUMBNAIL / FEATURED IMAGE
   ========================================================================== */
.post-thumbnail {
	margin: 0 0 40px;
	border-radius: var(--radius);
	overflow: hidden;
}
.post-thumbnail__img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform .6s cubic-bezier(.25,.46,.45,.94);
}
.post-thumbnail:hover .post-thumbnail__img {
	transform: scale(1.02);
}

/* ==========================================================================
   CARDS (archive / blog list)
   ========================================================================== */
.posts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
	gap: 32px;
}

.card-post {
	background: var(--card-bg);
	border-radius: var(--radius);
	overflow: hidden;
	border: 1px solid var(--border-color);
	transition: transform var(--transition), box-shadow var(--transition);
}
.card-post:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}

.card-post__thumb {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16/10;
}
.card-post__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s ease;
}
.card-post:hover .card-post__thumb img {
	transform: scale(1.05);
}

.card-post__body {
	padding: 24px;
}
.card-post__title {
	font-size: 1.2rem;
	font-weight: 700;
	margin-bottom: 8px;
	line-height: 1.3;
}
.card-post__title a {
	color: var(--text-color);
}
.card-post__title a:hover {
	color: var(--accent);
}
.card-post__excerpt {
	font-size: 0.95rem;
	color: var(--text-secondary);
	margin-bottom: 16px;
	line-height: 1.6;
}
.card-post__meta {
	font-size: 0.85rem;
	color: var(--text-secondary);
	display: flex;
	align-items: center;
	gap: 16px;
}
.card-post__meta i {
	margin-right: 4px;
	color: var(--accent);
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */
.pagination,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 48px 0;
}
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--text-color);
	background: var(--card-bg);
	border: 1px solid var(--border-color);
	border-radius: 980px;
	transition: all var(--transition);
}
.pagination .page-numbers:hover,
.pagination .page-numbers.current {
	background: var(--accent);
	color: #fff;
	border-color: var(--accent);
}

.post-navigation .nav-links {
	justify-content: space-between;
}
.post-navigation .nav-links a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	background: var(--card-bg);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	font-weight: 500;
	font-size: 0.95rem;
	color: var(--text-color);
	transition: all var(--transition);
}
.post-navigation .nav-links a:hover {
	border-color: var(--accent);
	color: var(--accent);
}

/* ==========================================================================
   COMMENTS
   ========================================================================== */
.comments-area {
	margin-top: 60px;
	padding-top: 40px;
	border-top: 1px solid var(--border-color);
}
.comments-title {
	font-size: 1.5rem;
	margin-bottom: 32px;
}
.comment-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.comment-list .comment {
	padding: 24px 0;
	border-bottom: 1px solid var(--border-color);
}
.comment-list .comment .children {
	list-style: none;
	margin-left: 40px;
	padding: 0;
}
.comment-author {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}
.comment-author img {
	border-radius: 50%;
	width: 44px;
	height: 44px;
}
.comment-author .fn {
	font-weight: 600;
	font-size: 1rem;
}
.comment-metadata {
	font-size: 0.85rem;
	color: var(--text-secondary);
	margin-bottom: 12px;
}
.comment-content p {
	margin-bottom: 0.8em;
}
.reply a {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--accent);
}

.comment-respond {
	margin-top: 40px;
}
.comment-respond .comment-reply-title {
	font-size: 1.25rem;
	margin-bottom: 20px;
}
.comment-form label {
	display: block;
	font-weight: 500;
	margin-bottom: 6px;
	font-size: 0.95rem;
}
.comment-form .form-submit {
	margin-top: 16px;
}

/* ==========================================================================
   WIDGETS
   ========================================================================== */
.widget {
	margin-bottom: 2em;
}
.widget-title {
	font-size: 0.9rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--footer-text);
	margin-bottom: 16px;
	opacity: .7;
}
.widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.widget ul li {
	margin-bottom: 8px;
}
.widget ul li a {
	color: var(--footer-text);
	opacity: .7;
	font-size: 0.95rem;
	transition: opacity var(--transition);
}
.widget ul li a:hover {
	opacity: 1;
	color: #fff;
}

/* ==========================================================================
   FOOTER — Apple Style
   ========================================================================== */
.site-footer {
	background: var(--footer-bg);
	color: var(--footer-text);
	padding: 45px 0 0;
}

.footer__inner {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 24px;
}

/* Footer Top — 4 menu columns */
.footer__top {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
	padding-bottom: 30px;
	border-bottom: 1px solid rgba(255,255,255,.1);
}

.footer__menu-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	color: #b5b5b7;
}
.footer__menu-col ul li {
	margin-bottom: 8px;
}
.footer__menu-col ul li a {
	color: rgba(245,245,247,.7);
	font-size: 0.92rem;
	transition: color var(--transition);
}
.footer__menu-col ul li a:hover {
	color: #fff;
}
.footer__menu-col ul li .footer__menu-current {
	color: rgba(245,245,247,.4);
	font-size: 0.92rem;
	cursor: default;
}

/* Footer Middle — brand + contact + legal, 3 columns */
.footer__middle {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr;
	gap: 48px;
	padding: 48px 0;
	border-bottom: 1px solid rgba(255,255,255,.1);
}

.footer__brand {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.footer__brand .site-logo-img {
	height: 42px;
	width: auto;
	filter: brightness(0) invert(1);
}
.footer__brand .site-logo-text {
	font-size: 1.3rem;
	font-weight: 700;
	color: #fff;
}
.footer__brand-info {
	font-size: 0.92rem;
	line-height: 1.7;
	color: rgba(245,245,247,.55);
}

/* Contact & Legal column titles */
.footer__section-title {
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: rgba(245,245,247,.45);
	margin: 0 0 20px;
}
.footer__contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.footer__contact-list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 0.92rem;
	color: rgba(245,245,247,.7);
	line-height: 1.5;
}
.footer__contact-list li i {
	color: var(--accent);
	font-size: 1rem;
	margin-top: 3px;
	width: 20px;
	text-align: center;
	flex-shrink: 0;
}
.footer__contact-list li a {
	color: rgba(245,245,247,.7);
	transition: color var(--transition);
}
.footer__contact-list li a:hover {
	color: #fff;
}

/* Legal menu column */
.footer__legal ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.footer__legal ul li {
	margin-bottom: 10px;
}
.footer__legal ul li a {
	color: rgba(245,245,247,.7);
	font-size: 0.92rem;
	transition: color var(--transition);
	display: flex;
	align-items: center;
	gap: 5px;
}
.footer__legal ul li a:hover {
	color: #fff;
}
.footer__legal ul li a i {
	color: rgba(245,245,247,.7);
	font-size: 0.85rem;
	width: 18px;
	text-align: center;
	flex-shrink: 0;
}

.footer__bottom {
	padding: 24px 0;
	text-align: center;
	font-size: 0.83rem;
	color: rgba(245,245,247,.35);
}

@media (max-width: 768px) {
	.footer__top {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}
	.footer__middle {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.hero-advantages {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
		margin-top: 24px;
	}
	.hero-advantages__item {
		background: none;
		border: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		padding: 0;
		display: flex;
		align-items: center;
		gap: 10px;
	}
	.hero-advantages__item:hover {
		transform: none;
		background: none;
	}
	.hero-advantages__icon {
		width: 36px;
		height: 36px;
		background: rgba(255,255,255,.12);
		border-radius: 10px;
		font-size: 1rem;
		margin-bottom: 0;
		flex-shrink: 0;
	}
	.hero-advantages__title {
		font-size: 0.82rem;
		font-weight: 600;
		margin-bottom: 0;
		letter-spacing: 0;
	}
	.hero-advantages__desc {
		display: none;
	}
}

@media (max-width: 480px) {
	.footer__top {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ==========================================================================
   FAQ SECTION — Apple-style accordion, 2-column grid
   ========================================================================== */
.faq-section {
	padding: 40px 0;
	background: var(--body-bg);
}

.faq-section__inner {
	width: 100%;
}

.faq-section__header {
	text-align: center;
	margin-bottom: 48px;
}
.faq-section__title {
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	font-weight: 700;
	letter-spacing: -0.028em;
	color: var(--text-color);
	margin: 0;
}

/* FAQ list — 2-column grid */
.faq-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	align-items: start;
}

/* Single item */
.faq-item {
	background: var(--card-bg);
	border: 1.5px solid var(--border-color);
	border-radius: var(--radius-sm);
	overflow: hidden;
	transition: border-color .22s ease, box-shadow .22s ease;
}
.faq-item:hover {
	border-color: rgba(0,122,255,.2);
	box-shadow: var(--shadow-sm);
}
.faq-item.is-open {
	border-color: rgba(0,122,255,.3);
	box-shadow: 0 0 0 3px rgba(0,122,255,.06);
}

/* Question button */
.faq-item__question {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 20px;
	background: none;
	border: none;
	border-radius: 0;
	text-align: left;
	cursor: pointer;
	font-family: var(--font);
	font-size: 0.97rem;
	font-weight: 600;
	color: var(--text-color);
	letter-spacing: -0.012em;
	line-height: 1.45;
	transition: background .18s ease;
}
/* hover — subtle bg tint, NOT text color change */
.faq-item__question:hover {
	background: rgba(0,0,0,.025);
	color: var(--accent);
}
/* open state — accent text */
.faq-item.is-open .faq-item__question {
	color: var(--accent);
	background: rgba(0,122,255,.04);
	padding-bottom: 14px;
}

.faq-item__question-text {
	flex: 1;
}

/* Icon badge */
.faq-item__icon {
	width: 28px;
	height: 28px;
	background: var(--border-color);
	color: var(--text-secondary);
	border-radius: 7px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.7rem;
	flex-shrink: 0;
	transition: transform .3s cubic-bezier(.25,.46,.45,.94),
	            background .2s ease,
	            color .2s ease;
}
.faq-item:hover .faq-item__icon {
	background: rgba(0,122,255,.1);
	color: var(--accent);
}
.faq-item.is-open .faq-item__icon {
	transform: rotate(45deg);
	background: var(--accent);
	color: #fff;
}

/* Answer — CSS grid trick для плавної анімації висоти */
.faq-item__answer-wrap {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .32s cubic-bezier(.25,.46,.45,.94);
}
.faq-item.is-open .faq-item__answer-wrap {
	grid-template-rows: 1fr;
}
.faq-item__answer-inner {
	overflow: hidden;
}
.faq-item__answer-body {
	padding: 0 20px 20px;
	font-size: 0.93rem;
	line-height: 1.75;
	color: var(--text-secondary);
	border-top: 1px solid var(--border-color);
	padding-top: 14px;
	margin-top: 0;
}
.faq-item.is-open .faq-item__answer-body {
	border-top-color: rgba(0,122,255,.12);
}

@media (max-width: 768px) {
	.faq-list {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 600px) {
	.faq-section {
		padding: 48px 0;
	}
	.faq-section__header {
		margin-bottom: 28px;
	}
	.faq-item__question {
		padding: 16px;
		font-size: 0.93rem;
	}
	.faq-item__answer-body {
		padding: 12px 16px 16px;
	}
}

/* ==========================================================================
   MAP SECTION — Apple Style
   ========================================================================== */
.map-section {
	padding: 80px 0;
	background: var(--body-bg);
}

.map-section__grid {
	display: grid;
	grid-template-columns: 360px 1fr;
	gap: 40px;
	align-items: stretch;
	min-height: 420px;
}

/* Info card */
.map-section__info {
	background: var(--card-bg);
	border: 1px solid var(--border-color);
	border-radius: var(--radius);
	padding: 48px 40px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	box-shadow: var(--shadow-sm);
}

.map-section__title {
	font-size: clamp(1.35rem, 2.5vw, 1.8rem);
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--text-color);
	margin: 0 0 8px;
	line-height: 1.2;
}

/* Unified row: icon box + text */
.map-section__row {
	display: flex;
	align-items: center;
	gap: 14px;
}
.map-section__row-icon {
	width: 38px;
	height: 38px;
	background: rgba(0,122,255,.08);
	color: var(--accent);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.9rem;
	flex-shrink: 0;
	margin-top: 2px;
}
.map-section__row-text {
	font-size: 0.97rem;
	color: var(--text-secondary);
	line-height: 1.6;
}
/* Coordinates — monospace, smaller */
.map-section__coords {
	font-family: var(--font-mono);
	font-size: 0.85rem;
	letter-spacing: 0.01em;
	color: var(--text-secondary);
	opacity: .8;
}

.map-section__btn {
	align-self: flex-start;
	padding: 13px 26px;
	font-size: 0.92rem;
	border-radius: 980px;
	gap: 8px;
	margin-top: 8px;
}

/* Map embed */
.map-section__embed {
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-md);
	min-height: 400px;
	border: 1px solid var(--border-color);
	position: relative;
}
.map-section__embed iframe {
	width: 100%;
	height: 100%;
	min-height: 420px;
	border: none;
	display: block;
}

@media (max-width: 900px) {
	.map-section__grid {
		grid-template-columns: 1fr;
		min-height: auto;
	}
	.map-section__embed {
		min-height: 320px;
	}
	.map-section__embed iframe {
		min-height: 320px;
	}
	.map-section__info {
		padding: 32px 28px;
	}
}
@media (max-width: 480px) {
	.map-section {
		padding: 48px 0;
	}
	.map-section__embed iframe {
		min-height: 260px;
	}
}

/* ==========================================================================
   404 PAGE
   ========================================================================== */
.error-404-content {
	text-align: center;
	padding: 80px 0;
}
.error-404-content .error-icon {
	font-size: 5rem;
	color: var(--accent);
	margin-bottom: 24px;
}
.error-404-content h2 {
	font-size: 1.5rem;
	margin-bottom: 16px;
}
.error-404-content p {
	font-size: 1.1rem;
	max-width: 500px;
	margin: 0 auto 32px;
}

/* ==========================================================================
   SEARCH
   ========================================================================== */
.search-form {
	display: flex;
	gap: 8px;
	max-width: 500px;
}
.search-form .search-field {
	flex: 1;
}
.search-form .search-submit {
	white-space: nowrap;
}

.search-results-info {
	font-size: 1.1rem;
	color: var(--text-secondary);
	margin-bottom: 32px;
}

/* ==========================================================================
   PAGE LINKS / WP BLOCKS
   ========================================================================== */
.page-links {
	margin: 2em 0;
	font-weight: 500;
}
.wp-block-image img {
	border-radius: var(--radius-sm);
}

/* Gallery captions */
.gallery-caption,
.wp-caption-text {
	text-align: center;
	font-size: 0.9rem;
	color: var(--text-secondary);
	margin-top: 8px;
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}
#primary[tabindex="-1"]:focus {
	outline: 0;
}
.skip-link {
	position: absolute;
}

/* ==========================================================================
   MISC & UTILITIES
   ========================================================================== */
.sticky { display: block; }
.updated:not(.published) { display: none; }
.bypostauthor { display: block; }
.custom-logo-link { display: inline-block; }
.entry-footer { margin-top: 24px; font-size: 0.9rem; color: var(--text-secondary); }
.edit-link a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-weight: 500;
	color: var(--accent);
}

/* Infinite scroll */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer { display: none; }
.infinity-end.neverending .site-footer { display: block; }

/* Medium-width utility */
.content-area--narrow {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

/* Page content wrapper */
.page-content-wrap {
	background: var(--body-bg);
}

/* ==========================================================================
   RESPONSIVE REFINEMENTS
   ========================================================================== */
@media (max-width: 600px) {
	.posts-grid {
		grid-template-columns: 1fr;
	}
	.hero-section {
		min-height: 280px;
	}
	.hero-section__title {
		font-size: 1.6rem;
	}
	.hero-advantages {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
	.hero-advantages__icon {
		width: 32px;
		height: 32px;
		border-radius: 8px;
		font-size: 0.9rem;
	}
	.hero-advantages__title {
		font-size: 0.78rem;
	}
	#primary {
		padding: 0px 0 52px;
	}
	.site-main {
		padding: 0 16px;
	}
	.container {
		padding-left: 16px;
		padding-right: 16px;
	}

	/* Smaller entry content font on very small screens */
	.entry-content {
		font-size: 0.97rem;
	}
	.entry-content h2 { font-size: 1.25rem; }
	.entry-content h3 { font-size: 1.1rem; }

	/* Blockquote — compact */
	blockquote {
		padding: 12px 14px;
		font-size: 0.93rem;
		margin: 1.2em 0;
	}
	.warning h2,
	blockquote h2 {
		font-size: 1.1rem;
	}

	/* Gallery — single col on tiny screens */
	.gallery-columns-2,
	.gallery-columns-3,
	.gallery-columns-4 {
		grid-template-columns: 1fr;
	}

	/* Wider buttons */
	.btn, button[type="submit"] {
		padding: 13px 24px;
		font-size: 0.95rem;
	}
}

.warning h2 {
	margin-top: 10px;
}

/* Mobile drawer footer — hidden on desktop, visible inside nav overlay */
.mobile-drawer-footer {
	display: none;
}

@media (max-width: 768px) {
	.mobile-drawer-footer {
		display: block;
		margin-top: 0px;
		padding-top: 24px;
		padding-bottom: 8px;
	}

	/* Contact block */
	.mobile-contact {
		background: var(--card-bg, #f5f5f7);
		border: 1px solid var(--border-color, #e8e8ed);
		border-radius: var(--radius-sm, 12px);
		padding: 18px 16px 12px;
		margin-bottom: 14px;
	}
	.mobile-contact__heading {
		font-size: 11px;
		font-weight: 700;
		letter-spacing: .08em;
		text-transform: uppercase;
		color: var(--text-secondary, #86868b);
		margin: 0 0 12px;
	}
	.mobile-contact__list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 2px;
	}
	.mobile-contact__item {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 10px 0;
		border-bottom: 1px solid var(--border-color, #e8e8ed);
		color: var(--text-color, #1d1d1f);
		font-size: 0.95rem;
		font-weight: 450;
		line-height: 1.35;
		text-decoration: none;
		transition: color .18s ease;
	}
	.mobile-contact__list li:last-child .mobile-contact__item {
		border-bottom: none;
		padding-bottom: 4px;
	}
	a.mobile-contact__item:hover {
		color: var(--accent, #007AFF);
	}
	a.mobile-contact__item:hover .mobile-contact__icon {
		background: rgba(0,122,255,.15);
		color: var(--accent, #007AFF);
	}
	.mobile-contact__icon {
		width: 32px;
		height: 32px;
		flex-shrink: 0;
		background: rgba(0,0,0,.05);
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 0.8rem;
		color: var(--text-secondary, #86868b);
		transition: background .18s ease, color .18s ease;
	}

	/* Legal menu */
	.mobile-legal {
		padding: 0 4px;
	}
	.mobile-legal__list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		gap: 4px 18px;
		justify-content: center;
	}
	.mobile-legal__list li a {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		font-size: 0.8rem;
		font-weight: 500;
		color: var(--text-secondary, #86868b);
		padding: 5px 2px;
		border-radius: 6px;
		transition: color .18s ease;
		text-decoration: none;
	}
	.mobile-legal__list li a:hover {
		color: var(--accent, #007AFF);
	}
	.mobile-legal__list li a i {
		font-size: 0.7rem;
		opacity: .6;
	}
}


@media (max-width: 768px) {
	/* Entry content */
	.entry-content {
		font-size: 1rem;
		line-height: 1.75;
	}
	.entry-content h1 { font-size: 1.75rem; }
	.entry-content h2 { font-size: 1.35rem; }
	.entry-content h3 { font-size: 1.15rem; }
	.entry-content h4 { font-size: 1.05rem; }
	.entry-content h5,
	.entry-content h6 { font-size: 1rem; }

	/* Blockquote */
	blockquote {
		padding: 14px 16px;
		font-size: 0.97rem;
		margin: 1.4em 0;
	}

	/* Warning / info blockquotes — rein in heading sizes */
	.warning h2,
	.wp-block-pullquote h2,
	blockquote h2 {
		font-size: 1.2rem;
		margin-top: 8px;
		margin-bottom: 6px;
	}

	/* Tables — handled by .table-responsive wrapper (added via JS) */
	.table-responsive {
		border-radius: var(--radius-sm);
	}
	/* Fallback for tables outside .entry-content */
	:not(.entry-content) > table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		width: 100%;
	}

	/* Pre / code */
	pre {
		padding: 16px;
		font-size: 0.82rem;
		border-radius: var(--radius-sm);
	}

	/* Galleries 2-col max on mobile */
	.gallery-columns-3,
	.gallery-columns-4 { grid-template-columns: repeat(2, 1fr); }
	.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }

	/* Post thumbnail */
	.post-thumbnail {
		margin-bottom: 24px;
		border-radius: var(--radius-sm);
	}

	/* Alignment reset on mobile */
	.alignleft,
	.alignright {
		float: none;
		margin: 1em 0;
		display: block;
	}

	/* Price chart title / desc */
	.price-chart-section {
		padding: 40px 0;
	}
	.price-chart-section__title {
		font-size: 1.2rem;
	}
}

/* =====================================================
   PRICE CHART SECTION
   ===================================================== */

.price-chart-section {
	padding: 64px 0 0 0;
}

.price-chart-section__title {
	font-size: clamp(1.25rem, 2.2vw, 1.75rem);
	font-weight: 700;
	color: var(--text-color, #1d1d1f);
	line-height: 1.25;
	margin: 0 0 16px;
	letter-spacing: -.02em;
}

.price-chart-section__desc {
	color: var(--text-secondary, #86868b);
	font-size: 1rem;
	line-height: 1.7;
	margin: 28px 0 0;
}
.price-chart-section__desc p {
	margin: 0 0 .75em;
}
.price-chart-section__desc p:last-child {
	margin-bottom: 0;
}

.price-chart-section__card {
	background: var(--card-bg, #f5f5f7);
	border: 1px solid var(--border-color, rgba(0,0,0,.08));
	border-radius: var(--radius, 18px);
	padding: 28px 28px 20px;
	position: relative;
	box-shadow: 0 2px 24px rgba(0,0,0,.05);
}

/* legend top row */
.price-chart-section__legend-top {
	display: flex;
	align-items: center;
	margin-bottom: 16px;
}
.price-chart-section__legend-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
	color: var(--text-secondary, #86868b);
	background: rgba(0,122,255,.08);
	border: 1px solid rgba(0,122,255,.18);
	border-radius: 20px;
	padding: 5px 14px 5px 10px;
}
.price-chart-section__legend-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--accent, #007AFF);
	flex-shrink: 0;
}

/* canvas wrapper — must be position:relative for tooltip */
.pchart-bars {
	display: flex;
	align-items: flex-end;
	gap: 0;
	height: 260px;
	padding: 0 4px;
	position: relative;
}
.pchart-bars__col {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	height: 100%;
	position: relative;
	cursor: default;
	padding: 0 2px;
}
.pchart-bars__value {
	font-size: 11px;
	font-weight: 600;
	color: var(--text-secondary, #86868b);
	margin-bottom: 6px;
	white-space: nowrap;
	letter-spacing: -.01em;
	transition: color .2s ease;
}
.pchart-bars__value--empty {
	opacity: .3;
}
.pchart-bars__bar {
	width: 100%;
	max-width: 48px;
	border-radius: 8px 8px 4px 4px;
	position: relative;
	transition: height .6s cubic-bezier(.4,0,.2,1);
	overflow: hidden;
}
.pchart-bars__fill {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(180deg, rgba(0,122,255,.35) 0%, rgba(0,122,255,.12) 100%);
	transition: background .2s ease;
}
.pchart-bars__col:hover .pchart-bars__fill {
	background: linear-gradient(180deg, rgba(0,122,255,.55) 0%, rgba(0,122,255,.25) 100%);
}
.pchart-bars__col--current .pchart-bars__fill {
	background: linear-gradient(180deg, var(--accent, #007AFF) 0%, rgba(0,122,255,.6) 100%);
}
.pchart-bars__col--current:hover .pchart-bars__fill {
	background: linear-gradient(180deg, var(--accent, #007AFF) 0%, rgba(0,122,255,.75) 100%);
}
.pchart-bars__bar--empty {
	height: 2px !important;
	background: var(--border-color, rgba(0,0,0,.06));
	border-radius: 1px;
	max-width: 32px;
}
.pchart-bars__month {
	margin-top: 10px;
	font-size: 11.5px;
	font-weight: 500;
	color: var(--text-secondary, #86868b);
	letter-spacing: .02em;
	text-align: center;
}
.pchart-bars__col--current .pchart-bars__month {
	color: var(--accent, #007AFF);
	font-weight: 700;
}
.pchart-bars__col--current .pchart-bars__value {
	color: var(--accent, #007AFF);
	font-weight: 700;
}

@media (max-width: 600px) {
	.price-chart-section {
		padding: 40px 0;
	}
	.price-chart-section__card {
		padding: 16px 10px 14px;
	}
	.pchart-bars {
		height: 200px;
		gap: 0;
		padding: 0;
	}
	.pchart-bars__col {
		padding: 0 1px;
	}
	.pchart-bars__bar {
		max-width: 32px;
		border-radius: 6px 6px 3px 3px;
	}
	.pchart-bars__month {
		font-size: 9px;
		margin-top: 8px;
	}
	.pchart-bars__value {
		font-size: 9px;
		margin-bottom: 4px;
	}
}

/* =====================================================================
   TRAFFIC RULES SECTION
   ===================================================================== */

.traffic-rules-section {
	padding: 80px 0 0px;
}

.traffic-rules-section__title {
	text-align: center;
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -.03em;
	color: var(--text-color);
	margin: 0 0 56px;
	line-height: 1.1;
}

.traffic-rules-section__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.traffic-rules-section__card:first-child {
	grid-column: 1 / -1;
}

.traffic-rules-section__card {
	background: #f5f5f7;
	border-radius: 20px;
	padding: 36px 28px 32px;
	/* box-shadow: 0 2px 12px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04); */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	transition: box-shadow .25s ease, transform .25s ease;
}

.traffic-rules-section__card:hover {
	/* box-shadow: 0 8px 32px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.04); */
	/* transform: translateY(-3px); */
	background: #ececec;
}

.traffic-rules-section__icon-wrap {
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: linear-gradient(135deg, #007AFF 0%, #0055d4 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.traffic-rules-section__icon-wrap i {
	font-size: 24px;
	color: #fff;
}

.traffic-rules-section__card-header {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 16px;
}

/* Cards 2,3,4 — center icon+title row */
.traffic-rules-section__card:not(:first-child) .traffic-rules-section__card-header {
	justify-content: center;
	width: 100%;
}

.traffic-rules-section__card-title {
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--text-color);
	margin: 0;
	line-height: 1.25;
}

.traffic-rules-section__card-desc {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--text-secondary);
	margin: 0;
}

.traffic-rules-section__card-desc p {
	margin: 0 0 .5em;
}

.traffic-rules-section__card-desc p:last-child {
	margin: 0;
}

@media (max-width: 1024px) {
	.traffic-rules-section__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.traffic-rules-section__card:first-child {
		grid-column: 1 / -1;
	}
}

@media (max-width: 600px) {
	.traffic-rules-section {
		padding: 52px 0 60px;
	}
	.traffic-rules-section__grid {
		grid-template-columns: 1fr;
	}
	.traffic-rules-section__title {
		margin-bottom: 36px;
	}
	.traffic-rules-section__card {
		padding: 28px 22px 24px;
	}
}

/* =========================================================
   How to Rent — Step Flow
   ========================================================= */
.htr-section {
	padding: 80px 0 0 0px;
}

.htr-section__header {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 64px;
}

.htr-section__title {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--text-color);
	margin: 0 0 16px;
}

.htr-section__desc {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--text-secondary);
}

.htr-section__desc p { margin: 0 0 12px; }
.htr-section__desc p:last-child { margin-bottom: 0; }

.htr-section__steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	position: relative;
}

/* Connecting line through icon centres (icon 80px → centre at 40px) */
.htr-section__steps::before {
	content: '';
	position: absolute;
	top: 40px;
	left: 12.5%;
	right: 12.5%;
	height: 2px;
	background: linear-gradient(90deg, var(--accent), rgba(0,0,0,.06));
	opacity: 0.22;
	pointer-events: none;
	z-index: 0;
}

.htr-step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0 20px;
	z-index: 1;
}

/* Arrow chevron — vertically centred on the icon circle */
.htr-step__arrow {
	position: absolute;
	right: -11px;
	top: 32px; /* 40px icon-centre − 8px half arrow height */
	color: var(--accent);
	opacity: 0.4;
	font-size: 1rem;
	z-index: 3;
	line-height: 1;
}

/* Step head: number badge + icon */
.htr-step__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
}

.htr-step__icon-wrap {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: linear-gradient(145deg, #f5f5f7, #e8e8ed);
	display: flex;
	align-items: center;
	justify-content: center;
	/* box-shadow: 0 4px 16px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.05); */
	transition: transform .25s ease, box-shadow .25s ease;
}

.htr-step:hover .htr-step__icon-wrap {
	transform: translateY(-4px);
	/* box-shadow: 0 10px 28px rgba(0,0,0,.11), 0 2px 6px rgba(0,0,0,.06); */
}

.htr-step__icon-wrap i {
	font-size: 1.6rem;
	color: var(--accent);
}

/* Step body: title + description */
.htr-step__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.htr-step__title {
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--text-color);
	margin: 0;
	letter-spacing: -0.01em;
}

.htr-step__desc {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--text-secondary);
}

.htr-step__desc p { margin: 0 0 8px; }
.htr-step__desc p:last-child { margin-bottom: 0; }

/* Responsive */
@media (max-width: 900px) {
	.htr-section__steps {
		grid-template-columns: repeat(2, 1fr);
		gap: 40px 0;
	}
	.htr-section__steps::before { display: none; }
	.htr-step__arrow { display: none; }
}

@media (max-width: 540px) {
	.htr-section {
		padding: 56px 0;
	}
	.htr-section__header {
		margin-bottom: 40px;
	}
	.htr-section__steps {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

/* =========================================================
   Popular Trips — Location Cards
   ========================================================= */
.trips-section {
	padding: 80px 0 0 0;
}

.trips-section__header {
	text-align: center;
	margin: 0 auto 36px;
}

.trips-section__title {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--text-color);
	margin: 0 0 16px;
}

.trips-section__desc {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--text-secondary);
}

.trips-section__desc p { margin: 0 0 12px; }
.trips-section__desc p:last-child { margin-bottom: 0; }

.trips-section__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.trips-section__card {
	background: #fff;
	border: 1px solid rgba(0,0,0,.07);
	border-radius: 18px;
	padding: 24px 24px 22px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	box-shadow: 0 2px 12px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.04);
	transition: transform .25s ease, box-shadow .25s ease;
}

.trips-section__card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 32px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.05);
}

.trips-section__card-head {
	display: flex;
	align-items: center;
	gap: 14px;
}

.trips-section__num {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--accent);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 3px 10px rgba(0,122,255,.25);
}

.trips-section__num span {
	font-size: 0.8125rem;
	font-weight: 700;
	color: #fff;
	line-height: 1;
}

.trips-section__card-title {
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--text-color);
	margin: 0;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.trips-section__card-desc {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--text-secondary);
	border-top: 1px solid #d4d4d4;
	padding-top: 15px;
}

.trips-section__card-desc p { margin: 0 0 8px; }
.trips-section__card-desc p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
	.trips-section__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 540px) {
	.trips-section {
		padding: 56px 0;
	}
	.trips-section__grid {
		grid-template-columns: 1fr;
	}
	.trips-section__card-desc {
		padding-left: 0;
	}
}