/* ============================================================
   TOE Archive — Times of Eswatini  v1.3.0
   ============================================================ */

/* ── Light mode base ──────────────────────────────────────── */
.toe-archive {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 16px 60px;
    font-family: 'Roboto', Arial, sans-serif;
}

/* ── Views ────────────────────────────────────────────────── */
.toe-view {
    display: none;
}
.toe-view--active {
    display: block;
}

/* ── "Archive" page heading ───────────────────────────────── */
.toe-archive__heading {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 2rem;
    font-weight: 700;
    color: #EA0303 !important;
    margin: 24px 0 16px;
    letter-spacing: -0.01em;
}

/* ── Year heading inside calendar (e.g. "2026") ───────────── */
.toe-archive__year-heading {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 2rem;
    font-weight: 700;
    margin: 16px 0 24px;
    letter-spacing: -0.01em;
    /* Light: teal. Dark: overridden below */
    color: #EA0303 !important;
}

/* ── Story date heading ───────────────────────────────────── */
.toe-archive__subheading {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 1.35rem;
    font-weight: 700;
    margin: 12px 0 16px;
    color: #111111 !important;
}

/* ── Back button ──────────────────────────────────────────── */
.toe-breadcrumb {
    margin: 20px 0 0;
    position: relative;
    z-index: 10;
}

.toe-back-btn {
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none;
    margin: 0;
    padding: 8px 0;
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    text-decoration: none !important;
    cursor: pointer !important;
    pointer-events: all !important;
    position: relative;
    z-index: 10;
    color: #EA0303 !important;
    transition: none !important;
}
.toe-back-btn:hover,
.toe-back-btn:focus,
.toe-back-btn:active {
    background: transparent !important;
    background-color: transparent !important;
    color: #000000 !important;
    text-decoration: underline !important;
    box-shadow: none !important;
    border: none !important;
}
.toe-back-btn:focus-visible {
    outline: 2px solid #EA0303 !important;
    outline-offset: 2px;
    border-radius: 2px;
}

/* ── Year list ────────────────────────────────────────────── */
.toe-year-list {
    list-style: none !important;
    margin: 0;
    padding: 0;
}

.toe-year-list__item {
    border-bottom: 1px solid #dddddd;
}

.toe-year-btn {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    text-align: left;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 14px 0;
    font-family: 'Roboto Condensed', 'Roboto', Arial, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    cursor: pointer !important;
    transition: none !important;
    color: #EA0303 !important;
}
/* Kill the theme's button:hover background completely */
.toe-year-btn:hover,
.toe-year-btn:focus,
.toe-year-btn:active {
    background: transparent !important;
    background-color: transparent !important;
    color: #EA0303 !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}
.toe-year-btn:focus-visible {
    outline: 2px solid #EA0303 !important;
    outline-offset: 2px;
}

/* ── Calendar grid ────────────────────────────────────────── */
.toe-calendar-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 48px;
    margin-top: 8px;
}
@media (max-width: 640px) {
    .toe-calendar-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
}
@media (max-width: 420px) {
    .toe-calendar-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ── Month name ───────────────────────────────────────────── */
.toe-month__name {
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    margin: 0 0 8px;
    color: #111111 !important;
}

.toe-month__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px 0;
    font-size: 0.78rem;
    font-family: 'Roboto', Arial, sans-serif;
}

/* ── Day cells ────────────────────────────────────────────── */
.toe-day--empty {
    visibility: hidden;
    pointer-events: none;
}

/* Days with NO posts — hidden, invisible, takes no space */
.toe-day--no-posts {
    display: none !important;
}

/* Days WITH posts — bold and clickable */
.toe-day--has-posts {
    display: block;
    text-align: center;
    padding: 4px 2px;
    line-height: 1.6;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 2px;
    cursor: pointer !important;
    pointer-events: all !important;
    transition: background 0.12s, color 0.12s;
    /* Light: dark text, teal on hover */
    color: #111111 !important;
    background: transparent;
}
.toe-day--has-posts:hover,
.toe-day--has-posts:focus {
    background: #1a6080 !important;
    color: #ffffff !important;
    outline: none;
}
.toe-day--has-posts:focus-visible {
    outline: 2px solid #EA0303;
    outline-offset: 2px;
}

/* ── Divider rule ─────────────────────────────────────────── */
.toe-rule {
    border: none;
    border-top: 1px solid #dddddd;
    margin: 0 0 24px;
}

/* ── Story list ───────────────────────────────────────────── */
.toe-story-list {
    list-style: none !important;
    margin: 0;
    padding: 0;
}

.toe-story-list__item {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid #dddddd;
}
.toe-story-list__item:last-child {
    border-bottom: none;
}

.toe-story-list__time {
    font-size: 0.8rem;
    color: #666666 !important;
    flex-shrink: 0;
    min-width: 38px;
    font-family: 'Roboto', Arial, sans-serif;
}

.toe-story-list__link {
    font-size: 0.9rem;
    text-decoration: none !important;
    line-height: 1.4;
    font-family: 'Roboto', Arial, sans-serif;
    color: #111111 !important;
}
.toe-story-list__link:hover,
.toe-story-list__link:focus {
    color: #EA0303 !important;
    text-decoration: underline !important;
}

/* ── Loading / empty ──────────────────────────────────────── */
.toe-loading,
.toe-empty {
    font-size: 0.875rem;
    color: #666666 !important;
    padding: 24px 0;
    list-style: none;
}

/* ══════════════════════════════════════════════════════════
   DARK MODE OVERRIDES
   Targets every possible selector the TOE theme might use.
   All values use !important to win specificity fights.
   ══════════════════════════════════════════════════════════ */

/* Target html element with dark class/attribute */
html.dark .toe-archive__heading,
html[data-theme="dark"] .toe-archive__heading,
html[class*="dark"] .toe-archive__heading,
body.dark .toe-archive__heading,
body[data-theme="dark"] .toe-archive__heading,
body[class*="dark"] .toe-archive__heading           { color: #EA0303 !important; }

html.dark .toe-archive__year-heading,
html[data-theme="dark"] .toe-archive__year-heading,
html[class*="dark"] .toe-archive__year-heading,
body.dark .toe-archive__year-heading,
body[data-theme="dark"] .toe-archive__year-heading,
body[class*="dark"] .toe-archive__year-heading      { color: #EA0303 !important; }

html.dark .toe-archive__subheading,
html[data-theme="dark"] .toe-archive__subheading,
html[class*="dark"] .toe-archive__subheading,
body.dark .toe-archive__subheading,
body[data-theme="dark"] .toe-archive__subheading,
body[class*="dark"] .toe-archive__subheading        { color: #e2e2e2 !important; }

html.dark .toe-back-btn,
html[data-theme="dark"] .toe-back-btn,
html[class*="dark"] .toe-back-btn,
body.dark .toe-back-btn,
body[data-theme="dark"] .toe-back-btn,
body[class*="dark"] .toe-back-btn                  { color: #EA0303 !important; }

html.dark .toe-year-list__item,
html[data-theme="dark"] .toe-year-list__item,
html[class*="dark"] .toe-year-list__item,
body.dark .toe-year-list__item,
body[data-theme="dark"] .toe-year-list__item,
body[class*="dark"] .toe-year-list__item           { border-bottom-color: #2a2a2a !important; }

/* Year buttons — white text in dark mode, NO hover colour */
html.dark .toe-year-btn,
html[data-theme="dark"] .toe-year-btn,
html[class*="dark"] .toe-year-btn,
body.dark .toe-year-btn,
body[data-theme="dark"] .toe-year-btn,
body[class*="dark"] .toe-year-btn                  { color: #ed0101 !important; }

html.dark .toe-month__name,
html[data-theme="dark"] .toe-month__name,
html[class*="dark"] .toe-month__name,
body.dark .toe-month__name,
body[data-theme="dark"] .toe-month__name,
body[class*="dark"] .toe-month__name               { color: #e2e2e2 !important; }

html.dark .toe-day--has-posts,
html[data-theme="dark"] .toe-day--has-posts,
html[class*="dark"] .toe-day--has-posts,
body.dark .toe-day--has-posts,
body[data-theme="dark"] .toe-day--has-posts,
body[class*="dark"] .toe-day--has-posts            { color: #e2e2e2 !important; }

html.dark .toe-day--has-posts:hover,
html.dark .toe-day--has-posts:focus,
html[data-theme="dark"] .toe-day--has-posts:hover,
html[data-theme="dark"] .toe-day--has-posts:focus,
html[class*="dark"] .toe-day--has-posts:hover,
html[class*="dark"] .toe-day--has-posts:focus,
body.dark .toe-day--has-posts:hover,
body.dark .toe-day--has-posts:focus,
body[data-theme="dark"] .toe-day--has-posts:hover,
body[data-theme="dark"] .toe-day--has-posts:focus,
body[class*="dark"] .toe-day--has-posts:hover,
body[class*="dark"] .toe-day--has-posts:focus      { background: #4fa8cc !important; color: #0d0d0d !important; }

html.dark .toe-rule,
html[data-theme="dark"] .toe-rule,
html[class*="dark"] .toe-rule,
body.dark .toe-rule,
body[data-theme="dark"] .toe-rule,
body[class*="dark"] .toe-rule                      { border-top-color: #2a2a2a !important; }

html.dark .toe-story-list__item,
html[data-theme="dark"] .toe-story-list__item,
html[class*="dark"] .toe-story-list__item,
body.dark .toe-story-list__item,
body[data-theme="dark"] .toe-story-list__item,
body[class*="dark"] .toe-story-list__item          { border-bottom-color: #2a2a2a !important; }

html.dark .toe-story-list__time,
html[data-theme="dark"] .toe-story-list__time,
html[class*="dark"] .toe-story-list__time,
body.dark .toe-story-list__time,
body[data-theme="dark"] .toe-story-list__time,
body[class*="dark"] .toe-story-list__time          { color: #9a9a9a !important; }

html.dark .toe-story-list__link,
html[data-theme="dark"] .toe-story-list__link,
html[class*="dark"] .toe-story-list__link,
body.dark .toe-story-list__link,
body[data-theme="dark"] .toe-story-list__link,
body[class*="dark"] .toe-story-list__link          { color: #e2e2e2 !important; }

html.dark .toe-story-list__link:hover,
html.dark .toe-story-list__link:focus,
html[data-theme="dark"] .toe-story-list__link:hover,
html[data-theme="dark"] .toe-story-list__link:focus,
html[class*="dark"] .toe-story-list__link:hover,
html[class*="dark"] .toe-story-list__link:focus,
body.dark .toe-story-list__link:hover,
body.dark .toe-story-list__link:focus,
body[data-theme="dark"] .toe-story-list__link:hover,
body[data-theme="dark"] .toe-story-list__link:focus,
body[class*="dark"] .toe-story-list__link:hover,
body[class*="dark"] .toe-story-list__link:focus    { color: #EA0303 !important; }

html.dark .toe-loading,
html.dark .toe-empty,
html[data-theme="dark"] .toe-loading,
html[data-theme="dark"] .toe-empty,
html[class*="dark"] .toe-loading,
html[class*="dark"] .toe-empty,
body.dark .toe-loading,
body.dark .toe-empty,
body[data-theme="dark"] .toe-loading,
body[data-theme="dark"] .toe-empty,
body[class*="dark"] .toe-loading,
body[class*="dark"] .toe-empty                     { color: #9a9a9a !important; }

/* OS dark preference fallback */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]):not(.light) .toe-archive__heading     { color: #EA0303 !important; }
    html:not([data-theme="light"]):not(.light) .toe-archive__year-heading { color: #EA0303 !important; }
    html:not([data-theme="light"]):not(.light) .toe-archive__subheading  { color: #e2e2e2 !important; }
    html:not([data-theme="light"]):not(.light) .toe-back-btn             { color: #EA0303 !important; }
    html:not([data-theme="light"]):not(.light) .toe-year-list__item      { border-bottom-color: #2a2a2a !important; }
    html:not([data-theme="light"]):not(.light) .toe-year-btn             { color: #ed0101 !important; }
    html:not([data-theme="light"]):not(.light) .toe-month__name          { color: #e2e2e2 !important; }
    html:not([data-theme="light"]):not(.light) .toe-day--has-posts       { color: #e2e2e2 !important; }
    html:not([data-theme="light"]):not(.light) .toe-day--has-posts:hover { background: #4fa8cc !important; color: #0d0d0d !important; }
    html:not([data-theme="light"]):not(.light) .toe-rule                 { border-top-color: #2a2a2a !important; }
    html:not([data-theme="light"]):not(.light) .toe-story-list__item     { border-bottom-color: #2a2a2a !important; }
    html:not([data-theme="light"]):not(.light) .toe-story-list__time     { color: #9a9a9a !important; }
    html:not([data-theme="light"]):not(.light) .toe-story-list__link     { color: #e2e2e2 !important; }
    html:not([data-theme="light"]):not(.light) .toe-story-list__link:hover { color: #EA0303 !important; }
}

/* ── Runtime-stamped dark theme (via JS MutationObserver) ─── */
/* These selectors are guaranteed — JS stamps data-toe-theme   */
/* on #toe-archive itself whenever dark mode is detected.      */

#toe-archive[data-toe-theme="dark"] .toe-archive__heading     { color: #EA0303 !important; }
#toe-archive[data-toe-theme="dark"] .toe-archive__year-heading { color: #EA0303 !important; }
#toe-archive[data-toe-theme="dark"] .toe-archive__subheading  { color: #e2e2e2 !important; }
#toe-archive[data-toe-theme="dark"] .toe-back-btn             { color: #EA0303 !important; }
#toe-archive[data-toe-theme="dark"] .toe-year-list__item      { border-bottom-color: #2a2a2a !important; }
#toe-archive[data-toe-theme="dark"] .toe-year-btn             { color: #ed0101 !important; }
#toe-archive[data-toe-theme="dark"] .toe-month__name          { color: #e2e2e2 !important; }
#toe-archive[data-toe-theme="dark"] .toe-day--has-posts       { color: #e2e2e2 !important; }
#toe-archive[data-toe-theme="dark"] .toe-day--has-posts:hover,
#toe-archive[data-toe-theme="dark"] .toe-day--has-posts:focus { background: #4fa8cc !important; color: #0d0d0d !important; }
#toe-archive[data-toe-theme="dark"] .toe-rule                 { border-top-color: #2a2a2a !important; }
#toe-archive[data-toe-theme="dark"] .toe-story-list__item     { border-bottom-color: #2a2a2a !important; }
#toe-archive[data-toe-theme="dark"] .toe-story-list__time     { color: #9a9a9a !important; }
#toe-archive[data-toe-theme="dark"] .toe-story-list__link     { color: #e2e2e2 !important; }
#toe-archive[data-toe-theme="dark"] .toe-story-list__link:hover,
#toe-archive[data-toe-theme="dark"] .toe-story-list__link:focus { color: #EA0303 !important; }
#toe-archive[data-toe-theme="dark"] .toe-loading,
#toe-archive[data-toe-theme="dark"] .toe-empty               { color: #9a9a9a !important; }