/* ==========================================================================
   Curivya Listings — Theme 1 — Elevated
   Raised cards with soft shadows and rounded corners.

   Styles ONLY the plugin's own markup (.cvl-*) and its dialogs. It does not
   touch the site's header, navigation, typography or footer: a plugin that
   restyles the theme around it is a plugin nobody can drop into an existing
   site.

   Tokens are scoped rather than declared on :root for the same reason — a
   customer's theme may already define its own variables, and a plugin has no
   business overwriting them.
   ========================================================================== */

.cvl-directory,
.cvl-modal {
  /* NEUTRAL FALLBACKS ONLY.
     The organization's primaryColor and secondaryColor are set in Org-Admin,
     and the plugin injects them over these at render time (see brand_css()).
     What is here is what a site sees before those arrive, or if the org never
     set any — deliberately colourless, so an unbranded install looks plain
     rather than wearing somebody else's palette. */
  --cvl-primary: #1F2937;
  --cvl-primary-strong: #1F2937;
  --cvl-on-primary: #FFFFFF;
  --cvl-accent: #6B7280;
  --cvl-accent-ink: #4B5563;
  --cvl-ink: #1B2430;
  --cvl-muted: #5B6472;
  --cvl-line: #E2E5EA;
  --cvl-wash: #F5F6F8;
  --cvl-accent-wash: #F0F1F3;
  --cvl-btn-bg: #1F2937;
  --cvl-btn-fg: #FFFFFF;
  --cvl-btn-bg-hover: #111827;
  --cvl-btn-fg-hover: #FFFFFF;

  --cvl-elevation-z8:
    0 5px 5px -3px rgba(0, 0, 0, .2),
    0 8px 10px 1px rgba(0, 0, 0, .14),
    0 3px 14px 2px rgba(0, 0, 0, .12);
  --cvl-elevation-z12:
    0 7px 8px -4px rgba(0, 0, 0, .2),
    0 12px 17px 2px rgba(0, 0, 0, .14),
    0 5px 22px 4px rgba(0, 0, 0, .12);

  /* This theme's look. Colour is NOT set here. */
  --cvl-radius: 6px;
  --cvl-card-shadow: var(--cvl-elevation-z8);
  --cvl-card-shadow-hover: var(--cvl-elevation-z12);
  --cvl-card-border: 0;
  --cvl-card-lift: translateY(-2px);
}


/* ==========================================================================
   The directory the plugin renders
   ========================================================================== */

/* Spaced at BOTH ends. The directory used to carry a top margin only, and
   since its last child — the clinic grid — has no bottom margin either, the
   final row of cards ended flush against whatever came next. On a generated
   page that is the site footer, so the cards butted straight into it with the
   card shadow bleeding over the seam. */
.cvl-directory { margin: .5rem 0 2.5rem; }

/* The content column for GENERATED pages only — see filter_page_content().
   On the directory page the organization's own layout supplies this; there the
   shell is not emitted at all, so nothing here can narrow a page they designed.
   :where() keeps specificity at zero so any theme rule wins over it, and the
   width is a variable so a site can widen, narrow or neutralise it. */
:where(.cvl-shell) {
  max-width: var(--cvl-shell-width, 1140px);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
  box-sizing: border-box;
}

/* Only ever present when the theme printed no heading of its own, so it is
   deliberately unstyled beyond spacing — whatever the site does with h1
   everywhere else is what this should look like. */
.cvl-title { margin: 0 0 .5rem; }

/* --- organisation intro --- */
.cvl-org { margin: 0 0 1.6rem; }
.cvl-org__logo { max-height: 64px; width: auto; display: block; margin: 0; }

/* --- stat tiles --- */
.cvl-stats {
  list-style: none; padding: 0; margin: 0 0 1.6rem;
  /* auto-FILL, not auto-fit: with only two tiles auto-fit stretches each one
     across half the page, which reads as a banner rather than a statistic. */
  display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 12rem)); gap: .7rem;
}
.cvl-stat {
  background: var(--cvl-primary); color: var(--cvl-on-primary);
  padding: .85rem 1rem; border-radius: var(--cvl-radius);
  box-shadow: var(--cvl-card-shadow);
  display: flex; flex-direction: column; gap: .1rem;
}
.cvl-stat__value {
  font-size: 1.75rem; font-weight: 700; line-height: 1.1;
  /* WHITE, not --cvl-accent. The tile's background is --cvl-primary, so
     painting the number in the accent put one raw brand colour on another:
     Ally rendered #af63d6 on #0A75D8 at 1.23:1, a figure you could not read at
     any size. --cvl-on-primary is derived against this exact background, and
     because --cvl-primary is produced by readable($c, 4.5) it always resolves
     to white. Size and weight already make the number the loudest thing in the
     tile; it does not also need a second colour. */
  color: var(--cvl-on-primary); font-variant-numeric: tabular-nums;
}
.cvl-stat__label {
  color: var(--cvl-on-primary);
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  opacity: .85; font-weight: 600;
}

/* --- breadcrumbs --- */
.cvl-crumbs ol {
  list-style: none; padding: 0; margin: 0 0 1.1rem;
  display: flex; flex-wrap: wrap; gap: .3rem .45rem; font-size: .85rem;
}
.cvl-crumbs li { display: flex; gap: .45rem; align-items: baseline; }
.cvl-crumbs li + li::before { content: "\203A"; color: var(--cvl-accent); font-weight: 700; }
.cvl-crumbs a { color: var(--cvl-muted); text-decoration: none; }
.cvl-crumbs a:hover { color: var(--cvl-primary); text-decoration: underline; }
.cvl-crumbs [aria-current] { color: var(--cvl-primary); font-weight: 600; }

/* --- state index --- */
.cvl-state-list {
  list-style: none; padding: 0; margin: 1rem 0 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .7rem;
}
.cvl-state-list li {
  position: relative;
  background: #fff;
  border-radius: var(--cvl-radius);
  box-shadow: var(--cvl-card-shadow);
  overflow: hidden;                /* clips the artwork to the rounded corner */
  display: flex; flex-direction: column;
  transition: box-shadow .15s ease, transform .15s ease;
}
.cvl-state-list li:hover { box-shadow: var(--cvl-card-shadow-hover); transform: var(--cvl-card-lift); }
.cvl-state-list li:focus-within { box-shadow: var(--cvl-card-shadow-hover); }
.cvl-state-list a::after { content: ""; position: absolute; inset: 0; }
.cvl-state-list a:focus-visible { outline: 3px solid var(--cvl-accent); outline-offset: 3px; }
/* State artwork: a silhouette masked over a gradient, mirroring Curivya's
   own StateArtComponent so the two surfaces look like one product. */
.cvl-state-art {
  position: relative;
  /* Soft neutral ground, deliberately NOT the brand colour: the shape carries
     the brand, and tinting both leaves the shape nothing to contrast against. */
  background: linear-gradient(160deg, #f4f6f8 0%, #e9edf1 100%);
}
.cvl-state-art__shape {
  position: absolute; inset: 0;
  /* Single hue — brand colour to a lighter tint of itself. Mixing two brand
     colours averages them into mud; diluting a near-black into white gives
     grey blobs. One hue cannot do either, whatever the client configures. */
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--cvl-primary) 94%, #fff) 0%,
    color-mix(in srgb, var(--cvl-primary) 58%, #fff) 100%);
  /* `auto 78%`, never a single value: the mask-size shorthand's one-value form
     sets WIDTH, which crops tall states top and bottom on a wide tile. */
  -webkit-mask: var(--cvl-shape) center / auto 78% no-repeat;
          mask: var(--cvl-shape) center / auto 78% no-repeat;
}
.cvl-state-card__art {
  height: 132px;
  border-bottom: 3px solid var(--cvl-accent);
}
.cvl-state-card__body { padding: .8rem 1rem; display: flex; flex-direction: column; gap: .15rem; }
.cvl-state-list a {
  font-weight: 700; font-size: 1.05rem;
  text-decoration: underline;
  text-decoration-color: var(--cvl-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: .18em;
}
.cvl-state-list li:hover a { color: var(--cvl-accent); }

/* --- state page hero --- */
.cvl-state-hero {
  margin: 0 0 1.2rem; border-radius: 8px; overflow: hidden;
  height: clamp(130px, 19vw, 200px);
  border-bottom: 3px solid var(--cvl-accent);
}
.cvl-count { font-size: .85rem; color: var(--cvl-muted); }
.cvl-count--beds { color: var(--cvl-primary); font-weight: 600; }

/* --- clinic cards --- */
.cvl-clinic-list {
  list-style: none; padding: 0; margin: 1.2rem 0 0;
  /* TWO per row, not auto-fill. Three-up squeezed the cover into a strip and
     left the name wrapping over two lines; these cards carry an image, chips
     and a footer, and they need the width. */
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem;
}
.cvl-clinic {
  position: relative;              /* anchor for the stretched link below */
  background: #fff;
  border: var(--cvl-card-border);
  border-radius: var(--cvl-radius);
  box-shadow: var(--cvl-card-shadow);
  overflow: hidden;                /* clips the cover to the rounded corner */
  display: flex; flex-direction: column;
  transition: box-shadow .15s ease, transform .15s ease;
}

/* --- the cover ---
   A photo where the organization uploaded one, their logo where they did not,
   and the state silhouette as the last resort. The logo is CONTAINED on a wash
   rather than cropped to fill: a logo cropped to a 16:9 box is a logo with its
   name cut off. */
.cvl-clinic__media {
  position: relative; aspect-ratio: 5 / 2; background: var(--cvl-wash);
  border-bottom: 3px solid var(--cvl-accent);
  /* Nothing may paint outside the cover band. Belt and braces for the rule
     below, because the failure mode is invisible in the markup. */
  overflow: hidden;
}
/* SCOPED, and absolutely positioned. Two separate defences.
   Nearly every theme ships `img { max-width: 100%; height: auto }`. That is a
   type selector, so a bare `.cvl-clinic__photo` ties with it on specificity and
   loses on order — the image then takes its natural height. Ally's covers are
   1254x1254 flyers, so a 212px band rendered a 529px image straight over the
   clinic's name and city: the name was in the markup the whole time, sitting
   underneath a picture. Scoping under .cvl-directory wins the height outright.
   (Note that absolute positioning alone does NOT save this: for a REPLACED
   element, `height: auto` uses the intrinsic height even with top and bottom
   both pinned, so the insets are containment, not sizing.) */
.cvl-directory .cvl-clinic .cvl-clinic__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.cvl-clinic__logo {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 1.2rem; box-sizing: border-box;
}
.cvl-clinic__logo img { max-width: 62%; max-height: 72%; object-fit: contain; }
.cvl-clinic__art { position: absolute; inset: 0; }

.cvl-clinic__body { padding: 1.1rem 1.3rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
.cvl-clinic__name {
  margin: 0 0 .15rem; font-size: 1.15rem; line-height: 1.25;
  display: flex; align-items: center; gap: .35rem;
}
/* The clinic name was the ONLY route to the detail page and was styled exactly
   like a heading — same colour as every other heading, no underline. The one
   thing on the card that looked pressable was the booking button, which goes
   somewhere else entirely. Underline it so it reads as a link standing still,
   not only on hover. */
.cvl-clinic__name a {
  text-decoration: underline;
  text-decoration-color: var(--cvl-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: .18em;
}
.cvl-clinic__name a::after {
  /* Stretched link: the whole card becomes the target without adding a second
     anchor, so keyboard and screen-reader semantics stay as they were. */
  content: ""; position: absolute; inset: 0; border-radius: var(--cvl-radius);
}
.cvl-clinic__verified {
  flex: none; width: 1.05rem; height: 1.05rem; border-radius: 50%;
  background: var(--cvl-primary); color: var(--cvl-on-primary);
  font-size: .62rem; line-height: 1.05rem; text-align: center; font-weight: 700;
}
.cvl-clinic:hover { box-shadow: var(--cvl-card-shadow-hover); transform: var(--cvl-card-lift); }
.cvl-clinic:hover .cvl-clinic__name a { color: var(--cvl-accent); }
.cvl-clinic:focus-within { box-shadow: var(--cvl-card-shadow-hover); }
.cvl-clinic__name a:focus-visible { outline: 3px solid var(--cvl-accent); outline-offset: 3px; }

.cvl-clinic__where {
  font-size: .78rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--cvl-muted); font-weight: 600; margin: 0 0 .6rem;
}
.cvl-clinic__tags {
  list-style: none; padding: 0; margin: 0 0 .7rem;
  display: flex; flex-wrap: wrap; gap: .3rem; align-items: center;
}
.cvl-clinic__more { font-size: .78rem; font-weight: 600; color: var(--cvl-muted); }
.cvl-clinic__stat { margin: 0 0 .8rem; }
.cvl-pill {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .75rem; font-weight: 700;
  padding: .22rem .6rem; border-radius: 999px;
  background: var(--cvl-wash); color: var(--cvl-muted);
}
.cvl-pill--ok { background: var(--cvl-accent-wash); color: var(--cvl-accent-ink); }

/* Footer: the insurance signal on the left, the way in on the right. Lifted
   above the stretched link so the button is a button, not a slice of the card. */
.cvl-clinic__foot {
  margin-top: auto; padding-top: .3rem;
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
}
.cvl-view {
  position: relative; z-index: 1;
  font-size: .82rem; font-weight: 700; text-decoration: none;
  padding: .35rem .85rem; border-radius: 999px;
  border: 1px solid var(--cvl-accent); color: var(--cvl-accent-ink);
}
.cvl-view:hover { background: var(--cvl-accent); color: var(--cvl-on-primary); }

/* The booking button sits inside the stretched link's area, so it needs to be
   lifted above it or the card link swallows every click on it. */
.cvl-clinic .cvl-cta { position: relative; z-index: 1; }
.cvl-address, .cvl-phone, .cvl-fax { margin: .15rem 0; font-size: .95rem; }
.cvl-address { color: var(--cvl-muted); }
.cvl-phone a { font-weight: 600; text-decoration: none; }
.cvl-clinic .cvl-cta { margin-top: auto; padding-top: .8rem; }

.cvl-beds {
  margin: .5rem 0 0; font-size: .88rem; font-weight: 600; color: var(--cvl-primary);
  display: flex; align-items: center; gap: .4rem;
}
.cvl-beds::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--cvl-accent); flex: 0 0 auto;
}

/* --- facility page --- */
/* Section headings were rendering LARGER than the page title, so "Insurance
   plans accepted at Gadsden Clinic" was the loudest thing on a page about a
   clinic. Pin them well below the title rather than inheriting TT1's scale. */
.cvl-directory h2 { font-size: 1.3rem; line-height: 1.25; margin: 0 0 .6rem; }

.cvl-lede { font-size: 1.05rem; color: var(--cvl-muted); margin: 0 0 1.6rem; }

/* Two columns: reading material left, everything actionable pinned right. */
.cvl-facility {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21rem;
  gap: 1.6rem;
  align-items: start;
}
.cvl-facility__side { position: sticky; top: 1.5rem; }

.cvl-card {
  background: #fff;
  border-top: 3px solid var(--cvl-accent);
  border-radius: var(--cvl-radius);
  box-shadow: var(--cvl-card-shadow);
  padding: 1.1rem 1.2rem 1.2rem;
}
.cvl-card__title {
  font-size: .78rem !important;   /* beats the .cvl-directory h2 rule above */
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--cvl-muted); font-weight: 700;
  margin: 0 0 .8rem !important;
}

/* Labelled rows. Three stacked unlabelled lines of digits leave the reader to
   work out which is the phone and which is the fax. */
.cvl-contact__rows { margin: 0 0 1.1rem; display: grid; gap: .7rem; }
.cvl-contact__rows dt {
  font-size: .72rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--cvl-muted); font-weight: 700; margin: 0 0 .1rem;
}
/* TT1 indents every <dd> with padding-left: calc(2 * spacing-horizontal) —
   NOT margin, so zeroing the margin leaves the indent in place and the value
   floats away from its own label. */
.cvl-contact__rows dd { margin: 0; padding-left: 0; font-size: .95rem; line-height: 1.45; }
.cvl-contact__rows dd a { font-weight: 600; text-decoration: none; }
.cvl-contact__rows .cvl-street { color: var(--cvl-ink); }

/* --- clinicians: compact tiles, full profile in a dialog --- */
.cvl-providers { margin: 0 0 2rem; }
/* --- clinician rows -------------------------------------------------------
   ONE PER LINE. As a grid of tiles a clinician got a name and a role and
   nothing else, so every row looked the same and none of them answered the
   question being asked — what does this person treat, and are they taking
   patients. Full width buys room for that summary and for the row's own Book
   button, without which choosing a clinician still meant going back to the
   clinic's one CTA. */
.cvl-provider-list {
  list-style: none; padding: 0; margin: .9rem 0 0;
  display: grid; grid-template-columns: 1fr; gap: .7rem;
}
/* The CARD is the row, not the anchor inside it. The anchor and the actions
   are siblings — a link cannot contain a link — so giving each its own white
   background drew a seam down the middle of every row. */
.cvl-provider {
  display: flex; flex-wrap: wrap; align-items: stretch;
  background: #fff; border: var(--cvl-card-border);
  border-radius: var(--cvl-radius); box-shadow: var(--cvl-card-shadow);
  transition: box-shadow .15s ease, transform .15s ease;
}
.cvl-provider:hover { box-shadow: var(--cvl-card-shadow-hover); transform: var(--cvl-card-lift); }
.cvl-provider:focus-within { box-shadow: var(--cvl-card-shadow-hover); }
/* aspect-ratio, so a theme's `height: auto` cannot turn a square avatar into
   whatever shape the source file happens to be. Same reason as the cover. */
.cvl-provider__photo { width: 72px; height: 72px; aspect-ratio: 1; }

/* The row's actions sit OUTSIDE its anchor — a link inside a link is invalid
   and the browser closes the outer one early — so the two are laid side by
   side here rather than nested. */
.cvl-provider__actions {
  display: flex; flex-direction: column; justify-content: center; gap: .4rem;
  padding: .7rem .85rem; margin-left: auto;
  border-left: 1px solid var(--cvl-line);
}
.cvl-provider__profile {
  font-size: .82rem; font-weight: 600; text-align: center;
  color: var(--cvl-primary); text-decoration: none; white-space: nowrap;
}
.cvl-provider__profile:hover { text-decoration: underline; }

.cvl-provider__tags { display: flex; flex-wrap: wrap; gap: .3rem; margin: .15rem 0 0; }
.cvl-provider__tag {
  font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  padding: .12rem .45rem; border-radius: 999px;
  background: var(--cvl-wash); color: var(--cvl-muted);
}
.cvl-provider__tag--open { background: var(--cvl-accent); color: var(--cvl-on-accent, #fff); }
.cvl-provider__facts { font-size: .78rem; color: var(--cvl-muted); }
.cvl-provider__blurb {
  font-size: .84rem; color: var(--cvl-ink); line-height: 1.45;
  /* Two lines, then stop. Bios run to several hundred words on some records
     and the row is a summary — the whole thing is on the clinician's page. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* --- a clinician's own page --- */
.cvl-bio { display: flex; gap: 1rem; align-items: flex-start; margin: 0 0 1.4rem; }
.cvl-bio__photo {
  width: 140px; height: 140px; aspect-ratio: 1; flex: none;
  border-radius: var(--cvl-radius); object-fit: cover; background: var(--cvl-wash);
}
.cvl-bio__body { min-width: 0; }
.cvl-bio__body p { margin: .35rem 0 0; }
.cvl-contact__at { margin: 0 0 .6rem; font-weight: 600; }
.cvl-backlink { margin: 1.4rem 0 0; font-size: .9rem; }

@media (max-width: 720px) {
  .cvl-clinic-list { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .cvl-provider__actions {
    width: 100%; flex-direction: row; justify-content: flex-start;
    padding: 0 .85rem .7rem; border-radius: 0 0 var(--cvl-radius) var(--cvl-radius);
  }
  .cvl-bio { flex-direction: column; }
  .cvl-bio__photo { width: 110px; height: 110px; }
}
/* SPECIFICITY, again — and worse than the .entry-header case.
   TT1 styles buttons as `button:not(:hover):not(:active):not(.has-text-color)`,
   which is (0,3,1) and deliberately built to outrank a plain class. A <button>
   that is meant to look like a card, not a button, has to clear that bar or it
   renders as a solid navy blob with white text, which is exactly what it did.
   Scoping under .cvl-directory and matching the :not() chain gets there.

   white-space is here for the same reason, and it is not cosmetic. A theme that
   sets `white-space: nowrap` on buttons — a common way to stop a label wrapping
   mid-phrase — inherits into this card, and a clinician's name and role then
   refuse to wrap: they run past the card, and the next card in the grid paints
   its own white background over the overflow. Names came out as "Vedavyasa
   Biliyar, M" and every role as "MEDICATION MANAGEME". Nothing in the plugin
   sets nowrap, so this asserts the value the layout depends on rather than
   inheriting whatever the host happens to apply to its buttons. */
.cvl-directory .cvl-provider__open,
.cvl-directory .cvl-provider__open:not(:hover):not(:active):not(.has-text-color),
.cvl-directory .cvl-provider__open:hover,
.cvl-directory .cvl-provider__open:active {
  flex: 1 1 22rem; min-width: 0;
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: .85rem;
  align-items: center; text-align: left;
  white-space: normal;
  /* Underline OFF for the row. A theme that underlines links — most do —
     underlined the role, every tag, the facts line and the bio, because all of
     them are inside the anchor. Only the name carries the affordance. */
  text-decoration: none;
  background: transparent; color: var(--cvl-ink);
  border: 0; border-radius: var(--cvl-radius);
  box-shadow: none;
  padding: .7rem .85rem;
  cursor: pointer; font: inherit;
  transition: box-shadow .15s ease, transform .15s ease;
}
.cvl-directory .cvl-provider__open:hover { box-shadow: none; transform: none; }
.cvl-provider:hover .cvl-provider__name { text-decoration: underline; }
.cvl-directory .cvl-provider__open:focus-visible { outline: 3px solid var(--cvl-accent); outline-offset: 3px; }

.cvl-provider__photo {
  width: 56px; height: 56px; border-radius: 50%;
  object-fit: cover;              /* portraits arrive at assorted aspect ratios */
  background: var(--cvl-wash);
}
.cvl-provider__photo--none { display: block; border: 2px dashed var(--cvl-line); box-sizing: border-box; }
.cvl-provider__body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.cvl-provider__name {
  font-weight: 700; font-size: .95rem; line-height: 1.25; color: var(--cvl-primary);
}
.cvl-provider__role {
  font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cvl-muted); font-weight: 700;
}

/* --- the profile, once the dialog has it --- */
.cvl-modal--profile { height: auto; max-height: min(86vh, 760px); }
/* flex-grow 0: the base .cvl-modal__body grows to fill, which is right for the
   booking iframe and wrong here — a short profile left most of the dialog
   empty. Shrink-to-fit, and scroll only once it hits max-height. */
.cvl-modal--profile .cvl-modal__body { flex: 0 1 auto; }
.cvl-modal__body--scroll { display: block; overflow-y: auto; padding: 1.2rem 1.4rem 1.5rem; }
.cvl-profile__head { display: flex; gap: 1rem; align-items: center; margin: 0 0 1rem; }
.cvl-profile__photo {
  width: 88px; height: 88px; border-radius: 50%; object-fit: cover;
  background: var(--cvl-wash); flex: 0 0 auto;
}
.cvl-profile__name { font-size: 1.2rem; font-weight: 700; color: var(--cvl-primary); margin: 0 0 .15rem; }
.cvl-profile__role {
  font-size: .72rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--cvl-muted); font-weight: 700; margin: 0;
}
.cvl-profile__bio { margin: 0 0 1.1rem; line-height: 1.6; color: var(--cvl-ink); }
.cvl-profile__subhead {
  font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cvl-muted); font-weight: 700; margin: 0 0 .5rem;
}

/* --- services --- */
.cvl-service-group { margin: 0 0 1.8rem; }
.cvl-service-list { list-style: none; padding: 0; margin: .8rem 0 0; display: grid; gap: .8rem; }
.cvl-service {
  background: #fff; border-radius: var(--cvl-radius); border-top: 3px solid var(--cvl-accent);
  box-shadow: var(--cvl-card-shadow); padding: .9rem 1.1rem 1rem;
}
.cvl-service__name { font-size: 1.05rem; margin: 0 0 .1rem; }
.cvl-service__where {
  font-size: .72rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--cvl-muted); font-weight: 700; margin: 0 0 .6rem;
}
.cvl-service__clinics {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .2rem .9rem;
  font-size: .93rem;
}
.cvl-service__clinics a { text-decoration: underline; text-decoration-color: var(--cvl-accent); text-underline-offset: .16em; }

/* Chips for the per-clinic service list — short labels, so a bulleted column
   wastes the width a card has. */
.cvl-facility-services { margin: 0 0 1.6rem; }
.cvl-chip-list { list-style: none; padding: 0; margin: .7rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.cvl-chip {
  background: var(--cvl-wash); border: 1px solid var(--cvl-line);
  border-radius: 999px; padding: .3rem .75rem; font-size: .88rem; color: var(--cvl-primary);
}

.cvl-insurance { margin: 0 0 1.2rem; }
.cvl-insurance__intro { color: var(--cvl-muted); margin: 0 0 .9rem; }

.cvl-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: stretch; margin: 0; }
.cvl-actions .cvl-book { flex: 1 1 100%; text-align: center; }
.cvl-actions .cvl-action { flex: 1 1 auto; text-align: center; }
.cvl-actions .cvl-cta { margin: 0; }
.cvl-action, .cvl-book {
  display: inline-block; padding: .62rem 1.15rem; border-radius: 5px;
  font-weight: 600; font-size: .95rem; text-decoration: none; line-height: 1.2;
  border: 2px solid var(--cvl-primary);
}
.cvl-book {
  background: var(--cvl-btn-bg); color: var(--cvl-btn-fg); border-color: var(--cvl-btn-bg);
}
.cvl-book:hover {
  background: var(--cvl-btn-bg-hover); color: var(--cvl-btn-fg-hover); border-color: var(--cvl-btn-bg-hover);
}
.cvl-action { color: var(--cvl-primary); background: transparent; border-color: var(--cvl-btn-bg); }
.cvl-action:hover {
  background: var(--cvl-btn-bg); color: var(--cvl-btn-fg); border-color: var(--cvl-btn-bg);
}

/* --- insurance --- */
/* Multi-column, not grid: a grid puts every item in a fixed row, so one plan
   name that wraps to two lines leaves a blank gap beside every item in that
   row. Columns flow the list instead and stay tight. */
.cvl-insurance-list {
  list-style: none; padding: 0; margin: .8rem 0 0;
  columns: 15rem; column-gap: 1.6rem;
}
.cvl-insurance-list li { break-inside: avoid; margin: 0 0 .35rem; }
.cvl-insurance-list li { padding-left: 1.15rem; position: relative; font-size: .93rem; }
.cvl-insurance-list li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: .5rem; height: .5rem; background: var(--cvl-accent);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
/* --- payer cards ---
   Logos rather than a bulleted list: people recognise their insurer by its
   mark, and several of these names are near-identical strings. A payer with no
   mark on file gets its name set in type as the card, which reads as a
   deliberate entry instead of a hole where an image failed. */
.cvl-payers {
  list-style: none; padding: 0; margin: .9rem 0 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .7rem;
}
.cvl-payer {
  background: #fff; border: var(--cvl-card-border);
  border-radius: var(--cvl-radius); box-shadow: var(--cvl-card-shadow);
  padding: .9rem .8rem; min-height: 6.5rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem;
  text-align: center;
}
.cvl-payer__logo { display: flex; align-items: center; justify-content: center; height: 3rem; width: 100%; }
/* CONTAIN, never cover. These marks arrive at every aspect ratio there is, and
   cropping a logo to fill a box is how you publish half an insurer's name. */
.cvl-payer__logo img { max-height: 100%; max-width: 82%; object-fit: contain; }
.cvl-payer__name { font-size: .78rem; font-weight: 700; color: var(--cvl-muted); line-height: 1.3; }
.cvl-payer--text .cvl-payer__name { font-size: .95rem; color: var(--cvl-ink); }

.cvl-insurance-help {
  background: var(--cvl-accent-wash); border-left: 4px solid var(--cvl-accent);
  border-radius: 0 5px 5px 0; padding: .85rem 1.1rem; margin: 1.4rem 0 0;
  font-size: .95rem; max-width: 46rem;
}

/* --- dialogs: booking + clinician profile --- */
/* Everything below is the <dialog> element's own chrome. Almost none of it
   existed before, so both dialogs rendered as a raw UA <dialog>: a 2-3px solid
   black border, square corners, 1em of padding and width:fit-content.

   The header is deliberately LIGHT rather than a slab of --cvl-primary. Three
   reasons, in order of how much they matter:
     1. The bar colour is whatever the org saved in Org-Admin. A saturated fill
        only looks considered when that colour happens to be good; on a light
        bar any brand colour works, because it is carried by a 3px edge and the
        title rather than by 60px of solid fill.
     2. It stopped fighting the host site. Ally's page furniture is #225097 and
        the org record is #0A75D8 — near enough to read as a mistake rather
        than a contrast.
     3. The embedded booking wizard is the content. Chrome should recede. */
.cvl-modal {
  padding: 0;
  /* NEUTRAL, and never the theme's card border. The UA default for <dialog>
     is a 2px SOLID BLACK frame, which is what was on screen before any of
     this existed. --cvl-card-border would work for theme2 but is 0 in theme1,
     leaving the dialog edgeless against a pale backdrop, and neither theme
     should be able to put a hard colour around a modal. A soft slate hairline
     reads as a crisp edge over the dim without ever going black. */
  border: 1px solid rgba(15, 23, 42, .1);
  /* Twice the card radius: a wide dialog with a 6px corner reads as square.
     Scales with the theme, so theme2 stays at its near-square 4px. */
  border-radius: calc(var(--cvl-radius) * 2);
  /* z12 in BOTH themes. "Flat" in theme2 describes cards in the page flow; a
     modal floating over a dimmed backdrop is elevated by definition, and
     theme2 still reads as itself through its square corners. */
  box-shadow: var(--cvl-elevation-z12);
  background: #fff;
  color: var(--cvl-ink);

  /* A booking wizard needs room. The preferred size is the first pair; the
     min-* pair stops it collapsing to something cramped on a short or narrow
     window. Every value is wrapped in min() against the viewport so the
     minimums can never push the dialog off-screen — a bare `min-width: 720px`
     would overflow a 700px-wide window instead of shrinking. */
  width: min(96vw, 880px);
  height: min(92vh, 900px);
  min-width: min(96vw, 720px);
  min-height: min(86vh, 620px);
  /* Clips the bar's brand edge to the rounded top corners. */
  overflow: hidden;
}
/* Only when open: a <dialog> must stay display:none while closed, so this
   cannot go on the bare element. */
.cvl-modal[open] { display: flex; flex-direction: column; }
/* ::backdrop does not inherit custom properties in every engine, so this is a
   literal rather than a token. */
.cvl-modal::backdrop { background: rgba(15, 23, 42, .55); }

.cvl-modal__bar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: .75rem;
  padding: .9rem 1rem .9rem 1.2rem;
  background: #fff;
  color: var(--cvl-ink);
  border-bottom: 1px solid var(--cvl-line);
  /* The brand, as a 3px edge along the top of the dialog. An inset shadow
     rather than a border so it cannot alter the box height, and rather than an
     extra element so the markup stays as it is. */
  box-shadow: inset 0 3px 0 var(--cvl-primary);
}
.cvl-modal__title {
  flex: 1 1 auto; min-width: 0;
  font-size: 1.05rem; font-weight: 700; line-height: 1.3;
  /* brand_css() has already darkened this to clear AA on white. */
  color: var(--cvl-primary);
}

/* SPECIFICITY: the same fight as .cvl-provider__open above, and lost the same
   way first time round. TT1 styles buttons at
   `button:not(:hover):not(:active):not(.has-background)` — (0,3,1), built to
   outrank a plain class — so `.cvl-modal__close` (0,1,0) lost and the X
   rendered as a solid navy tile in the header bar. Matching the :not() chain
   under .cvl-modal reaches (0,5,0). */
.cvl-modal .cvl-modal__close,
.cvl-modal .cvl-modal__close:not(:hover):not(:active):not(.has-background):not(.has-text-color) {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 999px;
  background-color: var(--cvl-wash);
  color: var(--cvl-muted);
  font: 400 1.25rem/1 system-ui, sans-serif;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.cvl-modal .cvl-modal__close:hover:not(.has-background),
.cvl-modal .cvl-modal__close:active:not(.has-background) {
  background-color: var(--cvl-line);
  color: var(--cvl-ink);
}
/* TT1 styles plain `button:focus` with a dotted ring, and showModal() focuses
   this button the instant the dialog opens — so that ring appeared on every
   open, mouse or keyboard. Killing it on :focus and redrawing on :focus-visible
   only means a mouse user sees a clean header while a keyboard user still gets
   a clear target. Both rules are (0,3,0); the second wins on order. */
.cvl-modal .cvl-modal__close:focus { outline: 0; }
.cvl-modal .cvl-modal__close:focus-visible {
  outline: 3px solid var(--cvl-accent);
  outline-offset: 2px;
}

.cvl-modal__body { flex: 1 1 auto; min-height: 0; display: flex; background: var(--cvl-wash); }
/* The booking iframe fills whatever the bar leaves. Sized here rather than on
   the element so the height follows the dialog instead of a fixed guess. */
.cvl-modal__body > iframe {
  flex: 1 1 auto;
  width: 100%; height: 100%;
  border: 0; display: block;
}

@media (max-width: 40rem) {
  /* Near-fullscreen on a phone: a booking wizard in a 620px box with margins
     either side wastes the only screen that cannot spare it. */
  .cvl-modal { width: 100vw; height: 100dvh; max-width: 100vw; border-radius: 0; border: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cvl-clinic, .cvl-state-list li, .cvl-provider__open { transition: none; }
  .cvl-clinic:hover, .cvl-state-list li:hover, .cvl-provider__open:hover { transform: none; }
}

@media (max-width: 60rem) {
  /* Sidebar drops under the content; sticky is meaningless once stacked. */
  .cvl-facility { grid-template-columns: 1fr; }
  .cvl-facility__side { position: static; }
}
@media (max-width: 40rem) {
  .cvl-actions { flex-direction: column; align-items: stretch; }
  .cvl-action, .cvl-book { text-align: center; }
}

/* ==========================================================================
   Host theme link bleed
   ==========================================================================
   Nothing below is a new design decision. Every rule re-states a colour or an
   underline this file already set further up, at a specificity a host theme
   cannot outrank.

   A theme's stylesheet is enqueued AFTER a plugin's, so a theme rule wins on
   source order at equal specificity and on specificity above it. Measured on
   Hello Elementor, which is what sent us looking:

     .page-content a    { text-decoration: underline }              (0,1,1)
     .elementor-kit-N a { color: var(--e-global-color-primary) }    (0,1,1)

   against .cvl-book / .cvl-action at (0,1,0) and .cvl-crumbs a at (0,1,1).
   The visible result was a solid green Book button carrying dark-blue
   underlined text, and every link in the directory wearing the theme's
   underline in place of the accent one drawn here.

   Scoping to the plugin's own roots adds one class to each selector, which
   clears both without !important and cannot reach a link outside the
   directory or its dialogs.

   Longhands, never the `text-decoration` shorthand: the shorthand resets
   decoration-color and -thickness to their initial values, which is precisely
   how the accent underline was lost in the first place. */

.cvl-directory a.cvl-book,
.cvl-modal a.cvl-book {
  color: var(--cvl-btn-fg);
  text-decoration-line: none;
}
.cvl-directory a.cvl-book:hover,
.cvl-modal a.cvl-book:hover { color: var(--cvl-btn-fg-hover); }

.cvl-directory a.cvl-action { color: var(--cvl-primary); text-decoration-line: none; }
.cvl-directory a.cvl-action:hover { color: var(--cvl-btn-fg); }

.cvl-directory .cvl-crumbs a,
.cvl-directory .cvl-phone a,
.cvl-directory .cvl-contact__rows dd a,
.cvl-directory a.cvl-view,
.cvl-directory .cvl-provider__profile { text-decoration-line: none; }

.cvl-directory .cvl-crumbs a:hover,
.cvl-directory a.cvl-view:hover,
.cvl-directory .cvl-provider__profile:hover { text-decoration-line: underline; }

/* Underlined on purpose, in the accent rather than the theme's default. */
.cvl-directory .cvl-state-list a,
.cvl-directory .cvl-clinic__name a {
  text-decoration-line: underline;
  text-decoration-color: var(--cvl-accent);
  text-decoration-thickness: 2px;
}