/* Clean CSS for AspirePortfolio Plugin */

/* ========================================
   LOADING STATE - Prevent Content Flash
   ======================================== */

/* CRITICAL: Hide portfolio page content by default on initial load */
/* This prevents flash of wrong user type content during page reload */
.page-template-page-portfolio #av_header_section,
.page-template-page-portfolio .intro-text-container,
.page-template-page-portfolio .aspire-portfolio-container,
.page-template-page-portfolio .theraputic_container {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: none !important; /* No transition on initial hide */
}


/* Show content with smooth fade-in once marked as ready */
body.content-ready #av_header_section,
body.content-ready .intro-text-container,
body.content-ready .aspire-portfolio-container,
body.content-ready .theraputic_container {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.4s ease !important;
}

/* Also support the loading-user-content class for explicit hiding */
body.loading-user-content,
html.loading-user-content-html body {
    overflow: hidden;
}

body.loading-user-content #av_header_section,
body.loading-user-content .intro-text-container,
body.loading-user-content .aspire-portfolio-container,
body.loading-user-content .theraputic_container {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: none !important;
}


.content {padding-top:10px !important;padding-bottom:10px !important;}
/* Main Container */
.aspire-portfolio-container {
  display: block !important;
  width: 100% !important;
  clear: both;
  box-sizing: border-box;
  overflow: visible !important;
}

/* adverse-effects-box */
.adverse-effects-box-hcp {
border:solid 1px #000000 !important;
border-radius: 8px;
max-width:80%;	
padding: 10px 20px;	
text-align:center;
margin: 15px 0 15px 0;
}

.adverse-effects-box-patient {
border:solid 1px #000000!important;
border-radius: 8px;
max-width:80%;	
padding: 10px 20px;	
text-align:center;
margin: 15px 0 15px 0;
}

.adverse-effects-box-public {
border:solid 1px #000000 !important;
border-radius: 8px;
max-width:80%;	
padding: 10px 20px;	
text-align:center;
margin: 15px 0 15px 0;
}



/* Search Container */
#aspire-search-container {
  margin-bottom: 20px;
  background-color: #f3f1ff;
  padding: 20px;
  border-radius: 12px;
  text-align: center;
}

#aspire-search-container h3 {
  margin: 0 0 15px 0;
  color: #2c3e50;
  font-size: 18px;
  font-weight: 600;
}

#aspire-search-container .search-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 500px;
}

#aspire-search-input {
  width: 100% !important;
  padding: 12px 40px 12px 16px;
  font-size: 16px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  box-sizing: border-box;
  transition: all 0.3s ease;
  background-color: #ffffff !important;
  color: #333333 !important;
}

#aspire-search-container .search-icon {
  position: absolute;
  right: 14px;
  top: 8px;
  color: #1a1633;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}

#aspire-search-container .search-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

#aspire-search-input:focus {
  outline: none;
  border-color: #007cba;
  box-shadow: 0 0 0 3px rgba(0, 124, 186, 0.1);
  background-color: #ffffff !important;
  color: #333333 !important;
}

#aspire-search-input::placeholder {
  color: #9ca3af;
  opacity: 1;
}

#aspire-search-results {
  margin-top: 10px;
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

/* Filter Section Container */
.aspire-filter-section {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
  flex-wrap: nowrap;
}

/* Company Filter */
#aspire-company-filter-container {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 140px;
}

.company-filter-button {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background-color: #f3f1ff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: inherit;
  position: relative;
}

.company-filter-button:hover {
  background-color: #e8e4ff;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.company-filter-button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(34, 30, 70, 0.2);
}

.company-filter-icon {
  width: 32px;
  height: 32px;
  background-color: #221e46;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.company-icon-text {
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.company-icon-img {
  width: 100%;
  height: 100%;
  max-width: 24px;
  max-height: 24px;
  object-fit: contain;
  display: block;
}

.company-filter-icon:has(img) {
  background-color: transparent !important;
  border-radius: 0;
}

.company-filter-text {
  color: #221e46;
  font-size: 16px;
  font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.company-dropdown {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  background-color: #ffffff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  z-index: 1000 !important;
  min-width: 180px !important;
  display: none !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

.company-dropdown.show {
  display: block !important;
}

.dropdown-option {
  padding: 12px 16px !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
  color: #333333 !important;
  font-size: 14px !important;
  border-bottom: 1px solid #f0f0f0 !important;
  display: block !important;
  text-decoration: none !important;
  margin: 0 !important;
}

.dropdown-option:last-child {
  border-bottom: none !important;
}

.dropdown-option:hover {
  background-color: #f3f1ff !important;
}

.dropdown-option.selected {
  background-color: #221e46 !important;
  color: #ffffff !important;
}

.dropdown-option-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 
 * Roundels for dropdown options
 * To replace with SVG images in the future:
 * 1. Change .dropdown-roundel-a and .dropdown-roundel-m to use background-image instead of background-color
 * 2. Remove the text content from the HTML and use CSS background-size: contain
 * 3. Example: background-image: url('path/to/aspire-logo.svg');
 */
.dropdown-roundel {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
  flex-shrink: 0;
}

.dropdown-roundel-a {
  background-color: #221e46;
  /* Future SVG: background-image: url('img/logos/aspire-roundel.svg'); background-size: contain; */
}

.dropdown-roundel-a:has(img),
.dropdown-roundel-a img {
  background-color: transparent;
}

.dropdown-roundel-m {
  background-color: #6c757d;
  /* Future SVG: background-image: url('img/logos/morningside-roundel.svg'); background-size: contain; */
}

.dropdown-roundel-img {
  width: 100%;
  height: 100%;
  max-width: 25px;
  max-height: 22px;
  object-fit: contain;
  display: block;
}

.dropdown-roundel:has(img) {
  background-color: transparent !important;
  border-radius: 0;
}

.dropdown-text {
  flex: 1;
}

/* Alphabet Navigation */
#Aspireportfolio-alphabet-nav {
  display: block !important;
  flex: 1;
  margin-bottom: 0;
  text-align: center;
  white-space: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 5px;
  box-sizing: border-box;
  max-width: none !important;
  min-width: 0;
}

#Aspireportfolio-alphabet-nav a {
  display: inline-block !important;
  padding: 6px 8px;
  margin: 1px 2px;
  text-decoration: none;
  color: #333;
  background-color: #f3f1ff;
  border: 1px solid #ccc;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 25px;
  text-align: center;
  white-space: nowrap;
  flex-shrink: 0;
}

#Aspireportfolio-alphabet-nav a:hover {
  background-color: #221e46;
  color: #fff;
  border-color: #221e46;
}

#Aspireportfolio-alphabet-nav a.active {
  background-color: #221e46;
  color: #fff;
  border-color: #221e46;
}

#Aspireportfolio-alphabet-nav a.disabled {
  color: #999;
  background-color: #e5e5e5;
  cursor: not-allowed;
  border-color: #ccc;
}

#Aspireportfolio-alphabet-nav a.disabled:hover {
  background-color: #e5e5e5;
  color: #999;
  border-color: #ccc;
}

/* Table Container */
#Aspireportolio-table-holder {
  display: block !important;
  width: 100% !important;
  clear: both !important;
  overflow-x: auto;
  overflow-y: visible;
  margin: 20px 0;
  border: 1px solid #dee2e6;
  border-radius: 5px;
  box-sizing: border-box;
  position: relative;
  max-height: none;
}

#Aspireportolio-table-holder div.mobile-show {
  display: none;
  padding: 10px;
  background-color: #e9ecef;
  text-align: center;
  font-weight: bold;
  border-bottom: 1px solid #dee2e6;
}

/* Main Table */
#Aspireportfolio-table {
  display: table !important;
  width: 100% !important;
  border-collapse: collapse;
  background-color: #fff;
  margin: 0;
  clear: both;
  position: relative;
}

/* Table Header */
#Aspireportfolio-table thead th {
  background-color: #221e46;
  color: #ffffff;
  padding: 12px 8px;
  text-align: left;
  font-weight: normal;
  text-transform: none;
  line-height: 1.2em;
  border-bottom: 2px solid #dee2e6;
  border-left: none;
  border-right: none;
  position: static; /* Remove sticky - JavaScript clone handles this */
  z-index: 1;
}

/* Ensure sticky works in table */
#Aspireportfolio-table thead {
  position: static; /* Remove sticky - JavaScript clone handles this */
  z-index: 1;
  background-color: #221e46;
}

/* Additional sticky enforcement for theme compatibility */
.main_color #Aspireportfolio-table thead,
.template-page #Aspireportfolio-table thead,
.entry-content #Aspireportfolio-table thead {
  position: static !important; /* Remove sticky - JavaScript clone handles this */
  z-index: 1 !important;
}

/* Column Widths */
#Aspireportfolio-table .title {
  width: 35%;
}

#Aspireportfolio-table .therapy-area {
  width: 15%;
  text-align: center;
  display: none !important;
}

#Aspireportfolio-table .manufacturer {
  width: 10%;
  text-align: center;
}

#Aspireportfolio-table .SMPC {
  width: 8%;
  text-align: center;
}

#Aspireportfolio-table .PIL {
  width: 8%;
  text-align: center;
}

#Aspireportfolio-table .RMM {
  width: 8%;
  text-align: center;
}

#Aspireportfolio-table .ingredients {
  width: 16%;
}

/* Table Rows */
#Aspireportfolio-table tbody tr {
  background-color: #ffffff;
  border-bottom: 1px solid #dee2e6;
  color: #333333;
}

/* Alternate row colors */
#Aspireportfolio-table tbody tr:nth-child(odd) {
  background-color: #ffffff;
  color: #333333;
}

#Aspireportfolio-table tbody tr:nth-child(even) {
  background-color: #f4f4f6;
  color: #333333;
}

#Aspireportfolio-table tbody tr:hover {
  opacity: 0.8;
}

/* Group Headers */
#Aspireportfolio-table tbody tr[data-group-start] {
  background-color: #d4d2da;
  color: #333;
  font-weight: bold;
}

#Aspireportfolio-table tbody tr[data-group-start]:hover {
  background-color: #c4c2ca;
}

/* Table Cells */
#Aspireportfolio-table tbody td {
  padding: 10px 8px;
  vertical-align: top;
  border-bottom: 1px solid #dee2e6;
  border-left: none;
  border-right: none;
  color: #333333;
}

/* Links in Table */
#Aspireportfolio-table tbody td a {
  display: inline-block;
  padding: 2px 10px;
  background-color: #221e46;
  color: #fff;
  text-decoration: none;
  border-radius: 10px;
  font-size: 12px;
  text-align: center;
  transition: background-color 0.3s ease;
}

#Aspireportfolio-table tbody td a:hover {
  background-color: #1a1633;
}

/* Manufacturer Logos */
#Aspireportfolio-table .manufacturer-logo {
  width: 30px;
  height: 30px;
  object-fit: contain;
  vertical-align: middle;
}

/* JavaScript Sticky Header Clone */
#sticky-header-wrapper {
  overflow-x: auto !important;
  overflow-y: visible !important; /* Allow vertical expansion for multi-line headers */
  max-height: none !important;
}

#sticky-header-clone {
  border-collapse: collapse;
  height: auto !important;
  min-height: auto !important;
}

#sticky-header-clone thead th {
  background-color: #221e46 !important;
  color: #ffffff !important;
  padding: 12px 8px;
  font-weight: normal;
  text-transform: none;
  line-height: 1.4em;
  border-bottom: 2px solid #dee2e6;
  border-left: none;
  border-right: none;
  overflow: visible;
  white-space: normal;
  word-wrap: break-word;
  vertical-align: top;
}

/* Match column alignment from original table */
#sticky-header-clone thead th.manufacturer,
#sticky-header-clone thead th.SMPC,
#sticky-header-clone thead th.PIL,
#sticky-header-clone thead th.RMM {
  text-align: center !important;
}

#sticky-header-clone thead th.title,
#sticky-header-clone thead th.ingredients {
  text-align: left !important;
}

/* Ensure Therapy Area column is completely hidden in sticky clone */
#sticky-header-clone .therapy-area {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

/* Prevent any text duplication or overlap */
/* Allow line breaks in header text */
#sticky-header-clone thead th br {
  display: block;
  content: "";
  margin: 0;
}

#sticky-header-clone thead th .therapy-area,
#sticky-header-clone thead th[style*="display: none"] {
  display: none !important;
}

/* Responsive Design */
@media only screen and (max-width: 768px) {
  .aspire-filter-section {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  
  #aspire-company-filter-container {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  
  .company-filter-button {
    width: 100%;
    max-width: 200px;
    justify-content: center;
  }
  
  #Aspireportfolio-alphabet-nav {
    width: 100% !important;
  }
  
  #Aspireportfolio-alphabet-nav a {
    padding: 6px 8px;
    margin: 1px;
    min-width: 25px;
    font-size: 14px;
  }
  
  #Aspireportolio-table-holder div.mobile-show {
    display: block !important;
    position: relative !important; /* Default: not sticky */
    width: 100% !important;
    z-index: 80 !important; /* Below popup (99999), above sticky header */
    background-color: #e9ecef !important;
    padding: 12px 10px !important;
    margin: 0 0 0 0 !important;
    border-bottom: 1px solid #c2c2c2;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
  }
  
  /* Make scroll label fixed to top when table is in viewport */
  /* Use fixed instead of sticky so it stays visible even when table holder scrolls out of view */
  #Aspireportolio-table-holder.table-in-view div.mobile-show {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    /* Safari-specific fixes for fixed positioning */
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
  }
  
  /* Table holder positioning */
  #Aspireportolio-table-holder {
    position: relative; /* Needed for absolute positioning of gradient */
  }
  
  /* Add right-edge gradient to indicate horizontal scroll - fixed to viewport right edge */
  #Aspireportolio-table-holder::after {
    content: '';
    position: fixed; /* Fixed to viewport right edge */
    top: 50px; /* Below scroll label */
    right: 0;
    width: 10px;
    bottom: 0; /* Extend to bottom of viewport */
    background: linear-gradient(to left, #ffffff, transparent);
    pointer-events: none; /* Allow clicks through gradient */
    z-index: 79; /* Above table (1), below scroll label (80), above sticky header (varies) */
    opacity: 1;
    transition: opacity 0.2s ease; /* Smooth fade transition */
  }
  
  /* Hide gradient while actively scrolling horizontally */
  #Aspireportolio-table-holder.is-scrolling::after {
    opacity: 0;
  }
  
  /* Hide gradient when table holder is not in viewport (scrolled past) */
  #Aspireportolio-table-holder:not(.in-viewport)::after {
    opacity: 0;
  }
  
  /* Sticky header positioning on mobile - below the scroll label */
  /* Scroll label height is approximately 50px (12px padding top + 12px padding bottom + ~26px content) */
  #Aspireportfolio-table thead th,
  #Aspireportfolio-table thead {
    top: 50px !important; /* Below scroll label */
  }
  
  .main_color #Aspireportfolio-table thead,
  .template-page #Aspireportfolio-table thead,
  .entry-content #Aspireportfolio-table thead {
    top: 50px !important; /* Below scroll label */
  }
  
  /* Update sticky header clone position for mobile - below scroll label */
  #sticky-header-wrapper {
    top: 50px !important; /* Below scroll label */
  }
  
  #Aspireportfolio-table {
    font-size: 14px;
  }
  
  #Aspireportfolio-table thead th,
  #Aspireportfolio-table tbody td {
    padding: 8px 4px;
  }
  
  
  /* Prevent word breaking on mobile - keep words intact */
  #Aspireportfolio-table thead th,
  #sticky-header-clone thead th {
    word-break: keep-all !important;
    word-wrap: normal !important;
    hyphens: none !important;
    white-space: normal !important; /* Allow line breaks between words only */
  }
}

@media only screen and (max-width: 480px) {
  #Aspireportfolio-alphabet-nav a {
    padding: 4px 6px;
    margin: 1px;
    min-width: 20px;
    font-size: 12px;
  }
}

/* ========================================
   Header Image Section Styles
   ======================================== */

/* Base section styles */
.avia-section {
  clear: both;
  width: 100%;
  float: left;
  min-height: 100px;
  position: static;
}

.avia-full-stretch {
  background-size: cover !important;
}

/* User-specific header images */
/* Note: Images are loaded via inline styles in the shortcode for dynamic user type detection */
/* These CSS rules are kept as fallback */
.avia-section.av-portfolio-hcp {
  background-repeat: no-repeat;
  background-image: url('../images/hcp-header-image.webp');
  background-position: 50% 0%;
  background-attachment: scroll;
  position: relative;
}

.avia-section.av-portfolio-patient {
  background-repeat: no-repeat;
  background-image: url('../images/patient-header-image.webp');
  background-position: 50% 0%;
  background-attachment: scroll;
  position: relative;
}

.avia-section.av-portfolio-public {
  background-repeat: no-repeat;
  background-image: url('../images/public-header-image.webp');
  background-position: 50% 0%;
  background-attachment: scroll;
  position: relative;
}

/* ========================================
   HEADER SECTION: JavaScript will move this to body
   ======================================== */

/* Basic styling for the header section - will be moved by JavaScript */
#av_header_section {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}

/* Section minimum height */
.av-minimum-height.av-minimum-height-45vw.av-height-percent_width {
  min-height: 45vw;
}

/* SVG Divider Styles */
.avia-divider-svg {
  position: absolute;
  width: 100%;
  height: auto;
  z-index: 1;
  pointer-events: none;
}

.avia-divider-svg-bottom {
  bottom: 0;
  left: 0;
}

.avia-flipped-svg svg {
  transform: scaleY(-1);
}

.avia-divider-svg svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Container styles */
.container.av-section-cont-open {
  position: relative;
  z-index: 2;
}

/* Responsive adjustments for header */
@media only screen and (max-width: 768px) {
  .av-minimum-height.av-minimum-height-45vw.av-height-percent_width {
    min-height: 60vw;
  }
}

@media only screen and (max-width: 480px) {
  .av-minimum-height.av-minimum-height-45vw.av-height-percent_width {
    min-height: 80vw;
  }
}

/* ========================================
   Intro Text Section Styles
   ======================================== */

.intro-text-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  text-align: left;
}

.intro-text-container h1 {
  font-size: 42px;
  font-weight: bold;
  margin-bottom: 20px;
  line-height: 1.2;
}

.intro-text-container h3 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #333;
}

.intro-text-container p {
  font-size: 16px;
  line-height: 1.6;
  color: #666;
  max-width: 900px;
  margin: 0;
  text-align: left;
}

/* Responsive adjustments for intro text */
@media only screen and (max-width: 768px) {
  .intro-text-container {
    padding: 30px 15px;
  }
  
  .intro-text-container h1 {
    font-size: 32px;
  }
  
  .intro-text-container h3 {
    font-size: 20px;
  }
  
  .intro-text-container p {
    font-size: 15px;
  }
}

@media only screen and (max-width: 480px) {
  .intro-text-container {
    padding: 20px 10px;
  }
  
  .intro-text-container h1 {
    font-size: 28px;
  }
  
  .intro-text-container h3 {
    font-size: 18px;
  }
  
  .intro-text-container p {
    font-size: 14px;
  }
}