/* ============================= */
/*        COLOR VARIABLES        */
/* ============================= */
:root {
  --color-text-default: #fff;
  --color-text-hover: #000;
  --color-border-light: #f0f0f0;

  --color-toggle-bg: #666;
  --color-toggle-text: #fff;

  --color-tier1-bg: #002626;
  --color-tier1-text: #fff;
  --color-tier1-hover-bg: #F0E68C;
  --color-tier1-hover-text: #000;

  --color-home-bg: #00FA9A;
  --color-home-text: #000;
  --color-home-hover-bg: orange;
  --color-home-hover-text: #000;

  --color-tier2-bg: #002626;
  --color-tier2-text: #fff;
  --color-tier2-border: #F0E68C;
  --color-tier2-hover-bg: #F0E68C;
  --color-tier2-hover-text: #000;

  --color-tier3-bg: #002626;
  --color-tier3-text: #fff;
  --color-tier3-border: #F0E68C;
  --color-tier3-hover-bg: #F0E68C;
  --color-tier3-hover-text: #000;

  --color-link-border: #F0E68C; /* unified border for vertical links */
}

body {
  padding-top: 80px;
}

/* ============================= */
/*            LOGO               */
/* ============================= */
.logo {
  position: fixed;
  top: 20px;
  left: 20px;
}

/* ============================= */
/*       DROPDOWNS / MENU        */
/* ============================= */
.dropdowns {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: fit-content;
  margin: 0 auto;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  z-index: 1000;
}

.dropdowns nav,
.dropdowns ul,
.dropdowns li,
.dropdowns a {
  margin: 0;
  padding: 0;
}

.dropdowns a {
  text-decoration: none;
}

/* ============================= */
/*        NAV CONTAINER          */
/* ============================= */
.nav {
  list-style: none;
  background-color: var(--color-tier1-bg);
  border: 1px solid var(--color-border-light);
}

.nav:before,
.nav:after {
  content: " ";
  display: table;
}

.nav:after {
  clear: both;
}

.nav a {
  font-size: 1.1em;
}

/* ============================= */
/*        TOP-LEVEL LINKS        */
/* ============================= */
.nav > li {
  float: left;
  position: relative;
}

/* first-tier parent links */
.nav > li > a.parent {
  display: flex;
  align-items: center;
  line-height: 40px;
  padding: 0 15px;
  padding-right: 35px; /* space for arrow */
  box-sizing: border-box;
  color: var(--color-tier1-text);
  background-color: var(--color-tier1-bg);
  position: relative;
}

/* first-tier non-parent links (Home) */
.nav > li > a:not(.parent) {
  display: flex;
  align-items: center; /* vertically center SVG/text */
  line-height: 40px;
  padding: 0 15px;
  padding-right: 15px;
  box-sizing: border-box;
  color: var(--color-tier1-text);
  background-color: var(--color-tier1-bg);
  border: none; /* remove any separators for horizontal top-tier links */
}

/* hover for first-tier */
.nav > li > a:hover {
  background-color: var(--color-tier1-hover-bg);
  color: var(--color-tier1-hover-text);
}

/* home */
.nav > li:first-child > a {
  background-color: var(--color-home-bg);
  color: var(--color-home-text);
  font-weight: 700;
}

.nav > li:first-child > a:hover {
  background-color: var(--color-home-hover-bg);
  color: var(--color-home-hover-text);
}

/* HOME SVG styling */
.nav > li:first-child > a svg {
  width: 28px;
  height: 28px;
  margin-right: 8px;
  flex-shrink: 0;   /* prevent shrinking inside flex container */
  vertical-align: middle;
}

/* SVG fill colors */
.cls-1 { fill: dodgerblue; }
.cls-2 { fill: #fff; }

/* ============================= */
/*        SUBMENU BASE           */
/* ============================= */
.nav ul {
  list-style: none;
  width: 12em;
  position: absolute;
  left: -9999px;
  top: 100%;
}

.nav > li.hover > ul {
  left: 0;
}

/* ============================= */
/*        SECOND TIER            */
/* ============================= */
.nav li li {
  position: relative;
}

.nav li li > a {
  display: block;
  padding: 10px 15px;
  background-color: var(--color-tier2-bg);
  color: var(--color-tier2-text);
  border-bottom: 1px solid var(--color-link-border); /* only vertical links */
  position: relative;
  z-index: 100;
}

.nav li li a:hover {
  background-color: var(--color-tier2-hover-bg);
  color: var(--color-tier2-hover-text);
}

/* second-tier submenu positioning */
.nav li li ul {
  position: absolute;
  top: 0;
  left: -9999px;
}

.nav li li.hover > ul {
  left: 100%;
}

/* ============================= */
/*        THIRD TIER             */
/* ============================= */
.nav li li li a {
  display: block;
  padding: 10px 15px;
  background-color: var(--color-tier3-bg);
  color: var(--color-tier3-text);
  border-bottom: 1px solid var(--color-link-border); /* only vertical links */
  z-index: 200;
}

.nav li li li a:hover {
  background-color: var(--color-tier3-hover-bg);
  color: var(--color-tier3-hover-text);
}

/* ============================= */
/*        SVG ARROWS (::after)   */
/* ============================= */
.nav > li > a.parent::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background-image: url('data:image/svg+xml,<svg width="24" height="24" fill="darkgray" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M735.136 405.28 512 636 288.864 405.28Z"/></svg>');
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

/* ============================= */
/*        TOGGLE MENU            */
/* ============================= */
button.toggleMenu {
  display: none;
  width: 100%;
  height: 40px;
  font-size: 25px;
  line-height: 40px;
  text-align: center;
  background-color: var(--color-toggle-bg);
  color: var(--color-toggle-text);
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* ============================= */
/*        SMALL DESKTOP          */
/* ============================= */
@media (max-width: 1500px) {
  .logo {
    display: none;
  }
}

/* ============================= */
/*            TABLET             */
/* ============================= */
@media (max-width: 1325px) {
  :root {
    --color-tier1-bg: #002626;
    --color-tier2-bg: blue;
    --color-tier3-bg: green;
  }

  .dropdowns {
    width: 100%;
    max-width: 250px;
  }

  button.toggleMenu {
    display: block;
  }

  .nav {
    max-height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .nav > li {
    float: none;
  }

  .nav ul {
    position: absolute;
    left: -9999px;
    width: 100%;
  }

  .nav > li.hover > ul,
  .nav li li.hover > ul {
    position: relative;
    left: 0;
  }

  /* Remove desktop ::after arrows */
  .nav a.parent::after {
    content: none !important;
  }

  /* MOBILE SVG ARROWS */
  .nav > li > a.parent {
    background-image: url('data:image/svg+xml,<svg width="24" height="24" fill="darkgray" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M735.136 405.28 512 636 288.864 405.28Z"/></svg>');
    background-repeat: no-repeat;
    background-position: 88% center;
    padding-right: 40px;
  }

  .nav li li > a.parent {
    background-image: url('data:image/svg+xml,<svg width="24" height="24" fill="darkgray" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M512 636 288.864 405.28 735.136 405.28Z"/></svg>');
    background-repeat: no-repeat;
    background-position: 93% center;
    padding-right: 35px;
  }
}

/* ============================= */
/*           PHONE               */
/* ============================= */
@media (max-width: 660px) {

  /* hide everything */
  .nav > li {
    display: none;
  }

  /* show ONLY these */
  .nav > li.home,
  .nav > li.search,
  .nav > li.blooms,
  .nav > li.categories,
  .nav > li.habitat,
  .nav > li.colors {
    display: block;
  }

  /* hide ALL "What's this?" items */
  .nav li.whats-this {
    display: none !important;
  }

  /* hide THIRD-level menus */
  .nav ul ul {
    display: none !important;
  }

  /* hide SVG arrows on SECOND-level parents */
  .nav li li > .parent {
    background-image: none !important;
    padding-right: 15px;
  }
}