/* =================================================================
   VARIABLES - Theme Colors and Typography
   ================================================================= */

/* Import fantasy-style serif font for headings and sans-serif for body */
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap");

/* Light Mode Theme */
[data-md-color-scheme="default"] {
  /* Primary Color: Muted Teal */
  --md-primary-fg-color: #4b6a6c;
  --md-primary-fg-color--light: #6e9a9c;
  --md-primary-fg-color--dark: #3a5052;

  /* Accent Color: Muted Gold/Brass */
  --md-accent-fg-color: #8d6b47;

  /* Background and Text */
  --md-default-bg-color: #fbf8f2; /* Parchment Background */
  --md-default-fg-color: rgba(54, 46, 43, 0.87); /* Warm Dark Gray Text */

  /* Link Colors: High contrast teal/gold theme */
  --md-typeset-a-color: #2d4a4c; /* Darker teal for high contrast */
  --md-typeset-a-color--hover: #8d6b47; /* Gold on hover */

  --md-code-bg-color: #f0ebe4;
  --md-code-fg-color: #543d2a;

  /* Paper texture variables */
  --paper-texture-gold: rgba(139, 107, 71, 0.05);
  --paper-texture-gold-alt: rgba(139, 107, 71, 0.04);
  --paper-texture-teal: rgba(75, 106, 108, 0.025);
  --paper-texture-fiber: rgba(139, 107, 71, 0.02);
  --paper-texture-diagonal: rgba(75, 106, 108, 0.015);
}

/* Dark Mode Theme */
[data-md-color-scheme="slate"] {
  /* Primary Color: Muted Teal */
  --md-primary-fg-color: #5a7e80;
  --md-primary-fg-color--light: #7a9a9d;
  --md-primary-fg-color--dark: #486668;

  /* Accent Color: Bronze-shifted Gold */
  --md-accent-fg-color: #9d8268;

  /* Background and Text */
  --md-default-bg-color: #1a2425; /* Dark Slate-Green Background */
  --md-default-fg-color: rgba(215, 210, 205, 0.87); /* Warmer off-white text */

  /* Link Colors: Softer teal for less jarring appearance */
  --md-typeset-a-color: #6b8a8c; /* Softer, less bright teal */
  --md-typeset-a-color--hover: #b39578; /* Bronze gold on hover */

  --md-code-bg-color: #151c1d;
  --md-code-fg-color: #d4d0ca;

  /* Paper texture variables for dark mode - more subtle */
  --paper-texture-gold: rgba(157, 130, 104, 0.03);
  --paper-texture-gold-alt: rgba(157, 130, 104, 0.025);
  --paper-texture-teal: rgba(90, 126, 128, 0.015);
  --paper-texture-fiber: rgba(157, 130, 104, 0.012);
  --paper-texture-diagonal: rgba(90, 126, 128, 0.01);
}

/* =================================================================
   BASE STYLES - Typography and Global Elements  
   ================================================================= */

body {
  background-color: var(--md-default-bg-color);
  background-image: 
    /* Layer 1: Fine grain */ repeating-radial-gradient(
      circle at 1px 1px,
      var(--paper-texture-gold) 0px,
      transparent 1px,
      transparent 3px,
      var(--paper-texture-gold-alt) 3px
    ),
    /* Layer 2: Slightly larger, offset pattern */
      repeating-radial-gradient(
        circle at 2px 3px,
        transparent 0px,
        transparent 5px,
        var(--paper-texture-teal) 5px,
        transparent 6px,
        transparent 11px
      ),
    /* Layer 3: Diagonal streaks for fiber effect */
      repeating-linear-gradient(
        127deg,
        transparent,
        transparent 23px,
        var(--paper-texture-fiber) 23px,
        var(--paper-texture-fiber) 24px,
        transparent 24px,
        transparent 41px
      ),
    /* Layer 4: Counter-diagonal */
      repeating-linear-gradient(
        -31deg,
        transparent,
        transparent 37px,
        var(--paper-texture-diagonal) 37px,
        var(--paper-texture-diagonal) 38px
      );
  background-size: 13px 13px, 17px 17px, 29px 29px, 31px 31px;
}

.md-typeset {
  font-family: "Lato", sans-serif;
}

.md-header__button.md-logo,
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-family: "Cinzel", serif;
  font-weight: 400;
  color: var(--md-primary-fg-color--dark);
}

/* Dark mode header colors - override with warm gray */
[data-md-color-scheme="slate"] .md-header__button.md-logo,
[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3 {
  color: #d4d0ca;
}

.md-typeset h1 {
  border-bottom: 2px solid var(--md-primary-fg-color--light);
  padding-bottom: 0.3em;
}

/* =================================================================
   TYPOGRAPHY - Links and Text Styling
   ================================================================= */

.hero-cta {
  padding: 12px 24px;
  background-color: #4a4238; 
  color: #e0dacd;
  text-decoration: none;
  border: 1px solid #2e2821;
  border-radius: 3px;
  font-weight: bold;

  box-shadow: 0 4px 0 #2e2821;

  transition: transform 0.1s ease-out, box-shadow 0.1s ease-out,
    filter 0.1s ease-out;
}

.hero-cta:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #2e2821;
}

.hero-cta:active {
  transform: translateY(2px);

  box-shadow: 0 2px 0 #2e2821;

  filter: brightness(0.9);

  transition-duration: 0.05s;
}

.md-typeset a {
  color: var(--md-typeset-a-color);
  text-decoration: underline;
  text-decoration-color: var(--md-typeset-a-color);
  text-underline-offset: 0.2em;
  transition: all 0.2s ease;
}

.md-typeset a:hover {
  color: var(--md-typeset-a-color--hover);
  text-decoration-color: var(--md-typeset-a-color--hover);
  text-decoration-thickness: 2px;
}

.md-typeset a:visited {
  color: var(--md-typeset-a-color);
  opacity: 0.8;
}

.md-typeset a:visited:hover {
  color: var(--md-typeset-a-color--hover);
  opacity: 1;
}

/* =================================================================
   COMPONENTS - Hero Section and Special Elements
   ================================================================= */

/* Hero Section */
.hero-section {
  position: relative;
  width: 100%;
  height: 70vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  margin: 0 0 2rem 0;
  overflow: hidden;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle,
    rgba(0, 0, 0, 0) 40%,
    rgba(0, 0, 0, 0.4) 100%
  );
  z-index: 0;
  pointer-events: none;
}

.hero-content {
  position: relative;
  text-align: left;
  color: white;
  z-index: 1;
  max-width: 800px;
  padding: 3rem;
  margin-top: 2rem;
}

.hero-content h1 {
  font-size: 3.5rem;
  margin-bottom: 1rem;
  border: none;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7), 0 0 6px rgba(255, 200, 120, 0.6),
    0 0 12px rgba(255, 160, 60, 0.4);
  animation: candleFlicker 7s infinite ease-in-out;
}

.hero-content p {
  font-size: 1.3rem;
  margin-bottom: 2rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

.hero-content a {
  display: inline-block;
  background: var(--md-primary-fg-color);
  color: white;
  padding: 1rem 2rem;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  transition: all 0.3s ease;
}

.hero-content a:visited {
  color: white;
}

.hero-content a:hover {
  background: var(--md-primary-fg-color--dark);
  transform: translateY(-2px);
}

/* =================================================================
   ADMONITIONS - Clean Border Styling
   ================================================================= */

/* Base admonition styling with clean borders and shadows */
.admonition.note,
.admonition.abstract,
.admonition.info,
.admonition.tip,
.admonition.success,
.admonition.question,
.admonition.warning,
.admonition.danger,
.admonition.example,
.admonition.quote {
  border-width: 2px;
  border-style: solid;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.05);
}

/* Admonition border colors - themed for The Crescent */
.admonition.note {
  border-color: rgba(90, 150, 255, 0.6);
  box-shadow: 0 2px 4px rgba(90, 150, 255, 0.15),
    0 4px 8px rgba(90, 150, 255, 0.08);
}

.admonition.abstract {
  border-color: rgba(150, 180, 255, 0.6);
  box-shadow: 0 2px 4px rgba(150, 180, 255, 0.15),
    0 4px 8px rgba(150, 180, 255, 0.08);
}

.admonition.info {
  border-color: var(--md-primary-fg-color);
  box-shadow: 0 2px 4px rgba(75, 106, 108, 0.2),
    0 4px 8px rgba(75, 106, 108, 0.1);
}

.admonition.tip,
.admonition.success {
  border-color: rgba(90, 180, 120, 0.6);
  box-shadow: 0 2px 4px rgba(90, 180, 120, 0.15),
    0 4px 8px rgba(90, 180, 120, 0.08);
}

.admonition.question {
  border-color: rgba(140, 100, 200, 0.6);
  box-shadow: 0 2px 4px rgba(140, 100, 200, 0.15),
    0 4px 8px rgba(140, 100, 200, 0.08);
}

.admonition.warning {
  border-color: rgba(251, 140, 0, 0.6);
  box-shadow: 0 2px 4px rgba(251, 140, 0, 0.15),
    0 4px 8px rgba(251, 140, 0, 0.08);
}

.admonition.danger {
  border-color: rgba(229, 57, 53, 0.6);
  box-shadow: 0 2px 4px rgba(229, 57, 53, 0.15),
    0 4px 8px rgba(229, 57, 53, 0.08);
}

.admonition.example {
  border-color: rgba(180, 100, 255, 0.6);
  box-shadow: 0 2px 4px rgba(180, 100, 255, 0.15),
    0 4px 8px rgba(180, 100, 255, 0.08);
}

.admonition.quote {
  border-color: var(--md-accent-fg-color);
  box-shadow: 0 2px 4px rgba(141, 107, 71, 0.2),
    0 4px 8px rgba(141, 107, 71, 0.1);
}

/* Campaign-specific admonition styling */
.md-typeset .admonition.campaign-note {
  border-left-color: var(--md-accent-fg-color);
}

.md-typeset .admonition.campaign-note > .md-icon {
  color: var(--md-accent-fg-color);
}

.md-typeset .admonition.gm-note {
  border-color: #ff6b6b;
  display: none;
}

/* =================================================================
   ANIMATIONS AND EFFECTS
   ================================================================= */

/* Candle flicker effect for hero title */
@keyframes candleFlicker {
  0%,
  100% {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7),
      0 0 6px rgba(255, 200, 120, 0.6), 0 0 12px rgba(255, 160, 60, 0.4);
  }

  /* Subtle jitter burst */
  32% {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7),
      0 0 5px rgba(255, 190, 110, 0.58), 0 0 11px rgba(255, 150, 60, 0.42);
  }
  34% {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7),
      0 0 6px rgba(255, 205, 130, 0.63), 0 0 12px rgba(255, 170, 70, 0.47);
  }
  36% {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7),
      0 0 5px rgba(255, 195, 115, 0.6), 0 0 11px rgba(255, 160, 65, 0.44);
  }
}

/* =================================================================
   UTILITIES - Responsive and Accessibility  
   ================================================================= */

/* Accessibility: Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .md-content__inner {
    animation: none;
  }

  .hero-content h1 {
    animation: none;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7),
      0 0 6px rgba(255, 200, 120, 0.6), 0 0 12px rgba(255, 160, 60, 0.4);
  }
}

/* Responsive design */
@media screen and (max-width: 768px) {
  .hero-section {
    height: 50vh;
  }

  .hero-content h1 {
    font-size: 2.5rem;
  }

  .hero-content p {
    font-size: 1.1rem;
  }
}