/* ============ TOKENS ============ */
:root{
  --bg:#F1F3F1;
  --surface:#FFFFFF;
  --surface-2:#E7EBE8;
  --ink:#20262A;
  --ink-soft:#454E52;
  --muted:#6B7478;
  --accent:#DF2A2E;      /* Eleyoun red */
  --accent-ink:#FFFFFF;
  --brand:#279A63;       /* Eleyoun green */
  --brand-strong:#1C7A4E;
  --line:rgba(32,38,42,0.13);
  --shadow:0 18px 40px -20px rgba(32,38,42,0.32);
  --radius:18px;
  --maxw:1180px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#171B1D;
    --surface:#20262A;
    --surface-2:#272E32;
    --ink:#EDEFEC;
    --ink-soft:#C7CDC9;
    --muted:#8E9793;
    --accent:#FF5A5E;
    --accent-ink:#2A0708;
    --brand:#49C787;
    --brand-strong:#7FDDAA;
    --line:rgba(237,239,236,0.14);
    --shadow:0 18px 46px -20px rgba(0,0,0,0.6);
  }
}
:root[data-theme="dark"]{
  --bg:#171B1D;
  --surface:#20262A;
  --surface-2:#272E32;
  --ink:#EDEFEC;
  --ink-soft:#C7CDC9;
  --muted:#8E9793;
  --accent:#FF5A5E;
  --accent-ink:#2A0708;
  --brand:#49C787;
  --brand-strong:#7FDDAA;
  --line:rgba(237,239,236,0.14);
  --shadow:0 18px 46px -20px rgba(0,0,0,0.6);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Karla',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  transition:background .2s ease,color .2s ease;
}
body[dir="rtl"]{ font-family:'Almarai','Karla',sans-serif; }
h1,h2,h3,.display{ font-family:'Cairo',system-ui,sans-serif; font-weight:800; text-wrap:balance; letter-spacing:-.01em; }
body[dir="rtl"] h1, body[dir="rtl"] h2, body[dir="rtl"] h3, body[dir="rtl"] .display{
  font-family:'Cairo',sans-serif; letter-spacing:0;
}
.eyebrow{ text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; font-weight:700; color:var(--ink); background:color-mix(in srgb, var(--accent) 22%, transparent); padding:.3em .8em; border-radius:99px; display:inline-block; }
body[dir="rtl"] .eyebrow{ letter-spacing:0; }
a{ color:inherit; }
img,svg{ max-width:100%; display:block; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.2rem,4vw,2.5rem); }
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }

::selection{ background:var(--accent); color:var(--accent-ink); }

/* ============ TOP CHROME ============ */
.topbar{ position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.topbar-inner{ display:flex; align-items:center; gap:1.5rem; padding:.9rem clamp(1.2rem,4vw,2.5rem); max-width:var(--maxw); margin:0 auto; }
.brand{ display:flex; align-items:center; gap:.6rem; font-family:'Cairo',sans-serif; font-weight:800; font-size:1.25rem; }
body[dir="rtl"] .brand{ font-family:'Cairo',sans-serif; }
.brand-mark{ height:38px; width:auto; flex:none; border-radius:9px; display:block; }
.nav-tabs{ display:flex; align-items:center; gap:.3rem; margin-inline-start:auto; background:var(--surface-2); padding:.3rem; border-radius:99px; max-width:100%; min-width:0; overflow-x:auto; scrollbar-width:none; }
.nav-tabs::-webkit-scrollbar{ display:none; }
.nav-tabs ul{ display:flex; align-items:center; gap:.3rem; list-style:none; margin:0; padding:0; }
.nav-tabs li{ list-style:none; flex:none; }
.nav-tabs button, .nav-tabs a{ border:0; background:transparent; color:var(--muted); font:inherit; font-weight:600; font-size:.86rem; padding:.5rem 1rem; border-radius:99px; cursor:pointer; white-space:nowrap; flex:none; display:inline-block; text-decoration:none; }
.nav-tabs button.active, .nav-tabs a.active, .nav-tabs li.current-menu-item > a{ background:var(--brand); color:var(--surface); }
@media (max-width:760px){
  .topbar-inner{ gap:.7rem; padding:.75rem clamp(1rem,4vw,2.5rem); }
  .brand span{ display:none; }
  .nav-tabs button, .nav-tabs a{ padding:.5rem .75rem; font-size:.8rem; }
}
.chrome-actions{ display:flex; gap:.5rem; align-items:center; }
.icon-btn{ border:1px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; font-weight:700; font-size:.8rem; padding:.5rem .85rem; border-radius:99px; cursor:pointer; }
.icon-btn:hover{ border-color:var(--brand); }
.btn{ display:inline-flex; align-items:center; gap:.5rem; border:0; cursor:pointer; font:inherit; font-weight:700; padding:.75rem 1.4rem; border-radius:99px; font-size:.92rem; }
.btn-primary{ background:var(--brand); color:#fff; box-shadow:var(--shadow); }
.btn-primary:hover{ background:var(--brand-strong); }
.btn-ghost{ background:transparent; border:1.5px solid var(--line); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--brand); }
.btn-gold{ background:var(--accent); color:var(--accent-ink); }

/* ============ VIEWS ============ */
.view{ display:none; }
.view.active{ display:block; animation:fade .35s ease; }
@keyframes fade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

/* ---- HERO / HOME ---- */
#view-home-wrap{ position:relative; background:var(--bg); overflow:clip; }
.hero{ position:relative; overflow:visible; padding:clamp(3rem,8vw,6rem) 0 clamp(2.5rem,6vw,4rem); }
.mandala{ position:absolute; z-index:0; pointer-events:none; }
.mandala svg{ width:100%; height:100%; display:block; }
.mandala.mandala-hero{ top:-220px; inset-inline-end:-260px; width:760px; height:760px; opacity:.8; }
body[dir="rtl"] .mandala.mandala-hero{ transform:scaleX(-1); }
.mandala.mandala-low{ bottom:-260px; inset-inline-start:-280px; width:640px; height:640px; opacity:.6; }
body[dir="rtl"] .mandala.mandala-low{ transform:scaleX(-1); }
@media (max-width:760px){
  .mandala.mandala-hero{ width:460px; height:460px; top:-140px; inset-inline-end:-200px; }
  .mandala.mandala-low{ width:380px; height:380px; bottom:-160px; inset-inline-start:-180px; }
}
.hero-inner{ position:relative; z-index:1; text-align:center; }
.hero h1{ font-size:clamp(2.3rem,5vw,3.6rem); margin:.5em 0 .35em; }
.hero p.lede{ max-width:640px; margin:0 auto; color:var(--ink-soft); font-size:1.08rem; line-height:1.65; }
.hero-stats{ display:flex; justify-content:center; gap:clamp(1.5rem,5vw,3.5rem); margin-top:2.4rem; flex-wrap:wrap; }
.stat b{ font-family:'Cairo',sans-serif; font-weight:800; font-size:1.6rem; display:block; color:var(--brand); }
body[dir="rtl"] .stat b{ font-family:'Cairo',sans-serif; }
.stat span{ color:var(--muted); font-size:.82rem; }

.lecturers{ position:relative; overflow:clip; padding:1rem 0 clamp(3rem,7vw,5rem); }
.lecturer-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.2rem,3vw,2.2rem); }
@media (max-width:760px){ .lecturer-grid{ grid-template-columns:1fr; } }
.folio{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:8.2rem clamp(1.6rem,3vw,2.4rem) clamp(1.6rem,3vw,2.4rem); box-shadow:var(--shadow); position:relative; text-align:center; overflow:visible; }
.folio:nth-child(2){ margin-top:clamp(0px,3vw,2.2rem); }
@media (max-width:760px){ .folio:nth-child(2){ margin-top:0; } }
.avatar{ width:74px; height:74px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Cairo',sans-serif; font-weight:800; font-size:1.6rem; color:#fff; margin-bottom:1.1rem; }
/* Large "floating portrait" treatment for the two lecturer cards: an
   arch-topped photo that pops above the card on its own layered shadow —
   the "oriental medallion" look, each tilted slightly for a gallery feel.
   Lifted well clear of the card's padding-top so the photo never overlaps
   the name/bio text below it. */
.folio .avatar{
  position:absolute; top:-5.6rem; left:50%; margin:0;
  width:172px; height:206px; border-radius:86px 86px 14px 14px;
  border:7px solid var(--surface);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent), 0 26px 44px -14px rgba(10,20,18,.45), 0 10px 18px -6px rgba(10,20,18,.3);
  transition:transform .25s ease, box-shadow .25s ease;
}
.folio:nth-child(1) .avatar{ transform:translateX(-50%) rotate(-3deg); }
.folio:nth-child(2) .avatar{ transform:translateX(-50%) rotate(3deg); }
.folio:hover .avatar{ transform:translateX(-50%) rotate(0deg) scale(1.03); }
.folio h2{ font-size:1.5rem; margin:.1em 0 .2em; }
.folio .role{ color:var(--ink); background:color-mix(in srgb, var(--accent) 20%, transparent); display:inline-block; padding:.25em .7em; border-radius:99px; font-size:.78rem; font-weight:700; margin-bottom:.9rem; }
.folio p{ color:var(--ink-soft); line-height:1.6; margin:0 0 1.3rem; }
.folio-meta{ display:flex; justify-content:center; gap:1.4rem; margin-bottom:1.3rem; flex-wrap:wrap; }
.folio-meta div span{ display:block; font-size:.75rem; color:var(--muted); }
.folio-meta div b{ font-family:'Cairo',sans-serif; font-weight:800; }

.section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin:0 0 1.2rem; flex-wrap:wrap; }
.section-head h2{ font-size:1.5rem; margin:0; }
.preview-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
@media (max-width:900px){ .preview-row{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .preview-row{ grid-template-columns:1fr; } }

.card{ background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease; text-align:start; border:1px solid var(--line); }
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.card-media{ aspect-ratio:16/9; position:relative; display:flex; align-items:center; justify-content:center; color:#fff; background:linear-gradient(135deg,var(--brand),var(--brand-strong)); }
.card-media .dur{ position:absolute; bottom:.5rem; inset-inline-end:.5rem; background:rgba(0,0,0,.55); color:#fff; font-size:.72rem; padding:.15em .55em; border-radius:6px; font-variant-numeric:tabular-nums; }
.card-media .src{ position:absolute; top:.5rem; inset-inline-start:.5rem; font-size:.68rem; font-weight:700; padding:.2em .6em; border-radius:99px; }
.src.yt{ background:#fff; color:#B3261E; }
.src.own{ background:var(--accent); color:var(--accent-ink); }
.play-ico{ width:44px; height:44px; opacity:.9; }
.card-body{ padding:.9rem 1rem 1.1rem; }
.card-body h3{ font-size:1rem; margin:0 0 .3rem; font-family:'Karla',sans-serif; font-weight:700; }
body[dir="rtl"] .card-body h3{ font-family:'Almarai',sans-serif; }
.card-body .sub{ font-size:.8rem; color:var(--muted); }
.article-card .card-media{ background:linear-gradient(135deg, var(--accent), #7a5c22); }

.cta-band{ background:var(--brand); color:#fff; border-radius:var(--radius); padding:clamp(1.8rem,4vw,2.8rem); display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin:clamp(2rem,5vw,3.5rem) 0; }
.cta-band h3{ margin:0 0 .3rem; font-size:1.5rem; }
.cta-band p{ margin:0; opacity:.85; max-width:460px; }

footer{ position:relative; z-index:1; background:var(--bg); border-top:1px solid var(--line); padding:2.2rem 0; color:var(--muted); font-size:.85rem; }
footer .wrap{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; }

/* ---- FORUM (lecturer page) ---- */
.lecturer-banner{ position:relative; background:linear-gradient(160deg,var(--brand),var(--brand-strong)); color:#fff; padding:clamp(2.2rem,5vw,3.5rem) 0; overflow:hidden; }
.lecturer-banner.has-photo{ background-size:cover; background-position:center 28%; min-height:clamp(260px,40vw,440px); display:flex; align-items:flex-end; padding-bottom:clamp(1.8rem,4vw,2.6rem); }
.lecturer-banner.has-photo::before{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,16,14,.05) 0%, rgba(8,16,14,.55) 55%, rgba(8,16,14,.88) 100%); }
.lecturer-banner .wrap{ position:relative; z-index:1; }
.lecturer-banner.has-photo .wrap{ width:100%; }
.lb-inner{ display:flex; gap:1.6rem; align-items:center; flex-wrap:wrap; }
.lb-inner .avatar{ width:96px; height:96px; font-size:2.1rem; border:3px solid rgba(255,255,255,.35); margin:0; flex:none; }
.lb-text h1{ margin:0; font-size:clamp(1.6rem,3.4vw,2.3rem); color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.35); }
.lb-tags{ display:flex; gap:.5rem; margin-top:.8rem; flex-wrap:wrap; }
.lb-tags span{ background:rgba(255,255,255,.16); padding:.25em .8em; border-radius:99px; font-size:.75rem; font-weight:600; }

.forum-tabs{ display:flex; gap:.4rem; border-bottom:1px solid var(--line); margin:2rem 0 1.6rem; }
.forum-tabs button{ border:0; background:transparent; font:inherit; font-weight:700; color:var(--muted); padding:.8rem 1.1rem; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; }
.forum-tabs button.active{ color:var(--brand); border-color:var(--brand); }
.toolbar{ display:flex; gap:.7rem; margin-bottom:1.4rem; flex-wrap:wrap; align-items:center; }
.toolbar input{ flex:1; min-width:180px; padding:.65rem 1rem; border-radius:99px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; }
.toolbar .filter-pill{ border:1px solid var(--line); background:var(--surface); padding:.5rem 1rem; border-radius:99px; font-size:.82rem; color:var(--muted); font-weight:600; cursor:pointer; }
.toolbar .filter-pill.active{ background:var(--brand); color:#fff; border-color:var(--brand); }
.content-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-bottom:3rem; }
@media (max-width:900px){ .content-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .content-grid{ grid-template-columns:1fr; } }

/* ---- TIMELINE (all articles + videos, chronological) ---- */
.timeline{ margin-bottom:3rem; }
.timeline-date{ font-family:'Cairo',sans-serif; font-weight:800; font-size:.82rem; color:var(--brand); text-transform:uppercase; letter-spacing:.08em; margin:1.8rem 0 .7rem; }
.timeline-date:first-child{ margin-top:0; }
.timeline-item{ display:flex; gap:1rem; align-items:stretch; cursor:pointer; border-radius:12px; padding:.5rem .6rem; }
.timeline-item:hover{ background:var(--surface-2); }
.tl-rail{ width:14px; flex:none; display:flex; flex-direction:column; align-items:center; }
.tl-dot{ width:11px; height:11px; border-radius:50%; background:var(--brand); border:2px solid var(--surface); box-shadow:0 0 0 2px var(--line); margin-top:.35rem; flex:none; }
.tl-line{ width:2px; flex:1; background:var(--line); margin-top:.25rem; }
.tl-media{ width:56px; height:56px; border-radius:10px; flex:none; display:flex; align-items:center; justify-content:center; color:#fff; background:linear-gradient(135deg,var(--brand),var(--brand-strong)); }
.tl-media svg{ width:24px; height:24px; }
.timeline-item[data-goto="article"] .tl-media{ background:linear-gradient(135deg,var(--accent),#8a2023); }
.tl-body{ padding:.15rem 0 .9rem; min-width:0; }
.tl-type{ font-size:.72rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.tl-body h4{ font-family:'Karla',sans-serif; font-weight:700; font-size:.98rem; margin:.2rem 0; }
body[dir="rtl"] .tl-body h4{ font-family:'Almarai',sans-serif; }
.tl-date{ font-size:.78rem; color:var(--muted); font-variant-numeric:tabular-nums; }

/* ---- VIDEO VIEW ---- */
.video-layout{ display:grid; grid-template-columns:2fr 1fr; gap:2rem; padding:2rem 0 3rem; align-items:start; }
@media (max-width:900px){ .video-layout{ grid-template-columns:1fr; } }
.player{ aspect-ratio:16/9; border-radius:var(--radius); background:linear-gradient(135deg,#0d2320,#123a35); display:flex; align-items:center; justify-content:center; color:#fff; position:relative; overflow:hidden; box-shadow:var(--shadow); }
.player .play-big{ width:72px; height:72px; opacity:.92; cursor:pointer; }
.player .badge{ position:absolute; top:1rem; inset-inline-start:1rem; background:rgba(255,255,255,.14); backdrop-filter:blur(6px); padding:.3em .8em; border-radius:99px; font-size:.75rem; font-weight:700; }
.v-title{ font-size:1.6rem; margin:1.2rem 0 .4rem; }
.v-meta{ color:var(--muted); font-size:.88rem; display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.v-desc{ color:var(--ink-soft); line-height:1.7; margin-bottom:1.2rem; }
.tag-row{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:2rem; }
.tag-row span{ background:var(--surface-2); padding:.3em .8em; border-radius:99px; font-size:.78rem; color:var(--muted); }

.comments h3{ font-size:1.2rem; margin:0 0 1.1rem; }
.comment-form{ display:flex; gap:.7rem; margin-bottom:1.6rem; }
.comment-form .cavatar{ width:38px; height:38px; border-radius:50%; flex:none; }
.comment-form textarea{ flex:1; border:1px solid var(--line); border-radius:12px; padding:.7rem .9rem; font:inherit; background:var(--surface); color:var(--ink); resize:vertical; min-height:44px; }
.comment{ display:flex; gap:.7rem; margin-bottom:1.3rem; }
.comment .cavatar{ width:38px; height:38px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:.85rem; }
.comment-body{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:.75rem .95rem; flex:1; }
.comment-body .who{ font-weight:700; font-size:.88rem; display:flex; gap:.5rem; align-items:center; }
.comment-body .who time{ font-weight:400; color:var(--muted); font-size:.76rem; }
.comment-body p{ margin:.35rem 0 .5rem; color:var(--ink-soft); font-size:.92rem; line-height:1.55; }
.comment-actions{ display:flex; gap:1rem; font-size:.78rem; font-weight:700; color:var(--muted); }
.comment-actions button{ background:none; border:0; color:inherit; font:inherit; font-weight:700; cursor:pointer; padding:0; }
.comment-actions button:hover{ color:var(--brand); }
.replies{ margin-inline-start:2.6rem; margin-top:.8rem; }

.sidebar h4{ font-size:1rem; margin:0 0 1rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.mini-card{ display:flex; gap:.7rem; margin-bottom:.9rem; cursor:pointer; }
.mini-media{ width:100px; aspect-ratio:16/9; border-radius:8px; background:linear-gradient(135deg,var(--brand),var(--brand-strong)); flex:none; }
.mini-card .mtitle{ font-size:.85rem; font-weight:700; line-height:1.35; margin:0 0 .2rem; }
.mini-card .msub{ font-size:.74rem; color:var(--muted); }

/* ---- ARTICLE VIEW ---- */
.article-wrap{ max-width:720px; margin:0 auto; padding:2.4rem 0 4rem; }
.article-wrap .eyebrow{ margin-bottom:1rem; }
.article-wrap h1{ font-size:clamp(1.9rem,4vw,2.6rem); margin:0 0 .6rem; }
.article-meta{ display:flex; align-items:center; gap:.7rem; color:var(--muted); font-size:.88rem; margin-bottom:2rem; }
.article-meta .cavatar{ width:34px; height:34px; border-radius:50%; }
.article-body{ font-size:1.08rem; line-height:1.8; color:var(--ink-soft); }
.article-body p{ margin:0 0 1.3rem; }
.article-body h2{ font-size:1.35rem; margin:2rem 0 .8rem; color:var(--ink); }
.pull{ border-inline-start:3px solid var(--accent); padding-inline-start:1.1rem; font-family:'Cairo',sans-serif; font-weight:700; font-size:1.2rem; font-style:italic; color:var(--ink); margin:2rem 0; }
body[dir="rtl"] .pull{ font-family:'Cairo',sans-serif; font-style:normal; }

/* ---- AUTH VIEW ---- */
.auth-wrap{ max-width:420px; margin:3rem auto; }
.auth-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:2.2rem; box-shadow:var(--shadow); }
.auth-card h2{ margin:0 0 .3rem; font-size:1.5rem; }
.auth-card p.sub{ color:var(--muted); margin:0 0 1.5rem; font-size:.9rem; }
.auth-tabs{ display:flex; gap:.4rem; background:var(--surface-2); border-radius:99px; padding:.3rem; margin-bottom:1.5rem; }
.auth-tabs button{ flex:1; border:0; background:transparent; font:inherit; font-weight:700; padding:.55rem; border-radius:99px; cursor:pointer; color:var(--muted); }
.auth-tabs button.active{ background:var(--brand); color:#fff; }
.field{ margin-bottom:1rem; }
.field label{ display:block; font-size:.82rem; font-weight:700; margin-bottom:.35rem; color:var(--ink-soft); }
.field input, .field textarea{ width:100%; padding:.7rem .9rem; border-radius:10px; border:1px solid var(--line); background:var(--bg); color:var(--ink); font:inherit; }
.field textarea{ min-height:120px; resize:vertical; }

/* ============ DISCUSSIONS ============ */
.discussion-form{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:clamp(1.2rem,3vw,1.8rem); margin:1.6rem 0 2.2rem; }
.discussion-list{ display:flex; flex-direction:column; gap:.7rem; }
.discussion-row{ display:flex; align-items:center; gap:.9rem; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:1rem 1.2rem; text-decoration:none; color:inherit; transition:border-color .15s ease, transform .15s ease; }
.discussion-row:hover{ border-color:var(--brand); transform:translateY(-1px); }
.discussion-row h4{ margin:0 0 .35rem; font-size:1.02rem; }
.discussion-meta{ color:var(--muted); font-size:.82rem; }
.auth-card .btn{ width:100%; justify-content:center; margin-top:.5rem; }