/*
 * DGA tokens applied to secondary navigation: dropdown mega-menu,
 * breadcrumbs, and pagination.
 *
 * (The primary header nav bar -- #headMenuItems, hover pill, active state
 * -- was already covered in dga-header-footer.css.)
 *
 * Three different targeting strategies, matched to what each piece
 * actually is:
 *
 *  1. Dropdown submenu (resources/views/components/dropdown-menu.blade.php,
 *     reused identically inside partials/mobile-menu.blade.php's accordion)
 *     -- got plain stable classes added (`dga-menu`, `dga-menu-item`,
 *     `dga-menu-item__label`), same low-risk approach as buttons/cards,
 *     since these are theme-owned blade files.
 *
 *  2. Breadcrumbs -- generated by the Rank Math SEO plugin
 *     (`rank_math_the_breadcrumbs()` in page-header-default.blade.php and
 *     friends), which outputs its own stable markup
 *     (`nav.rank-math-breadcrumb > p > a + span.separator + span.last`).
 *     No blade edit needed -- targeted directly, same as Gravity Forms.
 *
 *  3. Pagination -- WordPress core's `the_posts_pagination()` /
 *     `paginate_links()` (used in partials/pagination.blade.php and
 *     components/media-center-announcements.blade.php), which output
 *     standard `.page-numbers` markup. Targeted directly, no blade edit.
 *
 * Source of truth: DGA's real `.menu`/`.menu-item`, `.dga-breadcrumb*`, and
 * `.pagination*` CSS from @platformscode/core.
 */

/* ---- 1. Dropdown mega-menu ---- */
.dga-menu {
  width: 240px;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border-neutral-primary) !important;
  background: var(--colors-base-white) !important;
  box-shadow: var(--shadow-md);
}
.dga-menu-item {
  padding: var(--spacing-md) !important;
  transition: background-color 0.15s ease;
}
.dga-menu-item:hover {
  border-radius: var(--radius-xs);
  background: var(--button-background-neutral-hovered);
}
.dga-menu-item__label {
  font-family: var(--font-family-arabic);
  font-size: var(--font-size-text-md);
  line-height: var(--line-height-text-md);
  font-weight: var(--font-weight-semibold) !important;
  color: var(--text-default) !important;
}
.dga-menu-item:hover .dga-menu-item__label,
.dga-menu-item__label:hover {
  color: var(--text-default) !important;      /* dark text, not green (DGA ref image 10) */
  text-decoration: underline !important;
}

/* ---- 2. Breadcrumbs (Rank Math) ---- */
.rank-math-breadcrumb {
  font-family: var(--font-family-arabic);
  font-size: var(--font-size-text-small);
  line-height: var(--line-height-text-small);
}
.rank-math-breadcrumb a {
  color: var(--link-neutral) !important;
  text-decoration: none;
}
.rank-math-breadcrumb a:hover {
  text-decoration: underline;
}
.rank-math-breadcrumb .separator {
  font-size: 0;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 7px;
  height: 14px;
  color: var(--text-default-disabled) !important;
}
.rank-math-breadcrumb .separator::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}
[dir="rtl"] .rank-math-breadcrumb .separator::after {
  transform: translate(-50%, -50%) rotate(225deg);
}
.rank-math-breadcrumb .last {
  color: var(--text-default-disabled) !important;
}

/* ---- 3. Pagination (WordPress core page-numbers) ---- */
/*
 * resources/styles/pagination.css (an existing, non-DGA theme file compiled
 * into the main app bundle) already styles this exact markup with a solid
 * fill on .current: ".nav-links .page-numbers.current { @apply bg-primary-500
 * text-white }". That selector is MORE specific than a bare
 * ".page-numbers.current", so it was winning the cascade regardless of load
 * order -- the solid green square in the screenshot is that original rule,
 * with this file's underline-indicator ::after poking out beneath it like a
 * tail. Matching the ".nav-links" prefix here (not just relying on load
 * order) is what actually resets it -- padding/size/radius/background all
 * explicitly zeroed, not just added to.
 */
.nav-links .page-numbers {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  margin-inline: 0;
  font-family: var(--font-family-arabic);
  font-size: var(--font-size-text-small);
  line-height: var(--line-height-text-small);
  font-weight: var(--font-weight-regular);
  color: var(--text-default) !important;
  background-color: transparent !important;
  border-radius: var(--radius-xs);
  transition: background-color 0.15s ease;
}
.nav-links a.page-numbers:hover {
  background: var(--background-neutral-100) !important;
}
.nav-links .page-numbers.current {
  position: relative;
  font-weight: var(--font-weight-semibold) !important;
}
.nav-links .page-numbers.current::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  transform: translateX(-50%);
  width: calc(100% - var(--spacing-2));
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--colors-primary-sa-flag-600-primary);
}
.nav-links .page-numbers.dots {
  color: var(--text-default-disabled) !important;
}

.dga-menu-external-icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-inline-start: 4px;
  color: currentColor;
}

.menu-item-container .dga-menu-external-icon {
  align-self: center;
}