/* ===== RESOURCES HUB & ARTICLE PAGES ===== */

/* ---------- HUB HERO ---------- */
.rh-hero{
  max-width:900px;margin:0 auto;padding:7rem 2rem 0;text-align:center;
}
.rh-hero .si-wrap{margin-bottom:2.5rem}

/* ---------- SEARCH BAR ---------- */
.rh-search-wrap{
  position:relative;max-width:520px;margin:0 auto 1.5rem;
}
.rh-search-icon{
  position:absolute;left:1.1rem;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:var(--tm);pointer-events:none;
}
.rh-search{
  width:100%;padding:.85rem 1rem .85rem 2.8rem;
  font-family:'Outfit',sans-serif;font-size:.9rem;color:var(--t);
  background:#fff;border:1.5px solid var(--b);border-radius:14px;
  outline:none;transition:border-color .3s,box-shadow .3s;
}
.rh-search:focus{
  border-color:var(--op);
  box-shadow:0 0 0 4px rgba(229,139,64,.08);
}
.rh-search::placeholder{color:var(--tm)}

/* ---------- CATEGORY FILTER PILLS ---------- */
.rh-filters{
  display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;
  margin-bottom:3rem;
}
.rh-pill{
  padding:.4rem 1rem;font-family:'Outfit',sans-serif;font-size:.78rem;
  font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  color:var(--tl);background:rgba(255,255,255,.7);
  border:1.5px solid var(--b);border-radius:40px;cursor:pointer;
  transition:all .3s cubic-bezier(.22,1,.36,1);
}
.rh-pill:hover{border-color:var(--op);color:var(--t)}
.rh-pill.active{
  background:var(--o);color:#fff;border-color:var(--o);
}

/* ---------- ARTICLE CARD GRID ---------- */
.rh-content{max-width:1200px;margin:0 auto;padding:0 2rem 4rem}
.rh-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;
}
.rh-card{
  display:flex;flex-direction:column;padding:1.75rem;
  background:#fff;border:1.5px solid var(--b);border-radius:22px;
  text-decoration:none;color:inherit;
  box-shadow:0 2px 14px rgba(0,0,0,.04);
  transition:all .4s cubic-bezier(.22,1,.36,1);
}
.rh-card:hover{
  transform:translateY(-5px);
  box-shadow:0 14px 40px rgba(229,139,64,.1);
  border-color:var(--op);
}
.rh-card-tag{
  display:inline-block;font-size:.6rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;
  color:var(--o);background:rgba(229,139,64,.08);
  padding:.2rem .55rem;border-radius:6px;margin-bottom:.85rem;
  align-self:flex-start;
}
.rh-card-tag[data-tag="Guide"]{color:#2a7d4f;background:rgba(42,125,79,.08)}
.rh-card-tag[data-tag="Tips"]{color:var(--o);background:rgba(229,139,64,.08)}
.rh-card-tag[data-tag="Case Study"]{color:#a0522d;background:rgba(160,82,45,.08)}
.rh-card-tag[data-tag="Documentation"]{color:#4a6fa5;background:rgba(74,111,165,.08)}
.rh-card h3{
  font-size:1rem;font-weight:700;color:var(--t);
  line-height:1.4;margin-bottom:.5rem;
}
.rh-card p{
  font-size:.82rem;color:var(--tl);line-height:1.6;
  flex:1;margin-bottom:1rem;
}
.rh-card-meta{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:.75rem;border-top:1px solid var(--b);
}
.rh-card-time{font-size:.72rem;font-weight:600;color:var(--tm);text-transform:uppercase;letter-spacing:.05em}
.rh-card-arrow{
  font-size:1rem;color:var(--o);
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.rh-card:hover .rh-card-arrow{transform:translateX(4px)}

/* ---------- NO RESULTS ---------- */
.rh-no-results{
  text-align:center;padding:4rem 2rem;
}
.rh-no-results-icon{font-size:3rem;margin-bottom:1rem;display:block}
.rh-no-results h3{font-family:'Playfair Display',serif;font-size:1.3rem;color:var(--t);margin-bottom:.5rem}
.rh-no-results p{font-size:.88rem;color:var(--tl)}

/* ---------- VIEW ALL LINK (on index.html) ---------- */
.resources-view-all{
  display:inline-flex;align-items:center;gap:.4rem;
  margin-top:2rem;font-size:.85rem;font-weight:600;
  color:var(--o);text-decoration:none;
  transition:gap .3s;
}
.resources-view-all:hover{gap:.7rem}

/* ================================================================ */
/*                        ARTICLE PAGE                              */
/* ================================================================ */

/* ---------- BREADCRUMB ---------- */
.article-breadcrumb{
  max-width:1100px;margin:6.5rem auto 0;padding:0 2rem;
}
.article-breadcrumb a{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.82rem;font-weight:500;color:var(--tl);
  text-decoration:none;transition:color .3s;
}
.article-breadcrumb a:hover{color:var(--o)}
.article-breadcrumb svg{width:16px;height:16px;flex-shrink:0}

/* ---------- ARTICLE HEADER ---------- */
.article-head{
  max-width:800px;margin:1.5rem auto 0;padding:0 2rem;
}
.article-head .rh-card-tag{margin-bottom:1rem}
.article-head h1{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.6rem,4vw,2.4rem);font-weight:700;
  color:var(--t);line-height:1.25;margin-bottom:1rem;
}
.article-meta{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  font-size:.8rem;color:var(--tl);margin-bottom:2rem;
}
.article-meta-sep{color:var(--b);font-weight:300}

/* ---------- ARTICLE LAYOUT (body + TOC sidebar) ---------- */
.article-layout{
  display:grid;grid-template-columns:1fr 220px;gap:3rem;
  max-width:1060px;margin:0 auto;padding:0 2rem 3rem;
  align-items:start;
}

/* ---------- ARTICLE BODY TYPOGRAPHY ---------- */
.article-body{
  max-width:740px;font-size:1.02rem;line-height:1.85;color:var(--t);
  overflow-wrap:break-word;
}
.article-body h2{
  font-family:'Playfair Display',serif;
  font-size:1.45rem;font-weight:700;color:var(--t);
  margin:2.5rem 0 1rem;line-height:1.3;
  padding-bottom:.5rem;border-bottom:1px solid var(--b);
}
.article-body h3{
  font-size:1.1rem;font-weight:700;color:var(--t);
  margin:2rem 0 .75rem;line-height:1.35;
}
.article-body p{margin-bottom:1.2rem}
.article-body ul,.article-body ol{padding-left:1.5rem;margin-bottom:1.3rem}
.article-body li{margin-bottom:.45rem;line-height:1.75}
.article-body strong{color:var(--od);font-weight:600}
.article-body a{color:var(--o);text-decoration:underline;text-underline-offset:2px}
.article-body a:hover{color:var(--od)}
.article-body img{
  max-width:100%;border-radius:16px;margin:1.5rem 0;
  box-shadow:0 4px 24px rgba(0,0,0,.06);
}

/* Blockquote / callout */
.article-body blockquote{
  border-left:3px solid var(--o);
  padding:1rem 1.25rem;margin:1.5rem 0;
  background:rgba(229,139,64,.04);border-radius:0 14px 14px 0;
  font-style:italic;color:var(--tl);line-height:1.7;
}

/* Tip / info callout boxes */
.article-callout{
  display:flex;gap:.8rem;padding:1.1rem 1.25rem;
  margin:1.5rem 0;border-radius:14px;
  background:rgba(229,139,64,.05);border:1px solid rgba(229,139,64,.12);
}
.article-callout-icon{font-size:1.2rem;flex-shrink:0;line-height:1.6}
.article-callout p{margin:0;font-size:.9rem}

/* Step boxes for guides */
.article-step{
  display:flex;gap:1rem;align-items:flex-start;
  margin-bottom:1.5rem;padding:1.25rem;
  background:#fff;border:1.5px solid var(--b);border-radius:16px;
  box-shadow:0 2px 10px rgba(0,0,0,.03);
}
.article-step-num{
  flex-shrink:0;width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Playfair Display',serif;font-size:.95rem;font-weight:700;
  color:#fff;background:var(--o);border-radius:10px;
}
.article-step-body h4{font-size:.95rem;font-weight:700;color:var(--t);margin-bottom:.3rem}
.article-step-body p{font-size:.88rem;margin:0;line-height:1.6}

/* Stat highlight (for case studies) */
.article-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;
  margin:2rem 0;
}
.article-stat{
  text-align:center;padding:1.25rem 1rem;
  background:#fff;border:1.5px solid var(--b);border-radius:16px;
}
.article-stat-value{
  font-family:'Playfair Display',serif;font-size:1.8rem;
  font-weight:700;color:var(--o);line-height:1;margin-bottom:.3rem;
}
.article-stat-label{font-size:.75rem;color:var(--tl);font-weight:500;text-transform:uppercase;letter-spacing:.05em}

/* ---------- TABLE OF CONTENTS SIDEBAR ---------- */
.toc-sidebar{
  position:sticky;top:100px;align-self:start;
}
.toc-mobile-toggle{
  display:none;cursor:pointer;
  font-size:.85rem;font-weight:600;color:var(--t);
  padding:.75rem 1rem;border-radius:12px;
  background:#fff;border:1.5px solid var(--b);
  margin-bottom:1rem;
}
.toc-mobile-toggle .toc-chevron{
  float:right;transition:transform .3s;font-size:.7rem;
}
.toc-mobile-toggle.open .toc-chevron{transform:rotate(180deg)}
.toc-inner h4{
  font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--tm);margin-bottom:.75rem;
}
.toc-inner ol{
  list-style:none;padding:0;margin:0;
  border-left:2px solid var(--b);
}
.toc-inner li{margin-bottom:.1rem}
.toc-inner li a{
  display:block;padding:.35rem .8rem;
  font-size:.78rem;color:var(--tl);text-decoration:none;
  border-left:2px solid transparent;margin-left:-2px;
  transition:all .2s;border-radius:0 6px 6px 0;
}
.toc-inner li a:hover{color:var(--t);background:rgba(229,139,64,.04)}
.toc-inner li a.active{
  color:var(--o);font-weight:600;
  border-left-color:var(--o);background:rgba(229,139,64,.06);
}
.toc-inner li.toc-sub a{padding-left:1.4rem;font-size:.74rem}

/* ---------- SHARE BUTTONS ---------- */
.article-share{
  max-width:740px;margin:0 auto 3rem;padding:0 2rem;
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
}
.article-share-label{font-size:.82rem;font-weight:600;color:var(--t);margin-right:.2rem}
.share-btn{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.4rem .8rem;font-family:'Outfit',sans-serif;font-size:.75rem;
  font-weight:600;color:var(--tl);background:#fff;
  border:1.5px solid var(--b);border-radius:8px;cursor:pointer;
  transition:all .3s;
}
.share-btn:hover{border-color:var(--op);color:var(--o);background:rgba(229,139,64,.04)}
.share-btn svg{width:14px;height:14px}

/* ---------- RELATED ARTICLES ---------- */
.related-articles{
  max-width:1200px;margin:0 auto;padding:0 2rem 4rem;
}
.related-articles .si-wrap{margin-bottom:2rem}
.related-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;
}

/* ---------- ARTICLE CTA BANNER ---------- */
.article-cta{
  max-width:800px;margin:0 auto 4rem;padding:2.5rem;
  text-align:center;border-radius:24px;
  background:linear-gradient(135deg,rgba(229,139,64,.08),rgba(255,255,255,.6));
  border:1.5px solid rgba(229,139,64,.15);
}
.article-cta h3{
  font-family:'Playfair Display',serif;
  font-size:1.3rem;font-weight:700;color:var(--t);margin-bottom:.5rem;
}
.article-cta p{font-size:.88rem;color:var(--tl);margin-bottom:1.25rem}

/* ---------- FEATURED CARD (hub page) ---------- */
.rh-card-featured{
  grid-column:1/-1;
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  overflow:hidden;
}
.rh-card-featured .rh-card-img{
  background:linear-gradient(135deg,rgba(229,139,64,.1),rgba(229,139,64,.03));
  display:flex;align-items:center;justify-content:center;
  padding:2rem;min-height:200px;
}
.rh-card-featured .rh-card-img span{font-size:4rem}
.rh-card-featured .rh-card-body{padding:2rem;display:flex;flex-direction:column;justify-content:center}
.rh-card-featured h3{font-size:1.15rem}

/* ================================================================ */
/*                       RESPONSIVE                                 */
/* ================================================================ */
@media(max-width:1024px){
  .rh-grid{grid-template-columns:repeat(2,1fr)}
  .related-grid{grid-template-columns:repeat(2,1fr)}
  .article-layout{grid-template-columns:1fr;gap:0}
  .toc-sidebar{position:static;margin-bottom:2rem}
  .toc-mobile-toggle{display:block}
  .toc-inner{
    max-height:0;overflow:hidden;
    transition:max-height .4s cubic-bezier(.22,1,.36,1);
  }
  .toc-sidebar.toc-open .toc-inner{max-height:600px}
  .rh-card-featured{grid-template-columns:1fr}
  .rh-card-featured .rh-card-img{min-height:140px}
  .article-stats{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:768px){
  .rh-hero{padding-top:6rem}
  .article-breadcrumb{margin-top:5.5rem}
  .article-head h1{font-size:1.4rem}
  .article-share{justify-content:center}
  .article-stats{grid-template-columns:repeat(3,1fr);gap:.75rem}
  .article-stat-value{font-size:1.4rem}
}
@media(max-width:600px){
  .rh-grid{grid-template-columns:1fr}
  .related-grid{grid-template-columns:1fr}
  .rh-hero{padding-top:5.5rem}
  .rh-filters{gap:.35rem}
  .rh-pill{font-size:.7rem;padding:.35rem .75rem}
  .article-layout{padding:0 1.25rem 3rem}
  .article-head{padding:0 1.25rem}
  .article-breadcrumb{padding:0 1.25rem}
  .article-share{padding:0 1.25rem}
  .article-cta{margin-left:1.25rem;margin-right:1.25rem;padding:2rem 1.5rem}
  .related-articles{padding:0 1.25rem 3rem}
  .rh-content{padding:0 1.25rem 4rem}
  .article-stats{grid-template-columns:1fr}
  .article-step{flex-direction:column;gap:.6rem}
}
@media(max-width:480px){
  .article-head h1{font-size:1.25rem}
  .article-body{font-size:.95rem}
}

body.lang-ar .rh-no-results h3,
body.lang-ar .article-head h1,
body.lang-ar .article-body h2,
body.lang-ar .article-step-num,
body.lang-ar .article-stat-value,
body.lang-ar .article-cta h3{
  font-family:var(--font-display-ar)!important;
  font-style:normal!important;
  letter-spacing:0;
}
body.lang-ar .rh-search{padding:.85rem 2.8rem .85rem 1rem}
body.lang-ar .rh-search-icon{left:auto;right:1.1rem}
body.lang-ar .rh-card-meta,
body.lang-ar .article-meta,
body.lang-ar .article-share{direction:rtl}
body.lang-ar .article-breadcrumb a{flex-direction:row-reverse}
body.lang-ar .article-breadcrumb svg{transform:scaleX(-1)}
body.lang-ar .article-body{line-height:2}
body.lang-ar .article-body ul,
body.lang-ar .article-body ol{padding-left:0;padding-right:1.5rem}
body.lang-ar .article-body blockquote{
  border-left:none;
  border-right:3px solid var(--o);
  border-radius:14px 0 0 14px;
}
body.lang-ar .toc-inner ol{border-left:none;border-right:2px solid var(--b)}
body.lang-ar .toc-inner li a{
  border-left:none;
  border-right:2px solid transparent;
  margin-left:0;
  margin-right:-2px;
  border-radius:6px 0 0 6px;
}
body.lang-ar .toc-inner li a.active{border-right-color:var(--o)}
body.lang-ar .toc-inner li.toc-sub a{padding-left:.8rem;padding-right:1.4rem}