/*
  Global styles for the crypto learning website.

  This file keeps the look and feel consistent across all pages. The
  design uses a dark colour palette with bright accent colours to
  highlight key elements. Each section is spaced evenly to improve
  readability, and media queries ensure the layout adapts to smaller
  screens.

  Feel free to modify the variables at the top of the file to tweak
  colours and sizing. Comment blocks explain what each section does.
*/

/* Colour palette */
:root {
  --bg: #0d1117; /* primary background */
  --card-bg: #161b22; /* card backgrounds */
  --accent: #58a6ff; /* accent colour for links and buttons */
  --accent-secondary: #ff7b72; /* secondary accent */
  --text-primary: #c9d1d9; /* main text colour */
  --text-muted: #8b949e; /* muted text colour */
  --border: rgba(255, 255, 255, 0.1);
  --radius: 12px;
  --shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

/* Reset default margins and paddings */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--accent-secondary);
}

/* Container for consistent horizontal padding */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* Navigation bar */
header {
  position: sticky;
  top: 0;
  width: 100%;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  z-index: 100;
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
}

.nav a {
  margin-left: 16px;
  font-weight: 600;
  font-size: 0.9rem;
}

.nav a:first-child {
  margin-left: 0;
}

/* Hero section */
.hero {
  padding: 60px 0;
  text-align: center;
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.hero p {
  font-size: 1.1rem;
  color: var(--text-muted);
  max-width: 640px;
  margin: 0 auto 30px;
}

.btn-primary {
  display: inline-block;
  background: var(--accent);
  color: #0d1117;
  padding: 12px 24px;
  border-radius: var(--radius);
  font-weight: 700;
  transition: background 0.2s ease;
}

.btn-primary:hover {
  background: var(--accent-secondary);
}

/* Card grid */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 40px;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease;
}

.card h2 {
  font-size: 1.4rem;
  margin-bottom: 10px;
}

.card p {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.card a {
  font-weight: 600;
}

.card:hover {
  transform: translateY(-4px);
}

/* Page content layout */
.content {
  padding: 40px 0;
}

section {
  margin-bottom: 40px;
}

section h2 {
  font-size: 1.8rem;
  margin-bottom: 12px;
}

section h3 {
  font-size: 1.3rem;
  margin-top: 20px;
  margin-bottom: 8px;
}

section p {
  margin-bottom: 12px;
  color: var(--text-primary);
}

ul {
  padding-left: 20px;
  margin-bottom: 12px;
}

li {
  margin-bottom: 6px;
}

/* Footer */
footer {
  padding: 40px 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.8rem;
  border-top: 1px solid var(--border);
  margin-top: 40px;
}

/* WhatsApp floating button styles */
.wa-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
}

.wa-container {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: #fff;
  padding: 12px 16px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: transform 0.2s ease;
}

.wa-container:hover {
  transform: translateY(-2px);
}

.wa-icon {
  font-size: 18px;
  margin-right: 8px;
}

/* Popup overlay */
.wa-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: flex-end;
  justify-content: center;
  z-index: 1000;
}

.wa-modal {
  background: var(--card-bg);
  border-radius: var(--radius);
  width: calc(100% - 32px);
  max-width: 500px;
  padding: 20px;
  box-shadow: var(--shadow);
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.wa-modal.open {
  transform: translateY(0);
}

.wa-modal h3 {
  margin-bottom: 10px;
}

.wa-modal textarea {
  width: 100%;
  height: 120px;
  background: var(--bg);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  resize: vertical;
  margin-bottom: 12px;
}

.wa-modal button {
  padding: 10px 16px;
  border: none;
  border-radius: var(--radius);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.wa-modal .wa-send {
  background: var(--accent);
  color: #0d1117;
  margin-right: 8px;
}

.wa-modal .wa-cancel {
  background: var(--card-bg);
  color: var(--text-primary);
  border: 1px solid var(--border);
}

.wa-modal .wa-send:hover {
  background: var(--accent-secondary);
}

.wa-modal .wa-cancel:hover {
  background: var(--bg);
}

/* Quick replies layout and buttons */
.wa-modal .quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.wa-modal .quick-replies button {
  flex: 1 1 calc(50% - 8px);
  background: var(--card-bg);
  color: var(--text-primary);
  border: 1px solid var(--border);
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.2s ease;
  white-space: normal;
}

.wa-modal .quick-replies button:hover {
  background: var(--bg);
}

/* Mobile-specific tweaks */
@media (max-width: 768px) {
  .nav {
    flex-direction: column;
    align-items: flex-start;
  }
  .nav a {
    margin: 8px 0 0;
  }
  .hero h1 {
    font-size: 2rem;
  }
  .hero p {
    font-size: 1rem;
  }
  .wa-container {
    padding: 12px;
  }
  .wa-container span {
    display: none; /* hide text on mobile to save space */
  }

  /* Make the WhatsApp modal behave like a bottom sheet on small screens */
  .wa-modal {
    width: 100%;
    max-width: none;
    border-radius: 18px 18px 0 0;
    padding: 24px;
  }

  .wa-modal h3 {
    font-size: 1.2rem;
  }

  .wa-modal textarea {
    height: 140px;
    font-size: 0.9rem;
  }

  .wa-modal button {
    font-size: 1rem;
  }
}