/*
* engagement.css — Wave 4
* "زاد اليوم" (daily content) + "تحدي اليوم" (quizzes) + result card.
*
* Every colour, radius, shadow, duration and font here resolves to a token
* already defined in variables.css. There is no new palette and no new
* typeface: the whole point is that these sections read as parts of the
* academy rather than a bolted-on app.
*
* Two deliberate design decisions worth naming:
*
* 1. The daily card sets its text in the site's Arabic *reading* face at a
* larger size with extra leading, because the content is scripture and
* hadith — text people actually read slowly — not UI copy.
* 2. The quiz answer is a real . It is
* styled heavily but never replaced by a div, so keyboard arrow-key
* behaviour, focus rings and screen-reader grouping come for free rather
* than being re-implemented in JavaScript.
*
* Layout uses logical properties (inline-start/end) throughout so a single
* rule serves both the Arabic RTL and English LTR builds.
*/
/* ==========================================================================
Shared section furniture
========================================================================== */
.engagement-eyebrow{
display:inline-flex;
align-items:center;
gap:0.5rem;
font-family:var(--font-interface-en);
font-size:var(--fs-xs);
font-weight:600;
letter-spacing:0.08em;
text-transform:uppercase;
color:var(--color-accent-strong);
}
html[lang="ar"] .engagement-eyebrow{
font-family:var(--font-interface-ar);
letter-spacing:0;
text-transform:none;
}
.engagement-eyebrow svg{ width:18px; height:18px; }
/* ==========================================================================
زاد اليوم — daily content
========================================================================== */
.daily-card{
position:relative;
display:grid;
gap:var(--space-sm);
padding:clamp(1.25rem, 3vw, 2.25rem);
background:var(--color-surface);
border:1px solid var(--color-border);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-md);
overflow:hidden;
}
/* Signature detail: a single hairline of brass down the reading edge. It
marks the card as "content to read" without adding another colour. */
.daily-card::before{
content:"";
position:absolute;
inset-block:0;
inset-inline-start:0;
width:3px;
background:var(--gradient-accent);
opacity:0.85;
}
.daily-card__head{
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--space-sm);
flex-wrap:wrap;
}
.daily-card__type{
display:inline-flex;
align-items:center;
gap:0.4rem;
padding:0.3rem 0.7rem;
border-radius:var(--radius-badge);
border:1px solid var(--color-border);
background:var(--color-bg-alt);
color:var(--color-text-soft);
font-size:var(--fs-xs);
font-weight:600;
}
.daily-card__type svg{ width:15px; height:15px; color:var(--color-accent-strong); }
.daily-card__date{
font-size:var(--fs-xs);
color:var(--color-text-muted);
font-variant-numeric:tabular-nums;
}
.daily-card__text{
margin:0;
font-size:clamp(1.15rem, 1rem + 0.9vw, 1.6rem);
line-height:2.1;
color:var(--color-text);
}
html[lang="ar"] .daily-card__text{
font-family:var(--font-heading-ar);
line-height:2.25;
}
/* Quranic text gets a touch more room than hadith — long vowel marks and
tashkeel need it to avoid collisions between lines. */
.daily-card--quran .daily-card__text{ line-height:2.4; }
.daily-card__explanation{
margin:0;
color:var(--color-text-soft);
font-size:var(--fs-body);
line-height:var(--lh-body);
}
.daily-card__source{
margin:0;
padding-block-start:var(--space-2xs);
border-block-start:1px solid var(--color-border);
color:var(--color-text-muted);
font-size:var(--fs-small);
}
.daily-card__source strong{ color:var(--color-text-soft); font-weight:600; }
.daily-card__media{
border-radius:var(--radius-md);
overflow:hidden;
border:1px solid var(--color-border);
}
.daily-card__media img{ display:block; width:100%; height:auto; }
.daily-card__actions{
display:flex;
gap:var(--space-2xs);
flex-wrap:wrap;
align-items:center;
}
/* Homepage placement */
.daily-home{ padding-block:var(--space-lg); }
.daily-home__grid{
display:grid;
gap:var(--space-md);
grid-template-columns:1fr;
}
.daily-home__aside{
display:flex;
flex-direction:column;
gap:var(--space-2xs);
justify-content:center;
}
/* Archive */
.daily-filters{
display:flex;
gap:0.5rem;
flex-wrap:wrap;
margin-block-end:var(--space-md);
}
.daily-filter{
padding:0.45rem 1rem;
border-radius:var(--radius-badge);
border:1px solid var(--color-border-strong);
background:transparent;
color:var(--color-text-soft);
font:inherit;
font-size:var(--fs-small);
cursor:pointer;
transition:border-color var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft);
}
.daily-filter:hover{ color:var(--color-text); border-color:var(--color-accent); }
.daily-filter[aria-pressed="true"]{
background:var(--color-accent-soft);
border-color:var(--color-accent);
color:var(--color-accent-strong);
font-weight:600;
}
.daily-filter:focus-visible{ outline:2px solid var(--color-accent); outline-offset:2px; }
.daily-archive-grid{
display:grid;
gap:var(--space-md);
grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}
.daily-item-card{
display:flex;
flex-direction:column;
gap:0.6rem;
padding:var(--space-sm);
background:var(--color-surface);
border:1px solid var(--color-border);
border-radius:var(--radius-md);
box-shadow:var(--shadow-sm);
transition:transform var(--dur-base) var(--ease-premium), box-shadow var(--dur-base) var(--ease-premium), border-color var(--dur-base) var(--ease-soft);
}
.daily-item-card:hover{
transform:translateY(-3px);
box-shadow:var(--shadow-md);
border-color:var(--color-border-strong);
}
.daily-item-card__excerpt{
margin:0;
color:var(--color-text-soft);
line-height:1.95;
/* Keep the grid tidy without truncating mid-word in Arabic. */
display:-webkit-box;
-webkit-line-clamp:4;
-webkit-box-orient:vertical;
overflow:hidden;
}
.daily-item-card__footer{
margin-block-start:auto;
display:flex;
align-items:center;
justify-content:space-between;
gap:0.5rem;
font-size:var(--fs-xs);
color:var(--color-text-muted);
}
.daily-empty{
padding:var(--space-lg);
text-align:center;
color:var(--color-text-muted);
}
/* ==========================================================================
تحدي اليوم — homepage teaser
========================================================================== */
.quiz-teaser{
display:grid;
gap:var(--space-md);
align-items:center;
padding:clamp(1.25rem, 3vw, 2.25rem);
border:1px solid var(--color-border);
border-radius:var(--radius-lg);
background:
radial-gradient(120% 140% at 100% 0%, var(--color-accent-soft) 0%, transparent 58%),
var(--color-surface);
box-shadow:var(--shadow-md);
}
.quiz-teaser__title{ margin:0.35rem 0 0; }
.quiz-teaser__desc{
margin:0.5rem 0 0;
color:var(--color-text-soft);
line-height:var(--lh-body);
}
.quiz-teaser__stats{
display:flex;
gap:var(--space-md);
flex-wrap:wrap;
margin-block:var(--space-sm);
padding:0;
list-style:none;
}
.quiz-teaser__stat{
display:flex;
flex-direction:column;
gap:2px;
}
.quiz-teaser__stat b{
font-size:var(--fs-h3);
color:var(--color-text);
font-variant-numeric:tabular-nums;
}
.quiz-teaser__stat span{ font-size:var(--fs-xs); color:var(--color-text-muted); }
.quiz-teaser__reward{
display:inline-flex;
align-items:center;
gap:0.4rem;
padding:0.3rem 0.7rem;
border-radius:var(--radius-badge);
background:var(--color-sage-soft);
color:var(--color-sage-strong);
font-size:var(--fs-xs);
font-weight:600;
}
/* ==========================================================================
Quiz listing
========================================================================== */
.quiz-grid{
display:grid;
gap:var(--space-md);
grid-template-columns:repeat(auto-fill, minmax(min(100%, 330px), 1fr));
}
.quiz-card{
display:flex;
flex-direction:column;
gap:0.6rem;
padding:var(--space-sm);
background:var(--color-surface);
border:1px solid var(--color-border);
border-radius:var(--radius-md);
box-shadow:var(--shadow-sm);
transition:transform var(--dur-base) var(--ease-premium), box-shadow var(--dur-base) var(--ease-premium);
}
.quiz-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.quiz-card__media{
border-radius:var(--radius-sm);
overflow:hidden;
border:1px solid var(--color-border);
aspect-ratio:16 / 9;
}
.quiz-card__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.quiz-card__title{ margin:0; font-size:var(--fs-h3); }
.quiz-card__desc{
margin:0;
color:var(--color-text-soft);
font-size:var(--fs-small);
line-height:1.9;
}
.quiz-card__meta{
margin-block-start:auto;
display:flex;
align-items:center;
gap:0.6rem;
flex-wrap:wrap;
font-size:var(--fs-xs);
color:var(--color-text-muted);
}
/* ==========================================================================
Quiz runner
========================================================================== */
.quiz-app{
max-width:44rem;
margin-inline:auto;
}
.quiz-stage{
padding:clamp(1.1rem, 3vw, 2rem);
background:var(--color-surface);
border:1px solid var(--color-border);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-md);
}
.quiz-stage[hidden]{ display:none; }
/* Intro */
.quiz-intro__facts{
display:flex;
gap:var(--space-md);
flex-wrap:wrap;
margin:var(--space-sm) 0;
padding:0;
list-style:none;
}
.quiz-intro__note{
margin:var(--space-sm) 0 0;
padding:0.7rem 0.9rem;
border-radius:var(--radius-sm);
background:var(--color-bg-alt);
color:var(--color-text-soft);
font-size:var(--fs-small);
line-height:1.8;
}
/* Progress */
.quiz-progress{ margin-block-end:var(--space-md); }
.quiz-progress__labels{
display:flex;
justify-content:space-between;
align-items:baseline;
gap:0.5rem;
margin-block-end:0.45rem;
font-size:var(--fs-small);
color:var(--color-text-soft);
}
.quiz-progress__count{ font-variant-numeric:tabular-nums; }
.quiz-progress__pct{
font-weight:700;
color:var(--color-accent-strong);
font-variant-numeric:tabular-nums;
}
.quiz-progress__track{
height:8px;
border-radius:var(--radius-pill);
background:var(--color-bg-alt);
border:1px solid var(--color-border);
overflow:hidden;
}
.quiz-progress__bar{
display:block;
height:100%;
width:0;
border-radius:var(--radius-pill);
background:var(--gradient-accent);
transition:width var(--dur-base) var(--ease-premium);
}
/* Question */
.quiz-question__image{
margin:0 0 var(--space-sm);
border-radius:var(--radius-md);
overflow:hidden;
border:1px solid var(--color-border);
background:var(--color-bg-alt);
}
.quiz-question__image img{
display:block;
width:100%;
height:auto;
max-height:22rem;
object-fit:contain;
}
.quiz-question__text{
margin:0 0 var(--space-sm);
font-size:clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
line-height:1.85;
color:var(--color-text);
}
/* Options — real radios, styled. */
.quiz-options{
border:0;
padding:0;
margin:0;
display:grid;
gap:0.6rem;
}
.quiz-options legend{
/* The visible question heading already carries this text; keep the legend
for screen readers so the radio group is announced with its question. */
position:absolute;
width:1px;
height:1px;
overflow:hidden;
clip-path:inset(50%);
white-space:nowrap;
}
.quiz-option{
display:flex;
align-items:center;
gap:0.75rem;
/* Comfortably past the 44px touch-target floor on a phone. */
min-height:3.4rem;
padding:0.75rem 1rem;
border:1.5px solid var(--color-border-strong);
border-radius:var(--radius-md);
background:var(--color-surface-2);
cursor:pointer;
transition:border-color var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft);
}
.quiz-option:hover{ border-color:var(--color-accent); }
.quiz-option:active{ transform:scale(0.995); }
.quiz-option input[type="radio"]{
/* Kept in the layout and focusable: the visible ring below is drawn on the
label, but the input itself is what the keyboard and AT interact with. */
appearance:none;
-webkit-appearance:none;
flex:0 0 auto;
width:22px;
height:22px;
margin:0;
border:2px solid var(--color-border-strong);
border-radius:50%;
background:var(--color-surface);
cursor:pointer;
transition:border-color var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft);
}
.quiz-option input[type="radio"]:checked{
border-color:var(--color-accent);
box-shadow:inset 0 0 0 5px var(--color-accent);
}
.quiz-option:has(input:focus-visible){
outline:2px solid var(--color-accent);
outline-offset:2px;
}
/* Fallback for engines without :has() — the ring lands on the input. */
.quiz-option input[type="radio"]:focus-visible{
outline:2px solid var(--color-accent);
outline-offset:3px;
}
.quiz-option:has(input:checked){
border-color:var(--color-accent);
background:var(--color-accent-soft);
}
.quiz-option__key{
flex:0 0 auto;
display:grid;
place-items:center;
width:1.75rem;
height:1.75rem;
border-radius:var(--radius-sm);
background:var(--color-surface);
border:1px solid var(--color-border);
font-family:var(--font-interface-en);
font-size:var(--fs-xs);
font-weight:700;
color:var(--color-text-muted);
}
html[lang="ar"] .quiz-option__key{ font-family:var(--font-interface-ar); }
.quiz-option__text{
flex:1 1 auto;
line-height:1.7;
color:var(--color-text);
}
.quiz-nav{
display:flex;
gap:0.6rem;
align-items:center;
flex-wrap:wrap;
margin-block-start:var(--space-md);
}
.quiz-nav__spacer{ flex:1 1 auto; }
.quiz-nav .btn{ min-height:3rem; }
/* Question transition: a short, single-direction fade+slide. One movement,
not a bounce — this is a study tool, not a game show. */
.quiz-question{ animation:quizQuestionIn var(--dur-base) var(--ease-premium) both; }
@keyframes quizQuestionIn{
from{ opacity:0; transform:translateY(10px); }
to{ opacity:1; transform:none; }
}
/* Name capture */
.quiz-name-field{ margin-block:var(--space-sm); }
.quiz-name-field label{
display:block;
margin-block-end:0.4rem;
font-weight:600;
color:var(--color-text);
}
.quiz-input{
width:100%;
min-height:3rem;
padding:0.7rem 1rem;
font:inherit;
color:var(--color-text);
background:var(--color-surface-2);
border:1.5px solid var(--color-border-strong);
border-radius:var(--radius-md);
}
.quiz-input:focus-visible{ outline:2px solid var(--color-accent); outline-offset:1px; }
.quiz-field-error{
display:block;
margin-block-start:0.35rem;
color:#C24444;
font-size:var(--fs-small);
}
[data-theme="dark"] .quiz-field-error{ color:#F0A0A0; }
/* Result */
.quiz-result__head{
display:flex;
align-items:center;
gap:var(--space-md);
flex-wrap:wrap;
margin-block-end:var(--space-sm);
}
.quiz-score{
display:grid;
place-items:center;
width:7.5rem;
height:7.5rem;
border-radius:50%;
background:conic-gradient(var(--color-accent) calc(var(--score, 0) * 1%), var(--color-bg-alt) 0);
/* Ring, not disc: the inner mask keeps the number legible on both themes. */
mask:radial-gradient(farthest-side, transparent 62%, #000 63%);
-webkit-mask:radial-gradient(farthest-side, transparent 62%, #000 63%);
}
.quiz-score-wrap{ position:relative; width:7.5rem; height:7.5rem; flex:0 0 auto; }
.quiz-score-wrap output{
position:absolute;
inset:0;
display:grid;
place-items:center;
font-family:var(--font-interface-en);
font-size:1.55rem;
font-weight:700;
color:var(--color-text);
font-variant-numeric:tabular-nums;
}
.quiz-result__tally{
display:grid;
gap:0.3rem;
margin:0;
}
.quiz-result__tally div{
display:flex;
align-items:center;
gap:0.5rem;
color:var(--color-text-soft);
}
/* Correctness is never signalled by colour alone — each row carries a glyph
and a word as well. */
.quiz-result__tally svg{ width:18px; height:18px; flex:0 0 auto; }
.quiz-result__tally .is-correct{ color:var(--color-accent-strong); }
.quiz-result__tally .is-incorrect{ color:var(--color-rose-strong); }
.quiz-reward{
margin-block:var(--space-sm);
padding:var(--space-sm);
border-radius:var(--radius-md);
border:1px solid var(--color-border-strong);
background:var(--color-sage-soft);
color:var(--color-sage-strong);
}
.quiz-reward--locked{
background:var(--color-bg-alt);
color:var(--color-text-soft);
}
.quiz-reward h3{ margin:0 0 0.3rem; font-size:var(--fs-h3); color:inherit; }
.quiz-reward p{ margin:0; line-height:var(--lh-body); }
.quiz-review{ margin-block-start:var(--space-md); }
.quiz-review__item{
padding:var(--space-sm) 0;
border-block-start:1px solid var(--color-border);
}
.quiz-review__q{ margin:0 0 0.35rem; font-weight:600; color:var(--color-text); }
.quiz-review__verdict{
display:inline-flex;
align-items:center;
gap:0.35rem;
font-size:var(--fs-small);
font-weight:600;
}
.quiz-review__answer{ margin:0.3rem 0 0; font-size:var(--fs-small); color:var(--color-text-soft); }
.quiz-review__explanation{
margin:0.45rem 0 0;
padding-inline-start:0.8rem;
border-inline-start:2px solid var(--color-accent);
color:var(--color-text-soft);
font-size:var(--fs-small);
line-height:1.85;
}
.quiz-actions{
display:flex;
gap:0.6rem;
flex-wrap:wrap;
margin-block-start:var(--space-md);
}
.quiz-actions .btn{ min-height:3rem; }
.quiz-status{
margin-block-start:var(--space-2xs);
font-size:var(--fs-small);
color:var(--color-text-muted);
}
.quiz-error{
margin-block-start:var(--space-sm);
padding:0.8rem 1rem;
border-radius:var(--radius-sm);
border:1px solid var(--color-rose-strong);
background:var(--color-rose-soft);
color:var(--color-rose-strong);
}
[data-theme="dark"] .quiz-error{
background:rgba(156, 105, 96, 0.18);
color:#E7BDB6;
}
/* ==========================================================================
Result card
--------------------------------------------------------------------------
The on-screen preview and the exported PNG share these values. The export
palette is pinned to the LIGHT brand tones on purpose: a card downloaded
by someone browsing in dark mode still has to be readable when it lands in
a WhatsApp thread on someone else's phone, so the image must not inherit
the viewer's theme. JavaScript reads these three custom properties off
.result-card-export-palette rather than carrying a second copy of the
brand colours.
========================================================================== */
.result-card-export-palette{
--rc-bg:#F7F6F2;
--rc-surface:#FFFFFF;
--rc-ink:#263238;
--rc-ink-soft:#59666B;
--rc-accent:#456355;
--rc-accent-soft:#EAF1EC;
--rc-emerald:#3D7263;
display:none;
}
.result-card{
position:relative;
padding:clamp(1.1rem, 3vw, 1.75rem);
border-radius:var(--radius-lg);
border:1px solid var(--color-border-strong);
background:
radial-gradient(90% 120% at 100% 0%, var(--color-accent-soft) 0%, transparent 60%),
var(--color-surface);
box-shadow:var(--shadow-md);
text-align:center;
}
.result-card__brand{
display:flex;
align-items:center;
justify-content:center;
gap:0.5rem;
color:var(--color-text-soft);
font-size:var(--fs-small);
}
.result-card__brand img{ width:28px; height:28px; }
.result-card__kicker{
margin:var(--space-2xs) 0 0;
font-size:var(--fs-xs);
letter-spacing:0.1em;
text-transform:uppercase;
color:var(--color-accent-strong);
}
html[lang="ar"] .result-card__kicker{ letter-spacing:0; text-transform:none; }
.result-card__name{
margin:0.35rem 0 0;
font-size:var(--fs-h2);
color:var(--color-text);
overflow-wrap:anywhere;
}
.result-card__quiz{ margin:0.2rem 0 var(--space-sm); color:var(--color-text-soft); }
.result-card__score{
font-family:var(--font-interface-en);
font-size:clamp(2.2rem, 1.5rem + 3vw, 3.2rem);
font-weight:700;
color:var(--color-accent-strong);
font-variant-numeric:tabular-nums;
line-height:1.1;
}
.result-card__pct{ color:var(--color-text); font-size:var(--fs-h3); font-variant-numeric:tabular-nums; }
.result-card__tally{
display:flex;
justify-content:center;
gap:var(--space-md);
margin-block:var(--space-sm);
font-size:var(--fs-small);
color:var(--color-text-soft);
}
.result-card__footer{
margin-block-start:var(--space-sm);
padding-block-start:var(--space-2xs);
border-block-start:1px solid var(--color-border);
font-size:var(--fs-xs);
color:var(--color-text-muted);
}
.result-card__id{
font-family:var(--font-interface-en);
letter-spacing:0.06em;
color:var(--color-text-soft);
direction:ltr;
unicode-bidi:isolate;
}
.result-card__canvas-wrap{ margin-block-start:var(--space-sm); }
.result-card__canvas-wrap canvas{
display:block;
width:100%;
max-width:22rem;
height:auto;
margin-inline:auto;
border-radius:var(--radius-md);
border:1px solid var(--color-border);
box-shadow:var(--shadow-sm);
}
/* Result verification page */
.result-verify{
max-width:34rem;
margin-inline:auto;
padding:clamp(1.25rem, 3vw, 2rem);
background:var(--color-surface);
border:1px solid var(--color-border);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-md);
}
.result-verify__row{
display:flex;
justify-content:space-between;
gap:var(--space-sm);
padding-block:0.65rem;
border-block-end:1px solid var(--color-border);
}
.result-verify__row:last-child{ border-block-end:0; }
.result-verify__row dt{ color:var(--color-text-muted); font-size:var(--fs-small); margin:0; }
.result-verify__row dd{ margin:0; color:var(--color-text); font-weight:600; }
/* ==========================================================================
Narrow screens — keep interactive rows clear of the floating contact dock
--------------------------------------------------------------------------
.float-dock is position:fixed at the inline-END bottom corner (54px wide
plus a --space-md offset). The quiz's own primary controls — Next, Finish,
Download card — are right-aligned and land in exactly that corner on a
phone, so the WhatsApp bubble sits on top of the button the visitor needs
to press. Reserving the dock's column on narrow viewports keeps both
reachable. Desktop has room and needs no reservation.
========================================================================== */
@media (max-width:719px){
.quiz-nav,
.quiz-actions,
.daily-card__actions{
padding-inline-end:calc(54px + var(--space-md));
}
}
/* ==========================================================================
Wider screens
========================================================================== */
@media (min-width:720px){
.daily-home__grid{ grid-template-columns:minmax(0, 1.6fr) minmax(0, 1fr); }
.quiz-teaser{ grid-template-columns:minmax(0, 1.5fr) minmax(0, auto); }
}
/* ==========================================================================
Reduced motion — mandatory. Everything non-essential stops; only state
changes that carry meaning (the progress bar's width) remain, and they
snap instead of animating.
========================================================================== */
@media (prefers-reduced-motion: reduce){
.quiz-question{ animation:none; }
.quiz-progress__bar{ transition:none; }
.daily-item-card,
.quiz-card,
.quiz-option{ transition:none; }
.daily-item-card:hover,
.quiz-card:hover{ transform:none; }
.quiz-option:active{ transform:none; }
}
/* ==========================================================================
Daily content — long-form "in depth" body (Wave 5)
Reading typography: wider leading and a capped measure, because this is
the one part of the daily page meant to be read at length rather than
glanced at.
========================================================================== */
.daily-detailed{
margin-block-start:var(--space-md);
padding:clamp(1.1rem, 3vw, 1.75rem);
background:var(--color-surface);
border:1px solid var(--color-border);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-sm);
}
.daily-detailed__heading{
margin:0 0 var(--space-sm);
font-size:var(--fs-h3);
color:var(--color-text);
}
.daily-detailed__body{
max-width:38rem;
color:var(--color-text-soft);
}
.daily-detailed__body p{
margin:0 0 var(--space-sm);
line-height:2.05;
font-size:var(--fs-body);
}
.daily-detailed__body p:last-child{ margin-bottom:0; }
html[lang="ar"] .daily-detailed__body p{ line-height:2.2; }