/* 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-8); }
.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-ratio-1); }
.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; }


/* menu links the converter added to templates that only had a demo "Pages" dropdown */
.lx-nav-added { white-space: nowrap; }

/* Logos (Oct 30 2026): the header, footer and sign-in logos are images (so an owner's logo can replace
   them), and the template's rule for every image (full width, full height, rounded corners) stretched the
   footer logo to the column width and rounded off the corners of the header mark. They keep the
   original's size: 25 px high, width from the image, square corners. */
.nav_logo > img, .footer_logo > img, .auth-logo > img { border-radius: 0; width: auto; height: 25px; max-width: none; }

/* Lattis in the dark themes (Oct 30 2026): the page turns dark, so Lattis's own dark-mode switches turn on
   (the light-only Lottie art hides and the glow icons show, as when a visitor picks dark in the header).
   Light cards (.theme-light) stay light, as they do in Lattis's own dark mode: their root copies of the
   page roles read the template's light palette. */
html[data-theme="night-inference"], html[data-theme="inverted"] {
  --_theme---effect--light-only: 0;
  --_theme---effect--glow: 1;
  --role-page-root: var(--color-white);
  --role-ink-root: var(--color-ink);
  --role-surface-root: var(--color-cloud);
  --role-surface-2-root: var(--color-haze);
  --role-line-root: var(--color-line-grey);
  --role-line-strong-root: var(--color-steel-line);
  --role-line-dark-root: var(--color-pewter);
  --role-ink-soft-root: var(--color-stone);
  --role-ink-muted-root: var(--color-slate);
  --role-ink-2-root: var(--color-graphite);
  --role-ink-faint-root: var(--color-mist-grey);
  --role-inverse-root: var(--color-inverse);
  --role-accent-root: var(--color-cobalt);
  --role-accent-deep-root: var(--color-deep-cobalt);
  --role-accent-soft-root: var(--color-cobalt-wash);
  --role-accent-muted-root: var(--color-periwinkle);
  --role-error-root: var(--color-error-red);
}
/* the light logo file is drawn for dark panels, which stay dark in every theme: it is never inverted */
html[data-theme="night-inference"] body img[src$="/_t/lattis/images/Lattis-logo-light.svg"],
html[data-theme="inverted"] body img[src$="/_t/lattis/images/Lattis-logo-light.svg"] { filter: none; }

/* ---- 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/lattis/images/icon-approvals.svg"],
:is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lattis/images/ui-video-pause.svg"],
:is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lattis/images/ui-video-play.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/lattis/images/icon-approvals.svg"] { -webkit-mask-image: url(/_t/lattis/images/icon-approvals.svg); mask-image: url(/_t/lattis/images/icon-approvals.svg); background-color: var(--role-accent); }
:is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lattis/images/ui-video-pause.svg"] { -webkit-mask-image: url(/_t/lattis/images/ui-video-pause.svg); mask-image: url(/_t/lattis/images/ui-video-pause.svg); background-color: var(--role-on-photo); }
:is(html[data-theme]:not([data-theme="original"]), html[data-colours="custom"]) img[src$="/_t/lattis/images/ui-video-play.svg"] { -webkit-mask-image: url(/_t/lattis/images/ui-video-play.svg); mask-image: url(/_t/lattis/images/ui-video-play.svg); background-color: var(--role-on-photo); }
/* logos and icons drawn in several greys: in the themes of the other mode (dark themes of a light template, light themes of a dark one) they are inverted so they stay readable */
html[data-theme="night-inference"] img[src$="/_t/lattis/images/Lattis-logo-light.svg"],
html[data-theme="inverted"] img[src$="/_t/lattis/images/Lattis-logo-light.svg"],
html[data-theme="night-inference"] img[src$="/_t/lattis/images/Lattis-logo.svg"],
html[data-theme="inverted"] img[src$="/_t/lattis/images/Lattis-logo.svg"] { filter: invert(1); }
/* ---- end lx-icons ---- */