/* ═══════════════════════════════════════════════════════════
   Site Essentials — shared baseline add-ons
   Items not already covered by css/style.css: back-to-top,
   floating contact, scroll progress, skip link (standalone pages),
   injected cookie banner (standalone pages), password toggle,
   confirm modal. Uses the project's own tokens from style.css
   (--ink, --paper, --gold, --red-deep, --radius-*, --shadow-*).
   NO dark-mode toggle. Respects prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════ */

/* Skip link (standalone pages without one already in markup) */
.ess-skip-link {
  position: absolute; left: 8px; top: -100px; z-index: 10000;
  padding: 10px 16px; background: var(--ink, #1B4332); color: #fff;
  border-radius: var(--radius-sm, 6px); font-weight: 700; text-decoration: none;
}
.ess-skip-link:focus { top: 8px; }

/* Scroll progress bar */
.ess-scroll-progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 9998;
  background: var(--red-deep, #A75C40); transform-origin: 0 50%; transform: scaleX(0);
}

/* Back-to-top + floating contact — bottom-LEFT so it never overlaps
   #toast-container (bottom-right, see style.css) or the cookie banner. */
.ess-fab-stack {
  position: fixed; left: 16px; bottom: 16px; z-index: 9997;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
.ess-back-to-top, .ess-fab-contact {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--ink, #1B4332); box-shadow: 3px 3px 0 var(--ink, #1B4332);
  cursor: pointer; font-size: 1.2rem; text-decoration: none;
}
.ess-back-to-top { background: var(--paper-3, #FFFCF3); color: var(--ink-2, #0F2A1F); }
.ess-back-to-top[hidden] { display: none; }
.ess-fab-contact { background: #25D366; color: #fff; }
@media (hover: hover) {
  .ess-back-to-top:hover, .ess-fab-contact:hover { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: no-preference) {
  .ess-back-to-top, .ess-fab-contact { transition: transform .15s; }
  html.ess-smooth-scroll { scroll-behavior: smooth; }
}

/* Injected cookie banner (standalone pages that don't already have #cookie-banner) —
   reuses the #cookie-banner / .cookie-banner look already defined in style.css when
   that stylesheet is present; these are a fallback so the banner still looks right
   on pages that only load essentials.css. */
.ess-cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9999;
  max-width: 720px; margin: 0 auto;
  background: var(--paper-3, #FFFCF3); border: 2px solid var(--ink, #1B4332);
  border-radius: var(--radius-md, 10px); box-shadow: var(--shadow-sk-lg, 0 8px 30px rgba(0,0,0,.12));
  padding: 18px 22px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
}
.ess-cookie-banner[hidden] { display: none; }
.ess-cookie-banner p { flex: 1; margin: 0; min-width: 220px; color: var(--ink-2, #0F2A1F); font-size: 0.9rem; }
.ess-cookie-banner .ess-actions { display: flex; gap: 10px; }
.ess-cookie-banner .ess-actions button {
  flex: 1; padding: 10px 18px; font-weight: 700; font-size: 0.9rem;
  border: 2px solid var(--ink, #1B4332); border-radius: var(--radius-sm, 6px);
  background: var(--red-deep, #A75C40); color: #fff; cursor: pointer;
}
.ess-cookie-banner .ess-actions button.ess-ghost { background: var(--paper-3, #FFFCF3); color: var(--ink-2, #0F2A1F); }

/* Password visibility toggle */
.ess-pw-wrap { position: relative; display: inline-block; width: 100%; }
.ess-pw-toggle {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--ink-soft, #4A5B53);
  font-size: 0.82rem; font-weight: 700; cursor: pointer; padding: 4px 6px;
}

/* Confirmation modal (native <dialog>) */
.ess-confirm-dialog { border: 2px solid var(--ink, #1B4332); border-radius: var(--radius-md, 10px); padding: 22px; max-width: 380px; }
.ess-confirm-dialog::backdrop { background: rgba(15,42,31,.45); }
.ess-confirm-dialog p { margin: 0 0 16px; color: var(--ink-2, #0F2A1F); font-size: 0.95rem; }
.ess-confirm-dialog form { display: flex; gap: 10px; justify-content: flex-end; }
.ess-confirm-dialog button {
  padding: 9px 16px; border-radius: var(--radius-sm, 6px); border: 2px solid var(--ink, #1B4332);
  font-weight: 700; cursor: pointer;
}
.ess-confirm-dialog button[value="ok"] { background: var(--red-deep, #A75C40); color: #fff; }
.ess-confirm-dialog button[value="cancel"] { background: var(--paper-3, #FFFCF3); color: var(--ink-2, #0F2A1F); }

/* Print — hide all floating essentials chrome */
@media print {
  .ess-fab-stack, .ess-scroll-progress, .ess-skip-link, .ess-cookie-banner { display: none !important; }
}

/* Reduced motion — kill shimmer/scroll animation if any inherited */
@media (prefers-reduced-motion: reduce) {
  .ess-back-to-top, .ess-fab-contact { transition: none; }
  html.ess-smooth-scroll { scroll-behavior: auto; }
}