/* public/amd/nav.css: see src/amdsite/conditions.js and pages.js. Loaded after amd.css on every athleticsmd.com page.
   The Menu sheet, the offers ribbon, the phone action bar (Book · Call · Pay)
   and the symptom picker's chips. Text colours are chosen for WCAG AA:
   #087a41 under white text is 5.4:1 (the brand #0b8a4e is 4.4:1, too low). */
:root { --amd-act-h: 64px; --amd-go: #087a41; --amd-go-2: #066234; }

/* ── Header: direct items on wide screens, the Menu button at every width ── */
.amd-nav .amd-wide { display: none; }
@media (min-width: 1180px) { .amd-nav .amd-wide { display: inline-block; } }
.amd-nav .amd-mn-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px currentColor; line-height: 1; min-height: 40px; }
.amd-hero .amd-mn-btn, .nr-cinema .amd-mn-btn, .amd-signin-page .amd-mn-btn { background: rgba(7, 18, 52, .55); }
.amd-mn-btn:focus-visible, .amd-mn-ask:focus-visible, .amd-mn-panel a:focus-visible, .amd-mn-panel button:focus-visible, .amd-act a:focus-visible, .amd-ribbon a:focus-visible, .amd-ribbon button:focus-visible, .amd-ribbon summary:focus-visible, .amd-picker .amd-chip:focus-visible { outline: 3px solid #1ba8d8; outline-offset: 2px; }
.amd-mn-c { display: none; }
/* Wide screens: one row (the Care dropdown is "Services"; Ask Uri'El is in the Menu). */
@media (min-width: 1180px) { .amd-nav { gap: 6px 10px; flex-wrap: nowrap; } .amd-nav > * { flex: 0 0 auto; } .amd-nav > a, .amd-nav summary, .amd-nav .amd-cta, .amd-nav .amd-book-btn { font-size: .88rem; } .amd-nav .amd-mn-btn { padding: 9px 12px; } .amd-nav .amd-si-long { display: none; } .amd-nav .amd-si-short { display: inline; } }
.amd-si-short { display: none; }
/* Phones: the bar carries Book and the Menu carries sign-in, so the header is Qualify? and Menu. */
@media (max-width: 760px) { .amd-nav .amd-book-btn, .amd-nav .amd-signin { display: none; } .amd-nav .amd-mn-btn { padding: 8px 12px; } .amd-nav .amd-mn-btn .amd-mn-o { font-size: .9rem; } }
@media (max-width: 380px) { .amd-nav .amd-mn-btn svg { display: none; } .amd-nav { gap: 6px 10px; } }

/* ── The sheet: a panel on the right from 761px, the whole screen on a phone ── */
.amd-mn-sheet { display: none; position: fixed; inset: 0; z-index: 100000; background: rgba(7, 18, 52, .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--ink); text-align: left; }
.amd-mn[open] > .amd-mn-sheet, .amd-mn-sheet.is-open { display: flex; justify-content: flex-end; }
.amd-mn-panel { width: min(440px, 100%); height: 100%; overflow-y: auto; overscroll-behavior: contain; background: #fff; color: var(--ink); font: 400 1rem/1.4 var(--sans); padding: 16px 20px calc(32px + env(safe-area-inset-bottom)); box-shadow: -30px 0 60px -30px rgba(10, 27, 77, .6); }
@media (max-width: 760px) { .amd-mn-panel { width: 100%; padding: 12px 16px calc(28px + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: no-preference) { .amd-mn-sheet.is-open .amd-mn-panel, .amd-mn[open] .amd-mn-panel { animation: amd-mn-in .28s cubic-bezier(.2, .7, .2, 1) both; } }
@keyframes amd-mn-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.amd-mn-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; margin-bottom: 8px; }
.amd-mn-title { margin: 0; font: 600 .78rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.amd-mn-x { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 16px; border: 0; border-radius: 999px; background: var(--sand); color: var(--ink); font: 600 .95rem var(--sans); cursor: pointer; }
.amd-mn-x span { font-size: 1.3rem; line-height: 1; }
.amd-mn-x[hidden], .amd-ribbon-x[hidden], .amd-ribbon-item[hidden] { display: none; }
.amd-mn-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.amd-mn-acts a { display: grid; align-content: center; gap: 3px; min-height: 76px; padding: 12px 14px; border-radius: 16px; background: #fff; color: var(--ink); text-decoration: none; font: 700 1.02rem/1.2 var(--sans); box-shadow: inset 0 0 0 1.5px var(--hair); }
.amd-mn-acts a small { font: 400 .8rem/1.3 var(--sans); color: var(--muted); }
.amd-mn-acts a:first-child { background: var(--amd-go); color: #fff; box-shadow: 0 14px 26px -14px rgba(8, 122, 65, .8); }
.amd-mn-acts a:first-child small { color: #fff; }
.amd-mn-acts a:hover { box-shadow: inset 0 0 0 2px var(--amd-go); }
.amd-mn-acts a:first-child:hover { background: var(--amd-go-2); }
.amd-mn-sec { margin-top: 24px; }
.amd-mn-k { margin: 0 0 10px; font: 600 .74rem var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.amd-mn-list { display: grid; gap: 2px; }
.amd-mn-list a { display: grid; gap: 1px; padding: 11px 12px; min-height: 44px; border-radius: 12px; color: var(--ink); text-decoration: none; font-weight: 600; }
.amd-mn-list a small { font-weight: 400; font-size: .86rem; color: var(--muted); }
.amd-mn-list a:hover, .amd-mn-ask:hover { background: var(--sand); }
.amd-mn-ask { display: grid; gap: 1px; justify-items: start; padding: 11px 12px; min-height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); font: 600 1rem/1.4 var(--sans); text-align: left; cursor: pointer; }
.amd-mn-ask small { font-weight: 400; font-size: .86rem; color: var(--muted); }
.amd-mn-more { grid-template-columns: 1fr 1fr; }
.amd-mn-offers { padding: 14px 16px; border-radius: 16px; background: #e2f6ea; }
.amd-mn-offer { margin: 0 0 10px; font-weight: 600; }
.amd-mn-offer a { color: var(--amd-go-2); font-weight: 700; white-space: nowrap; }
.amd-mn-note { margin: 6px 0 0; font-size: .82rem; color: #3d4a63; }
/* Without script the summary itself becomes the close button, above the sheet. */
html:not(.amd-mn-js) .amd-mn[open] > .amd-mn-btn { position: fixed; top: 14px; right: 16px; z-index: 100001; background: var(--sand); color: var(--ink); box-shadow: none; }
html:not(.amd-mn-js) .amd-mn[open] .amd-mn-o { display: none; }
html:not(.amd-mn-js) .amd-mn[open] .amd-mn-c { display: inline; }
html:not(.amd-mn-js) .amd-mn[open] .amd-mn-head { padding-right: 110px; }
/* Scroll stays with the sheet while it is open. */
html.amd-nav-open, html.amd-nav-open body, body:has(.amd-mn[open]) { overflow: hidden; }

/* ── Chips: the symptom picker (conditions.symptomPicker) and the Menu ──── */
.amd-picker { margin: 28px 0; }
.amd-picker-q { margin: 0 0 14px; font: 400 clamp(1.5rem, 3.4vw, 2.1rem)/1.15 var(--display); letter-spacing: -.01em; color: inherit; }
.amd-picker .amd-chips, .amd-mn-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.amd-picker .amd-chip, .amd-mn-chips .amd-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 20px; border-radius: 999px; background: #fff; color: var(--ink); text-decoration: none; text-align: center; font: 600 1rem/1.2 var(--sans); box-shadow: 0 2px 6px rgba(10, 27, 77, .06), 0 14px 28px -20px rgba(10, 27, 77, .45), inset 0 0 0 1.5px var(--hair); transition: background-color .2s ease, color .2s ease, transform .2s ease; }
.amd-mn-chips .amd-chip { min-height: 44px; padding: 10px 16px; font-size: .95rem; }
.amd-picker .amd-chip:hover, .amd-mn-chips .amd-chip:hover { background: var(--amd-go); color: #fff; transform: translateY(-1px); }
.amd-picker .amd-chip:active, .amd-mn-chips .amd-chip:active { transform: scale(.98); }
@media (max-width: 520px) { .amd-picker .amd-chip { flex: 1 1 calc(50% - 10px); padding: 12px 14px; } }
@media (prefers-reduced-motion: reduce) { .amd-picker .amd-chip, .amd-mn-chips .amd-chip { transition: none; } .amd-picker .amd-chip:hover, .amd-mn-chips .amd-chip:hover { transform: none; } }

/* ── Offers ribbon ─────────────────────────────────────────────────────── */
.amd-ribbon { position: relative; background: #0a1b4d; color: #fff; font: 500 .9rem/1.4 var(--sans); }
.amd-ribbon-in { position: relative; max-width: 1120px; margin: 0 auto; padding: 9px 56px 9px 22px; }
.amd-ribbon-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.amd-ribbon-item p { margin: 0; }
.amd-ribbon-cta { color: #6fe3a5; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.amd-ribbon-cta:hover { color: #fff; }
.amd-ribbon-more summary { cursor: pointer; color: #c9d6f2; font-size: .82rem; text-decoration: underline; text-underline-offset: 3px; }
.amd-ribbon-more p { margin: 4px 0 2px; font-size: .82rem; color: #e3e9f7; max-width: 70ch; }
.amd-ribbon-x { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #fff; font: 400 1.5rem/1 var(--sans); cursor: pointer; }
.amd-ribbon-x:hover { background: rgba(255, 255, 255, .12); }
@media (max-width: 760px) { .amd-ribbon-in { padding: 8px 50px 8px 16px; font-size: .86rem; } .amd-ribbon-x { right: 4px; } }

/* ── Book · Call · Pay, held at the bottom of a phone ─────────────────── */
.amd-act { display: none; }
@media (max-width: 760px) {
  .amd-act { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--line); box-shadow: 0 -12px 30px -20px rgba(10, 27, 77, .55); }
  .amd-act a { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 999px; color: var(--ink); background: #fff; text-decoration: none; font: 700 1rem var(--sans); box-shadow: inset 0 0 0 1.5px var(--hair); }
  .amd-act a:first-child { background: var(--amd-go); color: #fff; box-shadow: none; }
  /* The bar and Uri'El's chat button (bottom right, its own script) both stay
     tappable: the chat button, its teaser and its panel ride above the bar,
     and the page ends clear of both. */
  body.nr-site { padding-bottom: calc(var(--amd-act-h) + 70px + env(safe-area-inset-bottom)); }
  html body #uriai-bubble { bottom: calc(var(--amd-act-h) + 12px + env(safe-area-inset-bottom)); }
  html body #uriai-tease { bottom: calc(var(--amd-act-h) + 70px + env(safe-area-inset-bottom)); }
  html body #uriai-panel { bottom: calc(var(--amd-act-h) + 78px + env(safe-area-inset-bottom)); height: min(560px, calc(100vh - var(--amd-act-h) - 150px)); }
  .amd-q-open .amd-act, html.amd-nav-open .amd-act, body:has(.amd-mn[open]) .amd-act { display: none; }
}