/* Ansen — reset, typography and shared primitives. */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s-4));
  overflow-x: hidden;
  width: 100%;
  color-scheme: dark;
}

[data-theme="light"] {
  color-scheme: light;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  background: var(--ink);
  color: var(--text-1);
  min-height: 100vh;
  width: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--dur-3) var(--ease), color var(--dur-3) var(--ease);
}

html[dir="rtl"] body {
  font-family: var(--font-ar);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-head);
  color: var(--text-1);
  text-wrap: balance;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4 {
  font-family: var(--font-ar);
  letter-spacing: 0;
}

p { text-wrap: pretty; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; }

strong { font-weight: 600; }

/* Numerals line up in every data-ish display. */
.num,
.stat-item .num,
.ref,
.step-num,
.product-spec,
.factory-stat-value,
.client-sector,
.client-tag,
.view-all-count,
.service-row-num,
.hero-blueprint .bp-text,
.cal-day,
.chip-sub {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* ——— Focus: one rule for the whole site ——— */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

::selection {
  background: var(--accent);
  color: var(--on-accent);
}

/* ——— Layout ——— */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

main { display: block; }

section {
  padding-block: var(--section-pad);
  position: relative;
}

.section-alt {
  background: var(--ink-2);
  border-block: var(--hair) solid var(--line-faint);
}

.section-compact { padding-block: var(--section-pad-sm); }

/* ——— Section headings: index + title on the left, lede on the right ——— */
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  gap: var(--s-4) var(--s-7);
  align-items: end;
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-4);
  border-bottom: var(--hair) solid var(--line);
}

.section-title {
  font-size: var(--fs-h2);
  grid-column: 1;
  grid-row: 1;
}

.section-title-sm { font-size: var(--fs-h3); }

.section-sub {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  max-width: 26rem;
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  margin: 0;
}

.section-subtitle {
  font-size: var(--fs-h3);
  font-weight: 600;
  margin-bottom: var(--s-3);
}

/* Below this the 26rem lede column starves the title column to zero width and
   the two overlap, so the head has to stack. */
@media (max-width: 860px) {
  .section-head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .section-sub {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    max-width: none;
  }
}

/* Micro-label used above titles, stats and data rows. */
.kicker,
.hero-kicker {
  font-family: var(--font-display);
  font-size: var(--fs-kicker);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--tr-kicker);
  text-transform: uppercase;
  color: var(--accent-ink);
}

html[dir="rtl"] .kicker,
html[dir="rtl"] .hero-kicker {
  text-transform: none;
  letter-spacing: 0.06em;
}

.rule {
  height: var(--hair);
  background: var(--line);
  border: 0;
  margin-block: var(--s-5);
}

.muted { color: var(--text-3); }

/* ——— Buttons ——— */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.75rem 1.25rem;
  min-height: 44px;
  border-radius: var(--r-sm);
  border: var(--hair) solid transparent;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.1;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease),
              color var(--dur-2) var(--ease),
              transform var(--dur-2) var(--ease);
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
}

.btn-primary:hover { background: var(--accent-hover); }

.btn-secondary {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--text-1);
}

.btn-secondary:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.btn-ghost {
  background: transparent;
  color: var(--accent-ink);
  padding: var(--s-2) 0;
  min-height: 0;
  font-size: var(--fs-sm);
  border-radius: 0;
  position: relative;
}

.btn-ghost::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 2px;
  height: var(--hair);
  background: currentColor;
  opacity: 0.35;
  transition: opacity var(--dur-2) var(--ease);
}

.btn-ghost:hover::after { opacity: 0.9; }

.btn-whatsapp {
  background: var(--success-soft);
  border-color: var(--success-line);
  color: var(--success-ink);
}

.btn-whatsapp:hover { background: rgba(47, 191, 113, 0.2); }

.btn-lg { padding: 0.875rem 1.75rem; font-size: var(--fs-body); }
.btn-sm { padding: var(--s-2) 0.75rem; min-height: 36px; font-size: var(--fs-xs); }

.link-btn {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--text-3);
  font-size: var(--fs-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-strong);
  transition: color var(--dur-2) var(--ease);
}

.link-btn:hover { color: var(--accent-ink); }

/* Waiting is the one state a link button can be in without being broken: the
   resend control keeps its colour and its size, loses only the pointer, and
   says in its own label how long the wait is. Same --text-3 as the enabled
   button, so no new ink pair reaches the contrast harness. */
.link-btn:disabled,
.link-btn:disabled:hover {
  color: var(--text-3);
  cursor: not-allowed;
}

/* ——— Panels ——— */
.panel {
  background: var(--surface-1);
  border: var(--hair) solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-6);
}

.panel-emphasis {
  background: var(--surface-1);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-2);
  padding: clamp(var(--s-5), 3vw, var(--s-7));
}

/* ——— Forms ——— */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
}

.form-grid .full,
.full { grid-column: 1 / -1; }

.form-group {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.form-group label {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--s-2);
}

html[dir="rtl"] .form-group label {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-sm);
}

.form-control,
select.form-control,
textarea.form-control {
  width: 100%;
  padding: 0.7rem 0.85rem;
  min-height: 44px;
  border-radius: var(--r-sm);
  border: var(--hair) solid var(--line-strong);
  background: var(--field);
  color: var(--text-1);
  font: inherit;
  font-size: var(--fs-body);
  transition: border-color var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease);
}

textarea.form-control {
  min-height: 108px;
  resize: vertical;
  line-height: var(--lh-body);
}

.form-control::placeholder { color: var(--text-3); opacity: 0.75; }

.form-control:hover { border-color: var(--text-3); }

.form-control:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* A phone number, an email address and a reference code are Latin by nature;
   typing them inside an RTL form should not reorder what is on the screen. */
input#id_phone,
input#id_email,
input#id_reference {
  direction: ltr;
  text-align: start;
}

/* One column on a phone: a half column at 390px is ~155px, which fits neither
   a chip row nor a date readout. */
@media (max-width: 620px) {
  .form-grid { grid-template-columns: minmax(0, 1fr); }
}

select.form-control {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-inline-end: 2.25rem;
}

html[dir="rtl"] select.form-control {
  background-position: 18px calc(50% + 1px), 13px calc(50% + 1px);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}

.errorlist {
  list-style: none;
  color: var(--danger-ink);
  font-size: var(--fs-xs);
  margin-top: var(--s-2);
}

.alert {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  border: var(--hair) solid var(--line);
  margin-bottom: var(--s-4);
  font-size: var(--fs-sm);
}

.alert-success {
  background: var(--success-soft);
  border-color: var(--success-line);
  color: var(--success-ink);
}

.alert-error {
  background: var(--danger-soft);
  border-color: var(--danger-line);
  color: var(--danger-ink);
}

/* ——— Enhanced form controls ———
   The booking form layers chips, a calendar and a material listbox over the
   native <select>/<input> it already renders, and only CSS decides which one
   you see: without the `js` class the enhancements stay hidden and the native
   control does the work, so one template serves both. The carriers stay in the
   DOM either way, which is what makes the value post, the ?product= prefill
   land and the form survive a browser without scripting. Behaviour lives in
   static/js/booking-fields.js. */
.enhanced { display: none; }
.js .enhanced { display: flex; }
.js .has-enhanced > select,
.js .has-enhanced > input[type="date"] { display: none; }

/* Built on open, parked on <body> with fixed coordinates and removed from the
   document when closed — any ancestor with overflow would clip the calendar.
   Above the 100 mobile sheet: this layer must never sit behind page chrome.
   Opaque --surface-1, not the glass: a blur is invisible to a contrast check
   and legibility should not depend on what is behind it. */
.field-pop {
  position: fixed;
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3);
  background: var(--surface-1);
  border: var(--hair) solid var(--line-strong);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-2);
}

/* Field geometry, so a trigger reads as one control family with the inputs
   beside it — but deliberately not .form-control, whose :focus rule zeroes the
   outline and every tab stop here has to keep a visible one. */
.field-trigger {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  min-height: 44px;
  padding: 0.7rem 0.85rem;
  background: var(--field);
  border: var(--hair) solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  text-align: start;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease);
}

.field-trigger:hover { border-color: var(--text-3); }
.field-trigger[aria-expanded="true"] { border-color: var(--accent); }

.trigger-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.trigger-icon { display: flex; flex: none; }
.trigger-icon svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  color: var(--text-3);
}

/* ---- Segmented chips ---- */
.field-chips { flex-wrap: wrap; gap: var(--s-2); }

.chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-height: 44px;
  padding: 0.45rem 0.9rem;
  background: transparent;
  border: var(--hair) solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--text-3);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}

.chip:hover { color: var(--text-1); border-color: var(--text-3); }

/* The site's selected language — a tinted plate, never a solid --accent fill. */
.chip[aria-checked="true"] {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-ink);
}

.chip-sub {
  font-size: var(--fs-xs);
  opacity: 0.8;
}

/* ---- Calendar ---- */
.cal {
  /* Wider than the form column on a phone, which is why the panel lives on
     <body>: 21rem keeps every day cell at a 44px-class tap target. */
  inline-size: min(21rem, calc(100vw - 1rem));
  /* The weekday matrix stays LTR in Arabic — a 7-column grid of numbers is
     direction-neutral, and Saturday-first would put both أحد and أربعاء under
     أ. Only the labels translate. */
  direction: ltr;
}

.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}

.cal-title {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-1);
}

.cal-nav {
  inline-size: 30px;
  block-size: 30px;
  display: grid;
  place-items: center;
  background: transparent;
  border: var(--hair) solid var(--line);
  border-radius: var(--r-xs);
  color: var(--text-2);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.cal-nav:hover { color: var(--accent-ink); border-color: var(--accent-line); }

.cal-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.cal-dow {
  text-align: center;
  padding-block: 2px;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-3);
}

.cal-day {
  block-size: 40px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--r-xs);
  color: var(--text-1);
  font-size: var(--fs-sm);
  cursor: pointer;
}

.cal-day:hover:not([disabled]) { background: var(--surface-3); }
.cal-day.is-outside { color: var(--text-3); }
.cal-day.is-today { color: var(--accent-ink); font-weight: 600; }

.cal-day[aria-selected="true"] {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 var(--hair) var(--accent-line);
  color: var(--accent-ink);
}

/* Excluded from AA by WCAG, and unreachable: min is today, server-side too. */
.cal-day[disabled] {
  color: var(--text-3);
  opacity: 0.38;
  cursor: default;
}

.cal-foot { display: flex; justify-content: flex-end; }

.cal-today {
  padding: var(--s-1) var(--s-2);
  background: transparent;
  border: 0;
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.cal-today:hover { text-decoration: underline; }

/* ---- Product listbox ---- */
.opts {
  inline-size: min(18rem, calc(100vw - 1rem));
  max-block-size: min(20rem, 60vh);
  gap: 0;
  /* Vertical only: overflow-x would earn the panel a pass from the layout
     checks, which is how a clipped strip hides a bug (see home.css). */
  overflow-y: auto;
  padding: var(--s-1);
}

.opt {
  padding: 0.5rem 0.7rem;
  border-radius: var(--r-xs);
  color: var(--text-1);
  font-size: var(--fs-sm);
  cursor: pointer;
}

.opt:hover,
.opt.is-cursor { background: var(--surface-3); }
.opt[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-ink); }

/* Honeypot: hidden by CSS only, and never focusable.
   Do not weaken — the widget relies on this rule.
   Parked at the form's origin and clipped to nothing rather than flung off to
   -10000px: in RTL the forward scroll direction *is* negative x, so a large
   negative offset grows the scrollable area and reads as horizontal overflow.
   A 1x1 clip-path box overflows in neither writing mode. */
.hp-field {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  inset-block-start: 0 !important;
  inset-inline-start: 0 !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ---- Contact fallback line ----
   Only ever added by main.js, and only when a tel:/mailto: click handed off to
   nothing. A static inline row: a layer that appears over the page would have to
   pass the same layout and focus audits as the field popovers, for one sentence. */
.link-rescue {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  margin-block: var(--s-3) 0;
  padding: var(--s-2) var(--s-3);
  background: var(--surface-2);
  border: var(--hair) solid var(--line);
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.4;
}

.rescue-copy,
.rescue-web {
  padding: 0.3rem 0.7rem;
  /* accent-soft is a 13% tint, and a tint over this row's --surface-2 plate only
     lifts the ground enough for 4.18:1 in the dark theme. The field colour under
     the same tint keeps the chip's look and reaches 5.3:1. */
  background-color: var(--field);
  background-image: linear-gradient(var(--accent-soft), var(--accent-soft));
  border: var(--hair) solid var(--accent-line);
  border-radius: var(--r-xs);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
}

.rescue-copy.is-on { background: transparent; border-color: var(--line-strong); color: var(--text-3); cursor: default; }

.rescue-value {
  padding: 0.3rem 0.6rem;
  background: var(--field);
  border: var(--hair) solid var(--line-strong);
  border-radius: var(--r-xs);
  color: var(--text-1);
  font-size: var(--fs-xs);
}

/* ——— Icons ——— */
.ui-icon { display: block; flex-shrink: 0; }

/* ——— Scroll reveal ———
   Hidden state is scoped to .js so content is never invisible when the
   script fails or is disabled. */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
}

.js .reveal.visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }

  .btn:hover { transform: none; }
}