/* ============================================================
   gonka.to :: custom-csp.css
   Extracted from inline <style> blocks in index.html on 2026-06-03.
   Cascade order: loaded AFTER bootstrap + theme/style.css + mobirise,
   so it preserves the priority that the original inline placement
   had (inline styles were last in <head>).
   ============================================================ */

/* ---- CSS Custom Properties (Design Tokens) ---- */
:root {
  --text-main: #ededed;
  --text-muted: #cacaca;
  --text-dark: #242424;
  --text-muted-strong: #808080;
  --bg-dark: #242424;
  --bg-darker: #242424;
  --bg-card: #2a2a2a;
  --bg-white: #ffffff;
  --bg-warm: #edefeb;
  --accent-amber: #c7922f;
  --accent-amber-hover: #e0a83a;
  --border-dark: #242424;
  --border-muted: #d4d4d4;
  --border-subtle: rgba(255,255,255,0.08);
  --shadow-sm: rgba(0,0,0,0.07);
  --shadow-glow-white: rgba(255,255,255,0.04);
  --divider-amber: rgba(199, 146, 47, 0.12);
}

/* ---- Block 1: accordion + back-to-top + footer-icon-link ---- */
.accordion-button::after {
  filter: invert(1) brightness(2);
}
.accordion-button:not(.collapsed)::after {
  filter: invert(1) brightness(2);
}
.accordion-button {
  color: var(--text-main) !important;
}
#back-to-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 44px;
  height: 44px;
  background: var(--bg-darker);
  color: #ffffff;
  border: 1px solid #444;
  border-radius: 50%;
  font-size: 20px;
  line-height: 44px;
  text-align: center;
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 9999;
}
#back-to-top.visible { opacity: 1; }
.footer-icon-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;          /* keep icon + label on a single line */
  flex-wrap: nowrap;            /* belt-and-suspenders: prevent flex item split */
}
.footer-icon-link svg {
  flex-shrink: 0;
  vertical-align: middle;
  opacity: 0.85;
}
.footer-icon-link:hover svg {
  opacity: 1;
}

/* ---- Block 2: scroll, pricing, footer grid, hover colors ---- */
html { scroll-behavior: smooth; }
p.card-description { color: var(--text-main) !important; }
#pricing .item-wrapper { background-color: transparent; }
.pricing02 .item-subtitle {
  color: var(--text-muted) !important;
}
#mining-pools .item-subtitle,
#mining-pools .item-subtitle * {
  color: var(--text-muted) !important;
}

#footer .footer-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 0;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
}
#footer .footer-links .footer-icon-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;          /* keep icon + label on a single line */
  flex-wrap: nowrap;            /* belt-and-suspenders: prevent flex item split */
}
@media (min-width: 576px) {
  #footer .footer-links {
    grid-template-columns: repeat(4, 1fr);
  }
}
#footer .footer-links li,
#footer .footer-links a,
#footer .footer-links strong {
  font-weight: 400 !important;
  font-size: 0.9rem !important;
}
#footer .footer-links a,
#footer .footer-links a:hover,
#footer .footer-links a:visited,
#footer .footer-links a:focus {
  text-decoration: none !important;
}

/* ---- Block 3: footer link reset (kill Mobirise defaults) ---- */
footer a, [id^=footer] a, .footer-links a, .footer-icon-link,
footer a:hover, [id^=footer] a:hover, .footer-links a:hover, .footer-icon-link:hover,
footer a:focus, [id^=footer] a:focus, .footer-links a:focus, .footer-icon-link:focus,
footer a::after, footer a::before, .footer-icon-link::after, .footer-icon-link::before {
  text-decoration: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  background: none !important;
  background-image: none !important;
}

/* ---- Block 4: hero image ---- */
#hero img {
  height: auto !important;
  object-fit: cover !important;
  aspect-ratio: 1200 / 675 !important;
}

/* ---- Block 5: footer logo (gonka-logo.svg) ---- */
/* SVG asset is pre-tuned with fill:#E0E0E0 for the dark footer,
   so no CSS filter is needed. The .footer-logo class is kept as a
   future hook for tweaks (hover, sizing variants, focus ring). */
.footer-logo {
  /* reserved */
}

/* ---- Block 6: Get GNK (pricing) image aspect-ratio fix ---- */
/* Original Mobirise rule forces height:400px + object-fit:cover,
   which distorts the native 1:1 square images (640x640).
   Restore natural aspect ratio by removing forced height. */
.cid-vex1i2mpfo .item-img {
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
}
.cid-vex1i2mpfo .item-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* ---- Block 7: Join a Mining Pool image aspect-ratio fix ---- */
/* Same issue as Block 6: Mobirise forces height:300px + object-fit:cover
   on .cid-vewSf6B12y .item-img, distorting 640x640 square pool logos. */
.cid-vewSf6B12y .item-img {
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
}
.cid-vewSf6B12y .item-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* ---- Block 8: Get GNK button width alignment & centering ---- */
/* Make all .item-footer buttons in the pricing section equal width
   (based on the widest button "Trade on SafeTrade") and center them
   under their cards. */
#pricing .mbr-section-btn.item-footer {
  display: flex !important;
  justify-content: center !important;
  width: 100%;
}
#pricing .mbr-section-btn.item-footer .btn {
  min-width: 220px;           /* covers "Trade on SafeTrade" with comfortable padding */
  text-align: center;
  white-space: nowrap;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  box-sizing: border-box;
}

/* ---- Block 9: TRY AI section ---- */
/* Section background #242424, monospace font, responsive card grid */
#try-ai {
  background-color: var(--bg-darker);
  border: none; /* ensure no divider line */
  margin-bottom: 0 !important; /* ensure no bottom margin */
  padding-bottom: 0 !important; /* ensure no bottom padding */
}
#try-ai .container {
  max-width: 1200px;
}
#try-ai * {
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, "Courier New", monospace !important;
  color: var(--text-main);
}

/* Header: Title + Short Subline */
#try-ai .try-ai-header {
  text-align: center;
  padding: 3rem 1rem 2rem;
  max-width: 1000px;
  margin: 0 auto;
}
#try-ai .try-ai-heading {
  font-size: 2.75rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  line-height: 1.1;
}
#try-ai .try-ai-subline {
  font-size: 1.5rem;
  line-height: 1.4;
  max-width: 900px;
  margin: 0 auto;
  opacity: 0.9;
  font-weight: 400;
  color: var(--text-main);
}

/* Cards Grid: Visual Center - 3 cols desktop, 2 tablet, 1 mobile */
#try-ai .try-ai-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.33rem; /* ~5% larger cards vs 1.4rem */
  padding: 0 1rem 1.5rem;
}
@media (max-width: 992px) {
  #try-ai .try-ai-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 576px) {
  #try-ai .try-ai-grid {
    grid-template-columns: 1fr;
  }
}

/* Card Component: #2a2a2a bg (matching Why Gonka section), sharp corners, thin alpha border, clickable, subtle hover */
.try-ai-card {
  background: var(--bg-card);
  border-radius: 0;
  border: 1px solid var(--border-subtle);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 180px;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 160ms ease;
}
.try-ai-card:hover {
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px var(--shadow-glow-white);
  transform: translateY(-2px);
}
.try-ai-card:focus-visible {
  outline: none;
  border-color: var(--bg-white);
  box-shadow: 0 0 0 2px var(--bg-white);
}
.try-ai-card-content {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  text-align: left;
}



/* Card Title: Square brackets, dominant element */
.try-ai-card-title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: auto;
  letter-spacing: 0;
  opacity: 1;
}

/* CTA Text: Integrated action cue, bottom-aligned */
.try-ai-card-cta {
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, "Courier New", monospace !important;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-main);
  opacity: 0.7;
  margin-top: auto;
  padding-top: 1.5rem;
  letter-spacing: 0.02em;
  transition: opacity 180ms ease;
  display: inline-block;
}
.try-ai-card:hover .try-ai-card-cta {
  opacity: 1;
}

/* Disclaimer Line: Right-aligned, muted, small */
#try-ai .try-ai-disclaimer {
  text-align: right;
  font-size: 0.75rem;
  line-height: 1.4;
  margin: 1.5rem 1rem 2rem;
  opacity: 0.45;
  font-weight: 400;
}

/* HOW IT WORKS Block */
#try-ai .try-ai-howitworks {
  max-width: 1000px;
  margin: 1.5rem auto 0;
  padding: 0 1rem;
  border: none;
}
#try-ai .try-ai-howitworks-heading {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 1.5rem;
  opacity: 0.55;
}
#try-ai .try-ai-steps {
  margin: 0;
  padding-left: 1.5rem;
  line-height: 2.2;
  list-style: none; /* remove default numbers */
  counter-reset: step-counter;
}
#try-ai .try-ai-steps li {
  font-size: 1rem;
  line-height: 1.8;
  opacity: 0.8;
  position: relative;
  padding-left: 1.5rem; /* space for >_ prefix */
}
#try-ai .try-ai-steps li::before {
  content: ">_ ";
  position: absolute;
  left: 0;
  color: var(--text-muted-strong);
  font-weight: 700;
}
#try-ai .try-ai-steps li::marker {
  display: none; /* hide default numbers */
}

/* ---- Block 10: Mining Pools section card size -5% ---- */
/* Increase grid gap to make cards ~5% smaller */
.cid-vewSf6B12y .row {
  --bs-gutter-x: 1.75rem; /* default is 1.5rem (~24px), increase to ~28px */
}

/* ---- Block 11: Get GNK (Pricing) section card size -5% ---- */
.cid-vex1i2mpfo .row {
  --bs-gutter-x: 1.75rem; /* default is 1.5rem (~24px), increase to ~28px */
}

#pricing {
  border: none; /* ensure no divider line */
  padding-top: 3rem !important; /* restore proper top padding */
  margin-top: 0 !important; /* ensure no margin-top */
}

/* Combined custom CSP extracted styles */
.faq-btn-custom { background:transparent!important;background-color:transparent!important;color:var(--text-main)!important;font-weight:600;box-shadow:none!important;padding:1.2rem 0; transition: color 0.25s ease; }
.faq-btn-custom:hover,
.faq-btn-custom:focus-visible {
  color: #f59e0b !important;
  text-decoration: none !important;
  outline: none !important;
}
.faq-text-custom { color:var(--text-muted);padding:0 0 1.2rem; }
.faq-card-custom { background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,0.1); }
.text-white-custom { color:var(--text-main); }

/* How It Works — override Mobirise #2a2a2a to unified token */
.cid-vewMvfqzNU {
  background-color: var(--bg-dark) !important;
}

/* How It Works cards — blended with section background */
.cid-vewMvfqzNU .card-box {
  background: transparent;
}

/* Hero CTA — exact fixed geometry, single source of truth */
.hero-cta {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 290px;
}
.hero-cta-secondary {
  display: flex;
  gap: 10px;
}
.hero-btn-custom {
  /* Neutralize inherited .btn styles that break fixed geometry */
  margin: 0 !important;
  padding: 0.75rem 1rem !important;
  min-width: 0 !important;
  min-height: 44px !important;
  white-space: nowrap !important;
  text-align: center;
  box-sizing: border-box;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1.3 !important; /* match .display-7 */
}
.hero-btn-primary {
  width: 290px;
}
.hero-btn-secondary {
  width: 140px;
  flex: 0 0 140px;
}
@media (max-width: 576px) {
  .hero-cta {
    width: 100%;
    max-width: 280px;
  }
  .hero-btn-primary {
    width: 100%;
    max-width: 280px;
  }
  .hero-btn-secondary {
    width: 100%;
    flex: 0 0 100%;
    max-width: 280px;
  }
  .hero-cta-secondary {
    flex-direction: column;
    gap: 12px;
  }
}

/* Hero disclaimer — quiet secondary note under CTA */
.hero-disclaimer {
  margin: 20px 0 0 0;
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, "Courier New", monospace;
  font-size: 0.75rem;
  line-height: 1.5;
  color: #686868;
  text-align: left;
  white-space: pre-line;
}

/* Quote/testimonial block links — subtle dashed underline, editorial feel */
#benefits-stats .card-box a {
  text-decoration: underline;
  text-decoration-style: dashed;
  text-underline-offset: 3px;
  color: inherit;
  opacity: 0.85;
  transition: opacity 0.2s ease, color 0.2s ease;
}
#benefits-stats .card-box a:hover,
#benefits-stats .card-box a:focus {
  opacity: 1;
  color: var(--accent-amber);
  text-decoration: underline;
  text-decoration-style: dashed;
}

/* Section dividers — subtle amber whisper between selected sections */
#how-it-works,
#mining-pools,
#why-gonka,
#try-ai,
#pricing {
  position: relative;
}
#how-it-works::after,
#mining-pools::after,
#why-gonka::after,
#try-ai::after,
#pricing::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 85%;
  max-width: 1000px;
  height: 1px;
  background: var(--divider-amber);
  pointer-events: none;
}

/* Explicitly suppress divider on hero (white quote follows) and FAQ (footer follows) */
#hero::after,
#faq::after {
  display: none;
}

.text-fff-custom { color:var(--text-main); }
.bg-2a2a2a-custom { background-color:#2a2a2a; }

/* Moderate typographic reduction for section headings */
.display-2 { font-size: 2.75rem !important; }

/* Align section subtitles to try-ai-subline reference */
.mbr-section-subtitle.display-5 { 
  font-size: 1.5rem !important; 
  line-height: 1.4 !important; 
  font-weight: 400 !important; 
}

/* Moderate typographic increase for Hero H1 */
#header16-0 .mbr-section-title { font-size: 2.75rem !important; line-height: 1.1 !important; }

/* Mining Pools and Get GNK card images styling */
#mining-pools .item-wrapper img,
#pricing .item-wrapper img {
  border-radius: 0 !important;
  border: 1px solid var(--border-subtle);
  transition: all 0.3s ease;
}

/* Mining Pools and Get GNK card wrapper border-radius reset */
#mining-pools .item-wrapper,
#pricing .item-wrapper {
  border-radius: 0 !important;
}

#mining-pools .item-wrapper img:hover,
#pricing .item-wrapper img:hover {
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-3px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Base text color overrides for white and dark backgrounds */
.cid-veyu8jTq6A .mbr-section-title,
.cid-veyu8jTq6A .mbr-section-subtitle,
.cid-vex1i2mpfo .mbr-section-title,
.cid-vex1i2mpfo .mbr-section-subtitle { color: var(--text-main) !important; }
.cid-vewEWcezQv .mbr-section-title,
.cid-vewEWcezQv .mbr-section-subtitle { color: var(--text-dark) !important; }
.cid-vexdTO1hcW .mbr-section-title,
.cid-vexdTO1hcW .mbr-section-subtitle { color: var(--text-main) !important; }

/* Why Gonka AI — match card title size to How Gonka Works */
.cid-vexdTO1hcW .card-title {
  font-size: 1.4rem !important;
  line-height: 1.3 !important;
}

/* Why Gonka cards — blended with section background */
.cid-vexdTO1hcW .card-box {
  background: transparent;
}

/* Mining Pools and Get GNK card title links */
#mining-pools .item-wrapper h3 a,
#mining-pools .item-wrapper h3 a strong,
#pricing .item-wrapper h3 a,
#pricing .item-wrapper h3 a strong {
  text-decoration: none !important;
  transition: color 0.3s ease;
}

#mining-pools .item-wrapper h3 a:hover,
#mining-pools .item-wrapper h3 a:hover strong,
#pricing .item-wrapper h3 a:hover,
#pricing .item-wrapper h3 a:hover strong,
#mining-pools .item-wrapper h3 a:focus,
#mining-pools .item-wrapper h3 a:focus strong,
#pricing .item-wrapper h3 a:focus,
#pricing .item-wrapper h3 a:focus strong {
  text-decoration: none !important;
  color: var(--accent-amber) !important; /* Muted amber/yellow accent */
}

/* ============================================================
   FAQ answer links — visible on dark background
   ============================================================ */
#faqAccordion .accordion-body a {
  color: var(--accent-amber);
  text-decoration: none;
  transition: color 0.25s ease;
}
#faqAccordion .accordion-body a:hover,
#faqAccordion .accordion-body a:focus {
  color: var(--accent-amber-hover);
  text-decoration: underline;
}

/* ============================================================
   CTA Buttons — thin border, amber hover (excludes FAQ)
   ============================================================ */
.hero-btn-custom,
.item-btn {
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: none !important;
  background: transparent !important;
  color: #f2f2f2 !important;
  transition: color 0.25s ease, border-color 0.25s ease !important;
}
.hero-btn-custom:hover,
.hero-btn-custom:focus,
.item-btn:hover,
.item-btn:focus {
  color: #c7922f !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
  text-decoration: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
.hero-btn-custom:focus-visible,
.item-btn:focus-visible {
  outline: none !important;
}
