/* ============================================================
   ROOT VARIABLES
   ============================================================ */
:root {
  --topbar-height: 48px;
  --sidebar-width: 275px;
}

/* ============================================================
   GLOBAL BACKGROUND + WALLPAPER FADE
   ============================================================ */
body {

  background:
    url("/assets/img/bckgr.png") no-repeat center center fixed !important;

  background-size: cover !important;
  background-color: transparent !important;
    url("/assets/img/bckgr.png") no-repeat center center fixed;

  background-size: cover !important;
  background-color: transparent !important;

  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
}

html::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.22); /* adjust 0.10–0.30 */
  pointer-events: none;
  z-index: 1 !important; /* ABOVE your other overlays */
}

html,
body {
  height: 100% !important;
  min-height: 100% !important;
}

@media (max-width: 768px) {
  body {
    background-attachment: scroll !important;
    background-size: cover !important;
    background-position: center top !important;
  }
}

/* ============================================================
   GLOBAL OVERLAYS (BELOW TOPBAR + SIDEBAR)
   ============================================================ */
body::before,
html::before,
html::after {
  z-index: 0 !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.12);
  pointer-events: none;
}

html::before {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.18),
    transparent 40%,
    transparent 60%,
    rgba(0, 0, 0, 0.18)
  );
  pointer-events: none;
}

html::after {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(circle, transparent 50%, rgba(0, 0, 0, 0.1) 100%);
  pointer-events: none;
}

/* ============================================================
   SIDEBAR — GLASS PANEL (ALWAYS ABOVE TOPBAR)
   ============================================================ */
#sidebar {
  width: var(--sidebar-width) !important;
  min-width: var(--sidebar-width) !important;
  max-width: var(--sidebar-width) !important;
  box-sizing: border-box !important;

  position: fixed !important;
  top: 0;
  left: 0;
  height: 100vh;

  z-index: 9999 !important;

  background: rgba(255, 255, 255, 0.68) !important;
  backdrop-filter: blur(26px) saturate(185%) contrast(130%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(185%) contrast(130%) !important;

  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 0 22px 22px 0;

  box-shadow:
    inset 0 0 34px rgba(255, 255, 255, 0.50),
    inset 0 0 10px rgba(255, 255, 255, 0.80),
    0 12px 32px rgba(0, 0, 0, 0.20);

  padding: 1rem 1.5rem !important;
  text-align: center !important;
}

/* ============================================================
   SIDEBAR — AVATAR
   ============================================================ */
#sidebar .profile-wrapper {
  margin: 1rem auto !important;
  padding: 0 !important;
  text-align: center !important;
  width: 100% !important;
}

#sidebar #avatar {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 160px !important;
  height: 160px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

#sidebar #avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ============================================================
   SIDEBAR — TITLE + TAGLINE
   ============================================================ */
#sidebar .site-title,
#sidebar .site-subtitle {
  display: block !important;
  font-family: "Comic Neue", sans-serif !important;
  margin: 0 auto !important;
  text-align: center !important;
  white-space: normal !important;
}

#sidebar .site-title {
  color: rgba(0, 0, 0, 1) !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  margin: 3rem auto 1rem !important;
  max-width: 260px !important;
}

#sidebar .site-subtitle {
  color: rgba(0, 0, 0, 0.65) !important;
  font-size: 0.90rem !important;
  line-height: 1.35 !important;
  margin: 0.5rem auto 1rem !important;
  max-width: 320px !important;
}

#sidebar {
  box-shadow:
    inset 0 0 40px rgba(255, 255, 255, 0.35),
    inset 0 0 6px rgba(255, 255, 255, 0.65),
    0 12px 32px rgba(0, 0, 0, 0),
    0 0 12px rgba(0, 0, 0, 0);
}

/* ============================================================
   SIDEBAR TITLE — BIG lowercase a
   ============================================================ */

#sidebar .site-title {
  color: rgba(0, 0, 0, 1) !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  margin: 3rem auto 1rem !important;
  max-width: 260px !important;
  font-family: "Comic Neue", sans-serif !important;
}

/* Bigger lowercase a */
#sidebar .site-title .a-big {
  font-size: 1.45em;      /* adjust until it matches your signature */
  line-height: 0.8;
  font-weight: 450;        /* LIGHTER stroke */           
  display: inline-block;
  vertical-align: baseline;
}

/* ============================================================
   SIDEBAR — NAV LINKS (FIXED + CLEAN)
   ============================================================ */

/* Remove inherited padding from nav + ul */
#sidebar nav,
#sidebar .nav {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* NAV LINK */
#sidebar .nav-link {
  all: unset !important;
  display: flex !important;              /* ensures icon + text align */
  align-items: center !important;
  width: 100% !important;
  text-align: left !important;

  font-family: "Comic Neue", sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;

  color: rgba(0, 0, 0, 0.75) !important;

  /* REAL FIX: tiny left padding */
  padding: 0.5rem 0 0.35rem 0.15rem !important;

  border-radius: 2px !important;
  cursor: pointer !important;
  transition: color 0.2s ease-in-out !important;
}

/* ICON SPACING — tightened */
#sidebar .nav .nav-item i {
  margin-right: 0.35rem !important;
}

/* HOVER */
#sidebar .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.45) !important;
  border-radius: 12px !important;
  color: rgba(0, 0, 0, 0.95) !important;
}

/* ============================================================
   REMOVE MODE TOGGLE
   ============================================================ */
#mode-toggle {
  display: none !important;
}


/* ============================================================
   REMOVE FROST FROM MAIN LAYOUT
   ============================================================ */
.wrapper,
main {
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
}

/* ============================================================
   PILLS
   ============================================================ */
.pill {
  background: rgba(255, 255, 255, 0.70);
  opacity: 1 !important;
  backdrop-filter: blur(18px) saturate(180%) contrast(115%);
  -webkit-backdrop-filter: blur(18px) saturate(180%) contrast(115%);

  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 18px;

  box-shadow:
    inset 0 0 20px rgba(255, 255, 255, 0.35),
    inset 0 0 4px rgba(255, 255, 255, 0.65),
    0 6px 18px rgba(0, 0, 0, 0.18);

  margin: 0.5rem 0;
  padding: 1.5rem !important;
}

.pill-hero {
  background: rgba(255, 255, 255, 0.70);
  opacity: 1 !important;
  backdrop-filter: blur(26px) saturate(180%) contrast(115%);
  -webkit-backdrop-filter: blur(26px) saturate(180%) contrast(115%);

  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 24px;

  box-shadow:
    inset 0 0 40px rgba(255, 255, 255, 0.35),
    inset 0 0 6px rgba(255, 255, 255, 0.65),
    0 12px 32px rgba(0, 0, 0, 0.22);

  margin: 2rem 0;
  padding: 4rem !important;
  text-align: center !important;
}

.hero-divider {
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.25) !important;
  display: block !important;
  margin: 1.5rem auto !important;
  width: 40%;
}

/* ============================================================
   UNIVERSAL PILL PADDING — FIRST + LAST CHILD
   ============================================================ */

.pill > *:first-child,
.pill-hero > *:first-child {
  margin-top: 1rem !important;
}

.pill > *:last-child,
.pill-hero > *:last-child {
  margin-bottom: 1rem !important;
}

/* ============================================================
   PILL HEADINGS — UNIFY HTML + MARKDOWN
   ============================================================ */

.pill h1,
.pill-hero h1 {
  font-family: "Comic Neue", sans-serif !important;
  font-size: 1.9rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin: 0 0 0.75rem 0 !important;
}

.pill h2,
.pill-hero h2 {
  font-family: "Comic Neue", sans-serif !important;
  font-size: 1.55rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin: 0 0 0.65rem 0 !important;
}

.pill h3,
.pill-hero h3 {
  font-family: "Comic Neue", sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  margin: 0 0 0.5rem 0 !important;
}

/* ============================================================
   PILL TYPOGRAPHY — UNIFY ALL TEXT ELEMENTS
   ============================================================ */

/* Base text inside pills */
.pill,
.pill-hero {
  font-family: "Comic Neue", sans-serif !important;
  font-size: 1.08rem !important;
  line-height: 1.6 !important;
  color: rgba(0, 0, 0, 0.85) !important;
}

/* Paragraphs (including Markdown auto <p>) */
.pill p,
.pill-hero p {
  margin: 0 0 1rem 0 !important;
  font-family: "Comic Neue", sans-serif !important;
  font-size: 1.08rem !important;
  line-height: 1.6 !important;
}

/* Unordered lists */
.pill ul,
.pill-hero ul {
  margin: 0 0 1rem 1.2rem !important; /* indent + spacing */
  padding: 0 !important;
  list-style: disc !important;
}

/* List items */
.pill li,
.pill-hero li {
  margin: 0.35rem 0 !important;
  font-family: "Comic Neue", sans-serif !important;
  font-size: 1.08rem !important;
  line-height: 1.55 !important;
}

/* ============================================================
   CONTENT OFFSET FOR SIDEBAR — FINAL FIX
   ============================================================ */
@media (min-width: 992px) {
  body > main.container {
    margin-left: var(--sidebar-width) !important;
  }
}

/* ============================================================
   TOPBAR — BALANCED WHITE-GLASS (NOT TOO WHITE)
   ============================================================ */

header#topbar-wrapper,
#topbar,
.custom-topbar {
  position: relative !important;
  z-index: 1 !important;

  background: rgba(245, 245, 245, 0.55) !important; /* soft grey-white glass */
  backdrop-filter: blur(18px) saturate(165%) contrast(118%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(165%) contrast(118%) !important;

  border-bottom: 1px solid rgba(255, 255, 255, 0.45) !important;

  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.35),
    inset 0 0 5px rgba(255, 255, 255, 0.65),
    0 4px 14px rgba(0, 0, 0, 0.10) !important;

  padding: 0 !important;
}

/* Remove container grey override */
header#topbar-wrapper .container {
  background: transparent !important;
  max-width: 100% !important;
  padding: 0 !important;
}

/* ============================================================
   TOPBAR — GREMLIN LOGO
   ============================================================ */
.gremlin-logo {
  height: calc(var(--topbar-height) - 10px) !important;
  width: auto !important;
  display: block !important;
}

.gremlin-logo-link {
  display: flex !important;
  align-items: center !important;
  padding-right: 1.5rem !important;
  padding-left: 0.5rem!important;
  margin: 0 !important;
}

/* ============================================================
   TOPBAR — LEFT→RIGHT GRADIENT
   ============================================================ */
.custom-topbar {
  background: linear-gradient(
    to right,

    /* fully transparent under the sidebar + extra buffer */
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) calc(var(--sidebar-width) + 40px),

    /* begin the softest possible fade */
    rgba(0, 0, 0, 0.01) calc(var(--sidebar-width) + 80px),
    rgba(0, 0, 0, 0.03)  calc(var(--sidebar-width) + 140px),
    rgba(0, 0, 0, 0.06)  calc(var(--sidebar-width) + 200px),
    rgba(0, 0, 0, 0.10)  calc(var(--sidebar-width) + 260px),

    /* peak opacity (still gentle) */
    rgba(0, 0, 0, 0.15) calc(var(--sidebar-width) + 320px),

    /* fade out again */
    rgba(0, 0, 0, 0) 100%
  ) !important;

  position: relative !important;
  z-index: 1 !important;
}

/* ============================================================
   FOOTER — SIGNATURE CENTERED, TEXT LEFT + RIGHT
   ============================================================ */

#site-footer {
  width: 100%;
  margin-top: 2rem;
  padding: 0.75rem 0; /* shorter footer */

  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(22px) saturate(180%) contrast(130%);
  -webkit-backdrop-filter: blur(22px) saturate(180%) contrast(130%);

  border-top: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 22px 22px 0 0;

  box-shadow:
    inset 0 0 20px rgba(255, 255, 255, 0.35),
    inset 0 0 6px rgba(255, 255, 255, 0.65),
    0 -8px 24px rgba(0, 0, 0, 0.12);
}

#site-footer .footer-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1rem;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;

  flex-wrap: wrap; /* mobile friendly */
  text-align: center;
}

#site-footer .footer-left,
#site-footer .footer-right {
  font-family: "Comic Neue", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.75);
}

#site-footer a {
  color: rgba(0, 0, 0, 0.75);
  text-decoration: none;
}

#site-footer a:hover {
  color: rgba(0, 0, 0, 0.95);
  text-decoration: underline;
}

/* Signature image */
.footer-sign {
  height: 50px; /* perfect size for a footer signature */
  opacity: 0.9;
}

/* ============================================================
   HERO PILL H1 — BIG LATIN ɑ MATCHING SIDEBAR STYLE
   ============================================================ */

.pill-hero h1 .anniV-a {
  font-size: 1.45em;      /* same scale as sidebar a-big */
  line-height: 0.8;
  font-weight: 500;       /* lighter stroke to match the rest */
  display: inline-block;
  vertical-align: baseline;
}

/* ============================================================
   CONTACT PAGE — MAKE EMAIL LINK MATTE GREY
   ============================================================ */

#contact-email a {
  color: rgba(0, 0, 0, 0.75) !important;   /* matte grey */
  text-decoration: none !important;        /* remove underline */
  font-weight: 600;                         /* matches your bold email */
}

#contact-email a:hover {
  color: rgba(0, 0, 0, 1) !important;       /* darker grey on hover */
}

@media (max-width: 768px) {
  #breadcrumb,
  nav[aria-label="Breadcrumb"],
  .breadcrumb {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    margin-top: 0.5rem !important;
  }
}