/*
  Site chrome (page column, nav bar + footer) for the "Editorial Field Guide" design - loaded by
  Views/Shared/_Layout.cshtml, _SpeciesLayout.cshtml and _HomeLayout.cshtml. Markup lives in the
  _SiteNav and _SiteFooter partials. Page-specific styles are in pages.css / content.css / home.css.
*/

/*
  Page column: the whole 1440px column (nav, content and footer alike) is painted paper against the
  darker body colour outside it, exactly as in the design export (.page{max-width:1440px}).
*/
.page.ed {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: var(--soa-page-width);
  margin-inline: auto;
  background: var(--soa-bg-main);
  color: var(--ink);
}

.page.ed > main {
  flex: 1 0 auto;
}

/*
  Every band keeps its background on the outer element and puts its content in a .container-fluid;
  because the column itself is capped, these fill it. width:100% is required: direct children of
  the flex column would otherwise shrink to fit.
*/
.page.ed .container-fluid,
.page.ed .pb-hero,
.page.ed > header,
.page.ed .gp-band,
.page.ed .gp-strip,
.page.ed .pb-strip,
.page.ed .ed-foot {
  width: 100%;
}

/* site.css colours every h1 green; the band and hero titles sit on green / a photo, so force white. */
.gp-title,
.pb-title {
  color: #fff;
}

/* Top bar: paper, ink wordmark, small mixed-case links with a green rule on hover / current page. */
.ed-top {
  background: var(--soa-bg-main);
  border-bottom: 1px solid var(--line);
  padding-top: 14px;
  padding-bottom: 14px;
}

.ed-top .navbar-brand {
  color: var(--ink);
}

.ed-logo {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ed-wordmark {
  font-family: var(--soa-font-heading);
  /* Scales with the viewport below ~570px so brand + toggler fit one row on phones (down to 320px). */
  font-size: clamp(14px, 4.9vw, 28px);
  font-weight: bold;
  letter-spacing: 0.2px;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}

.ed-wordmark em {
  font-style: italic;
  color: var(--ink-soft);
}

.ed-top .nav-link {
  color: var(--ink-soft);
  font-size: 14px;
  letter-spacing: 0.02em;
  border-bottom: 1.5px solid transparent;
}

.ed-top .nav-link:hover,
.ed-top .nav-link:focus-visible,
.ed-top .nav-link.active {
  color: var(--ink);
  border-color: var(--green-500);
}

/* Phylum links (vwSiteNav.CssClass = chlorophyta / ochrophyta / rhodophyta): a colour dot before the
   title, matching the home page's colour key, and the hover rule takes the phylum's colour too. */
.ed-phylum {
  --phylum: var(--green-500);
}
.ed-phylum.chlorophyta { --phylum: var(--green-500); }
.ed-phylum.ochrophyta  { --phylum: var(--brown-500); }
.ed-phylum.rhodophyta  { --phylum: var(--red-500); }

.ed-phylum::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--phylum);
  margin-right: 7px;
  vertical-align: 1px;
}

.ed-top .nav-link.ed-phylum:hover,
.ed-top .nav-link.ed-phylum:focus-visible,
.ed-top .nav-link.ed-phylum.active {
  border-color: var(--phylum);
}

/* The "spacer" row of vwSiteNav: a kelp frond swaying between the phyla and the site pages.
   In the expanded bar it stands upright between hairlines; in the collapsed (mobile) menu it lies
   on its side as a rule across the list. */
.ed-nav-spacer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 0;
  gap: 10px;
  margin-top:-10px;
  margin-left:-15px;
}

.ed-nav-spacer::before,
.ed-nav-spacer::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
}

.ed-frond {
  flex: 0 0 auto;
  width:25px;
}

@media (min-width: 992px) {
  .ed-nav-spacer {
    flex-direction: column;
    padding: 0 6px;
    gap: 4px;
    align-self: stretch;
  }

  .ed-nav-spacer::before,
  .ed-nav-spacer::after {
    width: 1px;
    height: auto;
    flex: 1 1 auto;
  }
}

.ed-top .navbar-toggler {
  border-color: var(--line);
}

/* Dropdown for a NavGroupingTitle run (e.g. "The Catalog"): paper panel, hairline border, items in
   the bar's type; the current page's item and its toggle are marked .active by js/nav.js. */
.ed-top .dropdown-menu {
  --bs-dropdown-bg: var(--soa-bg-main);
  --bs-dropdown-border-color: var(--line);
  --bs-dropdown-border-radius: 4px;
  --bs-dropdown-link-color: var(--ink-soft);
  --bs-dropdown-link-hover-color: var(--ink);
  --bs-dropdown-link-hover-bg: var(--green-100);
  --bs-dropdown-link-active-color: var(--ink);
  --bs-dropdown-link-active-bg: var(--green-100);
  --bs-dropdown-padding-y: 6px;
  --bs-dropdown-item-padding-y: 7px;
  --bs-dropdown-item-padding-x: 16px;
  font-size: 14px;
  letter-spacing: 0.02em;
  margin-top: 8px;
  box-shadow: 0 8px 24px rgba(33, 38, 31, 0.08);
}

.ed-top .dropdown-toggle::after {
  vertical-align: 0.18em;
  opacity: 0.6;
}

@media (max-width: 991.98px) {
  /* In the collapsed menu the dropdown is inline: no panel, items indented under their title. */
  .ed-top .dropdown-menu {
    border: 0;
    box-shadow: none;
    margin-top: 0;
    padding-left: 12px;
  }
}

/* Nav search (_SiteNav): a hairline pill in the bar's type. Shown (via Bootstrap display classes)
   in the collapsed menu, full width, and inline from 1200px; 992-1199px has no room, so the
   .ed-navsearch-link magnifier stands in. The inline width tracks the measured free space
   (~150px at 1200, ~230px at 1280) so the links never wrap. */
.ed-navsearch {
  align-items: center;
  margin: 12px 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
}

.ed-navsearch:focus-within {
  border-color: var(--green-500);
  box-shadow: 0 0 0 3px rgba(79, 138, 91, 0.18);
}

.ed-navsearch input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 6px 4px 6px 14px;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.ed-navsearch input::placeholder {
  color: var(--ink-soft);
}

.ed-navsearch button {
  display: flex;
  align-items: center;
  border: 0;
  background: transparent;
  padding: 6px 12px 6px 6px;
  color: var(--ink-soft);
}

.ed-navsearch button:hover,
.ed-navsearch button:focus-visible {
  color: var(--ink);
}

/* Kept slim: at 992-1199 the links are already near full width ("Habitat Classifications" wraps
   below ~1080px with or without it). */
.ed-navsearch-link {
  align-items: center;
  padding: 4px;
  color: var(--ink-soft);
  border-bottom: 1.5px solid transparent;
}

.ed-navsearch-link:hover,
.ed-navsearch-link:focus-visible {
  color: var(--ink);
  border-color: var(--green-500);
}

@media (min-width: 1200px) {
  .ed-navsearch {
    margin: 0;
    width: clamp(120px, calc(100vw - 1080px), 220px);
  }
}

/* Footer: on the same paper as the page, separated by a top rule. */
.ed-foot {
  margin-top: clamp(48px, 6vw, 74px);
  border-top: 1px solid var(--line);
  padding-top: 46px;
  padding-bottom: 52px;
  color: var(--ink);
}

.ed-foot-spon .lbl,
.ed-foot-col h4 {
  font-family: var(--soa-font-body);
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
  margin: 0 0 12px;
}

.ed-foot-spon .rcac {
  font-family: var(--soa-font-heading);
  font-size: 20px;
  color: var(--ink);
  margin: 0;
}

.ed-foot-spon p {
  max-width: 300px;
  font-size: 13.5px;
  color: var(--ink-soft);
  margin: 8px 0 0;
}

.ed-foot a {
  display: block;
  font-size: 14.5px;
  color: var(--ink);
  padding: 4px 0;
  text-decoration: none;
}

.ed-foot a:hover,
.ed-foot a:focus-visible {
  color: var(--green-700);
  text-decoration: none;
}

/* Species hero (see _SpeciesLayout): photo fills the band; without a photo, a solid band. */
.pb-hero .photo {
  width: 100%;
  object-fit: cover;
  display: block;
}

.pb-hero--nophoto {
  background: var(--green-700);
  min-height: 15rem;
}

.pb-hero--nophoto .pb-hero-cap {
  position: static;
  padding-top: 3rem;
}