/* ==========================================================================
   Site-wide visual direction
   --------------------------------------------------------------------------
   Purpose:
   - Define the custom dark visual system for the whole MkDocs Material site.
   - Keep the site restrained, high-contrast, and documentation-oriented.
   - Centralize custom colors through CSS variables so later changes are easier.

   Scope:
   - These variables apply only to the MkDocs Material "slate" color scheme.
   - The site currently uses the slate scheme in mkdocs.yml.
   ========================================================================== */

[data-md-color-scheme="slate"] {
  /* Material hue basis for the dark theme. */
  --md-hue: 215;

  /* Core background and foreground colors. */
  --md-default-bg-color: #0b0f14;
  --md-default-fg-color: #e8edf3;
  --md-default-fg-color--light: #b9c3cf;
  --md-default-fg-color--lighter: #8b98a8;

  /* Header/navigation foreground and background colors. */
  --md-primary-fg-color: #06080c;
  --md-primary-bg-color: #e8edf3;

  /* Accent and link color. */
  --md-accent-fg-color: #8ab4f8;
  --md-typeset-a-color: #8ab4f8;

  /* Code block colors. */
  --md-code-bg-color: #111821;
  --md-code-fg-color: #e8edf3;

  /* Site-specific design tokens. */
  --ppfb-border-color: hsla(213, 28%, 78%, 0.18);
  --ppfb-border-color-strong: hsla(213, 28%, 78%, 0.34);
  --ppfb-surface-color: hsla(213, 28%, 24%, 0.24);
  --ppfb-surface-color-hover: hsla(213, 28%, 30%, 0.34);
  --ppfb-muted-color: #a9b5c4;

  /* Keyboard focus ring color for accessibility. */
  --ppfb-focus-ring-color: #b8d3ff;
}

/* ==========================================================================
   Header and top navigation
   --------------------------------------------------------------------------
   Purpose:
   - Keep the MkDocs Material header visible and restrained.
   - Remove visual weight from the default header shadow.
   - Hide the default Material logo button because the site title is sufficient.
   ========================================================================== */

/* Keep Material navigation visible for the multi-page site. */
.md-header {
  box-shadow: none;
  border-bottom: 1px solid var(--ppfb-border-color);
}

/* Hide the default Material logo before the site title. */
.md-header__button.md-logo {
  display: none;
}

/* Style the tab bar so it blends with the custom dark background. */
.md-tabs {
  background-color: var(--md-default-bg-color);
  border-bottom: 1px solid var(--ppfb-border-color);
}

/* Keep inactive tab labels quieter. */
.md-tabs__link {
  opacity: 0.78;
}

/* Restore full opacity for the active or hovered tab. */
.md-tabs__link--active,
.md-tabs__link:hover {
  opacity: 1;
}

/* ==========================================================================
   Keyboard accessibility
   --------------------------------------------------------------------------
   Purpose:
   - Add visible focus outlines for keyboard users.
   - Cover header buttons, navigation links, tab links, and content links.
   - Use :focus-visible so outlines appear for keyboard navigation but not
     unnecessarily for mouse clicks in modern browsers.
   ========================================================================== */

.md-header__button:focus-visible,
.md-nav__link:focus-visible,
.md-tabs__link:focus-visible,
.md-typeset a:focus-visible {
  outline: 2px solid var(--ppfb-focus-ring-color, #b8d3ff);
  outline-offset: 3px;
  border-radius: 0.2rem;
}

/* ==========================================================================
   Layout width and sidebars
   --------------------------------------------------------------------------
   Purpose:
   - Slightly widen the default Material layout.
   - Hide the duplicated left navigation on desktop because top tabs already
     provide primary navigation.
   - Preserve the mobile navigation drawer on smaller screens.
   - Keep the main reading measure controlled for readability.
   ========================================================================== */

/* Wider than the Material default, while keeping a composed documentation layout. */
.md-grid {
  max-width: 78rem;
}

/* The top navigation already provides the primary page-level navigation.
   On desktop, hide the duplicated left navigation column and let the
   content occupy the recovered space. On smaller screens, keep Material's
   primary sidebar available for the mobile navigation drawer. */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary {
    display: none;
  }

  .md-main__inner {
    margin-top: 0;
  }

  .md-content {
    margin-left: 0;
  }
}

/* Keep the article measure readable after removing the left sidebar. */
.md-content__inner {
  max-width: 58rem;
}

/* Preserve comfortable separation between content and the right-side TOC. */
@media screen and (min-width: 76.25em) {
  .md-sidebar--secondary {
    margin-left: 1.6rem;
  }
}

/* ==========================================================================
   Footer
   --------------------------------------------------------------------------
   Purpose:
   - Keep the footer visible.
   - Make it visually quiet so it does not compete with the page content.
   ========================================================================== */

.md-footer {
  background-color: var(--md-default-bg-color);
  border-top: 1px solid var(--ppfb-border-color);
}

.md-footer-meta {
  background-color: var(--md-default-bg-color);
}

/* ==========================================================================
   General typography
   --------------------------------------------------------------------------
   Purpose:
   - Tune the default Material typography for a compact professional site.
   - Preserve readable line height.
   - Use strong headings without making the site look promotional.
   ========================================================================== */

.md-typeset {
  font-size: 0.82rem;
}

/* Main page title. */
.md-typeset h1 {
  margin-bottom: 1rem;
  font-weight: 720;
  letter-spacing: -0.035em;
}

/* Section headings. The top border gives structure on long technical pages. */
.md-typeset h2 {
  margin-top: 2.4rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--ppfb-border-color);
  font-weight: 680;
  letter-spacing: -0.02em;
}

/* Subsection headings. */
.md-typeset h3 {
  margin-top: 1.8rem;
  font-weight: 650;
}

/* Comfortable reading rhythm for paragraphs and list items. */
.md-typeset p,
.md-typeset li {
  line-height: 1.68;
}

/* Make bold labels readable against the dark background. */
.md-typeset strong {
  color: var(--md-default-fg-color);
}

/* Make underlines sit slightly away from the text. */
.md-typeset a {
  text-underline-offset: 0.18em;
}

/* Standard hover affordance for links. */
.md-typeset a:hover {
  text-decoration: underline;
}

/* Prevent long external URLs or identifiers from forcing horizontal overflow.
   break-word avoids aggressive mid-word breaks unless needed for layout safety. */
.md-typeset a,
.md-typeset code {
  overflow-wrap: break-word;
}

/* ==========================================================================
   Tables
   --------------------------------------------------------------------------
   Purpose:
   - Support the technical stack tables and structured summaries.
   - Keep tables restrained and aligned with the dark documentation aesthetic.
   ========================================================================== */

/* Tables, used sparingly for structured technical summaries. */
.md-typeset table:not([class]) {
  border: 1px solid var(--ppfb-border-color);
  border-radius: 0.55rem;
  overflow: hidden;
}

/* Header row background. */
.md-typeset table:not([class]) th {
  background-color: var(--ppfb-surface-color);
  color: var(--md-default-fg-color);
}

/* Shared table cell styling. */
.md-typeset table:not([class]) td,
.md-typeset table:not([class]) th {
  border-color: var(--ppfb-border-color);
  vertical-align: top;
}

/* ==========================================================================
   Homepage hero section
   --------------------------------------------------------------------------
   Purpose:
   - Style the custom homepage introduction in docs/index.md.
   - Keep the homepage visually distinct while still using the same site tokens.
   - The corresponding HTML structure is:
     <section class="hero" markdown="1"> ... </section>
   ========================================================================== */

/* Main hero container. */
.md-typeset .hero {
  min-height: calc(100vh - 9rem);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 58rem;
  padding: 4.5rem 0 5rem;
}

/* Large homepage name heading. */
.md-typeset .hero h1 {
  max-width: 54rem;
  margin: 0 0 1rem;
  font-size: clamp(2.6rem, 7vw, 5.6rem);
  line-height: 0.95;
  font-weight: 760;
  letter-spacing: -0.06em;
}

/* Homepage professional subtitle. */
.md-typeset .hero .subtitle {
  margin-bottom: 1.35rem;
  color: var(--md-default-fg-color);
  font-size: clamp(1.05rem, 2vw, 1.55rem);
  font-weight: 520;
  line-height: 1.35;
}

/* Homepage summary paragraph. */
.md-typeset .hero .description {
  max-width: 45rem;
  margin-bottom: 2rem;
  color: var(--ppfb-muted-color);
  font-size: 0.98rem;
  line-height: 1.75;
}

/* ==========================================================================
   Homepage profile/contact links
   --------------------------------------------------------------------------
   Purpose:
   - Style the LinkedIn, Email, GitHub, Google Scholar, and ORCID links.
   - Keep them button-like on the homepage only.
   - Preserve a restrained pill design rather than using heavy cards.
   ========================================================================== */

/* Link grid wrapper. */
.md-typeset .link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, max-content));
  gap: 0.7rem;
  margin: 0;
}

/* Individual profile/contact link pill. */
.md-typeset .profile-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 9.5rem;
  border: 1px solid var(--ppfb-border-color-strong);
  border-radius: 999px;
  padding: 0.62rem 0.95rem;
  background-color: var(--ppfb-surface-color);
  color: var(--md-default-fg-color);
  font-weight: 620;
  text-decoration: none;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    transform 150ms ease;
}

/* Shared hover and keyboard-focus visual state. */
.md-typeset .profile-link:hover,
.md-typeset .profile-link:focus-visible {
  border-color: var(--md-typeset-a-color);
  background-color: var(--ppfb-surface-color-hover);
  text-decoration: none;
}

/* Mouse-only micro-interaction. */
.md-typeset .profile-link:hover {
  transform: translateY(-1px);
}

/* Icon size inside profile links. */
.md-typeset .profile-link .twemoji,
.md-typeset .profile-link .md-icon {
  width: 1.05rem;
  height: 1.05rem;
}

/* ==========================================================================
   Structured key-value paragraphs
   --------------------------------------------------------------------------
   Purpose:
   - Compact paragraphs that start with a bold key, such as:
     **Type:** ...
     **Status:** ...
   - This targets paragraph-based metadata blocks only.
   - It does not affect list-based metadata such as:
     - **Type:** ...
   - The direct-child selector avoids affecting nested bold text.
   ========================================================================== */

/* Compact key-value paragraphs used in structured content blocks. */
.md-typeset p:has(> strong:first-child) {
  margin-top: 0.35rem;
  margin-bottom: 0.35rem;
}

/* ==========================================================================
   Mobile adjustments
   --------------------------------------------------------------------------
   Purpose:
   - Reduce hero height on smaller screens.
   - Make profile links stack vertically and fill the available width.
   ========================================================================== */

@media screen and (max-width: 640px) {
  .md-typeset .hero {
    min-height: auto;
    padding: 3rem 0 3.5rem;
  }

  .md-typeset .hero h1 {
    font-size: clamp(2.3rem, 13vw, 3.5rem);
  }

  .md-typeset .link-grid {
    grid-template-columns: 1fr;
  }

  .md-typeset .profile-link {
    width: 100%;
  }
}

/* ==========================================================================
   Reduced motion
   --------------------------------------------------------------------------
   Purpose:
   - Respect user/system reduced-motion preferences.
   - Remove profile-link transition and hover movement for users who request
     less animation.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .md-typeset .profile-link {
    transition: none;
  }

  .md-typeset .profile-link:hover {
    transform: none;
  }
}