/* Styles for the logged-in-admin on-page edit buttons.
   Everything is scoped under body.cvg-admin, which only edit-mode.js adds and only
   when a Grav admin token is present. A normal visitor loads this file and it does
   nothing whatsoever. */

/* Zero-height sticky slot, injected as each section's first child. It takes no
   layout space, so it cannot shift the design, but it keeps the button pinned
   below the fixed nav for as long as you're inside that section. */
body.cvg-admin .cvg-edit-slot {
  position: sticky;
  top: 84px;
  z-index: 60;
  height: 0;
  display: block;
  text-align: right;
  padding-right: 18px;
  pointer-events: none;
  overflow: visible;
}

body.cvg-admin .cvg-edit {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(13, 27, 46, 0.92);
  color: #fff;
  font-family: var(--font-body, sans-serif);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid rgba(201, 148, 58, 0.55);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease;
  pointer-events: none;
}

/* Reveal while hovering anywhere in the owning section, or on keyboard focus. */
body.cvg-admin .hero:hover .cvg-edit,
body.cvg-admin .dark-section:hover .cvg-edit,
body.cvg-admin .company-section:hover .cvg-edit,
body.cvg-admin .partners-section:hover .cvg-edit,
body.cvg-admin .testimonials-section:hover .cvg-edit,
body.cvg-admin .disclaimer-section:hover .cvg-edit,
body.cvg-admin .contact-banner:hover .cvg-edit,
body.cvg-admin .contact-main:hover .cvg-edit,
body.cvg-admin .cvg-edit:focus-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

body.cvg-admin .cvg-edit:hover {
  background: #c9943a;
  border-color: #c9943a;
  color: #fff;
}

/* Persistent hint, so the feature is discoverable rather than hidden behind hover. */
body.cvg-admin::after {
  content: 'Editing mode — hover any section to edit it';
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 70;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(13, 27, 46, 0.9);
  color: #f5f0e6;
  font-family: var(--font-body, sans-serif);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

@media (max-width: 700px) {
  body.cvg-admin::after { display: none; }
  body.cvg-admin .cvg-edit { opacity: 1; transform: none; pointer-events: auto; }
}