/* ==========================================================================
   Shared dark + monospace theme  —  matiasbarcelo.com
   Linked from index.html and projects.html. Edit here once; both pages follow.

   Strategy: rather than fight the Indice theme's hundreds of rules, we
   redefine the design tokens it already cascades from. Everything that
   inherits (body, headings, nav, links) follows automatically.
   ========================================================================== */

/* --- 1. Design tokens ---------------------------------------------------- */
:root,
body{
  --wp--preset--color--base:         #0e0f11;  /* page background */
  --wp--preset--color--custom-black: #d8d8d6;  /* body text       */
  --wp--preset--color--black:        #d8d8d6;
  --wp--preset--color--white:        #0e0f11;
  --wp--preset--color--primary:      #7fb2ff;  /* links           */
  --wp--preset--color--secondary:    #7fb2ff99;

  --mb-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, "DejaVu Sans Mono", monospace;
  --wp--preset--font-family--inter:  var(--mb-mono);

  /* palette reused below */
  --mb-bg:        #0e0f11;
  --mb-surface:   #16181c;
  --mb-border:    #2a2d33;
  --mb-text:      #d8d8d6;
  --mb-heading:   #f2f2f0;
  --mb-muted:     #8b9099;
  --mb-faint:     #5f646d;
  --mb-link:      #7fb2ff;
  --mb-link-hover:#a9ccff;
  --mb-accent:    #fb923c;
}

html{ background:var(--mb-bg); }
body{
  background:var(--mb-bg);
  color:var(--mb-text);
  font-family:var(--mb-mono);
  -webkit-font-smoothing:antialiased;
}

/* The theme sets Inter on many blocks explicitly — pull them all to mono. */
body, p, li, a, span, div, h1, h2, h3, h4, h5, h6,
.wp-block-site-title, .wp-block-navigation, .wp-block-heading,
.wp-block-paragraph, .wp-block-navigation-item__label,
figcaption, .wp-element-caption, summary, details, code, pre{
  font-family:var(--mb-mono) !important;
}

h1, h2, h3, .wp-block-site-title{ color:var(--mb-heading) !important; letter-spacing:-0.01em; }
h2.wp-block-heading span{ text-decoration-color:#4a4d55; }

a{ color:var(--mb-link); }
a:hover{ color:var(--mb-link-hover); }
.wp-block-navigation-item__content{ color:var(--mb-text) !important; }
.wp-block-navigation-item__content:hover{ color:var(--mb-link) !important; }
/* Active page: match on the WP class AND aria-current, so the highlight is
   correct even if one of the two gets out of sync in the static markup. */
.current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation-item__content[aria-current="page"]{
  color:var(--mb-link) !important;
}

strong{ color:var(--mb-heading); }
hr, .wp-block-separator{ border-color:var(--mb-border); }
img{ opacity:.92; }
::selection{ background:#7fb2ff33; }

/* Captions under photos/embeds */
figcaption, .wp-element-caption{
  color:var(--mb-muted) !important;
  font-size:.78rem;
  line-height:1.55;
}

/* Stray light-grey utility backgrounds from the WP preset sheet */
:root .has-very-light-gray-background-color{ background-color:var(--mb-surface) !important; }
.has-white-background-color{ background-color:var(--mb-surface) !important; }
.has-black-color{ color:var(--mb-text) !important; }

/* Embeds (YouTube etc.) — soften the hard white edge on a dark page */
iframe{ border-radius:8px; background:#000; }

/* --- 2. Rotating protein widget (index.html) ----------------------------- */
/* Horizontal placement: "left-middle" — halfway between flush-left and
   centred. Centred would be an offset of (100% - width)/2; flush-left is 0;
   so half of centred is (100% - width)/4. max() keeps it >= 0 on narrow
   screens where the art is wider than the column. */
.ppi-widget{
  font-family:var(--mb-mono);
  margin-top:2rem;
  margin-bottom:2rem;
  margin-left:max(0px, (100% - 98ch) / 4);
  margin-right:auto;
  text-align:left;
  display:block;
  width:-moz-fit-content;
  width:fit-content;
  max-width:100%;
}

/* Fixed stage: reserves exactly 98 cols x 33 rows so a new frame can never
   reflow the page. The caption below therefore never moves. */
.ppi-stage{
  width:98ch;
  max-width:100%;
  height:calc(33 * 1em * 1.0);
  /* Upper bound raised 11px -> 13px so the restored geometry actually reads
     larger on wide screens instead of being capped back down. */
  font-size:clamp(4.5px, 1.15vw, 13px);
  font-family:var(--mb-mono);
  overflow:hidden;
  contain:layout size;
}
.ppi-canvas{
  margin:0; padding:0; border:0;
  background:none;
  white-space:pre;
  line-height:1.0;
  font-size:inherit;
  font-family:inherit;
  color:#cfd3d8;
  display:block;
  width:98ch;
  height:100%;
  overflow:hidden;
  -webkit-user-select:none; user-select:none;
  cursor:grab;
}
.ppi-canvas:active{ cursor:grabbing; }

.ppi-caption{
  font-family:var(--mb-mono);
  font-size:.78rem;
  line-height:1.55;
  color:var(--mb-muted);
  width:64ch;
  max-width:100%;
  margin:.9rem auto 0;
  text-align:left;
}
.ppi-label{
  display:block;
  text-align:center;
  letter-spacing:.16em;
  font-size:.68rem;
  color:var(--mb-faint);
  margin-bottom:.45rem;
}
.ppi-o{ color:var(--mb-accent); font-weight:700; }

/* Shares the widget's "left-middle" axis so the two read as one column. */
/* 16:9 box that scales down cleanly on narrow screens */
/* --- 3. SuperSearch demo (projects.html) --------------------------------- */
/* The terminal itself is already dark; these fix the light-mode chrome
   around it that would otherwise glare against the new background. */
.ss-term-wrap{
  border-color:var(--mb-border) !important;
  box-shadow:0 12px 40px rgba(0,0,0,.55) !important;
}
.ss-term-hint{ color:var(--mb-muted) !important; }

.ss-learn-more{
  background:var(--mb-surface) !important;
  border-color:var(--mb-border) !important;
  color:var(--mb-text);
}
.ss-learn-more > summary{ color:var(--mb-heading); }
.ss-learn-more > summary::before{ color:var(--mb-muted) !important; }
.ss-learn-more > summary:hover{ background:#1d2026 !important; }
.ss-learn-more-body{ border-top-color:var(--mb-border) !important; }
.ss-learn-more-body .ss-learn-p{ color:var(--mb-text) !important; }

.ss-learn-pre{ border-color:var(--mb-border) !important; }
.ss-run{ border-bottom-color:var(--mb-muted) !important; }
.ss-run:hover, code.ss-run:focus-visible{
  color:#7ee787 !important;
  border-bottom-color:#7ee787 !important;
}

/* Inline code outside the terminal */
code:not(.ss-run):not([class*="ss-"]){
  background:var(--mb-surface);
  color:#c9d1d9;
  border:1px solid var(--mb-border);
  border-radius:4px;
  padding:.08em .34em;
  font-size:.92em;
}

/* --- 4. Track under the protein widget ----------------------------------- */
/* Shares the caption's 64ch column so player, caption and art stay on one
   axis. Native <audio> chrome is UA-drawn and can't be fully themed; the
   filter nudges the light default control strip toward the dark page. */
.ppi-audio{
  width:64ch;
  max-width:100%;
  /* Sits well clear of the caption above so the two read as separate
     elements rather than one crowded stack. */
  margin:2.25rem auto 0;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.ppi-audio audio{
  width:100%;
  height:34px;
  display:block;
  border-radius:6px;
  filter:invert(0.88) hue-rotate(180deg) saturate(0.55) contrast(0.95);
}
.ppi-audio-label{
  font-family:var(--mb-mono);
  font-size:.68rem;
  letter-spacing:.06em;
  color:var(--mb-faint);
}

/* --- 5. Language switcher (bottom of the sidebar nav) --------------------- */
/* famfamfam flag PNGs are 16x11 pixel art, so they must never be smoothed or
   scaled off their native size; pixelated keeps the edges crisp on HiDPI. */
.lang-switch{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:1.1rem;
  margin:0;
  /* Pinned to the bottom-left of the viewport rather than left sitting in the
     nav flow, so it stays put and reachable however far the page is scrolled.
     Offsets reuse the sidebar's own padding token so it lines up with the
     nav items above it. */
  position:fixed;
  left:var(--wp--preset--spacing--60, 1.5rem);
  bottom:var(--wp--preset--spacing--60, 1.5rem);
  z-index:20;
}

/* Under the theme's breakpoint the sidebar collapses into normal document
   flow; a pinned switcher would then sit on top of the content, so let it
   flow with everything else. */
@media (max-width:781px){
  .lang-switch{
    position:static;
    margin-top:1.75rem;
  }
}
.lang-switch .lang-opt{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--mb-mono);
  font-size:.78rem;
  letter-spacing:.04em;
  line-height:1;
  text-decoration:none;
  color:var(--mb-faint);
  padding:.2rem 0;
}
.lang-switch .lang-opt:hover,
.lang-switch .lang-opt:focus-visible{
  color:var(--mb-text);
  text-decoration:none;
}
.lang-switch .lang-opt.is-active{
  color:var(--mb-heading);
}
.lang-switch .lang-opt img{
  width:16px;
  height:11px;
  flex:none;
  display:block;
  image-rendering:pixelated;
  /* Dim the inactive flags so the current language reads as selected. */
  opacity:.55;
}
.lang-switch .lang-opt.is-active img,
.lang-switch .lang-opt:hover img{
  opacity:1;
}