/* ==========================================================
   Mythos Theme – Custom CSS for jonathanpsullivan.com
   Matched to Squarespace site brand: Manrope + Poppins,
   navy/lavender/teal palette.
   
   HOW TO USE:
   1. In your Micro.blog dashboard, go to Design
   2. Select or create a Custom Theme
   3. Click "Custom CSS" in the top left
   4. REPLACE your existing custom CSS with this entire file
   5. Save
   ========================================================== */


/* ----------------------------------------------------------
   GOOGLE FONTS
   Import Manrope (headings) and Poppins (body)
   ---------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap');


/* ----------------------------------------------------------
   LIGHT MODE – Color Overrides
   ---------------------------------------------------------- */

:root {
  /* Text */
  --color-text:           #222A3F;  /* Primary text – dark navy */
  --color-text-light:     #3a4259;  /* Secondary text – slightly lighter navy */
  --color-text-muted:     #6b7280;  /* Muted text */

  /* Backgrounds */
  --color-background:     #FFFFFF;  /* Main background */
  --color-background-alt: #EEE7F3; /* Shaded/alternate sections – lavender */

  /* Borders */
  --color-border:         #d6cfe0;  /* Tinted to complement lavender */
  --color-border-light:   #EEE7F3; /* Light border – matches alt bg */

  /* Links */
  --color-link:           #104B60;  /* Teal – matches hover color */
  --color-link-hover:     #222A3F;  /* Navy on hover */

  /* Accent */
  --color-accent:         #104B60;  /* Teal – focus outlines, highlights */
}


/* ----------------------------------------------------------
   DARK MODE – Color Overrides
   Derived from your brand palette, adjusted for dark bg.
   ---------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root {
    /* Text */
    --color-text:           #EEE7F3;  /* Lavender-white */
    --color-text-light:     #d6cfe0;  /* Softer lavender */
    --color-text-muted:     #9a92a6;  /* Muted lavender-gray */

    /* Backgrounds */
    --color-background:     #191d2b;  /* Deep navy */
    --color-background-alt: #222A3F;  /* Brand dark navy */

    /* Borders */
    --color-border:         #3a4259;  /* Navy mid-tone */
    --color-border-light:   #2c3348;  /* Subtle navy border */

    /* Links */
    --color-link:           #7ab8cc;  /* Light teal */
    --color-link-hover:     #a5d4e2;  /* Lighter teal on hover */

    /* Accent */
    --color-accent:         #7ab8cc;  /* Light teal for dark mode */
  }
}


/* ----------------------------------------------------------
   TYPOGRAPHY – Font Family Overrides
   ---------------------------------------------------------- */

body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0em;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
}


/* ----------------------------------------------------------
   TYPOGRAPHY – Size Scale
   Matched to your Squarespace settings.
   Adjust if Mythos base sizes feel off.
   ---------------------------------------------------------- */

h1 { font-size: 2.8rem; }   /* Slightly reduced from your 4rem for blog context */
h2 { font-size: 2rem; }     /* Scaled down from 2.8rem */
h3 { font-size: 1.6rem; }   /* Scaled down from 2.2rem */
h4 { font-size: 1.25rem; }  /* Scaled down from 1.6rem */

/* Blog body text – your P1 is 1.4rem which is generous;
   1.125rem (18px) is a comfortable blog reading size. */
article p,
.e-content p {
  font-size: 1.125rem;
  line-height: 1.6;
}


/* ----------------------------------------------------------
   LINK STYLING
   Subtle underline on hover, teal color.
   ---------------------------------------------------------- */

a {
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}


/* ----------------------------------------------------------
   SITE HEADER
   Dark navy background with white text.
   ---------------------------------------------------------- */

.site-header,
body > header:first-of-type {
  background-color: #222A3F;
}

/* Ensure post/article headers stay white */
article header,
.post header,
.h-entry header {
  background-color: var(--color-background);
}

.site-title,
.site-title a {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}

.site-title a:hover {
  text-decoration: none;
  color: #FFFFFF;
}

/* Header nav links – white on dark background */
header nav a,
.site-nav a {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
  color: #FFFFFF;
  letter-spacing: 0em;
}

header nav a:hover,
.site-nav a:hover {
  color: #EEE7F3;
}

/* Menu toggle button – white on dark background */
.menu-toggle,
button[aria-label="Menu"],
.nav-toggle {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  color: #FFFFFF;
}


/* ----------------------------------------------------------
   CUSTOM FOOTER
   Styled to match jonathanpsullivan.com footer.
   ---------------------------------------------------------- */

.custom-footer {
  text-align: center;
  padding: 3rem 1.5rem 2rem;
  margin-top: 3rem;
}

.custom-footer_site-name {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0 0 1rem;
}

.custom-footer_nav {
  margin-bottom: 1.5rem;
}

.custom-footer_nav a {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--color-link);
  margin: 0 0.5rem;
}

.custom-footer_nav a:hover {
  color: var(--color-link-hover);
}

.custom-footer_badges {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.custom-footer_badge-img {
  width: auto;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

.custom-footer_badge-img:hover {
  opacity: 1;
}

/* ASAE badge */
.custom-footer_badge-asae {
  height: 60px;
}

/* Sidecar AAiP badge – doubled from base */
.custom-footer_badge-sidecar {
  height: 120px;
}

.custom-footer_copyright {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin: 0;
}

/* Dark mode adjustments for badges */
@media (prefers-color-scheme: dark) {
  .custom-footer_badge-img {
    filter: brightness(1.1);
  }
}


/* ----------------------------------------------------------
   BLOCKQUOTES
   Styled with your teal accent on the left border.
   ---------------------------------------------------------- */

blockquote {
  border-left: 3px solid #104B60;
  padding-left: 1.25rem;
  color: var(--color-text-light);
  font-style: italic;
}

@media (prefers-color-scheme: dark) {
  blockquote {
    border-left-color: #7ab8cc;
  }
}


/* ----------------------------------------------------------
   CODE BLOCKS
   Lavender-tinted background to match your palette.
   ---------------------------------------------------------- */

code {
  background-color: #EEE7F3;
  padding: 0.15em 0.35em;
  border-radius: 3px;
  font-size: 0.9em;
}

pre code {
  background-color: transparent;
  padding: 0;
}

@media (prefers-color-scheme: dark) {
  code {
    background-color: #2c3348;
  }
}


/* ----------------------------------------------------------
   POST META / DATES
   Use Poppins at a lighter weight for dates and metadata.
   ---------------------------------------------------------- */

time,
.post-meta,
.post-date {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
}