/*
Theme Name: Scopus Journal Index Child
Theme URI: https://scopusjournalindex.com/
Description: Child theme of scopusjournalindex. Custom ACF Pro blocks and page templates for the Scopus Journal Index site migration.
Author: Scopus Journal Index
Author URI: https://scopusjournalindex.com/
Template: scopusjournalindex
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: scopusjournalindex-child
*/

/* Add your custom style overrides below */

/* Thank You (page-thank-you.php) and 404 (404.php) templates. */
.scopus-status-page {
	padding: 120px 0;
	min-height: 50vh;
	display: flex;
	align-items: center;
}

.scopus-status-page .terms-content {
	max-width: 640px;
	margin: 0 auto;
}

.scopus-status-page .get-started {
	margin-top: 30px;
}

.scopus-404-code {
	display: block;
	font-size: 90px;
	font-weight: 700;
	color: #D64799;
	line-height: 1;
	margin-bottom: 10px;
}

/* ==========================================================================
   Primary nav — active / current-page + hover states
   Scopus_Index_Navwalker (inc/navwalker.php) mirrors WordPress' standard
   current-menu-item / current-menu-parent / current-menu-ancestor classes
   (and the current_page_* equivalents) onto each <li>, and adds .active to
   the <a> for both the current page and any dropdown whose child page is
   currently being viewed. Loads after assets/css/style.css, so it wins the
   cascade without needing to out-!important everything there.
   ========================================================================== */

:root {
	--scopus-nav-active: #290B51;
	--scopus-nav-accent: #D64799;
}

/* Top-level link — hover and the exact current page share the same accent
   and reuse the existing underline (:before) animation, just held open.
   !important: Bootstrap's own .navbar-light .navbar-nav .nav-link.active
   rule (loaded earlier) targets color too, and this file otherwise relies
   on !important throughout to stay on top of that cascade. */
.main-menu .navbar-nav > .nav-item > .nav-link:hover,
.main-menu .navbar-nav > .nav-item > .nav-link.active {
	color: var(--scopus-nav-active) !important;
}

.main-menu .navbar-nav > .nav-item > .nav-link.active::before {
	width: 100%;
	left: 0%;
}

/* Parent dropdown toggle — stays highlighted while the visitor is on one of
   its child pages (current-menu-parent / current-menu-ancestor), not just
   when the toggle's own URL is the current page. */
.main-menu .navbar-nav > .nav-item.dropdown.current-menu-parent > .nav-link.dropdown-toggle,
.main-menu .navbar-nav > .nav-item.dropdown.current-menu-ancestor > .nav-link.dropdown-toggle,
.main-menu .navbar-nav > .nav-item.dropdown.current_page_parent > .nav-link.dropdown-toggle,
.main-menu .navbar-nav > .nav-item.dropdown.current_page_ancestor > .nav-link.dropdown-toggle {
	color: var(--scopus-nav-active) !important;
	font-weight: 700;
}
.main-menu .navbar-nav > .nav-item.dropdown.current-menu-parent > .nav-link.dropdown-toggle::before,
.main-menu .navbar-nav > .nav-item.dropdown.current-menu-ancestor > .nav-link.dropdown-toggle::before,
.main-menu .navbar-nav > .nav-item.dropdown.current_page_parent > .nav-link.dropdown-toggle::before,
.main-menu .navbar-nav > .nav-item.dropdown.current_page_ancestor > .nav-link.dropdown-toggle::before {
	width: 100%;
	left: 0%;
}

/* Open state — Bootstrap adds .show to the .dropdown <li> while its menu is
   expanded (desktop click/keyboard and the mobile collapsed menu alike). */
.main-menu .navbar-nav > .nav-item.dropdown.show > .nav-link.dropdown-toggle {
	color: var(--scopus-nav-active) !important;
}

/* Dropdown items — hover/focus, in the site's existing brand purple rather
   than plain black, so interaction reads clearly against the white flyout. */
.main-menu .dropdown-menu .dropdown-item:hover,
.main-menu .dropdown-menu .dropdown-item:focus {
	background: #ffffff !important;
	color: var(--scopus-nav-active) !important;
}

/* Current child page — highlighted at rest (no hover needed) with a left
   accent bar so "you are here" is visibly distinct from a plain hover. */
.main-menu .dropdown-menu .dropdown-item.active,
.main-menu .dropdown-menu .dropdown-item.current-menu-item,
.main-menu .dropdown-menu .dropdown-item.current_page_item {
	background: #ffffff !important;
	color: var(--scopus-nav-active) !important;
	font-weight: 700;
	border-left: 3px solid var(--scopus-nav-accent);
	padding-left: 18px !important;
}