/* Shared corrective layer - applies the editorial and visual standards consistently. */
:root {
  --qa-navy: #0A1F3D;
  --qa-cyan: #00A8E8;
  --qa-soft-gray: #F5F7FA;
}

html { scroll-padding-top: 120px; }
section[id], [id] { scroll-margin-top: 120px; }

/* Running copy is set as a text block; UI labels and navigation stay naturally aligned. */
main p,
article p,
section > div > p,
.article-content p,
.prose p,
.content p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

/* Retire the remaining gold treatment in favour of the institutional cyan. */
.gold-divider,
.gold-line,
.gold-accent { display: none !important; }
.text-gold,
[class~="gold"] { color: var(--qa-cyan) !important; }
.bg-gold,
[class~="gold"] { background-color: var(--qa-cyan) !important; }
[style*="#D4AF37"],
[style*="#d4af37"] {
  color: var(--qa-cyan) !important;
  border-color: var(--qa-cyan) !important;
}

/* Avoid oversized visual gaps inherited from individual page templates. */
@media (min-width: 769px) {
  section.py-24, section.py-28, section.py-32 { padding-top: 5rem; padding-bottom: 5rem; }
}

@media (max-width: 768px) {
  body { overflow-x: hidden; }
  #main-nav { max-width: 100vw; }
  #mobile-menu { max-height: calc(100vh - 7rem); overflow-y: auto; }
  h1 { overflow-wrap: anywhere; }
}

/* Publication reading layout: hero, centred article, related posts. */
body.publication-page .article-body {
  max-width: 48rem;
  margin-inline: auto;
}

body.publication-page .article-body p {
  text-align: justify;
  text-justify: inter-word;
}

body.publication-page article.article-body + aside,
body.publication-page .article-body ~ aside {
  display: none !important;
}

/* Service heroes share one typographic scale and the same horizontal grid as
   the header. The Portuguese and English pages use this exact same geometry. */
body.service-page .hero-section > .relative.z-10,
body.service-page section.hero-section > .relative.z-10,
body.service-page section[class*="hero-"] > .relative.z-10 {
  max-width: 80rem !important;
  padding-inline: 2rem !important;
}

body.service-page .service-hero-content {
  max-width: 80rem !important;
  padding-inline: 2rem !important;
}

body.service-page .service-hero-content > div {
  margin-inline: 0 !important;
  text-align: left !important;
}

body.service-page h1.service-hero-title {
  max-width: 58rem;
  margin-inline: 0 !important;
  font-size: clamp(2.25rem, 4.5vw, 3.25rem) !important;
  line-height: 1.12 !important;
  text-align: left !important;
  text-wrap: balance;
}

/* Some service templates centre the hero wrapper in their local stylesheet.
   These direct rules keep the same left edge as the header in every template. */
body.service-page .service-hero-title {
  display: block !important;
  width: min(58rem, 100%) !important;
  text-align: left !important;
}

body.service-page .service-hero-title + p,
body.service-page .service-hero-title ~ p {
  max-width: 46rem !important;
  margin-inline: 0 !important;
  text-align: left !important;
}

body.service-page h1.service-hero-title ~ p,
body.service-page p.service-hero-lead {
  max-width: 46rem !important;
  margin-inline: 0 !important;
  margin-bottom: 3rem !important;
  text-align: left !important;
  font-family: Inter, sans-serif;
  font-size: clamp(1rem, 1.5vw, 1.125rem) !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

body.service-page .service-hero-content {
  width: 100%;
  padding-top: 10rem !important;
  padding-bottom: 8rem !important;
}

body.service-page .service-hero-content > div {
  max-width: 58rem;
}

body.service-page .service-hero-content,
body.service-page .service-hero-content > div {
  text-align: left !important;
}

@media (max-width: 1023px) {
  body.service-page .hero-section > .relative.z-10,
  body.service-page section.hero-section > .relative.z-10,
  body.service-page section[class*="hero-"] > .relative.z-10 {
    padding-inline: 1.5rem !important;
  }

  body.service-page .service-hero-content { padding-inline: 1.5rem !important; }
}

@media (max-width: 639px) {
  body.service-page .hero-section > .relative.z-10,
  body.service-page section.hero-section > .relative.z-10,
  body.service-page section[class*="hero-"] > .relative.z-10 {
    padding-inline: 1.5rem !important;
  }

  body.service-page .service-hero-content { padding-inline: 1.5rem !important; }

  body.service-page h1.service-hero-title {
    font-size: clamp(2rem, 10vw, 2.45rem) !important;
    text-wrap: pretty;
  }
}

/* Publication listings use one card treatment; the former featured card is no
   longer visually different from the remaining publications. */
body.publications-index .article-card,
body.publications-index .article-card.featured {
  background: linear-gradient(135deg, rgba(0, 168, 232, .04), rgba(10, 31, 61, .02));
  border: 1px solid rgba(0, 168, 232, .15);
}

body.publications-index .article-card::before,
body.publications-index .article-card.featured::before {
  width: 5px;
  background: linear-gradient(180deg, var(--qa-cyan), #0066CC);
}

body.publications-index .article-card .article-title,
body.publications-index .article-card.featured .article-title {
  font-size: 2.25rem;
  background: linear-gradient(135deg, var(--qa-navy), var(--qa-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

body.publications-index .article-card .article-category,
body.publications-index .article-card.featured .article-category {
  background: rgba(0, 168, 232, .10);
  color: var(--qa-cyan);
}

@media (max-width: 639px) {
  body.publications-index .article-card .article-title,
  body.publications-index .article-card.featured .article-title {
    font-size: 1.75rem;
  }
}

/* All gold accents in publications resolve to the institutional cyan. */
body.publications-index [class*="D4AF37"],
body.publications-index [class*="gold"],
body.publication-page [class*="D4AF37"],
body.publication-page [class*="gold"] {
  color: var(--qa-cyan) !important;
  border-color: var(--qa-cyan) !important;
}

body.publications-index [class*="bg-" i][class*="D4AF37"],
body.publications-index [class*="bg-gold"],
body.publication-page [class*="bg-" i][class*="D4AF37"],
body.publication-page [class*="bg-gold"] {
  background-color: var(--qa-cyan) !important;
}

/* A consistent, unobtrusive production credit is present in every footer. */
.qa-credit {
  position: relative;
  z-index: 1;
  margin-top: 1.25rem;
  padding: 0 2rem 2rem;
  color: rgba(255, 255, 255, .45);
  font-family: Inter, sans-serif;
  font-size: .75rem;
  line-height: 1.2;
  text-align: center;
}

.qa-credit a {
  color: inherit;
  text-decoration: none;
  transition: color .2s ease;
}

.qa-credit a:hover,
.qa-credit a:focus-visible { color: var(--qa-cyan); }

/* One navigation component on every page. */
#main-nav .qa-nav-dropdown,
#main-nav .relative.group { position: relative; }

#main-nav.scrolled #nav-container {
  background: rgba(10, 31, 61, 0.95);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
}

#main-nav .nav-link {
  position: relative;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.3s ease;
}

#main-nav .nav-link:hover { color: #fff; }

#main-nav .nav-link::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 0;
  height: 1px;
  background: var(--qa-cyan);
  transition: width 0.3s ease;
  transform: translateX(-50%);
}

#main-nav .nav-link:hover::after { width: 100%; }

#main-nav .mobile-link {
  display: block;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}

#main-nav .dropdown-panel {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 0;
  z-index: 60;
  width: min(22rem, calc(100vw - 3rem));
  max-height: min(34rem, calc(100vh - 8rem));
  overflow-y: auto;
  padding: 0.5rem 0;
  border: 1px solid rgba(10, 31, 61, 0.1);
  border-radius: 0.75rem;
  background: #fff;
  box-shadow: 0 1.25rem 3.5rem rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(0.5rem);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

#main-nav .group:hover .dropdown-panel,
#main-nav .qa-nav-dropdown:hover .dropdown-panel,
#main-nav .qa-nav-dropdown:focus-within .dropdown-panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#main-nav .dropdown-panel a {
  display: block;
  padding: 0.7rem 1rem;
  color: var(--qa-navy);
  font-family: Inter, sans-serif;
  font-size: 0.8125rem;
  line-height: 1.35;
}

#main-nav .dropdown-panel a:hover,
#main-nav .dropdown-panel a:focus-visible {
  background: var(--qa-soft-gray);
  color: #0079a9;
}

.qa-site-header .qa-nav-dropdown { position: relative; }
.qa-site-header .dropdown-panel {
  position: absolute;
  top: calc(100% + .75rem);
  left: 0;
  z-index: 60;
  width: min(22rem, calc(100vw - 3rem));
  max-height: min(34rem, calc(100vh - 8rem));
  overflow-y: auto;
  padding: .5rem 0;
  border: 1px solid rgba(10, 31, 61, .10);
  border-radius: .75rem;
  background: #fff;
  box-shadow: 0 1.25rem 3.5rem rgba(0, 0, 0, .18);
  opacity: 0;
  transform: translateY(.5rem);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

.qa-site-header .qa-nav-dropdown:hover .dropdown-panel,
.qa-site-header .qa-nav-dropdown:focus-within .dropdown-panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.qa-site-header .dropdown-panel a {
  display: block;
  padding: .7rem 1rem;
  color: var(--qa-navy);
  font-family: Inter, sans-serif;
  font-size: .8125rem;
  line-height: 1.35;
}

.qa-site-header .dropdown-panel a:hover,
.qa-site-header .dropdown-panel a:focus-visible {
  background: var(--qa-soft-gray);
  color: #0079a9;
}