/*
 * Asfar theme: styles of the patterns and templates.
 * Colors, fonts and spacing are theme.json presets; logical properties (inline-start/end)
 * make the same rules work in Arabic (rtl) and in English/French (ltr).
 */

:root {
	--as-radius: 16px;
	--as-radius-sm: 10px;
	--as-line: var(--wp--preset--color--line);
	--as-muted: var(--wp--preset--color--muted);
	--as-primary: var(--wp--preset--color--primary);
	--as-navy: var(--wp--preset--color--navy);
}

body { -webkit-font-smoothing: antialiased; }
:where(.wp-site-blocks) > * { margin-block-start: 0; }
img { max-width: 100%; height: auto; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; }
/* On the dark bands (footer, photos, navy and night backgrounds) the focus ring is white. */
:is(.as-footer, .wp-block-cover, .has-navy-background-color, .has-night-background-color, .has-primary-background-color) :is(a, button, input, select, summary):focus-visible,
.wp-block-button__link:focus-visible:is(.has-navy-background-color, .has-night-background-color) { outline-color: #fff; }
/* Links inside running text are underlined (not the menus, buttons or cards). */
:is(.wp-block-post-content, .as-detail-content, .as-legal, .entry-content) :is(p, li, td, dd, figcaption) a:where(:not(.wp-element-button, .wp-block-button__link, .as-card, .as-destination, .as-service a, .as-qcard a, .as-hero a, .wp-block-navigation a)),
.as-request-intro a, .asfar-help a, .asfar-consent a { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.as-ltr { direction: ltr; unicode-bidi: embed; display: inline-block; }

/* ---------- block styles ---------- */
.wp-block-button.is-style-outline-pill .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--as-line);
}
.wp-block-button.is-style-outline-pill .wp-block-button__link:hover { border-color: var(--as-primary); color: var(--as-primary); background: transparent; }
.wp-block-button.is-style-light-pill .wp-block-button__link { background: #fff; color: var(--wp--preset--color--ink); }
.wp-block-button.is-style-light-pill .wp-block-button__link:hover { background: var(--wp--preset--color--soft); color: var(--as-primary); }

.wp-block-group.is-style-card,
.wp-block-group.is-style-card-accent {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--as-line);
	border-radius: var(--as-radius);
	box-shadow: var(--wp--preset--shadow--soft);
	padding: 1.4rem 1.5rem;
}
.wp-block-group.is-style-card-accent { border-top: 4px solid var(--as-primary); }
.wp-block-group.is-style-card > :first-child, .wp-block-group.is-style-card-accent > :first-child { margin-top: 0; }
.wp-block-group.is-style-note {
	background: var(--wp--preset--color--soft);
	border-inline-start: 4px solid var(--as-primary);
	border-radius: var(--as-radius-sm);
	padding: 1rem 1.25rem;
}

ul.is-style-checks { list-style: none; padding-inline-start: 0; }
ul.is-style-checks > li { position: relative; padding-inline-start: 1.8rem; margin-bottom: .45rem; }
ul.is-style-checks > li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--wp--preset--color--green); font-weight: 800; }

ol.is-style-steps { list-style: none; counter-reset: as-step; padding: 0; display: grid; gap: 1rem; }
ol.is-style-steps > li { counter-increment: as-step; position: relative; padding-inline-start: 3.5rem; min-height: 2.6rem; }
ol.is-style-steps > li::before {
	content: counter(as-step);
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 50%;
	background: var(--wp--preset--gradient--brand);
	color: #fff;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

p.is-style-eyebrow { color: var(--as-primary); font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .25rem; }
:lang(ar) p.is-style-eyebrow, [dir=rtl] p.is-style-eyebrow { text-transform: none; letter-spacing: 0; }

/* ---------- section titles ---------- */
.as-title { text-transform: uppercase; letter-spacing: .02em; }
[dir=rtl] .as-title { text-transform: none; letter-spacing: 0; }
.as-subtitle { color: var(--as-muted); max-width: 640px; margin-inline: auto; }

/* ---------- header ---------- */
.as-topbar { font-size: .82rem; }
.as-topbar a { color: inherit; text-decoration: none; opacity: .85; }
.as-topbar a:hover { opacity: 1; text-decoration: none; }
.as-topbar .as-b2b a { background: var(--wp--preset--color--green); color: #fff; opacity: 1; border-radius: 999px; padding: .2rem .8rem; font-weight: 600; }
.as-topbar p { margin: 0; }
/* Phone: the contact line is hidden; the account, the B2B space and the quote stay reachable in a short bar. */
.as-topbar .as-topbar-quote { display: none; }
@media (max-width: 781px) {
	.as-topbar { padding-top: .4rem !important; padding-bottom: .4rem !important; }
	.as-topbar .as-topbar-contact { display: none !important; }
	.as-topbar > .alignwide { justify-content: center !important; }
	.as-topbar .as-topbar-links { justify-content: center; gap: .5rem 1rem !important; }
	.as-topbar .as-topbar-quote { display: block; }
	.as-topbar .as-topbar-quote a { opacity: 1; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
}

.as-header { position: sticky; top: 0; z-index: 50; box-shadow: 0 1px 0 var(--as-line); }
.admin-bar .as-header { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar .as-header { top: 0; } }
.as-header .wp-block-site-logo img { max-height: 52px; width: auto; }
.as-header .wp-block-navigation a:hover, .as-header .wp-block-navigation .current-menu-item > a { color: var(--as-primary); }
.as-header .wp-block-navigation__submenu-container { border: 0 !important; border-radius: var(--as-radius-sm); box-shadow: var(--wp--preset--shadow--card); padding: .4rem; }
@media (max-width: 600px) { .as-header .as-header-cta { display: none; } }

/* ---------- hero ---------- */
.as-hero h1 { text-shadow: 0 2px 18px rgba(0, 0, 0, .25); max-width: 760px; }
.as-hero .as-hero-lead { max-width: 620px; opacity: .92; }
/* Badge, title and text start on the same edge (right in Arabic), inside the 1240px content box. */
.as-hero .wp-block-cover__inner-container { width: 100%; max-width: 1240px; margin-inline: auto; }
.as-hero .wp-block-cover__inner-container.is-layout-constrained > * { margin-inline-start: 0 !important; margin-inline-end: auto !important; }
.as-hero-badge { display: inline-block; background: #fff; color: var(--as-primary); border-radius: 999px; padding: .35rem 1rem; font-weight: 600; font-size: .85rem; }
.as-search-overlap { position: relative; z-index: 5; margin-top: calc(-1 * clamp(4rem, 9vw, 7rem)) !important; }

/* ---------- services strip ---------- */
.as-services { gap: 1rem; }
.as-service {
	position: relative;
	text-align: center;
	padding: 1.2rem .6rem !important;
	border-radius: var(--as-radius);
	border: 1px solid var(--as-line);
	background: var(--wp--preset--color--base);
	transition: box-shadow .2s, transform .2s, border-color .2s;
}
.as-service:hover { box-shadow: var(--wp--preset--shadow--soft); transform: translateY(-3px); border-color: transparent; }
.as-service figure { margin: 0 auto .6rem !important; }
.as-service img { width: 46px; height: 46px; object-fit: contain; }
.as-service p { margin: 0; font-weight: 600; font-size: .88rem; }
.as-service a { color: var(--wp--preset--color--ink); text-decoration: none; }
.as-service a::after { content: ""; position: absolute; inset: 0; }
.as-service:hover a { color: var(--as-primary); }
@media (max-width: 991px) { .as-services { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
@media (max-width: 575px) { .as-services { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (prefers-reduced-motion: reduce) { .as-service { transition: none; } .as-service:hover { transform: none; } }

/* ---------- why us ---------- */
.as-feature { text-align: center; }
.as-feature figure {
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: color-mix(in srgb, var(--as-primary) 10%, transparent);
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1rem !important;
}
.as-feature img { width: 28px; height: 28px; }
.as-feature h3 { font-size: 1.02rem; margin-bottom: .4rem; }
.as-feature p { color: var(--as-muted); font-size: .9rem; margin: 0; }

/* ---------- explore band ---------- */
.as-explore h2 { text-transform: uppercase; line-height: 1.05; }
[dir=rtl] .as-explore h2 { text-transform: none; }
.as-explore .wp-block-separator { border-color: rgba(255, 255, 255, .5); opacity: 1; }

/* ---------- testimonials ---------- */
.as-testimonials { position: relative; overflow: hidden; }
.as-testimonials::before {
	content: "";
	position: absolute;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 168, 232, .35), transparent 70%);
	inset-inline-end: -160px;
	top: -200px;
	pointer-events: none;
}
.as-quote { height: 100%; }
.as-quote .as-stars { color: var(--wp--preset--color--gold); letter-spacing: .1em; margin: 0 0 .5rem; }
.as-quote .as-quote-text { color: var(--as-muted); font-size: .92rem; }
.as-quote .as-quote-name { margin: 0; font-weight: 700; }
.as-quote .as-quote-trip { margin: 0; color: var(--as-muted); font-size: .85rem; }

/* ---------- news ---------- */
.as-news .wp-block-post-featured-image img { aspect-ratio: 16 / 10; object-fit: cover; }
.as-news .wp-block-post-title a { color: inherit; }

/* ---------- newsletter ---------- */
.as-cta { border-radius: calc(var(--as-radius) * 1.5); overflow: hidden; }
.as-cta .wp-block-image, .as-cta .wp-block-image img { height: 100%; margin: 0; border-radius: 0; }
.as-cta .wp-block-image img { min-height: 280px; object-fit: cover; width: 100%; }

/* ---------- footer ---------- */
.as-footer { font-size: .9rem; }
.as-footer a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.as-footer a:hover { color: #fff; text-decoration: none; }
.as-footer h2 { color: #fff; font-size: 1rem; margin-bottom: 1rem; }
.as-footer .wp-block-navigation { gap: .55rem; }
.as-footer .wp-block-navigation-item__content { padding: 0; }
.as-footer .wp-block-site-logo img { max-height: 56px; width: auto; }
/* Without a footer logo of its own, the logo of the header is shown in white on the dark footer. */
.as-footer .as-footer-logo:not(.has-footer-logo) img { filter: brightness(0) invert(1); }
.as-footer .as-footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); font-size: .82rem; }
.as-footer .wp-block-social-links .wp-social-link { background: transparent !important; border: 1px solid rgba(255, 255, 255, .25); }
.as-footer .wp-block-social-links .wp-social-link:hover { background: var(--as-primary) !important; border-color: var(--as-primary); }

/* ---------- page header band ---------- */
.as-page-header .wp-block-post-title, .as-page-header .wp-block-query-title { margin: 0; }
.as-page-header .as-breadcrumb { font-size: .85rem; opacity: .85; }
.as-page-header .as-breadcrumb a { color: inherit; }
.as-archive-intro { color: var(--as-muted); max-width: 720px; }

/* ---------- catalog cards from the query loop ---------- */
.as-qcards .wp-block-post { list-style: none; }
.as-qcard { position: relative; height: 100%; }
.as-qcard .wp-block-post-featured-image { margin: 0 0 .75rem; overflow: hidden; border-radius: var(--as-radius); }
.as-qcard .wp-block-post-featured-image img { transition: transform .5s ease; }
.as-qcard:hover .wp-block-post-featured-image img { transform: scale(1.06); }
.as-qcard .wp-block-post-title { font-size: 1rem; margin: 0; }
.as-qcard .wp-block-post-title a { color: var(--wp--preset--color--ink); text-decoration: none; }
.as-qcard .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; }
.as-qcard .asfar-field--price_full, .as-qcard .asfar-field--price { font-weight: 700; white-space: nowrap; }
.as-qcard .asfar-field--location, .as-qcard .asfar-field--city, .as-qcard .asfar-field--duration, .as-qcard .asfar-field--vehicle, .as-qcard .asfar-field--passengers { color: var(--as-muted); font-size: .85rem; }
.as-qcard .asfar-field--stars { color: #b45309; font-size: .85rem; }
@media (prefers-reduced-motion: reduce) { .as-qcard .wp-block-post-featured-image img { transition: none; } }

/* ---------- catalog detail ---------- */
.as-detail-hero h1 { text-shadow: 0 2px 18px rgba(0, 0, 0, .25); }
.as-detail-hero .asfar-field--stars { color: var(--wp--preset--color--gold); background: rgba(255, 255, 255, .95); display: inline-block; padding: .15rem .7rem; border-radius: 999px; font-size: .85rem; }
.as-detail-content { line-height: 1.9; }

/* ---------- content pages ---------- */
.as-stats { text-align: center; }
.as-stats .wp-block-group { background: var(--wp--preset--color--soft); border-radius: var(--as-radius); padding: 1.25rem; }
.as-stats strong, .as-stats .as-stat-number { display: block; font-size: 1.9rem; font-weight: 800; color: var(--as-primary); line-height: 1.2; margin: 0; }
.as-stats p { margin: 0; color: var(--as-muted); font-size: .92rem; }
.as-cta-band { border-radius: calc(var(--as-radius) * 1.5); }
.as-cta-band p { color: rgba(255, 255, 255, .88); }
.as-legal { max-width: 860px; }
.as-legal h2 { font-size: 1.2rem; font-weight: 700; margin: 2rem 0 .75rem; }
.as-contact-item { gap: 1rem; }
.as-contact-item figure { flex: 0 0 auto; margin: 0 !important; }
.as-contact-item img { width: 36px; height: 36px; }
.as-contact-item h3 { font-size: 1rem; margin: 0 0 .2rem; }
.as-contact-item p { margin: 0; }
.as-contact-item + .as-map, .wp-block-column > .as-map { margin-top: 1.5rem; width: 100%; overflow: hidden; border-radius: var(--as-radius); }
.as-map iframe { border: 0; width: 100%; height: 300px; border-radius: var(--as-radius); display: block; }

/* ---------- blog ---------- */
.as-post-meta { color: var(--as-muted); font-size: .9rem; }
.wp-block-query-pagination { margin-top: var(--wp--preset--spacing--40); }
.wp-block-comments input:not([type=submit]):not([type=checkbox]), .wp-block-comments textarea { border: 1px solid var(--as-line); border-radius: var(--as-radius-sm); padding: .6rem .75rem; width: 100%; }

/* Pagination: big enough to tap on phones. */
.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0 .5rem; border-radius: 8px; }
.wp-block-query-pagination .page-numbers.current { background: var(--wp--preset--color--primary); color: #fff; }

/* ---------- Vehicle page: product sheet (photo + summary) ---------- */
.as-vehicle-top { background: linear-gradient(180deg, var(--wp--preset--color--soft, #f3f8fd) 0%, #fff 100%); }
.as-vehicle-head { align-items: flex-start; }
.as-vehicle-summary .as-vehicle-type + .as-vehicle-title { margin-top: -.4rem; }
/* The photos of the vehicles are cut-outs on white: shown whole, never cropped. */
.as-vehicle-photo .as-mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto; grid-auto-rows: 72px; }
.as-vehicle-photo .as-mosaic-item, .as-vehicle-photo .as-mosaic-item:nth-child(2), .as-vehicle-photo .as-mosaic-item:nth-child(3) { grid-column: auto; grid-row: auto; background: #fff; border: 1px solid var(--wp--preset--color--line, #e6edf5); }
.as-vehicle-photo .as-mosaic .as-mosaic-item.is-main { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 3 / 2; border: 0; border-radius: 16px; box-shadow: 0 10px 30px rgba(11, 43, 92, .08); }
.as-vehicle-photo .as-mosaic-item img { object-fit: contain; padding: 2%; box-sizing: border-box; }
/* The photos keep a white margin around the vehicle: the main one is enlarged inside its frame. */
.as-vehicle-photo .as-mosaic-item.is-main img, .as-vehicle-photo .as-mosaic-item.is-main:hover img { transform: scale(1.3); }
.as-vehicle-photo .as-mosaic-item:hover img { transform: none; }
.as-vehicle-summary > * { margin-block: 0; }
.as-vehicle-summary { display: flex; flex-direction: column; gap: .9rem; }
.as-vehicle-title { font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.15; }
.as-vehicle-place { color: var(--wp--preset--color--muted, #5b6472); display: flex; align-items: center; gap: .35rem; }
.as-vehicle-place::before { content: ""; inline-size: 16px; block-size: 16px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat; }
.as-vehicle-price { font-size: 1.6rem; font-weight: 700; color: var(--wp--preset--color--primary); padding-block: .35rem; border-block: 1px solid var(--wp--preset--color--line, #e3e6ea); }
.as-vehicle-specs { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.as-vehicle-specs .as-fact { min-width: 0; background: #fff; }
.as-vehicle-features .as-section-title { font-size: 1rem; margin: 0 0 .5rem; }
.as-vehicle-features ul { display: flex; flex-wrap: wrap; gap: .5rem; }
.as-vehicle-features li { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .8rem; border-radius: 999px; background: var(--wp--preset--color--soft, #f3f8fd); border: 1px solid var(--wp--preset--color--line, #e6edf5); font-size: .9rem; }
.as-vehicle-cta .wp-block-button__link { padding-block: .85rem; font-size: 1.05rem; }
@media (max-width: 781px) {
	.as-vehicle-head { gap: 1.25rem !important; }
	.as-vehicle-title { font-size: 1.7rem; }
	.as-vehicle-price { font-size: 1.35rem; }
}
/* Description of the vehicle, between the summary and the booking form. */
.as-vehicle-description > * { max-width: 860px; }
.as-vehicle-description > :first-child { margin-top: 0; }
.as-vehicle-description > :last-child { margin-bottom: 0; }
/* The "Book this vehicle" button scrolls smoothly to the form, which stays clear of the sticky header. */
html:has(.as-vehicle-page) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(.as-vehicle-page) { scroll-behavior: auto; } }
.as-vehicle-page #booking-request { scroll-margin-top: 110px; }
/* Transfers: photos of the coaches fill their frame (not cut-outs on white): shown whole, not enlarged. */
.as-transfer-page .as-vehicle-photo .as-mosaic-item.is-main img, .as-transfer-page .as-vehicle-photo .as-mosaic-item.is-main:hover img { transform: none; padding: 0; }
/* Home, transfers section: the van is a cut-out on white, shown whole in a white card. */
.as-transfer-photo img { background: #fff; border-radius: 16px; box-shadow: 0 10px 30px rgba(11, 43, 92, .08); }