/* site-common.css  -  shared header + footer styles for the whole ANIDS website */

:root {
  --anids-orange: #f26b13;
  --anids-teal: #206682;
  --anids-navy: #0b1a2c;
  --anids-ink: #1c2b3a;
  --anids-soft: #f4f7f9;
}

/* ---------- Dropdown menus ---------- */
.dropdown-menu {
  background-color: #1f2d3d !important;
  border: none !important;
}
.dropdown-menu .dropdown-item {
  color: #ffffff !important;
  background-color: transparent !important;
}
.dropdown-menu .dropdown-item:hover {
  background-color: #2d4258 !important;
  color: #ffffff !important;
}
.dropdown-submenu { position: relative; }
.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  background-color: #1f2d3d !important;
  border: none !important;
  display: none;
  min-width: 220px;
}
.dropdown-submenu:hover > .dropdown-menu { display: block; }
.dropdown-submenu .dropdown-item {
  color: #ffffff !important;
  background-color: transparent !important;
}
.dropdown-submenu .dropdown-item:hover {
  background-color: #2d4258 !important;
  color: #ffffff !important;
}
@media (max-width: 991px) {
  .dropdown-submenu .submenu { position: static; width: 100%; }
}
@media (max-width: 1400px) {
  .navbar-nav .nav-link { font-size: 14px; padding: 10px 8px !important; }
}

/* ---------- Footer ---------- */
.footer .primary-footer h4 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  color: var(--anids-teal);
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 16px;
}
.footer .primary-footer h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 3px;
  background: var(--anids-orange);
}
.footer .footer-list a { transition: color .2s ease, padding-left .2s ease; }
.footer .footer-list a:hover { color: var(--anids-orange); padding-left: 4px; }

/* ---------- Top bar / header / menu (same look as index.html) ---------- */
#site-header .row { margin-left: 0; margin-right: 0; }
.topmost_header { background: linear-gradient(90deg, #0b1a2c, #12304a) !important; }
.topmost_header .row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.topmost_header .row > [class*="col-"] { width: auto; flex: 0 1 auto; max-width: 100%; }
.topmost_header .top_call { font-size: 14px; padding: 9px 0; white-space: nowrap; }
.topmost_header .top_call span { color: #ffb27a; font-weight: 600; }
.topmost_header .menu-topmenu a { transition: color .2s ease; }
.topmost_header .menu-topmenu a:hover { color: #ffb27a !important; }
.logo-text {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: .6px;
  line-height: 1.1;
}
.menuheader {
  background: linear-gradient(90deg, #1a5a75, #206682 50%, #1a5a75) !important;
  box-shadow: 0 6px 18px rgba(11, 26, 44, .18);
}
.navbar-nav > .nav-item > .nav-link { position: relative; transition: color .2s ease; }
.navbar-nav > .nav-item > .nav-link::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px; bottom: 4px;
  height: 3px;
  background: var(--anids-orange);
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform .2s ease;
}
.navbar-nav > .nav-item > .nav-link:hover::after { transform: scaleX(1); }
.dropdown-menu { border-radius: 0 0 8px 8px !important; box-shadow: 0 14px 30px rgba(0, 0, 0, .25); }
@media (max-width: 991px) {
  .topmost_header .top_call { white-space: normal; }
}

/* =====================================================================
   RESPONSIVE FIXES  (tablet + mobile)  - header on every page + home page
   ===================================================================== */

/* ---------- Header: tablet + mobile ---------- */
@media (max-width: 991px) {
  .topmost_header .row { justify-content: center; text-align: center; }
  .topmost_header .row > [class*="col-"] { width: 100%; flex: 0 0 100%; }
  .topmost_header .top_call { font-size: 13px; padding: 8px 6px 2px; white-space: normal; }
  .topmost_header .menu-topmenu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px 18px;
    margin: 0;
    padding: 4px 0 10px;
    list-style: none;
  }
  .topmost_header .menu-topmenu > li { float: none !important; display: block; margin: 0 !important; padding: 0 !important; }

  .topHeader .row > .col-sm-1,
  .topHeader .row > .col-3 { flex: 0 0 22%; max-width: 22%; width: 22%; }
  .topHeader .row > .col-sm-5,
  .topHeader .row > .col-9 { flex: 0 0 78%; max-width: 78%; width: 78%; }
  .topHeader .row > .col-sm-6 { flex: 0 0 100%; max-width: 100%; width: 100%; margin-top: 6px; }
  .topHeader #logo-img { width: 100% !important; max-width: 84px; }
  .topHeader .col-sm-6 img { display: block; margin: 0 auto; max-height: 52px !important; }

  .navbar-nav > .nav-item > .nav-link::after { display: none; }
  .navbar-collapse { max-height: 78vh; overflow-y: auto; }
  .navbar-nav .dropdown-menu { box-shadow: none; border-radius: 0 !important; }
}
@media (max-width: 575px) {
  .logo-text { font-size: 19px !important; letter-spacing: .3px; }
}

/* ---------- Home page: tablet ---------- */
@media (max-width: 991px) {
  /* feature cards + upcoming events stack */
  .page-content > section.p-0 .col-sm-8,
  .page-content > section.p-0 .col-sm-4 { flex: 0 0 100%; max-width: 100%; width: 100%; }
  .page-content > section.p-0 .col-sm-4 { margin-top: 26px; }

  /* equal-height slides, text always fits */
  .banner .banner-slider .item,
  .banner .banner-slider .owl-item .item {
    height: clamp(300px, 46vw, 420px) !important;
    min-height: 300px !important;
  }
  .an-slide-inner { padding: 0 70px; }

  .an-grid-3,
  .an-grid-4,
  .an-grid-5 { grid-template-columns: repeat(2, 1fr); }
  .an-stats-grid { grid-template-columns: repeat(3, 1fr); }
  .an-stat { border-right: 0; }
  .an-welcome-grid > * { min-width: 0; }
}

/* ---------- Home page: mobile ---------- */
@media (max-width: 767px) {
  /* slides: same height, picture slides show the whole picture */
  .banner .banner-slider .item,
  .banner .banner-slider .owl-item .item {
    height: 300px !important;
    min-height: 300px !important;
  }
  .banner .banner-slider .owl-item .item.hero-overlay {
    background-size: contain !important;
    background-color: #0b1a2c;
  }
  .an-slide-inner { padding: 0 52px; }
  .an-slide-inner h2 { font-size: 30px; line-height: 1.1; }
  .an-slide .an-btn { padding: 8px 16px; font-size: 14px; }
  .an-slide .an-btn.ghost { display: none; }
  .an-slide-big { display: none; }

  .an-section { padding: 44px 0; }
  .an-head { margin-bottom: 28px; }
  .an-card { padding: 24px 20px; }
  .an-card h3 { font-size: 26px; }
  .an-why > div { padding: 28px 22px; }
  .an-contact > div { padding: 22px; }
  .an-video { padding: 0 0 12px 12px; }
  .an-rank .badge-no { flex: 0 0 auto; width: 120px; }
  .image-wrapper { min-height: 180px; }
  .an-stat strong { font-size: 36px; }
  .an-stat span { font-size: 13px; }
}

/* ---------- Home page: small phones ---------- */
@media (max-width: 575px) {
  .an-grid-3 { grid-template-columns: 1fr; }
  .an-grid-5 { grid-template-columns: repeat(2, 1fr); }
  .an-grid-5 .an-tile { min-height: 64px; padding: 14px 16px; font-size: 14px; }
  .an-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .an-ticker-label { padding: 9px 12px; font-size: 16px; }
  .an-ticker marquee { font-size: 15px !important; padding: 9px 0; }
  .an-cta { padding: 44px 0; }
  .an-cta h2 { font-size: 30px; }
  .an-slide-inner { padding: 0 48px; }
  .an-slide-inner h2 { font-size: 27px; }
}