/* Tajziyaat theme: tokens, fonts, base, layout and the shared components. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../../../assets/controllers/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("../../../assets/controllers/fonts/geist-mono-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tajziyaat Urdu";
  src: url("../../../assets/controllers/fonts/noto-kufi-arabic-tajziyaat.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: block;
}

/* One light theme with a pastel mint canvas: never a dark background. "only" also
   keeps browsers' automatic dark modes from repainting the page. */
:root {
  color-scheme: light only;
  --canvas: #E3F1E6;
  --tile: #FFFFFF;
  --ink: #0D1A12;
  --ink-2: #3D4A41;
  --ink-3: #5F6D63;
  --line: #D3E5D8;
  --sabz: #00874D;
  --deep: #00532C;
  --flap: #00602F;
  --lime: #D4FF3F;
  --on-lime: #0D1A12;
  --coral: #FF6A4D;
  --coral-ink: #C2361B;
  --coral-soft: #FFE6DF;
  --sabz-soft: #DDF5E8;
  --ring: #00874D;
  --shadow-float: 0 14px 34px -16px rgb(13 26 18 / .3);

  --font: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-urdu: "Tajziyaat Urdu", "Noto Kufi Arabic", sans-serif;

  --radius-tile: 28px;
  --radius-row: 22px;
  --radius-btn: 14px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --gutter: 16px;
  --gap: 10px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 380ms;
}

@media (min-width: 640px) {
  :root { --gutter: 24px; --gap: 12px; }
}

@media (min-width: 1024px) {
  :root { --gutter: 32px; --gap: 14px; }
}

@media (min-width: 1440px) {
  :root { --gutter: 48px; }
}

/* ---------- base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--canvas);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--canvas);
  color: var(--ink);
  font: 500 15px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

h1, h2, h3, p { margin: 0; }

a { color: inherit; }

img, svg { display: block; max-width: 100%; }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -60px;
  z-index: 10;
  padding: 10px 16px;
  border-radius: var(--radius-btn);
  background: var(--ink);
  color: var(--canvas);
  font-weight: 700;
  text-decoration: none;
  transition: top var(--dur-2) var(--ease-out);
}

.skip-link:focus-visible { top: 12px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Google's G (google() in icons.html): its size comes from where it sits. */
svg.g { flex: none; }

svg.i {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nowrap { white-space: nowrap; }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.muted { color: var(--ink-2); }

.faint { color: var(--ink-3); }

/* ---------- layout ---------- */

.app-main { flex: 1 0 auto; outline: none; }

.page {
  width: 100%;
  max-width: calc(1680px + 2 * var(--gutter));
  margin: 0 auto;
  padding: 14px max(var(--gutter), env(safe-area-inset-right)) max(var(--space-6), env(safe-area-inset-bottom))
    max(var(--gutter), env(safe-area-inset-left));
}

.bento {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}

.w2 { grid-column: span 2; }

.wfull { grid-column: 1 / -1; }

@media (min-width: 640px) {
  .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- surfaces ---------- */

.tile {
  position: relative;
  min-width: 0;
  padding: 16px;
  border-radius: var(--radius-tile);
  background: var(--tile);
}

@media (min-width: 640px) {
  .tile { padding: 20px; }
}

@media (min-width: 1024px) {
  .tile { padding: 24px; }
}

.tile-hero {
  color: #FFFFFF;
  background: radial-gradient(110% 80% at 100% 0%, #0E9A59, transparent 60%), var(--sabz);
}

/* ---------- masthead: one centred, mirrored lockup. English sits left of the mark and Urdu right of it, each
   aligned toward the mark; the two wordmarks share a bottom line and their subtexts hang below them. ---------- */

.mast {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: end;
  column-gap: 12px;
  row-gap: 7px;
  max-width: 920px;
  margin: 0 auto;
  padding: 18px 0 22px;
}

/* Each language block lays its two parts straight into the masthead grid. */
.m-en,
.m-ur { display: contents; }

.brand-en {
  grid-area: 1 / 1;
  justify-self: end;
  font: 700 clamp(23px, 7.2vw, 27px)/1 var(--font);
  letter-spacing: -.015em;
  font-variation-settings: "opsz" 32;
}

.brand-sub {
  grid-area: 2 / 1;
  justify-self: end;
  align-self: start;
  text-align: end;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink-2);
}

.brand-title {
  grid-area: 1 / 3;
  justify-self: start;
}

/* تجزیات is the square Kufic wordmark (kufic() in icons.html), sized by its height; the width keeps its grid's
   27.24 x 9.24 proportions. */
.kufic {
  --kufic-h: clamp(34px, 9.7vw, 38px);
  display: block;
  height: var(--kufic-h);
  width: calc(var(--kufic-h) * 2.948);
}

.brand-sub-ur {
  grid-area: 2 / 3;
  justify-self: start;
  align-self: start;
  text-align: end;
  font: 600 clamp(13px, 3.6vw, 14px)/1.6 var(--font-urdu);
  color: var(--ink-2);
}

/* Both subtexts are broken by hand into two lines, and neither line may break again. */
.brand-sub > span,
.brand-sub-ur > span {
  display: block;
  white-space: nowrap;
}

.mark { width: 48px; height: 48px; flex: none; }

.mast > .mark {
  grid-area: 1 / 2 / 3 / 3;
  align-self: center;
}

@media (max-width: 359px) {
  .mast { column-gap: 6px; }
  .mast > .mark { width: 40px; height: 40px; }
  .brand-sub { font-size: 10px; }
}

/* From 640px the English subtext becomes a spaced capital caption, like the one under a Kufic panel. */
@media (min-width: 640px) {
  .mast { column-gap: 22px; row-gap: 9px; padding: 26px 0 30px; }
  .brand-en { font-size: 34px; }
  .brand-sub { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
  .kufic { --kufic-h: 46px; }
  .brand-sub-ur { font-size: 15px; }
  .mast > .mark { width: 60px; height: 60px; }
}

@media (min-width: 1024px) {
  .mast { column-gap: 30px; row-gap: 10px; padding: 34px 0 38px; }
  .brand-en { font-size: 44px; }
  .brand-sub { font-size: 12px; }
  .kufic { --kufic-h: 56px; }
  .brand-sub-ur { font-size: 16px; }
  .mast > .mark { width: 76px; height: 76px; }
}

/* ---------- small parts ---------- */

.k {
  display: block;
  font: 700 10.5px/1.2 var(--font);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.tag {
  display: inline-flex;
  align-items: center;
  align-self: start;
  justify-self: start;
  height: 26px;
  padding: 0 11px;
  border-radius: 99px;
  font: 700 11px/1 var(--font);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--on-lime);
  background: var(--lime);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  font: 700 15px/1 var(--font);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}

.btn:active { transform: scale(.97); }

.btn-primary { background: var(--sabz); color: #FFFFFF; }

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

.btn-ghost { background: var(--tile); color: var(--ink); border-color: var(--line); }

.btn-ghost:hover { background: var(--canvas); }

.btn-subtle { background: transparent; color: var(--ink-2); }

.btn-subtle:hover { background: var(--canvas); color: var(--ink); }

/* For what cannot be undone, always with words that say so. */
.btn-danger { background: var(--coral-soft); color: var(--coral-ink); }

.btn-danger:hover { background: #FFD6CB; }

.btn-lg { min-height: 52px; padding: 0 22px; font-size: 16px; }

.btn-block { display: flex; width: 100%; }

.btn svg.i { width: 18px; height: 18px; }

.btn[hidden] { display: none; }

/* A button whose request is on its way: dimmed, and it takes no second press. */
.btn[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* ---------- page header: the English title of a page without the masthead ---------- */

.page-header {
  display: grid;
  gap: 4px;
  padding: 18px 0 20px;
}

.page-header h1 {
  font: 700 clamp(28px, 8.2vw, 32px)/1.05 var(--font);
  letter-spacing: -.015em;
  font-variation-settings: "opsz" 32;
}

.page-sub { color: var(--ink-2); }

@media (min-width: 1024px) {
  .page-header { padding: 26px 0 28px; }
  .page-header h1 { font-size: 40px; }
}

/* ---------- callout: one calm sentence the visitor should not miss ---------- */

.callout {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--canvas);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.4;
  text-align: start;
}

.callout svg.i { width: 18px; height: 18px; margin-top: 1px; color: var(--sabz); }

/* ---------- a page that is one centred tile (coming-soon pages) ---------- */

.page-center {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 22px;
  min-height: 70vh;
}

/* The mark and the wordmark, as the way home. */
.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font: 700 24px/1 var(--font);
  letter-spacing: -.015em;
  font-variation-settings: "opsz" 32;
}

.brand-link .mark { width: 40px; height: 40px; }

/* Stands in for what is not there (yet): an icon, a title, one sentence and the way on. */
.empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(520px, 100%);
  padding: 28px 24px 24px;
  text-align: center;
}

.empty-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: var(--sabz-soft);
  color: var(--sabz);
}

.empty-icon svg.i { width: 26px; height: 26px; }

.empty .tag { justify-self: center; }

.empty :is(h1, h2) { font: 700 22px/1.15 var(--font); text-wrap: balance; }

.empty p { max-width: 34ch; color: var(--ink-2); text-wrap: balance; }

.empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}

/* ---------- prose: a page to read, such as the privacy policy and the terms ---------- */

.prose {
  width: min(760px, 100%);
  padding: 26px 20px 30px;
  overflow-wrap: anywhere;
}

@media (min-width: 640px) {
  .prose { padding: 40px 44px 44px; }
}

.prose > * + * { margin-top: 12px; }

.prose h1 {
  font: 700 clamp(28px, 8vw, 36px)/1.1 var(--font);
  letter-spacing: -.015em;
  font-variation-settings: "opsz" 32;
  text-wrap: balance;
}

.prose .updated { margin-top: 6px; font-size: 13px; color: var(--ink-3); }

.prose h2 { margin-top: 30px; font: 700 18px/1.3 var(--font); }

.prose p,
.prose li { color: var(--ink-2); line-height: 1.65; }

.prose ul { margin-bottom: 0; padding-left: 20px; }

.prose li + li { margin-top: 8px; }

.prose li::marker { color: var(--sabz); }

.prose strong { color: var(--ink); font-weight: 700; }

.prose a {
  color: var(--sabz);
  font-weight: 600;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.prose a:hover { color: var(--deep); }

.prose code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--canvas);
  color: var(--ink);
  font: 500 .88em/1 var(--font-mono);
  white-space: nowrap;
}

/* ---------- the foot of every page: Privacy and Terms, then the credit ---------- */

.foot {
  display: grid;
  justify-items: center;
  padding: 0 max(var(--gutter), env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom))
    max(var(--gutter), env(safe-area-inset-left));
}

/* As quiet as the credit. Each link is a 44px touch target whose words start 16px down, like the credit's. */
.legal {
  --i: 4;
  display: flex;
  align-items: center;
  font: 600 12px/16px var(--font);
  color: var(--ink-3);
}

.legal a {
  display: inline-block;
  padding: 14px 10px;
  color: var(--ink-3);
  text-decoration: none;
}

.legal a:hover,
.legal a:focus-visible {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* "Powered by", LojicLoop's logo, then "LojicLoop Sdn Bhd", very subtle: in the page's own grey-green, the logo and
   the name taking LojicLoop's purple (lojicloop.com, the one colour from outside the palette) while they are
   pointed at or pressed. Once, when the credit first comes into view, a wash of that purple passes over them (the
   theme script adds .is-seen). It tucks a little into the padding of the links above it. */
.credit {
  --i: 4;
  --lojicloop: #6E38CF;
  display: flex;
  justify-content: center;
  margin-top: -8px;
}

.credit a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 16px 8px;
  color: var(--ink-3);
  text-decoration: none;
}

.credit-by {
  margin-right: 3px;
  font: 700 10px/1 var(--font);
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* The logo is drawn by lojicloop() in icons.html: its square takes the text colour, its L stays white. */
.credit .lojicloop {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--ink-3);
  transition: color var(--dur-3) var(--ease-out);
}

.credit-name {
  font: 500 13px/1 var(--font);
  transition: color var(--dur-3) var(--ease-out);
}

.credit-name b { font-weight: 700; }

.credit a:hover :is(.credit-name, .lojicloop),
.credit a:focus-visible :is(.credit-name, .lojicloop),
.credit a:active :is(.credit-name, .lojicloop) { color: var(--lojicloop); }

/* The wash: a band of the purple, as wide as the name and soft at its edges, crosses it from left to right; the logo
   just before it takes the purple as the band sets off and gives it back as the band moves on. The logo's own fill
   only plays out (backwards, not both), so it never holds a colour over the hover. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .credit-name {
    color: transparent;
    background: linear-gradient(90deg, var(--ink-3) 25%, var(--lojicloop) 37.5% 62.5%, var(--ink-3) 75%)
      100% 0 / 400% 100%;
    -webkit-background-clip: text;
    background-clip: text;
  }

  .credit.is-seen .credit-name { animation: wash 2.8s cubic-bezier(.65, 0, .35, 1) .6s both; }

  .credit.is-seen .lojicloop { animation: logo-wash 2.8s cubic-bezier(.65, 0, .35, 1) .6s backwards; }
}

/* ---------- motion: explains a change, never decorates ---------- */

@keyframes rise {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
}

@keyframes quarter {
  from { transform: rotate(-90deg) scale(.85); }
}

/* The credit's wash: in from the left, a moment on the whole name, out to the right. */
@keyframes wash {
  0% { background-position: 100% 0; }
  40%, 60% { background-position: 50% 0; }
  100% { background-position: 0 0; }
}

@keyframes logo-wash {
  0%, 72%, 100% { color: var(--ink-3); }
  15%, 58% { color: var(--lojicloop); }
}

[data-reveal] {
  animation: rise .7s var(--ease-spring) both;
  animation-delay: calc(var(--i, 0) * 60ms + 60ms);
}

.bento > :nth-child(1) { --i: 1; }
.bento > :nth-child(2) { --i: 2; }
.bento > :nth-child(3) { --i: 3; }
.bento > :nth-child(4) { --i: 4; }
.bento > :nth-child(5) { --i: 5; }
.bento > :nth-child(6) { --i: 6; }
.bento > :nth-child(7) { --i: 7; }
.bento > :nth-child(8) { --i: 8; }

.mark .seal {
  transform-box: fill-box;
  transform-origin: center;
  animation: quarter 1.2s var(--ease-spring) .3s both;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}