/* =============================================
   VIANCORE — Polish layer
   Loaded last on each page, after the page's own <style>.
   Adds feedback and finish only: no content, spacing or
   layout changes. Uses the theme tokens from style.css
   (--accent-rgb, --text-rgb, --bg-rgb), so light and dark
   mode both work. Delete the <link> to switch it all off.
   ============================================= */

::selection { background: rgba(var(--accent-rgb), 0.28); }

/* ---------- Frosted-glass top nav ---------- */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav {
    background: rgba(var(--bg-rgb), 0.82);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
  }
}

/* Nav links: teal underline slides in on hover (active link keeps its own underline) */
.nav-links a:not(.active) { position: relative; }
.nav-links a:not(.active)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform 0.22s ease;
}
.nav-links a:not(.active):hover::after { transform: scaleX(1); }

/* ---------- Reading progress bar (articles only; added by polish.js) ---------- */
.vc-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.55);
  pointer-events: none;
}

/* ---------- Article hero: soft teal glow behind the title ---------- */
.content:has(> .doc-title) { position: relative; isolation: isolate; }
.content:has(> .doc-title)::before {
  content: ""; position: absolute; left: 0; top: 0; width: min(560px, 100%); height: 240px;
  background: radial-gradient(closest-side at 30% 35%, rgba(var(--accent-rgb), 0.10), transparent);
  z-index: -1; pointer-events: none;
}
.content > .doc-title, .content > .doc-subtitle { animation: vc-rise 0.45s cubic-bezier(.2,.7,.2,1) both; }
.content > .doc-subtitle { animation-delay: 0.06s; }
@keyframes vc-rise { from { opacity: 0.35; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Sidebar: clear marker on the section you are reading ---------- */
.sidebar-link {
  padding-left: 10px; margin-left: -10px;
  border-radius: 0 4px 4px 0;
  transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.sidebar-link:hover { background: rgba(var(--accent-rgb), 0.05); }
.sidebar-link.active {
  background: rgba(var(--accent-rgb), 0.08);
  box-shadow: inset 2px 0 0 var(--accent);
}

/* ---------- Section headings: "#" link appears on hover (added by polish.js) ---------- */
.vc-anchor {
  margin-left: 8px; color: var(--accent); opacity: 0;
  transition: opacity 0.15s; text-decoration: none;
}
.doc-section-title:hover .vc-anchor, .vc-anchor:focus-visible { opacity: 0.8; }
@media (hover: none) { .vc-anchor { display: none; } }

/* ---------- Callouts: rounded edge, icon on labelled callouts ---------- */
.doc-callout, .callout { border-radius: 0 6px 6px 0; }
.callout .callout-label { display: flex; align-items: center; gap: 6px; }
.callout .callout-label::before {
  content: ""; width: 11px; height: 11px; flex: none; background: currentColor;
  -webkit-mask: var(--vc-icon) center / contain no-repeat; mask: var(--vc-icon) center / contain no-repeat;
}
.callout.info    { --vc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Zm.9 12H7.1V6.5h1.8V12ZM8 5a1.1 1.1 0 1 1 0-2.2A1.1 1.1 0 0 1 8 5Z'/%3E%3C/svg%3E"); }
.callout.warn    { --vc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8.9 1.5a1 1 0 0 0-1.8 0L.2 13.5A1 1 0 0 0 1.1 15h13.8a1 1 0 0 0 .9-1.5L8.9 1.5ZM8.9 13H7.1v-1.8h1.8V13Zm0-3.2H7.1V5.5h1.8v4.3Z'/%3E%3C/svg%3E"); }
.callout.success { --vc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Zm-1.2 11.6L3.5 8.3l1.3-1.3 2 2 4.4-4.4 1.3 1.3-5.7 5.7Z'/%3E%3C/svg%3E"); }

/* Light mode fix: the GoDaddy article's warning/success callouts use pale
   text tuned for black, which is unreadable on the light background. */
html[data-theme="light"] .callout.warn    { color: #7a5600; }
html[data-theme="light"] .callout.success { color: #1d6a4a; }

/* ---------- Numbered checklists: teal circles with a soft glow ---------- */
.check-num {
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.08);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.22);
}

/* ---------- Code blocks: Copy button (added by polish.js) ---------- */
.doc-code.vc-has-copy { position: relative; padding-right: 72px; }
.vc-copy {
  position: absolute; top: 8px; right: 8px;
  font: 500 11px/1 var(--font); letter-spacing: 0.04em;
  color: rgba(var(--text-rgb), 0.75);
  background: rgba(var(--bg-rgb), 0.85);
  border: 0.5px solid rgba(var(--text-rgb), 0.18); border-radius: 5px;
  padding: 6px 9px; opacity: 0.7;
  transition: opacity 0.15s, border-color 0.15s, color 0.15s;
}
.doc-code:hover .vc-copy, .vc-copy:focus-visible { opacity: 1; }
.vc-copy:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Keyboard focus: always visible ---------- */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px;
}

/* ---------- Respect "reduce motion" ---------- */
@media (prefers-reduced-motion: reduce) {
  .nav-links a::after, .sidebar-link, .vc-anchor, .vc-copy { transition: none; }
  .content > .doc-title, .content > .doc-subtitle { animation: none; }
  html { scroll-behavior: auto; }
}