/* Ensure this component uses a block flow (not flex/float) */
.ntpud-tabs {
  display: block;
  width: 100%;
}

/* Tablist sits on top */
.ntpud-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  padding-bottom: 0.25rem;
}

/* Wrapper ensures all panels sit below the tablist */
.ntpud-panels {
  display: block;
  width: 100%;
}

/* Defensive clear in case parent rows/columns use floats */
.ntpud-tabs::after {
  content: "";
  display: block;
  clear: both;
}

/* Tabs */
.ntpud-tab[role="tab"] {
  appearance: none;
  border: 0;
  background: #F4F3EF;
  padding: 0.5rem 0.75rem;
  font: inherit;
  cursor: pointer;
  border-radius: 0rem;
  line-height: 1.25;
  border-top:1px solid #000;
  border-left:1px solid #000;  
  border-right: 1px solid #000;
  border-bottom: 0px;
}

.ntpud-tab[role="tab"][aria-selected="true"] {
  background: #fff;
}

/* Focus visibility for WCAG AA */
.ntpud-tab[role="tab"]:focus,
.ntpud-tab[role="tab"]:focus-visible {
  outline: 2px solid #BBBBBB;
  outline-offset: 2px;
}

/* Panels */
.ntpud-tabpanel[role="tabpanel"] {
  margin-top:-1px;
  border-radius: 0px 10px 10px 10px;
}
.ntpud-tabpanel[hidden] {
  display: none !important;
}

/* --- FORCE VERTICAL STACK: tablist on top, panels below --- */
.fusion-builder-row .ntpud-tabs,
.fusion-flex-container .ntpud-tabs,
.ntpud-tabs {
  display: block !important;      /* kill any flex/grid on the component */
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  clear: both !important;
  margin-bottom: -20px!important;
  padding-left:30px;
  padding-right:30px;
}

.ntpud-tabs > .ntpud-tablist,
.ntpud-tabs > .ntpud-panels {
  display: block !important;      /* ensure each is a full-width block */
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;      /* defeats flex row layouts */
  order: initial !important;      /* ignore any flex orders */
}


/* Defensive: if some Avada wrappers get inserted inside .ntpud-panels */
.ntpud-tabs .ntpud-panels > * {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}

/* --- VISUAL STYLE similar to the Minneapolis Parks tabs --- */
.ntpud-tablist {
  margin: 0px;
  padding: 0;
  border-bottom: 0px solid rgba(0,0,0,0.15);
  display: flex;
  flex-wrap: wrap;
  gap: 0;                         /* links sit flush like a nav */
}

.ntpud-tab[role="tab"] {
  appearance: none;
  background: #F4F3EF;
  border-left: 1px solid #BBBBBB;
  border-top: 1px solid #BBBBBB;
  border-bottom: 0px solid #BBBBBB;
  border-right: 0px solid #BBBBBB;
  margin: 0;
  padding: 0.75rem 1rem;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.2;
}

.ntpud-tab[role="tab"]:hover {
  text-decoration: underline;
}

/* First button in the tablist */
.ntpud-tablist button:first-of-type {
	border-radius: 10px 0px 0px 0px;
}

/* Last button in the tablist */
.ntpud-tablist button:last-of-type {
 border-right:1px solid #BBBBBB!important;
 border-radius:  0px 10px 0px 0px ;
}


.ntpud-tab[role="tab"][aria-selected="true"] {
  font-weight: 700;                          /* bold active */
  border-bottom-color:#fff;         /* visible active bar */
  text-decoration: none;
  background: #fff;
}

/* Focus ring (WCAG AA) */
.ntpud-tab[role="tab"]:focus,
.ntpud-tab[role="tab"]:focus-visible {
  outline: 2px solid #BBBBBB;
  outline-offset: 2px;
}

/* Panels */
.ntpud-tabpanel[role="tabpanel"] {
  margin-top: -2px;
  margin-bottom: 50px;
  border-top: 1px solid #BBBBBB;
   border-left: 1px solid #BBBBBB;
   border-right: 1px solid #BBBBBB;
   border-bottom: 1px solid #BBBBBB;
   padding:50px;
}
.ntpud-tabpanel[hidden] {
  display: none !important;
}

/* --- Table colors for tab sections  --- */

.ntpud-tabpanel table thead {
background-color:#F4F3EF!important;
border-color:#F4F3EF!important;
}

.ntpud-tabpanel table th {
    color:#000!important;
}

.ntpud-tabpanel .fusion-content-boxes {
    margin-bottom:0px!important;
}

.ntpud-tabpanel .fusion-content-boxes .fusion-column {
    margin-bottom:20px!important;
}

.ntpud-tabpanel p.content-box-heading {
    font-weight:bold!important;
}


/* --- SMALL SCREENS: stack tabs with divider lines --- */
@media (max-width: 640px) {
  .ntpud-tablist {
    border-bottom: 0;
    display: block !important;
  }
  .ntpud-tab[role="tab"] {
    display: block;
    width: 100%;
    text-align: left;
    border-bottom: 1px solid rgba(0,0,0,0.1);
  }
  .ntpud-tab[role="tab"][aria-selected="true"] {
    border-bottom-width: 3px;
  }
}