/* =============================================================
   MYA777 — route & navigation component layer
   Extends assets/css/mya777-design-system.css with the components the
   published route bodies and the shared chrome need:
     - primary-nav CTA pill (the conversion menu item)
     - mobile drawer light-premium override (Astra drawer defaults to dark)
     - route hub tile grid (card grids linking to sibling routes)
     - sticky mobile CTA bar markup hook
   Loaded last in the enqueue chain so these rules win on ties.
   ============================================================= */

/* ---- primary navigation: conversion CTA pill -------------------
   Astra gives every menu item the same text-link treatment, so the
   "play now" item added to the primary menu reads as just another link.
   Target its stable .menu-item-<id> class on both the desktop header
   menu and the mobile drawer. */
.main-header-menu > li.menu-item-67 > a,
.ast-builder-menu-1 .menu-item-67 > .menu-link,
#ast-hf-mobile-menu .menu-item-67 > a {
  background: linear-gradient(135deg, var(--mk-coral), var(--mk-coral-deep)) !important;
  color: #ffffff !important;
  border-radius: var(--mk-radius-pill) !important;
  padding: 10px 20px !important;
  font-weight: 700 !important;
  box-shadow: var(--mk-shadow-sm);
  line-height: 1.2;
  white-space: nowrap;
}
.main-header-menu > li.menu-item-67 > a:hover,
#ast-hf-mobile-menu .menu-item-67 > a:hover {
  transform: translateY(-1px);
  text-decoration: none !important;
}

/* ---- Astra mobile drawer: force the site's light-premium surface --
   the off-canvas menu ships with Astra's own dark default scheme, which
   is invisible on a desktop QA pass and only shows once the drawer is
   opened on a phone. Fix container + link colour together. */
#ast-hf-mobile-menu.ast-nav-menu,
.ast-mobile-popup-drawer .ast-mobile-popup-inner {
  background: var(--mk-surface) !important;
}
#ast-hf-mobile-menu li.menu-item > a {
  color: var(--mk-ink) !important;
}
#ast-hf-mobile-menu li.menu-item.current-menu-item > a {
  color: var(--mk-coral-deep) !important;
}

/* ---- route hub tiles: cards that link to sibling routes --------- */
.mk-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--mk-gap);
}
.mk-hub-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--mk-surface);
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius-card);
  padding: 22px;
  box-shadow: var(--mk-shadow-sm);
  transition: box-shadow .2s ease, transform .2s ease;
}
.mk-hub-tile:hover {
  box-shadow: var(--mk-shadow-md);
  transform: translateY(-3px);
}
/* keep the whole tile clickable without nesting block tags in <a>
   (wpautop corrupts <a>-wrapped block children on this theme's stack) */
.mk-hub-tile__link {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: var(--mk-radius-card);
}
.mk-hub-tile__link:focus-visible {
  outline: 3px solid var(--mk-coral);
  outline-offset: 3px;
}
.mk-hub-tile__tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--mk-bg-alt);
  color: var(--mk-gold-deep);
  padding: 4px 10px;
  border-radius: var(--mk-radius-pill);
  margin-bottom: 10px;
}
.mk-hub-tile h3 {
  margin-bottom: 6px;
}
.mk-hub-tile p {
  font-size: 15px;
  margin-bottom: 0;
  color: var(--mk-ink-soft);
}
.mk-hub-tile__meta {
  margin-top: 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--mk-coral-deep);
}

/* ---- sticky mobile CTA bar -------------------------------------- */
.mk-sticky-cta__row {
  display: flex;
  gap: 10px;
}
.mk-sticky-cta__row .mk-btn {
  flex: 1 1 0;
}

/* ---- long route prose: keep measure readable on wide screens ---- */
.mk-route .mk-container > article > p,
.mk-route .mk-two-col p {
  max-width: 78ch;
}

/* ---- accessible focus ring on every in-route control ------------- */
.mk-route a:focus-visible,
.mk-route button:focus-visible,
.mk-btn:focus-visible {
  outline: 3px solid var(--mk-coral);
  outline-offset: 2px;
  text-decoration: none;
}

/* ---- print: drop the sticky/shortcut chrome ---------------------- */
@media print {
  .mk-topbar,
  .mk-sticky-cta,
  .mk-prefooter { display: none !important; }
}