/*
	Theme Name: ARC Child
	Theme URI: https://africaresearchconnects.com
	Description: Child theme for the ARC parent theme. Add custom CSS, template overrides, and site-specific functionality here without modifying the parent.
	Author: ARC Development Team
	Template: arc
	Version: 1.3.0
	Requires at least: 6.0
	Requires PHP: 7.4
	License: GNU General Public License v3 or later.
	License URI: https://www.gnu.org/licenses/gpl-3.0.html
	Text Domain: arc-child
*/

/* ══════════════════════════════════════════════════════════════
   Second row (sub bar) navigation — small screens
   ══════════════════════════════════════════════════════════════

   The parent styles `.arc-secondary-nav ul` as `display:flex` and never sets
   `flex-wrap`, so it defaults to `nowrap` with no overflow handling, and each
   `li a` carries a fixed `height: var(--arc-bar-sub)`. The parent's only
   responsive rule is at 639px, and it wraps the *container* (nav + auth
   buttons), never the nav's own list. So 640–991px got no treatment at all and
   below 640px the items simply overflowed the bar.

   Expanding the acronym labels into full translated phrases made that acute:
   "RRAT" (4 characters) became "Évaluation de la préparation à la recherche"
   (43). Horizontal scrolling fixed the overflow but gave no cue that more
   items existed off-screen.

   So below 991px — the same breakpoint where the parent swaps the main nav for
   the hamburger — the sub bar's nav is hidden and its items are appended into
   the existing mobile drawer by includes/class-arc-mobile-subnav.php. No new
   control to learn, and nothing hidden behind an invisible gesture.

   The auth buttons deliberately STAY in the bar: they are a call to action,
   they always fit on one line, and the drawer carries its own copy anyway.
   ────────────────────────────────────────────────────────────── */

@media (max-width: 991px) {

	/* The nav moves into the drawer; the bar keeps only the auth buttons. */
	.arc-secondary-nav {
		display: none;
	}

	.arc-sub-bar {
		height: auto;
		min-height: 44px;
	}

	/* With the nav gone, `space-between` would leave the buttons stranded. */
	.arc-sub-bar .arc-container {
		justify-content: flex-end;
		padding-block: 6px;
	}

	.arc-auth {
		flex-shrink: 0;
	}
}

/* ── The drawer section added by class-arc-mobile-subnav.php ────
   Mirrors the parent's `.arc-mobile-menu` treatment, one step quieter so it
   reads as secondary to the main menu above it. */

.arc-mobile-subnav {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid #e8e8e8;
}

.arc-mobile-subhead {
	margin: 0 0 2px;
	padding-inline: 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #8a8a8a;
}

.arc-mobile-submenu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.arc-mobile-submenu li {
	border-bottom: 1px solid #f0f0f0;
}

.arc-mobile-submenu li:last-child {
	border-bottom: none;
}

.arc-mobile-submenu li a {
	display: block;
	padding: 11px 4px;
	font-size: 14px;
	font-weight: 500;
	color: var(--arc-teal);
	text-decoration: none;
	transition: color var(--arc-transition);
}

.arc-mobile-submenu li a:hover,
.arc-mobile-submenu li.current-menu-item > a {
	color: var(--arc-green-dark);
}

/* Any third level, kept consistent with the parent's nested treatment. */
.arc-mobile-submenu ul {
	list-style: none;
	margin: 0;
	padding: 0 0 4px;
	padding-inline-start: 16px;
}

.arc-mobile-submenu ul li a {
	font-size: 13px;
	font-weight: 400;
	color: #555;
	padding: 8px 4px;
}

/* The drawer exists in the DOM at every width but is only reachable via the
   hamburger, which the parent hides above 991px. Belt and braces so the
   appended section can never appear beneath a desktop header. */
@media (min-width: 992px) {
	.arc-mobile-subnav {
		display: none;
	}
}

/* ── Alternative A: horizontal scroll (what this replaced) ──────
   Keeps the single-row strip and lets it scroll. `min-width: 0` is the
   load-bearing declaration — a flex item's default `min-width: auto` refuses
   to shrink below its content width, so `overflow-x` never engages without it.
   Rejected because the scroll affordance is not discoverable.

@media (max-width: 991px) {
	.arc-sub-bar { height: auto; min-height: 44px; }

	.arc-secondary-nav {
		flex: 1 1 auto;
		min-width: 0;
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.arc-secondary-nav::-webkit-scrollbar { width: 0; height: 0; display: none; }

	.arc-secondary-nav .arc-sub-menu,
	.arc-secondary-nav ul { flex-wrap: nowrap; width: max-content; }

	.arc-secondary-nav .arc-sub-menu li a,
	.arc-secondary-nav ul li a {
		white-space: nowrap;
		height: auto;
		min-height: 40px;
		padding: 6px 12px;
	}
}
*/

/* ── Alternative B: wrap onto multiple rows ─────────────────────
   Every item visible, no interaction at all, but with the expanded labels the
   green bar runs three to four rows tall on a phone. The divider reset matters:
   the parent puts `border-right` on every link except the last, which strands a
   divider at the end of each wrapped row.

@media (max-width: 991px) {
	.arc-sub-bar { height: auto; min-height: 44px; }
	.arc-sub-bar .arc-container { flex-wrap: wrap; padding-block: 6px; gap: 8px; }

	.arc-secondary-nav .arc-sub-menu,
	.arc-secondary-nav ul { flex-wrap: wrap; row-gap: 2px; }

	.arc-secondary-nav li { position: relative; }

	.arc-secondary-nav .arc-sub-menu li a,
	.arc-secondary-nav ul li a {
		height: auto;
		padding: 6px 12px;
		border-right: none;
	}

	.arc-secondary-nav .arc-sub-menu li:not(:last-child) a::after,
	.arc-secondary-nav ul li:not(:last-child) a::after {
		content: '';
		position: absolute;
		inset-inline-end: 0;
		inset-block: 25%;
		border-inline-end: 1px solid rgba(255, 255, 255, 0.25);
	}
}
*/