/* ==========================================================================
   Learn Spring Boot 4 – sidebar refinements on top of the Relearn theme.
   Goals: roomier navigation, clearer hierarchy, a pixel-art sprout as the logo.
   ========================================================================== */

:root {
  --spring-accent: #8ecb54;      /* readable on the dark sidebar of every variant */
  --spring-accent-dim: rgba(142, 203, 84, .14);
  --spring-leaf: #6db33f;
  --spring-leaf-light: #a8dd76;
  --spring-stem: #4b7f2c;
  --spring-soil: #8a6a4f;

  /* 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-sprout {
  width: 3.1rem;
  height: 3.1rem;
  display: block;
}

/* theme fill rules use id selectors, so ours need the id too */
#R-logo .pixel-sprout .sprout-leaf       rect { fill: var(--spring-leaf); }
#R-logo .pixel-sprout .sprout-leaf-small rect { fill: var(--spring-leaf); }
#R-logo .pixel-sprout .sprout-vein       rect { fill: var(--spring-leaf-light); opacity: .85; }
#R-logo .pixel-sprout .sprout-stem       rect { fill: var(--spring-stem); }
#R-logo .pixel-sprout .sprout-soil       rect { fill: var(--spring-soil); }

#R-logo:hover .pixel-sprout .sprout-vein rect { opacity: 1; }

/* theme sets 2em here, which wraps the title next to the sprout */
#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(--spring-accent-dim);
  border-inline-start-color: var(--spring-accent);
  color: var(--spring-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(--spring-accent); }