/* ===== Taiz Time — content layer on top of ts_news247 template ===== */
/* match the OLD site's exact font setup: face is named "GretaArabic" while
   declarations use "Greta Arabic" (space) — same as the original, so the site
   renders in the same system sans-serif fallback the old site actually shows. */
/* real Greta Arabic (the logo typeface) — family name matches the declarations */
@font-face{ font-family:'Greta Arabic'; src:url(/assets/fonts/GretaArabic-Light.otf) format('opentype');   font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:'Greta Arabic'; src:url(/assets/fonts/GretaArabic-Regular.otf) format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Greta Arabic'; src:url(/assets/fonts/GretaArabic-Medium.otf) format('opentype');  font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Greta Arabic'; src:url(/assets/fonts/GretaArabic-Bold.otf) format('opentype');    font-weight:700; font-style:normal; font-display:swap; }

:root{ --red:#ec0000; --red-d:#c40000; --ink:#1c1c1c; --muted:#7d7d7d; --line:#e6e6e6; --card:#fff; --shadow:0 1px 8px rgba(0,0,0,.08); }

/* ============================================================
   BASE LAYOUT — self-contained (replaces bootstrap + Helix
   template + rtl + custom css that came from the old Joomla site)
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ line-height:1.7; font-size:16px; background:#f3f4f6; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ margin:0; }
button{ font-family:inherit; }

.container{ width:100%; margin-left:auto; margin-right:auto; }
.row{ display:flex; flex-wrap:wrap; }
.sp-column{ width:100%; }

/* header shell */
#sp-header{ background:#fff; border-bottom:1px solid #dedede; }
#sp-header .row{ flex-wrap:nowrap; align-items:center; }
#sp-logo,#sp-menu,#sp-search{ min-width:0; }

/* main menu */
.sp-megamenu-parent{ display:flex; align-items:center; }
.sp-megamenu-parent > li{ position:relative; }
.sp-megamenu-parent > li > a{
  display:inline-block; color:#1c1c1c; font-weight:500; font-size:16px;
  padding:0 14px; line-height:80px; transition:color .15s;
}
.sp-megamenu-parent > li > a:hover,
.sp-megamenu-parent > li.active > a{ color:var(--red); }

/* main body + footer shells */
#sp-main-body{ background:#f3f4f6; }
#sp-component{ width:100%; }
#sp-footer{ background:#1c1c1c; color:#cfcfcf; }
#sp-footer .row{ flex-wrap:wrap; }
#sp-footer1,#sp-footer2{ flex:1 1 300px; }


body,#sp-header,.sp-megamenu-parent,.card h3,.card h4,.mini h4,.article,.section-head h1,.section-head h2,.hero-cap h2{ font-family:'Greta Arabic','Segoe UI',Tahoma,'Noto Naskh Arabic',sans-serif; }
body{ color:var(--ink); font-weight:400; }
html,body{ overflow-x:clip; max-width:100%; }
img{ max-width:100%; height:auto; }
.body-wrapper,.body-innerwrapper{ width:100%; max-width:100%; overflow-x:clip; }
#sp-main-body .container,#sp-header .container,#sp-footer .container{ width:100%; }
/* keep content bounded & centered, always leaving a gutter at the screen edges */
@media(min-width:992px){
  #sp-header .container,#sp-main-body .container,#sp-footer .container{
    max-width:min(1200px, calc(100% - 56px)); margin-left:auto; margin-right:auto;
  }
}
@media(min-width:1400px){
  #sp-header .container,#sp-main-body .container,#sp-footer .container{ max-width:1280px; }
}
/* neutralise Bootstrap's negative row margins so the gutter is never eaten */
#sp-main-body > .container > .row{ margin-left:0; margin-right:0; }
#sp-main-body #sp-component{ padding-left:0; padding-right:0; }

/* ===== neutralise template header rules that break our layout =====
   ts_news247 makes #sp-search absolute (overlapping the logo) and hard-caps
   .logo height with !important. Undo both. */
#sp-header.headerWithMenu #sp-search,
body.rtl #sp-header.headerWithMenu #sp-search{ position:static !important; inset:auto !important; width:auto !important; }
#sp-header .logo{ height:auto !important; display:flex !important; align-items:center; }
#sp-header .logo a{ display:inline-flex !important; align-items:center; }
#sp-header.headerWithMenu #offcanvas-toggler,
body.rtl #offcanvas-toggler{ float:none !important; line-height:1 !important; margin:0 !important; position:static !important; }
#sp-header .row{ position:relative; display:flex; align-items:center; flex-wrap:nowrap; }
/* icons sit on the same baseline as the main menu items */
#sp-search, #sp-menu, #sp-logo{ display:flex; align-items:center; }
#sp-search .sp-column{ display:flex; align-items:center; justify-content:flex-end; width:100%; }
#sp-menu .sp-column, #sp-menu .sp-megamenu-wrapper{ width:100%; }
#sp-header .sp-megamenu-parent{ display:flex; align-items:center; flex-wrap:nowrap; }

/* responsive main menu: shrink items as the screen narrows */
@media(min-width:992px){
  #sp-header.headerWithMenu .sp-megamenu-parent > li > a{
    line-height:80px !important;
    padding:0 clamp(8px, 1.15vw, 18px) !important;
    font-size:clamp(13px, 1.25vw, 18px) !important;
    font-weight:500 !important;
    white-space:nowrap;
  }
  .tt-ctrl{ width:38px; height:38px; font-size:17px; }
  /* columns size to content; menu takes the slack and spreads its items,
     so there is no big empty gap to the left of the nav */
  #sp-logo{ flex:0 0 auto; width:auto; max-width:32%; }
  #sp-menu{ flex:1 1 auto; width:auto; max-width:none; }
  #sp-search{ flex:0 0 auto; width:auto; max-width:none; }
  /* items packed next to the logo; the leftover space sits before the
     control icons, which stay at the far left */
  #sp-header .sp-megamenu-parent{ width:100%; justify-content:flex-start; gap:0; }
}
/* always keep a gutter between content and the screen edges */
#sp-header .container, #sp-main-body .container, #sp-footer .container{
  padding-left:16px; padding-right:16px;
}

/* ===== sticky header (logo + main menu stay on top while scrolling) ===== */
#sp-header{ position:sticky; top:0; z-index:2000; background:#fff; transition:box-shadow .2s, padding .2s; }
body.scrolled #sp-header{ box-shadow:0 3px 14px rgba(0,0,0,.14); }
body.scrolled #sp-header .logo img{ max-height:52px; transition:max-height .2s; }
/* the compact-on-scroll menu only applies to the horizontal desktop menu —
   on mobile this would stretch the drawer items */
@media(min-width:992px){
  body.scrolled #sp-header.headerWithMenu .sp-megamenu-parent > li > a{ line-height:58px !important; }
}
html.dark #sp-header{ background:#1a1a1a; }

/* ===== logo: always visible, right-aligned (RTL) ===== */
#sp-logo{ display:flex; align-items:center; }
#sp-logo .tt-logo{ width:100%; text-align:right; }
#sp-logo .tt-logo img{ width:auto; }
#sp-logo .tt-logo-desktop{ display:inline-block; max-height:88px; }
#sp-logo .tt-logo-mobile{ display:none; max-height:58px; }
@media(max-width:991px){ #sp-logo .tt-logo-desktop{ display:none; } #sp-logo .tt-logo-mobile{ display:inline-block; } }

/* ===== homepage: bigger titles, no excerpt ===== */
.home-page .card h3{ font-size:23px; line-height:1.5; font-weight:700; }
.home-page .card .excerpt{ display:none; }
.home-page .hero-cap h2{ font-size:34px; line-height:1.45; }
.home-page .hero-s h3{ font-size:20px; }
.home-page .home-col .card h3{ font-size:19px; }
.home-page .home-col .mini h4{ font-size:16px; }
@media(max-width:767px){ .home-page .card h3{ font-size:20px; } .home-page .hero-cap h2{ font-size:24px; } .home-page .hero-s h3{ font-size:18px; } }

/* ===== full-screen search overlay ===== */
/* (the header must stay position:sticky — the overlay is position:fixed) */
.menu-search-icon{ cursor:pointer; }
.tt-search-overlay{ position:fixed; inset:0; background:rgba(18,18,18,.94); z-index:3000; display:none; align-items:center; justify-content:center; padding:24px; }
.tt-search-overlay.open{ display:flex; animation:ttfade .18s ease; }
@keyframes ttfade{ from{opacity:0} to{opacity:1} }
.tt-search-box{ width:100%; max-width:780px; }
.tt-search-box form{ display:flex; border-radius:12px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.5); background:#fff; }
.tt-search-box input{ flex:1; border:0; padding:22px 26px; font-size:26px; font-family:inherit; outline:none; background:#fff; color:#1c1c1c; }
.tt-search-box .btn{ border:0; background:var(--red); color:#fff; padding:0 34px; font-size:26px; cursor:pointer; }
.tt-search-close{ position:absolute; top:22px; inset-inline-start:30px; background:none; border:0; color:#fff; font-size:44px; line-height:1; cursor:pointer; opacity:.85; }
.tt-search-close:hover{ opacity:1; }
.tt-search-hint{ color:#bbb; text-align:center; margin-top:18px; font-size:15px; }
@media(max-width:600px){ .tt-search-box input{ font-size:20px; padding:16px 18px; } .tt-search-box .btn{ font-size:20px; padding:0 22px; } }

/* keep template font (Greta Arabic); just normalise our blocks */
#sp-main-body{ padding:24px 0 44px; background:#f3f4f6; }
#sp-component .sp-column{ min-width:0; }
img{ max-width:100%; }
a{ text-decoration:none; color:inherit; }

/* headings / section titles like the template */
.section{ margin-bottom:34px; }
.section-head{ display:flex; align-items:center; gap:12px; margin:0 0 18px; border-bottom:1px solid var(--line); }
.section-head h1,.section-head h2{ font-size:20px; margin:0; padding:6px 0; border-bottom:3px solid var(--red); color:var(--ink); font-weight:700; }
.section-head .more{ margin-inline-start:auto; font-size:13px; color:var(--red); font-weight:700; padding-bottom:6px; }
.page-title{ font-size:24px; margin:0 0 8px; }
.crumbs{ color:var(--muted); font-size:13px; margin-bottom:14px; }
.crumbs a:hover{ color:var(--red); }

/* two-column layout */
.layout{ display:grid; grid-template-columns:1fr 330px; gap:26px; align-items:start; }
@media(max-width:991px){ .layout{ grid-template-columns:1fr; } }

/* grids */
.grid{ display:grid; gap:18px; }
.grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.grid.cols-4{ grid-template-columns:repeat(4,1fr); }
@media(max-width:991px){ .grid.cols-4{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:767px){ .grid.cols-3,.grid.cols-4{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:479px){ .grid.cols-2,.grid.cols-3,.grid.cols-4{ grid-template-columns:1fr; } }
/* trio: exactly-3 rows that skip the ugly 2+1 state (3 -> 1) */
.grid.trio{ grid-template-columns:repeat(3,1fr); }
@media(max-width:700px){ .grid.trio{ grid-template-columns:1fr; } }

/* news card */
.card{ background:var(--card); border-radius:6px; overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; }
.card .thumb{ position:relative; aspect-ratio:16/9; overflow:hidden; background:#e9e9e9; display:block; }
.card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .35s; }
.card:hover .thumb img{ transform:scale(1.06); }
.card .cat-tag{ position:absolute; inset-block-start:10px; inset-inline-start:0; background:var(--red); color:#fff; font-size:12px; font-weight:700; padding:3px 12px; }
.card .body{ padding:12px 14px 15px; display:flex; flex-direction:column; gap:8px; flex:1; }
.card h3{ margin:0; font-size:16px; line-height:1.6; font-weight:700; color:var(--ink); }
.card:hover h3{ color:var(--red); }
.card .excerpt{ color:var(--muted); font-size:13px; margin:0; }
.card .meta{ margin-top:auto; color:#9a9a9a; font-size:12px; display:flex; gap:12px; align-items:center; }
.card .meta .views::before{ content:"\f06e"; font-family:FontAwesome; margin-inline-end:4px; }

/* compact rows */
.mini{ display:flex; gap:11px; align-items:flex-start; padding:11px 0; border-bottom:1px solid var(--line); }
.mini:last-child{ border-bottom:0; }
.mini .thumb{ flex:none; width:104px; aspect-ratio:16/9; border-radius:5px; overflow:hidden; background:#e9e9e9; }
.mini .thumb img{ width:100%; height:100%; object-fit:cover; }
.mini h4{ margin:0; font-size:14px; line-height:1.55; font-weight:600; color:var(--ink); }
.mini:hover h4{ color:var(--red); }
.mini .date{ color:#9a9a9a; font-size:12px; margin-top:3px; }
.ranked .num{ flex:none; width:28px; height:28px; border-radius:50%; background:var(--red); color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; font-size:13px; }

/* hero */
.hero{ display:grid; grid-template-columns:2fr 1fr; gap:16px; margin-bottom:30px; }
/* Large screens: make the hero image exactly as tall as the two stacked items
   next to it while every image stays 16:9.
     main_h = 2*side_h + gap , and h = w*9/16  =>  side_w = (W - g - g*16/9) / 3
   The main column takes the remainder (1fr), so the heights line up exactly. */
@media(min-width:992px){
  .hero{ --hg:16px; grid-template-columns:minmax(0,1fr) calc((100% - var(--hg) - (var(--hg) * 16 / 9)) / 3); }
}
@media(max-width:767px){ .hero{ grid-template-columns:1fr; } }
.hero-main{ position:relative; border-radius:6px; overflow:hidden; aspect-ratio:16/9; box-shadow:var(--shadow); }
.hero-main img{ width:100%; height:100%; object-fit:cover; }
/* The shade is deliberately short: it stays solid enough under the text to keep
   it readable over a bright photo, then fades out quickly so most of the
   picture is left uncovered. */
.hero-cap{ position:absolute; inset-inline:0; inset-block-end:0; padding:34px 18px 16px; color:#fff;
  background:linear-gradient(to top, rgba(0,0,0,.80) 0%, rgba(0,0,0,.72) 58%, rgba(0,0,0,.44) 84%, rgba(0,0,0,0) 100%);
  text-shadow:0 1px 2px rgba(0,0,0,.5); }
.hero-cap .cat-tag{ background:var(--red); display:inline-block; font-size:12px; font-weight:700; padding:3px 12px; margin-bottom:8px; }
.hero-cap h2{ margin:0; font-size:23px; line-height:1.55; color:#fff; }
.hero-side{ display:flex; flex-direction:column; gap:16px; }
.hero-s{ position:relative; border-radius:6px; overflow:hidden; box-shadow:var(--shadow); aspect-ratio:16/9; }
.hero-s img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.hero-s .cap{ position:absolute; inset-inline:0; inset-block-end:0; padding:24px 12px 11px; color:#fff;
  background:linear-gradient(to top, rgba(0,0,0,.80) 0%, rgba(0,0,0,.72) 58%, rgba(0,0,0,.44) 84%, rgba(0,0,0,0) 100%);
  text-shadow:0 1px 2px rgba(0,0,0,.5); }
.hero-s h3{ margin:0; font-size:14px; line-height:1.5; color:#fff; }
/* the side items carry a section chip on phones only — on wider screens their
   caption sits on the picture and a chip there would crowd it */
.hero-s .cap .cat-tag{ display:none; }

/* Phones: never crop a content picture — every thumbnail keeps its 16:9 frame
   but shows the whole image, so nothing is cut off the sides or the top and
   bottom. Round writer avatars are left alone: a circle is a deliberate crop,
   and `contain` inside one would letterbox the face. */
@media(max-width:767px){
  .card .thumb, .mini .thumb, .top-lead .thumb, .side-video .thumb{ background:#f1f1f1; }
  .card .thumb img, .mini .thumb img, .top-lead .thumb img,
  .side-video .thumb img, .video-card .thumb img,
  .hero-main img, .hero-s img{ object-fit:contain !important; }
  .mini .thumb, .side-video .thumb{ aspect-ratio:16/9; height:auto; }
  html.dark .card .thumb, html.dark .mini .thumb,
  html.dark .top-lead .thumb, html.dark .side-video .thumb{ background:#181818; }
}

/* Phones: the title moves out from on top of the picture and sits under it on a
   card, so the image is shown clean with no darkening at all. The section chip
   straddles the edge of the picture to tie the two halves together, and the
   lead story is marked by a red edge along the top of its card. */
@media(max-width:767px){
  .hero{ gap:16px; }
  .hero-main, .hero-s{ display:block; aspect-ratio:auto; background:var(--card);
    border-radius:16px; box-shadow:0 8px 26px rgba(0,0,0,.10);
    -webkit-tap-highlight-color:transparent;
    transition:transform .18s ease, box-shadow .18s ease; }
  .hero-main{ border-block-start:3px solid var(--red); }
  .hero-main:active, .hero-s:active{ transform:scale(.985); box-shadow:0 3px 12px rgba(0,0,0,.14); }
  .hero-main img, .hero-s img{ position:static; display:block; width:100%; height:auto;
    aspect-ratio:16/9; object-fit:cover; }

  .hero-cap, .hero-s .cap{ position:relative; display:block;
    background:none; text-shadow:none; color:var(--ink);
    padding-inline:16px; padding-block:20px 18px; }

  /* the chip needs its own colours here: the caption around it is now dark text
     on a light card, so it can no longer inherit the white it used on the photo */
  .hero-cap .cat-tag, .hero-s .cap .cat-tag{ display:inline-block;
    position:absolute; inset-block-start:-14px; inset-inline-start:16px;
    background:var(--red); color:#fff; font-weight:700;
    margin:0; padding:5px 15px; border-radius:999px; font-size:12px; line-height:1.7;
    box-shadow:0 4px 12px rgba(236,0,0,.38); }

  .home-page .hero-cap h2{ color:var(--ink); font-size:25px; line-height:1.45; letter-spacing:-.2px; }
  .home-page .hero-s h3{ color:var(--ink); font-size:18px; line-height:1.5; letter-spacing:-.2px; }

  html.dark .hero-main, html.dark .hero-s{ background:#1e1e1e; box-shadow:0 8px 26px rgba(0,0,0,.5); }
  html.dark .home-page .hero-cap h2, html.dark .home-page .hero-s h3{ color:#ececec; }
}

/* sidebar widgets */
.sidebar .widget{ background:#fff; border-radius:6px; box-shadow:var(--shadow); padding:14px 16px; margin-bottom:22px; }
.sidebar .widget-title{ font-size:17px; font-weight:700; margin:0 0 6px; padding-bottom:8px; border-bottom:2px solid var(--red); display:inline-block; }

/* single article */
.article{ background:#fff; border-radius:6px; box-shadow:var(--shadow); padding:24px; }
.article h1{ font-size:27px; line-height:1.6; margin:0 0 12px; color:var(--ink); }
.article .a-meta{ display:flex; flex-wrap:wrap; gap:16px; color:#8a8a8a; font-size:13px; border-block:1px solid var(--line); padding:9px 0; margin-bottom:18px; }
.article .a-meta .cat{ color:var(--red); font-weight:700; }
/* 16:9 frame, but the whole picture stays visible — `contain` never crops top,
   bottom or sides; whatever is left over becomes a neutral band. */
.article .a-figure{ border-radius:6px; overflow:hidden; margin:0 0 18px; aspect-ratio:16/9;
  background:#f1f1f1; display:flex; align-items:center; justify-content:center; }
.article .a-figure img{ width:100%; height:100%; object-fit:contain; }
html.dark .article .a-figure{ background:#181818; }
/* no focus/tap frame around logo or main nav links */
#sp-logo a, #sp-menu a, .sp-megamenu-parent a, .menu-search-icon{ outline:none !important; -webkit-tap-highlight-color:transparent; }
#sp-logo a:focus, #sp-menu a:focus, .sp-megamenu-parent a:focus, #sp-logo a:active, .sp-megamenu-parent a:active{ outline:none !important; box-shadow:none !important; border:0; }
.article .a-figure img{ width:100%; }
.article .a-body{ font-size:18px; line-height:2.05; color:#2b2b2b; }
.article .a-body p{ margin:0 0 16px; }
.article .a-body img{ border-radius:6px; height:auto; margin:14px auto; }
.article .a-body iframe{ max-width:100%; border-radius:6px; }

/* embedded media (YouTube / Facebook / X) — the stored markup carries fixed
   pixel sizes from the old editor, so force everything down to the column */
/* media_embed() emits <span class="a-embed"> so the markup stays valid when the
   link sat inside a <p>; display:block makes it behave like a figure */
.a-embed{ display:block; margin:20px auto; text-align:center; }
.a-embed iframe{ border:0; border-radius:8px; }
.a-embed-yt iframe{ display:block; width:100%; aspect-ratio:16/9; height:auto; margin:0 auto; }
.a-embed-fb iframe{ display:block; width:100%; max-width:500px; margin:0 auto; }
.article .a-body iframe[src*="youtube.com/embed"],
.article .a-body iframe[src*="youtube-nocookie.com/embed"]{
  display:block; width:100%; height:auto; aspect-ratio:16/9; margin:20px auto; }
.article .a-body iframe[src*="facebook.com/plugins"],
.article .a-body iframe[src*="platform.twitter.com"]{
  display:block; width:100%; max-width:500px; margin:20px auto; }
.article .a-body .twitter-tweet{ margin:20px auto !important; }
/* before widgets.js swaps it out, keep the raw blockquote from looking broken */
.article .a-body blockquote.twitter-tweet:not(.twitter-tweet-rendered){
  border:1px solid var(--line); border-radius:10px; padding:14px 16px;
  max-width:500px; font-size:16px; line-height:1.9; }
html.dark .article .a-body blockquote.twitter-tweet:not(.twitter-tweet-rendered){ border-color:#333; }
.byline{ display:flex; align-items:center; gap:12px; background:#f3f4f6; border-radius:6px; padding:12px 14px; margin-bottom:18px; }
.byline img{ width:54px; height:54px; border-radius:50%; object-fit:cover; flex:none; }
.byline b{ display:block; font-size:16px; }
.byline b a:hover{ color:var(--red); }
.byline span span,.byline > span > span{ color:var(--muted); font-size:13px; }

/* writers */
.writer-card{ background:#fff; border-radius:6px; box-shadow:var(--shadow); padding:20px 14px; text-align:center; display:block; }
.writer-card img{ width:104px; height:104px; border-radius:50%; object-fit:cover; margin:0 auto 12px; border:3px solid var(--red); }
.writer-card h3{ margin:0 0 4px; font-size:17px; color:var(--ink); }
.writer-card:hover h3{ color:var(--red); }
.writer-card p{ color:var(--muted); font-size:13px; margin:0; }
.writer-hero{ display:flex; gap:18px; align-items:center; background:#fff; border-radius:6px; box-shadow:var(--shadow); padding:20px; margin-bottom:24px; }
.writer-hero img{ width:118px; height:118px; border-radius:50%; object-fit:cover; border:3px solid var(--red); flex:none; }
.writer-hero h1{ margin:0 0 6px; font-size:24px; }
.writer-hero p{ margin:0; color:var(--muted); }

/* homepage 3-column blocks — equal heights */
.home-cols{ align-items:stretch; }
.home-col{ display:flex; flex-direction:column; }
.home-col .section-head{ margin-bottom:14px; }
.home-col .section-head h2{ font-size:18px; }
.home-col .card{ margin-bottom:6px; }
.home-col .card h3{ font-size:15px; }
/* equal lead card across all three columns (image 16:9 + 2-line title) */
.home-col > .card{ display:flex; flex-direction:column; }
.home-col > .card .body{ flex:1; }
.home-col > .card h3{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* The articles column shows a writer name under the title while the two news
   columns have their meta hidden, which made the first card taller. The height
   is reserved on the body as a whole — not as a min-height on the title and not
   by pushing the byline down with margin-top:auto — so a short title keeps its
   writer name directly underneath and the slack falls below both. */
@media(min-width:768px){
  .home-cols .home-col{ display:flex; flex-direction:column; }
  .home-cols .home-col > .card .body{ min-height:114px; justify-content:flex-start; }
  .home-cols .home-col > .card .meta{ margin-top:0; min-height:22px; }
}
.col-list{ background:#fff; border-radius:6px; box-shadow:var(--shadow); padding:2px 14px; flex:1; }
.mini.nothumb{ align-items:flex-start; }
.mini.nothumb h4{ font-size:14px; }

/* video card play badge */
.video-card .thumb .play-badge{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.video-card .thumb .play-badge i{ width:52px; height:52px; border-radius:50%; background:rgba(236,0,0,.9); color:#fff; display:flex; align-items:center; justify-content:center; font-size:18px; padding-inline-start:3px; }
.video-card:hover .thumb .play-badge i{ background:var(--red); }

/* video */
.video-embed{ position:relative; aspect-ratio:16/9; border-radius:6px 6px 0 0; overflow:hidden; background:#000; }
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* pager / misc */
.pager{ display:flex; gap:10px; justify-content:center; margin-top:34px; flex-wrap:wrap; }
.pager a,.pager span{
  min-width:52px; padding:13px 20px; border-radius:8px; background:#fff;
  box-shadow:var(--shadow); font-weight:700; font-size:21px; line-height:1;
  color:var(--ink); text-align:center; transition:background .15s, color .15s;
}
.pager .cur{ background:var(--red); color:#fff; }
.pager a:hover{ background:var(--red); color:#fff; }
@media(max-width:600px){
  .pager{ gap:7px; }
  .pager a,.pager span{ min-width:44px; padding:11px 15px; font-size:18px; }
}
html.dark .pager a:hover{ color:#fff; }
.empty{ background:#fff; border-radius:6px; box-shadow:var(--shadow); padding:44px; text-align:center; color:var(--muted); }

/* search box on results page */
#sp-component .search-box{ display:flex; max-width:520px; margin:0 0 22px; border:1px solid var(--line); border-radius:30px; overflow:hidden; background:#fff; }
#sp-component .search-box input{ border:0; padding:11px 16px; flex:1; font-family:inherit; font-size:15px; outline:none; }
#sp-component .search-box button{ border:0; background:var(--red); color:#fff; padding:0 18px; cursor:pointer; }

/* footer tweaks */
#sp-footer{ background:#1c1c1c; color:#cfcfcf; padding:22px 0; }
#sp-footer .sp-copyright{ font-size:14px; display:block; }
#sp-footer .foot-pages{ margin-top:8px; }
#sp-footer .foot-pages a{ color:#cfcfcf; font-size:13px; margin-inline-end:16px; }
#sp-footer .foot-pages a:hover{ color:#fff; }
#sp-footer .footer-links a{ color:#cfcfcf; font-size:13px; margin-inline-start:14px; }
#sp-footer .footer-links a:hover{ color:#fff; }
#sp-footer .footer-social{ margin-top:12px; }
#sp-footer .footer-social a{ display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center; border-radius:50%; background:#333; color:#fff; margin-inline-start:8px; font-size:16px; transition:background .15s; }
#sp-footer .footer-social a:hover{ background:var(--red); }
@media(max-width:991px){ #sp-footer .footer-side{ text-align:right; margin-top:14px; } #sp-footer .footer-links a{ margin:0 0 0 14px; } #sp-footer .footer-social a{ margin:0 0 0 8px; } }

/* back to top */
.tt-top{ position:fixed; inset-block-end:24px; inset-inline-start:24px; width:50px; height:50px; padding:0; border:0; cursor:pointer; border-radius:14px; background:linear-gradient(180deg,#ff4136,#c40000); color:#fff; display:grid; place-items:center; box-shadow:0 6px 18px rgba(196,0,0,.42); opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity .25s ease, transform .25s ease, box-shadow .2s; z-index:1500; text-decoration:none; }
.tt-top i{ font-size:24px; line-height:1; display:block; }
.tt-top:hover{ transform:translateY(-3px); box-shadow:0 12px 26px rgba(196,0,0,.5); color:#fff; }
.tt-top.show{ opacity:1; transform:translateY(0); pointer-events:auto; }

/* contact page list */
.contact-list{ list-style:none; padding:0; margin:14px 0; }
.contact-list li{ padding:12px 0; border-bottom:1px solid var(--line); font-size:16px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.contact-list li i{ color:var(--red); width:26px; text-align:center; }
.contact-list li span{ font-weight:700; }
.contact-list li a{ color:var(--red); word-break:break-all; }

/* ===================== DARK MODE ===================== */
html.dark .tt-dark-toggle i::before{ content:"\f185"; } /* moon -> sun */
html.dark body, html.dark #sp-main-body{ background:#121212; }
html.dark #sp-header{ background:#1a1a1a; }
html.dark #sp-header .tt-ctrl{ color:#eee; background:transparent; }
html.dark #sp-header .tt-ctrl:hover{ background:#2a2a2a; color:#fff; }
html.dark .card, html.dark .col-list, html.dark .article, html.dark .writer-card,
html.dark .writer-hero, html.dark .sidebar .widget, html.dark .empty,
html.dark .pager a, html.dark .pager span{ background:#1e1e1e; box-shadow:0 1px 8px rgba(0,0,0,.5); }
html.dark, html.dark .card h3, html.dark .card h4, html.dark .mini h4,
html.dark .article h1, html.dark .article .a-body, html.dark .section-head h1,
html.dark .section-head h2, html.dark .page-title, html.dark .writer-card h3,
html.dark .writer-hero h1, html.dark .pager a, html.dark .pager span{ color:#ececec; }
html.dark .card .excerpt, html.dark .card .meta, html.dark .mini .date,
html.dark .crumbs, html.dark .writer-card p, html.dark .writer-hero p,
html.dark .article .a-meta, html.dark .tt-search-hint{ color:#9a9a9a; }
html.dark .article .a-body{ color:#d6d6d6; }
html.dark .section-head{ border-bottom-color:#333; }
html.dark .mini{ border-bottom-color:#2a2a2a; }
html.dark .article .a-meta, html.dark .contact-list li{ border-color:#2a2a2a; }
html.dark .byline{ background:#242424; }
html.dark .card:hover h3, html.dark .mini:hover h4{ color:#ff5a4d; }
html.dark .card .thumb, html.dark .mini .thumb{ background:#2a2a2a; }
/* main menu links readable in dark mode */
html.dark #sp-header .sp-megamenu-parent > li > a,
html.dark #sp-header .sp-megamenu-parent > li > span{ color:#f1f1f1 !important; }
html.dark #sp-header .sp-megamenu-parent > li > a:hover,
html.dark #sp-header .sp-megamenu-parent > li.active > a{ color:#ff5a4d !important; }
/* white plate behind the logo so the red mark stays visible */
html.dark #sp-logo .tt-logo img{ background:#fff; padding:5px 9px; border-radius:8px; }
html.dark #sp-footer{ background:#0d0d0d; }

/* ===== mobile nav (offcanvas toggle) ===== */
/* ===== header controls (dark / search / hamburger) ===== */
.tt-controls{ display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.tt-ctrl{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border:0; border-radius:8px; background:transparent; color:#333; font-size:19px; cursor:pointer; }
.tt-ctrl:hover{ background:#f0f0f0; color:var(--red); }
.tt-hamburger{ display:none; }
.tt-menu-head{ display:none !important; }
.tt-nav-backdrop{ display:none; }

@media(max-width:991px){
  #sp-header .container{ max-width:100%; padding-left:14px; padding-right:14px; }
  #sp-header .row{ position:relative; display:flex; flex-wrap:nowrap; align-items:center; margin:0; }
  #sp-logo{ order:1; flex:1 1 auto; padding:6px 0; min-width:0; }
  #sp-logo .tt-logo{ text-align:right; }
  #sp-menu{ order:2; flex:0 0 0; width:0; padding:0; position:static; }
  #sp-search{ order:3; flex:0 0 auto; width:auto; max-width:none; padding:0; }
  .tt-controls{ gap:6px; }
  .tt-ctrl{ color:#fff; background:#333; }
  .tt-ctrl:hover{ background:var(--red); color:#fff; }
  /* RTL flex: higher order = further LEFT. hamburger far-left, then search, then dark */
  .tt-controls{ justify-content:flex-start; gap:8px; }
  /* RTL flex: a higher order sits further LEFT -> hamburger at the far left */
  #sp-header .tt-hamburger{ display:inline-flex; background:var(--red); color:#fff;
    order:3; flex:0 0 auto; margin:0; }
  .menu-search-icon{ order:2; }
  .tt-dark-toggle{ order:1; }
  /* black dropdown menu */
  #sp-menu .sp-megamenu-wrapper{ position:static; }
  /* compact drawer anchored under the hamburger (far left in RTL) */
  #sp-menu .sp-megamenu-parent{ display:none; position:absolute; inset-inline-end:0; inset-inline-start:auto;
    top:100%; width:268px; max-width:84vw; background:#111;
    flex-direction:column; align-items:stretch; z-index:10; box-shadow:0 12px 26px rgba(0,0,0,.45);
    border-top:3px solid var(--red); border-radius:0 0 8px 0; overflow:hidden; }
  body.nav-open #sp-menu .sp-megamenu-parent{ display:flex; }
  #sp-menu .sp-megamenu-parent > li{ display:block; width:100%; border-block-end:1px solid rgba(255,255,255,.1); }
  /* links read from the right, underlined in red when active (like the main menu) */
  #sp-menu .sp-megamenu-parent > li > a{ display:block; width:100%; text-align:right; color:#eee;
    padding:15px 18px; font-size:19px; line-height:1.65; font-weight:700; background:none;
    border-bottom:2px solid transparent; }
  #sp-menu .sp-megamenu-parent > li > a:hover{ color:#fff; background:none; }
  #sp-menu .sp-megamenu-parent > li.active > a,
  #sp-menu .sp-megamenu-parent > li.current-item > a{ color:var(--red); background:none; border-bottom-color:var(--red); }
  /* head bar holds only the close button, pinned to the left */
  .tt-menu-head{ display:flex !important; align-items:center; background:#000; padding:4px 10px; }
  .tt-menu-close{ margin-inline-start:auto; background:none; border:0; color:#fff; font-size:24px; line-height:1; cursor:pointer; padding:2px 4px; }
  body.nav-open .tt-nav-backdrop{ display:block; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1900; }
  /* side gutter so cards don't touch the screen edge */
  #sp-main-body{ padding:16px 0 34px; }
  #sp-main-body .container{ padding-left:14px; padding-right:14px; }
  #sp-main-body .row{ margin-left:0; margin-right:0; }
  #sp-component{ padding-left:0; padding-right:0; }
  #sp-footer .container{ padding-left:14px; padding-right:14px; }
  .layout{ gap:18px; }
}

/* listing pages (category / articles / video): no section badge on cards */
body.no-cat-tag .card .cat-tag{ display:none !important; }

/* sidebar "most read": first item is a featured card, the rest are plain rows */
.top-lead{ display:block; margin:0 0 6px; }
.top-lead .thumb{ display:block; aspect-ratio:16/9; overflow:hidden; border-radius:6px; background:#e9e9e9; }
.top-lead .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.top-lead:hover .thumb img{ transform:scale(1.05); }
.top-lead h4{ margin:10px 0 4px; font-size:18px; line-height:1.55; font-weight:700; color:var(--red); }
.top-lead:hover h4{ color:var(--red-d); }
.top-lead .date{ color:#9a9a9a; font-size:12px; }
html.dark .top-lead h4{ color:#ff5a4d; }
html.dark .top-lead:hover h4{ color:#ff5a4d; }

/* article rows in the homepage column: round writer avatar next to each title */
.mini.art-row .avatar{ flex:none; width:52px; height:52px; border-radius:50%; overflow:hidden; background:#e9e9e9; border:2px solid var(--red); }
.mini.art-row .avatar img{ width:100%; height:100%; object-fit:cover; }
.mini.art-row .date{ color:var(--red); font-weight:600; }
html.dark .mini.art-row .date{ color:#ff5a4d; }

/* writer name as its own link inside article cards / rows */
.writer-link{ color:var(--red); font-weight:700; font-size:13px; }
.writer-link:hover{ color:var(--red-d); text-decoration:underline; }
.art-card .body h3 a{ color:inherit; }
.art-card .body h3 a:hover{ color:var(--red); }
.mini.art-row h4 a{ color:inherit; }
.mini.art-row h4 a:hover{ color:var(--red); }
html.dark .writer-link{ color:#ff5a4d; }

/* single video page */
.video-single{ border-radius:8px; margin-bottom:6px; }
.video-single iframe, .video-single video{ position:absolute; inset:0; width:100%; height:100%; border:0; background:#000; }
.article .video-embed{ position:relative; aspect-ratio:16/9; overflow:hidden; }

/* ===== video lightbox ===== */
.tt-lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.93); z-index:4000; display:none; align-items:center; justify-content:center; padding:24px; }
.tt-lightbox.open{ display:flex; animation:ttfade .18s ease; }
.tt-lb-inner{ width:100%; max-width:1000px; }
.tt-lb-frame{ position:relative; aspect-ratio:16/9; width:100%; background:#000; border-radius:10px; overflow:hidden; box-shadow:0 24px 70px rgba(0,0,0,.6); }
.tt-lb-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.tt-lb-title{ color:#eee; text-align:center; margin:16px 0 0; font-size:18px; font-weight:700; }
.tt-lb-close{ position:absolute; top:18px; inset-inline-start:26px; background:none; border:0; color:#fff; font-size:46px; line-height:1; cursor:pointer; opacity:.85; }
.tt-lb-close:hover{ opacity:1; }
.video-card .thumb.js-play{ cursor:pointer; }
@media(max-width:600px){ .tt-lb-title{ font-size:15px; } .tt-lb-close{ font-size:38px; top:10px; inset-inline-start:14px; } }

/* link colours: inherit by default, explicit where a link must stand out */
.video-card .body h3 a{ color:inherit; }
.video-card:hover .body h3 a{ color:var(--red); }
.article .a-body a{ color:var(--red); text-decoration:underline; }
html.dark .article .a-body a{ color:#ff5a4d; }
html.dark .video-card:hover .body h3 a{ color:#ff5a4d; }

/* ===== breaking news bar (fixed at the bottom) ===== */
.tt-breaking{ position:fixed; inset-inline:0; bottom:0; z-index:2500; background:var(--red);
  color:#fff; box-shadow:0 -4px 16px rgba(0,0,0,.28); }
.tt-breaking-in{ display:flex; align-items:center; gap:14px; max-width:1280px; margin:0 auto; padding:10px 16px; }
.tt-breaking-label{ flex:none; display:inline-flex; align-items:center; gap:6px; background:#fff; color:var(--red);
  font-weight:700; font-size:14px; padding:5px 14px; border-radius:4px; white-space:nowrap; }
.tt-breaking-items{ position:relative; flex:1; min-width:0; }
/* full text, no truncation: it wraps and the bar grows */
.tt-breaking-item{ display:none; margin:0; font-size:17px; font-weight:600; line-height:1.6;
  white-space:normal; overflow-wrap:anywhere; }
.tt-breaking-item.active{ display:block; animation:ttbk .45s ease; }
@keyframes ttbk{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.tt-breaking-close{ flex:none; background:none; border:0; color:#fff; font-size:28px; line-height:1;
  cursor:pointer; opacity:.85; padding:0 4px; }
.tt-breaking-close:hover{ opacity:1; }
body.has-breaking{ padding-bottom:64px; }        /* keep the footer reachable */
.tt-top{ transition:inset-block-end .2s, opacity .25s ease, transform .25s ease; }
body.has-breaking .tt-top{ inset-block-end:88px; }
@media(max-width:600px){
  .tt-breaking-in{ gap:10px; padding:9px 12px; }
  .tt-breaking-item{ font-size:15px; }
  .tt-breaking-label{ font-size:12px; padding:4px 10px; }
  body.has-breaking{ padding-bottom:84px; }
}

/* wider cards in the 2-column listings (categories / articles / video)
   deserve larger titles */
.grid.cols-2 .card h3{ font-size:22px; line-height:1.5; }
.grid.cols-2 .card .excerpt{ font-size:15px; }
.grid.cols-2 .card .meta{ font-size:13px; }
@media(max-width:767px){ .grid.cols-2 .card h3{ font-size:19px; } }

/* sidebar video: wide 16:9 image with a larger title underneath */
.side-video{ display:block; margin-bottom:16px; }
.side-video:last-child{ margin-bottom:0; }
.side-video .thumb{ position:relative; display:block; aspect-ratio:16/9; overflow:hidden;
  border-radius:6px; background:#e9e9e9; }
.side-video .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.side-video:hover .thumb img{ transform:scale(1.05); }
.side-video .thumb .play-badge{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.side-video .thumb .play-badge i{ width:44px; height:44px; border-radius:50%; background:rgba(236,0,0,.9);
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:16px; padding-inline-start:3px; }
.side-video h4{ margin:9px 0 0; font-size:17px; line-height:1.55; font-weight:700; color:var(--ink); }
.side-video:hover h4{ color:var(--red); }
html.dark .side-video h4{ color:#ececec; }
html.dark .side-video:hover h4{ color:#ff5a4d; }

/* large screens: the side column sticks once its content ends, so it does not
   leave a long empty gap while the article keeps scrolling */
@media(min-width:992px){
  .layout{ align-items:start; }
  /* scroll with the page, then pin once the column has fully scrolled in
     (sticky to the BOTTOM edge, not the top) */
  /* two modes picked by JS so there is never an empty gap:
       .sticky-bottom -> column is taller than the viewport: it scrolls with the
                         page and pins once its END reaches the bottom
       .sticky-top    -> column is shorter: it pins under the header instead */
  .sidebar{ align-self:start; }
  .sidebar.sticky-bottom{ position:sticky; top:auto; bottom:24px; }
  .sidebar.sticky-top{ position:sticky; bottom:auto; top:96px; }
  body.scrolled .sidebar.sticky-top{ top:74px; }
}

/* view counts are not shown anywhere on the site */
.views, .card .meta .views{ display:none !important; }

/* ===== share buttons under an article ===== */
.share-bar{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:26px; padding-top:18px; border-top:1px solid var(--line); }
.share-label{ font-weight:700; color:var(--ink); margin-inline-end:4px; }
.share-btn{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px;
  border:0; border-radius:50%; color:#fff; font-size:18px; cursor:pointer; transition:transform .15s, opacity .15s; }
.share-btn:hover{ transform:translateY(-2px); opacity:.9; color:#fff; }
.share-fb{ background:#1877f2; } .share-wa{ background:#25d366; } .share-tw{ background:#000; }
.share-tg{ background:#29a9eb; } .share-em{ background:#7a7a7a; } .share-copy{ background:var(--red); }
.share-copy.copied{ background:#25d366; }
.share-copied{ color:#25d366; font-size:13px; font-weight:700; }
html.dark .share-label{ color:#ececec; }
html.dark .share-bar{ border-top-color:#2a2a2a; }
@media(max-width:520px){ .share-btn{ width:38px; height:38px; font-size:16px; } .share-bar{ gap:8px; } }

/* X and TikTok ship as inline SVG (Font Awesome 4.7 has neither logo) */
.share-tw{ background:#000; }
#sp-footer .footer-social .x-glyph{ font-size:17px; }
.contact-list .x-inline{ color:var(--red); width:26px; text-align:center; display:inline-block; }

/* inline brand SVGs (TikTok) sized like the font icons */
.tt-svg{ width:1em; height:1em; display:block; }
#sp-footer .footer-social .tt-svg{ width:17px; height:17px; }
.share-btn .tt-svg{ width:18px; height:18px; }
.contact-list .c-icon{ width:26px; text-align:center; color:var(--red); display:inline-flex; justify-content:center; }
.contact-list .c-icon .tt-svg{ width:17px; height:17px; }

/* ===== تدوين photo gallery ===== */
/* masonry-style columns: every photo keeps its own proportions and is shown
   in full (portrait, square or landscape) — nothing is cropped */
.gallery-grid{ column-count:4; column-gap:14px; }
@media(max-width:991px){ .gallery-grid{ column-count:3; } }
@media(max-width:700px){ .gallery-grid{ column-count:2; } }
@media(max-width:430px){ .gallery-grid{ column-count:1; } }
.gal-item{ position:relative; display:block; break-inside:avoid; margin:0 0 14px;
  overflow:hidden; border-radius:6px; background:#e9e9e9; box-shadow:var(--shadow); }
.gal-item img{ width:100%; height:auto; display:block; transition:transform .3s; }
.gal-item:hover img{ transform:scale(1.04); }
.gal-cap{ position:absolute; inset-inline:0; inset-block-end:0; padding:16px 10px 8px; color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.8)); font-size:13px; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tt-lb-img{ width:100%; height:100%; object-fit:contain; background:#000; }

/* Phones: never crop a picture's sides. Every 16:9 frame keeps its ratio but
   shows the whole image, letterboxing whatever is left over. Round avatars are
   deliberately excluded — a contained circle reads as broken, not uncropped. */
@media(max-width:767px){
  .card .thumb, .mini .thumb, .top-lead .thumb, .side-video .thumb,
  .hero-main, .hero-s{ background:#f1f1f1; }
  .card .thumb img, .mini .thumb img, .top-lead .thumb img, .side-video .thumb img,
  .hero-main img, .hero-s img{ object-fit:contain; }
  html.dark .card .thumb, html.dark .mini .thumb, html.dark .top-lead .thumb,
  html.dark .side-video .thumb, html.dark .hero-main, html.dark .hero-s{ background:#181818; }
}
html.dark .gal-item{ background:#2a2a2a; }

/* footer logo, rendered white */
#sp-footer .foot-logo{ display:inline-block; margin-bottom:10px; }
#sp-footer .foot-logo img{ height:58px; width:auto;
  filter:brightness(0) invert(1);            /* red logo -> solid white */ }
@media(max-width:991px){ #sp-footer .foot-logo img{ height:48px; } }

/* homepage: no dates on any card or row */
.home-page .card .meta .date:not(.writer-link),
.home-page .mini .date,
.home-page .top-lead .date,
.home-page .card .meta span:not(.writer-link){ display:none !important; }
.home-page .mini.art-row .writer-link,
.home-page .card .meta .writer-link{ display:inline !important; }

/* ===== footer: copyright (right) · logo (centre) · sections (left) ===== */
#sp-footer .foot-grid{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; padding:6px 0; }
#sp-footer .foot-right{ text-align:right; }
#sp-footer .foot-center{ text-align:center; }
#sp-footer .foot-left{ text-align:left; }
#sp-footer .foot-left .footer-social{ margin-top:10px; }
#sp-footer .footer-links a{ display:inline-block; margin:0 0 6px 14px; }
@media(max-width:860px){
  #sp-footer .foot-grid{ grid-template-columns:1fr; text-align:center; gap:16px; }
  #sp-footer .foot-right,#sp-footer .foot-left{ text-align:center; }
  #sp-footer .foot-center{ order:-1; }              /* logo first on mobile */
  #sp-footer .footer-links a{ margin:0 7px 6px; }
}

/* ===== fixed social rail on the left edge (all screens) ===== */
.tt-rail{ position:fixed; inset-inline-end:0; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:2px; z-index:1600; }
.tt-rail-btn{ display:flex; align-items:center; justify-content:center; width:42px; height:42px;
  color:#fff; font-size:19px; transition:width .15s, filter .15s; }

.tt-rail-btn:hover{ width:50px; color:#fff; filter:brightness(1.08); }
.tt-rail-yt{ background:#ff0000; }
.tt-rail-tg{ background:#29a9eb; }
.tt-rail-wa{ background:#25d366; }
/* the rail hugs the left screen edge: round the INNER (right) corners only */
.tt-rail > :first-child{ border-top-right-radius:10px; border-top-left-radius:0; }
.tt-rail > :last-child{ border-bottom-right-radius:10px; border-bottom-left-radius:0; }
@media(max-width:600px){
  .tt-rail-btn{ width:36px; height:36px; font-size:16px; }
  .tt-rail-btn:hover{ width:42px; }
}
/* keep clear of the breaking bar */
body.has-breaking .tt-rail{ top:44%; }