/* =========================================================
   Totally Doha — main stylesheet
   Palette extracted from the site logo:
   maroon #6B0F38 / navy #362D42 / gold #D9A94E / teal #266276
   ========================================================= */

:root{
  --maroon: #6b0f38;
  --maroon-dark: #4a0a27;
  --navy: #362d42;
  --navy-dark: #241d2c;
  --gold: #d9a94e;
  --gold-light: #f0dcae;
  --teal: #266276;
  --cream: #faf5ec;
  --cream-deep: #f3e9d6;
  --ink: #2a2430;
  --ink-soft: #5b5364;
  --white: #ffffff;
  --border: #e8ddc9;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(54,45,66,0.10);
  --shadow-sm: 0 4px 14px rgba(54,45,66,0.08);
  --max: 1160px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4{
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  color: var(--navy-dark);
  line-height: 1.2;
  margin: 0 0 0.5em;
  font-weight: 700;
}
h1{ font-size: clamp(2rem, 4vw, 3rem); }
h2{ font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-top: 1.6em;}
h3{ font-size: 1.25rem; }
p{ margin: 0 0 1.1em; }
a{ color: var(--maroon); text-decoration: none; }
a:hover{ color: var(--maroon-dark); text-decoration: underline; }
img{ max-width:100%; display:block; }
ul,ol{ padding-left: 1.3em; }
.container{ max-width: var(--max); margin: 0 auto; padding: 0 20px; }

/* ---------- Skip link ---------- */
.skip-link{
  position:absolute; left:-999px; top:auto;
  background: var(--navy); color:#fff; padding: 10px 16px; z-index: 999; border-radius: 0 0 8px 0;
}
.skip-link:focus{ left:0; top:0; }

/* ---------- Top bar ---------- */
.topbar{
  background: var(--navy-dark);
  color: var(--gold-light);
  font-size: 0.82rem;
}
.topbar .container{ display:flex; justify-content:space-between; align-items:center; padding-top:6px; padding-bottom:6px; flex-wrap:wrap; gap:6px;}
.topbar a{ color: var(--gold-light); }
.topbar a:hover{ color:#fff; }
.lang-switch{ display:flex; gap:8px; align-items:center; }
.lang-switch a{ color: var(--gold-light); font-weight:600; }
.lang-switch a:hover{ color:#fff; text-decoration:none; }
.lang-switch span{ opacity:.5; }

/* ---------- Header ---------- */
.site-header{
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky; top:0; z-index: 100;
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between; gap: 20px;
  padding-top: 12px; padding-bottom: 12px;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ height: 48px; width:auto; }
.brand-text{ display:none; }

.main-nav{ display:flex; align-items:center; gap: 4px; }
.main-nav ul{ list-style:none; display:flex; gap: 2px; margin:0; padding:0; }
.main-nav a{
  color: var(--navy-dark); font-weight:600; font-size: 0.95rem;
  padding: 10px 12px; border-radius: 8px; display:block;
}
.main-nav a:hover{ background: var(--cream-deep); text-decoration:none; color: var(--maroon); }
.main-nav a.active{ color: var(--maroon); }

.nav-toggle{
  display:none; background:none; border: 1px solid var(--border); border-radius:8px;
  width:44px; height:40px; cursor:pointer; align-items:center; justify-content:center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:20px; height:2px; background: var(--navy-dark); position:relative;
  transition: all .2s ease;
}
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }

/* ---------- Hero ---------- */
.hero{
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 55%, var(--maroon-dark) 100%);
  color: #fff;
  padding: 64px 0 74px;
  position: relative;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at 80% 20%, rgba(217,169,78,0.28), transparent 55%);
  pointer-events:none;
}
.hero .container{ position:relative; }
.hero-eyebrow{
  color: var(--gold-light); text-transform:uppercase; letter-spacing:.12em; font-size:.78rem; font-weight:700;
}
.hero h1{ color:#fff; max-width: 820px; margin-top:.4em; }
.hero p.lead{ max-width: 640px; font-size: 1.15rem; color: #ece6f0; }
.hero-updated{ font-size:.85rem; color: var(--gold-light); opacity:.9; }

.hero-small{ padding: 42px 0 50px; }
.hero-small h1{ margin-top:.3em; }

.breadcrumbs{ font-size:.85rem; color: var(--gold-light); opacity:.9; }
.breadcrumbs a{ color: var(--gold-light); }
.breadcrumbs a:hover{ color:#fff; }

/* ---------- Section / cards ---------- */
.section{ padding: 50px 0; }
.section-tight{ padding: 20px 0 50px; }
.section-title{ text-align:center; max-width:680px; margin: 0 auto 34px; }
.section-title h2{ margin-top:0; }
.section-title p{ color: var(--ink-soft); }

.grid{ display:grid; gap: 24px; }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }

.card{
  background:#fff; border-radius: var(--radius); box-shadow: var(--shadow-sm);
  overflow:hidden; display:flex; flex-direction:column; height:100%;
  border: 1px solid var(--border);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow); }
.card-media{
  height: 150px;
  background: linear-gradient(135deg, var(--gold-light), var(--cream-deep));
  display:flex; align-items:center; justify-content:center;
  color: var(--maroon);
  position:relative;
}
.card-media .cat-tag{
  position:absolute; top:10px; left:10px; background: rgba(54,45,66,0.85); color: var(--gold-light);
  font-size: .7rem; text-transform:uppercase; letter-spacing:.06em; padding:4px 9px; border-radius: 999px; font-weight:700;
}
.card-body{ padding: 18px 20px 20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.card-body h3{ margin:0; font-size:1.12rem; }
.card-body h3 a{ color: var(--navy-dark); }
.card-body h3 a:hover{ color: var(--maroon); text-decoration:none; }
.card-body p{ margin:0; color: var(--ink-soft); font-size:.95rem; flex:1; }
.card-link{ font-weight:700; font-size:.88rem; }

.icon-badge{
  width:64px; height:64px; border-radius:50%;
  background: linear-gradient(135deg, var(--gold), var(--teal));
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.6rem;
  margin: 0 auto 14px;
}

/* ---------- Category pills / cats grid on home ---------- */
.cat-grid{ display:grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.cat-card{
  background:#fff; border:1px solid var(--border); border-radius: var(--radius);
  padding: 24px 18px; text-align:center; box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.cat-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow); text-decoration:none; }
.cat-card h3{ font-size:1.02rem; margin:0 0 6px; }
.cat-card h3 a{ color: var(--navy-dark); }
.cat-card p{ color: var(--ink-soft); font-size:.85rem; margin:0; }

/* ---------- Article layout ---------- */
.article-layout{ display:grid; grid-template-columns: 1fr 300px; gap: 44px; align-items:start; }
.article-body h2{ border-bottom: 2px solid var(--gold-light); padding-bottom:.3em; }
.article-body{ font-size: 1.05rem; }
.article-body p{ color: var(--ink); }
.article-intro{ font-size: 1.12rem; color: var(--ink-soft); }

.toc{
  background:#fff; border:1px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px; margin: 28px 0; box-shadow: var(--shadow-sm);
}
.toc h2{ font-size:1rem; margin:0 0 8px; text-transform:uppercase; letter-spacing:.06em; }
.toc ol{ margin:0; padding-left: 1.2em; }
.toc a{ font-weight:600; }

.faq{ margin-top: 10px; }
.faq-item{
  background:#fff; border:1px solid var(--border); border-radius: 10px; padding: 16px 18px; margin-bottom: 12px;
}
.faq-item h3{ font-size: 1rem; margin:0 0 6px; color: var(--maroon); }
.faq-item p{ margin:0; color: var(--ink-soft); }

/* Sidebar */
.sidebar{ display:flex; flex-direction:column; gap: 22px; position: sticky; top: 96px; }
.sidebar-box{
  background:#fff; border:1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm);
}
.sidebar-box h3{ font-size: .95rem; text-transform:uppercase; letter-spacing:.06em; color: var(--teal); margin:0 0 12px; }
.sidebar-box ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.sidebar-box li a{ font-weight:600; color: var(--navy-dark); font-size:.94rem; }
.sidebar-box li a:hover{ color: var(--maroon); }
.sidebar-cta{
  background: linear-gradient(135deg, var(--maroon), var(--maroon-dark)); color:#fff; text-align:center;
}
.sidebar-cta h3{ color: var(--gold-light); }
.sidebar-cta p{ color: #f0e3e9; font-size:.9rem; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; background: var(--gold); color: var(--navy-dark); font-weight:700;
  padding: 12px 24px; border-radius: 999px; border:none; cursor:pointer; font-size: .95rem;
}
.btn:hover{ background: #e6bc6a; text-decoration:none; color: var(--navy-dark); }
.btn-outline{
  background: transparent; color:#fff; border: 1.5px solid rgba(255,255,255,0.6);
}
.btn-outline:hover{ background: rgba(255,255,255,0.12); color:#fff; }

/* ---------- Breadcrumb strip on cat/article top of body (mobile fallback) ---------- */
.updated-badge{
  display:inline-flex; align-items:center; gap:6px; background: var(--cream-deep); color: var(--teal);
  font-size:.78rem; font-weight:700; padding: 4px 10px; border-radius: 999px; margin-bottom: 14px;
}

/* ---------- Newsletter / footer CTA band ---------- */
.cta-band{
  background: var(--cream-deep); border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding: 40px 0;
}
.cta-band .container{ display:flex; align-items:center; justify-content:space-between; gap: 24px; flex-wrap:wrap; }
.cta-band h2{ margin:0 0 4px; font-size: 1.4rem; }
.cta-band p{ margin:0; color: var(--ink-soft); }

/* ---------- Footer ---------- */
.site-footer{ background: var(--navy-dark); color: #d9d2e0; padding: 50px 0 24px; margin-top: 40px; }
.footer-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 30px; margin-bottom: 34px; }
.footer-grid h4{ color: var(--gold-light); font-family: inherit; font-size: .85rem; text-transform:uppercase; letter-spacing:.08em; margin:0 0 14px; }
.footer-grid ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; }
.footer-grid a{ color: #d9d2e0; font-size: .92rem; }
.footer-grid a:hover{ color: var(--gold-light); }
.footer-brand img{ height:40px; margin-bottom:12px; }
.footer-brand p{ font-size:.88rem; color:#b7aec2; max-width: 320px;}
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:10px; font-size:.82rem; color:#a99fb6;
}
.footer-bottom a{ color:#a99fb6; }
.footer-bottom a:hover{ color: var(--gold-light); }

/* ---------- 404 ---------- */
.error-page{ text-align:center; padding: 90px 0; }
.error-page h1{ font-size: 5rem; color: var(--gold); margin-bottom:0; }

/* ---------- Utility ---------- */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.small{ font-size:.85rem; color: var(--ink-soft); }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .article-layout{ grid-template-columns: 1fr; }
  .sidebar{ position:static; flex-direction: row; flex-wrap:wrap; }
  .sidebar-box{ flex:1; min-width: 260px; }
  .cat-grid{ grid-template-columns: repeat(3, 1fr); }
  .grid-4{ grid-template-columns: repeat(2,1fr); }
  .grid-3{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 760px){
  .main-nav{ display:none; position:absolute; top:100%; left:0; right:0; background:#fff; border-bottom:1px solid var(--border); box-shadow: var(--shadow); }
  .main-nav.open{ display:block; }
  .main-nav ul{ flex-direction:column; padding: 10px; }
  .main-nav a{ padding: 12px 14px; }
  .nav-toggle{ display:flex; }
  .cat-grid{ grid-template-columns: repeat(2, 1fr); }
  .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .cta-band .container{ flex-direction:column; align-items:flex-start; }
}

/* =========================================================
   RTL support (Arabic and future RTL languages)
   Activated via <html dir="rtl">
   ========================================================= */
[dir="rtl"] body{
  font-family: 'Tajawal', 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4{
  font-family: 'Tajawal', Georgia, serif;
}
[dir="rtl"] .breadcrumbs, [dir="rtl"] .main-nav ul, [dir="rtl"] .footer-bottom,
[dir="rtl"] .topbar .container, [dir="rtl"] .cta-band .container{
  direction: rtl;
}
[dir="rtl"] .skip-link{ left:auto; right:-999px; border-radius: 0 0 0 8px; }
[dir="rtl"] .skip-link:focus{ right:0; left:auto; }
[dir="rtl"] .brand{ flex-direction: row-reverse; }
[dir="rtl"] .main-nav.open{ text-align: right; }
[dir="rtl"] .article-layout{ direction: rtl; }
[dir="rtl"] .toc ol, [dir="rtl"] .article-body ul, [dir="rtl"] .article-body ol{
  padding-right: 1.3em; padding-left: 0;
}
[dir="rtl"] .card-media .cat-tag{ left:auto; right:10px; }