/* ============================================================================
   SaudiTech.net — v2 "Bold Editorial" (جرأة تحريرية)
   Child stylesheet, handle 'smartmag-child'. RTL-first: logical properties only.

   Identity: the logo's electric Saudi-green (#00F038) on ink. Two-tone accent:
     --st-brand  = electric green  → graphics: bars, pills, buttons, dark surfaces
     --c-main    = deep green      → text-safe: links, kickers on white (contrast)

   SPECIFICITY NOTE: the theme's Customizer CSS is inlined AFTER this sheet and
   redefines --c-main/--body-font on `:root` (0,1,0). Every token block here uses
   `html:root` / `html .s-dark` (0,1,1) so this sheet ALWAYS wins — no Customizer
   coordination required.
   ========================================================================== */

/* 1. Self-hosted Arabic type (functions.php falls back to Google Fonts
      automatically while these files don't exist) */
@font-face { font-family:'IBM Plex Sans Arabic'; src:url('../fonts/ibm-plex-sans-arabic-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'IBM Plex Sans Arabic'; src:url('../fonts/ibm-plex-sans-arabic-700.woff2') format('woff2'); font-weight:700; font-display:swap; }

/* 2. Core tokens ------------------------------------------------------------ */
html:root {
  /* Typography */
  --body-font: 'Almarai', 'IBM Plex Sans Arabic', system-ui, 'Segoe UI', Tahoma, sans-serif;
  --ui-font: var(--body-font);
  --text-font: var(--body-font);
  --title-font: 'IBM Plex Sans Arabic', 'Almarai', system-ui, sans-serif;
  --h-font: var(--title-font);

  --text-size: 15px;
  --text-lh: 1.75;
  --title-fw-semi: 600;
  --title-fw-bold: 700;

  /* BOLD headline scale — bigger than stock at every level */
  --title-size-xs: 15px;
  --title-size-s: 17px;
  --title-size-n: 20px;
  --title-size-m: clamp(20px, 1.2vw + 15px, 24px);
  --title-size-l: clamp(24px, 2vw + 15px, 31px);
  --title-size-xl: clamp(28px, 2.8vw + 16px, 42px);
  --grid-p-title: var(--title-size-m);
  --list-p-title: var(--title-size-m);
  --excerpt-size: 15px;

  /* Article body */
  --post-content-size: 1.2rem;
  --single-content-size: var(--post-content-size);
  --post-content-lh: 2.0;

  /* Layout */
  --main-width: 1240px;
  --grid-gutter: 32px;
  --wrap-padding: 24px;

  /* SaudiTech primitives */
  --st-brand: #00e63c;             /* electric logo green — graphics only */
  --st-brand-rgb: 0,230,60;
  --st-ink: #0d1117;
  --st-radius: 14px;
  --st-radius-s: 10px;
  --st-thumb: 96px;
  --st-shadow-card: 0 1px 2px rgba(13,17,23,.05), 0 10px 24px -14px rgba(13,17,23,.16);
  --st-shadow-card-hov: 0 2px 4px rgba(13,17,23,.08), 0 20px 40px -14px rgba(13,17,23,.24);
  --st-kicker-size: 12px;
  --st-ease: cubic-bezier(.22,.61,.36,1);
}

/* 3. LIGHT scheme ------------------------------------------------------------ */
html:root, html .s-light {
  --c-main: #0a8f46;              /* deep green — readable on white */
  --c-main-rgb: 10,143,70;
  --c-accent: var(--c-main);

  --c-contrast-0:  #ffffff;
  --c-contrast-10: #fbfcfb;
  --c-contrast-50: #f5f7f6;
  --c-contrast-75: #edf0ee;
  --c-contrast-100:#e5e9e7;
  --c-contrast-125:#dee3e0;
  --c-contrast-150:#d3d9d6;
  --c-contrast-200:#c2c9c6;
  --c-contrast-300:#a6afab;
  --c-contrast-400:#8a9490;
  --c-contrast-450:#7c8783;
  --c-contrast-500:#656f6b;
  --c-contrast-600:#505a56;
  --c-contrast-650:#444d49;
  --c-contrast-700:#38403d;
  --c-contrast-800:#242a28;
  --c-contrast-850:#191f1d;
  --c-contrast-900:#0d1117;

  --c-separator: #e5e9e7;
  --footer-bg: #0d1117;
}

/* 4. DARK scheme -------------------------------------------------------------- */
html .s-dark, html.s-dark, html .site-s-dark, html.site-s-dark, html .site-s-dark .s-light {
  --c-main: #00e63c;              /* electric green pops on ink */
  --c-main-rgb: 0,230,60;
  --c-accent: var(--c-main);

  --c-contrast-0:  #0a0c0e;
  --c-contrast-10: #0f1215;
  --c-contrast-50: #13171b;
  --c-contrast-75: #181d21;
  --c-contrast-100:#1e2429;
  --c-contrast-125:#232a30;
  --c-contrast-150:#2a323a;
  --c-contrast-200:#343d46;
  --c-contrast-300:#47525c;
  --c-contrast-400:#5e6b76;
  --c-contrast-450:#6e7c88;
  --c-contrast-500:#8492a0;
  --c-contrast-600:#99a7b4;
  --c-contrast-650:#acb9c4;
  --c-contrast-700:#bfcad3;
  --c-contrast-800:#dae2e8;
  --c-contrast-850:#e7edf1;
  --c-contrast-900:#f2f6f8;

  --c-separator: #232a30;
  --footer-bg: #0a0c0e;
  --st-shadow-card: 0 0 0 1px rgba(255,255,255,.06);
  --st-shadow-card-hov: 0 0 0 1px rgba(0,230,60,.35);
}

/* 5. Global ------------------------------------------------------------------ */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--st-brand); color: var(--st-ink); }
.main-content, .mag-box, .block-wrap { --block-wrap-mb: 48px; }

/* 6. Header — ink with the electric-green signature --------------------------- */
/* Brand stripe across the very top */
.smart-head, .main-head { position: relative; }
.smart-head::before {
  content: ""; display: block; block-size: 3px; inline-size: 100%;
  background: linear-gradient(90deg, var(--st-brand), #00b871 60%, transparent);
}
/* Nav: bold labels + electric underline */
.main-nav .menu > li > a,
.navigation .menu > li > a { font-weight: 700; letter-spacing: 0; }
.main-nav .menu > li > a { position: relative; }
.main-nav .menu > li > a::after {
  content:""; position:absolute; inset-inline: 12px; inset-block-end: 6px; block-size: 3px;
  background: var(--st-brand); border-radius: 3px;
  transform: scaleX(0); transform-origin: inline-end; transition: transform .22s var(--st-ease);
}
.main-nav .menu > li:hover > a::after,
.main-nav .menu > li.current-menu-item > a::after,
.main-nav .menu > li.current-menu-ancestor > a::after { transform: scaleX(1); transform-origin: inline-start; }
.main-head, .top-bar, .main-nav { box-shadow: none !important; }

/* 7. Section headers — chunky editorial markers -------------------------------- */
.block-head .heading, .mag-header .heading, .the-title-wrap .the-title {
  font-family: var(--title-font); font-weight: 700; font-size: 24px; letter-spacing: -.01em;
  display: inline-flex; align-items: center; gap: 12px;
}
.block-head .heading::before, .mag-header .heading::before {
  content:""; inline-size: 6px; block-size: 1.1em; border-radius: 3px;
  background: linear-gradient(180deg, var(--st-brand), #00b871); flex: 0 0 auto;
}
.block-head { border-block-end: 1px solid var(--c-separator); padding-block-end: 10px; }

/* 8. Cards — radius, lift, green kicker ----------------------------------------- */
.l-post .media, .l-post .image-link, .p-featured .media,
.grid-cont .media, .listing .media, .overlay-post .media {
  border-radius: var(--st-radius); overflow: hidden;
}
.l-post, .grid-cont .post-box, .listing .post-box { transition: transform .25s var(--st-ease); }
.l-post .media img { transition: transform .3s var(--st-ease); }
@media (prefers-reduced-motion: no-preference) {
  .l-post:hover .media img, .grid-cont .post-box:hover .media img { transform: scale(1.04); }
  .l-post:hover, .grid-cont .post-box:hover { transform: translateY(-3px); }
}
.post-title a { transition: color .15s ease; }
.l-post:hover .post-title a, .post-title a:hover { color: var(--c-main); }

/* Category kickers: bold deep-green text on cards */
.post-meta .cat-labels a, .post-cat-wrap a {
  font-size: var(--st-kicker-size); font-weight: 800; color: var(--c-main);
}
/* Electric pill ONLY on image overlays (dark ground = safe for the bright green) */
.media .cat-labels a, .cat-labels-overlay a, .overlay-post .cat-labels a {
  background: var(--st-brand); color: var(--st-ink);
  border-radius: 999px; padding: 4px 12px; font-weight: 800; font-size: 11.5px;
}

/* 9. Single post = reading product ---------------------------------------------- */
.single .post-content, .single .entry-content {
  font-family: var(--text-font);
  font-size: var(--post-content-size);
  line-height: var(--post-content-lh);
}
.single .post-content > p, .single .post-content > h2, .single .post-content > h3,
.single .post-content > ul, .single .post-content > ol, .single .post-content > figure,
.single .post-content > blockquote {
  max-inline-size: 720px; margin-inline: auto;
}
.single .post-content h2 { font-size: var(--title-size-l); font-weight: 700; margin-block: 1.6em .5em; letter-spacing: -.01em; }
.single .post-content h3 { font-size: var(--title-size-m); font-weight: 700; margin-block: 1.3em .4em; }
.single .post-content blockquote {
  border: none; padding-inline-start: 20px; border-inline-start: 4px solid var(--st-brand);
  font-size: 1.15em; color: var(--c-contrast-700);
}
.single .post-header .post-title, .single .title-wrap .post-title {
  font-size: var(--title-size-xl); font-weight: 700; line-height: 1.26; letter-spacing: -.015em;
}

/* 10. Mobile news river ----------------------------------------------------------- */
@media (max-width: 767px) {
  html:root { --wrap-padding: 16px; }
  .posts-list .l-post, .listing .l-post {
    display: grid; grid-template-columns: var(--st-thumb) 1fr; gap: 12px; align-items: start;
  }
  .posts-list .l-post .media, .listing .l-post .media {
    inline-size: var(--st-thumb); block-size: var(--st-thumb); border-radius: var(--st-radius-s);
  }
  .posts-list .l-post .post-title, .listing .l-post .post-title {
    font-size: 16px; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .posts-list .l-post .excerpt, .listing .l-post .excerpt { display: none; }
  .nav-scroller a, .mobile-nav a { min-block-size: 44px; display: inline-flex; align-items: center; }
}

/* 11. Buttons — the bold move: electric green + ink text --------------------------- */
.button, .btn, input[type="submit"], .ts-button, .newsletter .submit {
  background: var(--st-brand); color: var(--st-ink);
  border-radius: var(--st-radius-s); font-weight: 800; border: none;
  transition: filter .15s ease, transform .15s ease;
}
.button:hover, .btn:hover, input[type="submit"]:hover, .ts-button:hover {
  background: var(--st-brand); color: var(--st-ink); filter: brightness(1.08); transform: translateY(-1px);
}

/* 12. Ad slots read as deliberate --------------------------------------------------- */
.ad-code, .a-d { position: relative; background: var(--c-contrast-50); border-radius: var(--st-radius-s); }
.ad-code::before, .a-d::before {
  content: "إعلان"; position: absolute; inset-block-start: 6px; inset-inline-start: 10px;
  font-size: 10px; letter-spacing: .1em; color: var(--c-contrast-400);
}

/* 13. Focus ------------------------------------------------------------------------- */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--st-brand); outline-offset: 2px; border-radius: 4px;
}