/* =========================================================
   RG Herd main page
   Mobile override stylesheet
   Loaded after Tailwind + inline page styles
   Desktop untouched
   ========================================================= */

@media (max-width: 760px) {
  html,
  body {
    overflow-x: hidden;
    background: #020617;
    color: #f8fafc;
  }

  body {
    padding-top: 114px;
  }

  /* Keep header + mobile nav visible while scrolling */
  header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 200 !important;
    background:
      linear-gradient(180deg, rgba(2, 6, 23, 0.96), rgba(2, 6, 23, 0.88)) !important;
    border-bottom: 1px solid rgba(255,255,255,0.10) !important;
    box-shadow: 0 14px 32px rgba(0,0,0,0.32) !important;
    backdrop-filter: blur(18px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(125%) !important;
  }

  header > div {
    padding-top: 0.7rem !important;
    padding-bottom: 0.7rem !important;
  }

  header img[alt="RG Herd"] {
    height: 2rem !important;
    max-width: 168px !important;
  }

  header nav.md\:hidden {
    border-top-color: rgba(255,255,255,0.08) !important;
    padding-top: 0.65rem !important;
    padding-bottom: 0.65rem !important;
  }

  header nav.md\:hidden > div {
    scrollbar-width: none;
    gap: 1rem !important;
    color: #cbd5e1 !important;
  }

  header nav.md\:hidden > div::-webkit-scrollbar {
    display: none;
  }

  header nav.md\:hidden a {
    color: #cbd5e1 !important;
  }

  header nav.md\:hidden a:hover,
  header nav.md\:hidden a:focus {
    color: #ffffff !important;
  }

  /* Hero: tighter, readable, less giant on phone */
  .hero-glow {
    background:
      radial-gradient(circle at 18% 0%, rgba(148, 163, 184, 0.12), transparent 34%),
      radial-gradient(circle at 86% 8%, rgba(16, 185, 129, 0.10), transparent 28%),
      linear-gradient(180deg, #111827 0%, #020617 56%, #020617 100%) !important;
  }

  .hero-glow > div {
    padding-top: 2.6rem !important;
    padding-bottom: 3.4rem !important;
  }

  .hero-glow p:first-child {
    color: #86efac !important;
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
  }

  .hero-glow h1 {
    margin-top: 1rem !important;
    color: #ffffff !important;
    font-size: clamp(2.1rem, 13vw, 3.4rem) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.055em !important;
    text-shadow: 0 2px 20px rgba(0,0,0,0.34);
  }

  .hero-glow p.text-lg {
    margin-top: 1.25rem !important;
    color: #e5e7eb !important;
    font-size: 1rem !important;
    line-height: 1.65 !important;
  }

  .hero-glow span.font-semibold {
    color: #ffffff !important;
  }

  .hero-glow .mt-10 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
    margin-top: 1.75rem !important;
  }

  .hero-glow .mt-10 a {
    width: 100%;
    min-height: 46px;
    border-radius: 999px;
  }

  /* Global section rhythm */
  section[id],
  section.mx-auto {
    padding-top: 3.25rem !important;
    padding-bottom: 3.25rem !important;
  }

  section h2 {
    color: #ffffff !important;
    font-size: clamp(1.75rem, 9vw, 2.55rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.045em !important;
  }

  section h3 {
    color: #ffffff !important;
  }

  section p,
  section li {
    color: #dbe4ee !important;
  }

  .text-slate-300,
  .text-slate-400,
  .text-slate-500,
  .text-slate-600 {
    color: #cbd5e1 !important;
  }

  .text-white {
    color: #ffffff !important;
  }

  /* Reduce card-wall effect on mobile */
  .grid {
    gap: 1rem !important;
  }

  .border,
  .border-t,
  .border-b,
  .border-y {
    border-color: rgba(255,255,255,0.08) !important;
  }

  .bg-slate-900\/45,
  .bg-slate-900\/50,
  .bg-slate-900\/60,
  .bg-slate-900\/70,
  .bg-white\/\[0\.035\],
  .bg-emerald-500\/5,
  .bg-sky-500\/5,
  .bg-rose-500\/5 {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.070), rgba(255,255,255,0.024)) !important;
    backdrop-filter: blur(16px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(120%) !important;
  }

  /* Project cards: keep them readable, but less framed */
  #projects a.group {
    border: 0 !important;
    box-shadow: none !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.060), rgba(255,255,255,0.020)) !important;
  }

  #projects a.group + a.group {
    margin-top: 0;
  }

  #projects img {
    max-height: 2.25rem;
  }

  #projects img[alt="RGTV logo"] {
    max-height: 3.25rem;
  }

  /* Latest alert / feature panels */
  #latest-alert,
  #mission,
  #base,
  #offering,
  #argus,
  #deployments,
  #registrations,
  #help {
    scroll-margin-top: 124px;
  }

  #argus img,
  #base img {
    max-width: 100%;
    height: auto;
  }

  /* CTA rows */
  .flex.flex-wrap.gap-3,
  .flex.flex-wrap.gap-4 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  .flex.flex-wrap.gap-3 a,
  .flex.flex-wrap.gap-4 a {
    width: 100%;
    min-height: 46px;
    border-radius: 999px;
    text-align: center;
  }

  /* Registration cards should read like rows, not nested boxes */
  #registrations .grid > div {
    border: 0 !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.060), rgba(255,255,255,0.020)) !important;
  }

  /* Footer */
  footer {
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.82), rgba(2, 6, 23, 0.92)) !important;
    border-top-color: rgba(255,255,255,0.10) !important;
  }

  footer > div {
    gap: 1.25rem !important;
    text-align: center;
  }

  footer .flex.items-center.gap-4 {
    justify-content: center !important;
    flex-wrap: wrap;
  }

  footer img {
    opacity: 0.92;
  }

  /* Popup: fit mobile width */
  .argus-beta-popup {
    left: 14px !important;
    right: 14px !important;
    bottom: 14px !important;
    width: auto !important;
    padding: 1.1rem !important;
  }
}

@media (max-width: 420px) {
  body {
    padding-top: 108px;
  }

  header img[alt="RG Herd"] {
    height: 1.75rem !important;
    max-width: 148px !important;
  }

  header nav.md\:hidden > div {
    font-size: 0.82rem !important;
  }

  .hero-glow h1 {
    font-size: clamp(1.95rem, 14vw, 2.85rem) !important;
  }

  section[id],
  section.mx-auto {
    padding-top: 2.75rem !important;
    padding-bottom: 2.75rem !important;
  }

  .argus-beta-popup {
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
  }
}


/* main-mobile-project-card-header-fix-v1: fix project-card mobile bleed caused by nowrap header rows */
@media (max-width: 760px) {
  #projects .mt-12.grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  #projects a.group {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 1.15rem !important;
  }

  /* The card header row has logo cell + nowrap label. Stack it on mobile. */
  #projects a.group .mb-6.flex.h-14 {
    height: auto !important;
    min-height: 0 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    margin-bottom: 1rem !important;
  }

  #projects a.group .mb-6.flex.h-14 > div:first-child {
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
    justify-content: flex-start !important;
  }

  #projects a.group .mb-6.flex.h-14 > div:last-child {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.25 !important;
  }

  #projects a.group img {
    width: auto !important;
    height: auto !important;
    max-width: min(100%, 152px) !important;
    object-fit: contain !important;
  }

  #projects a.group img[alt="RG Herd ALERTS logo"] {
    max-width: min(100%, 176px) !important;
  }

  #projects a.group img[alt="RGTV logo"] {
    max-width: 72px !important;
    max-height: 4rem !important;
  }

  #projects a.group p,
  #projects a.group div {
    max-width: 100% !important;
  }
}

@media (max-width: 420px) {
  #projects a.group {
    padding: 1rem !important;
  }

  #projects a.group img {
    max-width: min(100%, 138px) !important;
  }

  #projects a.group img[alt="RG Herd ALERTS logo"] {
    max-width: min(100%, 158px) !important;
  }

  #projects a.group img[alt="RGTV logo"] {
    max-width: 64px !important;
  }
}
/* end main-mobile-project-card-header-fix-v1 */


/* main-mobile-hide-latest-alert-tags-v1: hide latest-alert category/tag pills on mobile */
@media (max-width: 760px) {
  /*
    The latest alert card is injected into #latestAlertMount.
    Hide the small category/tag row that appears between the alert image and title.
  */
  #latest-alert #latestAlertMount .flex.flex-wrap.gap-2,
  #latest-alert #latestAlertMount .flex.flex-wrap.gap-3,
  #latest-alert #latestAlertMount [class*="tracking-wide"][class*="uppercase"] {
    display: none !important;
  }
}
/* end main-mobile-hide-latest-alert-tags-v1 */

/* batch-4-mobile-nav-final-v1: centered, larger mobile nav */
@media (max-width: 767px) {
  header nav.md\:hidden > div {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-width: 22rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 0.75rem !important;
    overflow: visible !important;
    white-space: normal !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
  }

  header nav.md\:hidden a {
    text-align: center !important;
    justify-content: center !important;
  }
}
/* end batch-4-mobile-nav-final-v1 */

/* batch-4-mobile-nav-font-force-v2: force actual link font size */
@media (max-width: 767px) {
  header nav.md\:hidden > div,
  header nav.md\:hidden > div a,
  header nav.md\:hidden a {
    font-size: 1.08rem !important;
    line-height: 1.25 !important;
    font-weight: 650 !important;
  }

  header nav.md\:hidden {
    padding-top: 0.7rem !important;
    padding-bottom: 0.7rem !important;
  }
}
/* end batch-4-mobile-nav-font-force-v2 */