/* Horouf Cast — main stylesheet (full site). RTL first. */

/* Skip link — translated out of view rather than positioned at -9999px, which
   would extend the scrollable area (especially in RTL). */
.hrf-skip{position:fixed;inset-block-start:8px;inset-inline-start:8px;z-index:100;
  background:var(--hrf-pink);color:#22072e;padding:10px 18px;border-radius:999px;font-weight:600;
  transform:translateY(-250%);transition:transform .2s}
.hrf-skip:focus{transform:translateY(0)}

/* ------- Section headings ------- */
.hrf-section{padding:80px 0}
.hrf-section__head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:36px}
.hrf-section__head h1,.hrf-section__head h2{font-size:clamp(28px,3.4vw,36px);margin:0;line-height:1.2;font-weight:700;letter-spacing:-.01em}
.hrf-section__head p{margin:8px 0 0;color:var(--hrf-text-muted)}
.hrf-section__head .more{color:var(--hrf-pink-hi);font-weight:500}
/* Centred, stacked variant — archives, search, topics, contact, home.
   The base rule is a ROW, where align-items:end sets the VERTICAL alignment.
   Switching flex-direction to column re-purposes align-items as the HORIZONTAL
   axis, and `end` there resolves to the LEFT edge under RTL — which is why
   these headings hugged the wrong side. The alignment must be restated. */
.hrf-section__head--stacked{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px}

/* ------- Grid layouts ------- */
.hrf-grid{display:grid;gap:24px}
.hrf-grid--3{grid-template-columns:repeat(3,1fr)}
.hrf-grid--2{grid-template-columns:repeat(2,1fr)}
.hrf-grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.hrf-grid--3,.hrf-grid--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.hrf-grid--2,.hrf-grid--3,.hrf-grid--4{grid-template-columns:1fr}}

/* ------- Card component ------- */
.hrf-card{background:var(--hrf-surface-solid);background-image:var(--hrf-surface);border:1px solid var(--hrf-border);border-radius:var(--hrf-radius-lg);overflow:hidden;transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;display:flex;flex-direction:column}
.hrf-card:hover{transform:translateY(-4px);border-color:var(--hrf-border-strong);box-shadow:var(--hrf-shadow-glow)}
.hrf-card__media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:#0b0316}
.hrf-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.hrf-card:hover .hrf-card__media img{transform:scale(1.04)}
/* padding-LEFT, not padding-inline-start: ▶ (U+25B6) has no Bidi_Mirrored
   property, so it points right in RTL too. The nudge optically centres a
   right-pointing triangle and must stay physical; a logical value flipped it
   to the wrong side and made the glyph look further off-centre under RTL. */
.hrf-card__play{position:absolute;top:16px;inset-inline-end:16px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.9);color:#22072e;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;padding-left:3px}
.hrf-card__badge{position:absolute;bottom:14px;inset-inline-start:14px;padding:4px 10px;border-radius:999px;background:rgba(11,3,22,.75);font-size:12px;font-weight:600;color:var(--hrf-text)}
.hrf-card__body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.hrf-card__meta{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--hrf-text-muted)}
.hrf-card__meta .chip{padding:4px 12px;border-radius:999px;background:var(--hrf-surface-2);border:1px solid var(--hrf-border);color:var(--hrf-text-muted)}
.hrf-card__meta .dur::before{content:"⏱ ";margin-inline-end:4px;opacity:.7}
.hrf-card__title{margin:0;font-size:19px;line-height:1.45;font-weight:600}
.hrf-card__title a:hover{color:var(--hrf-pink-hi)}
.hrf-card__sub{margin:0;color:var(--hrf-text-muted);font-size:14px}
.hrf-card__excerpt{margin:0;color:var(--hrf-text-muted);font-size:14px;line-height:1.6}

/* ------- Category tiles ------- */
.hrf-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:900px){.hrf-cats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.hrf-cats{grid-template-columns:1fr}}
.hrf-cat{padding:36px 26px;border-radius:var(--hrf-radius-lg);background:var(--hrf-surface-solid);background-image:var(--hrf-surface);border:1px solid var(--hrf-border);text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;transition:.25s}
.hrf-cat:hover{border-color:var(--hrf-border-strong);transform:translateY(-3px);box-shadow:var(--hrf-shadow-glow)}
.hrf-cat__icon{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,rgba(246,115,155,.18),rgba(255,181,107,.14));display:flex;align-items:center;justify-content:center;color:var(--hrf-pink-hi);font-size:26px;line-height:1}
.hrf-cat__title{font-weight:600;font-size:17px}
/* Per-term icons. Sized in em so one helper call serves the 52px tile and the
   14px filter pill; flex:none keeps them from being squeezed by a long name.
   font-size on .hrf-cat__icon above is load-bearing, not cosmetic — that element
   had none, and <svg width="1em"> resolves against it. */
.hrf-tericon{flex:none;display:block}
.hrf-tericon--emoji{font-size:.92em;line-height:1}

/* ------- Pills ------- */
.hrf-pills{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.hrf-pills a{display:inline-flex;align-items:center;gap:10px;padding:8px 18px;border-radius:999px;background:var(--hrf-surface-2);border:1px solid var(--hrf-border);color:var(--hrf-text);font-weight:500;font-size:14px;transition:.2s}
.hrf-pills a:hover{background:var(--hrf-surface);border-color:var(--hrf-pink)}
.hrf-pills .dot{width:8px;height:8px;border-radius:50%;background:var(--hrf-pink)}

/* ------- Testimonials ------- */
.hrf-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:900px){.hrf-quotes{grid-template-columns:1fr}}
.hrf-quote{margin:0;padding:28px;background:var(--hrf-surface-solid);background-image:var(--hrf-surface);border:1px solid var(--hrf-border);border-radius:var(--hrf-radius-lg);color:var(--hrf-text-muted);font-size:15px;line-height:1.75;display:flex;flex-direction:column;gap:16px}
.hrf-quote blockquote{margin:0;flex:1}
.hrf-quote blockquote p{margin:0 0 10px}
.hrf-quote blockquote p:last-child{margin:0}
.hrf-quote figcaption{display:flex;flex-direction:column;gap:2px;padding-top:14px;border-top:1px solid var(--hrf-border)}
.hrf-quote__name{color:var(--hrf-text);font-weight:600;font-size:14px}
.hrf-quote__role{color:var(--hrf-text-dim);font-size:13px}
.hrf-cat__count{color:var(--hrf-text-dim);font-size:13px}
.hrf-cat__desc{color:var(--hrf-text-muted);font-size:13px;line-height:1.6}
.hrf-ep__initials{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 6px;border-radius:999px;background:linear-gradient(135deg,var(--hrf-pink),var(--hrf-orange));color:#22072e;font-size:11px;font-weight:700;margin-inline-end:4px}

/* ------- Newsletter ------- */
.hrf-newsletter{padding:40px 32px;background:linear-gradient(135deg,rgba(244,110,180,.14),rgba(249,173,38,.06));border:1px solid var(--hrf-border-strong);border-radius:var(--hrf-radius-lg);display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;box-shadow:var(--hrf-shadow-glow)}
.hrf-newsletter h2,.hrf-newsletter h3{margin:0 0 8px;font-size:22px}
.hrf-newsletter__copy{flex:1 1 320px;min-width:0}
/* The panel sets a muted 14px on every p, which would swallow a status
   message; these restate what the notice needs at higher specificity. */
.hrf-newsletter .hrf-notice{margin:16px 0 0;max-width:none;text-align:start;font-size:14px}
.hrf-newsletter .hrf-notice--success{color:#cdf0b8}
.hrf-newsletter .hrf-notice--error{color:#ffc9c9}
.hrf-newsletter p{margin:0;color:var(--hrf-text-muted);font-size:14px}
.hrf-newsletter form{display:flex;gap:12px;flex:1 1 280px;min-width:0;max-width:420px}
/* min-width:0 lets the input actually shrink inside the flex row — without it
   the button is pushed past the viewport edge on narrow screens. */
.hrf-newsletter input[type="email"]{flex:1 1 auto;min-width:0;padding:12px 18px;border-radius:999px;border:1px solid var(--hrf-border);background:var(--hrf-surface);color:var(--hrf-text);font:inherit}
.hrf-newsletter form .hrf-btn{flex:0 0 auto}
@media (max-width:560px){
  .hrf-newsletter{padding:28px 22px}
  .hrf-newsletter form{flex-wrap:wrap;max-width:none}
  .hrf-newsletter input[type="email"]{flex:1 1 100%}
  .hrf-newsletter form .hrf-btn{width:100%}
}
.hrf-newsletter input[type="email"]::placeholder{color:var(--hrf-text-dim)}

/* ------- Footer ------- */
.hrf-footer{margin-top:40px;padding:56px 0 24px;border-top:1px solid var(--hrf-border);background:rgba(11,3,22,.35)}
.hrf-footer__grid{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:48px;align-items:start}
.hrf-footer__brand .hrf-brand__mark{font-size:26px}
.hrf-footer__brand p{color:var(--hrf-text-muted);font-size:14px;line-height:1.9;max-width:440px;margin:18px 0 0}
.hrf-footer__col h2{margin:0 0 20px;font-size:15px;font-weight:700;color:var(--hrf-text)}
.hrf-footer__col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.hrf-footer__col a{color:var(--hrf-text-muted);font-size:14px;transition:color .2s}
.hrf-footer__col a:hover{color:var(--hrf-pink-hi)}
.hrf-footer__bottom{margin-top:48px;padding-top:22px;border-top:1px solid var(--hrf-border);text-align:center;font-size:13px;color:var(--hrf-text-dim)}
@media (max-width:900px){
  .hrf-footer__grid{grid-template-columns:1fr 1fr;gap:36px}
  .hrf-footer__brand{grid-column:1 / -1}
  .hrf-footer__brand p{max-width:none}
}
@media (max-width:560px){
  .hrf-footer{padding:40px 0 20px}
  .hrf-footer__grid{grid-template-columns:1fr;gap:32px}
  .hrf-footer__bottom{margin-top:32px}
}

/* ------- Episode single ------- */
.hrf-ep{padding:50px 0 40px}
.hrf-ep__head{display:grid;grid-template-columns:280px 1fr;gap:40px;margin-bottom:40px}
@media (max-width:800px){.hrf-ep__head{grid-template-columns:1fr;text-align:center}}
.hrf-ep__cover{aspect-ratio:1/1;border-radius:24px;overflow:hidden;background:#0b0316}
.hrf-ep__cover img{width:100%;height:100%;object-fit:cover}
.hrf-ep__crumbs{color:var(--hrf-text-muted);font-size:13px;margin-bottom:14px}
.hrf-ep__crumbs a:hover{color:var(--hrf-pink-hi)}
.hrf-ep h1{font-size:clamp(30px,3.4vw,44px);margin:0 0 16px;line-height:1.25}
.hrf-ep__guest{display:inline-flex;align-items:center;gap:10px;padding:6px 16px;border-radius:999px;background:var(--hrf-surface);border:1px solid var(--hrf-border);color:var(--hrf-pink-hi);font-weight:600;font-size:14px;margin:0 0 12px}
.hrf-ep__meta{display:flex;flex-wrap:wrap;gap:18px;color:var(--hrf-text-muted);font-size:14px}
.hrf-ep__actions{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0}
.hrf-player{background:var(--hrf-surface-solid);background-image:var(--hrf-surface);border:1px solid var(--hrf-border-strong);border-radius:var(--hrf-radius-lg);padding:16px 22px;display:grid;grid-template-columns:64px 1fr auto;gap:16px;align-items:center;margin:0 0 24px;box-shadow:var(--hrf-shadow-md)}
.hrf-player__cover{width:64px;height:64px;border-radius:14px;overflow:hidden;background:#0b0316}
.hrf-player__cover img{width:100%;height:100%;object-fit:cover}
.hrf-player__info{display:flex;flex-direction:column;gap:6px;min-width:0}
.hrf-player__title{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hrf-player__meta{color:var(--hrf-text-muted);font-size:12px}
.hrf-player__wave{height:32px;position:relative;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:2px;overflow:hidden;flex:1;border-radius:4px}
.hrf-player__wave:focus-visible{outline:2px solid var(--hrf-pink);outline-offset:3px}
/* Bars flex so the waveform spans the full width — the click-to-seek maths maps
   the container rect onto the timeline, so a short bar run would mis-seek. */
.hrf-player__wave i{display:block;flex:1 1 0;min-width:2px;max-width:4px;
  background:rgba(255,255,255,.28);border-radius:2px;transition:background .1s}
.hrf-player__wave i.on{background:var(--hrf-pink)}
/* Time row under the waveform: elapsed at the start edge, total at the end,
   remaining in the middle. tabular-nums stops the digits jittering each tick. */
.hrf-player__times{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;font-size:12px;font-variant-numeric:tabular-nums;color:var(--hrf-text-dim)}
.hrf-player__time{color:var(--hrf-pink-hi);font-weight:700}
.hrf-player__total{color:var(--hrf-text-muted)}
.hrf-player__remaining{flex:1;text-align:center;font-size:11px;opacity:.75}
@media (max-width:560px){.hrf-player__remaining{display:none}}
/* Explicit physical padding — see .hrf-card__play. The shorthand also clears the
   UA button padding, which would otherwise fight the nudge from the far side. */
.hrf-player__playbtn{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--hrf-pink),var(--hrf-pink-hi));color:#22072e;font-size:20px;font-weight:700;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:.2s;padding:0 0 0 4px;box-shadow:var(--hrf-shadow-md)}
.hrf-player__playbtn:hover{transform:scale(1.05)}
.hrf-player__playbtn.is-playing{padding:0}
/* Player controls */
.hrf-player__controls{grid-column:1 / -1;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding-top:12px;margin-top:4px;border-top:1px solid var(--hrf-border)}
.hrf-player__ctl{padding:6px 14px;border-radius:var(--hrf-radius-pill);border:1px solid var(--hrf-border);background:transparent;color:var(--hrf-text-muted);font-size:13px;font-weight:600;cursor:pointer;transition:.2s;min-width:56px}
.hrf-player__ctl:hover{color:var(--hrf-text);background:var(--hrf-surface-2);border-color:var(--hrf-border-strong)}
.hrf-player__ctl:focus-visible{outline:2px solid var(--hrf-pink);outline-offset:2px}

/* Chapters */
.hrf-chapters{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;counter-reset:ch}
.hrf-chapters li{margin:0}
.hrf-chapter{display:flex;align-items:center;gap:14px;width:100%;text-align:start;padding:12px 18px;border-radius:var(--hrf-radius);border:1px solid var(--hrf-border);background:var(--hrf-surface-solid);background-image:var(--hrf-surface);color:var(--hrf-text-muted);cursor:pointer;transition:.2s;font:inherit}
/* translateX is physical. The nudge should pull the row away from the start
   edge, so it has to flip with the writing direction. */
.hrf-chapter:hover{color:var(--hrf-text);border-color:var(--hrf-border-strong);transform:translateX(-3px)}
html[dir="rtl"] .hrf-chapter:hover{transform:translateX(3px)}
.hrf-chapter:focus-visible{outline:2px solid var(--hrf-pink);outline-offset:2px}
.hrf-chapter__time{flex:0 0 auto;font-variant-numeric:tabular-nums;font-weight:700;font-size:13px;color:var(--hrf-pink-hi);min-width:52px}
.hrf-chapter__title{flex:1}

/* Transcript */
.hrf-transcript details{border:1px solid var(--hrf-border);border-radius:var(--hrf-radius-lg);background:var(--hrf-surface-solid);background-image:var(--hrf-surface);padding:18px 22px}
.hrf-transcript summary{cursor:pointer;list-style:none}
.hrf-transcript summary::-webkit-details-marker{display:none}
.hrf-transcript summary h2{display:inline;font-size:20px}
.hrf-transcript summary::after{content:" ▾";color:var(--hrf-pink-hi)}
.hrf-transcript details[open] summary::after{content:" ▴"}

.hrf-ep__section{margin:36px 0}
.hrf-ep__section h2{font-size:22px;margin:0 0 16px}
.hrf-notes{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.hrf-notes li{padding:14px 20px;background:var(--hrf-surface);border:1px solid var(--hrf-border);border-radius:var(--hrf-radius);color:var(--hrf-text-muted)}
.hrf-notes li::before{content:"• ";color:var(--hrf-pink);margin-inline-end:8px}
.hrf-resources a{display:inline-block;padding:12px 18px;background:var(--hrf-surface);border:1px solid var(--hrf-border);border-radius:var(--hrf-radius);color:var(--hrf-text);margin:0 0 8px}
/* ↗ is not a Bidi_Mirrored character, so it keeps pointing right under RTL,
   away from the direction the text actually runs. Point it the other way. */
.hrf-resources a::after{content:" ↗";color:var(--hrf-pink-hi)}
html[dir="rtl"] .hrf-resources a::after{content:" ↖"}

/* ------- Archive filter chips ------- */
.hrf-filters{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 40px;justify-content:center}
.hrf-filters a{display:inline-flex;align-items:center;gap:10px;padding:10px 20px;border-radius:999px;background:var(--hrf-surface);border:1px solid var(--hrf-border);color:var(--hrf-text-muted);font-size:14px;transition:.2s}
.hrf-filters a:hover{color:var(--hrf-text)}
.hrf-filters a.is-active{background:linear-gradient(135deg,var(--hrf-pink),var(--hrf-pink-hi));color:#22072e;border-color:transparent;font-weight:600}

/* ------- About page ------- */
.hrf-about h1{font-size:clamp(34px,4.2vw,56px);margin:0 0 24px;text-align:center}
.hrf-about__lead{font-size:18px;color:var(--hrf-text-muted);text-align:center;max-width:720px;margin:0 auto 40px;line-height:1.75}
.hrf-about__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:40px 0}
@media (max-width:900px){.hrf-about__cards{grid-template-columns:1fr}}
.hrf-about__cards article{padding:32px;background:var(--hrf-surface);border:1px solid var(--hrf-border);border-radius:var(--hrf-radius-lg)}
.hrf-about__cards h3{margin:0 0 12px;font-size:18px}
.hrf-about__cards p{margin:0;color:var(--hrf-text-muted);font-size:14px;line-height:1.75}

/* The design opens the About page with a wide image above the copy. Same shape
   as the article hero so the two pages agree. */
.hrf-about__hero{margin:0 0 40px;border-radius:var(--hrf-radius-lg);overflow:hidden;aspect-ratio:16/9;background:#0b0316}
.hrf-about__hero img{width:100%;height:100%;object-fit:cover;display:block}

/* ------- Sponsors (البودكاست برعاية) ------- */
.hrf-sponsors{margin:56px 0 0;text-align:center}
.hrf-sponsors__title{margin:0 0 24px;font-size:20px;font-weight:500;color:var(--hrf-text-muted)}
.hrf-sponsors__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:center}
.hrf-sponsor{min-width:180px;min-height:96px;padding:20px 28px;border-radius:var(--hrf-radius-lg);background:var(--hrf-surface-solid);background-image:var(--hrf-surface);border:1px solid var(--hrf-border);display:flex;align-items:center;justify-content:center;transition:.25s}
.hrf-sponsor:hover{border-color:var(--hrf-border-strong);box-shadow:var(--hrf-shadow-glow)}
.hrf-sponsor a{display:flex;align-items:center;justify-content:center}
.hrf-sponsor__logo{display:block;width:auto;height:auto;max-width:160px;max-height:56px;object-fit:contain}
.hrf-sponsor__name{font-size:15px;font-weight:500;color:var(--hrf-text)}
@media (max-width:520px){.hrf-sponsor{min-width:0;flex:1 1 140px}}

/* ------- Notices ------- */
.hrf-notice{max-width:760px;margin:0 auto 28px;padding:14px 20px;border-radius:var(--hrf-radius);border:1px solid var(--hrf-border);background:var(--hrf-surface-solid);background-image:var(--hrf-surface);text-align:center;font-size:15px}
.hrf-notice--success{border-color:rgba(126,217,87,.45);color:#cdf0b8}
.hrf-notice--error{border-color:rgba(255,120,120,.45);color:#ffc9c9}

/* ------- Contact ------- */
.hrf-contact__layout{display:grid;grid-template-columns:1.6fr 1fr;gap:48px;align-items:start;max-width:1000px;margin:0 auto}
@media (max-width:820px){.hrf-contact__layout{grid-template-columns:1fr;gap:36px}}
.hrf-contact__aside{padding:26px;border:1px solid var(--hrf-border);border-radius:var(--hrf-radius-lg);background:var(--hrf-surface-solid);background-image:var(--hrf-surface)}
.hrf-contact__aside h2{margin:0 0 16px;font-size:19px}
.hrf-contact__aside h3{margin:24px 0 10px;font-size:15px;color:var(--hrf-text)}
.hrf-contact__direct{margin:0;font-size:14px;color:var(--hrf-text-muted);line-height:1.9}
.hrf-contact__direct a{color:var(--hrf-pink-hi);word-break:break-all}
.hrf-contact__links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.hrf-contact__links a{color:var(--hrf-text-muted);font-size:14px}
.hrf-contact__links a:hover{color:var(--hrf-pink-hi)}
.hrf-contact__note{margin:0;font-size:14px;color:var(--hrf-text-muted);line-height:1.8}
.hrf-field-hint{font-size:12px;color:var(--hrf-text-dim)}
.hrf-contact select{padding:14px 18px;border-radius:var(--hrf-radius);border:1px solid var(--hrf-border);background:var(--hrf-surface-solid);color:var(--hrf-text);font:inherit}
.hrf-contact label span[aria-hidden]{color:var(--hrf-pink)}
/* Standalone the form is centred and narrow; inside the two-column layout it
   fills its own column instead. */
.hrf-contact{max-width:600px;margin:0 auto}
.hrf-contact__layout .hrf-contact{max-width:none;margin:0}
.hrf-contact .field{margin-bottom:20px;display:flex;flex-direction:column;gap:8px}
.hrf-contact label{font-weight:500;font-size:14px}
.hrf-contact input,.hrf-contact textarea{padding:14px 18px;border-radius:var(--hrf-radius);border:1px solid var(--hrf-border);background:var(--hrf-surface);color:var(--hrf-text);font:inherit}
/* Each field resolves its direction from its own first strong character, so an
   Arabic value stays RTL and a Latin one is laid out as its own LTR paragraph.
   Without it the trailing neutrals in a half-typed value jump to the far end
   and back on every keystroke — "ahmed@" painted "@ahmed", "ahmed@example."
   painted ".ahmed@example" — correcting itself only once the next letter lands.
   dir="auto" cannot be used instead: on an empty field it resolves to ltr and
   would left-align the Arabic placeholders. */
.hrf-contact input,
.hrf-contact textarea,
.hrf-search__form input,
.hrf-newsletter input[type="email"]{unicode-bidi:plaintext}
.hrf-contact textarea{min-height:150px;resize:vertical}
.hrf-contact button{width:100%;padding:16px;border-radius:999px;border:none;background:linear-gradient(135deg,var(--hrf-pink),var(--hrf-pink-hi));color:#22072e;font-weight:600;font-size:16px;cursor:pointer}

/* ------- Search ------- */
.hrf-search__form{max-width:600px;margin:0 auto 40px;position:relative}
.hrf-search__form input{width:100%;padding:18px 24px;border-radius:999px;border:1px solid var(--hrf-border);background:var(--hrf-surface);color:var(--hrf-text);font-size:16px}
.hrf-search__results{display:flex;flex-direction:column;gap:16px;max-width:800px;margin:0 auto}
.hrf-search__result{padding:24px;background:var(--hrf-surface);border:1px solid var(--hrf-border);border-radius:var(--hrf-radius-lg)}
.hrf-search__result h3{margin:0 0 8px;font-size:18px}
.hrf-search__result p{margin:0;color:var(--hrf-text-muted);font-size:14px}
.hrf-search__result .type{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--hrf-surface-2);color:var(--hrf-pink-hi);font-size:12px;margin-bottom:8px}

/* ------- Article single ------- */
.hrf-article{max-width:760px;margin:0 auto;padding:40px 0}
.hrf-article__head{text-align:center;margin-bottom:40px}
.hrf-article h1{font-size:clamp(28px,3.6vw,44px);margin:0 0 20px;line-height:1.3}
.hrf-article__meta{color:var(--hrf-text-muted);font-size:14px;display:flex;justify-content:center;gap:20px;flex-wrap:wrap}
.hrf-article__hero{aspect-ratio:16/9;border-radius:var(--hrf-radius-lg);overflow:hidden;margin:0 0 40px}
.hrf-article__hero img{width:100%;height:100%;object-fit:cover}
.hrf-article__body{font-size:17px;line-height:1.9}
.hrf-article__body p{margin:0 0 20px}
.hrf-article__body h2{font-size:26px;margin:40px 0 16px}
.hrf-article__body h3{font-size:20px;margin:32px 0 12px}
.hrf-article__body a{color:var(--hrf-pink-hi);text-decoration:underline;text-underline-offset:3px}
.hrf-article__body blockquote{margin:24px 0;padding:20px 28px;background:var(--hrf-surface);border-inline-start:4px solid var(--hrf-pink);border-radius:var(--hrf-radius);color:var(--hrf-text-muted);font-style:italic}
.hrf-article__body img{border-radius:var(--hrf-radius);margin:24px 0}
.hrf-article__body ul,.hrf-article__body ol{margin:0 0 20px;padding-inline-start:24px}
.hrf-article__body li{margin-bottom:8px}
/* Editor-authored blocks take their direction from their own first strong
   character. Without this an all-Latin paragraph — an English pull quote, a
   guest bio, a transcript line — keeps the page's RTL paragraph direction and
   its trailing full stop is thrown to the far end: "This is the show note."
   painted as ".This is the show note".
   li is deliberately excluded: unicode-bidi does not move the `direction`
   property, so a flipped list item would keep its marker on one side while the
   text resolved to the other. */
.hrf-article__body p,
.hrf-article__body h2,
.hrf-article__body h3,
.hrf-article__body blockquote,
.hrf-article__body figcaption,
.hrf-article__body th,
.hrf-article__body td{unicode-bidi:plaintext}

/* ------- 404 ------- */
.hrf-404{text-align:center;padding:100px 0}
.hrf-404 h1{font-size:120px;margin:0;background:linear-gradient(135deg,var(--hrf-pink),var(--hrf-orange));-webkit-background-clip:text;background-clip:text;color:transparent}
.hrf-404 p{color:var(--hrf-text-muted);margin:0 0 30px}

/* ------- Pagination ------- */
.hrf-pagination{display:flex;justify-content:center;gap:10px;margin:40px 0}
.hrf-pagination a,.hrf-pagination span{padding:10px 16px;border-radius:12px;background:var(--hrf-surface);border:1px solid var(--hrf-border);color:var(--hrf-text-muted)}
.hrf-pagination .current{background:var(--hrf-pink);color:#22072e;font-weight:600;border-color:transparent}

/* ------- Utilities ------- */
/* Clip-based, not left:-9999px — a physical offset extends the document width
   under RTL and creates a huge horizontal scroll area. */
.hrf-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
.hrf-mt-lg{margin-top:60px}
.hrf-text-center{text-align:center}
/* Wrap arbitrary Latin text that sits inside an Arabic sentence. isolate keeps
   the run's own punctuation and brackets attached to it instead of letting the
   bidi algorithm hand them to the surrounding Arabic. */
.hrf-bidi-isolate{unicode-bidi:isolate;direction:ltr}
/* Icons depicting a held object (the search magnifier) flip with the reading
   direction, the same as they do in every RTL operating system. */
html[dir="rtl"] .hrf-icon--mirror{transform:scaleX(-1)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}