/* Loonis Sites additions on top of the template stylesheet */

/* hide animated elements until the motion kit runs (removed instantly if it can't) */
html.lx-motion [animate="fade-up"],
html.lx-motion [animate="heading-reveal"],
html.lx-motion [animate="stagger"],
html.lx-motion [animate="image-reveal"],
html.lx-motion [animate="rule-draw"],
html.lx-motion [animate="bar-grow"],
html.lx-motion [animate="bar-segments"] { opacity: 0; }

/* card hover zoom (1.04, 0.6s) */
html:not(.lx-ix) [class*="_card"] img, html:not(.lx-ix) .card-media img { transition: transform var(--motion-slow) var(--ease-2); }
html:not(.lx-ix) [class*="_card"]:hover img:not([class*="icon"]), html:not(.lx-ix) .card-media:hover img { transform: scale(1.04); }
.card-media { overflow: hidden; }

/* lightbox */
.lx-lightbox { position: fixed; inset: 0; z-index: 9999; background: var(--tone-ink-92); display: flex; align-items: center; justify-content: center; }
.lx-lightbox img { max-width: 86vw; max-height: 86vh; object-fit: contain; border-radius: var(--radius-card); }
.lx-lightbox button { position: absolute; background: none; border: 0; color: var(--role-page); font-size: calc(var(--size-2-5rem) * var(--scale-headings)); cursor: pointer; padding: var(--spacing-1rem); line-height: var(--leading-100); }
.lx-lb-close { top: 1rem; right: 1rem; }
.lx-lb-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lx-lb-next { right: 1rem; top: 50%; transform: translateY(-50%); }

/* tabs: Webflow hides inactive panes */
.w-tab-pane { display: none; }
.w-tab-pane.w--tab-active { display: block; }

/* single-page lists: Webflow hides pagination when there is nothing to page */
.w-pagination-wrapper { display: none; }

/* Oriel logos in the dark themes (Oct 30 2026): the template ships a light-page logo (oriel-logo-v2) and a
   dark-band logo (oriel-logo-white-v3). In the dark themes the page turns dark and the footer band turns light,
   so each place shows the other file. Template files only: an owner logo is untouched. */
html[data-theme="evening-clinic"] img[src$="/_t/oriel/images/oriel-logo-v2.svg"],
html[data-theme="inverted"] img[src$="/_t/oriel/images/oriel-logo-v2.svg"] {
  content: url('/_t/oriel/images/oriel-logo-white-v3.svg');
}
html[data-theme="evening-clinic"] img[src$="/_t/oriel/images/oriel-logo-white-v3.svg"],
html[data-theme="inverted"] img[src$="/_t/oriel/images/oriel-logo-white-v3.svg"] {
  content: url('/_t/oriel/images/oriel-logo-v2.svg');
}

/* Oriel deep green text (Oct 30 2026): headlines, eyebrows, chips and badges drawn in the deep green read
   their own role, so they turn light in the dark themes while the deep green bands stay deep. Same colour in Original. */
.text-color-deep, .is-deep, .eyebrow.is-deep, .chip, .plan-card_badge, .form_message-success, .button.is-alternative {
  color: var(--role-ink-deep);
}

/* ---- lx-icons: one-colour logo and icons follow the role colours (written by _tools/design-system/icons.mjs) ----
   The template's own one-colour SVG files are drawn as a mask filled with a role colour; the file
   itself is moved out of view. This runs in every theme except Original, and when the Style panel
   has changed a colour (<html data-colours="custom">). In Original the files show as drawn.
   The selectors match the template's own file names only: an owner logo or a replaced image has
   another src, so it shows exactly as uploaded and is never recoloured. */
:is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/oriel/images/ic-arrow-right-accent.svg"],
:is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/oriel/images/ic-arrow-right-black.svg"],
:is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/oriel/images/ic-arrow-up-right-accent.svg"],
:is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/oriel/images/ic-check-accent.svg"],
:is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/oriel/images/ic-chevron-down-black.svg"],
:is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/oriel/images/ic-phone-muted.svg"],
:is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/oriel/images/ic-plus-black.svg"],
:is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/oriel/images/ic-star-accent.svg"],
:is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/oriel/images/ic-star-white.svg"],
:is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/oriel/images/icon-cardiology.svg"],
:is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/oriel/images/icon-dermatology.svg"],
:is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/oriel/images/icon-diagnostic-imaging.svg"],
:is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/oriel/images/icon-physiotherapy-v2.svg"],
:is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/oriel/images/icon-sports-medicine.svg"],
:is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/oriel/images/icon-womens-health.svg"],
:is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/oriel/images/oriel-icon-call-back.svg"],
:is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/oriel/images/oriel-icon-menu.svg"],
:is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/oriel/images/oriel-icon-treatments-index.svg"],
:is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/oriel/images/pages-menu-ic-chevron-down-black.svg"],
:is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/oriel/images/pages-menu-oriel-icon-book.svg"],
:is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/oriel/images/pages-menu-oriel-icon-home.svg"],
:is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/oriel/images/pages-menu-oriel-icon-treatments.svg"] {
  object-position: -99999px 0;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-origin: content-box; mask-origin: content-box;
  -webkit-mask-clip: content-box; mask-clip: content-box;
  background-color: var(--role-ink);
  background-clip: content-box;
}
:is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/oriel/images/ic-arrow-right-accent.svg"] { -webkit-mask-image: url(/_t/oriel/images/ic-arrow-right-accent.svg); mask-image: url(/_t/oriel/images/ic-arrow-right-accent.svg); background-color: var(--role-accent); }
:is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/oriel/images/ic-arrow-right-black.svg"] { -webkit-mask-image: url(/_t/oriel/images/ic-arrow-right-black.svg); mask-image: url(/_t/oriel/images/ic-arrow-right-black.svg); }
:is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/oriel/images/ic-arrow-up-right-accent.svg"] { -webkit-mask-image: url(/_t/oriel/images/ic-arrow-up-right-accent.svg); mask-image: url(/_t/oriel/images/ic-arrow-up-right-accent.svg); background-color: var(--role-accent); }
:is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/oriel/images/ic-check-accent.svg"] { -webkit-mask-image: url(/_t/oriel/images/ic-check-accent.svg); mask-image: url(/_t/oriel/images/ic-check-accent.svg); background-color: var(--role-accent); }
:is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/oriel/images/ic-chevron-down-black.svg"] { -webkit-mask-image: url(/_t/oriel/images/ic-chevron-down-black.svg); mask-image: url(/_t/oriel/images/ic-chevron-down-black.svg); }
:is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/oriel/images/ic-phone-muted.svg"] { -webkit-mask-image: url(/_t/oriel/images/ic-phone-muted.svg); mask-image: url(/_t/oriel/images/ic-phone-muted.svg); background-color: var(--role-ink-soft); }
:is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/oriel/images/ic-plus-black.svg"] { -webkit-mask-image: url(/_t/oriel/images/ic-plus-black.svg); mask-image: url(/_t/oriel/images/ic-plus-black.svg); }
:is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/oriel/images/ic-star-accent.svg"] { -webkit-mask-image: url(/_t/oriel/images/ic-star-accent.svg); mask-image: url(/_t/oriel/images/ic-star-accent.svg); background-color: var(--role-accent); }
:is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/oriel/images/ic-star-white.svg"] { -webkit-mask-image: url(/_t/oriel/images/ic-star-white.svg); mask-image: url(/_t/oriel/images/ic-star-white.svg); background-color: var(--role-page); }
:is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/oriel/images/icon-cardiology.svg"] { -webkit-mask-image: url(/_t/oriel/images/icon-cardiology.svg); mask-image: url(/_t/oriel/images/icon-cardiology.svg); background-color: var(--role-accent-deep); }
:is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/oriel/images/icon-dermatology.svg"] { -webkit-mask-image: url(/_t/oriel/images/icon-dermatology.svg); mask-image: url(/_t/oriel/images/icon-dermatology.svg); background-color: var(--role-accent-deep); }
:is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/oriel/images/icon-diagnostic-imaging.svg"] { -webkit-mask-image: url(/_t/oriel/images/icon-diagnostic-imaging.svg); mask-image: url(/_t/oriel/images/icon-diagnostic-imaging.svg); background-color: var(--role-accent-deep); }
:is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/oriel/images/icon-physiotherapy-v2.svg"] { -webkit-mask-image: url(/_t/oriel/images/icon-physiotherapy-v2.svg); mask-image: url(/_t/oriel/images/icon-physiotherapy-v2.svg); background-color: var(--role-accent-deep); }
:is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/oriel/images/icon-sports-medicine.svg"] { -webkit-mask-image: url(/_t/oriel/images/icon-sports-medicine.svg); mask-image: url(/_t/oriel/images/icon-sports-medicine.svg); background-color: var(--role-accent-deep); }
:is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/oriel/images/icon-womens-health.svg"] { -webkit-mask-image: url(/_t/oriel/images/icon-womens-health.svg); mask-image: url(/_t/oriel/images/icon-womens-health.svg); background-color: var(--role-accent-deep); }
:is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/oriel/images/oriel-icon-call-back.svg"] { -webkit-mask-image: url(/_t/oriel/images/oriel-icon-call-back.svg); mask-image: url(/_t/oriel/images/oriel-icon-call-back.svg); background-color: var(--role-accent-deep); }
:is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/oriel/images/oriel-icon-menu.svg"] { -webkit-mask-image: url(/_t/oriel/images/oriel-icon-menu.svg); mask-image: url(/_t/oriel/images/oriel-icon-menu.svg); }
:is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/oriel/images/oriel-icon-treatments-index.svg"] { -webkit-mask-image: url(/_t/oriel/images/oriel-icon-treatments-index.svg); mask-image: url(/_t/oriel/images/oriel-icon-treatments-index.svg); background-color: var(--role-accent-deep); }
:is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/oriel/images/pages-menu-ic-chevron-down-black.svg"] { -webkit-mask-image: url(/_t/oriel/images/pages-menu-ic-chevron-down-black.svg); mask-image: url(/_t/oriel/images/pages-menu-ic-chevron-down-black.svg); }
:is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/oriel/images/pages-menu-oriel-icon-book.svg"] { -webkit-mask-image: url(/_t/oriel/images/pages-menu-oriel-icon-book.svg); mask-image: url(/_t/oriel/images/pages-menu-oriel-icon-book.svg); background-color: var(--role-accent-deep); }
:is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/oriel/images/pages-menu-oriel-icon-home.svg"] { -webkit-mask-image: url(/_t/oriel/images/pages-menu-oriel-icon-home.svg); mask-image: url(/_t/oriel/images/pages-menu-oriel-icon-home.svg); background-color: var(--role-accent-deep); }
:is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/oriel/images/pages-menu-oriel-icon-treatments.svg"] { -webkit-mask-image: url(/_t/oriel/images/pages-menu-oriel-icon-treatments.svg); mask-image: url(/_t/oriel/images/pages-menu-oriel-icon-treatments.svg); background-color: var(--role-accent-deep); }
/* ---- end lx-icons ---- */