/* ==========================================================================
   wp.css — WordPress-scoped glue
   --------------------------------------------------------------------------
   assets/css/main.css is a verbatim copy of the static project's compiled
   Tailwind output and is treated as a FROZEN artefact. Nothing in this file
   changes the design; every rule here exists because WordPress adds markup or
   chrome that the static pages never had.

   Loaded after main.css so these rules win on equal specificity.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Admin bar
   The static header is position:fixed at top:0 with no admin bar above it.
   -------------------------------------------------------------------------- */
body.has-admin-bar #site-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.has-admin-bar #site-header {
    top: 46px;
  }
}

/* The mobile call bar is fixed to the bottom of the viewport. The admin bar
   moves down on small screens, so the bar needs matching padding or the last
   line of content sits under it. */
@media screen and (max-width: 782px) {
  body.has-admin-bar .fab-bar {
    bottom: 46px;
  }
}

/* --------------------------------------------------------------------------
   2. Reveal start state
   main.css gates its hidden state on `.js .reveal`. header.php adds the `js`
   class server-side as a belt-and-braces measure, so if the inline head guard
   is ever blocked the page still shows content rather than a blank screen.
   -------------------------------------------------------------------------- */
html:not(.js) .reveal {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* --------------------------------------------------------------------------
   3. Section containment, re-expressed by class
   main.css gates its content-visibility optimisation on the structural
   selector `main > section:not(#hero)`. WordPress wrappers, a page builder, or
   a nested container all invalidate that, so the optimisation is restated
   against a class the templates put on every section.

   `.kw-section` is added by the template parts in template-parts/home/.
   It is opt-in, so it only ever applies to sections this theme rendered.
   -------------------------------------------------------------------------- */
.kw-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

/* Elementor measures the real height of its own sections — for sticky
   positioning, for scroll offsets and for its own entrance animations — so an
   ancestor that skips rendering changes those measurements. The optimisation is
   switched off inside a document Elementor built, and only there. */
body.elementor-page .kw-section,
body[class*="elementor-page"] .kw-section,
body.elementor-10 .kw-section {
  content-visibility: visible;
  contain-intrinsic-size: none;
}

/* An in-page anchor target must always be measurable, or the jump lands wrong. */
.kw-section:target {
  content-visibility: visible;
}

/* The hero is above the fold; skipping its rendering would only delay LCP. */
#hero,
#hero.kw-section {
  content-visibility: visible;
}

/* --------------------------------------------------------------------------
   4. Editorial content
   The static pages were entirely hand-authored markup. Posts and pages come
   from the database, so the same Arabic typography is applied to the content
   wrapper instead of being left to a browser default.
   -------------------------------------------------------------------------- */
.kw-prose {
  max-width: 68ch;
  color: var(--muted-foreground);
  font-size: 1.0625rem;
  line-height: 2;
}

.kw-prose > * + * {
  margin-top: 1.35em;
}

.kw-prose h2 {
  color: var(--foreground);
  font-size: 1.5rem;
  line-height: 1.45;
  font-weight: 900;
  margin-top: 2.4em;
  padding-top: 1.5rem;
  position: relative;
  /* Clears the fixed header when a heading is the target of an in-page link. */
  scroll-margin-top: 6.5rem;
}

.kw-prose h2::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 3rem;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(to left, var(--primary), transparent);
}

.kw-prose h3 {
  color: var(--foreground);
  font-size: 1.1875rem;
  font-weight: 800;
  margin-top: 2em;
  scroll-margin-top: 6.5rem;
}

.kw-prose strong {
  color: var(--foreground);
  font-weight: 800;
}

.kw-prose a {
  color: var(--primary);
  font-weight: 700;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}

.kw-prose ul,
.kw-prose ol {
  display: flex;
  flex-direction: column;
  gap: 0.85em;
  padding-inline-start: 0;
  list-style: none;
}

.kw-prose li {
  position: relative;
  padding-right: 1.85rem;
}

.kw-prose li::before {
  content: "";
  position: absolute;
  top: 0.85em;
  right: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent);
}

.kw-prose blockquote {
  border-right: 3px solid var(--primary);
  padding-right: 1.25rem;
  color: var(--foreground);
  font-weight: 600;
}

.kw-prose img {
  border-radius: calc(var(--radius) * 1.4);
  height: auto;
  max-width: 100%;
}

.kw-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.kw-prose th,
.kw-prose td {
  border: 1px solid var(--border);
  padding: 0.75rem 1rem;
  text-align: start;
}

.kw-prose th {
  color: var(--foreground);
  font-weight: 900;
  background: var(--muted);
}

/* WordPress aligns a centred caption image by adding a float; the article grid
   wants it back in flow. */
.kw-prose .aligncenter {
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   5. Screen-reader text
   main.css has no .sr-only because none of the static pages needed one. The
   database content here does — comments, pagination and skip links all use it.
   -------------------------------------------------------------------------- */
.kw-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   6. Comments
   Not present in the static design. Kept deliberately plain, and only styled
   when comments are actually enabled.
   -------------------------------------------------------------------------- */
.kw-comments {
  max-width: 68ch;
  margin-inline: auto;
  color: var(--muted-foreground);
}

.kw-comments .comment-body {
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) * 1.4);
  padding: 1.25rem;
  margin-bottom: 1rem;
  color: var(--foreground);
}

.kw-comments a {
  color: var(--primary);
}

/* --------------------------------------------------------------------------
   7. Pagination
   The static blog listing rendered every article on one page and never
   paginated. WordPress archives do, so the pager needs to match the design
   rather than fall back to a bare list of numbers.
   -------------------------------------------------------------------------- */
.kw-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 3rem;
}

.kw-pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 2.75rem;
  height: 2.75rem;
  padding-inline: 0.75rem;
  border-radius: calc(var(--radius) * 0.8);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted-foreground);
  font-weight: 800;
  font-size: 0.875rem;
  transition: all 0.25s;
}

.kw-pagination .page-numbers:hover,
.kw-pagination .page-numbers:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 45%, transparent);
  color: var(--primary);
}

.kw-pagination .page-numbers.current {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}

.kw-pagination .page-numbers.dots {
  border-color: transparent;
  background: none;
}

/* --------------------------------------------------------------------------
   8. Search form
   The static site shipped no search at all. This is the minimum needed for the
   block editor and for wp_search_form, styled to match.
   -------------------------------------------------------------------------- */
.kw-search {
  display: flex;
  gap: 0.5rem;
  max-width: 34rem;
}

.kw-search input[type="search"] {
  flex: 1;
  padding: 0.75rem 1rem;
  border-radius: calc(var(--radius) * 0.8);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  font-weight: 700;
}

.kw-search button {
  padding: 0.75rem 1.5rem;
  border-radius: calc(var(--radius) * 0.8);
  background: var(--primary);
  color: var(--primary-foreground);
  font-weight: 900;
  cursor: pointer;
  transition: background 0.25s;
}

.kw-search button:hover {
  background: color-mix(in srgb, var(--primary) 85%, black);
}

/* --------------------------------------------------------------------------
   9. Skip link
   header.php uses the static site's own utilities for this: sr-only plus
   focus:not-sr-only and focus:top-4. All three are present in main.css, so the
   link keeps the exact behaviour it had in the static build. The one thing
   WordPress adds is the admin bar, which focus:top-4 would sit underneath.
   -------------------------------------------------------------------------- */
body.has-admin-bar .sr-only:focus {
  top: calc(1rem + 32px);
}

@media screen and (max-width: 782px) {
  body.has-admin-bar .sr-only:focus {
    top: calc(1rem + 46px);
  }
}

/* --------------------------------------------------------------------------
   10. Print
   main.css already hides header, footer, .no-print and .fab-bar. WordPress
   adds the admin bar and the comment form, both of which should go too.
   -------------------------------------------------------------------------- */
@media print {
  #wpadminbar,
  .kw-comments,
  .kw-pagination,
  .kw-search,
  #respond {
    display: none !important;
  }

  body.has-admin-bar #site-header {
    top: 0;
  }
}

/* --------------------------------------------------------------------------
   4b. Elementor documents
   The theme's prose typography is withdrawn by inc/elementor.php so Elementor's own
   styles are not overridden. These two rules undo only what the <body> still imposes,
   so an Elementor document starts from the same neutral ground a block theme would
   give it rather than from the theme's reading measure.
   -------------------------------------------------------------------------- */
.kw-elementor-content {
  max-width: none;
}
.kw-elementor-content > * + * {
  margin-top: revert;
}

/* --------------------------------------------------------------------------
   6. Page-builder documents inside the article grid
   --------------------------------------------------------------------------
   The article body sits in a twelve-column grid, the body at eight columns and a
   sticky sidebar at four — the static build's arrangement, and the reason the
   sidebar is where it is. A document built in a page builder does not know about
   that grid: its sections are sized against the viewport and its full-width rows
   pull to the edge of their container, which here is two thirds of the page.

   So on a builder document the body cell stops being a column and spans the grid.
   The sidebar stays exactly where it was — the call panel and the table of contents
   belong to the article whatever built it — and the article keeps its shape.

   .kw-elementor-content is added by inc/elementor.php to a singular document that a
   builder produced, so this needs no builder-specific selector here.
   -------------------------------------------------------------------------- */
.kw-article-grid:has(.kw-elementor-content) > .kw-article-body {
  grid-column: 1 / -1;
  max-width: none;
}

/* A grid cell cannot be escaped without taking the sibling with it, so the
   sidebar follows the body to the next row rather than overlapping it. */
@media (min-width: 1024px) {
  .kw-article-grid:has(.kw-elementor-content) > .kw-article-sidebar {
    grid-column: 1 / -1;
    position: static;
  }
}

/* --------------------------------------------------------------------------
   11. Page-builder documents and the fixed header
   --------------------------------------------------------------------------
   The theme's header is position: fixed. Every theme template clears it with its own
   top padding on its own first section, which is exactly what the static build did on
   each of its twenty hand-written pages.

   A page built in a page builder has no such section, so its first one starts at the
   top of the document — which is where the fixed header is. Without an offset the top
   of that content is permanently hidden.

   --kw-header-h is measured in inc/head-guard.php, because the header has no height of
   its own: it derives from its content, and nav.js shrinks it on scroll. The fallback
   below covers the moment before that measurement lands and the case where scripting
   is unavailable.

   Scoped to one body class, on one element, setting padding and nothing else. No width
   is imposed, no margin is applied to Elementor's sections, containers or widgets, and
   nothing inside the document is hidden or constrained. A design that wants its first
   section to run *under* the header — a translucent full-bleed hero — turns the offset
   off:

       add_filter( 'alwaleed_taxi_elementor_header_offset', '__return_false' );

   or drops the theme's chrome entirely with the Canvas page template.
   -------------------------------------------------------------------------- */
body.kw-elementor-document .kw-elementor-content {
  padding-top: var(--kw-header-h, 7rem);
}

/* The offset belongs to the document, not to the front page's own <main>, so it
   applies identically to a page, a post built in the builder, and a front page built
   in the builder. */
body.kw-elementor-document #main > .kw-elementor-content:first-child {
  padding-top: var(--kw-header-h, 7rem);
}

/* --------------------------------------------------------------------------
   12. The fleet's search, and what the search hides

   The filter bar and the search box are two independent constraints over the same set of
   cards: a visitor who has picked a category and then typed expects both to hold. So the
   script hides the cards rather than removing them, and the browser does the work.

   [hidden] is enough on its own — the stylesheet in main.css already declares it — so the
   only job here is the search box's own geometry, which the compiled stylesheet has no
   opinion about because it was never in the static build.
   -------------------------------------------------------------------------- */

#fleet-gallery > [hidden] {
  display: none;
}

.kw-fleet-empty {
  margin: 2rem auto 0;
  padding: 2rem 1.5rem;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 1rem;
  background: var(--card);
  color: var(--muted-foreground);
  font-weight: 700;
}

.kw-fleet-empty[hidden] {
  display: none;
}

/* The search icon sits inside the field, so the field needs room for it. */
.kw-fleet-search-input::-webkit-search-cancel-button {
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .kw-fleet-search-input,
  .kw-fleet-empty {
    transition: none;
  }
}


/* --------------------------------------------------------------------------
   13. The comment form
   WordPress renders this, so nothing in main.css knows it exists. The inputs,
   the textarea, the field rows and the submit button are given the same card,
   border-radius, focus ring and amber accent as everything else on the site.

   The URL row is removed in PHP rather than hidden here, so there is nothing
   below for it.
   -------------------------------------------------------------------------- */

/* the form's own shell */
#respond {
	margin-top: 2.5rem;
}

#respond .comment-reply-title,
#respond h3 {
	font-size: 1.15rem;
	font-weight: 900;
	color: var(--foreground);
	margin: 0 0 1rem;
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

#respond .comment-reply-title::before,
#respond h3::before {
	content: "";
	display: block;
	width: 0.2rem;
	height: 1.2rem;
	border-radius: 999px;
	background: var(--primary);
}

/* the logged-in note, and the "you are commenting as" line */
#respond .logged-in-as,
#respond .comment-notes {
	font-size: 0.8rem;
	color: var(--muted-foreground);
	margin: 0 0 1rem;
}

#respond .logged-in-as a {
	color: var(--primary);
	font-weight: 700;
}

/* the fields: name and email side by side, one column on a phone */
#respond .kw-comment-field,
#respond p {
	margin: 0 0 0.9rem;
}

#respond form p {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

#respond label {
	font-size: 0.8rem;
	font-weight: 800;
	color: var(--foreground);
}

/* the inputs */
.kw-input {
	width: 100%;
	padding: 0.7rem 0.9rem;
	font-family: inherit;
	font-size: 0.9rem;
	color: var(--foreground);
	background: var(--background);
	border: 1px solid var(--border);
	border-radius: 0.8rem;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.kw-input::placeholder {
	color: color-mix(in srgb, var(--muted-foreground) 80%, transparent);
}

.kw-input:focus {
	outline: none;
	border-color: color-mix(in srgb, var(--primary) 60%, transparent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
}

.kw-input[aria-invalid="true"] {
	border-color: rgb(244 63 94 / 0.7);
}

/* a number/email field reads left-to-right even on an Arabic page */
.kw-input[type="email"],
.kw-input[type="url"],
.kw-input[type="tel"] {
	direction: ltr;
	text-align: start;
}

.kw-textarea {
	resize: vertical;
	min-height: 7rem;
	line-height: 1.75;
}

/* the two short fields, side by side from a phone-width up */
@media screen and (min-width: 480px) {
	#respond form p:has(.kw-input[type="text"]) {
		display: inline-grid;
		width: calc(50% - 0.45rem);
		vertical-align: top;
	}

	#respond form p:has(.kw-input[type="email"]) {
		display: inline-grid;
		width: calc(50% - 0.45rem);
		margin-inline-start: 0.9rem;
		vertical-align: top;
	}

	#respond form p:has(.kw-textarea),
	#respond form p:has(.form-allowed-tags) {
		display: flex;
	}
}

/* the submit button */
#respond .form-submit {
	margin: 1.2rem 0 0;
}

#respond .submit,
#respond input[type="submit"] {
	font-family: inherit;
	border: 0;
	cursor: pointer;
}

/* the note about which HTML is allowed */
#respond .form-allowed-tags {
	font-size: 0.72rem;
	line-height: 1.6;
	color: var(--muted-foreground);
}

#respond .form-allowed-tags code {
	font-size: 0.68rem;
	direction: ltr;
	display: inline-block;
}

/* a comment awaiting moderation */
.kw-comments .comment-awaiting-moderation {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 800;
	color: #b45309;
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-radius: 0.4rem;
	padding: 0.1rem 0.45rem;
	margin-inline-start: 0.4rem;
}

@media (prefers-color-scheme: dark) {
	.kw-comments .comment-awaiting-moderation {
		color: #fcd34d;
		background: #27201a;
		border-color: #574527;
	}
}

/* the comment list, matching the form */
.kw-comments .comment-body {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 1rem;
	padding: 1.1rem 1.25rem;
	margin: 0 0 0.9rem;
}

.kw-comments .comment-author {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.85rem;
	font-weight: 800;
	color: var(--foreground);
}

.kw-comments .comment-author .avatar {
	border-radius: 999px;
	border: 1px solid var(--border);
}

.kw-comments .comment-metadata {
	font-size: 0.72rem;
	color: var(--muted-foreground);
	margin: 0.15rem 0 0.6rem;
}

.kw-comments .comment-metadata a {
	color: inherit;
}

.kw-comments .comment-content {
	font-size: 0.88rem;
	line-height: 1.75;
	color: var(--foreground);
}

.kw-comments .comment-content p {
	margin: 0 0 0.5rem;
}

.kw-comments .reply {
	margin-top: 0.5rem;
	font-size: 0.75rem;
	font-weight: 800;
}

.kw-comments .comment-reply-link {
	color: var(--primary);
}

/* a nested reply, indented only where there is room */
.kw-comments .children {
	list-style: none;
	padding-inline-start: 1.25rem;
	margin: 0;
	border-inline-start: 1px solid var(--border);
}

@media screen and (min-width: 768px) {
	.kw-comments .children {
		padding-inline-start: 2.25rem;
	}
}


/* --------------------------------------------------------------------------
   14. The map's box
   The heights step with the column, because a short frame in a wide column
   turns the map into a letterbox strip and a tall one on a phone pushes the
   rest of the page down. main.css has no sm:h-* or lg:h-*, so these live here
   rather than as classes that would never apply.
   -------------------------------------------------------------------------- */

.kw-map-frame {
	display: block;
	width: 100%;
	height: 380px;
	border: 0;
}

@media screen and (min-width: 640px) {
	.kw-map-frame {
		height: 460px;
	}
}

@media screen and (min-width: 1024px) {
	.kw-map-frame {
		height: 600px;
	}
}

/* RTL: the map's own controls are positioned for a left-to-right canvas, and
   Google's dark-theme filter inverts them with everything else. The frame keeps
   its direction explicit so the attribution text is not mirrored. */
.map-frame {
	direction: ltr;
}




/* --------------------------------------------------------------------------
   15. The light mode
   --------------------------------------------------------------------------

   The palette itself is in main.css: :root for light, .dark for dark, so anything
   written with the theme's own classes — text-foreground, bg-card, border-border —
   already follows the switch.

   What does not follow it is the static design's legacy. The homepage was drawn
   against a dark canvas, so ninety-odd places in the templates name a colour
   outright — text-white, bg-slate-950, bg-white/5, border-white/10, text-slate-400.
   On a light canvas those become white-on-white, dark bands that refuse to lighten,
   and text too pale to read.

   Editing ninety call sites is the wrong fix. It would fork the markup from the
   original design and make the next section someone adds one more thing to get
   right. The overrides live here instead, scoped to the containers that are
   theme-aware, and vanish the moment the .dark class is back.

   THE SCOPE IS THE POINT. Three things must stay dark whatever the canvas does,
   and each is therefore absent from every rule below:

     the footer    bg-slate-950 with text-white in both modes — a deliberate dark
                   band at the foot of the page, exactly as the static site had it.
     the drawer    the mobile menu, same reason, and dark against a light page is
                   fine because it floats over a dimming backdrop.
     photographs  the hero, the closing call to action, and the car cards. Their
                   white text is white against the image, not against the
                   background, and would vanish if the canvas changed under it.

   Everything here is html:not(.dark), so it applies only when the visitor has
   asked for light.
   -------------------------------------------------------------------------- */

/*
 * 15a. The amber accent, made readable.
 *
 * --primary is #c2740a on a light canvas, which is 3.3:1 against the page
 * background — passing for large text, failing for the 12–14px chips, labels and
 * links that use it. The same is true of text-amber-500, which the compiled
 * stylesheet resolves to a bright #f8b233 that barely registers on white.
 *
 * Both are darkened here rather than in main.css, which is frozen. Everything that
 * draws a button with them keeps working, because white on a darker amber is a
 * wider contrast than it was, not a narrower one.
 * Scoped to the theme-aware sections, because a page header is a dark band of its
 * own — bg-slate-950 with text-white — and the amber on it is bright amber on
 * dark, which already works and would break if this reached it.
 */
html:not(.dark) {
	--primary: #8a5005;
	--ring: #8a5005;
}

html:not(.dark) #site-header .text-amber-500,
html:not(.dark) #coverage .text-amber-500,
html:not(.dark) #fleet .text-amber-500,
html:not(.dark) #services .text-amber-500,
html:not(.dark) #how-to-book .text-amber-500,
html:not(.dark) #why .text-amber-500,
html:not(.dark) #stats .text-amber-500,
html:not(.dark) #testimonials-section .text-amber-500,
html:not(.dark) #faq .text-amber-500,
html:not(.dark) #areas .text-amber-500,
html:not(.dark) #map .text-amber-500,
html:not(.dark) #compare .text-amber-500,
html:not(.dark) #articles .text-amber-500,
html:not(.dark) .kw-prose .text-amber-500,
html:not(.dark) #atr-modal .text-amber-500,
html:not(.dark) .search-form .text-amber-500 {
	color: #8a5005;
}

/*
 * 15b. Named text colours become the theme's own.
 *
 * White text stays readable — it inherits the ink colour of whichever mode is on —
 * instead of turning white-on-white. The pale greys the design used for supporting
 * copy go to --muted-foreground, which is #5b6a84 on this canvas and passes.
 */
html:not(.dark) #site-header .text-white,
html:not(.dark) #coverage .text-white,
html:not(.dark) #fleet .text-white,
html:not(.dark) #services .text-white,
html:not(.dark) #how-to-book .text-white,
html:not(.dark) #why .text-white,
html:not(.dark) #stats .text-white,
html:not(.dark) #testimonials-section .text-white,
html:not(.dark) #faq .text-white,
html:not(.dark) #areas .text-white,
html:not(.dark) #map .text-white,
html:not(.dark) #compare .text-white,
html:not(.dark) #articles .text-white,
html:not(.dark) .kw-prose .text-white,
html:not(.dark) #atr-modal .text-white,
html:not(.dark) #commentform .text-white {
	color: var(--foreground);
}

html:not(.dark) #site-header .text-slate-200,
html:not(.dark) #site-header .text-slate-300,
html:not(.dark) #coverage .text-slate-200,
html:not(.dark) #coverage .text-slate-300,
html:not(.dark) #fleet .text-slate-200,
html:not(.dark) #fleet .text-slate-300,
html:not(.dark) #services .text-slate-300,
html:not(.dark) #services .text-slate-400,
html:not(.dark) #how-to-book .text-slate-300,
html:not(.dark) #how-to-book .text-slate-400,
html:not(.dark) #why .text-slate-300,
html:not(.dark) #why .text-slate-400,
html:not(.dark) #stats .text-slate-300,
html:not(.dark) #stats .text-slate-400,
html:not(.dark) #testimonials-section .text-slate-300,
html:not(.dark) #testimonials-section .text-slate-400,
html:not(.dark) #faq .text-slate-300,
html:not(.dark) #faq .text-slate-400,
html:not(.dark) #areas .text-slate-300,
html:not(.dark) #areas .text-slate-400,
html:not(.dark) #map .text-slate-300,
html:not(.dark) #map .text-slate-400,
html:not(.dark) #compare .text-slate-300,
html:not(.dark) #compare .text-slate-400,
html:not(.dark) #articles .text-slate-300,
html:not(.dark) #articles .text-slate-400,
html:not(.dark) .kw-prose .text-slate-300,
html:not(.dark) #atr-modal .text-slate-300,
html:not(.dark) #atr-modal .text-slate-400,
html:not(.dark) #commentform .text-slate-300 {
	color: var(--muted-foreground);
}

/* Anything that inherits rather than naming a colour follows the same ink. */
html:not(.dark) #site-header,
html:not(.dark) #coverage,
html:not(.dark) #fleet,
html:not(.dark) #services,
html:not(.dark) #how-to-book,
html:not(.dark) #why,
html:not(.dark) #stats,
html:not(.dark) #testimonials-section,
html:not(.dark) #faq,
html:not(.dark) #areas,
html:not(.dark) #map,
html:not(.dark) #compare,
html:not(.dark) #articles,
html:not(.dark) .kw-prose,
html:not(.dark) #atr-modal,
html:not(.dark) .search-form {
	color: var(--foreground);
}

/*
 * 15c. Section bands that were named outright.
 *
 * #fleet carried bg-slate-900/40 — a dark grey wash that stayed dark on a light
 * canvas. It becomes the same light grey the rest of the page uses, and the car
 * cards on top of it keep their own dark look because they sit over photographs.
 */
html:not(.dark) #fleet {
	background-color: color-mix(in srgb, var(--secondary) 28%, transparent);
}

html:not(.dark) #coverage {
	background-color: color-mix(in srgb, var(--secondary) 50%, transparent);
}

html:not(.dark) #map {
	background-color: color-mix(in srgb, var(--secondary) 24%, transparent);
}

/*
 * 15d. Translucent white surfaces.
 *
 * On dark these read as "a little lighter than the background". On light they
 * become a very faint white — barely visible. They become a faint ink instead,
 * which is the same amount of contrast in the opposite direction.
 */
html:not(.dark) #site-header .bg-white\/5,
html:not(.dark) #fleet .bg-white\/5,
html:not(.dark) #services .bg-white\/5,
html:not(.dark) #how-to-book .bg-white\/5,
html:not(.dark) #why .bg-white\/5,
html:not(.dark) #stats .bg-white\/5,
html:not(.dark) #testimonials-section .bg-white\/5,
html:not(.dark) #faq .bg-white\/5,
html:not(.dark) #areas .bg-white\/5,
html:not(.dark) #map .bg-white\/5,
html:not(.dark) #compare .bg-white\/5,
html:not(.dark) #articles .bg-white\/5,
html:not(.dark) #atr-modal .bg-white\/5 {
	background-color: color-mix(in srgb, var(--foreground) 5%, transparent);
}

html:not(.dark) #site-header .bg-white\/10,
html:not(.dark) #fleet .bg-white\/10 {
	background-color: color-mix(in srgb, var(--foreground) 8%, transparent);
}

html:not(.dark) #site-header .bg-white\/40 {
	background-color: color-mix(in srgb, var(--foreground) 30%, transparent);
}

/*
 * 15e. Translucent white borders.
 *
 * A 10% white border on a light canvas is invisible. --border is the page's own
 * hairline, #e2e7f0, and is what these become.
 */
html:not(.dark) #site-header .border-white\/10,
html:not(.dark) #fleet .border-white\/10,
html:not(.dark) #services .border-white\/10,
html:not(.dark) #how-to-book .border-white\/10,
html:not(.dark) #why .border-white\/10,
html:not(.dark) #stats .border-white\/10,
html:not(.dark) #testimonials-section .border-white\/10,
html:not(.dark) #faq .border-white\/10,
html:not(.dark) #areas .border-white\/10,
html:not(.dark) #map .border-white\/10,
html:not(.dark) #compare .border-white\/10,
html:not(.dark) #articles .border-white\/10 {
	border-color: var(--border);
}

html:not(.dark) #site-header .border-white\/15,
html:not(.dark) #site-header .border-white\/20 {
	border-color: var(--border);
}

/*
 * 15f. The header, which has to be a light surface.
 *
 * It is fixed and translucent, so it floats over whatever is beneath it. It was
 * built as a dark bar: bg-slate-950/82 at rest and /95 once scrolled. Left alone
 * on a light canvas it stays dark while everything under it lightens, which is the
 * "the header does not follow the mode" report — and its dark ink, which the text
 * rules above set, disappears into it.
 *
 * So the bar itself becomes light: the page's own background at rest, its card
 * surface once scrolled, with the blur it always had.
 */
html:not(.dark) #site-header {
	background-color: color-mix(in srgb, var(--background) 86%, transparent);
	border-bottom-color: var(--border);
	box-shadow: 0 1px 0 0 var(--border);
}

html:not(.dark) #site-header.is-scrolled {
	background-color: color-mix(in srgb, var(--card) 92%, transparent);
	border-bottom-color: var(--border);
	box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--foreground) 18%, transparent);
}

/* the burger sits on the bar, so it takes the page's own surface */
html:not(.dark) #site-header #nav-burger {
	background-color: var(--card);
	border-color: var(--border);
	color: var(--foreground);
}

html:not(.dark) #site-header [data-theme-toggle] {
	background-color: var(--card);
	border-color: var(--border);
	color: var(--primary);
}

/*
 * 15g. The marquee, which was washed out.
 *
 * The coverage band's area chips were bg-white/5 with text-slate-300 — a pale grey
 * on a pale grey, which is the "barely visible" report. They become the card
 * surface with real ink.
 */
html:not(.dark) #coverage .marquee-track span {
	background-color: var(--card);
	border-color: var(--border);
	color: var(--foreground);
}

/*
 * 15h. The testimonial button and modal, which float over the page.
 *
 * Both are drawn for a dark canvas. The modal becomes the page's own surface,
 * because it sits in the middle of a light screen and a dark hole in it reads as
 * a loading error.
 */
html:not(.dark) #atr-modal [data-atr-panel] {
	background-color: var(--card);
	border-color: var(--border);
}

html:not(.dark) #atr-modal .text-slate-200,
html:not(.dark) #atr-modal .text-slate-300,
html:not(.dark) #atr-modal .text-slate-400 {
	color: var(--muted-foreground);
}

/*
 * 15i. The comment form and search box, which inherit from the page.
 */
html:not(.dark) .search-form input[type="search"],
html:not(.dark) .search-form input[type="text"],
html:not(.dark) .search-form input[type="email"] {
	background-color: var(--card);
	border-color: var(--input);
	color: var(--foreground);
}

/*
 * The footer is deliberately the dark band at the foot of the page, in both modes —
 * site-footer.php is bg-slate-950 text-white. Nothing above touches it, so nothing
 * here has to either. A dark band on a light page is the design, not a defect.
 */


/*
 * 15k. The car card keeps its own light text, in both modes.
 *
 * Everything above flips a named colour to ink, because a light canvas is what the
 * mode changed. The car card is the one surface where that is wrong: its copy sits
 * on a photograph with a dark gradient laid over it, so white text is white against
 * the gradient, not against the page. Flipped to ink it becomes dark on dark, which
 * is the "the words are not visible, they go black in light mode" report.
 *
 * So the boundary is drawn here, by name. The values are the ones the compiled
 * stylesheet already gives these utilities — white and Tailwind's slate-200/300/400,
 * read off the rendered card rather than invented — so the card is identical to
 * itself in dark mode and only stops being flipped.
 *
 * Scoped to .kw-car-card rather than to a section, because the same card is used by
 * the homepage's fleet band and by the fleet page: a section selector would fix one
 * and miss the other.
 *
 * !important, and only in this block. The rules above select by element id and would
 * otherwise outrank these; a card that flipped back part-way is worse than one that
 * flipped at all. Nothing else in the file needs it.
 */
.kw-car-card .text-white {
	color: #fff !important;
}

.kw-car-card .text-slate-200 {
	color: #dbe1ec !important;
}

.kw-car-card .text-slate-300 {
	color: #bcc6d8 !important;
}

.kw-car-card .text-slate-400 {
	color: #8b99b3 !important;
}

/*
 * The hairline above the booking row is a 10% white border on that same gradient.
 * The light mode would turn it into a near-invisible #e2e7f0, so it is restored to
 * the translucent white it is drawn as.
 */
.kw-car-card .border-white\/10 {
	border-color: rgb(255 255 255 / 0.1) !important;
}


/* --------------------------------------------------------------------------
   16. Step and map gaps
   --------------------------------------------------------------------------

   Two spacing fixes, both 15px, both in this file rather than in the markup:
   main.css is the frozen Tailwind build and has no gap-[15px], so a utility
   class with that value would be a rule that never applies.

   The selectors carry the section id, so they outrank the gap-8 utility on
   specificity alone and do not depend on stylesheet order. Nothing else is
   touched: same tracks, same breakpoints, same cards — only the space between
   them narrows from 32px to 15px, on phones and desktops alike.
   -------------------------------------------------------------------------- */

/* the booking steps: 15px between the cards */
#how-to-book .kw-steps {
	gap: 15px;
}

/*
 * The step number, centred in its badge on both axes.
 *
 * The badge already carries place-items-center, which is correct for grid —
 * and the digit still sat high, because an Arabic-Indic numeral's ink does not
 * fill its em box the way a Latin one does. Flex with align-items:center and
 * justify-content:center plus line-height:1 puts the visible glyph, not the em
 * box, in the middle. Scoped to .kw-step-num so no other badge moves.
 */
#how-to-book .kw-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/* the map and the cards beside it: 15px instead of touching */
#map .kw-map-grid {
	gap: 15px;
}


/* --------------------------------------------------------------------------
   17. Pillars amber and fleet search
   --------------------------------------------------------------------------

   Two small fixes that share one cause: a class the frozen build does not
   contain, or a scope its rules do not cover. Both live here, in the
   WordPress-scoped stylesheet, because main.css is never hand-edited.
   -------------------------------------------------------------------------- */

/*
 * The pillars section's amber.
 *
 * Section 15a darkens text-amber-500 inside every theme-aware section, but the
 * pillars section was not in that list — it carried an empty id, so there was
 * nothing to scope to. It now has id="pillars", and its badge and card icons
 * follow the same readable amber as everywhere else.
 */
html:not(.dark) #pillars .text-amber-500 {
	color: #8a5005;
}

/*
 * The fleet search box.
 *
 * The input is written with ps-11 pe-4 and its icon with start-4, and none of
 * those three utilities exist in the compiled stylesheet — so the input had no
 * inline-start padding at all and its placeholder ran underneath the icon.
 * 1rem puts the icon where start-4 meant it, and 2.75rem of inline-start
 * padding is exactly what ps-11 meant for the text. Logical properties, so the
 * fix holds in RTL and would hold in LTR too.
 */
.kw-fleet-search span.absolute {
	inset-inline-start: 1rem;
}

.kw-fleet-search-input {
	padding-inline-start: 2.75rem;
	padding-inline-end: 1rem;
}


/* --------------------------------------------------------------------------
   18. The about page's intro photograph
   --------------------------------------------------------------------------

   The photograph fills its half of the box: a fixed height on a phone, the
   full stretched height of the text column on a desktop. Heights live here
   because main.css is frozen and has no h-64/lg:min-h pair to offer — a
   utility that does not exist is a rule that never applies.
   -------------------------------------------------------------------------- */
.kw-about-media {
	min-height: 16rem;
}

@media (min-width: 1024px) {
	.kw-about-media {
		min-height: 28rem;
	}
}


/* --------------------------------------------------------------------------
   19. Arabic heading rhythm
   --------------------------------------------------------------------------

   One consistent line-height scale for every heading, because the design was
   drawn with tight Latin leading — leading-tight, 1.1, 1.05 — and Arabic
   blackletter does not fit in those boxes: its marks sit above the ascenders
   and below the descenders, so a 1.05 line cuts the dots off the words. The
   hero's "taxis" heading showed exactly that: flat-topped glyphs.

   These are element rules on purpose. A utility class on any single heading
   would still win where it is written, so the tight utilities were removed
   from the h1s at the same time — this scale is now the single source, on
   phones and desktops alike, in both colour modes.
   -------------------------------------------------------------------------- */
h1 {
	line-height: 1.35;
}

/*
 * The hero's two lines carry text-6xl-style size utilities, and in the
 * compiled build those utilities set their own line-height of 1 — a direct
 * rule, which always beats the inherited 1.35 above. So the lines kept their
 * 1.0 box and the dots kept getting cut. This rule names the spans themselves
 * and outranks the utility, which is exactly the reported symptom.
 */
#hero h1 span {
	line-height: 1.35;
}

h2 {
	line-height: 1.45;
}

h3,
h4 {
	line-height: 1.6;
}


/* --------------------------------------------------------------------------
   20. Fleet search status
   --------------------------------------------------------------------------

   The line under the search box: a spinner plus "searching…" while the fleet
   search runs, the result count after. Self-contained here — a border spinner
   rather than a utility — because main.css is frozen and has no spinner to
   offer, and this must not depend on one appearing there.
   -------------------------------------------------------------------------- */
.kw-fleet-search-status {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.5rem;
	min-height: 1.25rem;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--muted-foreground);
}

.kw-fleet-search-status[hidden] {
	display: none;
}

.kw-spinner {
	flex: none;
	width: 1rem;
	height: 1rem;
	border-radius: 9999px;
	border: 2px solid var(--border);
	border-top-color: var(--primary);
	animation: kw-spin 0.7s linear infinite;
}

.kw-fleet-search-status.is-done .kw-spinner {
	display: none;
}

@keyframes kw-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.kw-spinner {
		animation: none;
		border-top-color: var(--border);
	}
}