/*
 * dark-theme.css — Additive dark override for paparrizos.org  v9
 * Loaded AFTER styles.css. Does NOT modify any HTML or template structure
 * except where explicitly noted.
 *
 * Palette (v7 blue-dark):
 *   #0d1117  body outer background
 *   #111720  main content (page-contents / sections)
 *   #161b22  header & footer surface
 *   #1a2332  hero / particles banner
 *   #1c2128  elevated hover / sub-menu surfaces
 *   #21262d  slightly elevated
 *   #30363d  borders / dividers
 *   #e6edf3  primary text (headings)
 *   #c9d1d9  secondary text (body)
 *   #8b949e  muted text (meta, labels)
 *   #6e7681  very muted (breadcrumbs, copyright)
 *   #58a6ff  accent / links
 *   #79c0ff  accent hover
 */

/* ===================================================
   1. Body & outer background
   =================================================== */
body {
    background-color: #0d1117 !important;
    color: #c9d1d9;
}

body.bg-pattern {
    background-image: none !important;
    background-color: #0d1117 !important;
}

#wrapper.boxed-layout {
    background-color: #111720;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.8);
}

/* ===================================================
   2. Typography
   =================================================== */
p {
    color: #c9d1d9;
}

a {
    color: #58a6ff;
}

a:hover, a:focus {
    color: #79c0ff;
}

h1, h2, h3, h4, h5, h6 {
    color: #e6edf3;
}

h1.with-sideline:before,
h2.with-sideline:before,
h3.with-sideline:before,
h4.with-sideline:before,
h5.with-sideline:before,
h6.with-sideline:before {
    background-color: #30363d;
}

h1.with-underline,
h2.with-underline,
h3.with-underline,
h4.with-underline,
h5.with-underline,
h6.with-underline {
    border-bottom-color: #30363d;
}

h1.with-underline:after,
h2.with-underline:after,
h3.with-underline:after,
h4.with-underline:after,
h5.with-underline:after,
h6.with-underline:after {
    background-color: #58a6ff;
}

h4.with-undeline {
    border-bottom: 1px solid #30363d !important;
    color: #e6edf3;
}

/* Sidebar/widget heading accent: keep the underline, just recolor to blue palette */
h4.with-undeline:after,
h4.with-undeline::after {
    background-color: #58a6ff !important;
}

blockquote {
    border-left-color: #30363d;
    color: #8b949e;
}

/* ===================================================
   3. Main content sections
   =================================================== */
.page-contents {
    background-color: #111720 !important;
}

.section {
    background-color: #111720 !important;
}

/* ===================================================
   4. Page-head / hero (particles banner)
   =================================================== */
.page-head {
    background-color: #1a2332 !important;
}

.page-head.ol-particles {
    position: relative;
}

/* The "John Paparrizos" rotating text uses bg-gray which turns
   into a garish light box on dark — make it transparent */
.page-head .bg-gray,
.page-head .ol-text-rotate.bg-gray,
span.ol-text-rotate.bg-gray {
    background-color: transparent !important;
    color: #e6edf3 !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}

.page-head h1,
.page-head h1 .title,
.page-head h4.head {
    color: #e6edf3;
    text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

/* ── Hero title: nuclear suppression of ALL underlines/decorations in the page-head banner ── */
/* The ol-text-rotate plugin may inject a cursor element or border via JS.
   We kill every possible source: the h1, all its children, and all their ::after/::before. */
.page-head h1.title,
.page-head h1 {
    border-bottom: none !important;
    border-top: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
}
.page-head h1.title::after,
.page-head h1.title:after,
.page-head h1.title::before,
.page-head h1.title:before,
.page-head h1::after,
.page-head h1:after,
.page-head h1::before,
.page-head h1:before {
    display: none !important;
    content: none !important;
    background: none !important;
    border: none !important;
    height: 0 !important;
    width: 0 !important;
    opacity: 0 !important;
}
/* Kill underline on ALL descendants inside the hero h1 */
.page-head h1 *,
.page-head h1 span,
.page-head h1 .ol-text-rotate {
    border-bottom: none !important;
    border-top: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
}
.page-head h1 *::after,
.page-head h1 *:after,
.page-head h1 *::before,
.page-head h1 *:before,
.page-head h1 span::after,
.page-head h1 span:after,
.page-head h1 span::before,
.page-head h1 span:before {
    display: none !important;
    content: none !important;
    background: none !important;
    border: none !important;
    height: 0 !important;
    width: 0 !important;
    opacity: 0 !important;
}
/* The rotating-text plugin often appends a blinking cursor via border-right or
   a <span class="ol-cursor"> element — suppress both */
.page-head .ol-text-rotate-cursor,
.page-head .ol-cursor,
.page-head h1 .cursor {
    display: none !important;
    border: none !important;
}
/* Any injected underline div inside the banner */
.page-head h1 + *[style*="border"],
.page-head h1 + div {
    display: none !important;
}

/* Breadcrumbs inside page-head */
.page-head .breadcrumb li,
.page-head .breadcrumb li a,
.page-head .breadcrumb-wrapper a,
.page-head .breadcrumb-wrapper li,
.page-head .breadcrumb-wrapper span,
.page-head .breadcrumb-wrapper i {
    color: #8b949e !important;
}

/* Restore the separator line at a visible but subdued shade */
.page-head.lined {
    border-bottom-color: #30363d !important;
    border-bottom-width: 1px !important;
    border-bottom-style: solid !important;
}

/* ===================================================
   5. Header
   =================================================== */
#header.dark,
#header.sticky-dark.is-sticky {
    background-color: #161b22 !important;
    border-bottom: 1px solid #21262d !important;
}

/* The logo/social strip above the nav */
.head-main {
    background-color: #161b22 !important;
    border-bottom: 1px solid #21262d !important;
}

/* Nav row — kill the bright #ececec border-top from base styles */
#header .nav-row {
    border-top-color: #21262d !important;
}

#header.dark .nav-row,
#header.sticky-dark.is-sticky .nav-row {
    border-color: #21262d !important;
    background-color: #1a1f27 !important;
}

/* Nav items */
#header.dark #primary-menu > li > a,
#header.sticky-dark.is-sticky #primary-menu > li > a {
    color: #c9d1d9 !important;
}

#header.dark #primary-menu > li > a:hover,
#header.dark #primary-menu > li > a:focus,
#header.sticky-dark.is-sticky #primary-menu > li > a:hover,
#header.sticky-dark.is-sticky #primary-menu > li > a:focus {
    color: #e6edf3 !important;
}

#header.dark .current-menu-item a:not(.btn),
#header.sticky-dark.is-sticky .current-menu-item a:not(.btn) {
    color: #58a6ff !important;
}

/* Sub-menu dropdown */
#header #primary-menu ul.sub-menu {
    background-color: #1c2128;
    border: 1px solid #30363d;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

#header #primary-menu ul.sub-menu li a {
    color: #8b949e !important;
    border-bottom-color: #30363d;
}

#header #primary-menu ul.sub-menu li a:hover,
#header #primary-menu ul.sub-menu li a:focus {
    color: #e6edf3 !important;
    background-color: #21262d;
}

/* Mobile hamburger */
#header.dark .hamburger-inner,
#header.dark .hamburger-inner:before,
#header.dark .hamburger-inner:after {
    background-color: #8b949e;
}

/* Mobile nav */
#header.mobile-menu {
    background-color: #161b22;
}

#header.mobile-menu #primary-menu li a {
    color: #8b949e;
    border-bottom-color: #30363d;
}

#header.mobile-menu #primary-menu li a:hover {
    color: #e6edf3;
}

/* Social icons in the header top strip */
#header .social-icons a {
    color: #6e7681 !important;
    background: transparent !important;
    border-color: transparent !important;
}

#header .social-icons a:hover,
#header .social-icons a:focus {
    color: #e6edf3 !important;
    background: transparent !important;
}

/* ===================================================
   6. Sidebar widgets
   =================================================== */
.widget > h4 {
    color: #e6edf3;
    border-bottom-color: #30363d;
}

.widget > h4:after {
    background-color: #58a6ff;
}

.icon-list li {
    color: #8b949e;
}

.icon-list li a {
    color: #8b949e !important;
}

.icon-list li a:hover,
.icon-list li a:focus {
    color: #58a6ff !important;
}

.icon-list li i {
    color: #58a6ff;
}

/* Sidebar social icons */
.page-contents .social-icons a,
#main-area .social-icons a,
.section .social-icons a {
    color: #6e7681 !important;
    background-color: #1c2128 !important;
    border-color: #30363d !important;
}

.page-contents .social-icons a:hover,
#main-area .social-icons a:hover,
.section .social-icons a:hover {
    color: #e6edf3 !important;
    background-color: #58a6ff !important;
    border-color: #58a6ff !important;
}

/* ===================================================
   7. Footer
   =================================================== */
#footer.dark-wrapper {
    background-color: #161b22 !important;
}

#footer.dark-wrapper #footer-main {
    background-color: #161b22 !important;
    border-top: 2px solid #21262d !important;
}

/* Center logo — restore v7 straddling behavior (negative margin from template intact) */
#footer .center-logo .img {
    background-color: #161b22 !important;
    border: none !important;
    box-shadow: 0 4px 28px rgba(0, 0, 0, 0.65) !important;
}

#footer .center-logo .img:after {
    background: rgba(22, 27, 34, 0.55) !important;
    display: block !important;
}

#footer.dark-wrapper p,
#footer.dark-wrapper .copyright {
    color: #6e7681 !important;
}

#footer.dark-wrapper ul.footer-menu li a {
    color: #8b949e !important;
}

#footer.dark-wrapper ul.footer-menu li a:hover {
    color: #e6edf3 !important;
}

#footer.dark-wrapper ul.footer-menu li:after {
    background: transparent !important;
    color: #6e7681 !important;
}

/* Footer social icons */
#footer.dark-wrapper .social-icons a,
#footer .dark-wrapper .social-icons a {
    color: #6e7681 !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

#footer.dark-wrapper .social-icons a:hover,
#footer.dark-wrapper .social-icons a:focus {
    color: #e6edf3 !important;
    background-color: transparent !important;
}

/* ===================================================
   8. Main content area typography
   =================================================== */
#main-area p {
    color: #c9d1d9;
}

#main-area p b,
#main-area p strong {
    color: #c9d1d9;
}

#main-area ol li,
#main-area ul li {
    color: #8b949e;
}

#main-area h3.title {
    color: #e6edf3;
    border-bottom: 1px solid #30363d;
    padding-bottom: 8px;
}
/* Blue accent underline — same style as h4.with-undeline (POSITIONS, SOCIAL MEDIA, etc.) */
#main-area h3.title:after,
#main-area h3.title::after {
    background-color: #58a6ff !important;
}

/* ===================================================
   9. Utilities & Bootstrap overrides
   =================================================== */
hr {
    border-color: #30363d;
}

.alert-info {
    background-color: rgba(88, 166, 255, 0.08);
    border-color: rgba(88, 166, 255, 0.25);
    color: #8b949e;
}

.alert-info a {
    color: #58a6ff !important;
}

/* Sidebar portrait photo */
.col-sm-4 img,
.col-md-3 img {
    border: 1px solid #21262d;
    border-radius: 3px;
}

/* ===================================================
   10. Scrollbar (webkit only)
   =================================================== */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0d1117; }
::-webkit-scrollbar-thumb { background: #30363d; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #58a6ff; }

/* ===================================================
   11. Awards + Stats: two-column side-by-side grid
   =================================================== */
.jp-impact-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 20px;
    margin-bottom: 28px;
    align-items: start;
}

.jp-col-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #6e7681;
    border-bottom: 1px solid #21262d;
    padding-bottom: 7px;
    margin-bottom: 10px;
}

/* Award items (left column) */
.jp-award-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 0;
    color: #c9d1d9;
    font-size: 13px;
    line-height: 1.45;
}
.jp-award-icon {
    font-size: 15px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
/* oli-trophy2 icon color */
.jp-award-icon .oli {
    color: #58a6ff;
    font-size: 16px;
    line-height: 1;
}

/* Stats (right column) — 2×2 grid */
.jp-stats-2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.jp-stat-box {
    background: #1c2128;
    border: 1px solid #30363d;
    border-radius: 6px;
    padding: 14px 8px 12px;
    text-align: center;
}
.jp-stat-num {
    display: block;
    font-size: 1.65em;
    font-weight: 700;
    color: #58a6ff;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.jp-stat-label {
    font-size: 9.5px;
    color: #6e7681;
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

/* Stack to one column on narrow screens */
@media (max-width: 600px) {
    .jp-impact-grid { grid-template-columns: 1fr; }
}

/* ===================================================
   12. Awards Timeline (ol-timeline / scrollable-timeline)
   =================================================== */

/* Container: transparent background; recolor the template's OWN vertical
   border-left — do NOT add a second border-left (that doubles the line) */
.ol-timeline,
.ol-timeline.scrollable-timeline {
    background: transparent !important;
    /* Recolor the existing template line; don't override border shorthand
       or it clears the template's positioning of that line */
    border-left-color: #30363d !important;
    border-left-width: 2px !important;
}

/* The template's per-item ::before segments (vertical line fill) */
.ol-timeline .tl-item::before,
.ol-timeline .tl-item:before {
    background-color: #30363d !important;
    border-color: #30363d !important;
}

/* ── NO horizontal separator lines between items ── */
.tl-item,
.tl-item.pub-item,
.tl-item.pub-item.with-icon {
    background: transparent !important;
    border-bottom: none !important;
    border-top: none !important;
}

/* ── Year badge text ── */
.tl-item .item-section {
    color: #8b949e !important;
    background: transparent !important;
    border-color: transparent !important;
}

/* ── Year dot — default: dark pill, grey ring ── */
.tl-item .item-section::before,
.tl-item .item-section:before {
    background-color: #30363d !important;
    border-color: #30363d !important;
    box-shadow: none !important;
}

/* ── Active / in-view dot: template adds .active → sets #BB0000 on :after ──
   Confirmed from styles.css line 11079:
     .ol-timeline .tl-item.active .item-section:after { background-color: #BB0000; }
   Also is_stuck (sticky-kit class) and non-scrollable fallback — all :after.
   Must override :after, NOT :before. */
.ol-timeline .tl-section.active .item-section:after,
.ol-timeline .tl-section.active .item-section::after,
.ol-timeline .tl-item.active .item-section:after,
.ol-timeline .tl-item.active .item-section::after,
.ol-timeline .item-section.is_stuck:after,
.ol-timeline .item-section.is_stuck::after,
.ol-timeline .tl-item.jp-dark-active .item-section:after,
.ol-timeline .tl-item.jp-dark-active .item-section::after {
    background-color: #58a6ff !important;
    border-color: rgba(88,166,255,0.3) !important;
    box-shadow: 0 0 0 3px rgba(88,166,255,0.18) !important;
}

/* ── Icon circle (elem-wrapper) ──
   The .elem-wrapper is just a float:left square container.
   The actual circle is the <i> element inside it, which the template gives:
     background-color: #fff; border-radius: 50%; border: 1px solid #bbb;
   (confirmed from styles.css line 10515)
   Setting background on .elem-wrapper shows as a SQUARE around the circle —
   that is the "square box" bug. Keep .elem-wrapper transparent.
   Instead, override background/border/color directly on the <i> element. */
.tl-item .elem-wrapper,
.tl-item.with-icon .elem-wrapper,
.ol-timeline .tl-item .elem-wrapper,
.ol-timeline .tl-item.pub-item.with-icon .elem-wrapper {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}
/* The circle: target the <i> (or any icon element) directly */
.ol-timeline .tl-item.pub-item.with-icon .elem-wrapper i,
.ol-timeline .tl-item.with-icon .elem-wrapper i,
.pub-item.with-icon .elem-wrapper i,
.tl-item .elem-wrapper i {
    background-color: #1c2128 !important;
    color: #58a6ff !important;
    border-color: #30363d !important;
    box-shadow: none !important;
}
/* Also ensure the icon font glyph color is blue */
.tl-item .elem-wrapper .oli,
.tl-item .elem-wrapper img {
    color: #58a6ff !important;
    filter: none !important;
}

/* ── Content area ── */
.tl-item .content-wrapper {
    background: transparent !important;
}
.tl-item .content-wrapper h5,
.tl-item .content-wrapper h5.col-md-12 {
    color: #e6edf3 !important;
    border-bottom: none !important;
    text-decoration: none !important;
}
.tl-item .content-wrapper p {
    color: #8b949e !important;
}

/* ===================================================
   13. Research Sponsors — dark overrides for template's clients-grid
   =================================================== */
.clients-grid {
    list-style: none;
    padding: 0;
    margin: 0;
}
/* The template's grid-3 puts 3 items per row via floats/flex.
   Override borders and backgrounds to match dark palette. */
.clients-grid.grid-3 li {
    border: 1px solid #30363d !important;
    background: #1c2128 !important;
    transition: border-color 0.2s, background 0.2s;
}
.clients-grid.grid-3 li:hover {
    border-color: rgba(88, 166, 255, 0.35) !important;
    background: #21262d !important;
}
/* Remove grayscale and opacity — SVG logos look best in color on dark */
.clients-grid.grid-3 li img,
.clients-grid.grid-3 li a img {
    filter: none !important;
    opacity: 1 !important;
}
/* Ensure images fit neatly in cells */
.clients-grid li img {
    max-height: 60px;
    width: auto;
    display: block;
    margin: 0 auto;
}

/* ===================================================
   13. Research Sponsors — 1×6 dark card grid
   =================================================== */
.jp-sponsor-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-bottom: 28px;
}
.jp-sponsor-item {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1c2128;
    border: 1px solid #30363d;
    border-radius: 6px;
    padding: 14px 10px;
    transition: border-color 0.2s, background 0.2s;
    text-decoration: none !important;
}
.jp-sponsor-item:hover {
    border-color: rgba(88, 166, 255, 0.35);
    background: #21262d;
}
.jp-sponsor-item img {
    max-height: 44px;
    max-width: 100%;
    width: auto;
    display: block;
    filter: none !important;
    opacity: 1 !important;
}
/* Stack to 3 columns on tablets, 2 on phones */
@media (max-width: 768px) {
    .jp-sponsor-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
    .jp-sponsor-grid { grid-template-columns: repeat(2, 1fr); }
}