/* ════════════════════════════════════════════════════════════
   heyLooAI — "Obsidian Aurora" sitewide skin
   Dark theme for every page: reviews, about, pricing, tools,
   dashboard, auth, articles. Loads after branding.css.
   ════════════════════════════════════════════════════════════ */

/* ── 1. Token overrides ───────────────────────────────────── */
:root {
  --hl-brand: #8b5cf6;
  --hl-brand-dark: #6d28d9;
  --hl-brand-light: #a78bfa;
  --hl-accent: #2dd4bf;
  --hl-warm: #fb923c;
  --hl-ink: #f4f2fc;
  --hl-muted: #aaa4c4;
  --hl-border: rgba(255, 255, 255, 0.08);
  --hl-font: "Schibsted Grotesk", "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
  --hl-display: "Bricolage Grotesque", "Sora", ui-sans-serif, system-ui, sans-serif;
  --hl-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Tools suite tokens (heylooai-tools.css reads these) */
  --hlai-primary: #8b5cf6;
  --hlai-primary-h: #a78bfa;
  --hlai-accent: #2dd4bf;
  --hlai-success: #34d399;
  --hlai-bg: #100e18;
  --hlai-bg-2: #15121f;
  --hlai-bg-3: #1b1727;
  --hlai-border: rgba(255, 255, 255, 0.09);
  --hlai-text: #f4f2fc;
  --hlai-text-muted: #aaa4c4;
  --hlai-text-light: #837d9e;
  --hlai-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
  --hlai-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);
  --hlai-font: "Schibsted Grotesk", "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
  --hlai-display: "Bricolage Grotesque", "Sora", ui-sans-serif, system-ui, sans-serif;
}

/* ── 2. Global canvas + aurora atmosphere ─────────────────── */
html,
body,
body .site,
body .content-bg,
body #inner-wrap,
body.hl-page-skin #inner-wrap,
body.hl-page-skin .content-bg,
body.hl-page-skin .site {
  background: #08070d !important;
  color: var(--hl-ink);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 48% at 18% -6%, rgba(109, 40, 217, 0.20), transparent 60%),
    radial-gradient(ellipse 56% 42% at 85% 0%, rgba(45, 212, 191, 0.07), transparent 55%),
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(76, 29, 149, 0.14), transparent 60%);
}

body.home::before,
body.front-page::before {
  display: none; /* homepage has its own atmosphere */
}

body #inner-wrap,
body .site {
  position: relative;
  z-index: 1;
}

body {
  font-family: var(--hl-font);
}

/* ── 3. Header: dark glass masthead ───────────────────────── */
#masthead,
#masthead.site-header,
#masthead .site-header-row-container,
#masthead .site-header-row-container-inner,
#masthead .site-main-header-wrap,
#masthead .site-main-header-wrap .site-header-row-container-inner,
#masthead .kadence-sticky-header,
#masthead .kadence-sticky-header .site-header-row-container-inner,
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) > .site-header-row-container-inner,
.transparent-header #masthead,
body.hl-page-skin #masthead,
body.non-transparent-header #masthead,
body.mobile-non-transparent-header #masthead {
  background: rgba(10, 8, 16, 0.62) !important;
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: none !important;
}

#masthead .main-navigation a,
#masthead .header-navigation a,
#masthead .site-title,
#masthead .site-branding a {
  color: #cfc9e6 !important;
}

#masthead .main-navigation a:hover,
#masthead .header-navigation a:hover,
#masthead .main-navigation .current-menu-item > a {
  color: #fff !important;
}

#masthead .header-navigation .header-menu-container ul ul.submenu {
  background: rgba(16, 14, 24, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.7) !important;
}

#masthead .header-navigation .header-menu-container ul ul.submenu a {
  color: #cfc9e6 !important;
}

#masthead .header-navigation .header-menu-container ul ul.submenu a:hover {
  color: #fff !important;
  background: rgba(139, 92, 246, 0.12) !important;
}

.mobile-toggle-open-container .menu-toggle-open,
#masthead .menu-toggle-open {
  color: #f4f2fc !important;
}

#mobile-drawer .drawer-inner,
#mobile-drawer .drawer-content,
.popup-drawer .drawer-inner {
  background: rgba(12, 10, 18, 0.98) !important;
}

#mobile-drawer a,
#mobile-drawer .drawer-nav a {
  color: #cfc9e6 !important;
}

#mobile-drawer a:hover {
  color: #fff !important;
}

#mobile-drawer .drawer-header .drawer-toggle {
  color: #f4f2fc !important;
}

/* Header auth buttons */
.hl-auth-link {
  color: #cfc9e6 !important;
}

.hl-auth-link:hover {
  color: #fff !important;
}

.hl-auth-btn {
  background: linear-gradient(135deg, var(--hl-brand) 0%, var(--hl-brand-dark) 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(167, 139, 250, 0.45) !important;
  box-shadow: 0 4px 18px -4px rgba(139, 92, 246, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

/* ── 4. Page hook hero ────────────────────────────────────── */
.hl-page-hook {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 60px -32px rgba(0, 0, 0, 0.6);
}

.hl-page-hook-eyebrow {
  font-family: var(--hl-mono);
  letter-spacing: 0.16em;
  color: var(--hl-brand-light);
}

.hl-page-hook-title {
  color: #fff;
  background: linear-gradient(100deg, #fff 30%, #c4b5fd 55%, #7dd3fc 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hl-page-hook-text {
  color: var(--hl-muted);
}

/* ── 5. Content typography ────────────────────────────────── */
body.hl-page-skin .entry-content h1,
body.hl-page-skin .entry-content h2,
body.hl-page-skin .entry-content h3,
body.hl-page-skin .entry-content h4,
body.single-post .entry-content h2,
body.single-post .entry-content h3,
.entry-content h2,
.entry-content h3 {
  font-family: var(--hl-display);
  color: #fff;
}

body.hl-page-skin .entry-content p,
body.hl-page-skin .entry-content li,
body.single-post .entry-content p,
body.single-post .entry-content li,
.entry-content p,
.entry-content li {
  color: #c5bfdd;
}

.entry-content a:not(.hlai-btn):not(.hl-action):not(.hl-tool-mkt-btn),
body.single-post.hl-article-reading .entry-content a {
  color: var(--hl-brand-light) !important;
  text-decoration-color: rgba(167, 139, 250, 0.4);
}

.entry-content a:not(.hlai-btn):not(.hl-action):not(.hl-tool-mkt-btn):hover {
  color: #fff !important;
}

body.single-post.hl-article-reading .entry-content strong,
.entry-content strong {
  color: #fff;
}

body.single-post.hl-article-reading .entry-content blockquote,
.entry-content blockquote {
  background: rgba(139, 92, 246, 0.06) !important;
  border-left: 3px solid var(--hl-brand) !important;
  color: #c5bfdd !important;
}

.entry-content hr {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

body.single-post.hl-article-reading .entry-content li::marker {
  color: var(--hl-brand-light);
}

/* Tables */
body.hl-page-skin .entry-content table,
.entry-content table {
  background: rgba(255, 255, 255, 0.02) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

body.hl-page-skin .entry-content table th,
.entry-content table th {
  background: rgba(139, 92, 246, 0.1) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

body.hl-page-skin .entry-content table td,
.entry-content table td {
  color: #c5bfdd !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

body.hl-page-skin .entry-content table tbody tr:hover td {
  background: rgba(139, 92, 246, 0.05) !important;
}

/* Article hero/figures */
.hl-article-hero,
.hl-article-figure {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.hl-article-figure figcaption {
  color: var(--hl-muted);
}

/* ── 6. Buttons (ghost/outline variants) ──────────────────── */
.hlai-btn-outline,
.hlai-btn-ghost,
.hl-btn-ghost,
.hl-action:not(.hl-action--primary) {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #f4f2fc !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.hlai-btn-outline:hover,
.hlai-btn-ghost:hover,
.hl-action:not(.hl-action--primary):hover {
  background: rgba(255, 255, 255, 0.09) !important;
  color: #fff !important;
}

/* ── 7. Review hub cards ──────────────────────────────────── */
.hl-rh-h1 {
  color: #fff;
  background: linear-gradient(100deg, #fff 30%, #c4b5fd 60%, #7dd3fc 85%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hl-rh-eyebrow {
  font-family: var(--hl-mono);
  letter-spacing: 0.16em;
  color: var(--hl-brand-light);
}

.hl-rh-sub {
  color: var(--hl-muted);
}

.hl-rh-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--hl-ink);
}

.hl-rh-card:hover {
  border-color: rgba(167, 139, 250, 0.35);
  box-shadow: 0 18px 44px -16px rgba(0, 0, 0, 0.6), 0 0 32px -12px rgba(139, 92, 246, 0.3);
}

.hl-rh-card-title {
  color: #fff;
}

.hl-rh-card-tag {
  color: var(--hl-brand-light);
}

.hl-rh-card-desc {
  color: var(--hl-muted);
}

.hl-rh-card-meta {
  color: var(--hl-accent);
}

.hl-rh-footer-note {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--hl-muted);
}

/* ── 8. Tool widgets on tool pages (non-compact) ──────────── */
.hlai-card,
.hlai-auth-card {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 8px 32px -8px rgba(0, 0, 0, 0.5) !important;
}

.hlai-textarea,
.hlai-auth-input,
.hlai-auth-code {
  background: rgba(8, 7, 13, 0.55) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #f7f5ff !important;
  caret-color: var(--hl-brand-light);
}

.hlai-textarea:focus,
.hlai-auth-input:focus {
  border-color: rgba(167, 139, 250, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.14) !important;
}

.hlai-textarea::placeholder,
.hlai-auth-input::placeholder {
  color: rgba(214, 208, 236, 0.4) !important;
}

.hlai-tone-btn {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
  color: #cfc9e6 !important;
}

.hlai-tone-btn .tone-name {
  color: inherit !important;
}

.hlai-tone-btn .tone-desc {
  color: var(--hl-muted) !important;
}

.hlai-tone-btn:hover {
  border-color: rgba(167, 139, 250, 0.35) !important;
  color: #fff !important;
}

.hlai-tone-btn.active {
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.22), rgba(139, 92, 246, 0.08)) !important;
  border-color: rgba(167, 139, 250, 0.5) !important;
  color: #fff !important;
  box-shadow: 0 0 20px -6px rgba(139, 92, 246, 0.5) !important;
}

.hlai-output-empty {
  background: rgba(139, 92, 246, 0.03) !important;
  border-color: rgba(167, 139, 250, 0.22) !important;
}

.hlai-output-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  color: #fff !important;
  opacity: 1 !important;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.85), rgba(109, 40, 217, 0.65));
  border: 1px solid rgba(167, 139, 250, 0.5);
  box-shadow: 0 8px 24px -6px rgba(139, 92, 246, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.hlai-output-empty__title {
  color: #fff !important;
}

.hlai-output-empty p,
.hlai-output-empty__steps {
  color: #b9b3d4 !important;
}

.hlai-output-pane__body,
.hlai-output-pane__body--sentences {
  background: rgba(8, 7, 13, 0.45) !important;
  color: #e8e4f6 !important;
}

.hlai-usage-bar {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #cfc9e6 !important;
}

.hlai-usage-bar strong,
.hlai-usage-count {
  color: #fff !important;
}

.hlai-tool-header h1,
.hlai-tool-header h2 {
  color: #fff !important;
}

.hlai-tool-header p {
  color: var(--hl-muted) !important;
}

/* Prompt generator widget on its tool page */
.hlai-pg__card {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
}

.hlai-pg__title {
  color: #fff !important;
}

.hlai-pg__sub,
.hlai-pg__hint,
.hlai-pg__counter,
.hlai-pg__footer {
  color: var(--hl-muted) !important;
}

.hlai-pg__label {
  color: #c4b5fd !important;
}

.hlai-pg select,
.hlai-pg textarea,
.hlai-pg input[type=text] {
  background: rgba(8, 7, 13, 0.55) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #f7f5ff !important;
}

.hlai-pg select option {
  background: #14121f;
  color: #f4f2fc;
}

.hlai-pg__chip {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
  color: #cfc9e6 !important;
}

.hlai-pg__chip--active,
.hlai-pg__chip--active:hover {
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.25), rgba(139, 92, 246, 0.1)) !important;
  border-color: rgba(167, 139, 250, 0.5) !important;
  color: #fff !important;
}

.hlai-pg__chip:hover {
  background: rgba(139, 92, 246, 0.1) !important;
  color: #fff !important;
}

.hlai-pg__btn--ghost {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #f4f2fc !important;
}

.hlai-pg__output {
  background: rgba(8, 7, 13, 0.45) !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
  color: #e8e4f6 !important;
}

.hlai-pg__notice {
  background: rgba(139, 92, 246, 0.07) !important;
  border-left-color: var(--hl-brand) !important;
  color: #c5bfdd !important;
}

/* Pricing cards */
.hlai-pricing-card {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
}

.hlai-pricing-card--pro {
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.1), rgba(139, 92, 246, 0.03)) !important;
  border-color: rgba(167, 139, 250, 0.45) !important;
  box-shadow: 0 0 48px -16px rgba(139, 92, 246, 0.4) !important;
}

.hlai-pricing-price {
  color: #fff;
}

.hlai-pricing-features li {
  color: #c5bfdd;
}

/* Auth pages */
.hlai-auth-title {
  color: #fff !important;
}

.hlai-auth-sub,
.hlai-auth-hint,
.hlai-auth-footer {
  color: var(--hl-muted) !important;
}

.hlai-auth-label {
  color: #c4b5fd !important;
}

/* ── 9. Tool-page marketing sections (reuse homepage dark) ── */
.hl-gptinf-marketing-panels--static .hl-tool-mkt > section,
.hl-gptinf-marketing-panels--static .hl-tool-mkt-pro {
  opacity: 1 !important;
  transform: none !important;
}

/* ── 10. Footer ───────────────────────────────────────────── */
#colophon,
.site-footer,
.site-bottom-footer-wrap .site-footer-row-container-inner {
  background: #0a0910 !important;
  color: var(--hl-muted) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

#colophon a,
.site-footer a,
.hl-site-footer a {
  color: #cfc9e6 !important;
}

#colophon a:hover,
.site-footer a:hover,
.hl-site-footer a:hover {
  color: #fff !important;
}

.hl-site-footer {
  color: var(--hl-muted) !important;
}

/* ── 11. Selection + scrollbar polish ─────────────────────── */
::selection {
  background: rgba(139, 92, 246, 0.4);
  color: #fff;
}

/* ── 12. Mobile responsiveness ────────────────────────────── */
@media (max-width: 768px) {
  .hl-page-hook {
    margin-left: 12px;
    margin-right: 12px;
    padding: 18px 16px;
  }

  body.hl-page-skin .entry-content,
  body.hl-page-skin .hlai-tool-wrap {
    padding-left: 14px;
    padding-right: 14px;
  }

  .hl-rh-grid {
    grid-template-columns: 1fr;
  }

  .hlai-humanizer-dual {
    grid-template-columns: 1fr !important;
  }

  .hlai-pricing-grid {
    grid-template-columns: 1fr;
  }

  .hlai-tone-selector {
    flex-wrap: wrap;
  }

  .hlai-tone-btn {
    min-width: calc(33% - 8px);
  }

  .hl-table-scroll {
    margin-left: -14px;
    margin-right: -14px;
    padding-left: 14px;
    padding-right: 14px;
  }
}

@media (max-width: 540px) {
  .hlai-pg__grid {
    grid-template-columns: 1fr !important;
  }

  .hlai-action-row {
    flex-direction: column;
    align-items: stretch;
  }

  .hlai-action-row .hlai-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── Kadence Similar Posts (entry-related carousel) ───────── */
.entry-related,
.entry-related-inner,
.entry-related-inner-content {
  background: #08070d !important;
}

.entry-related-title {
  font-family: var(--hl-display) !important;
  font-size: clamp(1.25rem, 3vw, 1.5rem) !important;
  font-weight: 750 !important;
  color: #fff !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 1.5rem !important;
}

.entry-related .loop-entry,
.entry-related .loop-entry.content-bg {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.5) !important;
  transition: border-color 0.2s ease, transform 0.2s ease !important;
}

.entry-related .loop-entry:hover {
  border-color: rgba(167, 139, 250, 0.28) !important;
  transform: translateY(-2px);
}

.entry-related .entry-content-wrap {
  background: transparent !important;
  padding: 1.15rem 1.25rem 1.25rem !important;
}

.entry-related .entry-title,
.entry-related .entry-title a {
  color: #f4f2fc !important;
  font-family: var(--hl-display) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

.entry-related .entry-title a:hover {
  color: var(--hl-brand-light) !important;
}

.entry-related .entry-summary p,
.entry-related .entry-meta,
.entry-related .entry-meta a,
.entry-related .posted-by,
.entry-related .posted-on {
  color: var(--hl-muted) !important;
}

.entry-related .category-links a {
  color: var(--hl-accent) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

.entry-related .post-more-link {
  color: var(--hl-brand-light) !important;
  font-weight: 600 !important;
}

.entry-related .splide__arrow {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}

.entry-related .splide__pagination__page {
  background: rgba(255, 255, 255, 0.2) !important;
}

.entry-related .splide__pagination__page.is-active {
  background: var(--hl-brand) !important;
}