/* Scriptify home page heading: fills the width (one line on desktop, three
   left-aligned lines on phones) and appears word by word on first scroll. */

/* =====================================================================
   5. Home page: typed heading ("Preventative care happens between the
      visits, at the pharmacy.")
   data-sfy-type         types itself out the first time it scrolls into view.
                         ="word" brings it in word by word; ="letter" (or no
                         value) types it letter by letter. A cyan cursor follows.
   data-sfy-fit          sizes the font so the text fills the full width of its
                         container on every screen. Wrap the pieces in
                         <span class="fit-line"> to make it one line on wide
                         screens and stack those pieces on phones (640px or less).
   The text holds its space from the start, so nothing jumps while it types.
   Without JS the heading shows normally; with reduced motion it shows at once.
   ===================================================================== */
[data-sfy-fit] { grid-column: 1 / -1; }              /* span the full row if its parent is a grid */
[data-sfy-fit].fit-on { white-space: nowrap; line-height: 1.1; }
[data-sfy-fit] .fit-inner { display: inline-block; }
/* .fit-line pieces run together as one line on wide screens and stack on
   phones; either way the font is sized so the widest line fills the width */
[data-sfy-fit] .fit-line { display: inline; }
@media (max-width: 640px) {
  [data-sfy-fit] .fit-line { display: block; }
  [data-sfy-fit], [data-sfy-fit].fit-on { text-align: left; margin-left: 0; margin-right: auto; } /* phones: left-aligned */
}

[data-sfy-type] .ty-w { white-space: nowrap; }
[data-sfy-type] .ty-c { position: relative; opacity: 0; }
[data-sfy-type] .ty-c.on { opacity: 1; }
[data-sfy-type="word"] .ty-c { display: inline-block; transform: translateY(.18em); transition: opacity .28s ease-out, transform .32s cubic-bezier(.2, .8, .2, 1); }
[data-sfy-type="word"] .ty-c.on { transform: none; }
[data-sfy-type] .ty-c.caret::after {
  content: ''; position: absolute; top: .1em; bottom: .04em; right: -.14em;
  width: .06em; min-width: 2px; border-radius: 1px;
  background: var(--cyan, #22B8E8);
  animation: ty-blink 1s steps(1) infinite;
}
[data-sfy-type].ty-typing .ty-c.caret::after { animation: none; }   /* solid while typing */
[data-sfy-type] .ty-c.caret.ty-gone::after { opacity: 0; transition: opacity .4s; animation: none; }
@keyframes ty-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* Home page placement: the "Preventative care" section is now just this
   heading, full width, centred on its own screen. Overrides the older
   pinned two-column layout in site.css (.pi-scroll / .pi-pin / .pi-grid). */
.prevent-intro .pi-scroll{height:auto}
.prevent-intro .pi-pin{
  position:static;display:flex;align-items:center;
  min-height:calc(100svh - var(--hdr, 78px));height:auto;
}
.prevent-intro .pi-grid{display:block}
.prevent-intro .pi-head h2,
html[data-route="/"] .prevent-intro .pi-head h2{max-width:none;width:100%;margin:0;letter-spacing:-.035em}
@media (max-width: 900px){
  .prevent-intro .pi-pin{min-height:70svh}
}

/* Any page: a typed one-liner on its own screen (For pharmacies, For clinicians).
   Same look and behaviour as the home page heading above. */
html[data-route] section.band.oneliner{padding:0}
.oneliner .ol-pin{
  min-height:calc(100svh - var(--hdr, 78px));
  display:flex;align-items:center;
}
.oneliner .ol-pin > .wrap{width:100%}
.oneliner h2[data-sfy-fit]{max-width:none;width:100%;margin:0;letter-spacing:-.035em;font-weight:800}
@media (max-width:900px){ .oneliner .ol-pin{min-height:70svh} }