/* SIDDIQIYA Technology: shared brand typography and finishing details.
   Loaded on every page after the page's own styles and before responsive.css.
   Fonts are self-hosted (SIL Open Font License, see assets/fonts/LICENSE-OFL.txt),
   so no third-party font service sees visitors. */

/* ---------- Fonts ---------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/inter-regular.woff") format("woff"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/inter-medium.woff") format("woff"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/inter-semibold.woff") format("woff"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700 900; font-display: swap; src: url("/assets/fonts/inter-bold.woff") format("woff"); }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/Lora-Variable.ttf") format("truetype"); }
@font-face { font-family: "Lora"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/Lora-Italic-Variable.ttf") format("truetype"); }

body {
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; font-kerning: normal;
}
h1, h2, h3, .hero h1, .section-head h2 { text-wrap: balance; letter-spacing: -0.015em; }
p, li { text-wrap: pretty; }
::selection { background: rgba(214, 180, 92, .32); color: #fff; }

/* ---------- Keyboard focus: clearly visible, on-brand ---------- */
:focus-visible { outline: 2px solid var(--gold2, #f0d98d); outline-offset: 3px; border-radius: 6px; }
.btn:focus-visible { outline-offset: 4px; border-radius: 999px; }

/* ---------- Navigation ---------- */
.navlinks a:not(.btn) { position: relative; transition: color .2s ease; }
.navlinks a.nav-portal { color: var(--gold2, #f0d98d) !important; }
@media (min-width: 1101px) {
  .navlinks a:not(.btn):not(.nav-portal)::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
    background: var(--gold, #d6b45c); transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
  }
  .navlinks a:not(.btn):not(.nav-portal):hover::after,
  .navlinks a[aria-current="page"]::after { transform: scaleX(1); }
  .navlinks a.nav-portal {
    padding-left: 22px !important; margin-left: 2px; border-left: 1px solid rgba(214, 180, 92, .28) !important;
  }
}

/* ---------- Line icons (replace text symbols) ---------- */
.ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; display: block; }
.card-icon .ico, .method-icon .ico { width: 24px; height: 24px; }
.product-visual .ico { width: 46px; height: 46px; stroke-width: 1.4; color: var(--gold2, #f0d98d); }
.product-symbol .ico { width: 30px; height: 30px; stroke-width: 1.5; }
.method-icon { color: var(--gold2, #f0d98d); }

/* ---------- Commitments strip (homepage, replaces number tiles) ---------- */
.metric .metric-ico { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 12px;
  border: 1px solid rgba(214, 180, 92, .35); color: var(--gold2, #f0d98d); background: rgba(214, 180, 92, .06); }
.metric .metric-ico .ico { width: 22px; height: 22px; }
.metric strong.metric-title { display: block; font: 600 1rem/1.3 Inter, system-ui, sans-serif; color: var(--cream, #f4f0e4); letter-spacing: 0; }
.metric span { display: block; margin-top: 4px; }

/* ---------- Footer logo matches the header ---------- */
footer .brand-mark svg { width: 34px; height: 34px; } /* legacy */

/* commitments strip on phones: compact 2 x 2 grid with hairline dividers */
@media (max-width: 767px) {
  .metrics .metric-grid { grid-template-columns: 1fr 1fr !important; gap: 1px !important; background: var(--line, rgba(214,180,92,.22)); }
  .metrics .metric { border: 0 !important; padding: 22px 10px !important; background: #092219; }
  .metrics .metric strong.metric-title { font-size: .95rem !important; }
  .metrics .metric span { font-size: .78rem; line-height: 1.45; }
}

/* open phone/tablet menu: solid panel so page text never shows through */
@media (max-width: 1100px) {
  .navlinks.open { background: #071d16 !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
}

/* ---------- Android rendering fixes (fix/homepage-visual-rendering) ----------
   1. The site is dark by design. Declaring it (here and in each page's
      <meta name="color-scheme">) stops Android Chrome "Auto Dark Mode for web
      contents", Samsung Internet dark mode and similar in-app browsers from
      re-colouring it: without this they darken the gold buttons and logo and
      brighten the hero grid lines.
   2. The hero grid (.hero::before, 1px lines every 54px) is faded out towards
      the text with a mask. Only the unprefixed "mask-image" was set, which older
      Android Chrome/WebView (before 120) and Samsung Internet (before 25) ignore,
      so there the lines ran across the whole hero, behind the headline. The
      -webkit- form fixes that; browsers with no mask support skip the grid. */
:root { color-scheme: dark; }
.hero::before {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%);
  mask-image: linear-gradient(90deg, transparent, #000 70%);
}
@supports not ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
  .hero::before { display: none; }
}

/* ---------- Accessibility audit fixes ----------
   Footer column titles and process steps were <h4> straight after <h2>, which
   breaks the heading outline screen-reader users navigate by. They are now <h3>;
   these rules keep them looking exactly as before. */
.footer-grid h3.footer-title, .step h3.step-title {
  font-size: 1em; font-weight: 700; font-family: inherit; line-height: inherit;
  letter-spacing: normal; text-wrap: wrap;
}
.footer-grid h3.footer-title { color: var(--gold2, #f0d98d); margin: 0 0 13px; }
.step h3.step-title { margin: 10px 0 5px; }
/* WhatsApp button text: white on #168b58 was 4.31:1, below the 4.5:1 minimum
   for its 13px label. A slightly deeper green of the same hue gives 4.78:1. */
.site-whatsapp { background: #15834f !important; }
.site-whatsapp:hover { background: #137d4c !important; }

/* ---------- Announcement bar (set in Admin -> Announcement) ----------
   Replaces the top-bar text above the navigation while switched on. The text
   scrolls slowly, pauses on hover/focus, and stays still for visitors who ask
   their device for reduced motion. */
.topbar.has-announcement .container { display: block !important; padding: 0 !important; overflow: hidden; }
.topbar .ann {
  overflow: hidden; white-space: nowrap; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.topbar .ann-track {
  display: inline-flex; width: max-content; padding: 9px 0;
  animation: siddiqiya-ann var(--ann-duration, 30s) linear infinite;
}
.topbar .ann-item {
  flex: 0 0 auto; padding-right: 72px; color: var(--gold2, #f0d98d); font-weight: 600; letter-spacing: .01em;
  display: inline-block !important; white-space: nowrap;
}
.topbar .ann-item::before { content: "\2726"; margin-right: 12px; color: var(--gold, #d6b45c); }
.topbar a.ann-item { text-decoration: none; }
.topbar a.ann-item:hover { text-decoration: underline; text-underline-offset: 3px; }
.topbar .ann:hover .ann-track, .topbar .ann:focus-within .ann-track { animation-play-state: paused; }
@keyframes siddiqiya-ann { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .topbar .ann { -webkit-mask-image: none; mask-image: none; white-space: normal; text-align: center; }
  .topbar .ann-track { animation: none !important; display: block; width: auto; padding: 9px 16px; }
  .topbar .ann-item[aria-hidden="true"] { display: none !important; }
  .topbar .ann-item { padding-right: 0; white-space: normal; }
}

/* admin: announcement preview */
.ann-preview { padding:10px 14px;border:1px solid rgba(214,180,92,.25);border-radius:10px;background:#061a14;color:#f0d98d;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }

/* ---------- Brand mark: the gold-and-green S from the official logo ---------- */
.brand-mark { overflow: hidden; background: #061a14 !important; padding: 0 !important; }
.brand-mark img { width: 100%; height: 100%; display: block; object-fit: cover; }
footer .brand-mark img { width: 100%; height: 100%; }

/* Office locations in the footer */
footer .footer-offices { margin-top: 14px; max-width: 280px; font-size: .9rem; line-height: 1.7; }
footer .footer-offices b { display: block; margin-top: 6px; color: var(--gold2, #f0d98d); font-weight: 600; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }