/* ============================================================
   Health Daily Updates — Template CSS
   html base: 10px (1rem = 10px)
   Fonts: "Open Sans" (UI/body) | Roboto (headings/sections)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 10px; }

body {
  font-family: "Open Sans", sans-serif;
  font-size: 1.5rem;        /* 15px */
  color: rgb(27, 45, 63);
  background: #fff;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; padding: 0; margin: 0; }

/* ============================================================
   CONTAINERS
   Navbar: max-width 1320px | Content: max-width 1140px
   ============================================================ */
.nav-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 15px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.content-container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 15px;
  width: 100%;
}

/* ============================================================
   HEADER / NAVBAR
   Height: 88px | bg: white | logo: 130×48px
   Nav links: Open Sans 14px / 600 / #1a2c41
   ============================================================ */
.site-header {
  background: #fff;
  position: relative;
}

.navbar {
  background: #fff;
  padding: 20px 10px;
}

.navbar-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.site-logo {
  width: 130px;
  height: 48px;
  object-fit: contain;
}

.navbar-nav {
  display: flex;
  flex-direction: row;       /* override Bootstrap default column */
  align-items: center;
  list-style: none;
  gap: 0;
}

.nav-link {
  font-family: "Open Sans", sans-serif;
  font-size: 1.4rem;        /* 14px */
  font-weight: 400;
  color: rgb(26, 44, 65);
  padding: 5px 14px;
  display: block;
  transition: color 0.2s;
}

.nav-link:hover { color: rgb(0, 201, 255); }

/* ── Logo ── */
.logo { max-width: 120px; }
.logo a { display: flex; }

/* ── Hamburger button (hidden on desktop) ── */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 4px;
  margin-left: auto;
  flex-shrink: 0;
}

.nav-toggle__bar {
  display: block;
  width: 24px;
  height: 2px;
  background: rgb(26, 44, 65);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* ============================================================
   CAROUSEL / HERO SLIDER
   Wrapper: pt=15px + image=553px + pb=133px = 701px total
   This height is calculated so the .featured-article__content
   (position:absolute; bottom:-70px on .carousel-item) remains
   inside the wrapper bounds and is not clipped.
     content-box-bottom-from-wrapper-top = 15+553+70-260+260 = 638px
     638 < 701 → visible ✓
   ============================================================ */
.carousel-wrapper {
  position: relative;
  padding: 15px 0 133px;   /* 701px total at 553px image */
  overflow: hidden;
  background: #fff;
}

/* Track centers the slide within the page (same width as content-container) */
.carousel-track {
  position: relative;
  max-width: 1110px;
  margin: 0 auto;
}

.carousel-item {
  display: none;
  position: relative;
  overflow: visible;        /* allow content box to extend below */
  float: none;              /* override Bootstrap float: left */
  margin-right: 0;          /* override Bootstrap margin-right: -100% */
  backface-visibility: visible;
  transition: none;
}

.carousel-item.active { display: block; }

.carousel-item > img {
  width: 100%;
  height: 553px;
  display: block;
  object-fit: cover;
  object-position: center center;
}

/* ── Content box (overlaps the slide image) ──────────────── */
/*  position: absolute; bottom: -70px on .carousel-item (553px)
    → content box bottom at 553+70 = 623px from item top
    → content box top    at 623-260 = 363px from item top
    → with 15px wrapper top-pad: 378px–638px from wrapper top  */
.featured-article__content {
  position: absolute;
  bottom: -70px;
  left: 55.5px;
  width: 900px;
  max-width: 900px;
  background: #fff;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 2px 40px 0px;
  z-index: 9;
  padding: 25px;
}

.featured-badge {
  display: inline-block;
  font-family: "Open Sans", sans-serif;
  font-size: 1.2rem;        /* 12px */
  font-weight: 400;
  color: rgb(0, 201, 255);
  border-radius: 7px;
  padding: 5px;
  margin-bottom: 8px;
  transition: color 0.15s;
}

.featured-badge:hover { color: rgb(0, 160, 210); }

.featured-article__title {
  margin-bottom: 10px;
}

.featured-article__title a {
  font-family: "Open Sans", sans-serif;
  font-size: 3.5rem;        /* 35px */
  font-weight: 900;
  color: rgb(27, 45, 63);
  line-height: 1.25;
  display: block;
  transition: color 0.2s;
}

.featured-article__title a:hover { color: rgb(0, 201, 255); }

.featured-article__excerpt {
  font-family: "Open Sans", sans-serif;
  font-size: 1.5rem;        /* 15px */
  font-weight: 400;
  color: rgb(27, 45, 63);
  line-height: 1.5;
}

/* ── Carousel controls ──────────────────────────────────── */
/*  <a> tag spanning full image height, icon centered inside.
    Icon: 60×60px CIRCLE (border-radius:50px), rgba dark bg.
    SVG: Bootstrap chevron 30×30px, fill=currentColor=white.
    Hover: opacity 0.9 (Bootstrap standard behavior).        */
.carousel-control {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 167px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 10;
  padding: 0;
  text-decoration: none;
  color: #fff;
  opacity: 1;
  transition: opacity 0.15s;
}

.carousel-control-prev { left: 0; }
.carousel-control-next { right: 0; }

.carousel-control:hover,
.carousel-control:focus {
  opacity: 0.9;
  text-decoration: none;
  outline: 0;
}

/* Circle icon: 60×60px, border-radius:50px = exact original  */
/* Dark bg via box-shadow inset (no transition → visible immediately on load) */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  width: 60px;
  height: 60px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 60px rgba(27, 45, 63, 0.4);
  background-image: none;   /* override Bootstrap's data-URI chevron */
  background-size: auto;
}

.carousel-control:hover .carousel-control-prev-icon,
.carousel-control:hover .carousel-control-next-icon {
  box-shadow: inset 0 0 0 60px rgba(27, 45, 63, 0.65);
}

/* Bootstrap SVG chevron: 30×30px, inherits white color */
.carousel-control-prev-icon svg,
.carousel-control-next-icon svg {
  width: 30px;
  height: 30px;
  fill: currentColor;
  display: block;
  flex-shrink: 0;
}

/* Bootstrap utility classes used on icon span */
.d-flex               { display: flex !important; }
.justify-content-center { justify-content: center !important; }
.align-items-center   { align-items: center !important; }

/* ── Indicators ──────────────────────────────────────────── */
/* Inside .carousel-track at bottom: -115px
   At wrapper top 15px + 553px image + 115px = 683px from wrapper top
   < 701px wrapper height → visible ✓                          */
.carousel-indicators {
  position: absolute;
  bottom: -115px;
  left: 50%;
  right: auto;              /* override Bootstrap right: 0 */
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  list-style: none;
  z-index: 15;
  padding: 0;
  margin: 0;                /* override Bootstrap margin-right/left: 15% */
}

.carousel-indicators li {
  width: 30px;
  height: 3px;
  background: rgb(200, 210, 220);
  cursor: pointer;
  border-radius: 0;
  transition: background 0.25s;
}

.carousel-indicators li.active { background: rgb(26, 35, 126); }

/* ============================================================
   MAIN CONTENT AREA
   ============================================================ */
.home-axsense {
  padding-top: 30px;
  flex: 1;
}

/* ── Two-column layout: 8/12 + 4/12 of 1140px ───────────── */
/* Bootstrap-style: row has -15px margins so cols total 1140px */
.content-row {
  display: flex;
  align-items: flex-start;
  margin-left: -15px;
  margin-right: -15px;
}

/* col-md-8: 8/12 × 1140px = 760px (padding 0 15px → inner 730px) */
.content-area {
  flex: 0 0 66.666%;
  width: 66.666%;
  padding: 0 15px;
  min-width: 0;
}

/* col-md-4: 4/12 × 1140px = 380px (padding 0 15px → inner 350px) */
.widget-area {
  flex: 0 0 33.333%;
  width: 33.333%;
  padding: 0 15px;
  min-width: 0;
}

/* ── Section titles: Roboto 25px/500 ─────────────────────── */
.section-title {
  font-family: Roboto, sans-serif;
  font-size: 2.5rem;        /* 25px */
  font-weight: 500;
  color: rgb(27, 45, 63);
  margin-bottom: 50px;
}

/* ============================================================
   ARTICLE ITEMS
   Col split: ~5/12 thumb + ~7/12 text within content-area
   Thumbnail: 287×161px (530×298 → ~54% width of 530px col)
   ============================================================ */
.axsense-articles__item {
  display: flex;
  gap: 20px;
  padding-bottom: 60px;
  position: relative;
}

.axsense-articles__item.last-item { padding-bottom: 0; }

.article-thumb-col {
  flex: 0 0 41.666%;
  max-width: 41.666%;
  min-width: 0;
}

.article-text-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 5px;
}

.axsense-articles__thumbnail {
  width: 100%;
  overflow: hidden;
}

.axsense-articles__thumbnail img {
  width: 100%;
  aspect-ratio: 530 / 298;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.axsense-articles__thumbnail img:hover {
  transform: scale(1.03);
}

.article-badge {
  display: inline-block;
  font-family: "Open Sans", sans-serif;
  font-size: 1.2rem;        /* 12px */
  font-weight: 400;
  color: rgb(0, 201, 255);
  border-radius: 7px;
  padding: 5px;
  transition: color 0.15s;
  align-self: flex-start;
}

.article-badge:hover { color: rgb(0, 160, 210); }

.article-title-link {
  font-family: "Open Sans", sans-serif;
  font-size: 1.5rem;        /* 15px */
  font-weight: 400;
  color: rgb(27, 45, 63);
  line-height: 1.5;
  display: block;
  transition: color 0.2s;
}

.article-title-link:hover { color: rgb(0, 201, 255); }

/* Stretched link: the title's ::after covers the whole card */
.article-title-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: pointer;
}
/* Badge stays above the overlay */
.article-badge {
  position: relative;
  z-index: 2;
}

.axsense-articles__excerpt {
  font-family: "Open Sans", sans-serif;
  font-size: 1.5rem;        /* 15px */
  color: rgb(27, 45, 63);
  line-height: 1.5;
}

/* ============================================================
   SIDEBAR — Top Searches
   Numbered list with blue counter color (rgb 33,150,243)
   ============================================================ */
.top-searches-list {
  counter-reset: li 0;
  list-style: none;
  padding: 0;
}

.top-searches-list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 16.7px;
  font-family: "Open Sans", sans-serif;
  font-size: 1.5rem;
  color: rgb(27, 45, 63);
  counter-increment: li;
}

.top-searches-list li::before {
  content: counter(li) ".";
  position: absolute;
  left: 0;
  top: 0;
  color: rgb(33, 150, 243);
  font-weight: 600;
  font-size: 1.5rem;
}

.top-searches-list li a {
  color: rgb(0, 0, 0);
  font-size: 1.5rem;
  font-weight: 400;
  text-decoration: none;
  transition: color 0.2s;
}

.top-searches-list li a:hover { color: rgb(0, 201, 255); }

/* ── Additional Resources (cyan dot bullets) ─────────────── */
.additional-resources-list {
  list-style: none;
  padding: 0;
}

.additional-resources-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 16px;
  font-family: "Open Sans", sans-serif;
  font-size: 1.5rem;
  color: rgb(27, 45, 63);
}

.additional-resources-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgb(0, 201, 255);
}

.additional-resources-list li a {
  color: rgb(27, 45, 63);
  font-size: 1.5rem;
  text-decoration: none;
  transition: color 0.2s;
}

.additional-resources-list li a:hover { color: rgb(0, 201, 255); }

/* ── Search widget ────────────────────────────────────────── */
.search-widget { margin-top: 24px; }

.search-form {
  display: flex;
  gap: 0;
}

.search-input {
  flex: 1;
  border: 1px solid rgb(219, 227, 232);
  border-right: none;
  padding: 8px 12px;
  font-family: "Open Sans", sans-serif;
  font-size: 1.4rem;
  color: rgb(27, 45, 63);
  outline: none;
  border-radius: 0;
}

.search-input:focus {
  border-color: rgb(0, 201, 255);
}

.search-submit {
  background: rgb(27, 45, 63);
  color: #fff;
  border: 1px solid rgb(27, 45, 63);
  padding: 8px 16px;
  font-family: "Open Sans", sans-serif;
  font-size: 1.4rem;
  cursor: pointer;
  transition: background 0.2s;
  border-radius: 0;
}

.search-submit:hover { background: rgb(0, 201, 255); border-color: rgb(0, 201, 255); }

/* ============================================================
   FEATURED ARTICLE CARD
   Full-width section bg: rgba(0,201,255,0.05)
   Card: flex row, border-radius 7px, overflow hidden, shadow
   Thumbnail: 444×371px | Content: 666×371px, padding 35px
   ============================================================ */
.featured-card-section {
  background: rgba(0, 201, 255, 0.05);
  padding: 50px 0;
  margin-top: 10px;
  width: 100%;
}

.featured-card-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.featured-article-card {
  display: flex;
  flex-direction: row;
  position: relative;
  border-radius: 7px;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 2px 40px 0px;
  overflow: hidden;
  background: #fff;
}

.featured-article-card__thumbnail {
  flex: 0 0 444px;
  width: 444px;
}

.featured-article-card__thumbnail img {
  width: 444px;
  height: 371px;
  object-fit: cover;
  display: block;
}

.featured-article-card__content {
  flex: 1;
  padding: 35px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.featured-article-card__title {
  font-family: Roboto, sans-serif;
  font-size: 2.5rem;        /* 25px */
  font-weight: 500;
  color: rgb(27, 45, 63);
  line-height: 1.4;
}

.featured-article-card__content p {
  font-family: "Open Sans", sans-serif;
  font-size: 1.5rem;
  color: rgb(27, 45, 63);
  line-height: 1.5;
}

.btn-read-more {
  display: inline-block;
  align-self: flex-start;
  background: rgb(255, 222, 0);
  color: rgb(0, 0, 0);
  font-family: "Open Sans", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  border: 1px solid rgb(255, 222, 0);
  border-radius: 7px;
  padding: 10.5px 40px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  text-decoration: none;
  position: relative;
  z-index: 2;
}

.btn-read-more:hover {
  background: rgb(240, 205, 0);
  border-color: rgb(240, 205, 0);
}

/* ============================================================
   HERO WITH ICONS
   bg: #eaf1f9 + bg-image, padding: 25px 0 103px
   Squares grid: 10 cols × 84px + 30px gap = 1110px (at 1140px)
   Each .axsense-square-cel spans 2 cols → 198px wide
   ============================================================ */
.hero-with-icons {
  background-color: rgb(234, 241, 249);
  position: relative;
  padding: 25px 0 103px;
  margin-top: 60px;
  width: 100%;
}

/* Background image managed via <img class="hero-bg"> in HTML */
.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 0;
  display: block;
}

.hero-with-icons .content-container,
.hero-with-icons .squares-outer {
  position: relative;
  z-index: 1;
}

.hero-text-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  margin-bottom: 40px;
}

.hero-text-col { grid-column: 1; }

.hero-with-icons__title {
  font-family: "Open Sans", sans-serif;
  font-size: 3.8rem;        /* 38px */
  font-weight: 900;
  color: rgb(27, 45, 63);
  line-height: 1.26;
  margin-bottom: 16px;
}

.hero-with-icons__lead {
  font-family: "Open Sans", sans-serif;
  font-size: 2.4rem;        /* 24px */
  font-weight: 400;
  color: rgb(27, 45, 63);
  line-height: 1.4;
}

/* ── CSS variables for per-square hover colors and design tokens ── */
:root {
  /* Design tokens */
  --text: #1b2d3f;
  --text-muted: #9298a1;
  --primary-100: #eaf1f9;
  --primary-500: #1a237e;
  --primary-700: #00c9ff;
  --primary-800: #1b2d3f;
  --accent-400: #00c9ff;
  --accent-500: #00a0d2;
  --white: #ffffff;
  --gray-300: #dbe3e8;
  --gray-600: #9298a1;
  --background: #ffffff;
  --border: #dbe3e8;
  --surface-100: #eaf1f9;
  --box-shadow-sm: 0 1px 3px 0 rgba(34, 40, 42, 0.1);
  --box-shadow-md: 0 4px 20px 0 rgba(33, 37, 41, 0.05);
  --box-shadow-lg: 0 4px 20px 0 rgba(33, 37, 41, 0.15);
  /* Per-square hover colors */
  --axsense-square-1-color: #3742fa;
  --axsense-square-2-color: #3742fa;
  --axsense-square-3-color: #3742fa;
  --axsense-square-4-color: #3742fa;
  --axsense-square-5-color: #3742fa;
  --axsense-square-1-filter: saturate(1) hue-rotate(370deg) brightness(0.5);
  --axsense-square-2-filter: saturate(1) hue-rotate(370deg) brightness(0.5);
  --axsense-square-3-filter: saturate(1) hue-rotate(370deg) brightness(0.5);
  --axsense-square-4-filter: saturate(1) hue-rotate(370deg) brightness(0.5);
  --axsense-square-5-filter: saturate(1) hue-rotate(370deg) brightness(0.5);
}

/* Centers the grid within the page at 1110px */
.squares-outer {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 15px;
}

/* 10 columns × 84px + 9 gaps × 30px = 840 + 270 = 1110px */
.hero-with-icons__squares-wrap {
  display: grid;
  grid-template-columns: repeat(10, 84px);
  gap: 30px;
}

/* Each cell spans 2 grid columns → 198px wide */
.axsense-square-cel {
  grid-column: span 2;
}

/* ── Square card — position:relative + ::after for 1:1 aspect ratio ── */
/*  Icon and title are absolutely positioned inside.
    Hover: solid 5px offset cyan box-shadow (no blur) = 3D-button effect.
    Icon filter on base: saturate(1)… (darkened/tinted blue)
    Icon filter on hover: saturate(100)… (vivid/bright)              */
.axsense-square {
  background-color: #fff !important;
  border-radius: 4px;
  color: rgb(26, 35, 126);        /* #1a237e */
  position: relative;
  transition: all 0.3s ease;
  box-shadow: 0 11px 23px 0 rgba(0, 0, 0, 0.09);
  display: block;
  text-decoration: none;
  overflow: hidden;
}

/* Creates the square shape: height = 100% of own width */
.axsense-square::after {
  content: '';
  display: block;
  padding-bottom: 100%;
}

/* ── Hover: cyan accent + box-shadow ── */
.axsense-square:hover { box-shadow: 5px 5px 0 0 #00c9ff !important; }
.axsense-square:hover .axsense-square__icon { color: #00c9ff; }

/* ── Icon: absolutely centered, top 10% ── */
/*  Width: 10rem = 100px (at base 10px)
    left: calc(50% - 5rem) = centered                              */
.axsense-square__icon {
  width: 100px;
  position: absolute;
  left: calc(50% - 50px);
  top: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a237e;
}

.axsense-square__icon img {
  max-width: 100%;
  height: auto;
  display: block;
  transition: filter 0.3s ease;
}
.axsense-square__icon svg {
  width: 100%;
  height: auto;
  display: block;
  transition: color 0.3s ease;
}

/* ── Title: absolutely positioned, left 20%, top 60% ── */
/*  font-size: 1.8rem = 18px (base 10px)                          */
.axsense-square__title {
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 1.8rem;            /* 18px */
  left: 20%;
  position: absolute;
  top: 60%;
  width: 60%;
  color: rgb(27, 45, 63);       /* #1b2d3f */
  text-align: center;
  line-height: 1.3;
}

/* Responsive: max-width 1199.98px */
@media (max-width: 1199.98px) {
  .axsense-square__icon {
    left: calc(50% - 35px);
    width: 70px;
  }
  .axsense-square__title {
    font-size: 1.4rem;          /* 14px */
  }
}

/* ============================================================
   FOOTER
   Exact replica of the original site-footer CSS.
   border-top: 1px solid #dbe3e8 | padding: 4rem 0 (40px)
   font-size: 1.1rem (11px) | color: #9298a1
   ============================================================ */
.site-footer {
  border-top: 1px solid #dbe3e8;
  color: #9298a1;
  font-size: 1.1rem;          /* 11px */
  margin-top: auto;
  padding: 4rem 0;            /* 40px 0 */
}

/* Bootstrap-style row with negative margins → total 1140px */
.footer-inner-row {
  display: flex;
  align-items: flex-start;
  margin-left: -15px;
  margin-right: -15px;
}

/* ── col-md-4 brand column: 380px, position:relative, pb:30px ── */
/* Gray logo at top; copyright div position:absolute bottom:0     */
.site-footer__brand {
  flex: 0 0 33.333%;
  width: 33.333%;
  padding: 0 15px 3rem;       /* 0 15px 30px */
  position: relative;
}

.site-footer__logo-link { display: block; }

/* Logo width from CSS variable (130px set on original) */
.site-footer__logo {
  width: 130px;
  margin: 0;
  display: block;
}

/* Copyright: absolutely positioned at the bottom of the brand col */
.site-footer__info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 5px 15px;
  color: #9298a1;
  font-size: 1.1rem;
}

/* ── col-md-8 links column: 760px ── */
.site-footer__links-col {
  flex: 0 0 66.666%;
  width: 66.666%;
  padding: 0 15px;
}

/* ── ul: CSS multi-column (3 cols) — NO flex/grid ── */
.site-footer__menu {
  list-style: none;
  padding: 0;
  margin-bottom: 0;
  column-count: 3;
  -moz-column-count: 3;
}

/* Line-height 2.55 creates vertical spacing between items */
.site-footer__menu li {
  line-height: 2.55;
}

.site-footer__menu li a {
  color: #9298a1;
  font-size: 1.1rem;          /* 11px */
  text-decoration: none;
  padding: 0;
  transition: text-decoration 0.15s;
}

/* Hover: same color + underline (exact original behavior) */
.site-footer__menu li a:hover {
  color: #9298a1;
  text-decoration: underline;
}

/* Site disclaimer — informational notice required by SOP Rule 6 */
.site-disclaimer {
  color: #9298a1;
  font-size: 1.1rem;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(219, 227, 232, 0.45);
  line-height: 1.5;
  text-align: center;
}

/* Mobile-only copyright (hidden on desktop) */
.footer-mobile-copy {
  display: none;
  text-align: center;
  font-size: 1.1rem;
  color: #9298a1;
  padding: 10px 0 0;
}

/* ── Responsive ── */
@media (max-width: 767.98px) {
  .site-footer { text-align: center; }

  /* Stack brand + links columns and center */
  .footer-inner-row {
    flex-direction: column;
    align-items: center;
    margin-left: 0;
    margin-right: 0;
  }
  .site-footer__brand {
    flex: none;
    width: 100%;
    padding: 0 15px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .site-footer__links-col {
    flex: none;
    width: 100%;
    padding: 0 15px;
    text-align: center;
  }

  .site-footer__menu--column { column-count: 1 !important; -moz-column-count: 1 !important; }
  .site-footer__menu--column li { display: inline-block; margin: 0 1rem; }
  .site-footer__info { display: none; }
  .footer-mobile-copy { display: block; }

  /* Disclaimer centered */
  .site-disclaimer { text-align: center; margin-top: 20px; }
}

/* ============================================================
   LAYOUT RESET
   ============================================================ */
.home .container.main { width: 100%; max-width: 100%; padding: 0; }
.container.layout { max-width: 100%; padding: 0; }
.container.layout .row.layout { margin: 0; }
.container.layout .row.layout > .cols { overflow-x: hidden; }
.home .container.layout .row.layout > .cols { padding: 0; }
.pages .main-wrapper .container.main { padding: 24px 16px; }

/* ============================================================
   FONTS RESET
   ============================================================ */
body,
input,
textarea,
select,
button {
  font-family: "Open Sans", sans-serif;
  color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
  font-family: Roboto, sans-serif;
  color: var(--text);
  font-weight: 500;
  line-height: 1.3;
}

p {
  font-family: "Open Sans", sans-serif;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 1em;
}

p:last-child { margin-bottom: 0; }

/* ============================================================
   TABLE RESET
   ============================================================ */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 32px 0;
}

table th, table td {
  border: 1px solid var(--border) !important;
  padding: 10px 14px !important;
  text-align: left;
  vertical-align: top;
}

table td {
  color: var(--text) !important;
  font-size: 1.4rem;
}

table th {
  background: var(--primary-500) !important;
  color: var(--white) !important;
  font-family: Roboto, sans-serif;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
}

table tbody tr:nth-child(even) td {
  background: var(--surface-100) !important;
}

table tbody tr:hover td { background: var(--gray-300); }

/* ============================================================
   CONTACT FORM
   ============================================================ */
.wpcf7 form,
.contact-form {
  max-width: 680px;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea,
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--gray-300);
  font-family: "Open Sans", sans-serif;
  font-size: 1.4rem;
  color: var(--gray-600);
  background: var(--white);
  border-radius: 4px;
  outline: none;
  transition: border-color 0.2s;
  margin-bottom: 12px;
}

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 textarea:focus {
  border-color: var(--primary-500);
}

.wpcf7 textarea,
.contact-form textarea {
  min-height: 120px;
  resize: vertical;
}

.wpcf7 input[type="submit"],
.contact-form button[type="submit"] {
  background: var(--primary-500);
  color: #ffffff;
  border: none;
  padding: 11px 28px;
  font-family: "Open Sans", sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

.wpcf7 input[type="submit"]:hover,
.contact-form button[type="submit"]:hover {
  background: var(--accent-500);
}

/* ============================================================
   WIDGETS
   ============================================================ */
.widget {
  margin-bottom: 30px;
}

.widget-title {
  font-family: Roboto, sans-serif;
  font-size: 2rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--border);
}

.widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.widget ul li {
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 1.4rem;
  color: var(--text);
}

.widget ul li:last-child { border-bottom: none; }

.widget ul li a {
  color: var(--text);
  text-decoration: none;
  transition: color 0.2s;
}

.widget ul li a:hover { color: var(--accent-400); }

/* Search widget with inline SVG icon */
.widget-search .search-form {
  position: relative;
  display: flex;
}

.widget-search .search-input {
  padding-right: 44px;
}

.widget-search .search-submit {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 40px;
  background-color: #1b2d3f;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%231b2d3f' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.099zm-5.44 1.406a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px;
  border: none;
  cursor: pointer;
  font-size: 0;
  color: transparent;
}

.widget-search .search-submit:hover {
  background-color: var(--accent-400);
}

/* ── Sibling widget — same style as Additional Resources ── */
.widget-sibling ul,
.sibling-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.widget-sibling ul li,
.sibling-nav ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 16px;
  font-family: "Open Sans", sans-serif;
  font-size: 1.5rem;
  color: rgb(27, 45, 63);
}

.widget-sibling ul li::before,
.sibling-nav ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgb(0, 201, 255);
}

.widget-sibling ul li a,
.sibling-nav ul li a {
  color: rgb(27, 45, 63);
  font-size: 1.5rem;
  text-decoration: none;
  transition: color 0.2s;
}

.widget-sibling ul li a:hover,
.sibling-nav ul li a:hover {
  color: rgb(0, 201, 255);
}

/* ============================================================
   SECOND ARTICLES BLOCK (replaces inline style)
   ============================================================ */
.second-articles-block { padding-top: 70px; padding-bottom: 40px; }

/* ============================================================
   RESPONSIVE — TABLET  max-width: 991.98px
   ============================================================ */
@media (max-width: 991.98px) {

  /* Squares: 3 per row (span 2 of 6 cols) */
  .hero-with-icons__squares-wrap {
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
  }

  /* Carousel content box: clamp to viewport */
  .featured-article__content {
    left: 0;
    width: 100%;
    max-width: 100%;
  }
  .featured-article__title a { font-size: 2.4rem; }

  /* Featured card: smaller fixed thumb */
  .featured-article-card__thumbnail { flex: 0 0 280px; width: 280px; }
  .featured-article-card__thumbnail img { width: 280px; height: auto; }
}

/* ============================================================
   RESPONSIVE — MOBILE  max-width: 767.98px
   ============================================================ */
@media (max-width: 767.98px) {

  /* ── Navbar: hamburger layout ── */
  .navbar { padding: 10px; }
  .nav-container { flex-wrap: wrap; }
  .nav-toggle { display: flex; }

  /* Nav links hidden by default — shown when #main-nav.nav-open */
  .navbar-nav {
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    border-top: 1px solid rgb(219, 227, 232);
    margin-top: 8px;
    padding: 6px 0;
    gap: 0;
  }
  #main-nav.nav-open .navbar-nav { display: flex; }

  .navbar-nav .nav-link {
    font-size: 1.4rem;
    padding: 11px 6px;
    border-bottom: 1px solid rgb(234, 241, 249);
    display: block;
  }
  .navbar-nav li:last-child .nav-link { border-bottom: none; }

  /* Hamburger → X animation when open */
  #main-nav.nav-open .nav-toggle .nav-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  #main-nav.nav-open .nav-toggle .nav-toggle__bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }
  #main-nav.nav-open .nav-toggle .nav-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* ── Carousel: content flows below image ── */
  .carousel-wrapper { padding: 0; }
  .carousel-item { overflow: hidden; }
  .carousel-item > img { height: 220px; }
  .featured-article__content {
    position: static;
    width: auto;
    max-width: 100%;
    left: auto;
    bottom: auto;
    box-shadow: none;
    border-left: 3px solid rgb(0, 201, 255);
    padding: 14px 16px;
    margin: 0;
  }
  .featured-article__title a {
    font-size: 1.8rem;
    font-weight: 700;
  }
  .featured-article__excerpt { display: none; }
  .carousel-control {
    display: flex;
    width: 44px;
    top: 0;
    bottom: auto;
    height: 220px;  /* match mobile image height */
  }
  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    width: 36px;
    height: 36px;
    box-shadow: inset 0 0 0 36px rgba(27, 45, 63, 0.45);
  }
  .carousel-control:hover .carousel-control-prev-icon,
  .carousel-control:hover .carousel-control-next-icon {
    box-shadow: inset 0 0 0 36px rgba(27, 45, 63, 0.7);
  }
  .carousel-control-prev-icon svg,
  .carousel-control-next-icon svg {
    width: 18px;
    height: 18px;
  }
  .carousel-indicators {
    position: static;
    left: auto;
    bottom: auto;
    transform: none;
    justify-content: center;
    margin: 10px auto 6px;
    padding: 0;
  }

  /* ── Section titles ── */
  .section-title { font-size: 2rem; margin-bottom: 24px; }

  /* ── Content layout: single column ── */
  .content-row {
    flex-direction: column;
    margin-left: 0;
    margin-right: 0;
  }
  .content-area,
  .widget-area {
    flex: none;
    width: 100%;
  }
  .widget-area { margin-top: 36px; }

  /* ── Article items ── */
  .axsense-articles__item { gap: 12px; padding-bottom: 28px; }
  .axsense-articles__item.last-item { padding-bottom: 12px; }

  /* ── Second articles block ── */
  .second-articles-block { padding-top: 32px; padding-bottom: 16px; }

  /* ── Featured Article Card ── */
  .featured-article-card { flex-direction: column; }
  .featured-article-card__thumbnail { flex: none; width: 100%; }
  .featured-article-card__thumbnail img { width: 100%; height: auto; }
  .featured-article-card__content { padding: 20px; }
  .featured-article-card__title { font-size: 2rem; }

  /* ── Hero with Icons ── */
  .hero-with-icons { padding: 20px 0 50px; margin-top: 30px; }
  .hero-text-row { grid-template-columns: 1fr; }
  .hero-with-icons__title { font-size: 2.4rem; margin-bottom: 10px; }
  .hero-with-icons__lead { font-size: 1.5rem; }
  .hero-with-icons__squares-wrap {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
  .axsense-square-cel:last-child { grid-column: 2 / span 2; }
  .axsense-square__icon { width: 75px; left: calc(50% - 37px); }
  .axsense-square__title { font-size: 1.1rem; top: 65%; left: 10%; width: 80%; }
}

/* ============================================================
   RESPONSIVE — SMALL PHONES  max-width: 575.98px
   Articles stack vertically (thumbnail ~131px is too small)
   ============================================================ */
@media (max-width: 575.98px) {
  .axsense-articles__item { flex-direction: column; gap: 8px; }
  .article-thumb-col { flex: none; max-width: 100%; width: 100%; }
  .article-text-col { padding-left: 0; }
  .axsense-articles__thumbnail img { aspect-ratio: 16 / 7; }

  /* Squares: 2 per row */
  .hero-with-icons__squares-wrap {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  .axsense-square-cel:last-child { grid-column: 2 / span 2; }
  .axsense-square__icon { width: 60px; left: calc(50% - 30px); }
  .axsense-square__title { font-size: 1rem; top: 65%; }
}

/* ============================================================
   TABLE — RESPONSIVE OVERFLOW
   ============================================================ */
@media (max-width: 992px) {
  table {
    display: block !important;
    overflow-x: auto !important;
    border: 0 !important;
  }
}

/* ============================================================
   MAIN PARAGRAPH
   ============================================================ */
.main-paragraph h1,
.main-paragraph h2 {
  font-weight: 700;
  color: var(--text);
}

.main-paragraph h1,
.main-paragraph h2,
.main-paragraph h3,
.main-paragraph p,
.main-paragraph strong {
  color: var(--text);
}

.main-paragraph h1 {
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}

.main-paragraph h2 {
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 40px 0 18px;
}

.main-paragraph h3 {
  font-size: 22px;
  line-height: 1.3;
  font-weight: 600;
  margin: 24px 0 10px;
}

.main-paragraph p {
  font-size: 17px;
  line-height: 1.7;
  margin: 0 0 16px;
}

.main-paragraph strong {
  font-weight: 700;
}

@media (max-width: 768px) {
  .main-paragraph h1 {
    font-size: 30px;
    margin-bottom: 16px;
  }

  .main-paragraph h2 {
    font-size: 25px;
    margin: 32px 0 16px;
  }

  .main-paragraph h3 {
    font-size: 20px;
    margin: 22px 0 8px;
  }

  .main-paragraph p {
    font-size: 16px;
    line-height: 1.65;
    margin-bottom: 14px;
  }
}

/* ============================================================
   CONTACT FORM — #contact-form
   ============================================================ */
#contact-form {
  margin: 45px auto 0;
  max-width: 500px;
}

#contact-form input,
#contact-form textarea {
  flex: 1;
  border: 2px solid var(--gray-300);
  border-radius: 6px;
  outline: 0;
  padding: 14px 18px;
  font-size: 14px;
  color: var(--text);
  min-width: 100%;
}

#contact-form input:active,
#contact-form input:focus,
#contact-form textarea:active,
#contact-form textarea:focus {
  border: 2px solid var(--primary-500);
}

#contact-form input::placeholder,
#contact-form textarea::placeholder {
  color: var(--gray-600);
}

#contact-form button {
  background: var(--primary-500);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  padding: 16px;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 0.2s;
  white-space: nowrap;
  width: 100%;
}

#contact-form button:hover {
  background: var(--accent-500);
}

/* ═══════════════════════════════════
           WIDGETS (LASSO)
═══════════════════════════════════ */

/* IMAGE STYLE RESET */
.item-current-image {
  margin-bottom: 20px;
  overflow: hidden;
  border-radius: 4px;
}

.item-current-image a {
  display: block;
}

.item-current-image img {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: none !important;
  border-radius: 4px !important;
  border-color: var(--gray-300) !important;
}

/* SUBLIST */
.item-sublist a {
  width: 100%;
  height: 100%;
}

.item.item-bubbles {
  margin-bottom: 32px;
}

.item-bubbles .row {
  margin: 0;
}

.bubbles-chip {
  align-items: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  display: flex;
  font-weight: 500;
  height: 100%;
  padding: 16px 48px 16px 24px;
  position: relative;
  transition: padding 0.2s ease-in-out;
}

.bubbles-chip:hover {
  color: var(--primary-800);
  background: var(--surface-100);
  border-color: var(--primary-100);
  padding-left: 20px;
}

.bubbles-chip:active,
.bubbles-chip:focus {
  background: var(--accent-500);
  color: var(--white);
}

.bubbles-link {
  display: block;
  width: 100%;
  max-width: 100%;
  text-decoration: none;
}

.bubbles-link .bubbles-outer {
  height: 100%;
  padding: 5px;
  max-width: 100%;
}

.sibling.link-button .bubbles-link .bubbles-outer,
.sibling.link-button .bubbles-chip {
  height: auto;
}

.col-gap:has(> .item-bubbles)::before {
  display: none !important;
}

.bubbles-chip::after {
  content: url("data:image/svg+xml,%3Csvg width='13' height='12' viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.87771 7.01782H1.02042C0.737361 7.01782 0.496528 6.91886 0.297917 6.72094C0.0993056 6.52317 0 6.2833 0 6.00136C0 5.71942 0.0993056 5.4781 0.297917 5.2774C0.496528 5.07657 0.737361 4.97615 1.02042 4.97615H8.87771L5.66583 1.76428C5.46111 1.55955 5.35681 1.31719 5.35292 1.03719C5.34889 0.757332 5.45076 0.510249 5.65854 0.295943C5.86632 0.0948319 6.11014 -0.00377823 6.39 0.000110661C6.66986 0.00399955 6.91236 0.108583 7.1175 0.313861L12.0713 5.27407C12.1699 5.37282 12.2464 5.4856 12.3008 5.6124C12.3551 5.73935 12.3823 5.86865 12.3823 6.00032C12.3823 6.13199 12.3551 6.26122 12.3008 6.38803C12.2464 6.51497 12.1727 6.62497 12.0798 6.71803L7.10958 11.688C6.89403 11.9037 6.65368 12.0081 6.38854 12.0012C6.12354 11.9942 5.88715 11.8862 5.67938 11.6772C5.4716 11.4629 5.36771 11.2166 5.36771 10.9382C5.36771 10.6599 5.4716 10.4192 5.67938 10.2162L8.87771 7.01782Z' fill='%231b2d3f'/%3E%3C/svg%3E%0A");
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  transition: 0.2s ease-in-out;
}

.bubbles-chip:hover::after {
  right: 10px;
}

/* SUBLIST CARDS */
.item-sublist:has(.sublist.card) .row > div {
  padding: 5px !important;
}

.sublist.card {
  border: none;
  border-radius: 6px;
  box-shadow: var(--box-shadow-md);
  transition: 0.2s ease-in;
}

.sublist.card:hover {
  box-shadow: var(--box-shadow-lg);
  color: var(--primary-500);
  transform: translateY(-4px);
}

.sublist.card h5 {
  margin-bottom: 0;
  font-weight: 500;
}

.sublist.card .card-body {
  padding: 16px;
}

@media (max-width: 767.98px) {
  .row div:has(> .sublist.card) {
    padding: 0 !important;
  }

  .row:has(> div .sublist.card) {
    margin: 0;
    gap: 10px;
  }

  .sublist.card {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .sublist.card .card-img-top {
    border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
    width: 120px;
    height: 100%;
    object-fit: cover;
    flex-shrink: 0;
  }

  .sublist.card .card-body {
    flex: 1;
    padding: 1rem;
  }

  .sublist.card .card-body * {
    line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .sublist.card .card-body h5 {
    font-size: 16px;
  }
}