/* ========================================================================
   Wikiarab Lamp — Custom design layer for the SmartMag/Bunyad theme.
   Built on the theme's own CSS custom-property system (--c-main, --*-font)
   so the whole site (header, grids, cards, footer) recolors from one place.
   ======================================================================== */

/* ---- 1. Self-hosted fonts ------------------------------------------- */
@font-face {
  font-family: 'Noto Kufi Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/kufi-500.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+0000-00FF;
}
@font-face {
  font-family: 'Noto Kufi Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/kufi-700.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+0000-00FF;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/plex-400.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+0000-00FF;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/plex-500.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+0000-00FF;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/plex-600.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+0000-00FF;
}

/* ---- 2. Design tokens (drives the whole theme) ----------------------- */
:root {
  --c-main: #E36414;
  --c-main-rgb: 227,100,20;
  --title-font: "Noto Kufi Arabic", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --h-font: "Noto Kufi Arabic", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --text-font: "Noto Kufi Arabic", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --ui-font: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --body-font: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --wa-bg: #FBF6ED;
  --wa-surface: #FFFFFF;
  --wa-ink: #241C14;
  --wa-ink-soft: #5C5044;
  --wa-line: rgba(36,28,20,0.10);
  --wa-shadow: 0 10px 26px -14px rgba(36,28,20,0.28);
  --wa-shadow-lg: 0 22px 46px -20px rgba(36,28,20,0.34);
  --wa-radius: 14px;
  --wa-radius-sm: 8px;
  --wa-radius-pill: 999px;
  --wa-transition: 220ms cubic-bezier(.2,.7,.3,1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --wa-transition: 1ms; }
  * { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* ---- 3. Base page ----------------------------------------------------- */
body {
  background: var(--wa-bg);
  color: var(--wa-ink);
}
.entry-content,
.post-content,
.entry-content p,
.post-content p {
  font-family: var(--body-font) !important;
  color: var(--wa-ink);
  line-height: 1.85;
}
.entry-content h1, .entry-content h2, .entry-content h3,
.post-content h1, .post-content h2, .post-content h3 {
  font-family: var(--title-font) !important;
  line-height: 1.25;
}

/* ---- 4. Header ---------------------------------------------------------*/
.smart-head-main {
  background: var(--wa-surface);
  --c-shadow: rgba(36,28,20,0.08);
}
.smart-head-main .smart-head-mid {
  border-top-width: 3px;
  border-top-color: var(--c-main);
  box-shadow: 0 1px 0 var(--wa-line);
}
.ts-logo .logo-image { filter: none; }
.navigation-main .menu > li > a {
  font-family: var(--title-font);
  font-weight: 700;
  color: var(--wa-ink);
  transition: color var(--wa-transition);
}
.navigation-main .menu > li > a:hover,
.navigation-main .menu > li.current-menu-item > a {
  color: var(--c-main);
}
.navigation-main .mega-menu {
  border-radius: var(--wa-radius);
  box-shadow: var(--wa-shadow-lg);
  border: 1px solid var(--wa-line);
  overflow: hidden;
}
.navigation-main .sub-nav .menu-item a {
  transition: color var(--wa-transition), padding-inline-start var(--wa-transition);
}
.navigation-main .sub-nav .menu-item a:hover {
  color: var(--c-main);
}
.navigation-main .view-all a { color: var(--c-main); font-weight: 700; }
.smart-head .spc-social .link.service {
  background: var(--wa-bg);
  color: var(--wa-ink);
  transition: background var(--wa-transition), color var(--wa-transition), transform var(--wa-transition);
}
.smart-head .spc-social .link.service:hover {
  background: var(--c-main);
  color: #fff;
  transform: translateY(-2px);
}
.offcanvas-toggle .hamburger-icon span,
.offcanvas-toggle .hamburger-icon { background: var(--wa-ink); }

/* Mobile off-canvas menu */
.mobile-menu-container { background: var(--wa-surface); }
.mobile-menu-container .mobile-menu > li > a {
  font-family: var(--title-font);
  font-weight: 700;
  color: var(--wa-ink);
}

/* ---- 5. Section headings / tabs --------------------------------------- */
.block-head .heading,
.smartmag-heading .heading,
h4.heading {
  font-family: var(--title-font);
  font-weight: 700;
  color: var(--wa-ink);
  position: relative;
  padding-inline-start: 14px;
}
.block-head .heading::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .15em;
  bottom: .15em;
  width: 5px;
  border-radius: var(--wa-radius-pill);
  background: var(--c-main);
}
.block-head .subcats.filters,
.block-head .subcats.filters li a {
  font-family: var(--ui-font);
}
.subcats.filters li a {
  border-radius: var(--wa-radius-pill);
  padding: 6px 14px;
  transition: background var(--wa-transition), color var(--wa-transition);
  color: var(--wa-ink-soft);
}
.subcats.filters li a.active,
.subcats.filters li a:hover {
  background: var(--c-main);
  color: #fff;
}

/* ---- 6. Post cards (shared by every grid/list widget) ------------------ */
.l-post { --wa-cat: var(--c-main); }
.l-post .media,
.l-post .image-link,
.l-post .media .img {
  border-radius: var(--wa-radius);
  overflow: hidden;
}
.l-post .media { box-shadow: var(--wa-shadow); }
.l-post .image-link .img {
  transition: transform 500ms cubic-bezier(.2,.7,.3,1);
}
.l-post:hover .image-link .img { transform: scale(1.06); }
.l-post .post-title,
.l-post .is-title {
  font-family: var(--title-font);
  font-weight: 700;
  transition: color var(--wa-transition);
}
.l-post:hover .post-title a,
.l-post .post-title a:hover {
  color: var(--c-main);
}
.l-post .post-meta .date,
.l-post .post-meta time {
  font-family: var(--ui-font);
  color: var(--wa-ink-soft);
}
.l-post .category {
  font-family: var(--ui-font);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .01em;
  border-radius: var(--wa-radius-pill);
  padding: 4px 12px;
  color: #fff !important;
  background: var(--c-term, var(--c-main));
  display: inline-block;
}
.l-post.grid-overlay .category { background: var(--c-term, var(--c-main)); }

/* Feature grid hero (top-of-page big items) */
.feat-grid .item .content-wrap {
  border-radius: 0 0 var(--wa-radius) var(--wa-radius);
}
.feat-grid .grid-overlay::after {
  background: linear-gradient(180deg, rgba(36,28,20,0) 35%, rgba(36,28,20,.82) 100%);
}
.feat-grid .item-main .post-title,
.feat-grid .item-main .is-title { font-size: 1.5em; }

/* Grid / list section wrapper spacing rhythm */
.block-wrap { margin-block-end: var(--wa-space, 8px); }
.block-wrap + .block-wrap { margin-block-start: 4px; }

/* ---- 7. Buttons & CTAs -------------------------------------------------- */
.elementor-button,
.pagination a.next,
.pagination .load-more a,
.search-submit {
  font-family: var(--ui-font) !important;
  font-weight: 600;
  border-radius: var(--wa-radius-pill) !important;
  background: var(--c-main) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
  transition: background var(--wa-transition), transform var(--wa-transition);
}
.elementor-button:hover,
.pagination a.next:hover,
.pagination .load-more a:hover {
  background: #c2530d !important;
  transform: translateY(-1px);
  color: #fff !important;
}

/* ---- 8. Search --------------------------------------------------------- */
.wpr-search-form-input,
.search-field {
  font-family: var(--ui-font);
  border-radius: var(--wa-radius-pill);
  border: 1px solid var(--wa-line);
}
.wpr-search-form-submit,
.search-modal-box .search-submit {
  color: var(--c-main);
}
.search-modal-wrap { background: rgba(36,28,20,.92); }

/* ---- 9. Newsletter block ------------------------------------------------ */
.spc-newsletter {
  background: linear-gradient(135deg, var(--c-main), #a84500);
  border-radius: var(--wa-radius);
  color: #fff;
}
.spc-newsletter .mail-top-icon { color: #fff; }
.spc-newsletter input[type="email"] {
  border-radius: var(--wa-radius-pill);
  font-family: var(--ui-font);
}
.spc-newsletter button,
.spc-newsletter .submit {
  border-radius: var(--wa-radius-pill);
  background: var(--wa-ink);
  font-family: var(--ui-font);
  font-weight: 600;
}

/* ---- 10. Footer ---------------------------------------------------------*/
.main-footer.footer-bold.s-dark {
  background: var(--wa-ink);
  border-top: 4px solid var(--c-main) !important;
  border-image: none !important;
}
.main-footer .links .menu li a {
  font-family: var(--ui-font);
  color: rgba(255,255,255,.78);
  transition: color var(--wa-transition);
}
.main-footer .links .menu li a:hover { color: var(--c-main); }
.main-footer .copyright {
  font-family: var(--ui-font);
  color: rgba(255,255,255,.55);
}
.main-footer .spc-social .link.service {
  background: rgba(255,255,255,.08);
  color: #fff;
  transition: background var(--wa-transition), transform var(--wa-transition);
}
.main-footer .spc-social .link.service:hover {
  background: var(--c-main);
  transform: translateY(-2px);
}

/* ---- 11. Curated category palette (replaces the auto-generated hues) --- */
.term-color-97 { --c-main: #1F7A5C; } .navigation .menu-cat-97 { --c-term: #1F7A5C; }
.term-color-21 { --c-main: #B23A48; } .navigation .menu-cat-21 { --c-term: #B23A48; }
.term-color-39 { --c-main: #8A6A1E; } .navigation .menu-cat-39 { --c-term: #8A6A1E; }
.term-color-65 { --c-main: #2E5C8A; } .navigation .menu-cat-65 { --c-term: #2E5C8A; }
.term-color-55 { --c-main: #1E8A8A; } .navigation .menu-cat-55 { --c-term: #1E8A8A; }
.term-color-6  { --c-main: #4A4A6B; } .navigation .menu-cat-6  { --c-term: #4A4A6B; }
.term-color-33 { --c-main: #6B4A8A; } .navigation .menu-cat-33 { --c-term: #6B4A8A; }
.term-color-61 { --c-main: #A8461E; } .navigation .menu-cat-61 { --c-term: #A8461E; }
.term-color-59 { --c-main: #A8461E; } .navigation .menu-cat-59 { --c-term: #A8461E; }
.term-color-427{ --c-main: #3A6B35; } .navigation .menu-cat-427{ --c-term: #3A6B35; }
.term-color-96 { --c-main: #8A5A1E; } .navigation .menu-cat-96 { --c-term: #8A5A1E; }
.term-color-4  { --c-main: #6B8A1E; } .navigation .menu-cat-4  { --c-term: #6B8A1E; }
.l-post .category.term-color-97,
.l-post .category.term-color-21,
.l-post .category.term-color-39,
.l-post .category.term-color-65,
.l-post .category.term-color-55,
.l-post .category.term-color-6,
.l-post .category.term-color-33,
.l-post .category.term-color-61,
.l-post .category.term-color-59,
.l-post .category.term-color-427,
.l-post .category.term-color-96,
.l-post .category.term-color-4 { background: var(--c-main) !important; }

/* ---- 12. Misc polish ----------------------------------------------------*/
::selection { background: var(--c-main); color: #fff; }
a { transition: color var(--wa-transition); }