/**
 * ACE Navigation
 *
 * The header: the page you are on, in the lighter teal the other ACE pages
 * use for text on dark (7:1 here; the palette's own teal is under 4:1).
 *
 * The phone bar, after the Facebook app's: every tab an icon over a short
 * label; the tabs you are not on drawn in outline and grey, the one you are
 * on filled, in teal, with a short bar over it; your own picture on the
 * Dashboard tab, ringed when you are there. A tap presses the icon in; a
 * new page pops its tab's icon up. Only on phones, where the theme shows
 * its bar (768px and narrower).
 */

/* ---------------------------------------------------------------- header */

/* Only this plugin's own list: a menu built in Appearance > Menus is left
   to look however the theme draws it. */
.site-header .main-nav .acn-menu a[aria-current="page"] { color: #61b6b1; }
@supports (color: color-mix(in srgb, red 50%, white)) {
  .site-header .main-nav .acn-menu a[aria-current="page"] { color: color-mix(in srgb, var(--color-primary, #008a81) 62%, #fff); }
}

/* The header ends in a button, as an app's top bar does -- the same button
   the homepage and All Courses use: Login filled in teal for a visitor
   (white on it, 5.4:1); a student's own picture and Dashboard, outlined. */
.site-header .main-nav .acn-menu .acn-cta {
  --acn-fill: #007870;
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 18px 0 15px; border-radius: 10px; border: 1px solid transparent;
  font-weight: 600; font-size: .92rem; line-height: 1; white-space: nowrap;
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}
@supports (color: color-mix(in srgb, red 50%, white)) {
  .site-header .main-nav .acn-menu .acn-cta { --acn-fill: color-mix(in srgb, var(--color-primary, #008a81) 87%, #000); }
}
.site-header .main-nav .acn-menu .acn-cta svg { width: 18px; height: 18px; flex: none; }
.site-header .main-nav .acn-menu .acn-cta:hover { transform: translateY(-1px); }
.site-header .main-nav .acn-menu .acn-cta:active { transform: translateY(0) scale(.98); }
.site-header .main-nav .acn-menu .acn-cta:focus-visible { outline: 2px solid #61b6b1; outline-offset: 3px; }

.site-header .main-nav .acn-menu .acn-cta.is-login,
.site-header .main-nav .acn-menu .acn-cta.is-login:hover,
.site-header .main-nav .acn-menu .acn-cta.is-login[aria-current="page"] {
  background: var(--acn-fill); color: #fff;
  box-shadow: 0 8px 22px rgba(var(--ace-primary-rgb, 0, 138, 129), .3), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.site-header .main-nav .acn-menu .acn-cta.is-login:hover {
  box-shadow: 0 12px 30px rgba(var(--ace-primary-rgb, 0, 138, 129), .42), inset 0 1px 0 rgba(255, 255, 255, .2);
}

.site-header .main-nav .acn-menu .acn-cta.is-account {
  padding: 0 16px 0 5px;
  background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .14);
  color: var(--color-heading, #f5f4ef);
}
.site-header .main-nav .acn-menu .acn-cta.is-account:hover {
  background: rgba(var(--ace-primary-rgb, 0, 138, 129), .1); border-color: rgba(var(--ace-primary-rgb, 0, 138, 129), .6);
  color: var(--color-heading, #f5f4ef);
}
.site-header .main-nav .acn-menu .acn-cta.is-account svg { margin-left: 8px; }
.site-header .main-nav .acn-menu .acn-cta .acn-avatar {
  display: block; width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16);
}

@media (prefers-reduced-motion: reduce) {
  .site-header .main-nav .acn-menu .acn-cta { transition: none; }
  .site-header .main-nav .acn-menu .acn-cta:hover, .site-header .main-nav .acn-menu .acn-cta:active { transform: none; }
}

/* --------------------------------------------------------------- tab bar */

.acn-tabbar { display: none; }

@media (max-width: 768px) {
  .acn-tabbar {
    --acn-on: #61b6b1;                           /* the teal, lightened for text on dark */
    --acn-off: rgba(232, 230, 220, .64);         /* 6:1 on the bar */
    --acn-solid: var(--color-secondary, #1a1918); /* the bar, and the cut-outs in the filled icons */
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
    display: flex; align-items: stretch;
    padding: 0 max(4px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-left));
    background: var(--acn-solid);
    border-top: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 -12px 32px rgba(0, 0, 0, .28);
    font-family: var(--font-body, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  }
  @supports (color: color-mix(in srgb, red 50%, white)) {
    .acn-tabbar { --acn-on: color-mix(in srgb, var(--color-primary, #008a81) 62%, #fff); }
  }

  .acn-tab {
    position: relative; flex: 1 1 0; min-width: 0; height: 56px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 5px 2px 4px;
    color: var(--acn-off); text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    transition: color .15s ease;
  }
  .acn-tab:focus-visible { outline: 2px solid var(--acn-on); outline-offset: -5px; border-radius: 14px; }

  .acn-ico { display: grid; place-items: center; width: 28px; height: 28px; transition: transform .12s ease; }
  .acn-ico > svg { grid-area: 1 / 1; width: 25px; height: 25px; }
  .acn-fill { display: none; }

  .acn-label {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 11px; line-height: 13px; font-weight: 500; letter-spacing: .01em;
  }

  /* The tab you are on: filled, teal, a bar above it. */
  .acn-tab[aria-current="page"] { color: var(--acn-on); }
  .acn-tab[aria-current="page"] .acn-line { display: none; }
  .acn-tab[aria-current="page"] .acn-fill { display: block; }
  .acn-tab[aria-current="page"] .acn-label { font-weight: 600; }
  .acn-tab[aria-current="page"]::before {
    content: ""; position: absolute; top: -1px; left: 50%;
    width: 40px; height: 3px; margin-left: -20px; border-radius: 0 0 3px 3px;
    background: var(--acn-on);
  }
  .acn-tabbar .acn-cut { fill: var(--acn-solid); stroke: var(--acn-solid); }
  .acn-tabbar g.acn-cut { stroke: none; }

  /* Your picture on the Dashboard tab, ringed when you are there. */
  .acn-ico.is-avatar img {
    display: block; width: 27px; height: 27px; border-radius: 50%; object-fit: cover;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .16);
  }
  .acn-tab[aria-current="page"] .acn-ico.is-avatar img { box-shadow: 0 0 0 2px var(--acn-solid), 0 0 0 4px var(--acn-on); }

  /* A tap presses the icon in. */
  .acn-tab:active .acn-ico { transform: scale(.86); }
  @media (hover: hover) {
    .acn-tab:hover { color: var(--color-text, #e8e6dc); }
    .acn-tab[aria-current="page"]:hover { color: var(--acn-on); }
  }

  /* A new page pops its tab's icon up, and draws the bar out. */
  @media (prefers-reduced-motion: no-preference) {
    .acn-tab[aria-current="page"] .acn-ico { animation: acn-pop .42s cubic-bezier(.3, 1.5, .5, 1) backwards; }
    .acn-tab[aria-current="page"]::before { animation: acn-bar .32s cubic-bezier(.2, .8, .2, 1) .05s backwards; }
  }
  @media (prefers-reduced-motion: reduce) {
    .acn-tab, .acn-ico { transition: none; }
  }
}

@keyframes acn-pop { from { transform: scale(.72); } to { transform: scale(1); } }
@keyframes acn-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }