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

/* === Color palette and Bootstrap overrides === */
:root {
  /* Custom Moira color tokens */
  --moira-purple: #8b2be4;
  --moira-purple-deep: #4a0f80;
  --moira-purple-dark: #2a0d45;
  --moira-purple-black: #12051f;
  --moira-magenta: #d946ef;
  --moira-magenta-hot: #ff00ff;
  --moira-coral: #ea5b49;
  --moira-coral-bright: #ff7a6b;
  --moira-coral-dim: #c23b2e;
  --moira-yellow: #f8f97f;
  --moira-pale: #feeefd;
  --moira-slate: #6b607d;

  /* Override Bootstrap CSS variables for theming */
  --bs-body-bg: #0f0518;
  --bs-body-color: #feeefd;
  --bs-secondary-color: #c4b5fd;
  --bs-primary: #8b2be4;
  --bs-primary-rgb: 139, 43, 228;
  --bs-link-color: #d946ef;
  --bs-link-hover-color: #f8f97f;
  --bs-border-color: #4a0f80;
  --bs-secondary-bg: #2a0d45;
}

/* === Base body styling === */
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: linear-gradient(135deg, #1a0b2e 0%, #0f0518 100%);
  color: var(--moira-pale);
  min-height: 100vh;
}

/* === Headings (future-proof: applies to all h1-h6) === */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif;
  color: #f8f97f;
  text-shadow: 0 0 12px rgba(139, 43, 228, 0.5);
}

h1 { font-size: clamp(2rem, 7vw, 3rem); margin-bottom: 1rem; }
h2 { font-size: clamp(1.75rem, 6vw, 2.5rem); margin-bottom: 1rem; }

/* Subheadings use coral instead of yellow */
h3, h4, h5, h6 {
  color: #ff7a6b;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  text-shadow: 0 0 10px rgba(255, 122, 107, 0.3);
}

/* === Paragraphs (future-proof) === */
p {
  color: #c4b5fd;
  margin-bottom: 1rem;
  line-height: 1.7;
}

.lead {
  color: #d946ef;
  font-weight: 600;
  font-size: 1.4rem;
  text-shadow: 0 0 12px rgba(217, 70, 239, 0.35);
}

/* === Links (future-proof) === */
a {
  color: #d946ef;
  text-decoration: none;
  transition: color 0.2s;
}

a:hover { color: #f8f97f; }

/* === Lists (future-proof) === */
ul, ol {
  color: #c4b5fd;
  margin-bottom: 1rem;
}

li { margin-bottom: 0.35rem; }

/* === Code and preformatted blocks (future-proof) === */
code {
  background: #2a0d45;
  color: #ff7a6b;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 0.9em;
}

pre {
  background: #2a0d45;
  border: 1px solid #4a0f80;
  border-radius: 8px;
  padding: 1rem;
  overflow-x: auto;
  margin-bottom: 1.25rem;
}

pre code {
  background: transparent;
  color: #c4b5fd;
}

/* === Blockquotes (future-proof) === */
blockquote {
  border-left: 4px solid #d946ef;
  background: #2a0d45;
  padding: 0.75rem 1rem;
  border-radius: 0 8px 8px 0;
  margin-bottom: 1rem;
  color: #c4b5fd;
}

/* === Horizontal rules (future-proof) === */
hr {
  border-color: #4a0f80;
  margin: 1.5rem 0;
}

/* === Tables (future-proof) === */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.25rem;
  color: #c4b5fd;
}

th, td {
  padding: 0.75rem;
  border-bottom: 1px solid #4a0f80;
  text-align: left;
}

th {
  color: #ff7a6b;
  font-weight: 600;
  border-bottom: 2px solid #d946ef;
}

tr:hover td { background: #2a0d45; }

/* === Form elements (future-proof) === */
input, textarea, select {
  background: #2a0d45;
  color: #feeefd;
  border: 1px solid #4a0f80;
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  font-family: inherit;
  font-size: 1rem;
  width: 100%;
  margin-bottom: 0.75rem;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: #8b2be4;
  box-shadow: 0 0 0 3px rgba(139, 43, 228, 0.25);
}

label {
  display: block;
  color: #a89bc2;
  margin-bottom: 0.35rem;
  font-size: 0.9rem;
}

/* === Generic buttons (future-proof) === */
/* Excludes Bootstrap navbar toggler and custom nav links */
button:not(.navbar-toggler):not(.moira-nav-link) {
  background: #8b2be4;
  color: #feeefd;
  border: none;
  border-radius: 8px;
  padding: 0.65rem 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

button:not(.navbar-toggler):not(.moira-nav-link):hover {
  background: #6b21a8;
}

/* === Navbar === */
.moira-nav {
  background: linear-gradient(90deg, #2a0d45 0%, #4a0f80 60%, #6b21a8 100%) !important;
  border-bottom: 3px solid #d946ef !important;
  box-shadow: 0 4px 24px rgba(139, 43, 228, 0.5);
}

.moira-brand {
  font-family: 'Playfair Display', serif;
  color: #f8f97f !important;
  font-size: 1.6rem;
  text-shadow: 0 0 12px rgba(248, 249, 127, 0.4);
}

.moira-nav-link {
  color: #feeefd !important;
  font-weight: 500;
  border: none;
  background: transparent;
  padding: 0.5rem 1rem;
  transition: all 0.2s;
}

.moira-nav-link:hover {
  color: #f8f97f !important;
  text-shadow: 0 0 12px #f8f97f;
}

.moira-nav-link.active {
  color: #ff7a6b !important;
  font-weight: 700;
  text-shadow: 0 0 14px #ff7a6b;
}

/* === Tab panels === */
.tab {
  display: none;
}

.tab.active {
  display: block;
  animation: fadeIn 0.25s ease;
}

/* Simple fade-in animation for tab switching */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* === Footer === */
.moira-footer {
  background: linear-gradient(90deg, #2a0d45 0%, #1a0b2e 100%) !important;
  border-top: 3px solid #d946ef !important;
}

.moira-footer-text {
  color: #a89bc2;
  font-weight: 500;
}

/* === Social media icon links in footer === */
.social-icons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  color: #ff7a6b;
  font-size: 1.25rem;
  transition: color 0.2s, transform 0.2s;
}

.social-icons a:hover {
  color: #f8f97f;
  transform: scale(1.15);
}

.social-icons a svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

/* === Discord widget sidebar === */
.discord-widget {
  background: #2a0d45;
  border: 2px solid #8b2be4;
  border-radius: 12px;
  box-shadow: 0 0 28px rgba(139, 43, 228, 0.35);
  overflow: hidden;
}

.discord-widget-title {
  font-family: 'Playfair Display', serif;
  color: #f8f97f;
  text-align: center;
  padding: 1rem;
  margin: 0;
  border-bottom: 1px solid #4a0f80;
  background: #1a0b2e;
}

.discord-widget iframe {
  display: block;
  width: 100%;
  border: none;
}

/* === Selection highlight === */
::selection {
  background: #d946ef;
  color: #feeefd;
}

/* =========================================================
   Starry Night Theme Overrides
   Applied to the body when the Starry Night tab is active.
   Evokes deep blues, warm yellows, and soft whites.
   ========================================================= */

.starry-night-theme {
  background: linear-gradient(135deg, #0a1a3a 0%, #051020 100%);
  color: #f0f4ff;
}

.starry-night-theme h1,
.starry-night-theme h2 {
  color: #ffe066;
  text-shadow: 0 0 16px rgba(255, 224, 102, 0.4);
}

.starry-night-theme h3,
.starry-night-theme h4,
.starry-night-theme h5,
.starry-night-theme h6 {
  color: #7ec8e3;
  text-shadow: 0 0 10px rgba(126, 200, 227, 0.3);
}

.starry-night-theme p,
.starry-night-theme ul,
.starry-night-theme ol,
.starry-night-theme td {
  color: #c8d6f0;
}

.starry-night-theme .lead {
  color: #ffe066;
  text-shadow: 0 0 12px rgba(255, 224, 102, 0.35);
}

.starry-night-theme a {
  color: #7ec8e3;
}

.starry-night-theme a:hover {
  color: #ffe066;
}

.starry-night-theme th {
  color: #ffe066;
  border-bottom-color: #4d6fa5;
}

.starry-night-theme td,
.starry-night-theme th {
  border-bottom-color: #2a4a7a;
}

.starry-night-theme tr:hover td {
  background: #102a55;
}

.starry-night-theme .moira-nav {
  background: linear-gradient(90deg, #0a1a3a 0%, #1a3a6a 60%, #2a5a8a 100%) !important;
  border-bottom-color: #4d6fa5 !important;
  box-shadow: 0 4px 24px rgba(77, 111, 165, 0.5);
}

.starry-night-theme .moira-brand {
  color: #ffe066 !important;
  text-shadow: 0 0 12px rgba(255, 224, 102, 0.4);
}

.starry-night-theme .moira-nav-link {
  color: #f0f4ff !important;
}

.starry-night-theme .moira-nav-link:hover {
  color: #ffe066 !important;
  text-shadow: 0 0 12px #ffe066;
}

.starry-night-theme .moira-nav-link.active {
  color: #7ec8e3 !important;
  text-shadow: 0 0 14px #7ec8e3;
}

.starry-night-theme .moira-footer {
  background: linear-gradient(90deg, #0a1a3a 0%, #051020 100%) !important;
  border-top-color: #4d6fa5 !important;
}

.starry-night-theme .moira-footer-text {
  color: #8aa8d8;
}

.starry-night-theme .social-icons a {
  color: #ffe066;
}

.starry-night-theme .social-icons a:hover {
  color: #7ec8e3;
}

.starry-night-theme .discord-widget {
  background: #102a55;
  border-color: #4d6fa5;
  box-shadow: 0 0 28px rgba(77, 111, 165, 0.35);
}

.starry-night-theme .discord-widget-title {
  color: #ffe066;
  border-bottom-color: #2a4a7a;
  background: #0a1a3a;
}

.starry-night-theme ::selection {
  background: #4d6fa5;
  color: #f0f4ff;
}

/* === Blog posts === */
.blog-post {
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #4a0f80;
}

.blog-post:last-child {
  border-bottom: none;
}

.blog-post h2 {
  margin-bottom: 0.25rem;
}

.blog-post h2 a {
  color: #f8f97f;
}

.blog-post h2 a:hover {
  color: #ff7a6b;
}

.blog-date {
  color: #a89bc2;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.blog-content {
  color: #c4b5fd;
  line-height: 1.7;
}

.blog-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Starry Night theme overrides for blog posts */
.starry-night-theme .blog-post {
  border-bottom-color: #2a4a7a;
}

.starry-night-theme .blog-post h2 a {
  color: #ffe066;
}

.starry-night-theme .blog-post h2 a:hover {
  color: #7ec8e3;
}

.starry-night-theme .blog-date {
  color: #8aa8d8;
}

.starry-night-theme .blog-content {
  color: #c8d6f0;
}