/**
 * TropoGo — Shared Navigation Styles
 * File: ./css/tropogo-nav.css
 * Include in ALL individual insurance pages via:
 *   <link rel="stylesheet" href="https://tropogo.com/other-insurance/css/tropogo-nav.css">
 *
 * Covers:
 *   1. Desktop header — single row logo + 5 category pills
 *   2. Mobile — fixed horizontally scrollable category strip below header
 *
 * Last updated: July 2026
 * DO NOT edit inline CSS in individual pages for nav — edit here only.
 */


/* ============================================================
   1. DESKTOP CATEGORY NAV — Single row with logo
   Visible on screens >= 992px only
   ============================================================ */

/* Make header row flex so logo + pills sit side by side */
@media screen and (min-width: 992px) {

  .header .container > .row {
    display: flex !important;
    align-items: center !important;
    min-height: 80px;
  }

  /* Logo — auto width, no longer full row */
  .logo.col-xs-12.col-sm-12.col-md-4.col-lg-4 {
    width: auto !important;
    flex-shrink: 0;
    line-height: normal !important;
    padding-right: 0;
  }

  /* Pills wrapper — takes remaining space after logo */
  .idx-catnav-inline {
    flex: 1;
    display: flex;
    align-items: center;
    padding-left: 40px;
  }

  /* Hide Get the App bar — not needed on desktop insurance pages */
  .top-item { display: none !important; }

}

/* Hide desktop pills on mobile — mobile has its own strip below */
@media screen and (max-width: 991px) {
  .idx-catnav-inline { display: none !important; }
}

/* Pills row */
.idx-catnav-pills {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 0;
}

/* Individual pill */
.idx-catnav-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 100px;
  font-family: Manrope-SemiBold, sans-serif;
  font-size: 16px;
  color: #2c2c2c;
  text-decoration: none;
  border: 1.5px solid #e0e3eb;
  background: #fff;
  transition: all 0.18s ease;
  white-space: nowrap;
  outline: none !important;
}

.idx-catnav-pill:focus {
  outline: none !important;
}

.idx-catnav-pill:hover {
  background: #276ef1;
  color: #fff !important;
  border-color: #276ef1;
  text-decoration: none;
}


/* ============================================================
   2. MOBILE CATEGORY STRIP — Fixed below header
   Visible on screens <= 991px only
   Horizontally scrollable, always visible while scrolling
   ============================================================ */

/* Hidden on desktop */
.ins-mob-catstrip {
  display: none;
}

@media screen and (max-width: 991px) {

  /* Fixed strip — stays visible as user scrolls */
  .ins-mob-catstrip {
    display: flex;
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    z-index: 3;
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding: 8px 16px;
    background: #fff;
    border-bottom: 1px solid #eee;
    scrollbar-width: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  }

  /* Hide scrollbar — keep swipe gesture */
  .ins-mob-catstrip::-webkit-scrollbar { display: none; }

  /* Individual pill */
  .ins-mob-catpill {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 6px 14px;
    border-radius: 100px;
    border: 1.5px solid #e0e3eb;
    background: #fff;
    font-family: Manrope-SemiBold, sans-serif;
    font-size: 13px;
    color: #2c2c2c;
    text-decoration: none;
    flex-shrink: 0;
  }

  .ins-mob-catpill:active {
    background: #276ef1;
    color: #fff;
    border-color: #276ef1;
  }

  /* Push page content down below fixed header (~70px) + strip (~46px) */
  .app-cont { padding-top: 116px; }

}

/* Smaller screens — header is slightly shorter */
@media screen and (max-width: 480px) {
  .ins-mob-catstrip { top: 60px; }
  .app-cont { padding-top: 106px; }
}

/* Explicitly reset on desktop — no extra padding needed */
@media screen and (min-width: 992px) {
  .app-cont { padding-top: 0 !important; }
}


/* ============================================================
   HOW TO ADD A NEW CATEGORY IN FUTURE
   ============================================================
   1. Add a new <a> pill in BOTH places in each HTML file:
      a. Inside <nav class="idx-catnav-pills"> (desktop)
      b. Inside <div class="ins-mob-catstrip"> (mobile)
   2. No CSS changes needed here — styles apply automatically
   3. Link format: href="https://tropogo.com/other-insurance/#sec-NEWID"
   ============================================================ */