/**
 * @file
 * EVA View Styling for CAGP Event Pages
 * Matches legacy event display structure and formatting
 */

/* ========================================
   EVA View Container Styling
   ======================================== */

.view-eva.view-civicrm-event-info-eva {
  margin: 0;
  padding: 0;
  background: transparent;
}

.view-eva.view-civicrm-event-info-eva .view-content {
  margin: 0;
  padding: 0;
}

.view-eva.view-civicrm-event-info-eva .views-row {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

/* ========================================
   Field-specific Styling to Match Legacy
   ======================================== */

/* Summary field styling */
.view-eva .views-field-summary {
  margin-bottom: 15px;
}

.view-eva .views-field-summary .views-label {
  font-weight: bold;
  color: #253980;
  margin-right: 5px;
}

/* Description field - main event content */
.view-eva .views-field-description-1,
.view-eva .views-field-description__value {
  margin-bottom: 20px;
  line-height: 1.6;
}

.view-eva .views-field-description-1 .field-content,
.view-eva .views-field-description__value .field-content {
  color: #333;
}

/* Fix HTML entities in description */
.view-eva .views-field-description-1 .field-content p,
.view-eva .views-field-description__value .field-content p {
  margin: 10px 0;
  line-height: 1.6;
}

/* When field styling - create proper structure */
.view-eva .views-field-views-conditional,
.view-eva .views-field-start-date {
  margin-bottom: 20px;
}

.view-eva .views-field-views-conditional h3,
.view-eva .views-field-start-date h3 {
  color: #253980;
  font-size: 16px;
  font-weight: bold;
  margin: 15px 0 8px 0;
  font-family: 'Clear Sans', Arial, sans-serif;
}

.view-eva .views-field-views-conditional .field-content,
.view-eva .views-field-start-date .field-content {
  display: block;
}

.view-eva .views-field-views-conditional p,
.view-eva .views-field-start-date p {
  margin: 5px 0;
  color: #333;
  font-size: 14px;
  line-height: 1.4;
}

/* Generate When section with proper styling */
.view-eva .views-field-start-date .field-content::before {
  content: "When";
  display: block;
  color: #253980;
  font-size: 16px;
  font-weight: bold;
  margin: 15px 0 8px 0;
  font-family: 'Clear Sans', Arial, sans-serif;
}

/* Where field styling - event location */
.view-eva .views-field-description {
  margin-bottom: 20px;
}

.view-eva .views-field-description h3 {
  color: #253980;
  font-size: 16px;
  font-weight: bold;
  margin: 15px 0 8px 0;
  font-family: 'Clear Sans', Arial, sans-serif;
}

.view-eva .views-field-description .field-content {
  line-height: 1.4;
}

.view-eva .views-field-description p {
  margin: 5px 0;
  color: #333;
  font-size: 14px;
}

/* Create Contact section within description field */
.view-eva .views-field-description .field-content h3 + p + h3 {
  margin-top: 20px;
}

/* Registration button styling */
.view-eva .views-field-is-online-registration {
  margin-top: 25px;
  margin-bottom: 0;
}

.view-eva .views-field-is-online-registration .field-content {
  display: block;
}

.view-eva .views-field-is-online-registration .button,
.view-eva .views-field-is-online-registration a {
  display: inline-block;
  background: #2786c2;
  color: white !important;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Clear Sans', Arial, sans-serif;
}

.view-eva .views-field-is-online-registration .button:hover,
.view-eva .views-field-is-online-registration a:hover {
  background: #1e6fa8;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(39, 134, 194, 0.3);
}


/* ========================================
   Fix for Raw Data Display
   ======================================== */

/* Hide debug/raw fields that shouldn't be shown */
.view-eva .views-field-id,
.view-eva .views-field-end-date,
.view-eva .views-field-event-full-text__value,
.view-eva .views-field-start-date-1,
.view-eva .views-field-title,
.view-eva .views-field-event-type-id {
  display: none !important;
}

/* Hide field_civicrm_event_ref field from node display */
.field--name-field-civicrm-event-ref,
.node--type-roundtable-event .field--name-field-civicrm-event-ref,
.field-civicrm-event-ref,
.field--field-civicrm-event-ref,
div:has(> div:contains("field_civicrm_event_ref")),
.node .field--name-field-civicrm-event-ref,
.node__content .field--name-field-civicrm-event-ref {
  display: none !important;
}

/* Hide any div that contains field_civicrm_event_ref text */
div:contains("field_civicrm_event_ref") {
  display: none !important;
}

/* Hide the specific field group tabs section that shows the field reference */
.required-fields.field-group-tabs.field-group-htabs-wrapper.group-events + div {
  display: none !important;
}

/* Hide the div that comes after the field group tabs wrapper */
.field-group-htabs-wrapper + div,
.group-events + div {
  display: none !important;
}

/* Fix labels that are showing when they shouldn't */
.view-eva .views-label-start-date,
.view-eva .views-label-end-date,
.view-eva .views-label-id,
.view-eva .views-label-event-full-text__value,
.view-eva .views-label-start-date-1,
.view-eva .views-label-title,
.view-eva .views-label-event-type-id,
.view-eva .views-label-is-online-registration,
.view-eva .views-label-summary {
  display: none !important;
}

/* Field ordering to match legacy structure */
.view-eva .views-field-description-1,
.view-eva .views-field-description__value {
  order: 1;
}

.view-eva .views-field-start-date,
.view-eva .views-field-views-conditional {
  order: 2;
}

.view-eva .views-field-description {
  order: 3;
}

.view-eva .views-field-is-online-registration {
  order: 4;
}

.view-eva .views-row {
  display: flex;
  flex-direction: column;
}

/* ========================================
   Create Horizontal Tabs Structure Matching Legacy
   ======================================== */

/* Main tab container to match legacy horizontal-tabs structure */
.view-eva.view-civicrm-event-info-eva {
  margin: 20px 0;
  background: transparent;
}

/* Create horizontal tabs list structure */
.view-eva.view-civicrm-event-info-eva::before {
  content: "";
  display: block;
  height: 0;
}

.view-eva.view-civicrm-event-info-eva .view-content {
  position: relative;
}

/* Create fake horizontal tab structure matching legacy */
.view-eva.view-civicrm-event-info-eva .view-content::before {
  content: "";
  display: block;
  border-bottom: 1px solid #d3d7d9;
  margin-bottom: 0;
  position: relative;
  z-index: 1;
}

/* Create the tab button */
.view-eva.view-civicrm-event-info-eva .view-content::after {
  content: "Event Info";
  position: absolute;
  top: -30px;
  left: 0;
  background: #ffffff;
  border: 1px solid #d3d7d9;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  padding: 8px 15px;
  font-weight: bold;
  color: #253980;
  font-size: 13px;
  font-family: 'Clear Sans', Arial, sans-serif;
  z-index: 2;
}

/* Main content area with tab styling */
.view-eva.view-civicrm-event-info-eva .views-row {
  background: #ffffff;
  border: 1px solid #d3d7d9;
  border-top: none;
  padding: 25px;
  margin-top: 30px;
  position: relative;
  z-index: 0;
}

/* ========================================
   Image and Media Styling
   ======================================== */

.view-eva .field-content img {
  max-width: 100%;
  height: auto;
  margin: 10px 0;
  border-radius: 4px;
}

.view-eva .field-content p img {
  display: block;
  margin: 15px 0;
}

/* ========================================
   Typography and Text Formatting
   ======================================== */

.view-eva .field-content {
  font-family: 'Clear Sans', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
}

.view-eva .field-content a {
  color: #2786c2;
  text-decoration: none;
  transition: color 0.3s ease;
}

.view-eva .field-content a:hover {
  color: #1e6fa8;
  text-decoration: underline;
}

/* ========================================
   List and Bullet Point Styling
   ======================================== */

.view-eva .field-content ul {
  margin: 10px 0;
  padding-left: 20px;
}

.view-eva .field-content li {
  margin: 5px 0;
  line-height: 1.6;
}

/* ========================================
   Email and Contact Link Styling
   ======================================== */

.view-eva .field-content a[href^="mailto:"] {
  color: #2786c2;
  font-weight: normal;
  text-decoration: none;
}

.view-eva .field-content a[href^="mailto:"]:hover {
  color: #1e6fa8;
  text-decoration: underline;
}

/* ========================================
   Responsive Design
   ======================================== */

@media (max-width: 768px) {
  .view-eva.view-civicrm-event-info-eva .view-content {
    padding: 15px;
  }

  .view-eva .views-field-is-online-registration .button {
    display: block;
    text-align: center;
    width: 100%;
    margin-top: 15px;
  }

  .view-eva .field-content img {
    max-width: 100%;
    width: auto !important;
    height: auto !important;
  }
}