/**
 * CFS Cataract Page - Custom CSS overrides
 * Tab+panel connected shapes on mobile for cataract-specific sections.
 */

/* Cataract — tab+panel connected gray shape on mobile */
/* Off-by-one: this query was `max-width: 1024px`, which INCLUDES 1024 — the
   exact width where the tab's `lg:` classes turn the `absolute inset-0` overlay
   span navy. The mobile rule forced `color: #2b286f` on the label, so every
   inactive label was navy-on-navy and invisible. It must stop at 1023 and hand
   over to the desktop treatment (navy pill, white label), which already works.
   Widening this to 1279 makes it worse, not better — that was tried. */
@media (max-width: 1023px) {
  /* All connected tab sections: base tab style */
  [data-tabs="understanding"] .cat-tab,
  [data-tabs="riskfactors"] .cat-tab,
  [data-tabs="surgery-group1"] .cat-tab,
  [data-tabs="surgery-group2"] .cat-tab,
  [data-tabs="iol-group1"] .cat-tab,
  [data-tabs="iol-group2"] .cat-tab {
    background: transparent !important;
    color: #2b286f !important;
    border-radius: 0 !important;
    border: none !important;
    position: relative;
  }

  /* Active tab: gray bg + rounded top + underline */
  [data-tabs="understanding"] .cat-tab[aria-selected="true"],
  [data-tabs="riskfactors"] .cat-tab[aria-selected="true"],
  [data-tabs="surgery-group1"] .cat-tab[aria-selected="true"],
  [data-tabs="surgery-group2"] .cat-tab[aria-selected="true"],
  [data-tabs="iol-group1"] .cat-tab[aria-selected="true"],
  [data-tabs="iol-group2"] .cat-tab[aria-selected="true"] {
    background: #f4f4f8 !important;
    border-radius: 13px 13px 0 0 !important;
    border-bottom: none !important;
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
    text-decoration-color: #2b286f !important;
    text-decoration-thickness: 2px !important;
  }

  /* Inverse rounded corners: pseudo-elements */
  [data-tabs="understanding"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="understanding"] .cat-tab[aria-selected="true"]::after,
  [data-tabs="riskfactors"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="riskfactors"] .cat-tab[aria-selected="true"]::after,
  [data-tabs="surgery-group1"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="surgery-group1"] .cat-tab[aria-selected="true"]::after,
  [data-tabs="surgery-group2"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="surgery-group2"] .cat-tab[aria-selected="true"]::after,
  [data-tabs="iol-group1"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="iol-group1"] .cat-tab[aria-selected="true"]::after,
  [data-tabs="iol-group2"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="iol-group2"] .cat-tab[aria-selected="true"]::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 13px;
    height: 13px;
    background: transparent;
  }

  /* Left scoop */
  [data-tabs="understanding"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="riskfactors"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="surgery-group1"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="surgery-group2"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="iol-group1"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="iol-group2"] .cat-tab[aria-selected="true"]::before {
    left: -13px;
    border-bottom-right-radius: 13px;
    box-shadow: 5px 5px 0 5px #f4f4f8;
  }

  /* Right scoop */
  [data-tabs="understanding"] .cat-tab[aria-selected="true"]::after,
  [data-tabs="riskfactors"] .cat-tab[aria-selected="true"]::after,
  [data-tabs="surgery-group1"] .cat-tab[aria-selected="true"]::after,
  [data-tabs="surgery-group2"] .cat-tab[aria-selected="true"]::after,
  [data-tabs="iol-group1"] .cat-tab[aria-selected="true"]::after,
  [data-tabs="iol-group2"] .cat-tab[aria-selected="true"]::after {
    right: -13px;
    border-bottom-left-radius: 13px;
    box-shadow: -5px 5px 0 5px #f4f4f8;
  }

  /* First tab: hide left scoop */
  [data-tabs="understanding"] .cat-tab[aria-selected="true"]:first-child::before,
  [data-tabs="riskfactors"] .cat-tab[aria-selected="true"]:first-child::before,
  [data-tabs="surgery-group1"] .cat-tab[aria-selected="true"]:first-child::before,
  [data-tabs="surgery-group2"] .cat-tab[aria-selected="true"]:first-child::before,
  [data-tabs="iol-group1"] .cat-tab[aria-selected="true"]:first-child::before,
  [data-tabs="iol-group2"] .cat-tab[aria-selected="true"]:first-child::before {
    display: none;
  }

  /* Last tab: hide right scoop */
  [data-tabs="understanding"] .cat-tab[aria-selected="true"]:last-child::after,
  [data-tabs="riskfactors"] .cat-tab[aria-selected="true"]:last-child::after,
  [data-tabs="surgery-group1"] .cat-tab[aria-selected="true"]:last-child::after,
  [data-tabs="surgery-group2"] .cat-tab[aria-selected="true"]:last-child::after,
  [data-tabs="iol-group1"] .cat-tab[aria-selected="true"]:last-child::after,
  [data-tabs="iol-group2"] .cat-tab[aria-selected="true"]:last-child::after {
    display: none;
  }

  /* Risks mobile: navy bg variant */
  [data-tabs="risks-mobile"] .cat-tab {
    background: transparent !important;
    color: #2b286f !important;
    border-radius: 0 !important;
    border: none !important;
    position: relative;
  }

  /* Risks tab active: navy */
  [data-tabs="risks-mobile"] .cat-tab[data-tab="risks-tab"][aria-selected="true"] {
    background: #2b286f !important;
    color: white !important;
    border-radius: 13px 13px 0 0 !important;
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
    text-decoration-color: white !important;
    text-decoration-thickness: 2px !important;
  }

  /* Prevention tab active: gray */
  [data-tabs="risks-mobile"] .cat-tab[data-tab="prevention-tab"][aria-selected="true"] {
    background: #f4f4f8 !important;
    color: #2b286f !important;
    border-radius: 13px 13px 0 0 !important;
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
    text-decoration-color: #2b286f !important;
    text-decoration-thickness: 2px !important;
  }

  [data-tabs="risks-mobile"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="risks-mobile"] .cat-tab[aria-selected="true"]::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 13px;
    height: 13px;
    background: transparent;
  }

  /* Risks tab scoops: navy */
  [data-tabs="risks-mobile"] .cat-tab[data-tab="risks-tab"][aria-selected="true"]::before {
    left: -13px;
    border-bottom-right-radius: 13px;
    box-shadow: 5px 5px 0 5px #2b286f;
  }

  [data-tabs="risks-mobile"] .cat-tab[data-tab="risks-tab"][aria-selected="true"]::after {
    right: -13px;
    border-bottom-left-radius: 13px;
    box-shadow: -5px 5px 0 5px #2b286f;
  }

  /* Prevention tab scoops: gray */
  [data-tabs="risks-mobile"] .cat-tab[data-tab="prevention-tab"][aria-selected="true"]::before {
    left: -13px;
    border-bottom-right-radius: 13px;
    box-shadow: 5px 5px 0 5px #f4f4f8;
  }

  [data-tabs="risks-mobile"] .cat-tab[data-tab="prevention-tab"][aria-selected="true"]::after {
    right: -13px;
    border-bottom-left-radius: 13px;
    box-shadow: -5px 5px 0 5px #f4f4f8;
  }

  [data-tabs="risks-mobile"] .cat-tab[aria-selected="true"]:first-child::before {
    display: none;
  }

  [data-tabs="risks-mobile"] .cat-tab[aria-selected="true"]:last-child::after {
    display: none;
  }

  /* Content panel overflow visible for scoops */
  [data-tabs="understanding"] .cat-panel:not(.hidden),
  [data-tabs="riskfactors"] .cat-panel:not(.hidden),
  [data-tabs="surgery-group1"] .cat-panel:not(.hidden),
  [data-tabs="surgery-group2"] .cat-panel:not(.hidden),
  [data-tabs="iol-group1"] .cat-panel:not(.hidden),
  [data-tabs="iol-group2"] .cat-panel:not(.hidden),
  [data-tabs="risks-mobile"] .cat-panel:not(.hidden) {
    position: relative;
    overflow: visible;
  }
}


/* A tab that wraps to a second row inherits `flex-1` and stretches across the
   whole row, which renders as a full-width empty-looking bar. The tab count is
   CMS-driven, so wrapping is expected at any width — cap the grow instead. */
@media (max-width: 1439px) {
  [data-tabs] .cat-tab {
    max-width: calc((100% - 2rem) / 3);
  }
}