/*
Theme Name: Dubai Top 10
Theme URI: https://dubaitop10.ae
Author: dubaitop10.ae
Description: Professional theme for the Dubai Top 10 authority platform — branded header/footer, a pillar homepage, ranking-card category archives and clean single-article layouts. Designed to pair with the Dubai Top 10 Engine plugin.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: dubaitop10
*/

/* ---------- Design tokens ---------- */
:root{
  --navy:#0f2740; --navy2:#1c4a6e; --gold:#c8a15a; --gold2:#8a6d3b;
  --ink:#1f2937; --muted:#6b7280; --line:#e5e7eb; --bg:#f7f8fa; --card:#ffffff;
  --radius:16px; --container:1140px; --shadow:0 6px 24px rgba(15,39,64,.08);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:'Inter',-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.7;font-size:17px;}
h1,h2,h3,h4{font-family:'Sora','Inter',sans-serif;color:var(--navy);line-height:1.2;}
a{color:var(--navy2);text-decoration:none;}
a:hover{color:var(--gold);}
img{max-width:100%;height:auto;}
.container{max-width:var(--container);margin:0 auto;padding:0 20px;}
.btn{display:inline-block;background:var(--gold);color:#fff !important;padding:12px 22px;border-radius:10px;font-weight:700;border:none;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease;}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(200,161,90,.35);color:#fff !important;}
.btn-ghost{background:transparent;border:1.5px solid var(--navy);color:var(--navy) !important;}
.btn-ghost:hover{background:var(--navy);color:#fff !important;}
.eyebrow{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);font-weight:700;}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line);}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:70px;gap:20px;}
.brand{font-family:'Sora',sans-serif;font-weight:800;font-size:22px;letter-spacing:.3px;color:var(--navy);white-space:nowrap;}
.brand b{color:var(--gold);}
.main-nav{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.main-nav a{color:var(--ink);font-weight:600;font-size:15px;}
.main-nav a:hover{color:var(--gold);}
.header-search{display:flex;gap:6px;}
.header-search input{border:1px solid var(--line);border-radius:9px;padding:9px 12px;font-size:14px;width:180px;}
.menu-toggle{display:none;background:none;border:none;font-size:26px;color:var(--navy);cursor:pointer;}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;border-radius:0 0 28px 28px;padding:70px 0 76px;text-align:center;}
.hero h1{color:#fff;font-size:46px;margin:14px 0 16px;}
.hero p.lead{font-size:19px;opacity:.9;max-width:660px;margin:0 auto 28px;}
.hero-search{display:flex;max-width:580px;margin:0 auto;gap:8px;}
.hero-search input{flex:1;padding:16px 18px;border:none;border-radius:11px;font-size:16px;}
.hero-tags{margin-top:20px;font-size:14px;opacity:.9;}
.hero-tags a{color:#fff;}

/* ---------- Sections ---------- */
section.block{padding:56px 0;}
.section-head{text-align:center;max-width:720px;margin:0 auto 34px;}
.section-head h2{font-size:32px;margin:0 0 8px;}
.section-head p{color:var(--muted);margin:0;}

/* ---------- Stats ---------- */
.stats{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;padding:26px;text-align:center;margin-top:-40px;position:relative;z-index:5;}
.stats .num{font-size:34px;font-weight:800;color:var(--navy);font-family:'Sora',sans-serif;}
.stats .lbl{color:var(--muted);font-size:14px;}

/* ---------- Cards / grids ---------- */
.grid{display:grid;gap:20px;}
.grid-3{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));}
.grid-4{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;transition:transform .14s ease,box-shadow .14s ease;}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
.cat-card{display:flex;flex-direction:column;justify-content:space-between;min-height:96px;}
.cat-card .name{font-weight:700;color:var(--navy);font-size:17px;}
.cat-card .count{color:var(--muted);font-size:13px;margin-top:6px;}
.rank-card h3{margin:0 0 8px;font-size:20px;}
.rank-card .meta{color:var(--muted);font-size:13px;margin-bottom:10px;}
.rank-card p{margin:0 0 16px;color:#374151;}

/* ---------- Methodology bars ---------- */
.method{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;}
.bar-row{margin-bottom:16px;}
.bar-row .top{display:flex;justify-content:space-between;font-weight:600;}
.bar-row .top span:last-child{color:var(--gold);}
.bar{height:10px;background:#eef2f7;border-radius:6px;margin-top:6px;overflow:hidden;}
.bar > span{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold2));border-radius:6px;}
.options{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;}
.options .opt-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:14px;}
.options .opt{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px;}

/* ---------- Featured + CTA ---------- */
.featured{display:grid;grid-template-columns:1fr 2fr;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:var(--card);}
.featured .left{background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;padding:36px;display:flex;flex-direction:column;justify-content:center;}
.featured .right{padding:36px;}
.cta{background:var(--navy);border-radius:var(--radius);padding:46px;text-align:center;color:#fff;}
.cta h2{color:#fff;margin:0 0 10px;}
.cta p{opacity:.9;max-width:620px;margin:0 auto 22px;}

/* ---------- Breadcrumb ---------- */
.crumb{font-size:14px;color:var(--muted);padding:16px 0;}
.crumb a{color:var(--navy2);}

/* ---------- Archive header ---------- */
.archive-hero{background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;padding:52px 0;border-radius:0 0 24px 24px;}
.archive-hero h1{color:#fff;font-size:38px;margin:6px 0 8px;}
.archive-hero p{opacity:.9;margin:0;max-width:680px;}

/* ---------- Single ---------- */
.article-wrap{max-width:900px;margin:0 auto;padding:24px 20px 10px;}
.entry-content{overflow-wrap:break-word;}
.entry-content h2{margin-top:1.6em;}
.entry-content ul{padding-left:22px;}
.related{border-top:1px solid var(--line);margin-top:30px;padding-top:24px;}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy);color:#cbd5e1;margin-top:64px;}
.site-footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px;padding:48px 0;}
.site-footer h4{color:#fff;font-size:15px;margin:0 0 12px;}
.site-footer a{color:#cbd5e1;display:block;padding:4px 0;font-size:14px;}
.site-footer a:hover{color:var(--gold);}
.site-footer .brand-f{font-family:'Sora',sans-serif;font-weight:800;font-size:20px;color:#fff;}
.site-footer .brand-f b{color:var(--gold);}
.site-footer .bottom{border-top:1px solid rgba(255,255,255,.12);text-align:center;padding:18px;color:#94a3b8;font-size:13px;}

/* ---------- Responsive ---------- */
@media(max-width:860px){
  .hero h1{font-size:34px;}
  .method,.featured{grid-template-columns:1fr;}
  .site-footer .cols{grid-template-columns:1fr 1fr;}
  .main-nav{display:none;position:absolute;top:70px;left:0;right:0;background:#fff;flex-direction:column;padding:16px 20px;border-bottom:1px solid var(--line);gap:14px;}
  .main-nav.open{display:flex;}
  .header-search{display:none;}
  .menu-toggle{display:block;}
}
@media(max-width:520px){
  .options .opt-grid{grid-template-columns:1fr;}
  .site-footer .cols{grid-template-columns:1fr;}
}

/* dt10 nav patch */
/* =====================================================================
   DUBAITOP10 — APPEND TO THE END OF:
   wp-content/themes/dubaitop10/style.css

   Fixes the WordPress menu in the header:
     1. removes the bullet points (theme prints <li> with no list reset)
     2. adds hover dropdowns so categories can be grouped in the top menu
     3. mobile-friendly (dropdowns become inline on small screens)
   ===================================================================== */

/* 1 — kill list bullets in the nav */
.main-nav ul,
.main-nav li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-nav li {
  position: relative;
}

/* 2 — dropdown panels */
.main-nav .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 8px 0;
  box-shadow: 0 14px 34px rgba(15, 39, 64, .13);
  z-index: 200;
}
.main-nav li:hover > .sub-menu,
.main-nav li:focus-within > .sub-menu {
  display: block;
}
.main-nav .sub-menu a {
  display: block;
  padding: 9px 18px;
  font-weight: 500;
  font-size: 14.5px;
  white-space: nowrap;
}
.main-nav .sub-menu a:hover {
  background: #f8fafc;
  color: var(--gold);
}

/* small caret on items that have children */
.main-nav > li.menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: .65;
}

/* 3 — mobile: show submenus inline instead of absolutely positioned */
@media (max-width: 860px) {
  .main-nav .sub-menu {
    display: block;
    position: static;
    border: 0;
    box-shadow: none;
    padding: 0 0 0 14px;
    min-width: 0;
  }
  .main-nav .sub-menu a {
    padding: 6px 0;
  }
  .main-nav > li.menu-item-has-children > a::after {
    display: none;
  }
}