/* greyhoundapi.com: brand and nav look (zip 201), loaded after site.css.

   WHY. The nav read as fuzzy: a hatched block in the strip across the top that
   shimmered on screen, a heavy condensed wordmark at a small size, a divider
   between every link, and three different fonts in one bar. This keeps the
   same links, calendar and button and changes only how they look:
   the six trap colours become the mark beside the name (the strip goes),
   one font in the bar, one weight for the links, no dividers, the page you are
   on underlined in green, and the calendar as a soft chip with a date tile.

   The mark is drawn by CSS, so every .brand-mark on the site (nav, footer and
   anywhere else) changes with it and no markup has to carry it. */

:root{--strip-h:0px}
.nav{top:0;box-shadow:none;border-bottom:1px solid #E7E5DF;background:#fff}

/* the mark: six trap colours, 3 x 2 */
.brand-mark{width:31px;height:20px;border:0;border-radius:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='20' viewBox='0 0 31 20'%3E%3Crect x='0' y='0' width='9' height='9' rx='2' fill='%23C8332B'/%3E%3Crect x='11' y='0' width='9' height='9' rx='2' fill='%231F5FBF'/%3E%3Crect x='22.5' y='0.5' width='8' height='8' rx='1.6' fill='%23FFFFFF' stroke='%23CFCDC6' stroke-width='1'/%3E%3Crect x='0' y='11' width='9' height='9' rx='2' fill='%2316110F'/%3E%3Crect x='11' y='11' width='9' height='9' rx='2' fill='%23E17A2D'/%3E%3Crect x='22' y='11' width='9' height='9' rx='2' fill='%2316110F'/%3E%3Crect x='24.5' y='13.5' width='4' height='4' rx='1' fill='none' stroke='%23FFFFFF' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat center/31px 20px;flex:0 0 31px}
.brand-mark::before,.brand-mark::after{content:none;display:none}
.foot .brand-mark{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='20' viewBox='0 0 31 20'%3E%3Crect x='0' y='0' width='9' height='9' rx='2' fill='%23C8332B'/%3E%3Crect x='11' y='0' width='9' height='9' rx='2' fill='%231F5FBF'/%3E%3Crect x='22' y='0' width='9' height='9' rx='2' fill='%23FFFFFF'/%3E%3Crect x='0.5' y='11.5' width='8' height='8' rx='1.6' fill='%2316110F' stroke='%234C5C54' stroke-width='1'/%3E%3Crect x='11' y='11' width='9' height='9' rx='2' fill='%23E17A2D'/%3E%3Crect x='22.5' y='11.5' width='8' height='8' rx='1.6' fill='%2316110F' stroke='%234C5C54' stroke-width='1'/%3E%3Crect x='24.5' y='13.5' width='4' height='4' rx='1' fill='none' stroke='%23FFFFFF' stroke-width='1.2'/%3E%3C/svg%3E")}

/* the wordmark: "Greyhound" and "API", one font, no chip */
.brand{font-family:'Inter Tight',var(--body);font-size:18px;text-transform:none;letter-spacing:-.015em;gap:11px;color:#16201B}
.brand .bd-w{font-weight:500}
.brand .bd-s,.fb-name .bd-s{background:none;padding:0;border-radius:0;font-size:1em;letter-spacing:-.015em;font-weight:600;color:var(--green,#0E5B41);margin-left:4px}
.foot-brand .fb-name{font-family:'Inter Tight',var(--body);font-size:19px;text-transform:none;letter-spacing:-.015em}
.fb-name .bd-w{font-weight:500}
.fb-name .bd-s{color:#7FD4AE}

/* the bar on wide screens; below 1120px site.css's burger menu takes over */
@media (min-width:1121px){
  .nav-in{min-height:64px}
  .nav-menu{gap:2px}
  .nav-menu a{font-family:'Inter Tight',var(--body);font-weight:500;font-size:14.5px;color:#4A544F;border-left:0!important;padding:0 10px;height:36px;display:inline-flex;align-items:center;border-radius:8px;transition:background .15s,color .15s}
  .nav-menu a:hover{background:#F1F0EB;color:#16201B}
  /* Faint separators between the page links (zip 202), not before the
     calendar or the button. */
  .nav-menu a{position:relative}
  .nav-menu a + a:not(.nav-cal):not(.cta-ico)::before{content:"";position:absolute;left:-2px;top:11px;bottom:11px;width:1px;background:#E6E4DD}
  .nav-menu a.on{color:#16201B;border-radius:0;box-shadow:inset 0 -2px 0 var(--green,#0E5B41)}
  .nav-menu a.on:hover{background:none}

  /* calendar: a soft chip with a date tile */
  .nav-menu a.nav-cal{height:38px;padding:0 12px 0 4px;margin-left:12px;gap:10px;border:0;border-radius:8px;background:#F1F0EB;box-shadow:none}
  .nav-menu a.nav-cal:hover{background:#E9E8E2}
  /* The date tile. site.css lays this out as a grid with the day pushed to the
     bottom row; here both lines sit together in the middle (zip 202). */
  .nav-cal-chip{width:30px;height:30px;border-radius:6px;background:#fff;color:#16201B;box-shadow:inset 0 0 0 1px #E2E0D9;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:0 0 1px;line-height:1;grid-template-rows:none}
  .nav-cal-chip i{font-style:normal;font-family:var(--mono);font-size:7.5px;letter-spacing:.08em;color:#C8332B;margin:0;padding:0;background:none;line-height:1;height:auto;align-self:center}
  .nav-cal-chip b{font-family:'Inter Tight',var(--body);font-size:14px;font-weight:600;line-height:1;margin:0;padding:0;height:auto;align-self:center}
  .nav-cal-tx{flex-direction:row;align-items:baseline;gap:6px;padding:0}
  .nav-cal-tx b{font-family:'Inter Tight',var(--body);font-size:13.5px;font-weight:500;color:#16201B}
  .nav-cal-tx span{font-family:'Inter Tight',var(--body);font-size:13.5px;color:#8A938E}

  /* the button */
  .nav-menu a.cta-ico{height:38px;min-width:132px;padding:0 16px;margin-left:10px;justify-content:center;border-radius:8px;box-shadow:none;color:#fff;font-weight:500;font-size:14px}
  .nav-menu a.cta-ico:hover{box-shadow:0 6px 16px -8px rgba(14,91,65,.6);background:var(--green,#0E5B41);filter:brightness(1.08)}
}

/* the burger menu keeps site.css's layout; only the type changes */
@media (max-width:1120px){
  .nav-menu a{font-family:'Inter Tight',var(--body);font-weight:500}
}