/* ============================================
   RanzC — Mobile Gaming Guides Pakistan
   Design System & Component Styles
   ============================================ */

/* --- Design Tokens --- */
:root {
  --c-primary: #0f172a;
  --c-primary-mid: #1e293b;
  --c-secondary: #334155;
  --c-accent: #14b8a6;
  --c-accent-hover: #0d9488;
  --c-accent-warm: #f97316;
  --c-bg: #f8fafc;
  --c-surface: #ffffff;
  --c-surface-alt: #f1f5f9;
  --c-text: #1e293b;
  --c-text-secondary: #64748b;
  --c-border: #e2e8f0;
  --c-error: #dc2626;
  --c-success: #16a34a;
  --c-warning-bg: #fef2f2;
  --c-warning-border: #fecaca;

  --font-main: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;

  --w-content: 680px;
  --w-content-wide: 860px;
  --w-service: 760px;

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;

  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.08);
}

/* --- Reset --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-main);font-size:1rem;line-height:1.7;color:var(--c-text);background:var(--c-bg)}
img{max-width:100%;height:auto;display:block}
a{color:var(--c-accent);text-decoration:none;transition:color .15s}
a:hover{color:var(--c-accent-hover);text-decoration:underline}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,h5,h6{line-height:1.3;font-weight:700}
h1{font-size:clamp(1.75rem,4vw,2.5rem)}
h2{font-size:clamp(1.35rem,3vw,1.75rem)}
h3{font-size:clamp(1.1rem,2.5vw,1.3rem)}
h4{font-size:1.05rem}
p{margin-bottom:var(--space-md)}
p:last-child{margin-bottom:0}

/* --- Skip Link --- */
.skip-link{position:absolute;top:-100%;left:var(--space-md);background:var(--c-accent);color:#fff;padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);z-index:1000;font-weight:600}
.skip-link:focus{top:var(--space-md)}

/* --- Container --- */
.container{width:100%;max-width:var(--w-content-wide);margin:0 auto;padding:0 var(--space-lg)}
.container--narrow{max-width:var(--w-content)}
.container--service{max-width:var(--w-service)}

/* --- Header --- */
.site-header{background:var(--c-primary);color:#fff;position:sticky;top:0;z-index:100;border-bottom:2px solid var(--c-accent)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:60px}
.site-logo{display:flex;align-items:center;gap:var(--space-sm);color:#fff;font-weight:700;font-size:1.2rem;text-decoration:none}
.site-logo:hover{color:var(--c-accent);text-decoration:none}
.site-logo img{width:32px;height:32px}
.main-nav{display:flex;align-items:center;gap:var(--space-lg)}
.main-nav a{color:rgba(255,255,255,.8);font-size:.9rem;font-weight:500;text-decoration:none;padding:var(--space-xs) 0;border-bottom:2px solid transparent;transition:all .15s}
.main-nav a:hover,.main-nav a[aria-current="page"]{color:#fff;border-bottom-color:var(--c-accent);text-decoration:none}
.menu-toggle{display:none;background:none;border:none;color:#fff;cursor:pointer;padding:var(--space-sm)}
.menu-toggle svg{width:24px;height:24px}

/* --- Hero --- */
.hero{padding:var(--space-2xl) 0;border-bottom:1px solid var(--c-border)}
.hero h1{margin-bottom:var(--space-md);letter-spacing:-.02em}
.hero__subtitle{font-size:1.05rem;color:var(--c-text-secondary);max-width:600px;line-height:1.7;margin-bottom:var(--space-lg)}
.hero__meta{display:flex;flex-wrap:wrap;gap:var(--space-md);font-size:.85rem;color:var(--c-text-secondary);margin-top:var(--space-lg);padding-top:var(--space-md);border-top:1px solid var(--c-border)}

/* --- Buttons --- */
.btn{display:inline-flex;align-items:center;gap:var(--space-sm);padding:.7rem 1.4rem;border-radius:var(--radius-md);font-weight:600;font-size:.95rem;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:all .15s;line-height:1.2}
.btn:hover{text-decoration:none}
.btn--primary{background:var(--c-accent);color:#fff;border-color:var(--c-accent)}
.btn--primary:hover{background:var(--c-accent-hover);border-color:var(--c-accent-hover);color:#fff}
.btn--outline{background:transparent;color:var(--c-accent);border-color:var(--c-accent)}
.btn--outline:hover{background:var(--c-accent);color:#fff}
.btn--sm{padding:.45rem 1rem;font-size:.85rem}

/* --- Section --- */
.section{padding:var(--space-2xl) 0}
.section+.section{border-top:1px solid var(--c-border)}
.section__title{margin-bottom:var(--space-lg)}
.section__title--offset{padding-left:var(--space-lg);border-left:3px solid var(--c-accent)}

/* --- Observation Block --- */
.observation{background:var(--c-surface);border-left:3px solid var(--c-accent);padding:var(--space-xl);border-radius:0 var(--radius-md) var(--radius-md) 0}
.observation p{font-size:1.02rem;line-height:1.8}
.observation p+p{margin-top:var(--space-md)}

/* --- Method --- */
.method__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-lg)}
.method__item{padding:var(--space-lg);background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-md)}
.method__num{display:block;font-size:1.4rem;font-weight:700;color:var(--c-accent);margin-bottom:var(--space-sm)}
.method__item h3{margin-bottom:var(--space-sm);font-size:1rem}
.method__item p{font-size:.92rem;color:var(--c-text-secondary)}

/* --- Content Range --- */
.range{background:var(--c-surface);padding:var(--space-xl);border:1px solid var(--c-border);border-radius:var(--radius-md)}
.range__list{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xl)}
.range__col h3{font-size:.95rem;margin-bottom:var(--space-md);text-transform:uppercase;letter-spacing:.03em;color:var(--c-text-secondary)}
.range__col ul li{padding:var(--space-sm) 0;font-size:.95rem;border-bottom:1px solid var(--c-border)}
.range__col ul li:last-child{border-bottom:none}
.range__col--exclude ul li{color:var(--c-text-secondary)}
.range__col--exclude ul li::before{content:"\00d7";margin-right:var(--space-sm);color:var(--c-error);font-weight:700}
.range__col--include ul li::before{content:"+";margin-right:var(--space-sm);color:var(--c-success);font-weight:700}

/* --- Article Cards --- */
.articles-featured{display:grid;grid-template-columns:2fr 1fr;gap:var(--space-xl);align-items:start}
.article-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-md);padding:var(--space-lg);transition:border-color .15s}
.article-card:hover{border-color:var(--c-accent);text-decoration:none}
.article-card__tag{display:inline-block;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--c-accent);margin-bottom:var(--space-sm)}
.article-card h3{margin-bottom:var(--space-sm)}
.article-card h3 a{color:var(--c-text);text-decoration:none}
.article-card h3 a:hover{color:var(--c-accent);text-decoration:none}
.article-card__excerpt{font-size:.92rem;color:var(--c-text-secondary);margin-bottom:var(--space-md);line-height:1.65}
.article-card__meta{display:flex;gap:var(--space-md);font-size:.8rem;color:var(--c-text-secondary)}
.article-card--main{padding:var(--space-xl)}
.article-card--main h3{font-size:1.3rem}
.article-card--main .article-card__excerpt{font-size:1rem}
.articles-sidebar{display:flex;flex-direction:column;gap:var(--space-lg)}

/* --- FAQ --- */
.faq-list{max-width:var(--w-content)}
.faq-item{border-bottom:1px solid var(--c-border)}
.faq-item summary{padding:var(--space-md) 0;cursor:pointer;font-weight:600;font-size:1rem;display:flex;justify-content:space-between;align-items:center;gap:var(--space-md)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:1.2rem;color:var(--c-accent);flex-shrink:0;font-weight:400;transition:transform .15s}
.faq-item[open] summary::after{content:"\2212"}
.faq-answer{padding:0 0 var(--space-lg);font-size:.95rem;color:var(--c-text-secondary);line-height:1.7}
.faq-answer a{font-weight:500}

/* --- Forms --- */
.form-group{margin-bottom:var(--space-lg)}
.form-group label{display:block;font-weight:600;font-size:.9rem;margin-bottom:var(--space-sm)}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:.65rem .9rem;border:1px solid var(--c-border);border-radius:var(--radius-md);background:var(--c-surface);font-size:.95rem;transition:border-color .15s}
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--c-accent);box-shadow:0 0 0 3px rgba(20,184,166,.12)}
.form-group textarea{min-height:140px;resize:vertical}
.form-hint{font-size:.8rem;color:var(--c-text-secondary);margin-top:var(--space-xs)}

/* --- Breadcrumb --- */
.breadcrumb{padding:var(--space-md) 0;font-size:.85rem;color:var(--c-text-secondary)}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:var(--space-xs)}
.breadcrumb li{display:flex;align-items:center;gap:var(--space-xs)}
.breadcrumb li+li::before{content:"/";margin-right:var(--space-xs);color:var(--c-border)}
.breadcrumb a{color:var(--c-text-secondary)}
.breadcrumb a:hover{color:var(--c-accent)}

/* --- Tables --- */
.table-wrap{overflow-x:auto;margin:var(--space-lg) 0}
.table-wrap table{width:100%;border-collapse:collapse;font-size:.92rem}
.table-wrap th,.table-wrap td{padding:.7rem 1rem;text-align:left;border-bottom:1px solid var(--c-border)}
.table-wrap th{font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:.03em;color:var(--c-text-secondary);background:var(--c-surface-alt)}
.table-wrap tr:hover td{background:var(--c-surface-alt)}

/* --- Blockquote --- */
blockquote{border-left:3px solid var(--c-accent-warm);padding:var(--space-md) var(--space-lg);margin:var(--space-lg) 0;background:var(--c-surface-alt);font-style:italic;color:var(--c-text-secondary);border-radius:0 var(--radius-md) var(--radius-md) 0}

/* --- Side Note --- */
.side-note{background:var(--c-surface-alt);padding:var(--space-lg);border-radius:var(--radius-md);font-size:.9rem;color:var(--c-text-secondary);margin:var(--space-lg) 0;border-left:3px solid var(--c-accent-warm)}

/* --- Warning Banner --- */
.warning-banner{background:var(--c-warning-bg);border:2px solid var(--c-warning-border);color:#991b1b;padding:var(--space-md) var(--space-lg);font-weight:600;font-size:.9rem;margin-bottom:var(--space-xl);border-radius:var(--radius-md)}

/* --- Tags --- */
.tag{display:inline-block;padding:.15rem .55rem;font-size:.75rem;font-weight:600;border-radius:var(--radius-sm);background:rgba(20,184,166,.1);color:var(--c-accent-hover);text-transform:uppercase;letter-spacing:.03em}
.tag--warm{background:rgba(249,115,22,.1);color:var(--c-accent-warm)}

/* --- Author Bio --- */
.author-bio{display:flex;gap:var(--space-lg);align-items:start;padding:var(--space-lg);background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-md);margin:var(--space-xl) 0}
.author-bio__avatar{width:56px;height:56px;border-radius:50%;background:var(--c-accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.2rem;flex-shrink:0}
.author-bio__info h4{margin-bottom:var(--space-xs)}
.author-bio__info p{font-size:.9rem;color:var(--c-text-secondary)}

/* --- TOC --- */
.toc{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-md);padding:var(--space-lg);margin:var(--space-xl) 0}
.toc h2{font-size:.95rem;margin-bottom:var(--space-md);text-transform:uppercase;letter-spacing:.03em;color:var(--c-text-secondary)}
.toc ol{padding-left:var(--space-lg);list-style:decimal}
.toc li{padding:var(--space-xs) 0;font-size:.92rem}
.toc a{color:var(--c-text)}
.toc a:hover{color:var(--c-accent)}

/* --- Article Body --- */
.article-header{margin-bottom:var(--space-xl);padding-bottom:var(--space-xl);border-bottom:1px solid var(--c-border)}
.article-header h1{margin-bottom:var(--space-md)}
.article-header__meta{display:flex;flex-wrap:wrap;gap:var(--space-md);font-size:.85rem;color:var(--c-text-secondary)}
.article-body{max-width:var(--w-content)}
.article-body h2{margin-top:var(--space-xl);margin-bottom:var(--space-md)}
.article-body h3{margin-top:var(--space-lg);margin-bottom:var(--space-sm)}
.article-body p{margin-bottom:var(--space-md)}
.article-body ul,.article-body ol{margin-bottom:var(--space-md);padding-left:var(--space-lg)}
.article-body li{margin-bottom:var(--space-sm);line-height:1.65}
.article-body ul li{list-style:disc}
.article-body ol li{list-style:decimal}

/* --- Articles List --- */
.articles-grid{display:grid;gap:var(--space-xl)}

/* --- Footer --- */
.site-footer{background:var(--c-primary);color:rgba(255,255,255,.7);padding:var(--space-2xl) 0 var(--space-lg);margin-top:var(--space-2xl)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--space-xl);margin-bottom:var(--space-xl)}
.footer-section h4{color:#fff;font-size:.9rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:var(--space-md)}
.footer-section a{color:rgba(255,255,255,.6);font-size:.9rem;display:block;padding:var(--space-xs) 0;text-decoration:none}
.footer-section a:hover{color:var(--c-accent);text-decoration:none}
.footer-section p{font-size:.9rem;line-height:1.6}
.footer-bottom{padding-top:var(--space-lg);border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-md);font-size:.8rem;color:rgba(255,255,255,.4)}

/* --- Page Header --- */
.page-header{padding:var(--space-xl) 0 var(--space-lg);margin-bottom:var(--space-lg);border-bottom:1px solid var(--c-border)}
.page-header h1{margin-bottom:var(--space-sm)}
.page-header p{color:var(--c-text-secondary);max-width:560px;font-size:1.02rem}

/* --- Legal Pages --- */
.legal-content{max-width:var(--w-content)}
.legal-content h2{margin-top:var(--space-xl);margin-bottom:var(--space-md);font-size:1.15rem}
.legal-content p,.legal-content li{font-size:.95rem;line-height:1.75}
.legal-content ul{padding-left:var(--space-lg);margin-bottom:var(--space-md)}
.legal-content ul li{list-style:disc;margin-bottom:var(--space-sm)}
.legal-date{font-size:.85rem;color:var(--c-text-secondary);margin-bottom:var(--space-xl)}
.legal-disclaimer{background:var(--c-surface-alt);padding:var(--space-lg);border-radius:var(--radius-md);margin:var(--space-lg) 0;font-size:.92rem;border-left:3px solid var(--c-text-secondary)}

/* --- Service Detail --- */
.service-block{padding:var(--space-xl) 0;border-bottom:1px solid var(--c-border)}
.service-block:last-of-type{border-bottom:none}
.service-block h2{margin-bottom:var(--space-md)}
.service-block p{line-height:1.75}
.service-block__scope{margin:var(--space-lg) 0;padding:var(--space-lg);background:var(--c-surface-alt);border-radius:var(--radius-md)}
.service-block__scope h4{font-size:.9rem;text-transform:uppercase;letter-spacing:.03em;color:var(--c-text-secondary);margin-bottom:var(--space-sm)}

/* --- Utilities --- */
.text-secondary{color:var(--c-text-secondary)}
.text-sm{font-size:.9rem}
.text-xs{font-size:.8rem}
.mt-sm{margin-top:var(--space-sm)}
.mt-md{margin-top:var(--space-md)}
.mt-lg{margin-top:var(--space-lg)}
.mt-xl{margin-top:var(--space-xl)}
.mb-md{margin-bottom:var(--space-md)}
.mb-lg{margin-bottom:var(--space-lg)}

/* --- 404 --- */
.error-page{text-align:center;padding:var(--space-2xl) 0}
.error-page h1{font-size:clamp(3rem,8vw,5rem);color:var(--c-border);margin-bottom:var(--space-md)}
.error-page p{color:var(--c-text-secondary);margin-bottom:var(--space-lg);max-width:400px;margin-left:auto;margin-right:auto}

/* --- Responsive --- */
@media(max-width:768px){
  .menu-toggle{display:block}
  .main-nav{display:none;position:absolute;top:60px;left:0;right:0;background:var(--c-primary);flex-direction:column;padding:var(--space-md) var(--space-lg);gap:0;border-top:1px solid rgba(255,255,255,.1);box-shadow:var(--shadow-md)}
  .main-nav.is-open{display:flex}
  .main-nav a{padding:var(--space-sm) 0;border-bottom:1px solid rgba(255,255,255,.05)}
  .articles-featured{grid-template-columns:1fr}
  .range__list{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .author-bio{flex-direction:column;align-items:center;text-align:center}
  .hero{padding:var(--space-xl) 0}
  .section{padding:var(--space-xl) 0}
  .footer-bottom{flex-direction:column;text-align:center}
}

/* --- Cookie Banner --- */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;background:var(--c-primary);color:rgba(255,255,255,.9);padding:var(--space-lg);z-index:200;display:none;box-shadow:0 -2px 10px rgba(0,0,0,.15)}
.cookie-banner.is-visible{display:block}
.cookie-banner__inner{max-width:var(--w-content-wide);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);flex-wrap:wrap}
.cookie-banner p{font-size:.9rem;flex:1;min-width:280px;margin:0}
.cookie-banner__actions{display:flex;gap:var(--space-sm)}