@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap");

:root {
  font-synthesis-weight: none;
  --itnovar-ink: #10233f;
  --itnovar-muted: #5d6b7d;
  --itnovar-line: #d9e3ec;
  --itnovar-blue: #005aa8;
  --itnovar-blue-dark: #003f7f;
  --itnovar-soft: #f5f8fb;
  --itnovar-items: #d63b10;
  --itnovar-radius: 8px;
}

body {
  color: var(--itnovar-ink);
  background: #fff;
  font-family: "Manrope", "Segoe UI", Arial, sans-serif;
  letter-spacing: 0;
}

h1,
h2,
h3,
h4,
h5,
.navbar-brand,
.dropmenu ul li a {
  font-family: "Space Grotesk", "Segoe UI", Arial, sans-serif;
  letter-spacing: 0;
}

a {
  color: var(--itnovar-blue);
}

#header {
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 2px solid var(--itnovar-blue);
  box-shadow: 0 12px 34px rgba(16, 35, 63, 0.08);
}

.header-fixed #header.scrolled {
  background: rgba(255, 255, 255, 0.98);
}

.itnovar-blog-brand img {
  width: 86px;
  height: auto;
  max-height: 52px;
  object-fit: contain;
}

.dropmenu ul li a {
  color: var(--itnovar-muted);
  font-size: 0.86rem;
  font-weight: 800;
}

.dropmenu ul li a:hover,
.dropmenu ul li.active > a,
.dropmenu ul li.selected > a {
  color: var(--itnovar-blue);
}

#blog-hero {
  min-height: 360px;
  display: grid;
  align-items: center;
  color: var(--itnovar-ink);
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.96), rgba(238, 246, 255, 0.86)),
    url("/assets/images/brand/grid.png") center / cover no-repeat;
}

#blog-hero h1 {
  max-width: 860px;
  color: var(--itnovar-blue);
  font-size: clamp(2.4rem, 5vw, 4.8rem);
  line-height: 1.02;
}

#blog-hero p {
  max-width: 760px;
  color: var(--itnovar-muted);
  font-size: 1.08rem;
}

.blog-listing {
  background: #fff;
}

.blog-listing .card {
  border: 1px solid var(--itnovar-line);
  border-radius: var(--itnovar-radius);
  box-shadow: 0 14px 36px rgba(16, 35, 63, 0.08);
}

.blog-listing .card-title h5,
.blog-listing .card-title a {
  color: var(--itnovar-blue);
  font-weight: 800;
}

.blog-listing .card-body {
  color: var(--itnovar-muted);
}

.taxonomy a,
.tags a {
  border-radius: 999px;
  color: var(--itnovar-items);
  background: #fff3ef;
}

.button,
.btn,
button,
input[type="submit"] {
  border-radius: var(--itnovar-radius);
}

.itnovar-blog-footer {
  color: rgba(255, 255, 255, 0.78);
  background: var(--itnovar-ink);
}

.itnovar-blog-footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.itnovar-blog-footer strong {
  color: #fff;
}

.itnovar-blog-footer p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
}

.itnovar-blog-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-weight: 800;
}

.itnovar-blog-footer a {
  color: #fff;
}

@media (max-width: 840px) {
  .itnovar-blog-footer .container {
    align-items: flex-start;
    flex-direction: column;
  }

  #blog-hero {
    min-height: 300px;
  }
}