/* ============================================================
   Zimamo (زمامو) — brand tokens, logo, and page-level accents
   Loaded after the theme CSS so it can override the Sneat primary
   where the brand should show through (buttons, links, the mark).

   Tokens and construction come from the approved handoff at
   public/assets/template/design_handoff_zimamo_logo/. Kept here, in a
   permanent path, because a stylesheet linked from every page must not
   live inside a design-drop folder that could be cleared.
   ============================================================ */

:root {
  --zi-ink: #141414;      /* primary logo / heading text  */
  --zi-copper: #B0552B;   /* accent: the o, the dot, CTAs */
  --zi-copper-h: #8A3F1E; /* hover                        */
  --zi-bone: #F4F2ED;     /* light panels / logo bg       */
  --zi-muted: #9A948A;    /* nav, tagline, secondary text */
  --zi-green: #0E3B2E;    /* alternate dark background     */
  --zi-green-o: #F0B080;  /* the o when on deep green      */
}

/* --------------------------------------------------------------
   Wordmark — Latin + Arabic lockup.

   The Arabic زمامو is ALWAYS one uninterrupted run: shaping breaks
   the moment a single letter is wrapped in its own span, so only the
   Latin o is ever coloured.
   -------------------------------------------------------------- */
.zi-logo {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  line-height: 1;
}

.zi-logo__latin {
  font-weight: 700;
  letter-spacing: -0.05em;
  color: var(--zi-ink);
  font-size: 40px;
}

.zi-logo__latin .o {
  color: var(--zi-copper);
}

.zi-logo__ar {
  font-family: 'Cairo', sans-serif;
  font-weight: 900;
  color: var(--zi-ink);
  font-size: 34px;
}

/* Wrapper gets .zi-logo--onDark on ink / copper / green backgrounds. */
.zi-logo--onDark .zi-logo__latin,
.zi-logo--onDark .zi-logo__ar {
  color: #fff;
}
/* The o keeps its copper on dark — the whitening rule above is more specific
   than the base .o rule and would otherwise swallow it. */
.zi-logo--onDark .zi-logo__latin .o {
  color: var(--zi-copper);
}

/* On deep green the o lightens rather than staying copper. */
.zi-logo--onGreen .zi-logo__latin .o {
  color: var(--zi-green-o);
}

/* Compact header size. */
.zi-logo--sm .zi-logo__latin {
  font-size: 20px;
}
.zi-logo--sm .zi-logo__ar {
  font-size: 17px;
}

/* --------------------------------------------------------------
   Rein underline — the copper bar with an arrowhead, a rein pulled
   taut. Optional flourish under a hero lockup.
   -------------------------------------------------------------- */
.zi-rein {
  position: relative;
  height: 5px;
  border-radius: 3px;
  background: var(--zi-copper);
  width: 250px;
}
.zi-rein::after {
  content: "";
  position: absolute;
  right: -2px;
  top: -6px;
  width: 16px;
  height: 16px;
  border: 5px solid var(--zi-copper);
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 3px;
  transform: rotate(45deg);
}

.zi-tagline {
  font-family: 'Cairo', sans-serif;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--zi-muted);
}

/* --------------------------------------------------------------
   Icon mark — the z. tile, used for the favicon and app-brand logo.
   Size it inline: width + height + font-size ≈ 55% of the side.
   -------------------------------------------------------------- */
.zi-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--zi-ink);
  color: #fff;
  border-radius: 24%;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  letter-spacing: -0.06em;
  flex: none;
}
.zi-mark .dot {
  color: var(--zi-copper);
}

/* --------------------------------------------------------------
   The brand accent, pushed onto the theme.

   The Sneat theme ships its primary — a purple #8C57FF — COMPILED into
   the vendor CSS in ~50 places, not read from a variable. Setting
   --bs-primary alone therefore changes almost nothing; the purple button
   and link stay purple. So the copper is asserted directly on the
   surfaces that carry the brand, with the variable set too for anything
   that does honour it.
   -------------------------------------------------------------- */
:root {
  --bs-primary: #B0552B;
  --bs-primary-rgb: 176, 85, 43;
}

/* Primary buttons — the CTA on every screen. */
.btn-primary,
.btn-primary:focus {
  background-color: var(--zi-copper) !important;
  border-color: var(--zi-copper) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary:focus-visible {
  background-color: var(--zi-copper-h) !important;
  border-color: var(--zi-copper-h) !important;
}

/* Outlined + text primary. */
.btn-outline-primary {
  color: var(--zi-copper) !important;
  border-color: var(--zi-copper) !important;
}
.btn-outline-primary:hover {
  background-color: var(--zi-copper) !important;
  border-color: var(--zi-copper) !important;
  color: #fff !important;
}
.text-primary {
  color: var(--zi-copper) !important;
}

/* Links. */
a {
  color: var(--zi-copper);
}
a:hover {
  color: var(--zi-copper-h);
}

/* Form focus — the field border and glow when a control is active. */
.form-control:focus,
.form-select:focus {
  border-color: var(--zi-copper) !important;
  box-shadow: 0 0 0 0.15rem rgba(176, 85, 43, 0.25) !important;
}

/* Checked checkboxes, radios, switches. */
.form-check-input:checked {
  background-color: var(--zi-copper) !important;
  border-color: var(--zi-copper) !important;
}

/* Background utilities used for accents and badges. */
.bg-primary {
  background-color: var(--zi-copper) !important;
}
.bg-label-primary {
  background-color: rgba(176, 85, 43, 0.16) !important;
  color: var(--zi-copper) !important;
}

/* A standalone CTA, matching the handoff header button. */
.zi-btn {
  display: inline-block;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  background: var(--zi-copper);
  border: none;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 7px;
  text-decoration: none;
}
.zi-btn:hover {
  background: var(--zi-copper-h);
  color: #fff;
}