/* ==========================================================================
   MTBVAC AVANTE — theme design CSS
   Section backgrounds/paddings are set natively per-block (Color/Dimensions
   panels in the editor). This file holds resets, the header/footer chrome,
   shared interactive components and CF7 form styles — same scope as the
   original static site's styles.css, adapted to native WordPress markup.
   ========================================================================== */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Kill the mobile tap-highlight flash and the mouse-click focus ring on
   links/buttons — this is what shows as a light-blue "paint" on click.
   :focus-visible still gets an outline, so keyboard Tab navigation stays
   accessible. */
a, button {
  -webkit-tap-highlight-color: transparent;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}
body {
  margin: 0;
  padding-top: 91px; /* offset for the fixed .site-header */
  background: #ffffff;
  font-family: 'Montserrat', Arial, sans-serif;
  color: #1a1a1a;
}
img { max-width: 100%; height: auto; }
a { color: #A3235F; text-decoration: none; }
a:hover { color: #7a1a49; text-decoration: underline; }

/* Bullet lists (core/list): brand-colored marker + a little breathing room
   between items, matching the design's dot-list style. */
.wp-block-list li { margin-bottom: 10px; line-height: 1.6; }
.wp-block-list li:last-child { margin-bottom: 0; }
.wp-block-list li::marker { color: #A3235F; }

.mtbvac-page { width: 100%; max-width: 1280px; margin: 0 auto; background: #ffffff; position: relative; }

/* Header — fixed to the top of the viewport on scroll (desktop + mobile);
   body gets a matching padding-top below so page content isn't hidden
   under it. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100; /* keep the dropdown/mobile nav above the hero and any other
                   position:relative section that follows it in DOM order */
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 91px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 60px;
  background: #ffffff;
  box-sizing: border-box;
}
.site-header .custom-logo-link img { width: 190px; height: auto; display: block; }

/* Primary nav + dropdown (native wp_nav_menu markup) */
.primary-menu { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; }
.primary-menu > .menu-item { position: relative; }
.primary-menu > .menu-item > a {
  font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px;
  color: #194877; white-space: nowrap; text-decoration: none; display: inline-flex;
  align-items: center; gap: 5px; padding: 34px 0; padding-bottom: 10px;
  border-bottom: 2px solid transparent; box-sizing: border-box;
}
/* Active page indicator — desktop: purple underline. */
@media (min-width: 769px) {
  .primary-menu > .menu-item.current-menu-item > a,
  .primary-menu > .menu-item.current-menu-ancestor > a,
  .primary-menu > .menu-item.current_page_item > a,
  .primary-menu > .menu-item.current_page_parent > a,
  .primary-menu > .menu-item.current_page_ancestor > a {
    border-bottom-color: #A3235F;
  }
}
.primary-menu > .menu-item.menu-item-has-children > a::after {
  content: ''; width: 8px; height: 8px; border-right: 2px solid #194877; border-bottom: 2px solid #194877;
  transform: rotate(45deg); margin-top: -4px;
}
.primary-menu .sub-menu {
  position: absolute; top: 100%; left: 0; background: #ffffff; border-radius: 10px;
  box-shadow: 0 12px 28px rgba(25, 72, 119, 0.18); padding: 10px 0; min-width: 230px;
  z-index: 50; list-style: none; margin: 0; opacity: 0; visibility: hidden;
  transform: translateY(4px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
/* Hover-to-open is a no-JS fallback only — once app.js runs, it flags the
   body and drives the dropdown purely via click/.is-open (so a second click
   on an already-open parent can close it without a lingering :hover re-
   opening it instantly). */
body:not(.js-dropdown-toggle) .primary-menu > .menu-item:hover > .sub-menu,
.primary-menu > .menu-item.is-open > .sub-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.primary-menu .sub-menu a {
  display: block; padding: 10px 20px; font-size: 13px; font-weight: 500;
  color: #194877; white-space: nowrap; text-decoration: none;
}
.primary-menu .sub-menu a:hover { background: rgba(234, 244, 252, 0.75); color: #A3235F; text-decoration: none; }
/* Active page indicator inside dropdown submenus (desktop + mobile). */
.primary-menu .sub-menu li.current-menu-item > a,
.primary-menu .sub-menu li.current_page_item > a {
  color: #A3235F;
  font-weight: 700;
}

/* Mobile nav toggle (small screens) */
.menu-toggle { display: none; }
.menu-toggle .icon-close { display: none; }
.menu-toggle.is-open .icon-open { display: none; }
.menu-toggle.is-open .icon-close { display: block; }
.mobile-menu-logo-item { display: none; }
@media (max-width: 768px) {
  .menu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border: none; background: transparent; cursor: pointer;
  }
  /* The <nav> wrapper must leave the header's flex flow entirely — otherwise
     it counts as a 3rd flex child (even while its menu is closed/empty) and
     "space-between" pushes the hamburger to the middle instead of the logo
     and hamburger being the only two items sharing the space. */
  .site-header nav[aria-label="Primary"] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
  }
  /* Always a full-viewport fixed overlay at this breakpoint, independent of
     scroll position. Closed/open only differ in opacity+transform+visibility
     (instead of display:none) so the show/hide can transition smoothly.
     app.js locks body scroll while open. */
  .primary-menu {
    display: flex; position: fixed; background: #fff;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 999;
    overflow-y: auto;
    flex-direction: column; align-items: flex-start; gap: 0;
    padding: 40px 24px 30px;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-14px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
  }
  .primary-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0s;
  }
  .menu-toggle { position: relative; z-index: 1000; }

  /* Logo at the top of the mobile overlay panel, linking home. */
  .mobile-menu-logo-item {
    display: block; width: 100%;
    margin-bottom: 16px; padding-bottom: 16px;
    border-bottom: 1px solid #E3E9EF;
  }
  .mobile-menu-logo-item a { display: inline-block; }
  .mobile-menu-logo-img { width: 150px; height: auto; display: block; }

  /* Tighter vertical rhythm between items — the 34px top/bottom padding is
     tuned for the 91px desktop header row, not a stacked list. */
  .primary-menu > .menu-item > a { padding: 10px 0; border-bottom: 0; }

  /* Active page indicator — mobile: purple text + a soft (not full-black) bold. */
  .primary-menu > .menu-item.current-menu-item > a,
  .primary-menu > .menu-item.current-menu-ancestor > a,
  .primary-menu > .menu-item.current_page_item > a,
  .primary-menu > .menu-item.current_page_parent > a,
  .primary-menu > .menu-item.current_page_ancestor > a {
    color: #A3235F;
    font-weight: 700;
  }

  .primary-menu .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; padding-left: 14px; }
}
body.mtbvac-menu-open { overflow: hidden; }

/* Footer */
footer.wp-block-template-part { background: #EFF7FD; }
.site-footer { background: #EFF7FD; max-width: 1280px; margin: 0 auto; padding: 80px 60px 40px 60px; position: relative; overflow: hidden; box-sizing: border-box; }
.site-footer .footer-cols { position: relative; z-index: 1; display: grid; grid-template-columns: 1.2fr 1fr 1.1fr 1fr; gap: 40px; }
.site-footer h2, .site-footer .footer-heading { font-size: 20px; font-weight: 700; color: #194877; margin: 0 0 22px 0; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.footer-links li::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: #A3235F; flex-shrink: 0; }
.footer-links a { font-size: 14px; color: #333333; }
.footer-links a:hover { color: #A3235F; }
/* Active page indicator, same treatment as the header menu. */
.footer-links li.current-menu-item > a,
.footer-links li.current_page_item > a {
  color: #A3235F;
  font-weight: 700;
}
.footer-rule { position: relative; z-index: 1; height: 1px; background: rgba(25,72,119,0.2); margin: 50px 0 26px 0; }
.footer-copy {
  position: relative; z-index: 1; font-size: 13px; color: #555555; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
/* Legal menu (footer bottom bar): no bullet, inline with the copyright line — on desktop too. */
.legal-links {
  display: inline-flex; flex-wrap: wrap; justify-content: center;
  list-style: none; margin: 0; padding: 0; gap: 16px;
}
.legal-links li { list-style: none; }
.legal-links a { font-size: 13px; color: #555555; }
/* Active page indicator, same treatment as the header menu. */
.legal-links li.current-menu-item > a,
.legal-links li.current_page_item > a {
  color: #A3235F;
  font-weight: 700;
}
/* Every link in the footer (Info list, Contact, legal menu, logo) — never underlined. */
.site-footer a,
.site-footer a:hover,
.site-footer a:focus {
  text-decoration: none !important;
}
.footer-dots-right, .footer-dots-left { position: absolute; z-index: 0; pointer-events: none; }
.footer-dots-right { right: 0; top: 0; bottom: 0; height: 100%; width: auto; }
.footer-dots-left { left: -40px; bottom: 0; width: 380px; height: auto; }

/* Social icon buttons */
.social-icons { display: flex; gap: 12px; list-style: none; margin: 0; padding: 0; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 8px; background: #A3235F;
  display: flex; align-items: center; justify-content: center; transition: opacity 0.2s ease;
}
.icon-btn:hover { opacity: 0.7; }
.icon-btn img, .icon-btn svg { width: 20px; height: 20px; }

/* Buttons */
.btn-solid, .btn-outline,
.wp-block-button.is-style-solid .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; padding: 15px 23px;
  border-radius: 100px; font-size: 13px; font-weight: 600; letter-spacing: 0.3px;
  text-decoration: none; border: 1px solid transparent; transition: background 0.2s ease, color 0.2s ease;
}
.btn-solid, .wp-block-button.is-style-solid .wp-block-button__link { background: #A3235F; color: #ffffff; border-color: #A3235F; }
.btn-solid:hover, .wp-block-button.is-style-solid .wp-block-button__link:hover { background: transparent; color: #A3235F; text-decoration: none; }
.btn-outline, .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: #194877; border-color: #194877; }
.btn-outline:hover, .wp-block-button.is-style-outline .wp-block-button__link:hover { background: #194877; color: #ffffff; text-decoration: none; }

/* "More info" / "Read more" links (core/buttons with .more-link, style Link) */
.more-link, .is-style-more-link .wp-block-button__link {
  display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600;
  color: #A3235F !important; text-decoration: none; background: none !important; padding: 0 !important; border: 0 !important;
}
.more-link:hover, .is-style-more-link .wp-block-button__link:hover { text-decoration: none; color: #7a1a49 !important; }
.more-link::after, .is-style-more-link .wp-block-button__link::after {
  content: '\2192'; display: inline-block;
}

/* Decorative dot bursts (generated by app.js) — hero section */
.has-hero-burst { position: relative; overflow: hidden; }
/* Anchored top-left (behind the heading/paragraph), never centered — overrides the
   global .is-layout-constrained auto-margin centering rule from theme.json, which
   would otherwise center this absolutely-positioned decorative div. */
.has-hero-burst > .hero-burst {
  position: absolute !important;
  inset: auto !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 0 !important;
  margin: 0 !important;
  pointer-events: none;
}
.burst-dot { position: absolute; border-radius: 2px; }

/* Hero text: sits above the burst (z-index 2), capped to a readable width. */
.hero-text-wrap {
  position: relative !important;
  z-index: 2 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Hero side image: flush to the top/right/bottom of the hero section, full
   height, no rounded corners — overrides the global .is-layout-constrained
   auto-margin/max-width rule the same way the burst override does above. */
.hero-side-image {
  position: absolute !important;
  inset: auto !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  z-index: 1 !important;
  margin: 0 !important;
  max-width: none !important;
  display: flex !important;
  align-items: stretch;
}
.hero-side-image img {
  height: 100%;
  width: auto;
  max-width: none;
  display: block;
  border-radius: 0 !important;
}

/* Photo credit overlay, bottom-right corner of the hero photo — desktop only
   (>=1024px); hidden on tablet/mobile where the image shrinks a lot. */
.hero-photo-credit {
  position: absolute;
  right: 10px;
  bottom: 6px;
  z-index: 2;
  max-width: 60%;
  margin: 0;
  padding: 3px 8px;
  background: rgba(0, 0, 0, 0.3);
  color: #ffffff;
  font-size: 10px;
  font-weight: 300;
  line-height: 1.3;
  text-align: right;
}
@media (max-width: 1023px) {
  .hero-photo-credit { display: none !important; }
}

/* Horizontal carousel track ("Project Structure") */
[data-carousel-track] {
  display: flex; gap: 24px; overflow-x: auto; padding: 4px 4px 14px 4px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, black 0%, black 82%, transparent 100%);
  mask-image: linear-gradient(to right, black 0%, black 82%, transparent 100%);
}
[data-carousel-track]::-webkit-scrollbar { display: none; }
[data-carousel-track] > * { flex: 0 0 260px; }
.arrow-btn {
  width: 48px; height: 48px; border: none; background: transparent; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; opacity: 1; transition: opacity 0.2s ease;
}
.arrow-btn:hover { opacity: 0.6; }
.carousel-prev img { transform: scaleX(-1); }

/* Simple tables (About / Clinical Development) */
.wp-block-table.is-style-mtbvac-simple table,
table.simple-table {
  width: 100% !important; border-collapse: collapse !important; font-size: 14px !important; border: 0 !important;
}
.wp-block-table.is-style-mtbvac-simple th,
table.simple-table th {
  text-align: left !important; font-size: 12.5px !important; letter-spacing: 0.4px; text-transform: uppercase;
  color: #A3235F !important; padding: 10px 14px !important; border: 0 !important; border-bottom: 2px solid #E3E9EF !important;
  background: transparent !important; font-weight: 700;
}
.wp-block-table.is-style-mtbvac-simple td,
table.simple-table td {
  padding: 14px 14px !important; border: 0 !important; border-bottom: 1px solid #E3E9EF !important;
  color: #333333 !important; line-height: 1.5; vertical-align: top; background: transparent !important;
}
.wp-block-table.is-style-mtbvac-simple tr:last-child td { border-bottom: 0 !important; }

/* Numbered / bullet markers used across content sections — !important + min/max
   pins the exact circle regardless of the parent column's own flex sizing or
   any later WP core class (e.g. wp-block-paragraph) touching box model. */
.mtbvac-marker-number {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 40px !important; height: 40px !important; min-width: 40px !important; max-width: 40px !important;
  min-height: 40px !important; flex-shrink: 0 !important; border-radius: 50% !important;
  background: #A3235F !important; color: #ffffff !important; font-size: 18px !important; font-weight: 700 !important;
  margin: 0 auto !important; padding: 0 !important; line-height: 1 !important; box-sizing: border-box !important;
}
.mtbvac-marker-check {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 29px !important; height: 29px !important; min-width: 29px !important; max-width: 29px !important;
  min-height: 29px !important; flex-shrink: 0 !important; border-radius: 50% !important;
  background: #A3235F !important; margin: 0 auto !important; padding: 0 !important; box-sizing: border-box !important;
}
.mtbvac-marker-check svg { display: block; }
.mtbvac-marker-check--sm {
  width: 27px !important; height: 27px !important; min-width: 27px !important; max-width: 27px !important;
  min-height: 27px !important; margin-top: 2px !important;
}
.mtbvac-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 1px; color: #A3235F; text-transform: uppercase; }

/* Objectives description: sits below the number+title row (see home.html),
   indented to align under the title rather than starting under the circle. */
.mtbvac-inline-row-desc { margin: 6px 0 0 70px !important; }

/* About the Project — icon box (3 equal items with vertical dividers) */
.about-icon-box { flex-wrap: nowrap !important; align-items: stretch !important; gap: 0 !important; }
.about-icon-item {
  flex: 1 1 0 !important; min-width: 0 !important; padding: 0 14px !important; box-sizing: border-box !important;
}
.about-icon-item--divider { border-left: 1px solid #A2BFD7 !important; }

/* "Our goal" checklist / "Specific objectives" grid columns: the number/check
   marker column must stay at its exact pixel width, never stretched by the
   flex-grow WP core applies to columns by default. */
.objectives-grid { margin-bottom: 18px !important; }
.objectives-grid > .wp-block-column[style*="flex-basis:20px"],
.wp-block-columns > .wp-block-column[style*="flex-basis:27px"],
.wp-block-columns > .wp-block-column[style*="flex-basis:29px"],
.wp-block-columns > .wp-block-column[style*="flex-basis:40px"] {
  flex-grow: 0 !important;
}

/* Clinical Development — gradient timeline (line + positioned gradient dots) */
.clinical-timeline { position: relative !important; max-width: 1020px; margin-left: auto !important; margin-right: auto !important; height: 160px; }
.clinical-timeline__line {
  position: absolute; left: 0; right: 0; top: 17px; height: 2px;
  background: linear-gradient(90deg, #194877 0%, #A3235F 100%); z-index: 0;
}
.clinical-timeline__item {
  position: absolute; top: 0; transform: translateX(-50%); width: 210px; text-align: center;
}
.clinical-timeline__dot {
  width: 36px; height: 36px; border-radius: 50%; margin: 0 auto 22px auto;
  box-shadow: 0 4px 10px rgba(25,72,119,0.2);
}

/* ==========================================================================
   Responsive — 1199px and below
   ========================================================================== */
@media (max-width: 1199px) {
  /* Hero text column: WordPress fixes .hero-text-wrap's content width at 45%
     (layout.contentSize) — narrow it to 40% at this breakpoint. */
  .hero-text-wrap > :not(.alignleft):not(.alignright):not(.alignfull) {
    max-width: 40%;
  }

  /* Home hero: white translucent veil between the side image and the text
     so it stays legible once the image and text start to overlap. */
  .has-hero-burst::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(255, 255, 255, 0.78);
    pointer-events: none;
  }
}

/* ==========================================================================
   Responsive — 991px and below
   ========================================================================== */
@media (max-width: 991px) {
  /* Hero text column: full width at this breakpoint. */
  .hero-text-wrap > :not(.alignleft):not(.alignright):not(.alignfull) {
    max-width: 100%;
  }
}

/* ==========================================================================
   Responsive — 768px and below
   ========================================================================== */
@media (max-width: 768px) {
  /* Header and .container share the same 15px side gutter, so both line up
     at the same left/right edge (Bootstrap's own breakpoint-based max-width
     would otherwise leave the .container narrower than the header below its
     "sm" breakpoint). */
  .site-header { max-width: 100%; padding-left: 15px; padding-right: 15px; }
  .container { width: 100% !important; max-width: 100% !important; padding-left: 15px !important; padding-right: 15px !important; }

  /* Top-level section groups without the Bootstrap .container (useContainer
     off) keep whatever side padding was set from the editor's Dimensions
     panel (often 60px) — match the same 15px side gutter as .container at
     this breakpoint. Scoped to direct children of .entry-content only, so
     groups nested inside a section (columns, icon boxes, etc.) are untouched. */
  .entry-content > .wp-block-group:not(.container) { padding-left: 5px !important; padding-right: 5px !important; }
  .entry-content > .wp-block-group:not(.container) .wp-block-columns { padding-left: 5px !important; padding-right: 5px !important; }

  /* Footer: single column, centered content. */
  .site-footer .footer-cols { grid-template-columns: 1fr; gap: 32px; text-align: center; }
  .site-footer .footer-cols .wp-block-group,
  .site-footer .footer-cols > div { align-items: center; }
  .site-footer .custom-logo-link { margin-left: auto; margin-right: auto; }
  .footer-links li { justify-content: center; }
  .social-icons { justify-content: center; }

  /* Home hero: image flush left, full-bleed behind the text. */
  .hero-side-image {
    left: 0 !important;
    right: 0 !important;
  }
  .hero-side-image img { width: 100%; height: 100%; object-fit: cover; }

  /* About the Project — icon box: stack the 3 items in a single column,
     swap the vertical divider for a horizontal one between rows. */
  .about-icon-box { flex-direction: column !important; padding-left: 10px !important; padding-right: 10px !important; }
  .about-icon-item { padding: 14px 0 !important; }
  .about-icon-item--divider {
    border-left: 0 !important;
    border-top: 1px solid #A2BFD7 !important;
  }

  /* Objectives / Expected Impact rows: keep the number/check marker and the
     title on the same line instead of WordPress's default mobile stacking
     of core/columns. The marker column must keep its EXACT original width
     (not "auto" — that let the flex algorithm size it wider than the 40px/
     29px circle itself, which is what created the "too much lateral margin"
     around the circle) so only the text column grows to fill the rest. */
  .mtbvac-inline-row { flex-wrap: nowrap !important; }
  .mtbvac-inline-row > .wp-block-column[style*="flex-basis:40px"] {
    flex: 0 0 40px !important; width: 40px !important;
  }
  .mtbvac-inline-row > .wp-block-column[style*="flex-basis:29px"] {
    flex: 0 0 29px !important; width: 29px !important;
  }
  .mtbvac-inline-row > .wp-block-column[style*="flex-basis:27px"] {
    flex: 0 0 27px !important; width: 27px !important;
  }
  .mtbvac-inline-row > .wp-block-column:not([style*="flex-basis:40px"]):not([style*="flex-basis:29px"]):not([style*="flex-basis:27px"]) {
    flex: 1 1 0% !important; min-width: 0;
  }

  /* About the Project — Specific objectives: each row packs 2 number+text
     pairs into 4 flex columns (num1,text1,num2,text2). WP's default mobile
     stacking would flatten all 4 into separate full-width blocks, breaking
     the num/text pairing. CSS grid with a 2-column template auto-places the
     4 children in DOM order into 2 correct rows (num+text, num+text). */
  .objectives-grid {
    display: grid !important;
    grid-template-columns: 20px 1fr;
    column-gap: 14px;
    row-gap: 18px;
  }
  .objectives-grid > .wp-block-column { width: auto; }

  /* Clinical Development timeline: vertical layout, left-aligned, connecting
     line running down the left edge instead of across the top (the fixed
     1020px horizontal spread was overflowing the viewport). Each item gets
     its own positioning context so its dot anchors to itself, not to the
     whole (flex-stacked, variable-height) timeline. */
  .clinical-timeline {
    max-width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  .clinical-timeline__line {
    left: 17px; right: auto; top: 0; bottom: 0;
    width: 2px; height: auto;
    background: linear-gradient(180deg, #194877 0%, #A3235F 100%);
  }
  .clinical-timeline__item {
    position: relative;
    left: 0 !important; /* each item carries an inline style="left:X%" for the
                            desktop absolute layout (0/33.33/66.66/100%); at
                            this width the item is 100% wide, so any leftover
                            offset here pushes it off-screen and overflows. */
    transform: none;
    width: 100%;
    text-align: left;
    padding-left: 54px;
  }
  .clinical-timeline__item h4,
  .clinical-timeline__item p {
    text-align: left !important;
  }
  .clinical-timeline__item h4 { margin-top: 8px; }
  .clinical-timeline__dot {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
  }

  /* News cards: the article photo should fill the card width (scoped to the
     News grid only — a blanket rule would also stretch small icon images
     used elsewhere on the page). */
  .news-grid img { width: 100% !important; height: auto !important; }

  /* Funding: center the EU logo and the heading/paragraph once the columns stack. */
  .mtbvac-funding-logo-col { text-align: center; }
  .mtbvac-funding-logo-col figure { margin-left: auto !important; margin-right: auto !important; }
  .mtbvac-funding-text-col { text-align: center; }

  /* Objectives / Expected Impact top images: nudge flush to the outer edge —
     their shape reads better pinned to the side than centered in the column. */
  .mtbvac-edge-img--left { position: relative; left: -15px; }
  .mtbvac-edge-img--right { position: relative; right: -15px; }

  /* Simple tables (About / Clinical Development): smaller type so the wide
     multi-column tables come closer to fitting without horizontal overflow. */
  .wp-block-table.is-style-mtbvac-simple table,
  table.simple-table {
    font-size: 12px !important;
  }
  .wp-block-table.is-style-mtbvac-simple th,
  table.simple-table th {
    font-size: 10.5px !important; padding: 8px 8px !important;
  }
  .wp-block-table.is-style-mtbvac-simple td,
  table.simple-table td {
    padding: 10px 8px !important;
  }
}

/* ==========================================================================
   Responsive — 600px and below
   ========================================================================== */
@media (max-width: 600px) {
  /* Reduce vertical spacing between the page's top-level section groups —
     desktop values (40-100px depending on section) get too tall stacked on
     small screens. */
  .entry-content > .wp-block-group { padding-top: 60px !important; padding-bottom: 60px !important; }
}

/* ==========================================================================
   Responsive — 479px and below
   ========================================================================== */
@media (max-width: 479px) {
  /* Home hero (primer wp-block-group, .has-hero-burst): reduce el padding
     lateral de 60px a 10px — sobreescribe el style inline del bloque. */
  .has-hero-burst {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* Contact Form 7 */
.wpcf7-form .cf7-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
.wpcf7-form .cf7-field { margin-bottom: 1.25rem; }
.wpcf7-form .cf7-label { display: block; font-size: 0.875rem; font-weight: 600; color: #194877; margin-bottom: 6px; }
.wpcf7-form input[type=text], .wpcf7-form input[type=email], .wpcf7-form textarea {
  width: 100%; border: 1px solid #A2BFD7; border-radius: 10px; padding: 12px 14px;
  font-family: inherit; font-size: 15px; box-sizing: border-box;
}
.wpcf7-form textarea { min-height: 140px; resize: vertical; }
.wpcf7-form .cf7-field--submit input[type=submit] {
  display: inline-flex; align-items: center; justify-content: center; padding: 15px 30px;
  border-radius: 100px; font-size: 13px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase;
  background: #A3235F; color: #ffffff; border: 1px solid #A3235F; cursor: pointer; transition: background 0.2s ease, color 0.2s ease;
}
.wpcf7-form .cf7-field--submit input[type=submit]:hover { background: transparent; color: #A3235F; }
.wpcf7-form .wpcf7-not-valid-tip { color: #A3235F; font-size: 13px; margin-top: 4px; }
.wpcf7-response-output { border-radius: 10px; padding: 12px 16px; margin-top: 20px; }
@media (max-width: 640px) { .wpcf7-form .cf7-grid { grid-template-columns: 1fr; } }

/* Editor-only visual aids so custom JS effects read clearly without JS running */
.editor-styles-wrapper .has-hero-burst { min-height: 260px; }
.editor-styles-wrapper .hero-burst { background: rgba(25,72,119,0.06); border: 1px dashed rgba(25,72,119,0.3); }

/* Logos de partners: tamaño máximo manteniendo proporción */
.partner-logo img { max-width: 350px; max-height: 130px; width: auto; height: auto; }

/* Categoría en tarjetas de noticias: solo etiqueta, sin navegación a la página de categoría */
.wp-block-post-terms.mtbvac-eyebrow a { pointer-events: none; cursor: default; }

/* Tarjetas de noticias: quitar el padding por defecto de core/group con fondo (theme.json) */
.news-grid .wp-block-group.has-background { padding: 0; }

/* Título de las tarjetas de noticias: 17px, azul en reposo, magenta oscuro al pasar el ratón (sin subrayado) */
.news-grid .wp-block-post-title a { font-size: 17px; color: #194877; }
.news-grid .wp-block-post-title a:hover { color: #7a1a49; text-decoration: none; }

/* Categoría de las tarjetas de noticias: tamaño propio, más pequeño que el eyebrow global */
.news-grid .wp-block-post-terms { font-size: 11px; }

/* Título de la noticia destacada (Media & Resources): mismo color/hover que las tarjetas, tamaño intacto */
.news-featured .wp-block-post-title a { color: #194877; }
.news-featured .wp-block-post-title a:hover { color: #7a1a49; text-decoration: none; }

/* Categoría de la noticia destacada (Media & Resources): tamaño propio */
.news-featured .wp-block-post-terms { font-size: 12px; }

/* Efecto decorativo del hero (solo home): opacidad reducida */
body.home .has-hero-burst > .hero-burst { opacity: 0.2; }

/* El contenido de la página (hijo directo del <main> "constrained") no debe
   limitarse al ancho global — así el contenido sin .container puede llegar
   a los lados; lo que sí lleve .container sigue limitado por Bootstrap. */
main.is-layout-constrained > .entry-content { max-width: none; }