/* =====================================================
   Maqam Travels — Read More Page (Final Clean CSS)
   ===================================================== */

/* ========== Variables ========== */
:root{
  --primary:#2384c6;
  --primary-600:#1d73ac;
  --ink:#0f1b2d;
  --muted:#56657a;
  --line:#e6edf4;
  --bg:#f6f9fc;
  --card:#ffffff;
  --radius:20px;
  --shadow:0 10px 30px rgba(15,27,45,.08);

  --accent:#2384c6;            /* TOC active bar */
  --container-max:1200px;

  /* Hero (mobile) */
  --hero-h-mobile:320px;       /* fixed height ≤900px */
  --title-bias:0.62;           /* 0.5 center; higher = lower */
}

/* ========== Base ========== */
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"Nexa","Poppins","Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--muted);
  background:#fff;
  line-height:1.6;
}
.container{width:min(var(--container-max),92%); margin-inline:auto; box-sizing:border-box;}

/* ========== Header ========== */
.site-header{position:sticky; top:0; z-index:1000; background:#fff; border-bottom:1px solid var(--line);}
.header-inner{position:relative; display:flex; align-items:center; justify-content:flex-end; padding:.8rem 1rem .8rem 0;}
.logo-badge{position:absolute; left:0; top:-28px; width:90px; height:165px; z-index:1010; text-decoration:none;}
.logo-badge .badge-rect{position:absolute; inset:0; background:var(--primary); border-radius:8px; box-shadow:0 18px 40px rgba(15,27,45,.15);}
.logo-badge .badge-logo{position:absolute; left:50%; top:64%; transform:translate(-50%,-50%); height:78px; width:auto; filter:drop-shadow(0 6px 14px rgba(0,0,0,.2));}
.primary-nav ul{display:flex; gap:1.5rem; list-style:none; margin:0; padding:0;}
.primary-nav a{color:var(--ink); text-decoration:none; font-weight:700;}
.lang-btn{border:1px solid var(--line); background:#fff; padding:.55rem .9rem; border-radius:999px; cursor:pointer; font-weight:700;}
.menu-toggle{display:none; padding:.55rem .95rem; border:1px solid var(--line); background:#fff; border-radius:999px; font-weight:800; letter-spacing:.04em; cursor:pointer; z-index:1060;}
.nav-scrim{position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:1040; display:none;}
body.nav-open .nav-scrim{display:block;}

/* ========== Hero (desktop default; mobile cropped) ========== */
.hero{
  position:relative;
  min-height:35vh;
  display:grid; place-items:center;
  padding:4rem 0;
  background-size:cover; background-position:center; background-color:#0f4c72;
}
.hero .overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.45));
  z-index:1; backdrop-filter:saturate(110%);
}
.hero-content{
  position:relative; z-index:2; color:#fff; text-align:left;
  width:min(var(--container-max),90%); margin-top:20px;
}
.hero-content h1{
  color:#fff; font-weight:900;
  font-size:clamp(2.2rem, 4vw, 3.6rem);
  text-shadow:0 3px 12px rgba(0,0,0,.35);
  line-height:1.05; margin:20px 0 0 0;
}
.hero--mini{min-height:40vh; padding:3rem 0;}

/* Qatar-style hero (desktop & mobile variants use same class) */
.hero.hero--qa{position:relative;}
/* Desktop look */
@media (min-width:901px){
  .hero.hero--qa{min-height:52vh; padding:0; display:block; background-size:cover; background-position:center;}
  .hero.hero--qa .overlay{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
      radial-gradient(130% 120% at 0% 50%, rgba(10,16,28,.70) 0%, rgba(10,16,28,.40) 28%, rgba(10,16,28,.18) 48%, rgba(10,16,28,0) 64%),
      radial-gradient(120% 110% at 100% 50%, rgba(10,16,28,.40) 0%, rgba(10,16,28,.18) 34%, rgba(10,16,28,0) 60%),
      linear-gradient(180deg, rgba(10,16,28,.16) 0%, rgba(10,16,28,0) 40%, rgba(10,16,28,.24) 100%);
  }
  .hero.hero--qa::after{content:""; position:absolute; inset:0; pointer-events:none; z-index:1; box-shadow:inset 0 -120px 160px -120px rgba(0,0,0,.55);}
  .hero.hero--qa .hero-content{
    position:absolute; z-index:2;
    left:max(calc((100vw - var(--container-max)) / 2 + 56px), 6vw);
    top:50%; transform:translateY(-50%);
    width:min(44vw, 620px); margin:0; text-align:left;
  }
  .hero.hero--qa .hero-content h1{
    margin:0; font-weight:300; font-size:clamp(2.2rem, 3.6vw, 3.4rem); line-height:1.1; color:#fff;
    text-shadow:0 8px 28px rgba(0,0,0,.55), 0 0 1px rgba(0,0,0,.70);
  }
}

/* ========== Footer ========== */
.site-footer{background:var(--primary); color:#dcebfa; margin-top:2rem;}
.site-footer a{color:#fff; text-decoration:none; opacity:.95;}
.site-footer a:hover{opacity:1;}
.footer-grid{display:grid; grid-template-columns:1.7fr 1.3fr; gap:clamp(16px,4vw,48px); padding:clamp(30px,3vw,28px) 0 clamp(24px,4vw,36px);}
.footer-left{display:flex; flex-direction:column; gap:clamp(12px,1.8vw,18px);}
.footer-logo{max-width:30%; width:clamp(160px,40%,260px); height:auto;}
.footer-divider{border:0; height:1px; width:100%; background:rgba(255,255,255,.85); border-radius:3px;}
.partner-logos{display:flex; align-items:center; gap:clamp(12px,3vw,28px); flex-wrap:wrap;}
.partner-logos img{height:50px; width:auto; opacity:.95;}
.partner-logos img:hover{opacity:1;}
.footer-right{display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,2.5vw,28px); align-content:start;}
.footer-col h4{margin:0 0 .6rem 0; color:#fff; font-size:clamp(1rem, .9vw + .8rem, 1.2rem);}
.footer-links{list-style:none; padding:0; margin:0; display:grid; gap:.45rem;}
.footer-links li a{font-weight:500;}
.contact-list{list-style:none; padding:0; margin:0 0 .6rem 0; display:grid; gap:.4rem;}
.contact-list li{display:flex; align-items:center; gap:.6rem;}
.contact-list .ico{border:none; border-radius:0; width:auto; height:auto; padding:0; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;}
.contact-list .ico img{width:20px; height:20px; display:block; filter:brightness(0) invert(1);}
.socials-row{display:flex; gap:.55rem; flex-wrap:wrap; margin-top:.25rem;}
.btn-icon{width:40px; height:40px; border:2px solid #fff; border-radius:50%; display:grid; place-items:center; opacity:.95;}
.btn-icon:hover{opacity:1;}
.btn-icon img{width:20px; height:20px; display:block; filter:brightness(0) invert(1);}
.copyright{text-align:center; padding:.9rem 0; background:rgba(0,0,0,.12); color:#e5f1fb; margin:0;}

/* ========== Read More Page ========== */
/* Layout (desktop) */
.rm-layout{
  display:grid; grid-template-columns:260px 1fr; grid-template-areas:"toc article";
  gap:clamp(16px,4vw,48px); align-items:start; margin-top:50px;
}
.rm-toc{
  grid-area:toc; position:sticky; top:190px;
  background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 8px 24px rgba(15,27,45,.06); overflow:hidden;
}
.rm-article{grid-area:article; display:grid; gap:1.2rem;}

.cta-group{display:flex; align-items:center; gap:1em; padding:.35rem; border-radius:999px; width:max-content; box-shadow:0 12px 35px rgba(0,0,0,.18); margin-bottom:10px;}
.btn{display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:.5rem 1.15rem; border-radius:999px; font-weight:900; text-decoration:none; letter-spacing:.02em; transition:background .2s, color .2s, border-color .2s; white-space:nowrap;}
.btn-primary{background:var(--primary); color:#fff;}
.btn-secondary2{background:#25D366; color:#fff;}
.btn-secondary{background:#fff; color:var(--primary); border:1px solid #cfe2f3;}
.anchor-target{height:1px; overflow:hidden; scroll-margin-top:90px;}

/* TOC links */
.rm-toc__toggle{display:none; width:100%; padding:.6rem .8rem; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--ink); font-weight:700; cursor:pointer;}
.rm-toc__nav{display:block; padding:0; padding-top:2px;}
.rm-toc__nav a{
  display:block; padding:.95rem 1rem; color:var(--ink); text-decoration:none; font-weight:600;
  border-left:4px solid transparent; transition:background .18s ease, border-color .18s ease;
}
.rm-toc__nav a + a{border-top:1px solid var(--line);}
.rm-toc__nav a:hover{background:#f6f9fc;}
.rm-toc__nav a[aria-current="true"], .rm-toc__nav a.is-active{
  background:#fff; border-left-color:var(--accent); box-shadow:inset 0 0 0 1px rgba(15,27,45,.06);
}

/* Cards */
.rm-block{
  background:#fff; border:1px solid #e9eef5; border-radius:14px;
  box-shadow:0 10px 28px rgba(15,27,45,.08);
  padding:20px; scroll-margin-top:110px;
}
#overview{scroll-margin-top:220px;}
.rm-block h3{
  margin:0; font-size:clamp(1.1rem, .9vw + 1rem, 1.45rem); font-weight:800; color:var(--ink); letter-spacing:.1px;
}
.rm-block h3::after{
  content:""; display:block; width:56px; height:3px; background:var(--accent);
  border-radius:2px; margin:.55rem 0 .85rem;
}
.rm-block p{margin:.55rem 0 .75rem; color:var(--muted);}
.rm-links{display:grid; gap:.4rem;}
.rm-links a{color:var(--primary-600); text-decoration:none;}
.rm-links a:hover{text-decoration:underline;}

/* Helpers */
.visually-hidden{
  position:absolute!important; height:1px; width:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); clip-path:inset(50%); white-space:nowrap; border:0; padding:0; margin:-1px;
}
.rm-note{margin-top:.4rem; font-size:.95rem; color:var(--muted);}
.rm-callout{margin-top:.6rem; padding:.8rem 1rem; background:#f7fafc; border:1px solid var(--line); border-radius:12px;}

/* Media inside cards */
.rm-media{margin-top:.75rem;}
.rm-media img{display:block; width:100%; height:auto; border-radius:12px; border:1px solid var(--line); box-shadow:0 10px 26px rgba(15,27,45,.08); background:#f2f6fb;}
.rm-media--16x9{aspect-ratio:16/9; overflow:hidden;}
.rm-media--16x9 img{width:100%; height:100%; object-fit:cover;}
.rm-media figcaption{font-size:.95rem; color:#71859b; margin-top:.45rem;}

/* ========== Responsive ========== */

/* ≤1000px (Read More layout + media bleed) */
@media (max-width:1000px){
  .rm-toc{display:none !important;}
  .rm-layout{grid-template-columns:1fr; gap:16px; margin-top:18px;}
  .rm-article{gap:16px;}
  .rm-block{border-radius:12px; box-shadow:0 8px 22px rgba(15,27,45,.07);}
  .rm-media--bleed{margin-left:-20px; margin-right:-20px;}
  .rm-media--bleed img{border-radius:0; border-left:0; border-right:0;}
}

/* ≤900px (header, hero crop, Qatar mobile hero, z-index) */
@media (max-width:900px){
  /* header/nav */
  .header-inner{justify-content:flex-end; padding:.7rem 0; padding-left:140px;}
  .menu-toggle{display:inline-block;}
  .primary-nav{
    position:fixed; top:0; right:0; height:100vh; width:min(86vw,360px);
    background:#fff; border-left:1px solid var(--line);
    transform:translateX(100%); transition:transform .25s ease; z-index:2010;
    box-shadow:-12px 0 30px rgba(15,27,45,.1); padding-top:72px;
  }
  body.nav-open .primary-nav{transform:translateX(0);}
  .primary-nav ul{flex-direction:column; gap:0; padding:0 6%;}
  .primary-nav li{padding:.8rem 0; border-top:1px solid var(--line);}
  .primary-nav li:first-child{border-top:none;}
  .site-header{z-index:2000;}
  .menu-toggle{z-index:2020;}
  .nav-scrim{z-index:1500;}

  /* hero crop */
  .hero{height:var(--hero-h-mobile); min-height:0; padding:0; display:block;}
  .hero .overlay{
    top:0; left:0; right:0; bottom:auto; height:var(--hero-h-mobile);
    background:linear-gradient(180deg, rgba(0,0,0,.50) 0%, rgba(0,0,0,.40) 32%, rgba(0,0,0,.22) 66%, rgba(0,0,0,0) 100%);
  }
  .hero-content{
    position:absolute; left:50%; top:calc(var(--hero-h-mobile) * var(--title-bias));
    transform:translate(-50%, -50%); width:min(92vw,720px); margin:0; text-align:center;
  }
  .hero-content h1{font-size:clamp(1.8rem, 5.5vw, 2.4rem); line-height:1.08; margin:.1rem 0;}

  /* Qatar mobile look */
  .hero.hero--qa{background-position:center; background-size:cover;}
  .hero.hero--qa .overlay{
    position:absolute; inset:0 0 auto 0; height:100%; z-index:1; pointer-events:none;
    background:
      linear-gradient(180deg, rgba(10,16,28,.58) 0%, rgba(10,16,28,.42) 36%, rgba(10,16,28,.18) 68%, rgba(10,16,28,0) 100%),
      radial-gradient(120% 90% at 8% 50%, rgba(10,16,28,.55) 0%, rgba(10,16,28,0) 60%);
    backdrop-filter:none;
  }
  .hero.hero--qa::after{content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 -80px 120px -60px rgba(0,0,0,.45); z-index:1;}
  .hero.hero--qa .hero-content{
    position:absolute; left:clamp(45px, 4vw, 24px); right:clamp(14px, 6vw, 28px);
    bottom:clamp(45px, 4.5vw, 28px); top:auto; transform:none; width:auto; margin:0; z-index:2; text-align:left;
  }
  .hero.hero--qa .hero-content h1{
    margin:0; font-weight:300; font-size:clamp(2rem, 5.3vw, 2.2rem); line-height:1.1; color:#fff;
    text-shadow:0 4px 16px rgba(0,0,0,.50), 0 0 1px rgba(0,0,0,.60);
  }
}

/* ≥901px (header spacing tweak) */
@media (min-width:901px){
  .header-inner{padding-left:150px;}
}

/* ≤900px footer tweaks */
@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr; gap:24px;}
  .footer-right{grid-template-columns:1fr 1fr;}
  .footer-logo{width:clamp(120px, 35vw, 180px);}
}
@media (max-width:600px){
  .footer-right{grid-template-columns:1fr;}
  .footer-logo{width:clamp(110px, 50vw, 160px);}
  .partner-logos img{height:clamp(22px, 6vw, 32px);}
  .btn-icon{width:34px; height:34px;}
  .btn-icon img{width:18px; height:18px;}
  .contact-list .ico img{width:18px; height:18px;}
}