/* The home page header, for pages that are not the home page.
   The rules live in programs/styles.css for the programs pages, which do not
   load styles.css. Info pages already load styles.css — the coverage strip,
   the account menu and the sign-in dialog come from there — so this file only
   adds the bar itself, unchanged from youthby.com. */
.home-header{position:sticky;top:0;z-index:60;border-bottom:1px solid var(--line);background:rgba(252,250,247,.92);-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px)}
.home-header .shell{max-width:1320px;width:100%;margin:0 auto;padding:0 clamp(22px,5vw,74px)}
.home-header .header-inner{height:80px;display:flex;align-items:center;gap:22px}
.home-header .wordmark{display:block;flex:none}
.home-header .wordmark img{width:158px;height:auto}
.home-header .main-nav{flex:1;display:flex;align-items:center;min-width:0}
.home-header .nav-list{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.home-header .nav-item{position:relative}
.home-header .nav-link{display:inline-flex;align-items:center;gap:7px;font-family:"DM Sans",sans-serif;font-size:15px;font-weight:600;color:var(--ink);background:none;border:0;padding:10px 10px;border-radius:8px;white-space:nowrap;text-decoration:none;transition:background-color .18s var(--ease),color .18s var(--ease)}
.home-header .nav-link:hover{background:var(--purple-tint);color:var(--purple)}
.home-header .nav-link[aria-current="page"]{color:var(--purple)}
.home-header .nav-utility{margin-left:auto;display:flex;align-items:center;gap:2px}
.home-header .nav-providers,.home-header .nav-calendar{font-size:15px;font-weight:600;color:var(--ink);text-decoration:none;padding:10px;border-radius:8px;white-space:nowrap}
.home-header .nav-providers:hover,.home-header .nav-calendar:hover{color:var(--purple)}
.home-header .nav-signin{padding:11px 20px;border-radius:10px;background:var(--purple);color:#fff;font-weight:700;font-size:15px;font-family:"DM Sans",system-ui,sans-serif;line-height:1;border:1px solid transparent;cursor:pointer;white-space:nowrap}
.home-header .nav-signin:hover{background:var(--deep)}
.home-header .nav-toggle{display:none;align-items:center;gap:9px;margin-left:auto;font-family:"DM Sans",sans-serif;font-size:14px;font-weight:700;color:var(--ink);background:none;border:1.5px solid var(--line);border-radius:9px;padding:10px 14px;cursor:pointer}
.home-header .nav-toggle-bars{display:grid;gap:4px}
.home-header .nav-toggle-bars i{display:block;width:18px;height:2px;border-radius:1px;background:currentColor}

/* The signed-in account control and its menu. */
.nav-account{position:relative}
@media (min-width:1121px){.nav-account{display:inline-flex;justify-content:flex-end;min-width:44px}}
.nav-account-button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;font:inherit;font-size:14px;font-weight:700;color:var(--ink);background:none;border:1px solid var(--line);border-radius:999px;padding:4px;cursor:pointer}
.nav-account-button:hover{border-color:#c9b3e0;background:var(--purple-tint)}
.nav-account-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;background:#F2EAFA;color:#5929A7;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex:none}
.nav-account-name{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-account-caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.6}
.nav-account-button::after{content:attr(data-name);position:absolute;top:calc(100% + 8px);right:0;z-index:75;background:var(--ink);color:#fff;font-size:12px;font-weight:600;padding:6px 10px;border-radius:8px;white-space:nowrap;opacity:0;visibility:hidden;transform:translateY(-3px);transition:opacity .15s,transform .15s,visibility .15s;pointer-events:none;box-shadow:0 8px 20px rgba(35,27,52,.25)}
.nav-account-button:hover::after,.nav-account-button:focus-visible::after{opacity:1;visibility:visible;transform:none}
.nav-account-button[aria-expanded="true"]::after{opacity:0;visibility:hidden}
.verified-mark{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:5px;color:var(--purple);flex:none;vertical-align:middle;transform:translateY(-1px)}
.verified-mark svg{width:100%;height:100%;display:block}
.nav-account-menu{position:absolute;right:0;top:calc(100% + 30px);z-index:70;width:280px;background:var(--white);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 60px -28px rgba(35,27,52,.55);padding:8px;text-align:left}
.nav-account-menu[hidden]{display:none}
.nav-account-head{padding:12px 12px 10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.nav-account-head strong{display:flex;align-items:center;font-size:15px}
.nav-account-head span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis}
.nav-account-stats{display:flex;gap:8px;margin-top:10px}
.nav-account-stat{flex:1;background:var(--tint);border-radius:10px;padding:7px 8px;text-align:center}
.nav-account-stat b{display:block;font-size:15px;color:var(--purple)}
.nav-account-stat small{display:block;font-size:10px;color:var(--muted);letter-spacing:.02em}
.nav-account-menu a,.nav-account-menu button.nav-account-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border-radius:9px;font:inherit;font-size:13.5px;font-weight:600;color:var(--ink);text-decoration:none;background:none;border:0;cursor:pointer;text-align:left}
.nav-account-menu a:hover,.nav-account-menu button.nav-account-item:hover{background:var(--purple-tint);color:var(--purple)}
.nav-account-menu .icon{width:17px;height:17px;flex:none;opacity:.75}
.nav-account-count{margin-left:auto;font-size:11.5px;font-weight:800;color:var(--purple);background:var(--purple-tint);border-radius:999px;padding:1px 7px}
.nav-account-sep{height:1px;background:var(--line);margin:6px 8px}
.nav-account-signout{color:#8a3b3b}
.nav-account-signout:hover{background:#fbeaea;color:#7a2f2f}

@media (max-width:1120px){
  /* A backdrop-filter makes the header the containing block for fixed
     descendants, so the drawer would be positioned from the header's top
     rather than the viewport's. Solid paper here keeps it on the screen. */
  .home-header{background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none}
  .home-header .nav-toggle{display:inline-flex}
  .home-header .main-nav{position:fixed;inset:80px 0 0 0;z-index:55;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);padding:14px clamp(22px,5vw,74px) 48px;overflow-y:auto;transform:translateX(100%);visibility:hidden;transition:transform .3s var(--ease),visibility .3s}
  .home-header .main-nav.is-open{transform:none;visibility:visible}
  .home-header .nav-list{flex-direction:column;align-items:stretch;gap:0}
  .home-header .nav-link{display:flex;width:100%;justify-content:space-between;font-size:18px;font-weight:600;padding:16px 2px;border-radius:0;border-bottom:1px solid var(--line)}
  /* One row spec for every way through the site: the five links, For
     Providers, and Saved. The list runs unbroken into the utility rows, so
     the separators are evenly spaced and no row ends on a half-finished
     line. The button is the only thing below it. */
  .home-header .nav-utility{margin:0;flex-direction:column;align-items:stretch;gap:0}
  .home-header .nav-providers,.home-header .nav-calendar,.home-header .nav-saved{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:600;padding:16px 2px;border-radius:0;border-bottom:1px solid var(--line)}
  .home-header .nav-saved::before{width:18px;height:18px}
  .home-header .nav-saved-count{margin-left:auto}
  .home-header .nav-signin{justify-content:center;margin-top:18px;padding:15px 20px;font-size:18px}
  .nav-account-button{justify-content:center;padding:6px;margin-top:8px}
  .nav-account-avatar{width:40px;height:40px;font-size:15px}
  .nav-account-menu{position:static;width:100%;box-shadow:none;border:1px solid var(--line);margin-top:8px}
}
@media (max-width:620px){
  .home-header .header-inner{height:64px;gap:12px}
  .home-header .wordmark img{width:132px}
  .home-header .main-nav{inset:64px 0 0 0}
}

/* One header, one set of boxes: the utility row must not change size between
   the homepage and the program pages. */
@media (min-width: 1121px) {
  .home-header .nav-providers, .home-header .nav-calendar {
    display: inline-flex; align-items: center; height: 44px; padding: 0 6px; line-height: 1;
  }
  .home-header .nav-signin {
    display: inline-flex; align-items: center; justify-content: center;
    height: 44px; padding: 0 20px; line-height: 1;
  }
  /* One height for a nav item on every page, so the row is the same box on
     the homepage and on the program pages. */
  .home-header .nav-link { height: 44px; }
}

/* The saved shortlist, between the calendar and the account: a parent who has
   saved something should not have to remember it exists, and the count is
   always on show so an empty shortlist still reads as a place to fill. */
.nav-saved{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:600;color:var(--ink);text-decoration:none;padding:10px;border-radius:8px;white-space:nowrap}
.nav-saved::before{content:"";width:16px;height:16px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1.1-1.1a5.5 5.5 0 0 0-7.8 7.8l1.1 1.1L12 21l7.8-7.6 1-1.1a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1.1-1.1a5.5 5.5 0 0 0-7.8 7.8l1.1 1.1L12 21l7.8-7.6 1-1.1a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E") center/contain no-repeat}
.nav-saved:hover{color:var(--purple)}
.nav-saved[hidden]{display:none}
.nav-saved-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:20px;padding:0 6px;border-radius:999px;background:var(--tint);color:var(--purple);font-size:11.5px;font-weight:800}
@media (min-width:1121px){.nav-saved{height:44px}}

@media (min-width:1121px){
  /* The utility row reads as one cluster ending at the account control: the
     sign-in keeps its own padding rather than a fixed width, so the gap before
     it is the same gap the links have between them. */
  .home-header .nav-utility{margin-right:-6px}
  .home-header .nav-signin{width:auto;padding-left:20px;padding-right:20px}
}

/* My Calendar is a personal page and lives in the account menu now, so the
   bar does not carry it whether or not anyone is signed in. */
.nav-utility .nav-calendar{display:none}

/* A way back, where a phone puts one: top left of the drawer, an arrow and the
   word. The Menu button in the header still closes the drawer; this is the
   control the rest of the phone has taught people to reach for, and a drawer
   that covers the page should offer it. */
.nav-back {
  display: none;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  margin: 0 0 8px;
  padding: 8px 12px 8px 6px;
  border: 0;
  border-radius: 9px;
  background: none;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: #5929A7;
  cursor: pointer;
}
.nav-back svg { width: 18px; height: 18px; flex: none; }
.nav-back:hover,
.nav-back:focus-visible { background: #F2EAFA; }
@media (max-width: 1120px) { .nav-back { display: inline-flex; } }