/*
 * Netrouting 2026 polish layer
 * ---------------------------------------------------------------
 * Additive on top of main.css's existing design tokens
 * (--primary, --secondary, --graylight, --masterfont, --radius_*).
 *
 * Scope by design:
 *   ✓ focus rings, transitions, selection, motion, scroll, scrollbar
 *   ✓ button + card elevation polish
 *   ✓ link underline rhythm
 *   ✓ form-element focus consistency
 *   ✓ reduced-motion + print niceties
 *   ✗ palette (kept as-is — brand green/blue/orange remain canonical)
 *   ✗ images (per the "no image edits" constraint)
 *   ✗ visible text content (per the SEO-protected copy constraint)
 *
 * Specificity is kept modest so Elementor / per-page inline styles
 * still win. This is a baseline, not a takeover.
 */

:root {
  /* Site-header offset: how far down our sticky toolbars/filters need
     to sit so they clear the Elementor/theme top nav bar. Override per
     environment if your header is taller/shorter:
       html { --nr-sticky-offset: 96px; }
     in any custom CSS. */
  --nr-sticky-offset:  88px;

  /* Motion — WCAG-friendly easing + a sane scale. */
  --nr-motion-fast:    150ms;
  --nr-motion-base:    220ms;
  --nr-motion-slow:    420ms;
  --nr-easing-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --nr-easing-in-out:  cubic-bezier(0.65, 0, 0.35, 1);

  /* Elevation — tinted toward the headline near-black (#263238)
     so cards on light backgrounds get a cool shadow, not muddy grey. */
  --nr-shadow-xs:    0 1px 2px rgba(38, 50, 56, .04), 0 1px 3px rgba(38, 50, 56, .04);
  --nr-shadow-sm:    0 2px 4px rgba(38, 50, 56, .04), 0 4px 8px rgba(38, 50, 56, .04);
  --nr-shadow-md:    0 4px 8px rgba(38, 50, 56, .06), 0 8px 16px rgba(38, 50, 56, .06);
  --nr-shadow-lg:    0 8px 24px rgba(38, 50, 56, .08), 0 16px 32px rgba(38, 50, 56, .06);

  /* Focus halo — uses --primary at 35% alpha. */
  --nr-focus-ring:   0 0 0 3px rgba(20, 187, 96, .35);
}

/* ─────────────────────────────────────────────────────────────────
 * Modern focus rings — accessibility + intentional polish.
 * Replaces the default UA outline with a branded, animated ring
 * that only appears for keyboard users (focus-visible).
 * ───────────────────────────────────────────────────────────────── */
*:focus { outline: none; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--primary, #14bb60);
  outline-offset: 3px;
  border-radius: var(--radius_xsm, 4px);
  transition: outline-offset var(--nr-motion-fast) var(--nr-easing-out),
              box-shadow      var(--nr-motion-fast) var(--nr-easing-out);
}

button:focus-visible,
.btn:focus-visible,
input[type="submit"]:focus-visible {
  box-shadow: var(--nr-focus-ring);
}

/* ─────────────────────────────────────────────────────────────────
 * Selection color — brand-tinted, intentional.
 * ───────────────────────────────────────────────────────────────── */
::selection {
  background: rgba(20, 187, 96, .22);
  color: var(--black_light, #3C444B);
}

/* ─────────────────────────────────────────────────────────────────
 * Default transitions on interactive elements.
 * Standardising on a single easing/duration prevents the patchwork
 * "every element transitions differently" feel.
 * ───────────────────────────────────────────────────────────────── */
a,
button,
.btn,
.button,
input,
textarea,
select,
.nice-select,
[role="button"] {
  transition: color           var(--nr-motion-base) var(--nr-easing-out),
              background-color var(--nr-motion-base) var(--nr-easing-out),
              border-color    var(--nr-motion-base) var(--nr-easing-out),
              box-shadow      var(--nr-motion-base) var(--nr-easing-out),
              transform       var(--nr-motion-base) var(--nr-easing-out);
}

/* ─────────────────────────────────────────────────────────────────
 * Body-copy link underline rhythm.
 * Modern type: offset underline a fraction of the line so the
 * descender doesn't punch through the rule.
 * ───────────────────────────────────────────────────────────────── */
.entry-content a:not(.btn):not(.button):not(.wp-block-button__link),
.single-post-content a:not(.btn):not(.button),
article.post a:not(.btn):not(.button),
.knowledge-base-content a:not(.btn):not(.button) {
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(82, 167, 255, .55);
}
.entry-content a:not(.btn):not(.button):hover,
.single-post-content a:not(.btn):not(.button):hover,
article.post a:not(.btn):not(.button):hover,
.knowledge-base-content a:not(.btn):not(.button):hover {
  text-decoration-color: var(--secondary, #52a7ff);
  text-decoration-thickness: 2px;
}

/* ─────────────────────────────────────────────────────────────────
 * Button hover: subtle lift + shadow change. No size jumps.
 * Targets generic + theme + bootstrap + plugin button classes.
 * ───────────────────────────────────────────────────────────────── */
.btn:hover,
.button:hover,
button:not([disabled]):hover,
input[type="submit"]:not([disabled]):hover,
.elementor-button:hover {
  transform: translateY(-1px);
  box-shadow: var(--nr-shadow-md);
}
.btn:active,
.button:active,
button:not([disabled]):active,
input[type="submit"]:not([disabled]):active {
  transform: translateY(0);
  box-shadow: var(--nr-shadow-xs);
  transition-duration: var(--nr-motion-fast);
}

/* ─────────────────────────────────────────────────────────────────
 * Card elevation system.
 * Modern soft shadows on the recurring card patterns. Keeps the
 * existing border-radius (--radius_md), only refines the depth.
 * ───────────────────────────────────────────────────────────────── */
.product-card,
.planslisting-tile,
.plans-outer-tile > div,
.review-item,
.feature-card {
  box-shadow: var(--nr-shadow-sm);
}
.product-card:hover,
.planslisting-tile:hover,
.plans-outer-tile > div:hover,
.review-item:hover,
.feature-card:hover {
  box-shadow: var(--nr-shadow-md);
  transform: translateY(-2px);
}

/* ─────────────────────────────────────────────────────────────────
 * Smooth scroll + sticky-header offset for anchor links.
 * scroll-padding-top accounts for the fixed topbar so anchors
 * don't disappear under it.
 * ───────────────────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}
@supports (scroll-padding-top: 100px) {
  html { scroll-padding-top: 100px; }
}

/* ─────────────────────────────────────────────────────────────────
 * Themed scrollbar (webkit/blink). Slim, branded.
 * Firefox uses the spec scrollbar-color/scrollbar-width.
 * ───────────────────────────────────────────────────────────────── */
* { scrollbar-color: rgba(20, 187, 96, .55) var(--graylight, #F2F6FB); scrollbar-width: thin; }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--graylight, #F2F6FB); }
::-webkit-scrollbar-thumb {
  background: rgba(20, 187, 96, .55);
  border-radius: 8px;
  border: 3px solid var(--graylight, #F2F6FB);
}
::-webkit-scrollbar-thumb:hover { background: var(--primary, #14bb60); }

/* ─────────────────────────────────────────────────────────────────
 * Form-element focus consistency. Matches the focus-ring
 * convention used elsewhere in this layer.
 * ───────────────────────────────────────────────────────────────── */
input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
textarea:focus,
select:focus,
.nice-select:focus {
  border-color: var(--primary, #14bb60);
  box-shadow: var(--nr-focus-ring);
  outline: none;
}

/* ─────────────────────────────────────────────────────────────────
 * Image rhythm — prevent CLS where authoring forgot dimensions.
 * Real fix is to set width/height on every <img> but this catches
 * the long-tail without surgery.
 * ───────────────────────────────────────────────────────────────── */
img { max-width: 100%; height: auto; }
img:not([width]):not([height]) { aspect-ratio: auto; }

/* ─────────────────────────────────────────────────────────────────
 * Respect the OS-level reduced-motion preference.
 * WCAG 2.3.3 Animation from Interactions.
 * ───────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  .btn:hover, .button:hover, button:hover,
  .product-card:hover, .planslisting-tile:hover { transform: none !important; }
}

/* ─────────────────────────────────────────────────────────────────
 * Print styles — subtle but visible improvement.
 * ───────────────────────────────────────────────────────────────── */
@media print {
  body { background: white; color: black; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #666; }
  a[href^="#"]::after,
  a[href^="javascript:"]::after { content: ""; }
  .skip-link, .nr-pagination, .pagination,
  header.fixed-top, footer, .topbar { display: none !important; }
  .product-card, .planslisting-tile { box-shadow: none; border: 1px solid #ccc; page-break-inside: avoid; }
}