/* ============================================================================
   AllerJ — The Story Of Me
   "Shades of Purple" theme by Ahmad Awais, ported to web for allerj.com.
   ============================================================================
   Color palette:
   --sop-bg-deep        #1E1E3F   sidebar deeper sections, code background
   --sop-bg-sidebar     #222244   sidebar base
   --sop-bg-content     #2D2B55   main content / editor area
   --sop-bg-elevated    #28284E   elevated panels
   --sop-fg             #FFFFFF   primary text
   --sop-fg-muted       #A599E9   muted lavender (timestamps, captions, meta)
   --sop-accent-yellow  #FAD000   the iconic SoP yellow (links, highlights)
   --sop-accent-purple  #B362FF   vibrant purple (hover, selection)
   --sop-success        #3AD900
   --sop-danger         #EC3A37
   --sop-warning        #FF7300
   ========================================================================= */

:root {
    --sop-bg-deep:        #1E1E3F;
    --sop-bg-sidebar:     #222244;
    --sop-bg-content:     #2D2B55;
    --sop-bg-elevated:    #28284E;
    --sop-fg:             #FFFFFF;
    --sop-fg-muted:       #A599E9;
    --sop-accent-yellow:  #FAD000;
    --sop-accent-purple:  #B362FF;
    --sop-success:        #3AD900;
    --sop-danger:         #EC3A37;
    --sop-warning:        #FF7300;

    /* ---- Bootstrap 5 dark-mode variable overrides ---- */
    --bs-body-bg:         var(--sop-bg-content);
    --bs-body-color:      var(--sop-fg);
    --bs-emphasis-color:  var(--sop-fg);
    --bs-secondary-color: var(--sop-fg-muted);
    --bs-tertiary-color:  var(--sop-fg-muted);
    --bs-border-color:    var(--sop-bg-deep);

    --bs-link-color:        var(--sop-accent-yellow);
    --bs-link-color-rgb:    250, 208, 0;
    --bs-link-hover-color:  var(--sop-accent-purple);

    --bs-primary:           var(--sop-accent-yellow);
    --bs-primary-rgb:       250, 208, 0;
    --bs-secondary:         var(--sop-accent-purple);
    --bs-secondary-rgb:     179, 98, 255;
    --bs-success:           var(--sop-success);
    --bs-danger:            var(--sop-danger);
    --bs-warning:           var(--sop-warning);

    --bs-code-color:        var(--sop-accent-yellow);
}

/* ----- Base layout ----- */

html, body {
    background: var(--sop-bg-content);
    color: var(--sop-fg);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    line-height: 1.7;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Selection color matches SoP editor selection */
::selection {
    background: rgba(179, 98, 255, 0.55);
    color: var(--sop-fg);
}

/* ----- Navbar (mobile top bar) ----- */

.navbar.bg-light,
.navbar.navbar-light {
    background: var(--sop-bg-deep) !important;
    border-bottom: 1px solid var(--sop-bg-deep) !important;
}

.navbar .navbar-brand,
.navbar .navbar-brand:hover {
    color: var(--sop-accent-yellow);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.navbar .navbar-toggler {
    border-color: var(--sop-fg-muted);
}

.navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23A599E9' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* ----- Sidebar ----- */

.sidebar {
    min-height: 100vh;
    padding: 1.5rem 1.25rem;
    background: var(--sop-bg-sidebar) !important;
    border-right: 1px solid var(--sop-bg-deep) !important;
}

.sidebar.bg-light {
    background: var(--sop-bg-sidebar) !important;
}

.sidebar-inner .sidebar-brand-link {
    color: var(--sop-accent-yellow);
    font-weight: 700;
    letter-spacing: 0.01em;
}

.sidebar-inner .sidebar-brand-link:hover {
    color: var(--sop-accent-purple);
}

.sidebar-inner .text-muted {
    color: var(--sop-fg-muted) !important;
}

.sidebar-inner .nav-link {
    color: var(--sop-fg);
    border-radius: 4px;
    transition: background 0.12s ease, color 0.12s ease, padding-left 0.12s ease;
}

.sidebar-inner .nav-link:hover {
    color: var(--sop-accent-yellow);
    background: var(--sop-bg-deep);
    padding-left: 0.5rem !important;
}

.sidebar-inner .chapter-title {
    color: var(--sop-fg-muted) !important;
    letter-spacing: 0.08em;
}

.sidebar-inner .chapter-title:hover {
    color: var(--sop-accent-yellow) !important;
}

/* Active story highlighting in sidebar */
.sidebar-inner .story-link.active-story {
    color: var(--sop-accent-yellow) !important;
    font-weight: 600;
    background: rgba(250, 208, 0, 0.1);
    border-radius: 4px;
    padding-left: 0.5rem;
}

/* ----- Mobile offcanvas sidebar ----- */

.offcanvas {
    background: var(--sop-bg-sidebar);
    color: var(--sop-fg);
}

.offcanvas-header {
    border-bottom: 1px solid var(--sop-bg-deep) !important;
}

.offcanvas-header .offcanvas-title {
    color: var(--sop-accent-yellow);
}

.offcanvas .btn-close {
    filter: invert(1) sepia(1) hue-rotate(20deg) saturate(8);
}

/* ----- Main content ----- */

.main-content {
    max-width: 920px;
    background: var(--sop-bg-content);
}

article p {
    margin-bottom: 1.2rem;
}

article h1, article h2, article h3, article h4, article h5, article h6 {
    color: var(--sop-fg);
    font-weight: 600;
    margin-top: 2.4rem;
    margin-bottom: 1rem;
}

article h1 { font-size: 2.1rem; }
article h2 { font-size: 1.65rem; color: var(--sop-accent-yellow); }
article h3 { font-size: 1.3rem;  color: var(--sop-accent-purple); }

article a {
    color: var(--sop-accent-yellow);
    text-decoration: underline;
    text-decoration-color: rgba(250, 208, 0, 0.4);
    text-underline-offset: 3px;
}

article a:hover {
    color: var(--sop-accent-purple);
    text-decoration-color: var(--sop-accent-purple);
}

article strong, article b {
    color: var(--sop-accent-yellow);
    font-weight: 700;
}

article em, article i {
    color: var(--sop-fg-muted);
}

article blockquote {
    border-left: 4px solid var(--sop-accent-purple);
    padding: 0.6rem 1.25rem;
    margin: 1.5rem 0;
    color: var(--sop-fg-muted);
    background: rgba(30, 30, 63, 0.5);
    border-radius: 0 4px 4px 0;
    font-style: italic;
}

article blockquote p:last-child { margin-bottom: 0; }

article hr {
    border: none;
    border-top: 1px solid var(--sop-bg-deep);
    margin: 2.5rem 0;
    opacity: 1;
}

article ul, article ol {
    margin-bottom: 1.2rem;
    padding-left: 1.5rem;
}

article li {
    margin-bottom: 0.4rem;
}

article li::marker {
    color: var(--sop-accent-yellow);
}

/* ----- Code (the SoP money shot) ----- */

article code {
    background: var(--sop-bg-deep);
    color: var(--sop-accent-yellow);
    padding: 0.15em 0.4em;
    border-radius: 3px;
    font-size: 0.9em;
    font-family: "JetBrains Mono", "Fira Code", Menlo, Monaco, Consolas, monospace;
}

article pre {
    background: var(--sop-bg-deep);
    color: var(--sop-fg);
    padding: 1rem 1.25rem;
    border-radius: 6px;
    border-left: 3px solid var(--sop-accent-purple);
    overflow-x: auto;
    font-size: 0.92em;
    line-height: 1.55;
    margin: 1.4rem 0;
}

article pre code {
    background: transparent;
    color: inherit;
    padding: 0;
    font-size: 1em;
}

/* ----- Borders, dividers, headers ----- */

.border-bottom, .border-top, .border-end, .border-start {
    border-color: var(--sop-bg-deep) !important;
}

/* Story / chapter header dividers */
.chapter-header,
.story-header {
    border-bottom-color: var(--sop-bg-deep) !important;
}

.story-header .text-muted,
.chapter-header .text-muted,
.story-footer .text-muted {
    color: var(--sop-fg-muted) !important;
}

/* ----- Story index (chapter page) ----- */

.story-index .story-link {
    color: var(--sop-fg);
}

.story-index .story-link:hover {
    color: var(--sop-accent-yellow);
}

/* ----- Badges (drafts, tags) ----- */

.badge.bg-warning,
.badge.bg-warning.text-dark {
    background: var(--sop-warning) !important;
    color: var(--sop-bg-deep) !important;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.badge.bg-secondary {
    background: var(--sop-bg-elevated) !important;
    color: var(--sop-fg-muted) !important;
    font-weight: 500;
}

.text-warning {
    color: var(--sop-warning) !important;
}

/* ----- Alerts (preview mode banner) ----- */

.alert.alert-warning {
    background: rgba(255, 115, 0, 0.12);
    color: var(--sop-warning);
    border: 1px solid var(--sop-warning);
}

.alert.alert-warning strong {
    color: var(--sop-warning);
}

/* ----- 404 page ----- */

.not-found .btn-outline-secondary {
    color: var(--sop-fg-muted);
    border-color: var(--sop-fg-muted);
}

.not-found .btn-outline-secondary:hover {
    background: var(--sop-accent-yellow);
    color: var(--sop-bg-deep);
    border-color: var(--sop-accent-yellow);
}

/* ----- Responsive tweaks ----- */

@media (max-width: 767.98px) {
    .main-content {
        padding-top: 1.5rem;
    }
}