/* جدائل — the braid is the brand: three strands (plum, rose, saffron) crossing, like the routine's three steps.
   It appears in three places only: the band under the header (woven in once when the page opens), the tie on the
   order card, and the numbers of the steps (one strand color per step). Everything else stays quiet.
   Colors: content/store.json → theme. */

/* Fonts: El Messiri (headings) and Almarai (text), SIL Open Font License (public/fonts/OFL-*.txt). */
@font-face {
  font-family: "El Messiri"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/el-messiri-arabic-700-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: "El Messiri"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/el-messiri-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Almarai"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/almarai-arabic-400-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: "Almarai"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/almarai-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Almarai"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/almarai-arabic-700-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: "Almarai"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/almarai-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

:root { --strand-1: #5b1f3f; --strand-2: #b8466f; --strand-3: #f3a712; }

/* Focus: plum on light surfaces (saffron is too pale there), saffron on the dark ones. */
:focus-visible { outline-color: var(--primary); }
.announcement :focus-visible, .tone-deep :focus-visible, .site-footer :focus-visible { outline-color: var(--accent); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }

/* Header: the mark and the name, then the braid band. */
.site-header { border-bottom: 0; position: relative; z-index: 2; }
.brand { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 1.65rem; }
.brand::before { content: ""; width: 32px; height: 32px; background: url("/assets/img/mark.svg") center / contain no-repeat; }
.site-header::after {
  content: ""; position: absolute; inset-inline: 0; top: 100%; height: 18px; pointer-events: none;
  background: url("/assets/img/braid-h.svg") center / auto 18px repeat-x;
  transform: translateY(-50%);
}
@media (prefers-reduced-motion: no-preference) {
  .site-header::after { animation: braid-in 1.3s cubic-bezier(0.22, 0.8, 0.3, 1) 0.15s both; }
}
@keyframes braid-in {
  from { clip-path: inset(0 0 0 100%); }
  to { clip-path: inset(0 0 0 0); }
}

/* Hero */
.hero { padding-block: 1.7rem 2rem; }
.hero-title { color: var(--primary); font-size: clamp(1.9rem, 7.8vw, 3rem); line-height: 1.35; }
.hero-lede { font-size: 1.04rem; }
.price { font-size: 2.2rem; }
.hero-points li { font-weight: 700; }

/* Order card: a braid tied across its top. */
.order-card { border-top: 0; position: relative; padding-top: 1.7rem; }
.order-card::before {
  content: ""; position: absolute; top: 0; inset-inline: 1.25rem; height: 16px; transform: translateY(-50%);
  background: url("/assets/img/braid-h.svg") center / auto 16px repeat-x;
}
.order-title { color: var(--primary); }

/* Problem: the turning line stands out. */
.closing { padding-inline-start: 0.85rem; border-inline-start: 4px solid var(--accent); color: var(--primary); }

/* Steps: one strand color per step, joined by a thread. */
.steps li:nth-child(3n + 1)::before { background: var(--strand-1); color: #fff; }
.steps li:nth-child(3n + 2)::before { background: var(--strand-2); color: #fff; }
.steps li:nth-child(3n)::before { background: var(--strand-3); color: var(--on-cta); }
.steps li:not(:last-child)::after {
  content: ""; position: absolute; inset-inline-start: calc(1.15rem - 1px); top: 2.55rem; bottom: -0.85rem; width: 2px;
  background: rgba(91, 31, 63, 0.2);
}

/* Final call to action and footer sit on the deep plum. */
.section-cta.tone-deep .section-title { font-size: clamp(1.5rem, 6vw, 2.2rem); }

@media (max-width: 899px) {
  /* Phones: a wider crop of the picture so the hook and the price come up sooner. */
  .hero-media img { aspect-ratio: 4 / 3; object-position: 50% 72%; }
}
@media (min-width: 900px) {
  .hero { padding-block: 3rem 3.5rem; }
}