/* =============================================================
   DepoGator Brand Theme — depogator.css
   Import this file in your base layout (src/layouts/Base.astro)
   Add: <link rel="stylesheet" href="/depogator.css" />
   Or import in your global CSS: @import './depogator.css';
   ============================================================= */

/* Brand Color Tokens */
:root {
  --dg-prussian:   #0A1128;
  --dg-prussian-2: #0D1A35;
  --dg-prussian-3: #111E3C;
  --dg-dark-sea:   #255957;
  --dg-jungle:     #08A574;
  --dg-mint:       #A1FFC0;
  --dg-snow:       #FAFAFA;

  --dg-accent-glow:    rgba(8, 165, 116, 0.15);
  --dg-accent-border:  rgba(8, 165, 116, 0.25);
  --dg-mint-border:    rgba(161, 255, 192, 0.15);
  --dg-text-muted:     rgba(250, 250, 250, 0.55);
  --dg-text-dim:       rgba(250, 250, 250, 0.35);
}

/* ---- Base overrides ---- */
body {
  background-color: var(--dg-prussian) !important;
  color: var(--dg-snow) !important;
}

/* ---- Navigation ---- */
header,
nav,
.navbar,
.header {
  background-color: rgba(10, 17, 40, 0.96) !important;
  backdrop-filter: blur(12px);
}

/* Nav links */
nav a,
.nav-link,
.navbar a {
  color: rgba(250, 250, 250, 0.65) !important;
  transition: color 0.2s;
}
nav a:hover,
.nav-link:hover {
  color: var(--dg-snow) !important;
}

/* ---- Primary CTA Button ---- */
.btn,
.btn-primary,
a.btn,
button.btn {
  background-color: var(--dg-jungle) !important;
  color: var(--dg-prussian) !important;
  border: none !important;
  font-weight: 500 !important;
  border-radius: 9999px !important;
  transition: background-color 0.2s, transform 0.1s;
}
.btn:hover,
.btn-primary:hover,
a.btn:hover {
  background-color: #09b882 !important;
  color: var(--dg-snow) !important;
  transform: translateY(-1px);
}

/* Outline / secondary button */
.btn-outline,
.btn-secondary {
  background-color: transparent !important;
  color: var(--dg-snow) !important;
  border: 1px solid rgba(250, 250, 250, 0.22) !important;
  border-radius: 9999px !important;
}
.btn-outline:hover,
.btn-secondary:hover {
  border-color: var(--dg-jungle) !important;
  color: var(--dg-mint) !important;
}

/* ---- Section labels / eyebrows ---- */
.section-title,
.eyebrow,
.label,
[class*="section-label"] {
  color: var(--dg-jungle) !important;
  letter-spacing: 1.2px;
}

/* ---- Headings ---- */
h1, h2, h3, h4, h5, h6 {
  color: var(--dg-snow) !important;
  letter-spacing: -0.3px;
}

/* ---- Body text ---- */
p, li, span:not(.badge):not(.tag) {
  color: var(--dg-text-muted);
}

/* ---- Cards ---- */
.card,
[class*="card"],
.feature-card,
.pricing-card {
  background-color: var(--dg-prussian-2) !important;
  border: 1px solid var(--dg-accent-border) !important;
  border-radius: 10px !important;
}

/* Card icon wrapper */
.card-icon,
.feature-icon,
[class*="icon-wrap"] {
  background-color: var(--dg-accent-glow) !important;
  color: var(--dg-jungle) !important;
  border-radius: 8px !important;
}

/* ---- Section backgrounds ---- */
.bg-light,
.section-light,
[class*="bg-gray"] {
  background-color: rgba(37, 89, 87, 0.15) !important;
}

.bg-dark,
.section-dark {
  background-color: var(--dg-prussian-3) !important;
}

/* ---- Blockquote / pull quote ---- */
blockquote,
.quote,
.testimonial-text {
  border-left: 3px solid var(--dg-jungle) !important;
  padding-left: 28px !important;
  color: rgba(250, 250, 250, 0.8) !important;
}

/* ---- Horizontal rules / dividers ---- */
hr, .divider, [class*="border-b"] {
  border-color: var(--dg-accent-border) !important;
}

/* ---- Badges / pills ---- */
.badge,
.tag,
[class*="badge"] {
  background-color: var(--dg-accent-glow) !important;
  color: var(--dg-mint) !important;
  border: 1px solid var(--dg-accent-border) !important;
  border-radius: 20px !important;
}

/* ---- Footer ---- */
footer,
.footer {
  background-color: #060D1E !important;
  border-top: 1px solid rgba(8, 165, 116, 0.1) !important;
  color: var(--dg-text-dim) !important;
}
footer a,
.footer a {
  color: var(--dg-text-dim) !important;
}
footer a:hover,
.footer a:hover {
  color: var(--dg-mint) !important;
}

/* ---- Links ---- */
a {
  color: var(--dg-jungle);
}
a:hover {
  color: var(--dg-mint);
}

/* ---- Input / Form fields ---- */
input,
textarea,
select {
  background-color: var(--dg-prussian-2) !important;
  border: 1px solid var(--dg-accent-border) !important;
  color: var(--dg-snow) !important;
  border-radius: 7px !important;
}
input:focus,
textarea:focus,
select:focus {
  border-color: var(--dg-jungle) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(8, 165, 116, 0.15) !important;
}
input::placeholder,
textarea::placeholder {
  color: var(--dg-text-dim) !important;
}

/* ---- Pricing table highlighted card ---- */
.pricing-card.featured,
.pricing-card.recommended,
.plan-card.featured {
  border-color: var(--dg-jungle) !important;
  border-width: 2px !important;
}

/* ---- Advisory Feed Widget ---- */
.dg-advisory-feed {
  background: var(--dg-dark-sea);
  border: 1px solid var(--dg-mint-border);
  border-radius: 10px;
  padding: 20px 24px;
  max-width: 860px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.dg-feed-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.dg-feed-label {
  font-size: 11px;
  color: var(--dg-text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.dg-feed-live {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--dg-mint);
}
.dg-feed-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dg-mint);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}
.dg-feed-item {
  background: rgba(10, 17, 40, 0.6);
  border-left: 3px solid var(--dg-jungle);
  border-radius: 7px;
  padding: 10px 14px;
  margin-bottom: 8px;
}
.dg-feed-item:last-child { margin-bottom: 0; }
.dg-feed-item-type {
  font-size: 10px;
  color: var(--dg-mint);
  letter-spacing: 0.8px;
  margin-bottom: 4px;
  font-weight: 500;
}
.dg-feed-item-text {
  font-size: 13px;
  color: var(--dg-snow);
  line-height: 1.45;
}
.dg-feed-item.info { border-left-color: rgba(250,250,250,0.2); }
.dg-feed-item.info .dg-feed-item-type { color: var(--dg-text-muted); }

/* Fix: Logo text color */
header .navbar-brand,
header .logo,
header a .logo-text,
header a span,
header .site-title {
  color: var(--dg-snow) !important;
}

/* Fix: Hero / HomeBanner background */
.section,
.banner,
.home-section,
[class*="banner"],
[class*="hero"] {
  background-color: var(--dg-prussian) !important;
}

/* Fix: Hero heading text visibility */
.banner h1,
.banner h2,
.section h1,
[class*="banner"] h1,
[class*="hero"] h1 {
  color: var(--dg-snow) !important;
}

/* Fix: Hero subtext / paragraph */
.banner p,
.section > .container > p,
[class*="banner"] p,
[class*="hero"] p {
  color: rgba(250, 250, 250, 0.75) !important;
}

/* ================================================================
   LAUNCH READINESS FIXES — 2026-06-17
   ================================================================ */

/* Fix: Remove light template background images from header/banner.
   Both banner-bg.png (homepage) and page-header.png (inner pages)
   are from the original light Astro template and create a white
   remnant behind the hero and inner page headers. */
.header-wrapper > div[aria-hidden="true"] {
  display: none !important;
}
.header-wrapper {
  background-color: var(--dg-prussian) !important;
  background-image: none !important;
}

/* Fix: text-text-dark Tailwind class.
   In theme.json, text-dark = #0A1128 (same as background color).
   Using text-text-dark in page HTML produces invisible text on the dark site.
   Override globally to white. Exceptions below for colored-background badges. */
.text-text-dark {
  color: var(--dg-snow) !important;
}

/* Exception: badge/pill spans with mint-green background need dark text */
span.rounded-full.text-text-dark,
span.bg-secondary.text-text-dark,
.badge.text-text-dark {
  color: var(--dg-prussian) !important;
}

/* Fix: bg-light cards on inner pages use dark teal (#255957) — keep but ensure text is readable */
.bg-light h1, .bg-light h2, .bg-light h3, .bg-light h4, .bg-light h5, .bg-light h6 {
  color: var(--dg-snow) !important;
}
.bg-light p, .bg-light li {
  color: rgba(250, 250, 250, 0.85) !important;
}

/* Fix: accordion styling for dark theme (Pricing FAQ) */
.accordion {
  min-height: auto !important;              /* template min-h-full was exploding height */
  background-color: transparent !important; /* template bg-light was rendering teal */
  border-bottom: 1px solid var(--dg-accent-border) !important;
}
.accordion-header {
  color: var(--dg-snow) !important;
  background: transparent !important;
}
.accordion-content {
  color: rgba(250, 250, 250, 0.75) !important;
}
/* Cookiebot banner: on phones, sit above the sticky "Get Started" bar
   (Base.astro, md:hidden fixed bottom) instead of covering it. */
@media (max-width: 767px) {
  #CybotCookiebotDialog {
    bottom: 96px !important;
  }
}

/* Header on phones: the 268px logo pushed Get Started and the menu toggle
   onto a second row. Cap the logo so all three fit on one line. */
@media (max-width: 479px) {
  .navbar-brand img {
    width: 150px !important;
    height: auto !important;
  }
  .header a[href^="https://app.depogator.com/signup"] {
    margin-right: 12px;
  }
}

/* Contrast (WCAG AA): the global "p, li, span:not(.badge):not(.tag)" rule above
   greys out these small labels on the Advisory Feed card. More specific
   selectors, placed later, restore readable colors. */
.dg-advisory-feed span.dg-feed-label { color: rgba(250, 250, 250, 0.72); }
.dg-advisory-feed span.dg-feed-live { color: var(--dg-mint); }