/* Stage 22: UI polish (loaded on every page, after stage20). */

/* Contact icons: gold circles (the site's accent); the WhatsApp mark inside in WhatsApp green, the envelope in white. */
.ct-wa{background:var(--gold);color:#25d366}
.ct-mail{color:#fff}

/* Contact cards: square corners like the site's frames and buttons; hover changes the border only (no lift). */
.contact a.ct-card{border-radius:2px;transition:border-color .2s,background .2s}
.contact a.ct-card:hover,.contact a.ct-card:focus-visible{transform:none}

/* "At a glance" lists (biography credentials, herbal principles): small gold dot instead of a round check badge,
   the same marker as the biography lists. */
.checklist li{padding-inline-start:1.3rem}
.checklist li::before{width:.42rem;height:.42rem;top:.6em;background:var(--gold)}
[dir=rtl] .checklist li::before{top:.68em}

/* Home hero name: lines break only between words, never at the hyphen of "Al-Maiari". */
.hero-name span{white-space:nowrap}

/* Arabic text: always apply the fonts' kerning (js/even-spacing.js restores kerning pairs that vowel marks break). */
[dir=rtl] body{font-kerning:normal}

/* Herbal page «حضور واسع» (#presence): his short articles, one after another, divided by a gold hairline with a small
   diamond at its centre (in place of the 🍃 lines of the WhatsApp posts). */
.hm-says-lead{margin:1.6rem 0 .4rem;font-weight:700}
.hm-says{list-style:none;margin:0;padding:0}
.hm-says li{position:relative;padding:1.3rem 0;border-top:1px solid color-mix(in srgb,var(--gold) 45%,transparent)}
.hm-says li::before{content:"";position:absolute;top:-4px;left:50%;width:7px;height:7px;background:var(--paper);border:1px solid var(--gold);transform:translateX(-50%) rotate(45deg)}
.hm-says p{margin:0 0 .7rem}
.hm-says p:last-child{margin-bottom:0}
.hm-says .hm-by{margin-top:.4rem;text-align:end} /* signed at the end of the line, like a letter */
.hm-says-join{margin:1.4rem 0 0;padding-top:1.4rem;border-top:1px solid color-mix(in srgb,var(--gold) 45%,transparent)}
/* «مقالات مختارة» as a bulleted list: a small gold dot at each article's first line (the header lists' marker);
   the article's other paragraphs line up with its text. */
.hm-says li{padding-inline-start:1.3rem}
.hm-says li>p:first-child{position:relative}
.hm-says li>p:first-child::before{content:"";position:absolute;inset-inline-start:-1.3rem;top:calc(.85em - .21rem);width:.42rem;height:.42rem;border-radius:50%;background:var(--gold)}
[dir=rtl] .hm-says li>p:first-child::before{top:calc(.975em - .21rem)}

/* Home «لحظات» video: the new video is vertical (720×1280, clips of different shapes inside), so its frame is narrow
   and centred, never wider than the screen. */
.film .film-frame{max-width:min(420px,100%);margin-inline:auto}

/* Biography «المؤلفات الأدبية» headshot: a classic portrait frame in the language of his paintings' frames — dark
   walnut moulding with a lighter bevel, a thin gold lip, a cream mat with a soft inner bevel, then the photo. */
.bio-photo{padding:11px;border:0;border-radius:1px;
  background:linear-gradient(145deg,#5b4128 0%,#3a2817 38%,#2a1c10 62%,#4d3721 100%);
  box-shadow:inset 0 0 0 1px rgba(255,236,200,.18),inset 0 0 0 4px rgba(0,0,0,.18),inset 0 0 0 9px rgba(255,236,200,.06),
    0 2px 3px rgba(30,20,5,.35),0 18px 34px -14px rgba(30,20,5,.6)}
.bio-photo img{padding:10px;background:#f4eedc;border:0;
  box-shadow:0 0 0 2px #b8913f,0 0 0 3px #6e5425,inset 0 1px 3px rgba(30,20,5,.28),inset 0 0 0 1px rgba(30,20,5,.1)}
@media(max-width:700px){.bio-photo{padding:7px}.bio-photo img{padding:6px}}