/* The homepage's plant-card ".row" sits directly inside <main>, not a
   ".container" -- Bootstrap's .row carries -15px left/right margins meant
   to be offset by a container's padding, and with no container there they
   push 15px past the right edge of the viewport. Desktop hides this (it's
   invisible against a wide screen), but on mobile it lets the whole page
   be dragged sideways. Clipping it here is simpler than restructuring the
   markup on every page that has this pattern. */
html, body {
  overflow-x: hidden;
}

.nav-link:hover {
  /*font-size:110%;*/
  /*color:white;*/
  
  /*text-transform:uppercase;*/
  border:inset;
  border-color:rgb(52,94,150);
  border-radius:5px;
}

.nav-link {
  /*margin:5px;*/
  /*flex-flow:wrap;*/
  /*padding:1px;*/
   border:inset;
  border-color:rgb(0,0,0,0);
  border-radius:5px;
}

#home {
}

/* The real constellationlogo.png is 339x82 -- much wider than the old
   exelonlogo.png (155x34) it replaced -- and nothing constrained its
   size, so it rendered oversized next to the mobile menu toggle. */
.navbar-brand.logo img {
  max-height: 42px;
  width: auto;
}

@media (max-width: 767px) {
  .navbar-brand.logo img {
    max-height: 30px;
  }
}

/* navbar-expand-lg switches to the collapsed/toggler layout below 992px.
   Bootstrap's container defaults to flex-wrap, so once the logo + toggler
   were too wide for one row the toggler dropped to its own line below the
   logo instead of sitting beside it. Shrinking the logo further is enough
   to let them share one row on its own -- do NOT force flex-wrap:nowrap on
   the container: Bootstrap relies on that wrap to let .navbar-collapse
   (flex-basis:100%) drop to its own full-width row when the menu is
   toggled open. With nowrap forced, the opened menu had nowhere to wrap
   to and got squeezed inline next to the toggler instead. */
@media (max-width: 991.98px) {
  .navbar-brand.logo img {
    max-height: 26px;
  }

  /* Right-align the Plants dropdown so it opens near the toggler/thumb
     side of the screen instead of Bootstrap's default left-aligned
     .dropdown-menu, which anchors flush to the left edge. */
  .portfolio-navbar .dropdown-menu {
    left: auto;
    right: 0;
  }

  /* Right-align the "Home" / "Plants" menu items themselves so the whole
     opened menu sits on the right side of the screen instead of flush
     against the left edge. */
  .portfolio-navbar .navbar-nav {
    align-items: flex-end;
  }
  .portfolio-navbar .nav-link,
  .portfolio-navbar .dropdown-toggle {
    text-align: right;
  }
}