/* =====================================================================
   Slotnews — modern visual layer (Linear-inspired dark UI)
   Palette, typography, surfaces, header, buttons, news grid, logo motion.
   ===================================================================== */

:root {
  --brand-main: #7c3aed;
  --brand-second: #ec4899;
  --brand-glow: rgba(124, 58, 237, 0.45);
  --ui-bg: #0c0d12;
  --ui-bg-2: #08090c;
  --ui-surface: #14161d;
  --ui-surface-2: #1b1e28;
  --ui-text: #eef0f4;
  --ui-muted: #8b93a7;
  --ui-border: rgba(255, 255, 255, 0.08);
  --ui-border-strong: rgba(255, 255, 255, 0.14);
  --ui-radius: 14px;
  --ui-radius-sm: 10px;
  --ui-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

/* ---------- Base & typography ---------- */
body { background-color: var(--ui-bg) !important; color: #c9cfdb; font-family: 'Inter', 'Roboto', sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { letter-spacing: -0.02em; font-weight: 700; }
h1 { letter-spacing: -0.03em; }
.space-page-content p, .space-archive-loop-item-excerpt, .space-page-content-excerpt p { line-height: 1.7; }
a { transition: color 0.2s; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ui-bg-2); }
::-webkit-scrollbar-thumb { background: #262a36; border-radius: 10px; border: 2px solid var(--ui-bg-2); }
::-webkit-scrollbar-thumb:hover { background: #343a49; }

/* ---------- Header: glass ---------- */
.space-header-height .space-header-menu ul.main-menu li a,
.space-header-height .space-header-menu ul.main-menu li:hover a,
.space-header-height .space-header-menu ul.main-menu li a:hover { border-bottom-color: transparent !important; }
.space-header-wrap {
  background: rgba(12, 13, 18, 0.78) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--ui-border);
  box-shadow: none !important;
}
.space-header-wrap.is-scrolled { background: rgba(12, 13, 18, 0.92) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important; }
.space-header-menu ul.main-menu > li > a { font-weight: 500; letter-spacing: -0.01em; }
.space-header-menu ul.main-menu li ul.sub-menu {
  background: var(--ui-surface) !important; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm);
  box-shadow: var(--ui-shadow) !important;
}
.site-search input.site-search-input { background: rgba(255, 255, 255, 0.05); border-color: var(--ui-border-strong); }


/* ---------- Main navigation: pills, badges, chevrons, dropdown cards ---------- */
.space-header-menu ul.main-menu > li { height: 80px; display: flex; align-items: center; margin-right: 2px; }
.space-header-height .space-header-menu ul.main-menu > li > a {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 14px !important; border-radius: 10px; border: 0 !important;
  color: #c9cfdb !important; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; line-height: 38px;
  text-decoration: none !important; background: transparent;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.space-header-height .space-header-menu ul.main-menu > li:hover > a,
.space-header-height .space-header-menu ul.main-menu > li.is-focus > a { background: rgba(255, 255, 255, 0.07); color: #fff !important; }
.space-header-height .space-header-menu ul.main-menu > li.current-menu-item > a,
.space-header-height .space-header-menu ul.main-menu > li.current_page_item > a,
.space-header-height .space-header-menu ul.main-menu > li.current-menu-ancestor > a {
  color: #fff !important; background: rgba(124, 58, 237, 0.18); box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.4);
}
/* chevron for items with a dropdown */
.space-header-menu ul.main-menu > li.menu-item-has-children > a:after {
  content: "\f078" !important; position: static !important; margin: 1px 0 0 !important;
  font-size: 9px !important; line-height: 1; opacity: 0.65; transition: transform 0.25s var(--ease-out), opacity 0.2s;
}
.space-header-menu ul.main-menu > li.menu-item-has-children:hover > a:after,
.space-header-menu ul.main-menu > li.menu-item-has-children.is-focus > a:after { transform: rotate(180deg); opacity: 1; }
/* badges: Best / Top / Hot / New */
ul.main-menu > li.new > a:before, ul.main-menu > li.best > a:before, ul.main-menu > li.hot > a:before, ul.main-menu > li.top > a:before {
  top: -5px !important; right: 2px !important; padding: 3px 6px !important; border-radius: 999px !important;
  font-size: 9px !important; line-height: 1 !important; letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff !important; background: linear-gradient(135deg, var(--brand-main), var(--brand-second)) !important;
  box-shadow: 0 4px 12px -4px rgba(236, 72, 153, 0.8);
}
ul.main-menu > li.new > a:before { background: linear-gradient(135deg, #10b981, #34d399) !important; box-shadow: 0 4px 12px -4px rgba(16, 185, 129, 0.8); }
/* dropdown card */
.space-header-height .space-header-menu ul.main-menu li ul.sub-menu {
  top: 100px; left: 0; min-width: 250px; padding: 8px !important; border-radius: 14px;
  background: rgba(20, 22, 29, 0.96) !important; border: 1px solid var(--ui-border-strong);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.4) !important;
}
.space-header-menu ul.main-menu > li:hover > ul.sub-menu,
.space-header-menu ul.main-menu > li.is-focus > ul.sub-menu { top: 80px; }
.space-header-menu ul.main-menu li ul.sub-menu li { padding: 0 !important; line-height: 1.35em; }
.space-header-height .space-header-menu ul.main-menu li ul.sub-menu li a {
  display: block !important; padding: 10px 34px 10px 12px !important; border-radius: 9px; border: 0 !important;
  font-size: 14px; font-weight: 500; color: #c9cfdb !important; transition: background-color 0.15s, color 0.15s;
}
.space-header-height .space-header-menu ul.main-menu li ul.sub-menu li a:hover,
.space-header-height .space-header-menu ul.main-menu li ul.sub-menu li:hover > a { background: rgba(255, 255, 255, 0.07); color: #fff !important; transform: none; }
.space-header-menu ul.main-menu li ul.sub-menu li.menu-item-has-children:after {
  top: 12px !important; right: 14px !important; font-size: 9px !important; opacity: 0.6; color: #c9cfdb;
}
.space-header-menu ul.main-menu li ul.sub-menu li.menu-item-has-children ul,
.space-header-menu ul.main-menu li.menu-item-has-children ul.sub-menu li ul { left: calc(100% + 6px) !important; }

/* ---------- Surfaces / cards ---------- */
[class*="-archive-item-ins"],
.space-default-widget, .space-footer-area,
.space-pros-ins, .space-cons-ins,
.space-organization-details-item, .space-organization-style-2-ratings-block, .space-comments-ins,
.space-organization-content-button-block {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
}
[class*="-archive-item-ins"] { background-color: var(--ui-surface) !important; }
.space-companies-2-archive-item, .space-companies-archive-item { border: 0; background: transparent; }
.space-default-widget { padding: 4px 0; border: 0; }
.space-block-title span { font-weight: 700; letter-spacing: -0.02em; }
[class*="-archive-item-title"] a, [class*="-item-title"] a { letter-spacing: -0.01em; }

/* ---------- Buttons ---------- */
[class*="-item-button"] > a, [class*="-header-button"] > a, [class*="-button-ins"] > a, .block-button__link, .search-page-submit {
  border-radius: var(--ui-radius-sm) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  box-shadow: 0 8px 24px -10px var(--brand-glow);
}
.space-categories-title li {
  border-radius: 8px !important;
  border: 1px solid var(--ui-border-strong) !important;
  background: transparent !important;
}
.space-categories-title li a { color: var(--ui-muted) !important; font-weight: 500; }
.space-categories-title li:hover a { color: #fff !important; }
.space-categories-title li.active { background: var(--brand-main) !important; border-color: transparent !important; color: #fff !important; }
.page-numbers { border-radius: 8px !important; }
input[type="text"], input[type="search"], input[type="email"], textarea {
  border-radius: var(--ui-radius-sm) !important; border-color: var(--ui-border-strong) !important; background-color: rgba(255, 255, 255, 0.04) !important;
}

/* ---------- Title box ---------- */
.space-title-box, .space-archive-title-box {
  background:
    radial-gradient(55% 120% at 85% 0%, rgba(124, 58, 237, 0.32), transparent 60%),
    radial-gradient(40% 90% at 8% 100%, rgba(236, 72, 153, 0.18), transparent 60%),
    linear-gradient(180deg, #111318 0%, var(--ui-bg) 100%) !important;
}

/* ---------- Hero slider ---------- */
.space-news-8-item-ins { border-radius: 18px; }
.space-news-8-item-ins::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, rgba(12, 13, 18, 0) 35%, rgba(12, 13, 18, 0.75) 100%);
}
.space-news-8-item-title { z-index: 2; }
.owl-nav button, .owl-prev, .owl-next { border-radius: 12px !important; border: 1px solid var(--ui-border-strong) !important; }

/* ---------- News archive: card grid ---------- */
.space-archive-loop { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.space-archive-loop-item {
  display: flex; flex-direction: column; margin: 0 !important; float: none !important; width: auto !important;
  background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 16px; overflow: hidden;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), border-color 0.25s;
}
.space-archive-loop-item:hover { transform: translateY(-4px); border-color: var(--ui-border-strong); box-shadow: 0 24px 40px -18px rgba(0, 0, 0, 0.6); }
.space-archive-loop-item-img, .space-archive-loop-item-title-box { width: 100% !important; float: none !important; }
.space-archive-loop-item-img, .space-archive-loop-item-img-ins, .space-archive-loop-item-img-link { line-height: 0; }
.space-archive-loop-item-img img { width: 100%; height: 230px; object-fit: cover; border-radius: 0 !important; transition: transform 0.7s var(--ease-out); }
.space-archive-loop-item:hover .space-archive-loop-item-img img { transform: scale(1.05); }
.space-archive-loop-item-img-category { top: 16px; left: 16px; right: auto; bottom: auto; }
.space-archive-loop-item-img-category a { border-radius: 8px; font-weight: 600; font-size: 12px; letter-spacing: 0.02em; }
.space-archive-loop-item-title-box-ins { padding: 20px 22px 22px; }
.space-archive-loop-item-title a { font-size: 20px; line-height: 1.3; letter-spacing: -0.02em; display: inline-block; }
.space-archive-loop-item-excerpt { color: var(--ui-muted); margin: 10px 0 12px; }
.space-archive-loop-item-meta span { color: var(--ui-muted); font-size: 13px; }
.space-archive-loop-item-meta .read-more a { color: #c4b5fd; font-weight: 600; }
.space-archive-loop-item:first-child { grid-column: 1 / -1; flex-direction: row; }
.space-archive-loop-item:first-child .space-archive-loop-item-img { width: 52% !important; }
.space-archive-loop-item:first-child .space-archive-loop-item-img img { height: 100%; min-height: 320px; }
.space-archive-loop-item:first-child .space-archive-loop-item-title-box { width: 48% !important; display: flex; align-items: center; }
.space-archive-loop-item:first-child .space-archive-loop-item-title a { font-size: 28px; }
@media (max-width: 767px) {
  .space-archive-loop { grid-template-columns: 1fr; gap: 18px; }
  .space-archive-loop-item:first-child { flex-direction: column; }
  .space-archive-loop-item:first-child .space-archive-loop-item-img,
  .space-archive-loop-item:first-child .space-archive-loop-item-title-box { width: 100% !important; }
  .space-archive-loop-item:first-child .space-archive-loop-item-img img { min-height: 0; height: 220px; }
  .space-archive-loop-item:first-child .space-archive-loop-item-title a { font-size: 22px; }
}

/* ---------- Footer ---------- */
.space-footer-copy { background: var(--ui-bg-2) !important; border-top: 1px solid var(--ui-border); }
.space-footer-area { border: 0; }

/* ---------- Logo: slot reels + wordmark (motion driven by ui.js / Web Animations API) ---------- */
.site-logo-link,
.space-header-logo a.site-logo-link,
.space-mobile-menu-header a.site-logo-link { display: inline-flex; align-items: center; gap: 11px; padding: 0; color: #fff; line-height: 1; text-decoration: none; }
.space-header-logo .site-wordmark span,
.space-mobile-menu-header .site-wordmark span { display: inline-block; font: inherit; line-height: 1; color: inherit; }
.space-header-logo .site-logo-link { margin-top: 14px; }
.site-logo-mark { display: block; width: 38px; height: 36px; flex: 0 0 auto; transition: transform 0.35s var(--ease-out); transform-origin: 50% 55%; }
.site-logo-link:hover .site-logo-mark { transform: translateY(1px) rotate(-5deg) scale(1.04); }
.site-logo-mark .reel { will-change: transform; }
.space-header-logo .site-wordmark, .space-mobile-menu-header .site-wordmark, .site-wordmark { display: inline-flex; font: 800 27px/1 'Inter', 'Roboto', sans-serif; letter-spacing: -0.035em; white-space: nowrap; color: #fff; }
.site-wordmark-a, .site-wordmark-b { display: inline-flex; }
.site-wordmark-a .lt, .space-header-logo .site-wordmark-a span, .space-mobile-menu-header .site-wordmark-a span { color: #fff !important; }
/* per-letter gradient (solid colours per letter — reliable in Safari, unlike background-clip:text on animated children) */
.site-wordmark-b .lt:nth-child(1), .space-header-logo .site-wordmark-b span:nth-child(1), .space-mobile-menu-header .site-wordmark-b span:nth-child(1) { color: #c4b5fd !important; }
.site-wordmark-b .lt:nth-child(2), .space-header-logo .site-wordmark-b span:nth-child(2), .space-mobile-menu-header .site-wordmark-b span:nth-child(2) { color: #d9a9ea !important; }
.site-wordmark-b .lt:nth-child(3), .space-header-logo .site-wordmark-b span:nth-child(3), .space-mobile-menu-header .site-wordmark-b span:nth-child(3) { color: #eba6df !important; }
.site-wordmark-b .lt:nth-child(4), .space-header-logo .site-wordmark-b span:nth-child(4), .space-mobile-menu-header .site-wordmark-b span:nth-child(4) { color: #f9a8d4 !important; }
.site-wordmark .lt { display: inline-block; will-change: transform, opacity; }
.space-mobile-menu-header .site-logo-link { color: inherit; }