:root {
  --s2m-navy: #0D1B3D;
  --s2m-red: #F73B30;
  --s2m-ink: #13213F;
  --s2m-muted: #5D667A;
}

body,
h1, h2, h3, h4, h5,
.menu__link,
.btn {
  font-family: 'Inter', 'Roboto', Arial, sans-serif !important;
}

.header {
  background: transparent !important;
  box-shadow: none !important;
}

.header.header--secondary .header-upper,
.header.header--secondary .header-under {
  background: rgba(13, 27, 61, 0.96) !important;
  padding-left: 20px; padding-right: 20px;
}

.header-contact__link,
.header-inner__tel,
.menu__link {
  color: #fff !important;
}

.menu__link:hover,
.menu__item:hover > .menu__link,
.menu .active > .menu__link,
.header-contact__link:hover,
.header-inner__tel:hover {
  color: var(--s2m-red) !important;
}

.brand-logo-img img,
.footer-logo img {
  max-width: 230px;
  height: auto;
  display: block;
}

.btn {
  transition: all 0.25s ease !important;
}

.btn--outline-white {
  background: transparent !important;
  border-color: #fff !important;
  color: #fff !important;
}

.btn--outline-white:hover,
.btn--secondary:hover,
.search-form__btn:hover {
  background: var(--s2m-red) !important;
  border-color: var(--s2m-red) !important;
  color: #fff !important;
}

.btn--secondary,
.search-form__btn {
  background: var(--s2m-red) !important;
  border-color: var(--s2m-red) !important;
  color: #fff !important;
}

.btn--white {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--s2m-navy) !important;
}

.btn--white:hover {
  background: var(--s2m-red) !important;
  border-color: var(--s2m-red) !important;
  color: #fff !important;
}

.btn--link {
  color: var(--s2m-red) !important;
  font-weight: 700 !important;
}

.btn--link:hover {
  color: var(--s2m-navy) !important;
}

.section-intro {
  position: relative;
}

.section-intro::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(13, 27, 61, .88), rgba(13, 27, 61, .45));
  z-index: 1;
  pointer-events: none;
}

.section-intro .container {
  position: relative;
  z-index: 2;
}

.section-intro h1 {
  color: #fff !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em;
}

.blog-post__title a,
.recent-post__title a,
.widget__title {
  color: var(--s2m-ink) !important;
}

.blog-post__title a:hover,
.recent-post__title a:hover,
.widget a:hover,
.listing-meta__item a:hover {
  color: var(--s2m-red) !important;
}

.listing-meta__item.text--primary a,
.listing-meta__item a {
  color: var(--s2m-red) !important;
}

.blog-post__description p,
.widget,
.list a,
.tag-list__link {
  color: var(--s2m-muted);
}

.recent-post__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.search-form__control:focus {
  border-color: var(--s2m-red) !important;
  box-shadow: 0 0 0 3px rgba(247, 59, 48, .12) !important;
}

.tag-list__link:hover {
  background: var(--s2m-red) !important;
  border-color: var(--s2m-red) !important;
  color: #fff !important;
}

.pagination .active .pagination__link,
.pagination__link:hover {
  background: var(--s2m-red) !important;
  border-color: var(--s2m-red) !important;
  color: #fff !important;
}

.news-detail__visual {
  margin-bottom: 34px;
}

.news-detail__visual img {
  width: 100%;
  display: block;
}

.news-detail__meta {
  margin-bottom: 24px;
}

.news-detail__section {
  margin-bottom: 34px;
}

.news-detail__section h3 {
  color: var(--s2m-ink);
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 14px;
}

.news-detail__section p {
  color: var(--s2m-muted);
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 14px;
}

.news-detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 36px;
}

.news-detail__tags span {
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid rgba(247, 59, 48, .25);
  color: var(--s2m-red);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.footer {
  background: var(--s2m-navy) !important;
}

.footer::after {
  display: none !important;
}

.footer-upper__title,
.footer-list__link,
.footer .info-list__text,
.footer .info-list__link,
.footer-under,
.footer-under a {
  color: #fff !important;
}

.footer-list__link:hover,
.info-list__link:hover {
  color: var(--s2m-red) !important;
}

.footer-under {
  border-top: 1px solid rgba(255,255,255,.15) !important;
}

@media (max-width: 1024px) {
  .nav-drop {
    background: var(--s2m-navy) !important;
  }

  .menu {
    background: transparent !important;
  }

  .menu__link {
    color: #fff !important;
  }

  .menu__link:hover {
    color: var(--s2m-red) !important;
  }

  .sub-menu {
    background: var(--s2m-navy) !important;
  }
}

/* =========================
   NEWS PAGE TEMPLATE LAYOUT FIX
   Keeps old template width/spacing with dynamic JSON content
========================= */

/* Old news template used a tighter content + sidebar layout.
   This prevents the dynamic image from stretching too wide and keeps
   the right sidebar spacing like the original static HTML. */
.section .main-wrapper {
  display: flex !important;
  align-items: flex-start !important;
  gap: 30px !important;
}

.section .main-content {
  flex: 0 0 calc(100% - 390px) !important;
  max-width: calc(100% - 390px) !important;
  min-width: 0 !important;
}

.section .sidebar {
  flex: 0 0 360px !important;
  max-width: 360px !important;
  margin-left: 0 !important;
}

.blog-post__visual,
.blog-post__img,
.image-slider,
.image-slide {
  width: 100% !important;
  overflow: hidden;
}

.blog-post__visual img,
.blog-post__img img,
.image-slide img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* Keep the first slider similar to the old template proportion */
.image-slider .image-slide img {
  object-fit: cover;
}

@media (max-width: 1024px) {
  .section .main-wrapper {
    display: block !important;
  }

  .section .main-content,
  .section .sidebar {
    max-width: 100% !important;
    width: 100% !important;
    flex: none !important;
  }

  .section .sidebar {
    margin-top: 40px !important;
  }
}