/* AriseVida Care — Articles & Insights phone component (AriseVida-Articles-Insights-Mobile v2.0.0).
   Scoped to .avc-articles below 768px. Runtime component/ and assets/ are siblings. Type comes from the
   site font tokens (--font-display Fraunces / --font-sans Inter) instead of the handoff's bundled TTFs; the
   hero follows the site's phone hero system (Methadone family: Fraunces 400 title with a block gradient em,
   centred line + dot eyebrow, Inter lede in ink-600). The original page (hero + content) sits in
   div[data-insights-legacy]; the controller hides it on phones.
   v2 repairs: the flower scene lives on a decorative layer that fades into the page cream at both ends; the
   topic disclosure has one reversible owner (opaque clip reveal, chevron follows the requested state);
   "Back to latest articles" controls top and bottom of the expanded list; pointer-modality search focus. */
.avc-insights>[data-insights-legacy][hidden]{display:none!important}
.avc-articles{display:none}
@media(max-width:767.98px){
 .avc-articles[data-enabled="true"]:not([hidden]){--articles-paper:#fffcf5;--articles-ink:#05323e;--articles-teal:#008b94;--articles-muted:#597083;--articles-line:#c6dce0;display:block;width:100%;margin:0;background:var(--articles-paper);color:var(--articles-ink);font:400 14px/1.4 var(--font-sans,Inter,Arial,sans-serif);text-align:left;isolation:isolate;-webkit-text-size-adjust:100%;box-sizing:border-box}
 .avc-articles *,.avc-articles *::before,.avc-articles *::after{box-sizing:border-box}
 .avc-articles [hidden]{display:none!important}
 .avc-articles :is(h1,h2,h3,p){margin:0}
 .avc-articles a{color:inherit;text-decoration:none}
 .avc-articles button{font:inherit;color:inherit;cursor:pointer}
 .avc-articles :is(a,button,input,summary){-webkit-tap-highlight-color:transparent;touch-action:manipulation}
 .avc-articles :is(a,button,input,summary):focus-visible{outline:2px solid #007b81;outline-offset:3px}
 .avc-articles :is(a,button,summary):focus:not(:focus-visible){outline:none}
 .avc-articles__visually-hidden{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;border:0!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important}
 /* Initial images are wrapped in band-gated <picture> elements (tablet/desktop get a 1x1 placeholder); keep the img as the layout box. */
 .avc-articles picture{display:contents}
 .avc-articles picture>source{display:none}
 .avc-articles__icon{display:block;flex:none;width:21px;height:21px;object-fit:contain}
 /* Hero: text and controls sit on the page cream; the flower artwork (unchanged file) is composited on a
    separate decorative layer beneath them, sized to the hero box. A vertical fade starts and ends fully in
    the page colour inside the layer, so no rectangular boundary or different cream strip can show at the top
    or under the search field; a cream spotlight centred on the heading block (plus a light veil on the left)
    keeps the flower heads and stems from competing with the letters while the scene stays visible at the
    right edge and lower right. */
 .avc-articles__hero{position:relative;isolation:isolate;padding:34px 30px 22px;background:var(--articles-paper);text-align:center}
 .avc-articles__hero::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:0;background-image:linear-gradient(180deg,#fffcf5 0%,#fffcf5 3%,rgba(255,252,245,0) 15%,rgba(255,252,245,0) 50%,rgba(255,252,245,.45) 78%,#fffcf5 94%,#fffcf5 100%),radial-gradient(ellipse 62% 54% at 50% 44%,rgba(255,252,245,.94) 0%,rgba(255,252,245,.86) 55%,rgba(255,252,245,0) 100%),linear-gradient(90deg,rgba(255,252,245,.9) 0%,rgba(255,252,245,.6) 30%,rgba(255,252,245,0) 60%),url('../assets/images/mobile-flower-hero.webp');background-size:cover;background-position:center,center,center,right top;background-repeat:no-repeat}
 .avc-articles__hero>*{position:relative}
 .avc-articles__eyebrow{display:flex;align-items:center;justify-content:center;gap:10px;color:#0f766e;font-size:12px;line-height:1.2;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
 /* line + dot ornament (site section-heading treatment) drawn inside one 51×7 box so nothing overflows it */
 .avc-articles__eyebrow-mark{position:relative;display:block;flex:none;width:51px;height:7px}
 .avc-articles__eyebrow-mark::before{content:"";position:absolute;left:0;top:2.5px;width:28px;height:2px;border-radius:2px;background:#14b8a6}
 .avc-articles__eyebrow-mark::after{content:"";position:absolute;right:0;top:0;width:7px;height:7px;border-radius:50%;background:#e07856;box-shadow:0 0 0 4px rgba(224,120,86,.14)}
 .avc-articles__title{max-width:100%;margin:14px auto 0!important;font:400 clamp(32px,9.8vw,44px)/1.04 var(--font-display,Fraunces,Georgia,serif);letter-spacing:-.022em;color:#0a1f25;text-wrap:balance}
 /* Fraunces draws a swash ampersand above opsz 48; the page uses the plain glyph. */
 .avc-articles__amp{font-variation-settings:"opsz" 48}
 /* Second line is the accent: block em so the gradient owns the whole line; padded paint box so italic
    overhang and descender ink are not clipped by the tight line box (net-zero flow). */
 .avc-articles__title em{display:block;width:fit-content;margin:0 auto -.12em;padding:0 .08em .12em .06em;font-weight:400;font-style:italic;line-height:1.08;color:#0f766e;background:linear-gradient(95deg,#0f766e 0%,#138591 50%,#c95e3f 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
 /* Protected reading area: a feathered cream pad under the intro (no hard box) keeps body text at AA contrast
    over the flower heads and stems that reach the right end of its lines. It is a z-index:-1 pseudo in the
    hero's stacking context, so it paints above the artwork layer but below every hero child — the title's
    descenders and the search pill are never veiled by its halo. */
 .avc-articles__intro{position:relative;max-width:26em;margin:14px auto 0!important;font-size:17px;line-height:1.5;letter-spacing:0;color:#3a5560;text-wrap:pretty}
 .avc-articles__intro::before{content:"";position:absolute;z-index:-1;inset:0;border-radius:10px;background:rgba(255,252,245,.62);box-shadow:0 0 14px 10px rgba(255,252,245,.62);pointer-events:none}
 .avc-articles__search-form{display:flex;align-items:center;margin:22px 0 0;min-height:48px;border:1px solid #f0e7d8;border-radius:999px;background:rgba(255,255,255,.97);box-shadow:0 3px 12px rgba(37,78,63,.05);text-align:left}
 .avc-articles__search-submit{display:grid;place-items:center;align-self:stretch;flex:none;width:43px;border:0;padding:0;background:transparent;border-radius:999px}
 .avc-articles__search-submit .avc-articles__icon{width:20px;height:20px}
 .avc-articles__search-label{display:block;flex:1;min-width:0;padding-right:12px}
 .avc-articles__search{display:block;width:100%;min-height:46px;padding:0;border:0;background:transparent;font:400 16px/1.2 var(--font-sans,Inter,Arial,sans-serif);color:var(--articles-ink);min-width:0;-webkit-appearance:none;border-radius:0}
 .avc-articles__search::placeholder,.avc-articles__email::placeholder{color:#697a8a;opacity:1;letter-spacing:-.4px}
 /* Search focus. The generic focus-visible rule above draws a rectangle around the inner input, and text
    inputs match :focus-visible even after a tap. The controller records the input modality on the root
    (pointer until keyboard navigation begins), so a pointer-origin focus keeps just the pill while keyboard
    focus rings the pill itself. Focus is never removed or blurred; caret, selection and typing are untouched.
    Without the controller (no modality attribute) the default ring stays. */
 .avc-articles[data-input-modality="pointer"] .avc-articles__search:focus,
 .avc-articles[data-input-modality="pointer"] .avc-articles__search:focus-visible{outline:none;box-shadow:none}
 @supports selector(:has(a)){
  .avc-articles .avc-articles__search:focus-visible{outline:none}
  /* cream halo under and around the ring so it always reads ≥3:1, even where the flower composite sits beside the pill */
  .avc-articles:not([data-input-modality="pointer"]) .avc-articles__search-form:has(.avc-articles__search:focus-visible){outline:none;box-shadow:0 3px 12px rgba(37,78,63,.05),0 0 0 var(--av-ring-w,1px) #007b81} /* 2026-09-24 clean field focus: keyboard focus = 1px ring following the pill, no outline box or halo */
 }
 /* Newsletter email focus — identical treatment to the search field above. The
    generic focus-visible rule drew a rectangle around the inner input, and text
    inputs match :focus-visible even after a tap, so the rounded signup field
    showed a harsh square outline while tapping/typing (reported issue). A
    pointer-origin focus now keeps just the clean rounded pill; keyboard focus
    rings the pill itself. Caret, typing, autofill and subscription are untouched. */
 .avc-articles[data-input-modality="pointer"] .avc-articles__email:focus,
 .avc-articles[data-input-modality="pointer"] .avc-articles__email:focus-visible{outline:none;box-shadow:none}
 @supports selector(:has(a)){
  .avc-articles .avc-articles__email:focus-visible{outline:none}
  .avc-articles:not([data-input-modality="pointer"]) .avc-articles__newsletter-form:has(.avc-articles__email:focus-visible){outline:none;box-shadow:0 4px 13px #1b7f8410,0 0 0 var(--av-ring-w,1px) #007b81}
 }
 .avc-articles__content{padding:0 30px 14px}
 .avc-articles__toolbar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 10px;z-index:5;flex-wrap:wrap}
 .avc-articles__toolbar>h2{font:500 17px/1.2 var(--font-display,Fraunces,Georgia,serif);letter-spacing:-.4px}
 .avc-articles__topic-menu{position:static;flex:none;min-width:109px;max-width:100%}
 .avc-articles__topic-toggle{display:flex;align-items:center;justify-content:space-between;gap:9px;min-height:44px;padding:7px 13px;border:1px solid #00a1ac;border-radius:999px;background:#fffefb;color:#0b6f6a;font-weight:600;font-size:12px;line-height:1.2;list-style:none;cursor:pointer}
 .avc-articles__topic-toggle::-webkit-details-marker{display:none}
 .avc-articles__topic-toggle::marker{content:""}
 .avc-articles__chevron{width:14px;height:14px;transition:transform 200ms cubic-bezier(.2,.7,.2,1)}
 .avc-articles__topic-menu[open] .avc-articles__chevron{transform:rotate(180deg)}
 /* Opaque panel: nothing beneath it can ghost through while it reveals or collapses. */
 .avc-articles__topic-options{position:absolute;top:100%;left:0;right:0;z-index:8;padding:5px;border:1px solid #00aab5;border-radius:12px;background:#fffefb;box-shadow:0 7px 20px #17494918;max-height:60vh;max-height:60svh;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;transform-origin:top center}
 /* Enhanced disclosure: the controller owns closed → opening → open → closing and animates the panel with
    a 200 ms clip reveal/collapse (Web Animations); the native open attribute stays on until a collapse has
    finished. The chevron follows the requested state, so it turns the moment a tap registers and reverses
    with the panel; a closing panel takes no taps. */
 .avc-articles__topic-menu[data-enhanced="true"][data-menu-state="closed"] .avc-articles__chevron,
 .avc-articles__topic-menu[data-enhanced="true"][data-menu-state="closing"] .avc-articles__chevron{transform:rotate(0deg)}
 .avc-articles__topic-menu[data-enhanced="true"][data-menu-state="opening"] .avc-articles__chevron,
 .avc-articles__topic-menu[data-enhanced="true"][data-menu-state="open"] .avc-articles__chevron{transform:rotate(180deg)}
 .avc-articles__topic-menu[data-menu-state="closing"] .avc-articles__topic-options{pointer-events:none}
 .avc-articles__topic-option{display:flex;align-items:center;gap:14px;width:100%;min-height:44px;padding:8px 10px;border:0;border-bottom:1px solid #d7e7eb;background:transparent;text-align:left;font-size:13px;line-height:1.2}
 .avc-articles__topic-option:last-child{border-bottom:0}
 .avc-articles__topic-option[aria-pressed="true"]{color:#0b6f6a;background:#eaf8f8;border-radius:9px;border-color:transparent}
 .avc-articles__topic-option>.avc-articles__icon{width:20px;height:20px}
 .avc-articles__option-label{flex:1;min-width:0}
 .avc-articles__option-count{color:#6986a0;font-size:12px;min-width:18px;text-align:center}
 .avc-articles__selected-check{width:15px!important;height:15px!important;visibility:hidden}
 .avc-articles__topic-option[aria-pressed="true"] .avc-articles__selected-check{visibility:visible}
 .avc-articles:not([data-topic="all"]) .avc-articles__toolbar{display:block;margin-top:12px;margin-bottom:17px}
 .avc-articles:not([data-topic="all"]) .avc-articles__toolbar>h2{margin-bottom:7px;font-size:18px}
 .avc-articles:not([data-topic="all"]) .avc-articles__topic-toggle{font-size:14px;min-height:44px}
 .avc-articles[data-topic="family-support"] .avc-articles__topic-label{padding-left:31px;background:url('../assets/icons/15-family-support.svg') no-repeat left center;background-size:22px}
 .avc-articles__results{outline:none;min-width:0;scroll-margin-top:96px}
 /* Expanded list: the way back to the compact overview, above the results and again after the last row.
    Site secondary-action treatment (teal outline on cream, pill radius); the bottom control spans the list. */
 .avc-articles__back-latest{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;margin:2px 3px 14px;padding:9px 18px 9px 15px;border:1.5px solid rgba(15,118,110,.6);border-radius:999px;background:#fffdf8;color:#0f766e!important;font-size:13.5px!important;font-weight:600!important;line-height:1.3;text-align:center}
 .avc-articles__back-latest .avc-articles__icon{width:16px;height:16px;transform:rotate(180deg)}
 .avc-articles__results>.avc-articles__back-latest:last-child{display:flex;width:calc(100% - 6px);margin-top:18px;margin-bottom:12px}
 .avc-articles__featured{position:relative;overflow:hidden;min-height:236px;padding:90px 15px 13px;border:1px solid #f27a53;border-radius:17px;background:linear-gradient(135deg,#006875,#003f43);color:#fff}
 .avc-articles__featured-image{position:absolute;inset:0;display:block;width:100%;height:57%;object-fit:cover;object-position:center;z-index:0}
 .avc-articles__featured::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent 3%,rgba(0,66,70,.08) 16%,rgba(0,72,76,.68) 40%,#00474b 70%,#034c4d)}
 .avc-articles__featured-badge{position:absolute;z-index:2;top:12px;left:12px;display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;background:#fffef8;color:#043742;font-size:9px;line-height:1;font-weight:600;letter-spacing:1px;text-transform:uppercase}
 .avc-articles__featured-badge .avc-articles__icon{width:12px;height:12px}
 .avc-articles__featured-copy{position:relative;z-index:2}
 .avc-articles__category{font:600 9px/1.3 var(--font-sans,Inter,Arial,sans-serif);letter-spacing:.7px;text-transform:uppercase;color:#0b6f6a}
 .avc-articles__featured .avc-articles__category{color:#fff;letter-spacing:1px}
 .avc-articles__card-title{font:500 17px/1.07 var(--font-display,Fraunces,Georgia,serif);letter-spacing:-.45px;overflow-wrap:anywhere}
 .avc-articles__featured .avc-articles__card-title{margin-top:4px;font-size:24px;line-height:1.05;max-width:97%}
 .avc-articles__excerpt{font-size:14px;line-height:1.25;letter-spacing:-.3px}
 .avc-articles__featured .avc-articles__excerpt{margin-top:4px}
 .avc-articles .avc-articles__read{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;font-size:13px;font-weight:600;line-height:1.2;color:#008a94}
 .avc-articles__read .avc-articles__icon{width:17px;height:17px}
 .avc-articles__featured .avc-articles__read{margin-top:6px;min-height:44px;padding:6px 15px;border-radius:999px;background:#fffef8;color:#05323e}
 .avc-articles__featured-footer{display:flex;align-items:center;justify-content:space-between;gap:9px}
 .avc-articles__featured .avc-articles__reading-time{display:none;order:-1}
 .avc-articles[data-topic="treatment-options"] .avc-articles__featured .avc-articles__reading-time{display:flex;color:white;font-size:10px;gap:5px}
 .avc-articles[data-topic="treatment-options"] .avc-articles__featured .avc-articles__reading-time .avc-articles__icon{filter:brightness(0) invert(1)}
 .avc-articles__latest-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:12px 3px 3px}
 .avc-articles__latest-heading h2,.avc-articles__section-heading h2{font:500 27px/1.1 var(--font-display,Fraunces,Georgia,serif);letter-spacing:-.8px}
 .avc-articles__view-all{display:flex;align-items:center;justify-content:flex-end;gap:6px;min-height:44px;padding:4px 0;border:0;background:transparent;font-size:11px!important;font-weight:600!important;color:#0b6f6a!important;white-space:normal;text-align:right}
 .avc-articles__view-all .avc-articles__icon{width:14px;height:14px}
 .avc-articles__list{display:block;margin:0 3px}
 .avc-articles__row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--articles-line)}
 .avc-articles__row:last-child{border-bottom:0}
 .avc-articles__row-copy{flex:1;min-width:0}
 .avc-articles__row .avc-articles__card-title{margin-top:3px}
 .avc-articles__reading-time{display:flex;align-items:center;gap:6px;font:400 11px/1.3 var(--font-sans,Inter,Arial,sans-serif);color:#4f6b7c;white-space:nowrap}
 .avc-articles__reading-time .avc-articles__icon{width:13px;height:13px}
 .avc-articles__row .avc-articles__reading-time{margin-top:6px}
 .avc-articles__thumb{display:block;width:38%;height:auto;aspect-ratio:2.2;object-fit:cover;border-radius:9px;flex:none}
 .avc-articles__section-heading{margin:0 3px 10px}
 .avc-articles__count{margin-top:2px!important;color:var(--articles-muted);font-size:12px;line-height:1.3}
 .avc-articles[data-topic="addiction-recovery"] .avc-articles__row .avc-articles__category{display:none}
 .avc-articles[data-topic="addiction-recovery"] .avc-articles__row{padding-block:8px}
 .avc-articles[data-topic="treatment-options"] .avc-articles__section-heading{display:flex;align-items:end;justify-content:space-between;gap:8px}
 .avc-articles[data-topic="treatment-options"] .avc-articles__section-heading h2{font-size:25px}
 .avc-articles[data-topic="treatment-options"] .avc-articles__count{flex:none;font-size:11px;margin-bottom:3px!important}
 .avc-articles[data-topic="treatment-options"] .avc-articles__featured{padding-top:90px;min-height:0;border-radius:12px}
 .avc-articles[data-topic="treatment-options"] .avc-articles__featured .avc-articles__card-title{font-size:20px}
 .avc-articles[data-topic="treatment-options"] .avc-articles__list{margin-top:9px;border-top:1px solid var(--articles-line)}
 .avc-articles__single{overflow:hidden;border:1px solid #f0eadd;border-radius:15px;background:#fffefb;box-shadow:0 5px 16px #927a4210}
 .avc-articles__single-image{display:block;width:100%;height:auto;aspect-ratio:2.45;object-fit:cover}
 .avc-articles__single-body{padding:12px 14px 5px}
 .avc-articles__single .avc-articles__card-title{margin-top:5px;font-size:22px;line-height:1.06}
 .avc-articles__single .avc-articles__excerpt{margin-top:5px}
 .avc-articles__single-footer{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-top:5px}
 .avc-articles__empty{padding:16px 12px;border:1px solid #a8e4e7;border-radius:19px;background:linear-gradient(120deg,#f0fbfa,#f7fcfb);text-align:center}
 .avc-articles__empty-icon{width:56px;height:56px;margin:0 auto 8px;padding:14px;border-radius:50%;background:#dff6f4}
 .avc-articles__empty h3{font:500 23px/1.1 var(--font-display,Fraunces,Georgia,serif);letter-spacing:-.8px}
 .avc-articles__empty p{margin-top:6px;font-size:13px;line-height:1.35}
 .avc-articles__reset{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;margin-top:12px;padding:8px 18px;border:0;border-radius:999px;background:linear-gradient(105deg,#008895,#0095a1);color:white!important;font-size:14px!important;font-weight:600!important}
 .avc-articles__reset .avc-articles__icon{width:20px;height:20px;filter:brightness(0) invert(1)}
 .avc-articles__newsletter{margin:12px -4px 0;padding:11px 12px;border:1px solid #b0e7e9;border-radius:16px;background:linear-gradient(120deg,#effaf8,#f5fbfa)}
 .avc-articles__newsletter-intro{display:flex;align-items:center;gap:12px}
 .avc-articles__newsletter-badge{width:44px;height:44px}
 .avc-articles__newsletter-copy{flex:1;min-width:0;padding-left:15px;border-left:1px solid #c9e0e2}
 .avc-articles__newsletter-copy h2{font:500 17px/1.13 var(--font-display,Fraunces,Georgia,serif);letter-spacing:-.55px}
 .avc-articles__newsletter-copy p{margin-top:3px;font-size:11.5px;line-height:1.3;letter-spacing:-.2px}
 .avc-articles__newsletter-form{display:flex;align-items:center;gap:5px;margin-top:10px;min-height:44px;border:1px solid #d1e7e9;border-radius:999px;background:#fff;box-shadow:0 4px 13px #1b7f8410}
 .avc-articles__email-label{display:block;flex:1;min-width:0;padding-left:14px}
 .avc-articles__email{display:block;width:100%;min-height:42px;padding:0;border:0;background:transparent;font:400 16px/1.2 var(--font-sans,Inter,Arial,sans-serif);color:var(--articles-ink);border-radius:0;-webkit-appearance:none}
 .avc-articles__subscribe{display:grid;place-items:center;width:44px;height:44px;flex:none;margin:-1px;border:0;border-radius:50%;background:linear-gradient(110deg,#008a92,#00a5ae)}
 .avc-articles__subscribe .avc-articles__icon{width:21px;height:21px;filter:brightness(0) invert(1)}
 .avc-articles__subscribe:disabled{opacity:.6;cursor:wait}
 .avc-articles__newsletter-status{margin:8px 3px 0!important;font-size:12px;line-height:1.4}
 .avc-articles__newsletter-status[data-state="error"]{color:#a13c23}
}
@media(max-width:359.98px){
 .avc-articles__hero{padding-inline:20px}
 .avc-articles__content{padding-inline:20px}
 .avc-articles__intro{max-width:100%;font-size:16px}
 .avc-articles__eyebrow{font-size:10.5px;letter-spacing:.12em}
 .avc-articles__toolbar>h2{font-size:15px}
 .avc-articles__topic-menu{min-width:100px}
 .avc-articles__topic-toggle{padding-inline:10px;font-size:11px}
 .avc-articles__featured .avc-articles__card-title{font-size:22px}
 .avc-articles__latest-heading h2{font-size:23px}
 .avc-articles__view-all{font-size:10px!important;gap:3px}
 .avc-articles__row{gap:9px}.avc-articles__card-title{font-size:16px}
 .avc-articles__section-heading h2{font-size:25px}
 .avc-articles[data-topic="treatment-options"] .avc-articles__section-heading{display:block}
 .avc-articles__newsletter-copy{padding-left:10px}.avc-articles__newsletter-intro{gap:7px}
 .avc-articles__newsletter-copy h2{font-size:15.5px}.avc-articles__newsletter-copy p{font-size:11px}
 .avc-articles__newsletter-badge{width:39px;height:39px}
 .avc-articles__single .avc-articles__card-title{font-size:20px}
}
@media(prefers-reduced-motion:reduce){.avc-articles .avc-articles__chevron{transition:none}}