/* =========================================================
   RELAY STRATA — MOBILE APPLICATION NAVIGATION
   Mobile-only. Desktop/tablet above 760px is untouched.
   ========================================================= */

@media (max-width: 760px) {

  /* Keep the application inside the viewport without altering
     any desktop sizing or composition. */
  .relay-main,
  .page,
  .risk-record-navigation,
  #riskRecordContent {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* PRIMARY NAVIGATION — top-level sections only. */
  .risk-record-navigation {
    width: 100% !important;
    overflow: hidden !important;
  }

  .risk-tabs {
    display: flex !important;
    align-items: flex-end !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 0 11px !important;
    margin: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-bottom: 1px solid #E5E7EB !important;
  }

  .risk-tabs::-webkit-scrollbar,
  .risk-record-subtabs::-webkit-scrollbar {
    display: none;
  }

  .risk-tabs .risk-tab {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    white-space: nowrap !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
  }

  /* SECONDARY NAVIGATION — selected section only. Distinct
     from the primary row so Renewal cannot read as a Property
     sub-section. */
  .risk-record-subtabs {
    display: flex !important;
    align-items: center !important;
    gap: 22px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 48px !important;
    margin: 10px 0 0 !important;
    padding: 10px 0 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-bottom: 1px solid #F0F1F3 !important;
  }

  .risk-record-subtabs .risk-record-subtab {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    margin: 0 !important;
    white-space: nowrap !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  /* Make the two levels feel deliberately separate. */
  .risk-tabs .risk-tab.is-active {
    color: #111111 !important;
  }

  .risk-record-subtabs .risk-record-subtab:not(.active) {
    color: #8A94A6 !important;
  }

  /* HARD MOBILE OWNERSHIP RULE
     The guided renewal panel is inserted immediately after the
     navigation by renewal-journey-ux.js. If ANY non-Renewal
     top-level tab is visibly active, suppress that adjacent panel.
     This keys off the rendered navigation (not application state),
     so asynchronous hydration cannot re-introduce it on Property. */
  .risk-record-navigation:has(
    .risk-tabs .risk-tab.is-active[data-risk-tab="property"],
    .risk-tabs .risk-tab.is-active[data-risk-tab="insurance"],
    .risk-tabs .risk-tab.is-active[data-risk-tab="recommendations"],
    .risk-tabs .risk-tab.is-active[data-risk-tab="declarations"],
    .risk-tabs .risk-tab.is-active[data-risk-tab="participants"],
    .risk-tabs .risk-tab.is-active[data-risk-tab="documents"]
  ) + .relay-guided-renewal {
    display: none !important;
  }

  /* Fallback for any future top-level section: if Renewal is not
     visibly active, keep the journey hidden. */
  body:not(:has(.risk-tabs .risk-tab.is-active[data-risk-tab="renewal"]))
  .relay-guided-renewal {
    display: none !important;
  }

}

/* =========================================================
   FINAL FOOTER LOGO TREATMENT
   Keep the agreed home-page footer layout; only standardise
   the Relay Strata brand treatment across the application.
   ========================================================= */

.relay-footer .relay-footer-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 11px !important;
  color: #FFFFFF !important;
}

.relay-footer .relay-footer-mark {
  color: #A7DCC1 !important;
  font-size: 21px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  letter-spacing: -0.13em !important;
  padding-right: 0.13em !important;
}

.relay-footer .relay-footer-wordmark {
  color: #FFFFFF !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
}

.relay-footer .relay-footer-wordmark span {
  color: #F28A30 !important;
}