/*
Theme Name: GooCar
Theme URI: https://goocar.am
Author: GooCar
Description: Тема для главной страницы сервиса аренды авто в Армении goocar.am. Подготовлена для многоязычности через Polylang или WPML (см. functions.php и readme.txt).
Version: 1.0.0
Text Domain: goocar
*/

/* =========================================================
   TOKENS
========================================================= */
:root{
	/* GooCar.am brand palette — matched to the logo: near-black + a
	   punchy road-sign orange, on a cool neutral (not warm) backdrop. */
	--color-bg: #F4F4F5;
	--color-bg-alt: #E7E7EA;
	--color-surface: #FFFFFF;
	--color-ink: #17181C;
	--color-ink-soft: #5B5C63;
	--color-primary: #0D0D0F;
	--color-primary-light: #313136;
	--color-accent: #F2410A;
	--color-accent-dark: #C93300;
	--color-rose: #C97B6C;
	--color-sage: #4C7F63;
	--color-border: rgba(13,13,15,0.10);

	--radius-sm: 8px;
	--radius-md: 16px;
	--radius-lg: 30px;
	--radius-pill: 999px;

	--shadow-card: 0 16px 34px -18px rgba(13,13,15,0.35);
	--shadow-pop: 0 24px 60px -20px rgba(13,13,15,0.45);

	--font-display: 'Exo 2', 'Manrope', -apple-system, sans-serif;
	--font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--container: 1180px;
}

@media (prefers-reduced-motion: reduce){
	*{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* =========================================================
   RESET / BASE
========================================================= */
*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
	margin:0;
	background: var(--color-bg);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--font-display); margin:0 0 .5em; font-weight:800; line-height:1.1; letter-spacing:-.01em; }
p{ margin:0 0 1em; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible{
	outline: 3px solid var(--color-accent);
	outline-offset: 2px;
}

.skip-link{
	position:absolute; left:-999px; top:0; background:var(--color-primary); color:#fff;
	padding:.75em 1.25em; z-index:200; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

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

.eyebrow{
	display:inline-flex; align-items:center; gap:.5em;
	font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
	color: var(--color-accent-dark);
}

.btn{
	display:inline-flex; align-items:center; justify-content:center; gap:.5em;
	padding: .9em 1.6em;
	border-radius: var(--radius-pill);
	font-weight:700; font-size:.95rem;
	border: 2px solid transparent;
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
	white-space: nowrap;
}
.btn:hover{ transform: translateY(-1px); }
.btn--primary{ background: var(--color-accent); color: var(--color-primary); }
.btn--primary:hover{ background: var(--color-accent-dark); }
.btn--outline{ background: transparent; border-color: currentColor; color: var(--color-primary); }
.btn--ghost{ background: rgba(255,255,255,.12); color:#fff; border-color: rgba(255,255,255,.4); }
.btn--block{ width:100%; }

/* Signature divider: khachkar-inspired repeating diamond/cross motif,
   used between major sections instead of a plain rule. */
.khachkar-divider{
	height: 22px;
	width:100%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='22' viewBox='0 0 44 22'%3E%3Cg fill='none' stroke='%23D98A1F' stroke-width='1.4'%3E%3Cpath d='M22 2 L30 11 L22 20 L14 11 Z'/%3E%3Cpath d='M0 11 H8 M36 11 H44'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-position: center;
	opacity:.55;
}

/* =========================================================
   TOP BAR + HEADER
========================================================= */
.top-bar{
	background: var(--color-primary);
	color: rgba(255,255,255,.85);
	font-size: .82rem;
	position: relative;
	z-index: 110;
}
.top-bar .container{
	display:flex; align-items:center; justify-content:space-between;
	padding-top:8px; padding-bottom:8px; gap:16px;
}
.top-bar__contacts{ display:flex; gap:20px; }
.top-bar__contacts a:hover{ color:#fff; }

.lang-switch{ position: relative; }

.lang-switch__toggle{
	display:flex; align-items:center; gap:.45em;
	background:none; border:0; cursor:pointer;
	padding:.3em .7em; border-radius: var(--radius-pill);
	font-family: inherit; font-weight:700; font-size:.78rem; letter-spacing:.03em;
	color: rgba(255,255,255,.85);
}
.lang-switch__toggle:hover,
.lang-switch[data-open="true"] .lang-switch__toggle{
	background: rgba(255,255,255,.16);
	color:#fff;
}
.lang-switch__flag{ display:flex; align-items:center; font-size:1.05em; line-height:1; }
.lang-switch__flag img{ display:block; width:18px; height:13px; border-radius:2px; object-fit:cover; }
.lang-switch__caret{ opacity:.75; transition: transform .15s ease; }
.lang-switch[data-open="true"] .lang-switch__caret{ transform: rotate(180deg); }

.lang-switch__menu{
	position:absolute; top:calc(100% + 8px); right:0; z-index:60;
	min-width:150px; margin:0; padding:6px; list-style:none;
	background:#fff; border-radius:12px;
	box-shadow: var(--shadow-pop);
	opacity:0; visibility:hidden; transform: translateY(-6px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}
.lang-switch[data-open="true"] .lang-switch__menu{
	opacity:1; visibility:visible; transform: translateY(0);
}
.lang-switch__item{
	display:flex; align-items:center; gap:.6em;
	padding:.5em .65em; border-radius:8px;
	font-weight:600; font-size:.82rem; letter-spacing:.02em;
	color: var(--color-ink); white-space:nowrap;
}
.lang-switch__item:hover{ background: var(--color-bg); }
.lang-switch__item.is-active{ background: var(--color-primary); color:#fff; }
.lang-switch__item .lang-switch__flag{ font-size:1.15em; }
.lang-switch__item img{ display:block; width:18px; height:13px; border-radius:2px; object-fit:cover; }

.lang-switch--footer .lang-switch__toggle{ color: rgba(30,37,48,.7); }
.lang-switch--footer .lang-switch__toggle:hover,
.lang-switch--footer[data-open="true"] .lang-switch__toggle{ background: var(--color-border); color: var(--color-ink); }
.lang-switch--footer .lang-switch__menu{ right:auto; left:0; }

.site-header{
	background: var(--color-surface);
	position: sticky; top:0; z-index:100;
	box-shadow: 0 1px 0 var(--color-border);
}
.site-header .container{
	display:flex; align-items:center; justify-content:space-between;
	gap:24px; padding-top:14px; padding-bottom:14px;
}
.site-logo{
	font-family: var(--font-display); font-weight:800; font-size:1.35rem;
	color: var(--color-primary); display:flex; align-items:center; gap:.55em;
}
.site-logo__img{ border-radius:50%; flex:none; }
.site-logo__text{ display:flex; align-items:baseline; gap:.1em; letter-spacing:-.01em; }
.site-logo span{ color: var(--color-accent); }
.site-logo em{
	font-style: italic; font-size:.7em; font-weight:800;
	background: var(--color-accent); color:#fff;
	padding:.1em .35em; border-radius:5px; margin-left:.1em;
}

.primary-nav{ display:flex; gap:28px; }
.primary-nav a{
	font-weight:600; font-size:.95rem; color: var(--color-ink-soft);
	position:relative; padding:6px 0;
}
.primary-nav a:hover{ color: var(--color-primary); }

.header-actions{ display:flex; align-items:center; gap:16px; }
.nav-toggle{
	display:none; background:none; border:none; padding:8px;
	flex-direction:column; gap:5px;
}
.nav-toggle span{ width:24px; height:2px; background: var(--color-primary); border-radius:2px; }

/* =========================================================
   HERO
========================================================= */
.hero{
	position:relative;
	overflow:hidden;
	background: linear-gradient(180deg, #232326 0%, #101012 55%, #000000 100%);
	color:#fff;
	padding: 64px 0 150px;
}
.hero__art{
	position:absolute; inset:0; z-index:0; opacity:.9; pointer-events:none;
}
.hero__content{
	position:relative; z-index:2;
	max-width: 640px;
}
.hero__title{ font-size: clamp(2rem, 4.2vw, 3.2rem); color:#fff; }
.hero__subtitle{ color: rgba(255,255,255,.8); font-size:1.05rem; max-width:520px; }
.hero__cta-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; }

.search-card{
	position:relative; z-index:3;
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-pop);
	margin-top: -96px;
	padding: 22px;
	display:grid;
	grid-template-columns: 1.2fr 1.2fr 1.4fr auto;
	gap:14px;
}
.search-field{
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 10px 16px;
}
.search-field label{
	display:block; font-size:.72rem; font-weight:700; text-transform:uppercase;
	letter-spacing:.04em; color: var(--color-ink-soft); margin-bottom:2px;
}
.search-field .value{ font-weight:700; font-size:.95rem; }
.search-field__select{
	width:100%; border:none; background:transparent; font-weight:700; font-size:.95rem;
	font-family: var(--font-body); color: var(--color-ink); padding:0; appearance:none;
}
.search-field--dates .search-field__dates{ display:flex; align-items:center; gap:6px; }
.search-field__dates input[type="date"]{
	border:none; background:transparent; font-weight:700; font-size:.88rem;
	font-family: var(--font-body); color: var(--color-ink); padding:0; width:0; flex:1; min-width:0;
}
.search-field .filter-check{ font-size:.92rem; }
.search-card .btn{ padding: 0 1.8em; }

/* =========================================================
   FEATURES ROW
========================================================= */
.features{
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
}
.features .container{
	display:flex; flex-wrap:wrap; gap:0;
	padding-top:34px; padding-bottom:34px;
}
.feature-item{
	flex: 1 1 160px;
	display:flex; align-items:center; gap:12px;
	padding: 10px 18px;
	border-left: 1px solid var(--color-border);
}
.feature-item:first-child{ border-left:none; padding-left:0; }
.feature-item__icon{
	flex:none; width:42px; height:42px; border-radius: var(--radius-sm);
	background: var(--color-bg); color: var(--color-primary);
	display:flex; align-items:center; justify-content:center;
}
.feature-item__title{ font-weight:700; font-size:.9rem; line-height:1.25; }
.feature-item__sub{ font-size:.78rem; color: var(--color-ink-soft); }

/* =========================================================
   SECTION HEADINGS
========================================================= */
.section{ padding: 64px 0; }
.section--tight{ padding: 48px 0; }
.section-head{
	display:flex; align-items:flex-end; justify-content:space-between;
	gap:20px; margin-bottom:28px; flex-wrap:wrap;
}
.section-head h2{ font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin:0; }
.section-head__link{ font-weight:700; color: var(--color-primary); border-bottom:2px solid var(--color-accent); }

/* =========================================================
   MODELS SLIDER
========================================================= */
.models-scroller{
	display:flex; gap:18px; overflow-x:auto; padding-bottom:8px;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}
.model-card{
	scroll-snap-align:start;
	flex: 0 0 240px;
	background: var(--color-surface);
	border-radius: var(--radius-md);
	overflow:hidden;
	box-shadow: var(--shadow-card);
}
.model-card__media{
	aspect-ratio: 4/3;
	background: linear-gradient(135deg, var(--color-bg-alt), var(--color-bg));
	display:flex; align-items:center; justify-content:center;
	color: var(--color-primary-light);
}
.model-card__body{ padding: 14px 16px 18px; }
.model-card__name{ font-weight:700; margin-bottom:2px; }
.model-card__price{ color: var(--color-accent-dark); font-weight:800; }

/* =========================================================
   CATALOG GRID
========================================================= */
.catalog-grid{
	display:grid; grid-template-columns: repeat(3, 1fr); gap:22px;
}
.car-card{
	background: var(--color-surface);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	overflow:hidden;
	display:flex; flex-direction:column;
}
.car-card__media{
	position:relative;
	aspect-ratio: 16/10;
	background: linear-gradient(135deg, var(--color-bg-alt), var(--color-bg));
	display:flex; align-items:center; justify-content:center;
	color: var(--color-primary-light);
}
.car-card__badge{
	position:absolute; top:10px; left:10px;
	background: var(--color-sage); color:#fff;
	font-size:.68rem; font-weight:700; letter-spacing:.02em;
	padding:5px 10px; border-radius: var(--radius-pill);
}
.car-card__badge--accent{ background: var(--color-accent); color: var(--color-primary); left:auto; right:10px; }
.car-card__badge--second{ top:auto; bottom:10px; }
.car-card__body{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:10px; flex:1; }
.car-card__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.car-card__name{ font-weight:700; font-size:1.05rem; }
.car-card__tag{ font-size:.75rem; color: var(--color-ink-soft); }
.car-card__specs{
	display:grid; grid-template-columns: repeat(2,1fr); gap:8px;
	font-size:.72rem; color: var(--color-ink-soft);
	border-top:1px dashed var(--color-border); border-bottom:1px dashed var(--color-border);
	padding: 10px 0;
}
.car-card__specs strong{ display:block; color: var(--color-ink); font-size:.82rem; }
.car-card__bottom{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; gap:10px; }
.car-card__price{ font-size:1.3rem; font-weight:800; color: var(--color-primary); }
.car-card__price span{ display:block; font-size:.7rem; font-weight:600; color: var(--color-ink-soft); }
.car-card__cta{ padding:.7em 1.3em; font-size:.85rem; }

.catalog-more{ text-align:center; margin-top:36px; }

/* =========================================================
   CATALOG FILTERS (archive-car.php)
========================================================= */
.catalog-filters{
	background: var(--color-surface);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	padding: 20px 22px;
	margin-bottom: 32px;
	display:flex; flex-direction:column; gap:16px;
}
.catalog-filters__row{ display:flex; gap:16px; flex-wrap:wrap; align-items:flex-end; }
.catalog-filters__row--checks{ align-items:center; border-top:1px dashed var(--color-border); padding-top:16px; }
.filter-field{ display:flex; flex-direction:column; gap:4px; min-width:180px; flex:1 1 180px; }
.filter-field label{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color: var(--color-ink-soft); }
.filter-field select{
	padding: 10px 12px; border-radius: var(--radius-sm); border:1px solid var(--color-border);
	font-family: var(--font-body); font-weight:600; font-size:.9rem; background:#fff;
}
.filter-check{ display:flex; align-items:center; gap:8px; font-size:.88rem; font-weight:600; color: var(--color-ink-soft); }
.catalog-filters__actions{ margin-left:auto; display:flex; gap:10px; }

.catalog-pagination{ display:flex; justify-content:center; gap:6px; margin-top:36px; flex-wrap:wrap; }
.catalog-pagination .page-numbers{
	display:inline-flex; align-items:center; justify-content:center;
	min-width:38px; height:38px; padding:0 10px;
	border-radius: var(--radius-pill); font-weight:700; font-size:.85rem;
	background: var(--color-surface); box-shadow: var(--shadow-card); color: var(--color-primary);
}
.catalog-pagination .page-numbers.current{ background: var(--color-primary); color:#fff; }

@media (max-width: 640px){
	.catalog-filters__actions{ margin-left:0; width:100%; }
	.catalog-filters__actions .btn{ flex:1; }
}

/* =========================================================
   SINGLE CAR PAGE
========================================================= */
.single-car{
	display:grid; grid-template-columns: 1.1fr 1fr; gap:36px;
	background: var(--color-surface); border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card); padding: 28px; margin-bottom: 32px;
}
.single-car__media{
	position:relative;
	border-radius: var(--radius-md); overflow:hidden;
	background: linear-gradient(135deg, var(--color-bg-alt), var(--color-bg));
	display:flex; align-items:center; justify-content:center;
	min-height: 320px; color: var(--color-primary-light);
}
.single-car__specs{ width:100%; border-collapse:collapse; margin:18px 0; }
.single-car__specs th, .single-car__specs td{
	text-align:left; padding:10px 0; border-bottom:1px dashed var(--color-border); font-size:.92rem;
}
.single-car__specs th{ color: var(--color-ink-soft); font-weight:600; width:55%; }
.single-car__price{ font-size:1.8rem; font-weight:800; color: var(--color-primary); margin-bottom:16px; }
.single-car__price span{ display:block; font-size:.8rem; font-weight:600; color: var(--color-ink-soft); }
.single-car__content{ max-width: 760px; line-height:1.7; }

@media (max-width: 800px){
	.single-car{ grid-template-columns: 1fr; }
}

/* =========================================================
   WHY CHOOSE US
========================================================= */
.why-grid{
	display:grid; grid-template-columns: repeat(3,1fr); gap:24px;
}
.why-card{
	background: var(--color-surface);
	border-radius: var(--radius-md);
	padding: 24px;
	border-top: 3px solid var(--color-accent);
}
.why-card__icon{
	width:46px; height:46px; border-radius:12px;
	background: var(--color-bg); color: var(--color-primary);
	display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.why-card h3{ font-size:1.05rem; }
.why-card p{ color: var(--color-ink-soft); font-size:.92rem; margin:0; }

/* =========================================================
   DOCS
========================================================= */
.docs{
	background: var(--color-primary);
	color:#fff;
	border-radius: var(--radius-lg);
	padding: 40px 44px;
	display:grid; grid-template-columns: 1fr 1.4fr; gap:32px; align-items:center;
}
.docs h2{ color:#fff; }
.docs ul{ display:flex; flex-direction:column; gap:14px; }
.docs li{ display:flex; gap:12px; align-items:flex-start; font-size:.95rem; color: rgba(255,255,255,.9); }
.docs li svg{ flex:none; margin-top:3px; color: var(--color-accent); }

/* =========================================================
   FAQ
========================================================= */
.faq-list{ max-width: 820px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item{
	background: var(--color-surface); border-radius: var(--radius-md);
	box-shadow: var(--shadow-card); overflow:hidden;
}
.faq-item__q{
	width:100%; background:none; border:none; text-align:left;
	display:flex; align-items:center; justify-content:space-between; gap:16px;
	padding: 18px 22px; font-weight:700; font-size:1rem; color: var(--color-ink);
}
.faq-item__q .icon-plus{ flex:none; transition: transform .2s ease; color: var(--color-accent-dark); }
.faq-item[data-open="true"] .icon-plus{ transform: rotate(45deg); }
.faq-item__a{
	max-height:0; overflow:hidden; transition: max-height .25s ease;
	padding: 0 22px;
	color: var(--color-ink-soft); font-size:.95rem;
}
.faq-item[data-open="true"] .faq-item__a{ padding-bottom:20px; }

/* =========================================================
   CTA BAND
========================================================= */
.cta-band{
	background: linear-gradient(120deg, var(--color-rose), var(--color-accent));
	border-radius: var(--radius-lg);
	padding: 48px 44px;
	display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
	color: var(--color-primary);
}
.cta-band h2{ margin:0 0 6px; color: var(--color-primary); }
.cta-band p{ margin:0; color: rgba(13,13,15,.75); }
.cta-band .btn--primary{ background: var(--color-primary); color:#fff; }
.cta-band .btn--primary:hover{ background:#000000; }

/* =========================================================
   FOOTER
========================================================= */
.site-footer{
	background: #0A0A0C;
	color: rgba(255,255,255,.75);
	padding: 56px 0 26px;
}
.footer-grid{
	display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:32px;
	padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer-grid h4{ color:#fff; font-size:.95rem; font-family: var(--font-body); margin-bottom:14px; }
.footer-col ul{ display:flex; flex-direction:column; gap:10px; font-size:.9rem; }
.footer-col a:hover{ color:#fff; }
.footer-logo{
	font-family: var(--font-display); font-weight:800; font-size:1.3rem; color:#fff;
	display:flex; align-items:center; gap:.5em; margin-bottom:10px;
}
.footer-logo img{ border-radius:50%; flex:none; }
.footer-logo em{
	font-style:italic; font-size:.7em; font-weight:800;
	background: var(--color-accent); color:#fff;
	padding:.1em .35em; border-radius:5px; margin-left:.1em;
}
.footer-social{ display:flex; gap:10px; margin-top:14px; }
.footer-social a{
	width:36px; height:36px; border-radius:50%; background: rgba(255,255,255,.08);
	display:flex; align-items:center; justify-content:center;
}
.footer-social a:hover{ background: var(--color-accent); color: var(--color-primary); }
.footer-bottom{
	display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
	padding-top:22px; font-size:.82rem;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 960px){
	.primary-nav{ display:none; }
	.nav-toggle{ display:flex; }
	.search-card{ grid-template-columns: 1fr 1fr; }
	.search-card .btn{ grid-column: 1 / -1; }
	.catalog-grid{ grid-template-columns: repeat(2,1fr); }
	.why-grid{ grid-template-columns: repeat(2,1fr); }
	.docs{ grid-template-columns:1fr; }
	.footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
	.top-bar .container{ font-size:.72rem; }
	.top-bar__contacts{ gap:12px; }
	.search-card{ grid-template-columns: 1fr; margin-top:-70px; }
	.features .container{ flex-direction:column; }
	.feature-item{ border-left:none; border-top:1px solid var(--color-border); }
	.feature-item:first-child{ border-top:none; }
	.catalog-grid{ grid-template-columns: 1fr; }
	.why-grid{ grid-template-columns: 1fr; }
	.footer-grid{ grid-template-columns: 1fr; }
	.cta-band{ flex-direction:column; align-items:flex-start; }
	.hero{ padding-bottom: 110px; }
}