/*
Theme Name: KSAGoldLive
Theme URI: https://ksagoldlive.com
Author: KSAGoldLive
Description: Fast, data-first bilingual (Arabic primary + English at /en/) theme for live Saudi gold prices.
Version: 1.0.0
License: GPL-2.0+
Text Domain: ksagoldlive
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root{
  --color-green:      #006C35;   /* Saudi flag green — brand */
  --color-green-dark: #00512A;
  --color-gold:       #D4AF37;   /* accent, prices */
  --color-gold-dark:  #A8880A;
  --color-gold-light: #F0D060;

  --color-up:   #16A34A;
  --color-down: #DC2626;
  --color-flat: #94A3B8;

  --bg-1:   #FFFFFF;
  --bg-2:   #F7F7F2;
  --bg-3:   #EFEFE7;
  --card-bg:#FFFFFF;
  --bg-dark:#0F1B14;

  --text-1: #14231A;
  --text-2: #55605A;
  --text-3: #8A938E;
  --border: #DDE2DE;
  --shadow: rgba(0,0,0,.07);

  --header-height: 64px;
  --sticky-bar-height: 44px;   /* FIXED — prevents layout shift */

  --radius-lg: 14px;
  --radius-md: 8px;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;

  --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem;
  --text-lg:1.125rem; --text-xl:1.375rem; --text-2xl:1.75rem; --text-3xl:2.25rem;

  /* System stack — ZERO font requests. Arabic-capable. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", "Segoe UI Arabic", "Noto Naskh Arabic", Tahoma, Arial, sans-serif;
}

[data-theme="dark"], .dark-mode{
  --bg-1:#0F1B14; --bg-2:#16231C; --bg-3:#1E2E25; --card-bg:#16231C;
  --text-1:#EAF0EC; --text-2:#A8B5AE; --text-3:#7E8C85;
  --border:#2A3B32; --shadow:rgba(0,0,0,.4);
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-sans);font-size:var(--text-base);line-height:1.7;
  color:var(--text-1);background:var(--bg-1);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--color-gold-dark);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.3;color:var(--text-1);margin:1.6em 0 .6em;font-weight:800}
h1{font-size:var(--text-3xl);margin-top:0}
h2{font-size:var(--text-2xl)}
h3{font-size:var(--text-xl)}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.2em;padding-inline-start:1.4em}
li{margin-bottom:.5em}
:focus-visible{outline:3px solid var(--color-gold);outline-offset:2px}
.container{max-width:1120px;margin:0 auto;padding:0 var(--sp-4)}
.section{padding:var(--sp-6) 0}

/* ============================================================
   STICKY PRICE BAR — fixed height, no CLS
   ============================================================ */
#sticky-price-bar{position:sticky;top:0;z-index:100;height:var(--sticky-bar-height);
  background:var(--color-green-dark);border-bottom:1px solid var(--color-gold-dark);
  display:flex;align-items:center;overflow:hidden}
.sticky-bar-inner{display:flex;align-items:center;gap:var(--sp-5);padding-inline:var(--sp-4);
  width:100%;overflow-x:auto;scrollbar-width:none}
.sticky-bar-inner::-webkit-scrollbar{display:none}
.sticky-price-item{display:flex;align-items:center;gap:var(--sp-2);white-space:nowrap;
  font-size:var(--text-sm);color:rgba(255,255,255,.75)}
.sticky-price-item strong{color:#fff;font-variant-numeric:tabular-nums;font-weight:700}
.sticky-chg{font-size:var(--text-xs);font-weight:700}
.sticky-chg.up{color:#4ade80}.sticky-chg.down{color:#f87171}

/* ============================================================
   HEADER / NAV
   ============================================================ */
#site-header{position:sticky;top:var(--sticky-bar-height);z-index:99;height:var(--header-height);
  background:var(--bg-1);border-bottom:1px solid var(--border);display:flex;align-items:center}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);width:100%}
.site-logo{display:flex;align-items:center;gap:var(--sp-2);font-weight:900;font-size:1.05rem;
  color:var(--text-1);text-decoration:none}
.site-logo:hover{text-decoration:none}
.logo-mark{width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,var(--color-gold),var(--color-gold-dark));
  display:flex;align-items:center;justify-content:center;color:#14231A;font-weight:900;font-size:.85rem}
.logo-sub{display:block;font-size:.66rem;font-weight:600;color:var(--text-3);letter-spacing:.02em}
#main-nav{display:flex;align-items:center;gap:var(--sp-4)}
#main-nav a{font-size:var(--text-sm);font-weight:600;color:var(--text-2);text-decoration:none}
#main-nav a:hover,#main-nav a.current{color:var(--color-gold-dark)}
.header-tools{display:flex;align-items:center;gap:var(--sp-2)}
.lang-switcher{font-size:var(--text-xs);font-weight:700;padding:6px 12px;border:1px solid var(--border);
  border-radius:20px;color:var(--text-2);text-decoration:none;white-space:nowrap}
.lang-switcher:hover{border-color:var(--color-gold);text-decoration:none}
.theme-toggle,.nav-toggle{background:none;border:1px solid var(--border);border-radius:8px;
  width:38px;height:38px;cursor:pointer;color:var(--text-2);font-size:1rem;line-height:1}
.nav-toggle{display:none}
@media(max-width:900px){
  #main-nav{position:fixed;inset:calc(var(--header-height) + var(--sticky-bar-height)) 0 auto 0;
    flex-direction:column;align-items:stretch;gap:0;background:var(--bg-1);
    border-bottom:1px solid var(--border);padding:var(--sp-3);display:none}
  #main-nav.open{display:flex}
  #main-nav a{padding:12px 8px;border-bottom:1px solid var(--border)}
  .nav-toggle{display:block}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{background:var(--bg-2);padding:var(--sp-6) 0;border-bottom:1px solid var(--border)}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:var(--text-xs);
  font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--color-green);margin-bottom:10px}
.hero-dot{width:8px;height:8px;border-radius:50%;background:var(--color-up);
  animation:ksaBlink 2s ease infinite}
@keyframes ksaBlink{0%,100%{opacity:1}50%{opacity:.35}}
.hero h1{font-size:clamp(1.7rem,5vw,2.5rem);margin:0 0 12px}
.hero-desc{font-size:var(--text-lg);color:var(--text-2);max-width:70ch;margin:0 0 var(--sp-4)}

/* ============================================================
   TABLES
   ============================================================ */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius-lg);
  border:1px solid var(--border);box-shadow:0 2px 8px var(--shadow);background:var(--card-bg)}
.price-table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.price-table th{background:var(--bg-2);padding:var(--sp-3) var(--sp-4);text-align:start;
  font-weight:700;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.05em;
  color:var(--text-2);border-bottom:1px solid var(--border);white-space:nowrap}
.price-table td{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border);
  font-variant-numeric:tabular-nums;color:var(--text-1);white-space:nowrap}
.price-table tr:last-child td{border-bottom:none}
.price-table tr:hover td{background:rgba(212,175,55,.05)}
.price-table td:first-child{font-weight:700;color:var(--color-gold-dark)}

/* Content tables (raw <table> in article bodies) — wrapped by the theme filter */
.ksa-content-wrap{margin:22px 0}
.ksa-content-table{width:100%;border-collapse:collapse;font-size:.92rem;background:var(--card-bg)}
.ksa-content-table th,.ksa-content-table td{padding:11px 15px;border-bottom:1px solid var(--border);
  text-align:start;vertical-align:top;line-height:1.55}
.ksa-content-table th{background:var(--bg-2);font-weight:700;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.04em;color:var(--text-2)}
.ksa-content-table tbody tr:last-child td{border-bottom:none}
.ksa-content-table tbody tr:nth-child(even) td{background:rgba(212,175,55,.045)}
.ksa-content-table td strong{color:var(--text-1);font-weight:700}

/* ============================================================
   CARDS / BUTTONS / FAQ
   ============================================================ */
.card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--sp-5);box-shadow:0 2px 8px var(--shadow)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:var(--radius-md);
  font-weight:700;font-size:var(--text-sm);text-decoration:none;border:1px solid transparent;cursor:pointer}
.btn:hover{text-decoration:none;filter:brightness(1.06)}
.btn-primary{background:var(--color-green);color:#fff}
.btn-secondary{background:var(--bg-2);color:var(--text-1);border-color:var(--border)}
.btn-gold{background:var(--color-gold);color:#14231A}

details.wp-block-details{margin:0 0 .9rem;border:1px solid var(--border);border-radius:var(--radius-md);
  padding:.85rem 1.1rem;background:var(--card-bg)}
details.wp-block-details>summary{cursor:pointer;font-weight:700;padding:.2rem 0}
details.wp-block-details[open]{padding-bottom:1rem}
details.wp-block-details>summary::marker{color:var(--color-gold)}

.section-label{font-size:var(--text-xs);font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-3);margin:0 0 4px}

/* ============================================================
   E-E-A-T byline + author box
   ============================================================ */
.ksa-byline{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:var(--text-sm);
  color:var(--text-2);margin:0 0 20px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.ksa-byline a{color:var(--color-gold-dark);font-weight:600}
.ksa-byline-sep{opacity:.5}
.ksa-author-box{display:flex;gap:16px;align-items:flex-start;margin:34px 0 8px;padding:20px 22px;
  background:var(--bg-2);border:1px solid var(--border);border-inline-start:4px solid var(--color-gold);
  border-radius:12px}
.ksa-author-avatar{flex:0 0 48px;width:48px;height:48px;border-radius:50%;
  background:linear-gradient(135deg,var(--color-gold),var(--color-gold-dark));
  color:#14231A;font-weight:900;display:flex;align-items:center;justify-content:center;font-size:.9rem}
.ksa-author-name{margin:0 0 5px;font-size:1rem;font-weight:800}
.ksa-author-body p{margin:0;font-size:.9rem;line-height:1.6;color:var(--text-2)}

/* ============================================================
   BREADCRUMB / FOOTER / 404
   ============================================================ */
.ksa-breadcrumb{font-size:var(--text-xs);color:var(--text-3);padding:14px 0}
.ksa-breadcrumb a{color:var(--text-2)}
#site-footer{background:var(--bg-dark);color:rgba(255,255,255,.72);padding:var(--sp-6) 0 var(--sp-5);margin-top:var(--sp-7)}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--sp-5)}
.footer-heading{color:#fff;font-size:var(--text-sm);font-weight:800;margin:0 0 12px;
  text-transform:uppercase;letter-spacing:.06em}
#site-footer ul{list-style:none;padding:0;margin:0}
#site-footer li{margin-bottom:8px}
#site-footer a{color:rgba(255,255,255,.72);font-size:var(--text-sm)}
#site-footer a:hover{color:var(--color-gold)}
.footer-bottom{margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid rgba(255,255,255,.12);
  font-size:var(--text-xs);color:rgba(255,255,255,.5);line-height:1.7}

/* ============================================================
   ARTICLE
   ============================================================ */
.article-content{max-width:820px}
.article-content h2{scroll-margin-top:calc(var(--header-height) + var(--sticky-bar-height) + 16px)}
.article-meta{display:flex;flex-wrap:wrap;gap:var(--sp-4);font-size:var(--text-xs);
  color:var(--text-3);margin-bottom:10px}

@media print{
  #sticky-price-bar,#site-header,#site-footer,.chart-controls,.ksa-ad{display:none!important}
}