/* ======================================================
   Almanara blog — posts, the posts page (/blog/) and archives. Loaded only there (inc/almanara-blog.php).
   Same design language as the landing pages (landing-dark.css): dark background, gold accents,
   Marhey headings, Rubik text, 18px radius. The page hero itself is styled in theme-bootstrap4.css.
   ====================================================== */
.blog-dark{
  --bg:#0b0d12; --card:#111827; --card-2:#1e293b; --gold:#F9BC50; --gold-2:#e1a743;
  --text:#f1f5f9; --body:#cbd5e1; --sub:#94a3b8; --line:rgba(249,188,80,.12); --radius:18px;
  background:var(--bg); color:var(--body);
  font-family:"Rubik","Tajawal",system-ui,sans-serif;
  padding-bottom:72px;
}
.blog-dark a{ color:var(--gold); }
.blog-dark a:hover{ color:var(--gold-2); }

/* Single post: the breadcrumb's last item repeats the H1 right below it */
.single .blog-dark .ph-breadcrumbs__item.is-current{ display:none; }
.single .blog-dark .ph-breadcrumbs__item:nth-last-child(2)::after{ content:none; }

.blog-wrap{ max-width:1160px; padding-top:8px; }
/* The theme paints every article in #single-wrapper / #archive-wrapper as a white card */
#single-wrapper.blog-dark article,
#archive-wrapper.blog-dark article{ background:transparent; box-shadow:none; border-radius:0; padding:0; overflow:visible; min-height:0; }
.blog-dark#single-wrapper article.bcard,
.blog-dark#archive-wrapper article.bcard{ background:var(--card); border-radius:var(--radius); overflow:hidden; }
#archive-wrapper.blog-dark article img{ max-height:none; }

/* ── Layout: reading column + sticky side column (desktop) ── */
.blog-layout{ display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:48px; align-items:start; }
.blog-article{ max-width:760px; min-width:0; }
.blog-aside{ align-self:stretch; } /* full column height, so the inner box can stick */
.blog-aside__sticky{ position:sticky; top:110px; display:grid; gap:18px; }
@media (max-width:991px){
  .blog-layout{ grid-template-columns:1fr; gap:0; }
  .blog-article{ max-width:none; }
  .blog-aside{ display:none; }
}

/* ── Table of contents ── */
.blog-toc ol{ list-style:none; margin:0; padding:0; counter-reset:toc; }
.blog-toc li{ counter-increment:toc; }
.blog-toc a{ display:flex; gap:10px; padding:7px 10px; border-radius:10px; color:var(--body); text-decoration:none; font-size:.95rem; line-height:1.6; }
.blog-toc a::before{ content:counter(toc); color:var(--gold); font-weight:700; min-width:1.2em; }
.blog-toc a:hover,.blog-toc a.is-active{ background:rgba(249,188,80,.08); color:var(--text); }
.blog-toc a.is-active{ box-shadow:inset -3px 0 0 var(--gold); }
.blog-toc--side{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 12px; max-height:calc(100vh - 330px); overflow:auto; }
.blog-toc__title{ font-family:"Marhey",sans-serif; color:var(--text); font-size:1rem; margin:0 10px 8px; }
.blog-toc--inline{ display:none; background:var(--card); border:1px solid var(--line); border-radius:14px; margin:0 0 26px; }
.blog-toc--inline summary{ cursor:pointer; list-style:none; padding:14px 18px; color:var(--text); font-weight:700; display:flex; align-items:center; gap:10px; }
.blog-toc--inline summary::-webkit-details-marker{ display:none; }
.blog-toc--inline summary::after{ content:"◂"; margin-inline-start:auto; color:var(--gold); transition:transform .25s; }
.blog-toc--inline[open] summary::after{ transform:rotate(-90deg); }
.blog-toc--inline summary i{ color:var(--gold); }
.blog-toc--inline ol{ padding:0 8px 12px; }
@media (max-width:991px){ .blog-toc--inline{ display:block; } }

.blog-aside__cta{ background:linear-gradient(160deg,#141c2e,#0f1523); border:1px solid rgba(249,188,80,.25); border-radius:var(--radius); padding:18px; display:grid; gap:10px; }
.blog-aside__cta p{ margin:0 0 4px; color:var(--body); font-size:.95rem; line-height:1.8; }
.blog-aside__cta strong{ color:var(--text); display:block; }
.blog-aside__cta .btn{ width:100%; justify-content:center; }

/* ── Article text ── */
.blog-prose{ font-size:1.09rem; line-height:2; color:var(--body); }
.blog-prose > :first-child{ margin-top:0; }
.blog-prose p{ margin:0 0 1.15em; color:var(--body); }
.blog-prose > p:first-of-type{ font-size:1.15rem; color:#e2e8f0; }
.blog-prose strong,.blog-prose b{ color:var(--text); font-weight:700; }
.blog-prose a{ color:var(--gold); text-decoration:underline; text-decoration-color:rgba(249,188,80,.45); text-underline-offset:5px; text-decoration-thickness:1px; }
.blog-prose a:hover{ text-decoration-color:var(--gold); }
.blog-prose h2{
  font-family:"Marhey","Rubik",sans-serif; font-weight:700; color:var(--gold);
  font-size:clamp(23px,2.3vw,29px); line-height:1.5; margin:2.1em 0 .7em; scroll-margin-top:110px;
}
.blog-prose h2::after{ content:""; display:block; width:54px; height:3px; border-radius:3px; margin-top:10px; background:linear-gradient(90deg,var(--gold),rgba(249,188,80,.15)); }
.blog-prose h3{ font-family:"Rubik",sans-serif; font-weight:700; color:var(--text); font-size:clamp(18px,1.6vw,20.5px); line-height:1.6; margin:1.6em 0 .5em; scroll-margin-top:110px; }
.blog-prose h4{ color:var(--text); font-size:1.05rem; margin:1.3em 0 .4em; }
.blog-prose ul,.blog-prose ol{ margin:0 0 1.3em; padding-inline-start:0; list-style:none; }
.blog-prose li{ position:relative; padding-inline-start:28px; margin:0 0 .55em; }
.blog-prose ul > li::before{ content:""; position:absolute; inset-inline-start:6px; top:.85em; width:8px; height:8px; border-radius:2px; background:var(--gold); transform:rotate(45deg); }
.blog-prose ol{ counter-reset:li; }
.blog-prose ol > li{ counter-increment:li; }
.blog-prose ol > li::before{ content:counter(li); position:absolute; inset-inline-start:0; top:.25em; width:22px; height:22px; border-radius:50%; background:rgba(249,188,80,.14); color:var(--gold); font-size:.8rem; font-weight:700; display:grid; place-items:center; line-height:1; }
.blog-prose img{ max-width:100%; height:auto; border-radius:14px; }
.blog-prose figure{ margin:1.6em 0; }
.blog-prose figcaption{ color:var(--sub); font-size:.88rem; text-align:center; margin-top:8px; }
.blog-prose blockquote{ margin:1.6em 0; padding:16px 20px; border-inline-start:3px solid var(--gold); background:var(--card); border-radius:0 14px 14px 0; color:var(--text); }
.blog-prose hr{ border:0; height:1px; background:var(--line); margin:2em 0; }
/* Old posts: centred or coloured text pasted from the editor reads as one style (phase 2 removes it from the content) */
.blog-prose [style*="text-align"]{ text-align:inherit !important; }
.blog-prose [style*="color"]{ color:inherit !important; }

/* Tables */
.blog-prose table{ width:100%; border-collapse:separate; border-spacing:0; margin:1.4em 0 1.8em; font-size:.97rem; background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; color:var(--body); }
.blog-prose th,.blog-prose td{ padding:12px 14px; border:0; border-bottom:1px solid rgba(255,255,255,.06); vertical-align:top; text-align:start; }
.blog-prose thead th,.blog-prose tr:first-child th{ background:rgba(249,188,80,.10); color:var(--gold); font-weight:700; }
.blog-prose tr:last-child td{ border-bottom:0; }
.blog-prose td:first-child{ color:var(--text); font-weight:600; }
.blog-prose .table-bordered,.blog-prose .table-bordered td,.blog-prose .table-bordered th{ border-color:rgba(255,255,255,.06); }
@media (max-width:640px){ .blog-prose table{ display:block; overflow-x:auto; } }

/* Tip / note box — class "blog-note" in new articles */
.blog-prose .blog-note{ background:rgba(249,188,80,.07); border:1px solid rgba(249,188,80,.25); border-radius:14px; padding:14px 18px; color:var(--text); }

/* FAQ accordion (same look as the service pages) */
.blog-faq details{ background:var(--card-2); border:1px solid rgba(249,188,80,.08); border-radius:14px; margin-bottom:12px; overflow:hidden; transition:border-color .3s, box-shadow .3s; }
.blog-faq details[open]{ border-color:rgba(249,188,80,.22); border-inline-start:3px solid var(--gold); box-shadow:0 4px 16px rgba(0,0,0,.2); }
.blog-faq summary{ cursor:pointer; list-style:none; color:var(--text); font-weight:600; padding:15px 20px; display:flex; gap:12px; align-items:center; }
.blog-faq summary::-webkit-details-marker{ display:none; }
.blog-faq summary::before{ content:"◂"; color:var(--gold); font-size:.75em; transition:transform .3s; flex-shrink:0; }
.blog-faq details[open] summary::before{ transform:rotate(-90deg); }
.blog-faq summary:hover{ background:rgba(249,188,80,.04); }
.blog-faq details > div{ padding:0 20px 14px 20px; }
.blog-faq details > div p:last-child{ margin-bottom:0; }

/* Related service box (inside the article) */
.blog-service{ display:flex; gap:16px; align-items:flex-start; margin:2em 0; padding:18px 20px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); }
.blog-service__icon{ flex-shrink:0; width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:rgba(249,188,80,.12); color:var(--gold); font-size:1.15rem; }
.blog-service strong{ color:var(--text); font-family:"Marhey",sans-serif; font-weight:600; }
.blog-service p{ margin:4px 0 10px; color:var(--sub); font-size:.97rem; line-height:1.8; }
.blog-service__links{ display:flex; flex-wrap:wrap; gap:8px; }
.blog-service__links a{ text-decoration:none; border:1px solid rgba(249,188,80,.35); border-radius:999px; padding:5px 14px; font-size:.92rem; font-weight:600; }
.blog-service__links a:hover{ background:var(--gold); color:#111; }

/* Closing call to action */
.blog-cta{ margin:2.4em 0 0; padding:24px; border-radius:var(--radius); background:radial-gradient(120% 140% at 100% 0%,rgba(249,188,80,.16),transparent 55%),linear-gradient(160deg,#141c2e,#0f1523); border:1px solid rgba(249,188,80,.3); display:grid; gap:16px; }
.blog-cta p{ margin:0; color:var(--body); font-size:1.05rem; line-height:1.9; }
.blog-cta strong{ color:var(--text); font-family:"Marhey",sans-serif; font-weight:600; display:block; font-size:1.2rem; margin-bottom:4px; }
.blog-cta__actions{ display:flex; flex-wrap:wrap; gap:10px; }
.blog-dark .btn.btn-cta{ display:inline-flex; align-items:center; gap:8px; }
.blog-dark .btn.btn-cta--accent{ color:#1a1a1a; }
.blog-dark .btn.btn-cta--outline{ color:var(--gold); border-color:rgba(249,188,80,.6); }
.blog-dark .btn.btn-cta--outline:hover{ background:var(--gold); color:#111; }

/* Footer of the article: author (the company) + category + last update */
.blog-foot{ margin-top:28px; padding-top:24px; border-top:1px solid var(--line); display:grid; gap:16px; }
.blog-author{ display:flex; gap:14px; align-items:flex-start; }
.blog-author__logo{ flex-shrink:0; width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:var(--card); border:1px solid rgba(249,188,80,.35); color:var(--gold); font-size:1.2rem; }
.blog-author strong{ color:var(--text); font-family:"Marhey",sans-serif; font-weight:600; }
.blog-author p{ margin:2px 0 0; color:var(--sub); font-size:.95rem; line-height:1.8; }
.blog-foot__meta{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.blog-tag{ text-decoration:none; font-size:.85rem; font-weight:600; padding:4px 14px; border-radius:999px; background:rgba(249,188,80,.08); border:1px solid rgba(249,188,80,.2); }
.blog-updated{ color:var(--sub); font-size:.88rem; }
.blog-updated i{ color:var(--gold); margin-inline-end:4px; }

/* ── Related posts ── */
.blog-related{ margin-top:64px; }
.blog-related > h2,.blog-band h2{ font-family:"Marhey",sans-serif; color:var(--gold); font-size:clamp(22px,2.2vw,28px); margin:0 0 22px; }

/* ── Cards ── */
.bgrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
@media (max-width:991px){ .bgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .bgrid{ grid-template-columns:1fr; gap:18px; } }
.bcard{ position:relative; display:flex; flex-direction:column; background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); overflow:hidden; transition:transform .25s, border-color .25s, box-shadow .25s; }
.bcard:hover{ transform:translateY(-4px); border-color:rgba(249,188,80,.35); box-shadow:0 14px 34px rgba(0,0,0,.35); }
.bcard__media{ display:block; aspect-ratio:16/9; overflow:hidden; background:#0f1523; }
.bcard__media img{ width:100%; height:100%; object-fit:cover; object-position:center 22%; display:block; transition:transform .4s; }
.bcard:hover .bcard__media img{ transform:scale(1.04); }
.bcard__ph{ display:grid; place-items:center; height:100%; color:rgba(249,188,80,.5); font-size:2.2rem; }
.bcard__body{ display:flex; flex-direction:column; gap:10px; padding:18px 20px 20px; flex:1; }
.bcard__cat{ align-self:flex-start; text-decoration:none; font-size:.8rem; font-weight:700; padding:3px 12px; border-radius:999px; background:rgba(249,188,80,.1); border:1px solid rgba(249,188,80,.22); }
.bcard__title{ font-family:"Marhey","Rubik",sans-serif; font-weight:600; font-size:1.12rem; line-height:1.65; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.bcard__title a{ color:var(--text); text-decoration:none; }
.bcard__title a::after{ content:""; position:absolute; inset:0; } /* whole card is clickable */
.bcard__title a:hover{ color:var(--gold); }
.bcard__excerpt{ margin:0; color:var(--sub); font-size:.95rem; line-height:1.85; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.bcard__foot{ margin-top:auto; padding-top:12px; border-top:1px solid rgba(255,255,255,.06); display:flex; flex-wrap:wrap; gap:6px 16px; color:var(--sub); font-size:.85rem; }
.bcard__foot i{ color:var(--gold); margin-inline-end:4px; }
.bcard__cat{ position:relative; z-index:1; }

/* Featured (newest) post on the blog page */
.bcard--featured{ grid-column:1/-1; flex-direction:row; }
.bcard--featured .bcard__media{ flex:0 0 56%; aspect-ratio:auto; min-height:340px; position:relative; }
.bcard--featured .bcard__media img{ position:absolute; inset:0; } /* the text column sets the height, not the photo */
.bcard--featured .bcard__body{ padding:30px 32px; justify-content:center; }
.bcard--featured .bcard__title{ font-size:clamp(1.3rem,2vw,1.7rem); -webkit-line-clamp:3; }
.bcard--featured .bcard__excerpt{ font-size:1.02rem; -webkit-line-clamp:4; }
.bcard--featured .bcard__foot{ margin-top:8px; }
@media (max-width:767px){
  .bcard--featured{ flex-direction:column; }
  .bcard--featured .bcard__media{ flex:none; aspect-ratio:16/9; min-height:0; }
  .bcard--featured .bcard__media img{ position:static; }
  .bcard--featured .bcard__body{ padding:18px 20px 20px; }
}

/* ── Blog / category page parts ── */
.blog-chips{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 30px; }
.blog-chips a{ text-decoration:none; color:var(--body); font-weight:600; font-size:.93rem; padding:8px 16px; border-radius:999px; background:var(--card); border:1px solid rgba(255,255,255,.08); transition:all .2s; }
.blog-chips a span{ color:var(--sub); font-weight:400; font-size:.82rem; margin-inline-start:4px; }
.blog-chips a:hover{ border-color:rgba(249,188,80,.45); color:var(--text); }
.blog-chips a.is-active{ background:var(--gold); border-color:var(--gold); color:#111; }
.blog-chips a.is-active span{ color:#3b2a06; }
@media (max-width:640px){
  .blog-chips{ flex-wrap:nowrap; overflow-x:auto; margin-inline:-12px; padding:0 12px 6px; scrollbar-width:none; }
  .blog-chips a{ white-space:nowrap; }
}

.blog-band{ margin:40px 0; padding:26px 28px; border-radius:var(--radius); display:flex; flex-wrap:wrap; gap:18px 30px; align-items:center; justify-content:space-between;
  background:radial-gradient(120% 160% at 0% 0%,rgba(249,188,80,.18),transparent 55%),linear-gradient(160deg,#141c2e,#0f1523); border:1px solid rgba(249,188,80,.3); }
.blog-band h2{ margin:0 0 4px; }
.blog-band p{ margin:0; color:var(--body); }

.blog-pages{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:36px; }
.blog-pages .page-numbers{ min-width:42px; padding:8px 14px; text-align:center; border-radius:12px; background:var(--card); border:1px solid rgba(255,255,255,.08); color:var(--body); text-decoration:none; font-weight:600; }
.blog-pages .page-numbers.current{ background:var(--gold); border-color:var(--gold); color:#111; }
.blog-pages a.page-numbers:hover{ border-color:rgba(249,188,80,.45); color:var(--text); }

.blog-crosslink{ display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; margin-top:36px; color:var(--sub); }
.blog-crosslink a{ text-decoration:none; font-weight:600; border:1px solid rgba(249,188,80,.35); border-radius:999px; padding:5px 14px; }
.blog-empty{ color:var(--sub); }