/* ==========================================================================
   Personal customizations — modern, neat, minimal
   Overrides the compiled theme (main.css) via CSS custom properties and
   targeted rules. Loaded after main.css, so these rules win the cascade.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

:root {
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
}

html,
body,
.masthead__menu-item,
.page__content,
.page__title,
h1, h2, h3, h4, h5, h6,
button,
input,
select,
textarea {
  font-family: var(--font-sans);
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.01em;
  isolation: isolate;
}

/* --------------------------------------------------------------------------
   3D social network background
   -------------------------------------------------------------------------- */

.social-network-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.56;
}

body,
#main,
.page__footer {
  position: relative;
}

.masthead {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 20;
}

.page__footer {
  z-index: 2;
}

#main {
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .social-network-background {
    opacity: 0.35;
  }
}

.page__title,
.page__content h2,
.page__content h3 {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.page__content {
  line-height: 1.7;
}

.page__content p {
  text-align: justify !important;
  text-justify: inter-word;
}

.page__content li {
  text-align: justify !important;
  text-justify: inter-word;
}

/* --------------------------------------------------------------------------
   Color palette — light (default)
   -------------------------------------------------------------------------- */

:root {
  --global-base-color: #2563eb;
  --global-bg-color: #ffffff;
  --global-footer-bg-color: #fafafa;
  --global-border-color: #e8e8ea;
  --global-dark-border-color: #d6d6da;
  --global-code-background-color: #f5f5f6;
  --global-code-text-color: #383a3e;
  --global-fig-caption-color: #7a7d85;
  --global-link-color: #2563eb;
  --global-link-color-hover: #1d4ed8;
  --global-link-color-visited: #4338ca;
  --global-masthead-link-color: #1c1d21;
  --global-masthead-link-color-hover: #2563eb;
  --global-text-color: #1c1d21;
  --global-text-color-light: #6b6e76;
  --global-thead-color: #f5f5f6;
}

/* Color palette — dark */

html[data-theme="dark"] {
  --global-base-color: #5b8def;
  --global-bg-color: #101114;
  --global-footer-bg-color: #0b0c0e;
  --global-border-color: #26272b;
  --global-dark-border-color: #34363b;
  --global-code-background-color: #191a1d;
  --global-code-text-color: #d7d8db;
  --global-fig-caption-color: #9a9da5;
  --global-link-color: #6ea1f5;
  --global-link-color-hover: #8fb8f8;
  --global-link-color-visited: #a5b4fc;
  --global-masthead-link-color: #e7e8ea;
  --global-masthead-link-color-hover: #6ea1f5;
  --global-text-color: #e7e8ea;
  --global-text-color-light: #9a9da5;
  --global-thead-color: #191a1d;
}

/* --------------------------------------------------------------------------
   Shape language — soft, minimal
   -------------------------------------------------------------------------- */

.btn,
.author__avatar img,
.page__content img,
pre,
code,
.highlight {
  border-radius: 10px;
}

.author__avatar img {
  width: 175px;
  height: 175px;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
}

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

.btn {
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: none;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.btn:hover {
  transform: translateY(-1px);
  opacity: 0.92;
}

.btn--inverse:hover {
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Masthead — quiet, floating nav
   -------------------------------------------------------------------------- */

.masthead {
  background: color-mix(in srgb, var(--global-bg-color) 88%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
}

.masthead__menu-item {
  background-color: transparent;
  font-weight: 500;
}

.masthead__menu-item--lg {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.masthead__menu a {
  transition: color 0.15s ease;
}

/* --------------------------------------------------------------------------
   Sidebar / author card
   -------------------------------------------------------------------------- */

.author__avatar img {
  border-width: 1px;
}

.author__name {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.author__bio {
  color: var(--global-text-color-light);
}

/* --------------------------------------------------------------------------
   Footer — quieter, out of the way
   -------------------------------------------------------------------------- */

.page__footer {
  border-top: 1px solid var(--global-border-color);
}

.page__footer-copyright {
  font-size: 0.75em;
  color: var(--global-text-color-light);
}

.page__footer-follow .social-icons {
  font-size: 0.85em;
}