/* ==========================================================================
   ERE Journal - Pragma Theme Custom Stylesheet
   v10 - cleaned up and merged; all comments translated to English;
   menu hover fixes for the admin bar and primary nav consolidated.
   ========================================================================== */

/* ---- ADMIN BAR (top thin bar: username/login, language switcher) ---- */
.main-header__admin {
    background-color: #1a3e6e !important;
    padding: 4px 0 !important;
}
.main-header__admin a,
.main-header__admin .dropdown-toggle {
    color: #ffffff !important;
    font-size: 13px !important;
}

/* Top-level item (e.g. the username toggle): reset the background and fix
   hover/focus/active, which previously turned black. That black came from
   the theme's own LESS: .main-menu__nav-link:hover/:focus/:active uses
   background-color: contrast(@contrast-colour) - a function that picks
   black or white depending on the theme's "baseColour" setting. It has
   nothing to do with our custom CSS being wrong; it just needs a more
   specific override. */
.main-header__admin .main-menu__nav-item {
    background-color: transparent !important;
}
.main-header__admin .main-menu__nav-link:hover,
.main-header__admin .main-menu__nav-link:focus,
.main-header__admin .main-menu__nav-link:active {
    background-color: #152f54 !important;
}

/* Profile dropdown (Profile / Log Out entries): background follows the same
   pattern as the primary nav submenu below (base #1a3e6e, hover #152f54,
   text always light). Targeted broadly (dropdown-menu, li AND a, hover AND
   focus-within) because a narrower selector (just "li.dropdown-item:hover")
   was still being overridden by a lighter background from elsewhere. */
.main-header__admin .dropdown-menu,
.main-header__admin .dropdown-menu li,
.main-header__admin .dropdown-menu li a {
    background-color: #1a3e6e !important;
    color: #ffffff !important;
}
.main-header__admin .dropdown-menu li:hover,
.main-header__admin .dropdown-menu li:hover a,
.main-header__admin .dropdown-menu li a:hover,
.main-header__admin .dropdown-menu li:focus-within,
.main-header__admin .dropdown-menu li:focus-within a {
    background-color: #152f54 !important;
    color: #ffffff !important;
}

/* Confirmed from the actual HTML source: the Register/Login text sits in a
   <span> inside the <a>. The ".main-menu__nav-link span" rule in the NAV
   LINKS section below applies navy (#1a3e6e) to that span directly, which
   made the text invisible against the admin bar's own navy background.
   With a more specific selector we turn only the spans inside the admin
   bar white; the navbar links (About, Announcements, ...) are untouched. */
.main-header__admin .main-menu__nav-link,
.main-header__admin .main-menu__nav-link span {
    color: #ffffff !important;
}
.main-header__admin .main-menu__nav-link:hover,
.main-header__admin .main-menu__nav-link:hover span,
.main-header__admin .main-menu__nav-link:focus,
.main-header__admin .main-menu__nav-link:focus span,
.main-header__admin .main-menu__nav-link:active,
.main-header__admin .main-menu__nav-link:active span {
    color: #ccd9ec !important;
}

/* ---- NAVBAR (header bar overall) ---- */
.main-header, header.main-header {
    background-color: #ffffff !important;
    border-bottom: 3px solid #1a3e6e !important;
    box-shadow: none !important;
}
.navbar, nav.navbar {
    background-color: #ffffff !important;
}

/* ---- LOGO ----
   The logo should look large and prominent; we add some vertical padding
   to the navbar so the logo doesn't look cramped. */
.main-menu__title img,
.main-menu__title .img-fluid {
    max-height: 130px !important;
    width: auto !important;
    height: auto !important;
}
.navbar, nav.navbar {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
}

/* ---- PRIMARY NAV: LINKS (About, Announcements, ...) ---- */
.main-menu__nav-link,
.main-menu__nav-link span {
    color: #1a3e6e !important;
    font-weight: 500 !important;
}

/* Top-level item: reset the background and fix hover/focus/active (same
   contrast()-driven black background issue as in the admin bar above).
   The inner <span> must be targeted explicitly too, otherwise the rule
   right above (color on span, unconditional + !important) keeps the text
   navy even while hovering. */
nav.main-menu .main-menu__nav-item {
    background-color: transparent !important;
}
nav.main-menu .main-menu__nav-link:hover,
nav.main-menu .main-menu__nav-link:focus,
nav.main-menu .main-menu__nav-link:active {
    background-color: #1a3e6e !important;
    color: #ffffff !important;
}
nav.main-menu .main-menu__nav-link:hover span,
nav.main-menu .main-menu__nav-link:focus span,
nav.main-menu .main-menu__nav-link:active span {
    color: #ffffff !important;
}

/* ---- PRIMARY NAV: DROPDOWN (submenu items) ---- */
.navbar .dropdown-menu { background-color: #1a3e6e !important; border: none !important; }
.navbar .dropdown-menu .dropdown-item,
.navbar .dropdown-menu a { color: #ffffff !important; background-color: transparent !important; }
.navbar .dropdown-item:hover,
.navbar .dropdown-menu a:hover { background-color: #152f54 !important; color: #ffffff !important; }

/* ---- BACKGROUND ---- */
body { background-color: #1a3e6e !important; }

/* ---- CONTENT ---- */
main.container, .main__content {
    background-color: #ffffff !important;
    color: #333333 !important;
    padding: 2rem !important;
    border-radius: 4px !important;
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}
main.container h1, main.container h2, main.container h3,
main.container p, main.container li, main.container span {
    color: #333333 !important;
}

/* ---- HOMEPAGE ---- */
body.page_index main.container,
body.page_index .main__content {
    background-color: transparent !important;
    padding: 2rem !important;
    margin-top: 0 !important;
}
/* Remove the box on the homepage, show text only */
body.page_index section.issue {
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}
/* Add an intro text block at the top of the homepage */
body.page_index main.container::before {
    content: "Emerging Research in Education (ERE) is a Diamond Open-Access, peer-reviewed journal supporting early-career researchers in educational research across Europe and beyond, published under the auspices of the European Educational Research Association (EERA).";
    display: block !important;
    color: #ccd9ec !important;
    font-size: 1.15rem !important;
    line-height: 1.9 !important;
    max-width: 750px !important;
    margin: 2.5rem auto !important;
    text-align: center !important;
    font-family: Georgia, serif !important;
    font-style: italic !important;
    padding: 2rem !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,0.06) !important;
}

/* ---- HOMEPAGE TEXT COLOR FIX ----
   The general #333333 rule inside main.container was also being applied
   on the homepage, but since the homepage background is transparent there
   (showing the navy body color), the text was nearly unreadable
   (near-black on navy). */
body.page_index main.container h1,
body.page_index main.container h2,
body.page_index main.container h3,
body.page_index main.container p,
body.page_index main.container li,
body.page_index main.container span {
    color: #ccd9ec !important;
}
body.page_index main.container a { color: #ffffff !important; }
body.page_index main.container a:hover { color: #ccd9ec !important; }

/* ---- TEXT SELECTION / COPY FIX ----
   The theme or some other CSS source was likely applying user-select:
   none, so text couldn't be selected with the mouse (no blue highlight
   appeared). This rule now covers the ENTIRE page (including footer and
   admin bar). */
*, *::before, *::after {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}

/* ---- FOOTER ---- */
.main-footer { background-color: #1a3e6e !important; color: #ffffff !important; }
.main-footer a { color: #ccd9ec !important; }
.main-footer h2 { color: #ffffff !important; }

/* ---- LINKS ----
   Note: The conflict with OJS's own dark link color only occurred on
   WHITE-background content pages (main.container, .main__content) - e.g.
   "For Readers" etc. So this fix applies ONLY there; the intentionally
   light-colored links in the footer and the homepage's navy box are left
   untouched. */
html body main.container a:not(#___boost),
html body .main__content a:not(#___boost) {
    color: #1a56db !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
}
body.page_index main.container a:not(#___boost) {
    color: #ffffff !important;
    font-weight: 600 !important;
}
html body main.container a:not(#___boost):hover,
html body .main__content a:not(#___boost):hover {
    color: #123f9e !important;
}
body.page_index main.container a:not(#___boost):hover {
    color: #ccd9ec !important;
}

/* ---- BUTTONS ---- */
.btn-primary {
    background-color: #1a3e6e !important;
    border-color: #1a3e6e !important;
    color: #ffffff !important;
}
.btn-primary:hover { background-color: #152f54 !important; }