/* Website Page Editor — matches the Inspira portal / login look. */
.spe-app {
    --spe-maroon: #8B151A;
    --spe-maroon-dark: #6B0E12;
    --spe-gold: #D1AA55;
    --spe-gold-soft: #FBF3E0;
    --spe-ink: #2B2321;
    --spe-muted: #6B5F5A;
    --spe-line: #E7E0D7;
    --spe-bg: #FAF7F3;
    --spe-radius: 10px;
    max-width: 1240px;
    margin: 0 auto 120px;
    color: var(--spe-ink);
    font-size: 15px;
    line-height: 1.5;
}
.spe-app *, .spe-app *::before, .spe-app *::after { box-sizing: border-box; }
.spe-app [hidden] { display: none !important; }

/* Header */
.spe-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--spe-line); }
.spe-crumbs { font-size: 13px; color: var(--spe-muted); margin-bottom: 4px; }
.spe-crumbs a { color: var(--spe-muted); text-decoration: none; }
.spe-crumbs a:hover { color: var(--spe-maroon); text-decoration: underline; }
.spe-title { margin: 0; font-size: 30px; line-height: 1.2; }
.spe-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.spe-lead { color: var(--spe-muted); max-width: 720px; margin: 0 0 24px; }

/* Buttons */
.spe-btn { display: inline-flex; align-items: center; gap: 6px; border-radius: 6px; padding: 9px 16px; font-size: 13px; font-weight: 700; letter-spacing: .03em; text-decoration: none !important; cursor: pointer; border: 1.5px solid transparent; line-height: 1.3; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.spe-btn-primary { background: var(--spe-maroon); color: #fff !important; }
.spe-btn-primary:hover, .spe-btn-primary:focus { background: var(--spe-maroon-dark); }
.spe-btn-primary:disabled { opacity: .7; cursor: wait; }
.spe-btn-secondary { background: #fff; color: var(--spe-maroon) !important; border-color: var(--spe-maroon); }
.spe-btn-secondary:hover, .spe-btn-secondary:focus { background: var(--spe-maroon); color: #fff !important; }
.spe-btn-ghost { background: #fff; color: var(--spe-ink) !important; border-color: var(--spe-line); }
.spe-btn-ghost:hover, .spe-btn-ghost:focus { border-color: var(--spe-maroon); color: var(--spe-maroon) !important; }
.spe-link-btn { background: none; border: 0; padding: 4px 6px; color: var(--spe-maroon); font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: underline; }

/* Notices */
.spe-notice { border-radius: 6px; padding: 12px 16px; margin: 0 0 20px; border-left: 4px solid; font-size: 14px; }
.spe-notice ul { margin: 6px 0 0 18px; }
.spe-notice-success { background: #EAF6EC; border-color: #1f7a34; }
.spe-notice-info { background: var(--spe-gold-soft); border-color: var(--spe-gold); }
.spe-notice-warning { background: #FFF6E0; border-color: #C98A00; }
.spe-notice-error { background: #FBEAEA; border-color: var(--spe-maroon); }

/* Page list */
.spe-group-title { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--spe-muted); margin: 28px 0 12px; }
.spe-page-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.spe-page-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--spe-line); border-radius: var(--spe-radius); overflow: hidden; text-decoration: none !important; color: var(--spe-ink) !important; transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
.spe-page-card:hover, .spe-page-card:focus { border-color: var(--spe-gold); box-shadow: 0 10px 28px rgba(26,10,12,.12); transform: translateY(-2px); }
.spe-page-thumb { display: block; aspect-ratio: 16 / 9; background: #1A0A0C center / cover no-repeat; }
.spe-page-body { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px 4px; }
.spe-page-body strong { font-size: 17px; }
.spe-page-meta { display: block; font-size: 13px; color: var(--spe-muted); }
.spe-page-cta { padding: 8px 16px 14px; font-weight: 700; font-size: 13px; color: var(--spe-maroon); }

/* Editor layout */
.spe-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: start; }
.spe-sidebar { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow: auto; }
.admin-bar .spe-sidebar { top: 56px; }
.spe-search input { width: 100%; padding: 10px 12px; border: 1.5px solid var(--spe-line); border-radius: 6px; font-size: 14px; margin-bottom: 12px; }
.spe-search input:focus { outline: none; border-color: var(--spe-maroon); box-shadow: 0 0 0 3px rgba(139,21,26,.12); }
.spe-toc { display: flex; flex-direction: column; gap: 2px; }
.spe-toc a { display: flex; gap: 10px; align-items: baseline; padding: 7px 10px; border-radius: 6px; font-size: 14px; color: var(--spe-ink); text-decoration: none; }
.spe-toc a:hover { background: var(--spe-bg); }
.spe-toc a.is-active { background: var(--spe-gold-soft); color: var(--spe-maroon); font-weight: 600; }
.spe-toc a.is-filtered { opacity: .35; }
.spe-toc-num { flex: 0 0 22px; font-size: 12px; color: var(--spe-muted); text-align: right; }

/* Sections and items */
.spe-section { background: #fff; border: 1px solid var(--spe-line); border-radius: var(--spe-radius); padding: 20px 22px 8px; margin-bottom: 20px; scroll-margin-top: 24px; }
.spe-section-title { margin: 0 0 14px; font-size: 20px; line-height: 1.3; }
.spe-section-eyebrow { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--spe-gold); font-weight: 700; margin-bottom: 2px; }
.spe-item { border-top: 1px solid var(--spe-line); padding: 14px 0; display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; }
.spe-item-label { font-size: 13px; font-weight: 700; color: var(--spe-muted); display: flex; gap: 8px; align-items: flex-start; padding-top: 2px; }
.spe-item-icon { flex: 0 0 22px; height: 22px; border-radius: 4px; background: var(--spe-bg); color: var(--spe-maroon); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.spe-item-fields { display: flex; flex-direction: column; gap: 14px; }

/* Fields */
.spe-field { position: relative; padding-left: 12px; border-left: 3px solid transparent; transition: border-color .15s ease; }
.spe-field.is-dirty { border-left-color: var(--spe-gold); }
.spe-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--spe-muted); margin-bottom: 6px; }
.spe-field input[type=text], .spe-field textarea { width: 100%; padding: 10px 12px; border: 1.5px solid var(--spe-line); border-radius: 6px; font: inherit; font-size: 15px; background: #fff; color: var(--spe-ink); }
.spe-field input[type=text]:focus, .spe-field textarea:focus { outline: none; border-color: var(--spe-maroon); box-shadow: 0 0 0 3px rgba(139,21,26,.12); }
.spe-field-heading textarea { font-size: 18px; font-weight: 600; resize: vertical; }
.spe-hint { margin: 6px 0 0; font-size: 12px; color: var(--spe-muted); }
.spe-field p { margin: 8px 0 0; }

.spe-image { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.spe-image-preview { width: 240px; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; background: repeating-conic-gradient(#eee 0% 25%, #fafafa 0% 50%) 50% / 16px 16px; border: 1px solid var(--spe-line); display: flex; align-items: center; justify-content: center; }
.spe-image-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spe-image-preview.is-empty span { color: var(--spe-muted); font-size: 13px; }
.spe-image-side { flex: 1; min-width: 180px; }

.spe-richtext-preview { border: 1.5px dashed var(--spe-line); border-radius: 6px; padding: 10px 14px; max-height: 220px; overflow: auto; font-size: 14px; background: var(--spe-bg); }
.spe-richtext-preview > :first-child { margin-top: 0; }
.spe-richtext-preview > :last-child { margin-bottom: 0; }
.spe-field-html .wp-editor-wrap { margin-top: 4px; }

.spe-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.spe-gallery-item { position: relative; margin: 0; border-radius: 6px; overflow: hidden; border: 1px solid var(--spe-line); cursor: grab; aspect-ratio: 4 / 3; background: #eee; }
.spe-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.spe-gallery-item.is-dragging { opacity: .4; }
.spe-gallery-remove { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(139,21,26,.92); color: #fff; font-weight: 700; font-size: 16px; line-height: 1; cursor: pointer; }

/* Sticky save bar */
.spe-savebar { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 99990; width: min(720px, calc(100vw - 32px)); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: #1A0A0C; color: #fff; padding: 12px 14px 12px 20px; border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.spe-savebar-text strong { color: var(--spe-gold); }
.spe-savebar-actions { display: flex; gap: 8px; }
.spe-savebar .spe-btn-ghost { background: transparent; color: #fff !important; border-color: rgba(255,255,255,.35); }

/* History */
.spe-history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.spe-history-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: #fff; border: 1px solid var(--spe-line); border-radius: var(--spe-radius); padding: 14px 18px; }
.spe-history-item form { margin: 0; }

/* Small screens */
@media (max-width: 900px) {
    .spe-layout { grid-template-columns: 1fr; }
    .spe-sidebar { position: static; max-height: none; }
    .spe-toc { display: none; }
    .spe-item { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 560px) {
    .spe-section { padding: 16px 14px 4px; }
    .spe-image-preview { width: 100%; }
    .spe-title { font-size: 24px; }
}