@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600&display=swap');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/opendyslexic/index.css');

/* Custom stylesheets for GreenMeans Ghost theme */
:root, :root[data-theme="dark"] {
  --color-primary: #18832b;
  --color-secondary: #3d984e;
  --color-background: #000000;
  --color-bg-base: #000000;
  --color-bg-card: #121214;
  --color-text-main: #a1a1aa;
  --color-text-heading: #ffffff;
  --color-border: rgba(255, 255, 255, 0.05);
  --color-border-card: rgba(255, 255, 255, 0.1);
  --font-family-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-heading: "Inter", sans-serif;
  --transition-speed: 0.3s;
  --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --box-shadow-glow: 0 0 16px rgba(24, 131, 43, 0.3);
}

:root[data-theme="night"] {
  --color-primary: #18832b;
  --color-secondary: #3d984e;
  --color-background: #0b132b;
  --color-bg-base: #0b132b;
  --color-bg-card: #121f3d;
  --color-text-main: #94a3b8;
  --color-text-heading: #e2e8f0;
  --color-border: rgba(59, 130, 246, 0.15);
  --color-border-card: rgba(59, 130, 246, 0.25);
  --font-family-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-heading: "Inter", sans-serif;
  --transition-speed: 0.3s;
  --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --box-shadow-glow: 0 0 16px rgba(59, 130, 246, 0.25);
}

:root[data-theme="light"] {
  --color-primary: #18832b;
  --color-secondary: #3d984e;
  --color-background: #f8fafc;
  --color-bg-base: #f8fafc;
  --color-bg-card: #ffffff;
  --color-text-main: #3f3f46;
  --color-text-heading: #09090b;
  --color-border: rgba(9, 9, 11, 0.08);
  --color-border-card: rgba(9, 9, 11, 0.12);
  --font-family-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-heading: "Inter", sans-serif;
  --transition-speed: 0.3s;
  --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --box-shadow-glow: 0 0 16px rgba(24, 131, 43, 0.1);
}

/* Base standards */
body {
  font-family: var(--font-family-body);
  background-color: var(--color-background);
  color: var(--color-text-main);
  transition: background-color var(--transition-speed) var(--transition-easing), color var(--transition-speed) var(--transition-easing);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  color: var(--color-text-heading);
}

/* Settings elements transitions support */
.logo-fluid {
  transition: transform var(--transition-speed) var(--transition-easing), box-shadow var(--transition-speed) var(--transition-easing);
}

/* Reduced Motion Settings implementation */
.reduced-motion {
  --transition-speed: 0s !important;
  --transition-easing: none !important;
}
.reduced-motion *, .reduced-motion *::before, .reduced-motion *::after {
  animation-duration: 0.001s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0s !important;
  scroll-behavior: auto !important;
}

/* Custom Accessibility OpenDyslexic variables overrides */
.dyslexia {
  font-family: 'Lexend', 'OpenDyslexic', 'Comic Sans MS', sans-serif !important;
}
.dyslexia p, .dyslexia h1, .dyslexia h2, .dyslexia h3, .dyslexia h4, .dyslexia h5, .dyslexia h6, .dyslexia li, .dyslexia a, .dyslexia span {
  font-family: 'Lexend', 'OpenDyslexic', 'Comic Sans MS', sans-serif !important;
  word-spacing: 0.18em !important;
  letter-spacing: 0.08em !important;
  line-height: 1.8 !important;
}


/* Button & Triggers */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #ffffff;
  border: 1px solid var(--color-primary);
  border-radius: 9999px;
  background-color: rgba(24, 131, 43, 0.1);
  box-shadow: 0 0 15px rgba(24, 131, 43, 0.2);
  transition: all var(--transition-speed) var(--transition-easing);
}

.btn-primary:hover {
  background-color: rgba(24, 131, 43, 0.2);
  box-shadow: 0 0 25px rgba(24, 131, 43, 0.4);
}

.btn-primary:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(24, 131, 43, 0.5);
}

/* Ghost Navigation Loop Elements */
ul.nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.nav li a {
    color: var(--color-text-main);
    text-decoration: none;
    transition: color var(--transition-speed) var(--transition-easing);
}
ul.nav li a:hover {
    color: var(--color-primary);
}
ul.nav li.nav-current a {
    color: var(--color-text-heading);
    font-weight: 500;
}

/* Secondary Navigation / Footer */
.secondary-nav-container ul.nav {
    gap: 1.5rem;
    justify-content: center;
}

/* Content typography styles (prose) following GreenMeans guidelines */
.gh-content {
  color: var(--color-text-main);
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.8;
}

.gh-content p {
  margin-bottom: 1.5rem;
  font-size: 1.125rem;
}

.gh-content h2 {
  font-size: 1.875rem;
  color: var(--color-text-heading);
  font-weight: 300;
  margin-top: 2.5rem;
  margin-bottom: 1.25rem;
}

/* Avoid stretching small images inside post/page contents and Koenig card layouts */
.gh-content img,
.prose img,
.kg-image-card img,
.kg-card img,
.post-content img,
.kg-image {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
}

/* Allow intended wide and full-width image cards to take up full available width layout */
.kg-width-wide img,
.kg-width-full img,
.kg-width-wide .kg-image,
.kg-width-full .kg-image {
  width: 100% !important;
  max-width: 100% !important;
}

.gh-content a {
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px solid rgba(24, 131, 43, 0.3);
  transition: border-bottom var(--transition-speed) var(--transition-easing);
}

.gh-content a:hover {
  border-bottom: 2px solid var(--color-primary);
}

/* Koenig Editor layout widths complying with GScan */
.kg-width-wide {
  position: relative;
  width: 100vw;
  max-width: 1120px;
  margin: 2rem calc(50% - 50vw);
}

.kg-width-full {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
}