/**
 * @file
 * Landing Page Layout Fixes
 *
 * Specific CSS fixes for the themag-landing-page content type
 * to address layout issues after migrating from The Mag to Bootstrap Barrio.
 */

/* =============================================================================
   THEMAG LANDING PAGE SPECIFIC STYLES
   ============================================================================= */

.node--type-themag-landing-page {
  /* Ensure proper spacing for all layout sections */
}

/* =============================================================================
   LAYOUT SECTION SPACING
   Fix vertical spacing between different layout sections
   ============================================================================= */

.node--type-themag-landing-page .layout {
  margin-bottom: 2.5rem;
  clear: both;
}

.node--type-themag-landing-page .layout:last-child {
  margin-bottom: 1rem;
}

/* =============================================================================
   CURRENT TOPIC SECTION (Two Column 75-25 Layout)
   Fix float issues with circle badge and logo image
   ============================================================================= */

/* Container for the Current Topic section - FORCE two-column layout */
.node--type-themag-landing-page .layout--twocol-section--75-25 {
  position: relative;
  margin-bottom: 3rem;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 2rem !important;
  align-items: flex-start !important;
}

/* Left column: ensure proper clearfix and spacing for floated elements */
.node--type-themag-landing-page .layout--twocol-section--75-25 > .layout__region--first {
  flex: 0 0 calc(85% - 2rem) !important;
  max-width: calc(85% - 2rem) !important;
  padding-right: 1rem;
  min-height: 200px;
}

.node--type-themag-landing-page .layout--twocol-section--75-25 > .layout__region--first::after {
  content: "";
  display: table;
  clear: both;
}

/* Right column: Full Report sidebar - make even narrower (75% of 20% = 15%) */
.node--type-themag-landing-page .layout--twocol-section--75-25 > .layout__region--second {
  flex: 0 0 15% !important;
  max-width: 15% !important;
  padding-top: 0;
  position: relative;
}

/* Fix for the rotated circle "Current Topic" badge - control size and position */
.node--type-themag-landing-page .layout--twocol-section--75-25 div[style*="border-radius:50%"] {
  /* Override inline styles to control size - reduced to 70% (95px * 0.7 = 67px) */
  width: 67px !important;
  height: 67px !important;
  padding: 11px 6px !important;
  margin-right: 12px !important;
  margin-bottom: 8px !important;
  margin-top: 0 !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  display: block !important;
  float: left !important;
  clear: none !important; /* Override the inline clear:both that pushes it down */
  box-sizing: border-box;
  shape-outside: circle(50%);
}

/* Ensure the parent div containing the circle doesn't have display:inline */
.node--type-themag-landing-page .layout--twocol-section--75-25 .block-content-basic .content {
  overflow: visible;
}

/* The content wrapper must allow floats to work */
.node--type-themag-landing-page .layout--twocol-section--75-25 .field--name-body {
  overflow: visible;
}

/* Fix for the elimination logo (animated GIF) - control size */
.node--type-themag-landing-page .layout--twocol-section--75-25 img[alt*="ELIMINATION INITIATIVE LOGO"],
.node--type-themag-landing-page .layout--twocol-section--75-25 img[aria-label*="elimination logo"] {
  /* Override inline size attributes */
  width: 120px !important;
  height: 120px !important;
  max-width: 120px !important;
  max-height: 120px !important;
  clear: none !important;
  float: right !important;
  margin-left: 20px !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 15px !important;
}

/* Fix for the h1 title - ensure it flows BESIDE the floated circle, not below */
.node--type-themag-landing-page .layout--twocol-section--75-25 .h1 {
  clear: none !important;
  overflow: visible !important;
  margin-top: 0 !important;
  margin-bottom: 15px !important;
  line-height: 1.3;
  display: block !important;
}

/* Ensure the h1 parent allows side-by-side layout */
.node--type-themag-landing-page .layout--twocol-section--75-25 .clearfix.text-formatted {
  overflow: visible !important;
  display: block !important;
}

/* Override any styles that might be adding clear:both to the h1 */
.node--type-themag-landing-page .layout--twocol-section--75-25 h1.h1[style*="margin-top"] {
  margin-top: 0 !important;
}

/* Fix for paragraph text - the first paragraph (with inline padding-top:6px) flows around circle */
.node--type-themag-landing-page .layout--twocol-section--75-25 p[style*="padding-top:6px"],
.node--type-themag-landing-page .layout--twocol-section--75-25 p[style*="padding-top: 6px"] {
  clear: left !important; /* This paragraph should go BELOW the circle */
  overflow: visible;
  padding-top: 10px !important;
  margin-bottom: 15px;
  margin-top: 10px !important;
}

/* All other paragraphs */
.node--type-themag-landing-page .layout--twocol-section--75-25 p {
  overflow: visible;
  margin-bottom: 15px;
}

/* Fix for the "Go to Current Topic" button container */
.node--type-themag-landing-page .layout--twocol-section--75-25 div:has(> .btn) {
  clear: both;
  padding-top: 10px;
}

/* Ensure content clears after floated elements */
.node--type-themag-landing-page .layout--twocol-section--75-25 .clearfix {
  clear: both;
}

/* Fix the Full Report card with negative margin-top */
.node--type-themag-landing-page .layout--twocol-section--75-25 .card[style*="margin-top:-40px"] {
  margin-top: 0 !important; /* Override inline negative margin */
  /* In Bootstrap Barrio, we don't need the negative margin trick */
}

/* Style the Full Report card in sidebar - make it more compact */
.node--type-themag-landing-page .layout--twocol-section--75-25 .card.p-2 {
  margin-top: 0 !important;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding: 0.75rem !important;
}

/* Control size of Full Report cover image */
.node--type-themag-landing-page .layout--twocol-section--75-25 .card.p-2 img.imagem,
.node--type-themag-landing-page .layout--twocol-section--75-25 .card.p-2 img[alt*="Cover"] {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
}

/* Fix Full Report card heading - make smaller */
.node--type-themag-landing-page .layout--twocol-section--75-25 .card.p-2 .h6 {
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
  text-align: center;
}

/* Make the link text smaller in Full Report card */
.node--type-themag-landing-page .layout--twocol-section--75-25 .card.p-2 p {
  font-size: 0.75rem;
  margin-bottom: 0;
}


/* =============================================================================
   EXECUTIVE SUMMARY SECTION
   Center images, titles, and buttons
   ============================================================================= */

/* Center all content in Executive Summary columns */
.node--type-themag-landing-page .layout--onecol .col-6.col-sm-6.col-md-3 {
  text-align: center !important;
}

/* Center the h6 language titles */
.node--type-themag-landing-page .layout--onecol .col-6.col-sm-6.col-md-3 .h6 {
  text-align: center !important;
  margin-bottom: 1rem;
}

/* Center the paragraph containing the image */
.node--type-themag-landing-page .layout--onecol .col-6.col-sm-6.col-md-3 p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}

/* Center images in Executive Summary and control size */
.node--type-themag-landing-page .layout--onecol .col-6.col-sm-6.col-md-3 img {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 120px !important;
  width: auto !important;
  height: auto !important;
}

/* Center the link wrapping the image */
.node--type-themag-landing-page .layout--onecol .col-6.col-sm-6.col-md-3 a {
  display: inline-block !important;
  text-align: center !important;
}

/* Ensure buttons in Executive Summary are centered */
.node--type-themag-landing-page .layout--onecol .col-6.col-sm-6.col-md-3 .btn {
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
  margin-top: 0.75rem;
  display: inline-block;
  text-align: center;
}


/* =============================================================================
   THREE COLUMN SECTION (Previous Topics / Country Profiles / Archives)
   Fix spacing and remove negative margins
   ============================================================================= */

/* Remove negative margin-top from h4/h5 headers in three-column section */
.node--type-themag-landing-page .layout--threecol-section--33-34-33 h4.h5[style*="margin-top:-20px"],
.node--type-themag-landing-page .layout--threecol-section--33-34-33 h4[style*="margin-top:-20px"],
.node--type-themag-landing-page .layout--threecol-section--33-34-33 .h5[style*="margin-top:-20px"] {
  margin-top: 0 !important;
}

/* Ensure proper spacing for blue background headers */
.node--type-themag-landing-page .layout--threecol-section--33-34-33 h4[style*="background-color:#006b99"],
.node--type-themag-landing-page .layout--threecol-section--33-34-33 .h5[style*="background-color:#006b99"] {
  margin-top: 0 !important;
  margin-bottom: 1.5rem;
}

/* Add consistent spacing between three-column items */
.node--type-themag-landing-page .layout--threecol-section--33-34-33 .layout__region {
  margin-bottom: 1rem;
}


/* =============================================================================
   FINAL CARD (Why Health in the Americas+)
   Fix spacing and appearance
   ============================================================================= */

.node--type-themag-landing-page .layout--onecol .card.p-4[style*="background-color:#e7e7e7"] {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

/* Fix icon spacing in the final card */
.node--type-themag-landing-page .layout--onecol .card h2 i.fa-question-circle {
  margin-right: 0.5rem;
}


/* =============================================================================
   BUTTON SPACING
   Fix spacing for call-to-action buttons
   ============================================================================= */

.node--type-themag-landing-page .btn {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}


/* =============================================================================
   ADDITIONAL LAYOUT FIXES
   ============================================================================= */

/* Fix for any inline-styled divs with specific colors */
.node--type-themag-landing-page div[style*="background-color:#dd3900"] {
  /* The rotated circle badge - ensure it doesn't overflow */
  overflow: visible;
  z-index: 5;
}

/* Fix for paragraphs with padding-top */
.node--type-themag-landing-page p[style*="padding-top"] {
  clear: none; /* Allow text to flow around floated images */
}

/* =============================================================================
   RESPONSIVE ADJUSTMENTS - MOBILE STACKING
   ============================================================================= */

/* Tablet and below: Stack the two-column layout */
@media (max-width: 991px) {
  .node--type-themag-landing-page .layout--twocol-section--75-25 {
    flex-wrap: wrap !important;
  }

  .node--type-themag-landing-page .layout--twocol-section--75-25 > .layout__region--first {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-right: 0;
    margin-bottom: 2rem;
  }

  .node--type-themag-landing-page .layout--twocol-section--75-25 > .layout__region--second {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .node--type-themag-landing-page .layout--twocol-section--75-25 .card.p-2 {
    max-width: 250px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Adjust circle size on tablet */
  .node--type-themag-landing-page .layout--twocol-section--75-25 div[style*="border-radius:50%"] {
    width: 95px !important;
    height: 95px !important;
    padding: 18px 10px !important;
  }

  /* Adjust logo size on tablet */
  .node--type-themag-landing-page .layout--twocol-section--75-25 img[alt*="ELIMINATION INITIATIVE LOGO"],
  .node--type-themag-landing-page .layout--twocol-section--75-25 img[aria-label*="elimination logo"] {
    width: 100px !important;
    height: 100px !important;
  }
}

/* Mobile: below 768px */
@media (max-width: 767px) {
  /* Make circle smaller on mobile */
  .node--type-themag-landing-page .layout--twocol-section--75-25 div[style*="border-radius:50%"] {
    width: 80px !important;
    height: 80px !important;
    padding: 14px 8px !important;
    font-size: 0.85rem !important;
  }

  /* Make logo smaller on mobile */
  .node--type-themag-landing-page .layout--twocol-section--75-25 img[alt*="ELIMINATION INITIATIVE LOGO"],
  .node--type-themag-landing-page .layout--twocol-section--75-25 img[aria-label*="elimination logo"] {
    width: 85px !important;
    height: 85px !important;
  }
}

/* =============================================================================
   PRINT STYLES
   ============================================================================= */

@media print {
  .node--type-themag-landing-page div[style*="transform:rotate"] {
    transform: none !important;
  }
}