/* production.css — loaded immediately after site.css, so anything here applies
   before first paint. Additive only: vendor/ is never edited.
   Tokens (--ink --blue --surface --muted --rule) come from base.css. */

/* Belt and braces. tools/build.mjs P3 already deletes the preview bar; if that
   patch is ever relaxed this keeps it from painting. */
.preview-bar { display: none !important; }

/* ---------------------------------------------------------------- booking -- */
/* Reserve the embed's height so the panel doesn't jump as the iframe sizes
   itself. Cal paints over the skeleton. */
.cal-inline {
  min-height: 620px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  background: white;
}
.cal-inline[data-state="idle"]::after,
.cal-inline[data-state="loading"]::after {
  content: 'Loading available times…';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: var(--muted);
}
.cal-inline[data-state="error"] { min-height: 0; padding: 22px; }
.cal-inline[data-state="ready"]::after { content: none; }

.booking-fallback { font-size: 12px; color: var(--muted); line-height: 1.6; margin: 0; }
.booking-fallback a { color: var(--blue); text-underline-offset: 3px; }

/* ------------------------------------------------------------ form status -- */
/* .quote-status already exists in site.css (surface bg, blue left border).
   These are the state variants it doesn't have. */
.quote-status[data-state="sending"] { opacity: .7; }
.quote-status[data-state="sent"]  { border-left-color: #1a7f4b; color: var(--ink); }
.quote-status[data-state="error"] { border-left-color: #c2410c; color: var(--ink); }

#join-status {
  font-size: 12px;
  color: var(--muted);
  margin: 14px 0 0;
  line-height: 1.6;
}
#join-status[data-state="sent"]  { color: var(--ink); }
#join-status[data-state="error"] { color: #c2410c; }

/* The review screen now has two stacked actions: send (primary) then download. */
#quote-download { margin-top: 14px; }

button[aria-busy="true"] { opacity: .65; pointer-events: none; }

/* Honeypot. Must be reachable by the DOM but never by a human: off-screen
   rather than display:none, since some bots skip hidden fields. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

@media (max-width: 760px) {
  .cal-inline { min-height: 420px; }
}

/* ------------------------------------------------------------ trust band -- */
/* Codex sizes every logo to a fixed 68px HEIGHT. These run from 1.8:1 (Dubai
   Libraries) to 5.7:1 (Dubai Municipality), so one height makes the wide ones
   three times the visual mass of the narrow ones. Size them toward equal AREA
   instead — height falls as the logo gets wider.

   Two traps this works around:
   - ministry-education.svg has only a viewBox, no width/height attributes. With
     height:auto it has no intrinsic size and collapses to 0x0 in a flex row, so
     every logo gets an explicit height rather than a max-height.
   - the per-logo rules must carry the same .trust-band prefix as the default,
     or the default (2 classes) outranks them (1 class) and nothing applies. */

.trust-band .client-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 26px 46px;
  grid-template-columns: none;     /* drop Codex's 7/4/2-column grid */
  margin: 0 0 26px;
}

.trust-band .client-logo {
  height: auto;
  min-width: 0;
  flex: 0 0 auto;
}

.trust-band .client-logo img {
  display: block;
  width: auto;
  height: 26px;                    /* per-logo overrides below */
  max-width: none;
  max-height: none;
  object-fit: contain;
  opacity: .82;
  transition: opacity .2s ease;
}
.trust-band .client-logo img:hover { opacity: 1; }

/* The SVGs still carry brand colour; the WebPs are pre-normalised to black by
   tools/normalise-logos.py. Filtering an already-black image is a no-op. */
/* Only ministry-education needs this: its colour lives in CSS classes and
   gradients, so tools/normalise-svg.py has no fill attributes to rewrite.
   adek and dubai-culture are recoloured at build time instead, which is what
   keeps ADEK's white knockout from filling in solid. */
.trust-band .client-education img { filter: brightness(0); }

/* Optical heights — widest logo shortest.
   aspect-ratio is load-bearing, not decoration: these images are
   loading="lazy", and an unloaded lazy image has no intrinsic size. With
   width:auto that computes to 0px, and Chrome never fires lazy loading for a
   zero-area element — the logos silently never load at all. Declaring the
   ratio gives each one a real width before its bytes arrive, which both fixes
   the load and removes layout shift. Ratios are the source artwork's. */
.trust-band .client-municipality img { height: 19px; aspect-ratio: 800 / 141; }
.trust-band .client-adek img         { height: 26px; aspect-ratio: 260 / 84;  }
.trust-band .client-education img    { height: 26px; aspect-ratio: 7287 / 2366; }
.trust-band .client-sports img       { height: 26px; aspect-ratio: 569 / 188; }
.trust-band .client-cop28 img        { height: 28px; aspect-ratio: 500 / 225; }
.trust-band .client-culture img      { height: 29px; aspect-ratio: 93431 / 46760; }
.trust-band .client-libraries img    { height: 30px; aspect-ratio: 800 / 455; }

@media (max-width: 1000px) {
  .trust-band .client-logos { gap: 24px 36px; }
  .trust-band .client-logo img          { height: 23px; }
  .trust-band .client-municipality img  { height: 17px; }
  .trust-band .client-cop28 img         { height: 25px; }
  .trust-band .client-culture img       { height: 26px; }
  .trust-band .client-libraries img     { height: 27px; }
}

@media (max-width: 740px) {
  .trust-band .client-logos { gap: 20px 28px; }
  .trust-band .client-libraries { grid-column: auto; }
  .trust-band .client-logo img          { height: 20px; }
  .trust-band .client-municipality img  { height: 15px; }
  .trust-band .client-cop28 img         { height: 22px; }
  .trust-band .client-culture img       { height: 23px; }
  .trust-band .client-libraries img     { height: 24px; }
}

/* ---------------------------------------------- brand kit: avatars & emblem -- */
/* Section injected by tools/build.mjs (P19). Styled here rather than in
   vendor/brand-kit.css, which belongs to Codex. Follows the kit's existing
   card pattern: sample above, label + download row beneath. */

.kit-avatars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 22px;
}
.kit-avatar-card { min-width: 0; }

.kit-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--rule);
}
/* The files are square; the platforms crop. Showing the first two round is
   how they will actually appear, without shipping a pre-cropped asset. */
.kit-avatar.round { border-radius: 50%; }
.kit-avatar img { display: block; width: 100%; height: 100%; object-fit: contain; }

.kit-card-label > div { min-width: 0; }
.kit-card-label strong { display: block; font-size: 13px; font-weight: 500; }
.kit-card-label span { display: block; font-size: 10px; color: var(--muted); margin-top: 5px; }
.kit-card-label a {
  font-size: 11px;
  color: var(--blue);
  text-decoration: none;
  flex: 0 0 auto;
}
/* The arrow sits on its own line because Codex styles .kit-card-label span as
   display:block across the whole kit. Left alone deliberately — these cards
   should match the logo cards above them, not diverge from them. */
.kit-card-label a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* The emblem shown at the pixel widths it is actually placed at, so the
   "does it still read at 24px?" question answers itself. */
.kit-emblem-scale {
  display: flex;
  align-items: flex-end;
  gap: 42px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding: 30px 26px;
  background: var(--surface);
  border: 1px solid var(--rule);
}
.kit-emblem-scale figure { margin: 0; text-align: center; }
.kit-emblem-scale img { display: block; width: var(--emblem-size); height: auto; }
.kit-emblem-scale figcaption {
  margin-top: 12px;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: .04em;
}

.kit-emblem-downloads { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 20px; }
.kit-emblem-downloads .inline-link { font-size: 11px; }

@media (max-width: 860px) {
  .kit-avatars { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .kit-emblem-scale { gap: 30px; padding: 24px 20px; }
}
@media (max-width: 560px) {
  .kit-avatars { grid-template-columns: 1fr 1fr; gap: 18px; }
  .kit-emblem-downloads { gap: 16px; }
}