/* ==========================================================================
   Astro background, white text
   Drop-in overrides for AcademicPages (Minimal Mistakes)
   AcademicPages switches to its wide layout at 925px. Every layout rule
   below is scoped to one side of that line.
   ========================================================================== */

:root {
  /* Swap this path for whatever you name your background file. */
  --astro-bg: url("/images/astro-bg.jpg");

  /* The wash over the image. Raise these if text is hard to read. */
  --scrim-top: rgba(6, 10, 26, 0.55);
  --scrim-bottom: rgba(6, 10, 26, 0.80);

  /* The content panel. Dark and translucent, so the image reads through it.
     For NO panel at all, set this to transparent and --panel-blur to 0px. */
  --panel: rgba(8, 12, 28, 0.55);
  --panel-blur: 3px;

  --body-text: #e8ecfa;
  --heading-text: #ffffff;
  --link: #9fc1ff;
  --muted: #b6bed6;
  --hairline: rgba(255, 255, 255, 0.20);
}

/* --- 1. The background ---------------------------------------------------- */

/* A fixed pseudo-element rather than background-attachment: fixed — the
   latter jitters or over-zooms on iOS Safari. */
html,
body {
  background: transparent !important;
  max-width: 100%;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background-image: linear-gradient(var(--scrim-top), var(--scrim-bottom)),
                    var(--astro-bg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* --- 2. Top navigation ---------------------------------------------------- */

.masthead__inner-wrap,
.masthead__menu,
.greedy-nav,
.greedy-nav .visible-links,
.greedy-nav .visible-links li,
.greedy-nav__toggle {
  background: transparent !important;
}

.masthead {
  background: rgba(6, 10, 26, 0.45) !important;
  border-bottom: 1px solid var(--hairline);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.greedy-nav a,
.greedy-nav .site-title,
.greedy-nav button,
.masthead__menu-item a {
  color: var(--body-text) !important;
}

.greedy-nav a:hover { color: #fff !important; }
.greedy-nav .visible-links a::before { background: var(--link); }

.greedy-nav .hidden-links {
  background: #10152b !important;
  border-color: var(--hairline);
}
.greedy-nav .hidden-links a { color: var(--body-text) !important; }
.greedy-nav .hidden-links::before { border-bottom-color: #10152b; }

/* --- 3. Sidebar ----------------------------------------------------------- */

#main { background: transparent; }

.sidebar { opacity: 1 !important; }

.sidebar,
.sidebar p,
.sidebar li,
.sidebar .author__name,
.sidebar .author__pronouns,
.sidebar .author__bio {
  color: var(--body-text);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

.author__avatar img {
  border-radius: 50%;
  padding: 0;
  border: 4px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
  /* profile.png isn't square — crop to a circle instead of squashing. */
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.author__urls a {
  color: var(--link);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.author__urls a:hover { color: #fff; }

@media (min-width: 925px) {
  .author__avatar img {
    width: 200px;
    height: 200px;
    max-width: 200px;
  }

  .author__urls {
    background: transparent;
    border: 0;
    box-shadow: none;
  }
}

@media (max-width: 924px) {
  /* AcademicPages lays these three out as table cells, which cannot hold a
     large avatar. Stack and centre them instead. */
  .author__avatar,
  .author__content,
  .author__urls-wrapper {
    display: block;
    float: none;
    width: 100%;
    height: auto;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
  }

  .author__avatar { margin-bottom: 0.75em; }

  .author__avatar img {
    width: 130px;
    height: 130px;
    max-width: 130px;
    border-width: 3px;
  }

  .author__content { margin-bottom: 0.5em; }

  /* Drop the "Follow" dropdown — show the links directly. */
  .author__urls-wrapper button { display: none; }

  .author__urls {
    display: block !important;
    position: static;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .author__urls::before,
  .author__urls::after { display: none; }

  .author__urls li {
    display: inline-block;
    margin: 0 0.5em 0.25em;
  }

  .sidebar {
    margin-bottom: 1.5em;
    padding-bottom: 0;
    border-bottom: 0;
  }
}

/* --- 4. Content panel ----------------------------------------------------- */

.page,
.archive {
  /* flow-root makes the panel contain the theme's floated inner wrappers.
     Without it the panel collapses to zero height on narrow screens. */
  display: flow-root;
  background: var(--panel);
  border-radius: 12px;
  padding: 1.75em;
  -webkit-backdrop-filter: blur(var(--panel-blur));
  backdrop-filter: blur(var(--panel-blur));
  border: 1px solid var(--hairline);
}

@media (max-width: 924px) {
  .page,
  .archive {
    width: 100%;
    padding: 1.25em;
    border-radius: 10px;
  }
}

/* AcademicPages reserves right padding for a sidebar it isn't using here.
   Reclaim it and set the width so the panel lines up with the sidebar.
   Nudge 220px / 340px if your gutter looks off. */
@media (min-width: 925px) {
  .page,
  .archive {
    width: calc(100% - 220px);
    padding: 2em;
  }
}

@media (min-width: 1280px) {
  .page,
  .archive {
    width: calc(100% - 340px);
    padding: 2.5em;
  }
}

/* --- 5. Text on the panel ------------------------------------------------- */

.page,
.archive,
.page__content,
.page__content p,
.page__content li,
.page__content dd,
.archive__item-excerpt {
  color: var(--body-text);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.page__title,
.page__content h1,
.page__content h2,
.page__content h3,
.page__content h4,
.page__content h5,
.page__content h6,
.archive__item-title,
.archive__subtitle {
  color: var(--heading-text);
  border-bottom-color: var(--hairline);
}

.page__content a,
.archive__item-title a,
.page__related a {
  color: var(--link);
}
.page__content a:hover,
.archive__item-title a:hover { color: #fff; }

.page__meta,
.page__date,
.page__taxonomy,
.page__taxonomy a,
.archive__item-meta,
.page__content small {
  color: var(--muted);
}

.page__content hr,
.page__related,
.page__share {
  border-color: var(--hairline);
}

.page__content blockquote {
  border-left-color: var(--link);
  color: var(--muted);
}

/* Tables */
.page__content table { color: var(--body-text); }
.page__content th,
.page__content td { border-color: var(--hairline); }
.page__content thead,
.page__content th { background: rgba(255, 255, 255, 0.08); color: var(--heading-text); }
.page__content tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.04); }

/* Code */
.page__content code,
.page__content pre,
.page__content .highlight,
.page__content .highlighter-rouge {
  background: rgba(0, 0, 0, 0.45) !important;
  color: #e6e9f5;
  border-radius: 4px;
}

/* Callout boxes */
.notice,
.notice--primary,
.notice--info,
.notice--warning,
.notice--danger,
.notice--success {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--body-text) !important;
  border-color: var(--hairline);
}

/* --- 6. Figures ----------------------------------------------------------- */

/* Plots exported from matplotlib have white backgrounds. A light frame makes
   them look intentional instead of like a glaring rectangle. Delete this
   block if you switch to transparent-background figures. */
.page__content img,
.archive img {
  max-width: 100%;
  height: auto;
  background: #fff;
  padding: 0.5rem;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* Figure captions sit outside the frame, so keep them light. */
.page__content figcaption,
.page__content em { color: var(--muted); }

/* --- 7. Footer ------------------------------------------------------------ */

.page__footer {
  background: rgba(6, 10, 26, 0.75);
  color: var(--body-text);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.page__footer a,
.page__footer footer,
.page__footer .page__footer-follow a {
  color: var(--link);
}
.page__footer a:hover { color: #fff; }