/* ==========================================================================
   Learn Java 25 – sidebar refinements on top of the Relearn theme.
   Goals: roomier navigation, clearer hierarchy, a pixel-art cup as the logo.
   ========================================================================== */

:root {
  --java-accent: #ff9d3d;      /* readable on the dark sidebar of every variant */
  --java-accent-dim: rgba(255, 157, 61, .13);
  --java-brew: #7d4a24;
  --java-shell: #7fa9c6;
  --java-porcelain: #eef3f7;

  /* a little more room for two-line chapter titles */
  --INTERNAL-MENU-L-width: 19rem;
}

/* ------------------------------------------------------------ typography ---- */

/* The theme renders Roboto Flex at "wdth" 118 – an 18 % widened instance of the
   variable font – with a lowered GRAD and figures at "YTFI" 710. That is what
   makes the text look stretched. Back to the font's natural proportions:
   width 100, normal grade, default figure height. */
:root {
  --MAIN-font-variation-settings: "wdth" 100, "GRAD" 0, "YTFI" 738;
  --MAIN-TITLES-font-variation-settings: "wdth" 100, "GRAD" 0, "YTFI" 738;
  --MAIN-TITLES-H1-font-variation-settings: "wdth" 100, "GRAD" 0, "YTFI" 738;
  --MAIN-TITLES-H4-font-variation-settings: "wdth" 100, "GRAD" 0, "YTFI" 738;

  /* 300 was chosen to compensate for the negative grade above */
  --MAIN-font-weight: 400;
  --MAIN-TITLES-H1-font-weight: 300;

  /* the extra tracking added to the stretched look */
  --MAIN-letter-spacing: 0;
}

/* --------------------------------------------------------------- logo ---- */

#R-logo.R-default {
  align-items: center;
  column-gap: .8rem;
  justify-content: flex-start;
  padding-inline: 1rem;
  margin-block: 1.35rem .5rem;
}

/* the theme hides logo images unless configured per variant – we always want ours */
#R-logo.R-default .logo-image {
  display: flex;
  flex: none;
}

#R-logo .pixel-cup {
  width: 3.1rem;
  height: 3.1rem;
  display: block;
}

/* theme fill rules use id selectors, so ours need the id too */
#R-logo .pixel-cup .cup-steam rect { fill: var(--java-accent); opacity: .85; }
#R-logo .pixel-cup .cup-shell rect { fill: var(--java-shell); }
#R-logo .pixel-cup .cup-body  rect { fill: var(--java-porcelain); }
#R-logo .pixel-cup .cup-brew  rect { fill: var(--java-brew); }

#R-logo:hover .pixel-cup .cup-steam rect { opacity: 1; }

/* theme sets 2em here, which wraps the title next to the cup */
#R-logo.R-default .logo-title {
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .01em;
  text-wrap: nowrap;
  word-break: normal;
}

/* ------------------------------------------------------------ spacing ---- */

#R-header-wrapper > search { margin-block: .8rem 1rem; }

#R-sidebar { line-height: 1.6; }

#R-sidebar .R-shortcutmenu-main > ul { margin-top: 1.4rem; }

/* every navigation entry gets vertical breathing room and a hover rail */
#R-sidebar .R-sidebarmenu a.padding {
  padding-block: .42rem;
  padding-inline-start: 1rem;
  border-inline-start: 3px solid transparent;
  transition: background-color .15s ease, border-color .15s ease;
}

#R-sidebar .R-sidebarmenu a.padding:hover {
  background-color: rgba(255, 255, 255, .06);
}

/* top level = the four course sections */
#R-sidebar .R-shortcutmenu-main > ul > li > a.padding {
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: .012em;
  padding-block: .58rem;
}

/* nested chapters: indented, slightly smaller, still airy */
#R-sidebar .R-shortcutmenu-main ul ul a.padding {
  font-size: .94rem;
  padding-inline-start: 2.1rem;
}

#R-sidebar .R-shortcutmenu-main ul ul {
  margin-block: .15rem .5rem;
}

/* current page */
#R-sidebar .R-sidebarmenu li.active > a.padding {
  background-color: var(--java-accent-dim);
  border-inline-start-color: var(--java-accent);
  color: var(--java-accent);
  font-weight: 600;
}

/* expand/collapse chevron lines up with the roomier rows */
#R-sidebar .collapsible-menu label {
  padding-block: .58rem;
}

/* section heading in the "More" block */
#R-sidebar .nav-title {
  font-size: 1.45rem;
  letter-spacing: .03em;
  margin-block: 1.5rem .25rem;
  opacity: .75;
}

#R-sidebar .R-shortcutmenu-homelinks a.padding,
#R-sidebar .R-shortcutmenu-headercontrols a.padding {
  padding-block: .38rem;
}

#R-sidebar hr { margin-top: 1.25rem; opacity: .5; }

/* --------------------------------------------------------------- misc ---- */

/* the ★ marking exercise sections in every chapter */
#R-body h2 > .exercise-star { color: var(--java-accent); }