/*
 * Click-to-edit CMS overlay (webroot/js/inline-edit.js). Loaded on every
 * page but inert until .cms-edit-mode is toggled on, which only happens
 * for a signed-in admin/staff user.
 */

/* Icon-only; label text stays in the DOM for screen readers, hidden via font-size: 0. */
.cms-edit-toggle {
    position: fixed;
    right: var(--space-5);
    bottom: var(--space-5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    font-size: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--color-sage-deep);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    cursor: pointer;
    opacity: 0.6;
    box-shadow: var(--shadow-soft);
    transition: opacity var(--transition-fast, 0.15s ease), background-color var(--transition-fast, 0.15s ease);
}
.cms-edit-toggle:hover,
.cms-edit-toggle:focus-visible {
    opacity: 1;
}
.cms-edit-toggle:not(.cms-edit-toggle--active):hover { background-color: var(--color-forest, var(--color-sage-deep)); }
.cms-edit-toggle--active {
    opacity: 1;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4D36' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    border: 1px solid var(--color-sage-deep);
}
.cms-edit-toggle--active:hover,
.cms-edit-toggle--active:focus-visible {
    background-color: var(--color-mist, #eef2ee);
}

.cms-edit-mode [data-cms-key] {
    cursor: pointer;
    outline: 1px dashed transparent;
    outline-offset: 3px;
    border-radius: 4px;
    transition: outline-color 0.1s ease;
}
/* Outline only on hover — no background tint, so text stays exactly as
   readable as it already is on dark sections and photo heroes. */
.cms-edit-mode [data-cms-key]:hover {
    outline-color: var(--color-sage);
}
.cms-edit-mode img[data-cms-key]:hover { outline-style: solid; }

.cms-edit-field--active {
    outline: 2px solid var(--color-sage-deep) !important;
    background-color: #fff !important;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
    padding: 2px 6px;
}
/* Dark-section/photo-hero text is normally light-on-dark; force it dark
   while actively editing so it stays legible against the white field. */
.cms-edit-field--active,
.cms-edit-field--active * {
    color: var(--color-ink, #1a1a1a) !important;
}

.cms-edit-field--saving { opacity: 0.5; }

.cms-edit-toast {
    position: fixed;
    left: 50%;
    bottom: var(--space-5);
    transform: translate(-50%, 12px);
    z-index: 1001;
    background: var(--color-ink, #1a1a1a);
    color: #fff;
    font-size: var(--text-sm);
    padding: 10px 18px;
    border-radius: 999px;
    box-shadow: var(--shadow-soft);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.cms-edit-toast--visible {
    opacity: 1;
    transform: translate(-50%, 0);
}
.cms-edit-toast--error { background: var(--color-error, #b33b3b); }