/* AriseVida Care — Location & Hours phone component (AriseVida-Location-Hours-Mobile v2.0.0).
   The handoff stylesheet (src/location-hours.css) with the site bindings below; scoped to .avlh below 768px.
   Runtime component/ and assets/ are siblings (icons at ../assets/icons/*.svg via the adapter's assetBase).
   Type comes from the site font tokens (--font-display Fraunces / --font-sans Inter) — the handoff's bundled
   TTF fallbacks are not shipped. The original page content (hero, map section, hours/contact/visit cards) is
   wrapped in div[data-lh-legacy]; the controller hides it on phones (hidden + inline display:none) and restores
   it at 768px and above; display:contents keeps the sections direct children of <main> at every width. The
   real Google map is the desktop iframe's own URL inside the rounded frame at the documented 200px minimum.
   Site adjustments vs src/location-hours.css: the package's a/button/summary resets are wrapped in :where() so its
   own pill/button colours and summary type apply; a scoped Fraunces italic face for the title accent; a plain
   ampersand (opsz 9). Task BC (2026-09-13): every role retuned to the Methadone phone scale — hero eyebrow token
   (Inter 700 11.5px .13em + 28×2 line / 7px dot), hero h1 token at Methadone's rendered density
   (Fraunces 400 clamp(26px,7.6vw,36px)/1.02), lede 17.5/1.4, item-title/body sizes, 28px gutters, 22–26/18px section
   rhythm — and the two disclosures animate (height + padding + border, 280ms cubic-bezier(.22,1,.36,1), reversible,
   icons on data-avlh-state) — see AriseVida-LocationHours-QA/v3/REPORT.md. */
/* The site's Google Fonts Fraunces carries no italic axis (its obliques are synthesized); the rendering's title
   accent is a genuine italic, so the package's licensed Fraunces italic ships under a scoped family used only by
   .avlh__title em (downloaded only where that element renders, i.e. phones). Desktop/tablet type is untouched. */
@font-face { font-family: "AVLH Fraunces Italic"; src: url("../assets/fonts/Fraunces-italic-500.ttf") format("truetype"); font-style: italic; font-weight: 500; font-display: swap; }
.location-hours-page>[data-lh-legacy]{display:contents}
.location-hours-page>[data-lh-legacy][hidden]{display:none!important}
.location-hours-page>[data-lh-mobile]{display:contents}
.avlh { display: none; }
.avlh[hidden] { display: none !important; }
@media (max-width: 767.98px) {
  .avlh {
    --avlh-paper: #fefcf7;
    --avlh-ink: #001022;
    --avlh-body: #344a65;
    --avlh-teal: #007c87;
    --avlh-green: #3e6525;
    --avlh-line: #dbe4e8;
    --avlh-heading-font: var(--font-display, "Fraunces", Georgia, serif);
    --avlh-body-font: var(--font-sans, "Inter", Arial, sans-serif);
    display: block;
    container-type: inline-size;
    isolation: isolate;
    color: var(--avlh-ink);
    background: var(--avlh-paper);
    font-family: var(--avlh-body-font);
    font-size: 1rem;
    line-height: 1.45;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  .avlh, .avlh *, .avlh *::before, .avlh *::after { box-sizing: border-box; }
  .avlh [hidden] { display: none !important; }
  .avlh :where(h1,h2,h3,p,figure,dl,dd,ul,address) { margin: 0; }
  .avlh :where(a,button,summary) { -webkit-tap-highlight-color: transparent; }
  .avlh :where(a,button,summary):focus-visible { outline: 2px solid var(--avlh-teal); outline-offset: 4px; }
  /* resets at zero specificity so the single-class component rules below (pill/button colours, summary type) win */
  .avlh :where(a) { color: inherit; text-decoration: none; }
  .avlh :where(button, summary) { font: inherit; }
  .avlh__inner { padding: clamp(22px,6.7cqi,26px) 28px 18px; }
  .avlh__eyebrow {
    display: flex; align-items: center; gap: 10px;
    color: #0f766e; font-size: 11.5px;
    font-weight: 700; letter-spacing: .13em; line-height: 1.3; text-transform: uppercase;
    margin: 0 0 14px;
  }
  .avlh__eyebrow::before { content: ""; flex: 0 0 28px; height: 2px; border-radius: 2px; background: #14b8a6; }
  .avlh__dot { width: 7px; height: 7px; flex: 0 0 7px; background: #e07856; border-radius: 50%; box-shadow: 0 0 0 4px rgba(224,120,86,.14); }
  .avlh__title {
    font-family: var(--avlh-heading-font); font-weight: 400;
    font-size: clamp(26px, 7.6vw, 36px); line-height: 1.02;
    letter-spacing: -.022em; color: #0a1f25; margin: 0; text-wrap: balance;
  }
  .avlh__title em { color: #0f766e; font-weight: 500; font-style: italic; font-family: "AVLH Fraunces Italic", var(--avlh-heading-font); font-synthesis: none; }
  /* plain ampersand: Fraunces' swash form is the default at display optical sizes; the rendering shows the text form */
  .avlh__amp { font-variation-settings: "opsz" 9; }
  .avlh__lede { font-size: 17.5px; line-height: 1.4; letter-spacing: 0; color: #3a5560; margin-top: 6px; }
  .avlh__map {
    margin-top: 14px; height: 200px; min-width: 200px;
    border: 1px solid #e0e7ed; border-radius: 16px;
    overflow: hidden; background: #f0f2ee;
  }
  .avlh__map iframe { display: block; width: 100%; height: 100%; min-height: 200px; border: 0; }
  /* No map overlays, filters, transformed/cropped iframe, or simulated map pin. */
  .avlh__clinic { margin-top: 12px; }
  .avlh__clinic-label { color: #0b5c5e; font-size: 9.2px; letter-spacing: .2em; font-weight: 600; line-height: 1.35; text-transform: uppercase; }
  .avlh__clinic-name { font-family: var(--avlh-heading-font); font-size: clamp(21px, 6.15vw, 24px); font-weight: 600; line-height: 1.12; letter-spacing: -.02em; color: #0b2127; margin-top: 5px; }
  .avlh__address { color: #3a5560; font-style: normal; font-size: 14px; line-height: 1.4; letter-spacing: 0; margin-top: 4px; }
  .avlh__address span { display: block; }
  .avlh__icon { display: block; width: 24px; height: 24px; flex: 0 0 auto; object-fit: contain; }
  .avlh__directions {
    display: flex; justify-content: center; align-items: center; gap: 10px;
    position: relative; min-height: 38px; padding: 7px 16px;
    border-radius: 999px; color: white; background: #0f766e;
    font-size: 14.5px; line-height: 1.25;
    font-weight: 600; margin-top: 10px;
  }
  /* Extra hit area uses the adjacent empty space without inflating visible pills. */
  .avlh__directions::before { content: ""; position: absolute; inset: -4px 0; border-radius: inherit; }
  .avlh__directions .avlh__icon { width: 20px; height: 20px; filter: brightness(0) invert(1); }
  .avlh__hours { margin-top: 20px; }
  .avlh__hours-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
  .avlh__clock { width: 32px; height: 32px; border-radius: 50%; padding: 4px; background: #ecf2e7; flex: 0 0 32px; }
  .avlh__clock .avlh__icon { width: 24px; height: 24px; }
  .avlh__hours-title { font-family: var(--avlh-heading-font); font-size: clamp(20px, 5.65vw, 22px); font-weight: 600; line-height: 1.12; letter-spacing: -.02em; color: #0b2127; }
  .avlh__hours-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: baseline; padding: 6px 0; font-size: 13.5px; line-height: 1.35; letter-spacing: -.01em; }
  .avlh__hours-row + .avlh__hours-row { border-top: 1px solid var(--avlh-line); }
  .avlh__hours-row dt { font-weight: 600; }
  .avlh__hours-row dd { color: #3a5560; text-align: right; font-variant-numeric: tabular-nums; }
  .avlh__holiday { margin-top: 8px; background: #f1f5ec; border: 1px solid #dce8d7; border-radius: 10px; }
  .avlh__summary { list-style: none; cursor: pointer; position: relative; display: flex; align-items: center; gap: 12px; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
  .avlh__summary::-webkit-details-marker { display: none; }
  .avlh__summary::marker { content: ""; }
  .avlh__holiday > .avlh__summary { min-height: 38px; padding: 6px 12px; }
  .avlh__holiday > .avlh__summary::before { content: ""; position: absolute; inset: -5px 0; }
  .avlh__holiday > .avlh__summary .avlh__icon { width: 22px; height: 22px; }
  .avlh__state-icon { margin-left: auto; flex: 0 0 20px; }
  .avlh__state-icon .avlh__icon { width: 20px; height: 20px; }
  /* Disclosure state icons follow the requested state (data-avlh-state, set by the controller the instant a tap
     lands, so repeated taps never desynchronise); without the controller the native [open] attribute drives them.
     Holiday: plus/minus cross-fade; More contact: the single chevron rotates (Methadone accordion timing). */
  .avlh__state-icon { position: relative; width: 20px; height: 20px; }
  .avlh .avlh__state-icon .avlh__icon { position: absolute; inset: 0; width: 20px; height: 20px; transition: opacity .2s ease, transform .28s cubic-bezier(.22,1,.36,1); }
  .avlh__icon-open { opacity: 0; }
  .avlh details[open]:not([data-avlh-state]) > summary .avlh__icon-open,
  .avlh details[data-avlh-state="open"] > summary .avlh__icon-open { opacity: 1; }
  .avlh details[open]:not([data-avlh-state]) > summary .avlh__icon-closed,
  .avlh details[data-avlh-state="open"] > summary .avlh__icon-closed { opacity: 0; }
  .avlh .avlh__more .avlh__icon-open { display: none; }
  .avlh .avlh__more[data-avlh-state="open"] > summary .avlh__icon-closed,
  .avlh .avlh__more[open]:not([data-avlh-state]) > summary .avlh__icon-closed { opacity: 1; transform: rotate(180deg); }
  .avlh details[data-avlh-animating] > :not(summary) { overflow: hidden; }
  @media (prefers-reduced-motion: reduce) { .avlh__state-icon .avlh__icon { transition: none; } }
  .avlh__holiday-content { padding: 10px 12px 12px; border-top: 1px solid #dce8d7; color: #3a5560; font-size: 13.5px; line-height: 1.55; }
  .avlh__holiday-content p { margin-bottom: 6px; }
  .avlh__holiday-list { display: grid; gap: 4px; padding-left: 18px; }
  .avlh__visit { display: flex; align-items: flex-start; gap: 13px; margin-top: 9px; padding: 9px 12px 10px; background: #ffeee9; border: 1px solid #ffe8df; border-radius: 10px; }
  .avlh__visit > .avlh__icon { width: 26px; height: 26px; margin-top: 1px; }
  .avlh__visit-copy { min-width: 0; }
  .avlh__visit-title { font-family: var(--avlh-heading-font); font-size: 17px; font-weight: 600; line-height: 1.15; letter-spacing: -.02em; color: #0b2127; }
  .avlh__visit-copy p { color: #3a5560; margin-top: 2px; font-size: 12.7px; line-height: 1.38; letter-spacing: 0; text-wrap: pretty; }
  .avlh__contact-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
  .avlh__contact-button { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 36px; padding: 5px 6px; border: 1px solid rgba(15,118,110,.6); border-radius: 999px; color: #0f766e; background: #fffefd; font-size: clamp(12.5px, 3.45vw, 13.5px); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
  .avlh__contact-button::before { content: ""; position: absolute; inset: -5px 0; border-radius: inherit; }
  .avlh__contact-button .avlh__icon { width: 21px; height: 21px; }
  .avlh__availability { margin-top: 8px; color: #3a5560; text-align: center; font-size: 12.7px; line-height: 1.4; letter-spacing: 0; }
  .avlh__availability strong { font-weight: 600; }
  .avlh__more { border-top: 1px solid #d4dfe5; margin-top: 8px; }
  .avlh__more > .avlh__summary { color: #0b2127; min-height: 44px; padding: 9px 0; font-size: 14.5px; letter-spacing: -.01em; }
  .avlh__more .avlh__state-icon .avlh__icon { width: 20px; height: 20px; }
  .avlh__more-content { padding: 2px 0 6px; }
  .avlh__contact-link { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 0; color: #0f766e; font-size: 13.5px; line-height: 1.35; overflow-wrap: anywhere; }
  .avlh__contact-link + .avlh__contact-link { border-top: 1px solid var(--avlh-line); }
  .avlh__contact-link .avlh__icon { width: 20px; height: 20px; }
  .avlh__contact-link .avlh__trailing { margin-left: auto; width: 16px; height: 16px; }
  @media (hover:hover) {
    .avlh__directions:hover { background: #006974; }
    .avlh__contact-button:hover { background: #eef8f8; }
  }
  @media (max-width:359px) {
    .avlh__inner { padding-inline: 20px; }
    .avlh__lede { font-size: 16px; }
    .avlh__contact-button { gap: 5px; padding-inline: 4px; }
    .avlh__hours-row { gap: 6px; font-size: 13px; }
  }
  @media (forced-colors: active) {
    .avlh__directions, .avlh__contact-button, .avlh__holiday, .avlh__visit { border: 1px solid ButtonText; }
    .avlh__directions { color: LinkText; background: Canvas; }
    .avlh__directions .avlh__icon { filter: none; }
  }
}
@media (max-width: 767.98px) {
  .avlh__contact-label, .avlh__contact-value { display: block; }
  .avlh__contact-label { font-weight: 600; }
  .avlh__contact-value { color: #3a5560; font-size: 12.7px; }
}
