/*
 * novavet-eruces/assets/site.css — per-site front-end overrides.
 *
 * This file is the per-client custom stylesheet (the {slug}-custom pattern). It is
 * EXPECTED to change and is allowlisted by the off-box FIM. Add the client's
 * update-proof overrides here; enqueued at priority 999 by site.php with a
 * filemtime() cache-bust.
 *
 * Replace this placeholder with the real client overrides at onboarding. Shipping an
 * empty (comment-only) stylesheet is fine — site.php enqueues it only if present.
 */

/* ---------------------------------------------------------------------------
 * Reset "Search Fields" button — teal glow, not the default black shadow.
 *
 * Cody/nv-visual 2026-06-28 (per Dave): DIAGNOSED on the live site. The black
 * glow is NOT on the old footable .clear-filter / a#clear_keyword links — those
 * are not rendered anywhere live. The live homepage #test-directory-section uses
 * the DataTables variant, whose reset control is a single JS-injected button:
 *   <button id="nv-reset-btn" class="nv-reset-btn">Reset Search Fields</button>
 * created by mu-plugin novavet-filter-reset.php (wp_footer inline <style>).
 * That inline rule sets  box-shadow:-1px 3px 13px 0 rgba(0,0,0,0.3)  (black) and
 * a darker black on hover. Background is already teal #11b1b7.
 *
 * An !important ID rule (#nv-reset-btn, specificity 1-0-0) beats the source's
 * !important class rule (.nv-reset-btn, 0-1-0) regardless of source order, so
 * this head-loaded eruces sheet wins over the wp_footer inline style.
 * Teal base = rgb(17,177,183) (#11B1B7) — the site's accent glow.
 * ------------------------------------------------------------------------- */
#nv-reset-btn {
  box-shadow: -1px 3px 13px 0 rgba(17, 177, 183, 0.55) !important;
  transition: background .2s ease, box-shadow .2s ease, transform .08s ease;
}
#nv-reset-btn:hover,
#nv-reset-btn:focus-visible {
  box-shadow: -1px 5px 18px 0 rgba(17, 177, 183, 0.75) !important;
}

/* Fallback: if the legacy footable filter variant (the .clear-filter / clear_keyword
 * Reset links) is ever rendered, give it the same teal glow. Harmless when absent. */
.clear-filter,
.clear-filter1,
.clear-filter2 {
  box-shadow: 0 0 14px 2px rgba(17, 177, 183, 0.5) !important;
  transition: box-shadow .25s ease;
}
.clear-filter:hover,
.clear-filter:focus-visible,
.clear-filter1:hover,
.clear-filter1:focus-visible,
.clear-filter2:hover,
.clear-filter2:focus-visible {
  box-shadow: 0 0 30px 7px rgba(17, 177, 183, 0.85) !important;
}

/* ---------------------------------------------------------------------------
 * NV monogram watermark on the "Dependable Veterinary Diagnostic And Laboratory
 * Testing" section (#why-section / "Why NovaVet" row — teal heading + Get Started).
 *
 * Cody/nv-visual 2026-06-28 (per Dave): replicate the faint NV background that
 * the Veterinarians row carries. Source rule = #veterinarians-section:after in
 * novavet-custom/assets/overrides.v2.css (width:580px height:400px, contain,
 * z-index:-2, pointer-events:none). The source uses a relative image URL; from
 * the eruces sheet we use the absolute path.
 *
 * NOTE: the #why-section row box itself COLLAPSES to ~240px (its WPBakery inner
 * column overflows the row), so anchoring ::after to the row would float the NV
 * in empty space above the text. We instead anchor to the full-width content
 * column `#why-section > .wpb_column.vc_col-sm-12` (1140 x ~927, already
 * position:relative), and place the watermark over the RIGHT text column (image
 * is on the left, "Dependable" heading + Get Started on the right) so the NV
 * sits faintly behind the text — matching the Veterinarians treatment.
 *
 * Cody/nv-visual 2026-06-28 refinement (per Dave): TALL + NARROW NV fitted to the
 * text block (not the wide 580x400 default). The source bg-logo.png is natively
 * 655x444 (landscape), so `contain` could never produce a tall mark — we use
 * `background-size:100% 100%` to STRETCH the NV vertically into the tall/narrow
 * box (longer strokes, skinnier mark). Width/height are clamp()-fluid so the
 * watermark scales up and down with the viewport and keeps tracking the text:
 *   - width  : clamp(200px, 26vw, 340px)  — narrow, < the ~540px text column
 *   - height : clamp(420px, 56vw, 720px)  — tall, ~fills the ~734px text block
 * left:75% centres it over the right text column at every width; top:58% +
 * translate centres it on the text block (which sits in the lower 158->892 of
 * the 892-tall inner box). pointer-events:none, z-index:-2 keep it behind copy.
 * ------------------------------------------------------------------------- */
#why-section > .wpb_column.vc_col-sm-12 > .vc_column-inner::after {
  content: '';
  position: absolute;
  left: 75%;            /* centred over the right-hand text column */
  top: 58%;             /* centred on the text block (heading -> Get Started) */
  transform: translate(-50%, -50%);
  width: clamp(200px, 26vw, 340px);   /* narrow — tracks viewport */
  height: clamp(420px, 56vw, 720px);  /* tall — tracks viewport */
  background: url('/wp-content/mu-plugins/novavet-custom/assets/img/bg-logo.png') no-repeat center / 100% 100%;
  z-index: -2;
  pointer-events: none;
}
/* The .vc_column-inner is static by default — make it the positioning context
 * (no offsets, so nothing moves) so the absolute ::after anchors to it. */
#why-section > .wpb_column.vc_col-sm-12 > .vc_column-inner {
  position: relative;
}