/*
 * GadgetsSniper — WordPress / Astra Child Theme Tokens
 * Drop into: child-theme/style.css (after @import parent) OR enqueue separately.
 * Requires: brand/tokens/tokens.css loaded first (or inline tokens below).
 * Tested: Astra 4.x + Gutenberg + AAWP + RankMath
 * Mobile-first breakpoints: 375 / 768 / 1280
 */

/* ── Google Fonts (if not already loaded) ───────────────── */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Site Background & Text ─────────────────────────────── */
body,
.site,
.ast-container {
  background-color: var(--gs-bg-primary) !important;
  color: var(--gs-text-default) !important;
  font-family: var(--gs-font-body) !important;
  font-size: var(--gs-text-base) !important;
  line-height: var(--gs-lh-loose) !important;
}

/* ── Links ───────────────────────────────────────────────── */
a,
.entry-content a {
  color: var(--gs-color-cyan);
  text-decoration: none;
  transition: color var(--gs-transition-base);
}
a:hover,
.entry-content a:hover {
  color: var(--gs-color-green);
  text-decoration: underline;
}
/* Light mode AA-safe link color */
[data-theme="light"] a,
[data-theme="light"] .entry-content a {
  color: var(--gs-color-extended-cyan-700, #0088AA);
}

/* ── Headings H1–H6 ─────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.entry-title,
.ast-blog-single-title,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  font-family: var(--gs-font-heading) !important;
  color: var(--gs-text-default) !important;
  letter-spacing: var(--gs-ls-heading);
}

h1, .entry-title {
  font-size: clamp(var(--gs-text-h1-mob), 5vw, var(--gs-text-h1)) !important;
  font-weight: var(--gs-fw-bold) !important;
  line-height: var(--gs-lh-heading) !important;
  letter-spacing: var(--gs-ls-heading) !important;
}
h2 {
  font-size: clamp(var(--gs-text-h2-mob), 4vw, var(--gs-text-h2)) !important;
  font-weight: var(--gs-fw-bold) !important;
  line-height: var(--gs-lh-snug) !important;
}
h3 {
  font-size: clamp(var(--gs-text-h3-mob), 3vw, var(--gs-text-h3)) !important;
  font-weight: var(--gs-fw-semibold) !important;
  line-height: var(--gs-lh-snug) !important;
}
h4 {
  font-size: var(--gs-text-h4) !important;
  font-weight: var(--gs-fw-semibold) !important;
}
h5, h6 {
  font-size: var(--gs-text-base) !important;
  font-weight: var(--gs-fw-semibold) !important;
}

/* ── Gutenberg Button Block ──────────────────────────────── */
.wp-block-button__link,
.wp-block-button .wp-block-button__link {
  background-color: var(--gs-color-cyan) !important;
  color: var(--gs-color-black) !important;
  font-family: var(--gs-font-heading) !important;
  font-weight: var(--gs-fw-semibold) !important;
  border-radius: var(--gs-radius-pill) !important;
  padding: 13px 28px !important;
  font-size: var(--gs-btn-font-md) !important;
  letter-spacing: var(--gs-ls-wide) !important;
  transition: transform var(--gs-transition-base), box-shadow var(--gs-transition-base) !important;
  border: none !important;
  text-decoration: none !important;
}
.wp-block-button__link:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--gs-shadow-glow) !important;
  color: var(--gs-color-black) !important;
}
.wp-block-button__link:focus-visible {
  outline: 3px solid var(--gs-color-cyan) !important;
  outline-offset: 3px !important;
}

/* Deal variant — use has-green-background-color class */
.wp-block-button.has-green-background-color .wp-block-button__link,
.wp-block-button.is-style-deal .wp-block-button__link {
  background-color: var(--gs-color-green) !important;
  color: var(--gs-color-black) !important;
}
.wp-block-button.is-style-deal .wp-block-button__link:hover {
  box-shadow: var(--gs-shadow-glow-green) !important;
}

/* Ghost/outline variant */
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent !important;
  color: var(--gs-color-cyan) !important;
  border: 2px solid var(--gs-color-cyan) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--gs-color-cyan-dim) !important;
}

/* ── Gutenberg Table Block ───────────────────────────────── */
.wp-block-table table,
.entry-content table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: var(--gs-radius-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--gs-shadow-md) !important;
  font-size: var(--gs-text-sm) !important;
}
.wp-block-table thead tr,
.entry-content thead tr {
  background: var(--gs-gradient-dark) !important;
}
.wp-block-table th,
.entry-content th {
  font-family: var(--gs-font-heading) !important;
  font-weight: var(--gs-fw-semibold) !important;
  font-size: var(--gs-text-xs) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--gs-ls-wider) !important;
  color: var(--gs-color-white) !important;
  padding: var(--gs-space-3) var(--gs-space-4) !important;
  border-bottom: 2px solid var(--gs-color-cyan) !important;
}
.wp-block-table td,
.entry-content td {
  padding: var(--gs-space-3) var(--gs-space-4) !important;
  border-bottom: 1px solid var(--gs-border) !important;
  vertical-align: middle !important;
  color: var(--gs-text-default) !important;
}
.wp-block-table tbody tr:nth-child(even) td,
.entry-content tbody tr:nth-child(even) td {
  background: var(--gs-color-row-even) !important;
}
.wp-block-table tbody tr:hover td,
.entry-content tbody tr:hover td {
  background: var(--gs-color-cyan-hover) !important;
}
.wp-block-table tbody tr:last-child td,
.entry-content tbody tr:last-child td {
  border-bottom: none !important;
}

/* ── Single Post Content Area ────────────────────────────── */
.single .entry-content,
.single .ast-container .entry-content {
  max-width: 800px;
  margin-inline: auto;
  font-size: var(--gs-text-base);
  line-height: var(--gs-lh-loose);
  color: var(--gs-text-default);
}

/* Paragraphs */
.entry-content p {
  margin-bottom: var(--gs-space-5);
  color: var(--gs-text-default);
}

/* Lead paragraph */
.entry-content .lead,
.entry-content p:first-of-type {
  font-size: var(--gs-text-lead);
  color: var(--gs-text-default);
  line-height: var(--gs-lh-relaxed);
}

/* Blockquote / pull quote */
.entry-content blockquote,
.wp-block-quote {
  border-left: 4px solid var(--gs-color-cyan) !important;
  padding: var(--gs-space-4) var(--gs-space-6) !important;
  background: var(--gs-color-cyan-dim) !important;
  border-radius: 0 var(--gs-radius-md) var(--gs-radius-md) 0 !important;
  font-family: var(--gs-font-heading) !important;
  font-size: var(--gs-text-quote) !important;
  font-weight: var(--gs-fw-medium) !important;
  font-style: italic !important;
  color: var(--gs-text-default) !important;
  margin: var(--gs-space-6) 0 !important;
}

/* Code blocks */
.entry-content code,
.wp-block-code code,
pre {
  font-family: var(--gs-font-mono) !important;
  font-size: var(--gs-text-mono) !important;
  background: var(--gs-bg-invert) !important;
  color: var(--gs-color-cyan) !important;
  padding: 2px 6px !important;
  border-radius: var(--gs-radius-sm) !important;
}
.entry-content pre,
.wp-block-code {
  padding: var(--gs-space-4) var(--gs-space-5) !important;
  border-radius: var(--gs-radius-md) !important;
  overflow-x: auto !important;
  border: 1px solid var(--gs-border) !important;
  margin: var(--gs-space-6) 0 !important;
}
.entry-content pre code { padding: 0 !important; background: none !important; }

/* Quick Answer box (custom class) */
.quick-answer {
  background: linear-gradient(135deg, var(--gs-color-cyan-dim), var(--gs-color-green-dim));
  border-left: 4px solid var(--gs-color-cyan);
  padding: var(--gs-space-5) var(--gs-space-6);
  border-radius: var(--gs-radius-lg);
  margin: var(--gs-space-6) 0;
  font-size: var(--gs-text-base);
  line-height: var(--gs-lh-relaxed);
}
.quick-answer strong {
  display: block;
  color: var(--gs-color-cyan);
  font-family: var(--gs-font-heading);
  font-size: var(--gs-text-xs);
  font-weight: var(--gs-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--gs-ls-wider);
  margin-bottom: var(--gs-space-2);
}

/* Key Takeaway */
.key-takeaway {
  background: var(--gs-bg-invert);
  border-left: 4px solid var(--gs-color-green);
  padding: var(--gs-space-4) var(--gs-space-5);
  border-radius: var(--gs-radius-lg);
  margin: var(--gs-space-6) 0;
  color: var(--gs-text-on-dark);
}

/* ── AAWP Product Boxes ───────────────────────────────────── */
.aawp-product,
.aawp-product--horizontal {
  background: var(--gs-bg-card) !important;
  border: 1px solid var(--gs-border) !important;
  border-radius: var(--gs-radius-xl) !important;
  box-shadow: var(--gs-shadow-sm) !important;
  transition: box-shadow var(--gs-transition-slow), transform var(--gs-transition-slow) !important;
}
.aawp-product:hover { transform: translateY(-3px) !important; box-shadow: var(--gs-shadow-glow) !important; }
.aawp-product__title { font-family: var(--gs-font-heading) !important; font-weight: var(--gs-fw-semibold) !important; color: var(--gs-text-default) !important; }
.aawp-product__price { font-family: var(--gs-font-mono) !important; color: var(--gs-color-green) !important; font-size: var(--gs-text-h3) !important; font-weight: var(--gs-fw-bold) !important; }
.aawp-button { background-color: var(--gs-color-cyan) !important; color: var(--gs-color-black) !important; border-radius: var(--gs-radius-pill) !important; font-family: var(--gs-font-heading) !important; font-weight: var(--gs-fw-semibold) !important; border: none !important; }
.aawp-button:hover { box-shadow: var(--gs-shadow-glow) !important; transform: translateY(-1px) !important; }

/* ── Archive / Blog Loop — Article Cards ─────────────────── */
.ast-article-post,
.ast-blog-layout-1 .ast-article-post,
.ast-grid-post,
.ast-blog-featured-section {
  background: var(--gs-bg-card) !important;
  border: 1px solid var(--gs-border) !important;
  border-radius: var(--gs-radius-xl) !important;
  overflow: hidden !important;
  transition: transform var(--gs-transition-slow), box-shadow var(--gs-transition-slow) !important;
  box-shadow: var(--gs-shadow-xs) !important;
}
.ast-article-post:hover,
.ast-grid-post:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--gs-shadow-lg) !important;
}

.ast-article-post .entry-title a,
.ast-grid-post .entry-title a {
  color: var(--gs-text-default) !important;
  font-family: var(--gs-font-heading) !important;
  font-weight: var(--gs-fw-bold) !important;
  transition: color var(--gs-transition-base) !important;
}
.ast-article-post .entry-title a:hover {
  color: var(--gs-color-cyan) !important;
  text-decoration: none !important;
}

/* Post meta */
.ast-post-meta,
.entry-meta {
  font-family: var(--gs-font-mono) !important;
  font-size: var(--gs-text-xs) !important;
  color: var(--gs-text-muted) !important;
}

/* ── Pagination ───────────────────────────────────────────── */
.ast-pagination a,
.page-numbers a,
.page-numbers .current,
.nav-links a {
  font-family: var(--gs-font-heading) !important;
  font-size: var(--gs-text-sm) !important;
  font-weight: var(--gs-fw-semibold) !important;
  border-radius: var(--gs-radius-md) !important;
  padding: var(--gs-space-2) var(--gs-space-4) !important;
  transition: background var(--gs-transition-base), color var(--gs-transition-base) !important;
}
.page-numbers .current {
  background: var(--gs-color-cyan) !important;
  color: var(--gs-color-black) !important;
}
.page-numbers a:hover { background: var(--gs-color-cyan-dim) !important; color: var(--gs-color-cyan) !important; }

/* ── Breadcrumbs (RankMath) ──────────────────────────────── */
.rank-math-breadcrumb,
.rank-math-breadcrumb p {
  font-family: var(--gs-font-mono) !important;
  font-size: var(--gs-text-xs) !important;
  color: var(--gs-text-muted) !important;
}
.rank-math-breadcrumb a {
  color: var(--gs-text-muted) !important;
  text-decoration: none !important;
}
.rank-math-breadcrumb a:hover { color: var(--gs-color-cyan) !important; }
.rank-math-breadcrumb .separator { color: var(--gs-color-border-dark) !important; }
.rank-math-breadcrumb .last { color: var(--gs-text-default) !important; }

/* ── Astra Header Override ───────────────────────────────── */
.ast-primary-header-bar,
.site-header {
  background-color: rgba(10, 14, 26, 0.92) !important;
  border-bottom: 1px solid var(--gs-color-border-dark) !important;
  backdrop-filter: blur(12px) !important;
}
.main-header-bar .ast-logo-container img {
  height: 40px !important;
  width: auto !important;
}
.main-navigation a,
.ast-header-custom-item a {
  font-family: var(--gs-font-heading) !important;
  font-size: var(--gs-text-sm) !important;
  font-weight: var(--gs-fw-medium) !important;
  color: var(--gs-text-muted) !important;
}
.main-navigation a:hover { color: var(--gs-color-cyan) !important; }

/* ── Footer ──────────────────────────────────────────────── */
.site-footer,
.ast-footer-area {
  background-color: var(--gs-color-black) !important;
  border-top: 1px solid var(--gs-color-border-dark) !important;
  color: var(--gs-text-muted) !important;
  font-size: var(--gs-text-xs) !important;
  font-family: var(--gs-font-mono) !important;
}
.site-footer a { color: var(--gs-text-muted) !important; }
.site-footer a:hover { color: var(--gs-color-cyan) !important; }

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 767px) {
  .single .entry-content { padding-inline: var(--gs-space-4); }
  .entry-content table { font-size: var(--gs-text-xs) !important; }
  .wp-block-table { overflow-x: auto !important; display: block !important; }
  h1, .entry-title { font-size: var(--gs-text-h1-mob) !important; }
  h2 { font-size: var(--gs-text-h2-mob) !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── PATCH: Astra separate-container override (v1.0.1) ───── */
.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-grid-common-col,
.ast-separate-container .entry-content,
.ast-separate-container .site-main > .ast-row > .ast-article-post,
.ast-separate-container #primary article,
#primary article.post,
#primary article.page {
  background-color: var(--gs-bg-card) !important;
  color: var(--gs-text-default) !important;
  border: 1px solid var(--gs-border) !important;
  border-radius: var(--gs-radius-xl) !important;
}
.ast-separate-container .entry-content p,
.ast-separate-container article p,
#primary article p {
  color: var(--gs-text-default) !important;
}

/* Titles inside cards */
#primary article .entry-title a,
.ast-separate-container .entry-title a,
.ast-article-post .entry-title,
.ast-article-post .entry-title a {
  color: var(--gs-text-default) !important;
}

/* Site title / logo text */
.site-title,
.site-title a,
.ast-site-identity .site-title a,
.site-branding .site-title a {
  color: var(--gs-color-white) !important;
  font-family: var(--gs-font-heading) !important;
  font-weight: var(--gs-fw-bold) !important;
  font-style: italic !important;
  letter-spacing: -0.02em !important;
}
.site-title a:hover { color: var(--gs-color-cyan) !important; }

/* Footer (white bg fix) */
.site-footer,
.ast-small-footer,
.ast-footer-overlay,
footer[class*='site-footer'] {
  background-color: var(--gs-color-black) !important;
  color: var(--gs-text-muted) !important;
}
.site-footer *, .ast-small-footer * { color: var(--gs-text-muted) !important; }
.site-footer a, .ast-small-footer a { color: var(--gs-color-cyan) !important; }

/* Primary content container bg transparent so body bg shows */
.ast-separate-container #primary,
.ast-separate-container .site-content {
  background: transparent !important;
}

/* ── PATCH v1.0.2 — Override Astra global CSS vars ─────────── */
html :root,
html body,
:root {
  --ast-global-color-0: #00D4FF !important;  /* primary accent */
  --ast-global-color-1: #66E5FF !important;  /* link hover */
  --ast-global-color-2: #F8FAFC !important;  /* body text */
  --ast-global-color-3: #94A3B8 !important;  /* muted */
  --ast-global-color-4: #0A0E1A !important;  /* content bg (was #FFFFFF) */
  --ast-global-color-5: #1A1F2E !important;  /* subtle bg (was #F0F5FA) */
  --ast-global-color-6: #F8FAFC !important;  /* heading */
  --ast-global-color-7: #2A3142 !important;  /* border */
  --ast-global-color-8: #F8FAFC !important;  /* nav text */
}

/* Force article/container bg with max specificity */
html body.ast-separate-container .ast-article-post,
html body.ast-separate-container .ast-article-single,
html body.ast-separate-container #primary .hentry,
html body.ast-separate-container #primary article,
html body .ast-article-post,
html body .ast-article-single {
  background-color: #1A1F2E !important;
  color: #F8FAFC !important;
}

html body.ast-separate-container .ast-article-post *,
html body.ast-separate-container .ast-article-single *,
html body #primary article p,
html body #primary article li,
html body #primary article span:not(.cat-links a):not(.entry-meta a) {
  color: #F8FAFC !important;
}

html body .entry-title,
html body .entry-title a,
html body #primary h1,
html body #primary h2,
html body #primary h3,
html body #primary h4 {
  color: #F8FAFC !important;
}

/* Quick Answer box text legibility */
html body .quick-answer,
html body .quick-answer * {
  color: #F8FAFC !important;
}
html body .quick-answer strong { color: #00D4FF !important; }

/* Table cells in entry-content */
html body .entry-content table td,
html body .wp-block-table td,
html body .entry-content table th,
html body .wp-block-table th {
  color: #F8FAFC !important;
  background-color: transparent !important;
}
html body .wp-block-table thead tr,
html body .entry-content thead tr {
  background: linear-gradient(180deg, #1A1F2E, #0A0E1A) !important;
}
html body .wp-block-table tbody tr:nth-child(even) td,
html body .entry-content tbody tr:nth-child(even) td {
  background-color: rgba(0, 212, 255, 0.04) !important;
}

/* Figure caption */
html body .wp-block-image figcaption,
html body figure.wp-block-image figcaption {
  color: #94A3B8 !important;
}

/* Site title + footer fix */
html body .site-title,
html body .site-title a { color: #F8FAFC !important; }
html body .site-footer,
html body .ast-small-footer,
html body footer.site-footer * {
  background-color: #0A0E1A !important;
  color: #94A3B8 !important;
}
html body .site-footer a,
html body .ast-small-footer a { color: #00D4FF !important; background: transparent !important; }

/* Scroll-to-top button */
html body #ast-scroll-top {
  background-color: #00D4FF !important;
  color: #0A0E1A !important;
}