/* The Operator Daily — Custom Theme for Listmonk Public Pages */
/* Dark mode, gold accents, modern SaaS newsletter aesthetic */

:root {
  --bg-primary: #0a0a0a;
  --bg-secondary: #111111;
  --bg-card: #1a1a1a;
  --bg-input: #222222;
  --border: #2a2a2a;
  --border-accent: #f59e0b;
  --text-primary: #f0f0f0;
  --text-secondary: #a0a0a0;
  --text-muted: #666666;
  --accent: #f59e0b;
  --accent-hover: #d97706;
  --accent-glow: rgba(245, 158, 11, 0.15);
  --link: #60a5fa;
  --link-hover: #93c5fd;
  --radius: 8px;
  --max-width: 680px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Import Inter font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* Base */
body {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  font-family: var(--font) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  margin: 0 !important;
  -webkit-font-smoothing: antialiased;
}

/* Container — override Listmonk default white background */
.container.wrap,
.wrap {
  max-width: var(--max-width) !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  background: var(--bg-primary) !important;
  box-shadow: none !important;
  border: none !important;
}

/* Header */
.header {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
  border-bottom: 3px solid var(--accent) !important;
  padding: 40px 24px !important;
  margin: 0 -20px 40px !important;
  text-align: center !important;
}

.header .logo a {
  text-decoration: none !important;
}

.header .logo img {
  display: none !important;
}

/* Logo text handled by JS — hide CSS pseudo-elements when JS has run */
.header .logo a::after {
  content: '' !important;
  display: none !important;
}

.header .logo a::before {
  content: '' !important;
  display: none !important;
}

/* Brand title/tagline (injected by JS) */
.brand-title {
  font-size: 32px !important;
  font-weight: 800 !important;
  color: var(--accent) !important;
  letter-spacing: -0.5px !important;
  line-height: 1.2 !important;
}

.brand-tagline {
  font-size: 14px !important;
  color: #b0b8c8 !important;
  font-weight: 400 !important;
  margin-top: 8px !important;
}

/* === LANDING PAGE HERO === */
.landing-hero {
  text-align: center !important;
  margin-bottom: 32px !important;
  background: #0a0a0a !important;
  position: relative !important;
  z-index: 1 !important;
}

h1.hero-headline,
.landing-hero h1,
.hero-headline {
  font-size: 36px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  color: #ffffff !important;
  margin: 0 0 16px 0 !important;
  letter-spacing: -0.5px !important;
  opacity: 1 !important;
  visibility: visible !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 0 0 #ffffff, 0 1px 2px rgba(0,0,0,0.5) !important;
}

span.hero-accent,
.hero-headline .hero-accent,
.hero-accent {
  color: #f59e0b !important;
  -webkit-text-fill-color: #f59e0b !important;
}

p.hero-sub,
.landing-hero p,
.hero-sub {
  font-size: 17px !important;
  color: #d0d0d0 !important;
  -webkit-text-fill-color: #d0d0d0 !important;
  line-height: 1.6 !important;
  max-width: 560px !important;
  margin: 0 auto !important;
  opacity: 1 !important;
}

/* === FEATURE BULLETS === */
.landing-features {
  margin-bottom: 28px !important;
}

.feature-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 16px 20px !important;
  margin-bottom: 10px !important;
  transition: border-color 0.2s !important;
}

.feature-item:hover {
  border-color: var(--accent) !important;
}

.feature-icon {
  font-size: 24px !important;
  flex-shrink: 0 !important;
  width: 32px !important;
  text-align: center !important;
}

.feature-item strong {
  color: #ffffff !important;
  font-size: 15px !important;
}

.feature-item div {
  color: #c8c8c8 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* === LEAD MAGNET === */
.lead-magnet {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  background: rgba(245, 158, 11, 0.06) !important;
  border: 2px solid rgba(245, 158, 11, 0.3) !important;
  border-radius: 12px !important;
  padding: 20px 24px !important;
  margin-bottom: 28px !important;
}

.magnet-badge {
  background: var(--accent) !important;
  color: #0a0a0a !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.magnet-text {
  font-size: 15px !important;
  color: #e8e8e8 !important;
  line-height: 1.5 !important;
}

.magnet-text strong {
  color: #ffffff !important;
}

.magnet-sub {
  color: #c0c0c0 !important;
  font-size: 13px !important;
}

/* Headings */
section h2 {
  color: var(--accent) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  margin: 0 0 24px 0 !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--border) !important;
}

/* Archive list */
.archive {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.archive li {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 20px 24px !important;
  margin-bottom: 12px !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.archive li:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 0 20px var(--accent-glow) !important;
}

.archive li a {
  color: var(--text-primary) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 17px !important;
}

.archive li a:hover {
  color: var(--accent) !important;
}

.archive li .date {
  color: var(--text-muted) !important;
  font-size: 13px !important;
  margin-top: 4px !important;
}

/* Subscription form */
.form {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 32px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3) !important;
}

.form label {
  color: #c8c8c8 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  display: block !important;
  margin-bottom: 6px !important;
}

.form input[type="email"],
.form input[type="text"] {
  background: var(--bg-input) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  color: var(--text-primary) !important;
  font-size: 16px !important;
  padding: 14px 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s !important;
  font-family: var(--font) !important;
}

.form input[type="email"]:focus,
.form input[type="text"]:focus {
  border-color: var(--accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
}

.form input[type="email"]::placeholder,
.form input[type="text"]::placeholder {
  color: var(--text-muted) !important;
}

/* Subscribe button */
.form .button,
button.button {
  background: var(--accent) !important;
  color: #0a0a0a !important;
  border: none !important;
  border-radius: var(--radius) !important;
  padding: 16px 32px !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  width: 100% !important;
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s !important;
  font-family: var(--font) !important;
  letter-spacing: 0.3px !important;
  margin-top: 8px !important;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3) !important;
}

.form .button:hover,
button.button:hover {
  background: var(--accent-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 24px rgba(245, 158, 11, 0.4) !important;
}

.form .button:active,
button.button:active {
  transform: translateY(0) !important;
}

/* Lists checkbox area */
.lists {
  list-style: none !important;
  padding: 0 !important;
  margin: 16px 0 !important;
}

.lists h2 {
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--text-secondary) !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 8px 0 !important;
}

.lists li {
  background: var(--bg-input) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 12px 16px !important;
  margin-bottom: 8px !important;
}

.lists li label {
  color: var(--text-primary) !important;
  font-size: 15px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 500 !important;
  display: inline !important;
}

.lists .description {
  color: var(--text-secondary) !important;
  font-size: 13px !important;
  margin: 4px 0 0 0 !important;
}

/* Links */
a {
  color: var(--link) !important;
  text-decoration: none !important;
}

a:hover {
  color: var(--link-hover) !important;
  text-decoration: underline !important;
}

/* Archive link at bottom */
.right {
  text-align: right !important;
  margin-top: 20px !important;
}

.right a {
  color: var(--text-muted) !important;
  font-size: 14px !important;
}

.right a:hover {
  color: var(--accent) !important;
}

/* RSS icon */
.feed {
  opacity: 0.5 !important;
  transition: opacity 0.2s !important;
}

.feed:hover {
  opacity: 1 !important;
}

/* Footer */
footer.container {
  text-align: center !important;
  padding: 32px 0 !important;
  color: var(--text-muted) !important;
  font-size: 12px !important;
  border-top: 1px solid var(--border) !important;
  margin-top: 40px !important;
}

footer a {
  color: var(--text-muted) !important;
}

footer a:hover {
  color: var(--accent) !important;
}

/* Campaign/archive view page */
.campaign {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 32px !important;
  margin-bottom: 24px !important;
}

.campaign h1 {
  color: var(--text-primary) !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  margin: 0 0 8px 0 !important;
}

.campaign .date {
  color: var(--text-muted) !important;
  font-size: 13px !important;
  margin-bottom: 24px !important;
}

/* Nonce field (honeypot) - keep hidden */
.nonce {
  display: none !important;
}

/* Empty state — only apply to direct section paragraphs, not landing page */
section > p:not(.hero-sub) {
  color: #b0b0b0 !important;
  text-align: center !important;
  padding: 40px 0 !important;
}
section:has(.archive:empty) {
  color: #b0b0b0 !important;
  text-align: center !important;
  padding: 40px 0 !important;
}

/* Post-form notice (spam/trust) */
.post-form-notice {
  text-align: center !important;
  margin-top: 20px !important;
  padding: 0 8px !important;
}

.spam-notice {
  color: var(--text-secondary) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  background: rgba(245, 158, 11, 0.08) !important;
  border: 1px solid rgba(245, 158, 11, 0.2) !important;
  border-radius: var(--radius) !important;
  padding: 12px 16px !important;
  margin: 0 0 12px 0 !important;
}

.spam-notice strong {
  color: var(--accent) !important;
}

.trust-signals {
  color: #999999 !important;
  font-size: 12px !important;
  margin: 0 !important;
}

/* Responsive */
@media (max-width: 640px) {
  .header {
    padding: 28px 16px !important;
  }
  .header .logo a::after {
    font-size: 24px !important;
  }
  .hero-headline {
    font-size: 26px !important;
  }
  .hero-sub {
    font-size: 15px !important;
  }
  .lead-magnet {
    flex-direction: column !important;
    text-align: center !important;
    gap: 10px !important;
    padding: 16px !important;
  }
  .feature-item {
    padding: 14px 16px !important;
  }
  .form {
    padding: 20px !important;
  }
  section h2 {
    font-size: 20px !important;
  }
}