/* ═════════════════════════════════════════════════════════════════════════
   Tomple mode — an easter egg, in memory of Tomple.

   Five quick clicks on the nav logo while the hero is still on screen turn it
   on; five more turn it off (tomple.js, same folder).

   The state lives on <html>, not on <nav>, because the nav's scroll handler
   does `nav.className = isSolid ? 'solid' : 'transparent'` on every tick — a
   class parked there would not survive the first scroll event.

   ── Why every rule below is !important ──────────────────────────────────
   This is an override LAYER, not a set of component styles. It is inert until
   a visitor deliberately switches it on, and it has to beat 48 different
   `cursor: pointer` declarations written across four pages at specificities
   from (0,1,0) up to (0,3,0). Matching each of those by specificity alone
   would mean a selector arms race that breaks the first time someone adds a
   button class. Inside `html.tomple` the layer wins outright; outside it,
   nothing here applies at all.
   ═════════════════════════════════════════════════════════════════════════ */


/* ── 1. Resting: his face ───────────────────────────────────────────────
   `cursor` inherits, so declaring it here reaches everything that does not
   set its own. Hotspot 16 18 is his nose, measured in the 32px file. */
html.tomple,
html.tomple body {
  cursor: url("tomplecursor-default-32x.png") 16 18, auto;
  cursor: image-set(url("tomplecursor-default-32x.png") 1x,
      url("tomplecursor-default-64x.png") 2x) 16 18, auto;
}


/* ── 2. Clickable: the paw ──────────────────────────────────────────────
   Derived from an audit of every `cursor: pointer` on index/service/business/
   application (48 distinct selectors). Semantic elements and anything with
   "btn" in its class name are matched by pattern; the rest are named, because
   they are ordinary divs the site makes clickable.

   ⚠ If a NEW clickable class appears later, add it here — otherwise it simply
   keeps the resting face, which degrades quietly rather than breaking. */
html.tomple :is(a,
  button,
  summary,
  select,
  label,
  [role="button"],
  [class*="btn"],
  .cart-clear,
  .cart-close,
  .contact-card-light,
  .faq-q,
  .gate-consent,
  .k-admin-close,
  .k-modal-close,
  .k-muted,
  .k-pick,
  .k-search-clear,
  .k-tab,
  .k-textlink,
  .k-toggle,
  .lf-consent,
  .nav-toggle,
  .pb-frame-card,
  .pb-frame-row,
  .pb-frame-swatch,
  .pb-shutter,
  .pl-close,
  .service-card,
  .svc-dot,
  .svc-tab,
  .svc-tier,
  .swatch,
  .swatches) {
  cursor: url("tomplecursor-pointer-32x.png") 16 16, pointer !important;
  cursor: image-set(url("tomplecursor-pointer-32x.png") 1x,
      url("tomplecursor-pointer-64x.png") 2x) 16 16, pointer !important;
}


/* ═════════════════════════════════════════════════════════════════════════
   Everything below overrides the paw. These four states carry information
   nothing else on screen conveys, so they get their own drawing rather than
   being swallowed by the sweep. Source order matters: they come last.
   ═════════════════════════════════════════════════════════════════════════ */


/* ── 3. Disabled ────────────────────────────────────────────────────────
   On a greyed-out submit or an exhausted quantity stepper this is often the
   only signal that clicking will do nothing at all. */
html.tomple :disabled,
html.tomple [aria-disabled="true"] {
  cursor: url("tomplecursor-notallowed-32x.png") 16 16, not-allowed !important;
  cursor: image-set(url("tomplecursor-notallowed-32x.png") 1x,
      url("tomplecursor-notallowed-64x.png") 2x) 16 16, not-allowed !important;
}


/* ── 4. Draggable ───────────────────────────────────────────────────────
   Nobody discovers that the polaroids and the carousels move unless the
   cursor says so. */
html.tomple .polaroid,
html.tomple .testi-track-wrapper,
html.tomple .gallery-strip {
  cursor: url("tomplecursor-grab-32x.png") 16 16, grab !important;
  cursor: image-set(url("tomplecursor-grab-32x.png") 1x,
      url("tomplecursor-grab-64x.png") 2x) 16 16, grab !important;
}

/* Same hotspot as grab, deliberately. These swap on mousedown while the
   pointer is stationary — a different hotspot would make whatever you are
   dragging appear to jump at the moment you grab it. The artwork itself sits
   ~3px lower in the frame than the open paw, so the paw reads as pressing
   down while the point you are dragging from does not move at all. */
html.tomple .polaroid.dragging,
html.tomple .polaroid.landed,
html.tomple .testi-track-wrapper:active,
html.tomple .gallery-strip:active {
  cursor: url("tomplecursor-grabbing-32x.png") 16 16, grabbing !important;
  cursor: image-set(url("tomplecursor-grabbing-32x.png") 1x,
      url("tomplecursor-grabbing-64x.png") 2x) 16 16, grabbing !important;
}


/* ── 5. Inspecting a polaroid ───────────────────────────────────────────
   Tells you a click dismisses the enlarged photo rather than doing something
   to it. Placed after grab so the inspecting state wins on .polaroid. */
html.tomple .polaroid.inspecting,
html.tomple #inspect-overlay.active {
  cursor: url("tomplecursor-zoomout-32x.png") 16 16, zoom-out !important;
  cursor: image-set(url("tomplecursor-zoomout-32x.png") 1x,
      url("tomplecursor-zoomout-64x.png") 2x) 16 16, zoom-out !important;
}


/* ── 6. Typing: left alone on purpose ───────────────────────────────────
   The I-beam is thin because putting a caret between two characters needs
   precision. A 32px cat over the lead form would cost real enquiries, so the
   sweep is explicitly undone here — `label` and `select` above would otherwise
   drag their inputs along. */
html.tomple :is(input, textarea, [contenteditable="true"]) {
  cursor: text !important;
}

html.tomple :is(input, select):is([type="checkbox"], [type="radio"], select) {
  cursor: url("tomplecursor-pointer-32x.png") 16 16, pointer !important;
  cursor: image-set(url("tomplecursor-pointer-32x.png") 1x,
      url("tomplecursor-pointer-64x.png") 2x) 16 16, pointer !important;
}


/* ═════════════════════════════════════════════════════════════════════════
   The hero photo
   ═════════════════════════════════════════════════════════════════════════ */

/* It goes on the hero SECTION, behind the .*-hero-bg overlay, so the scrim
   that overlay already paints — rgba(12,10,8,.55) down to .92 — keeps doing
   the contrast work untouched. Nothing about the white hero text has to be
   re-tuned for a photo sitting under it. */
html.tomple .hero,
html.tomple .sv-hero,
html.tomple .pb-hero,
html.tomple .app-hero {
  background-image: url("tomple-background-landscape.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* That scrim's background stack ends in an OPAQUE #17130f, which would hide
   the photo completely. Only the colour is dropped — the gradients above it
   stay exactly as they were. */
html.tomple .hero-bg,
html.tomple .sv-hero-bg,
html.tomple .pb-hero-bg,
html.tomple .app-hero-bg {
  background-color: transparent;
}

/* A 16:9 crop keeps almost none of the cat on a tall phone. Browsers do not
   fetch a background behind a media query that does not match, so each device
   downloads one image, not both. */
@media (orientation: portrait) {

  html.tomple .hero,
  html.tomple .sv-hero,
  html.tomple .pb-hero,
  html.tomple .app-hero {
    background-image: url("tomple-background-portrait.webp");
  }
}