/* ========================================================================
   Site Brand 2026-09-04 — load LAST (new filename = cache bypass)
   Header = Footer navy #0B1E3F
   Menu capsule = White
   Active / Hover / Contact = Orange #FF6600
   ======================================================================== */

:root {
  --brand-navy: #0B1E3F;
  --brand-orange: #FF6600;
  --brand-orange-hover: #ff781a;
}

/* Kill any light-blue / gradient header leftovers */
.tm-menu-box,
.tm-menu-box.uk-active,
.over-wrap > .tm-menu-box {
  background: #0B1E3F !important;
  background-color: #0B1E3F !important;
  background-image: none !important;
  border-bottom: none !important;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.4) !important;
  width: 100% !important;
  max-width: none !important;
  left: 0 !important;
  right: 0 !important;
}

.tm-navbar,
.tm-navbar.uk-active,
.uk-navbar,
.uk-navbar.uk-active,
.tm-menu-box .uk-sticky-placeholder {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  width: 100% !important;
  max-width: none !important;
  left: 0 !important;
}

.tm-navbar .uk-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  gap: 12px !important;
  box-sizing: border-box !important;
}

/* Prevent UIkit clearfix pseudos from becoming flex items (pushes hamburger inward) */
.tm-navbar .uk-container:before,
.tm-navbar .uk-container:after,
.tm-menu-box .uk-container:before,
.tm-menu-box .uk-container:after {
  display: none !important;
  content: none !important;
}

/* Soften logo size before capsule disappears */
@media (max-width: 1400px) and (min-width: 1025px) {
  .tm-logo .logo-title {
    font-size: 16px !important;
    letter-spacing: 0.02em !important;
  }

  .tm-logo > img {
    height: 40px !important;
    max-width: 80px !important;
    width: auto !important;
  }

  .header-right-nav .nav-capsule-bar > li > a,
  ul.nav-capsule-bar > li > a {
    padding: 8px 10px !important;
    font-size: 12px !important;
  }
}

.tm-logo {
  display: flex !important;
  align-items: center !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: hidden !important;
  gap: 10px !important;
  position: relative !important;
  z-index: 1 !important;
}

.tm-logo > span,
.tm-logo .logo-title,
.tm-menu-box .tm-logo > span {
  color: #ffffff !important;
  text-shadow: none !important;
  writing-mode: horizontal-tb !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
}

.tm-logo > img {
  flex-shrink: 0 !important;
  height: 48px !important;
  width: auto !important;
  max-width: 96px !important;
  object-fit: contain !important;
}

.header-right-nav {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 2 !important;
  margin-left: 12px !important;
}

.header-right-nav .nav-capsule-bar,
ul.nav-capsule-bar,
.tm-menu-box ul.nav-capsule-bar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  float: none !important;
  width: auto !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border-radius: 9999px !important;
  padding: 5px 6px !important;
  margin: 0 !important;
  list-style: none !important;
  gap: 2px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28) !important;
  border: none !important;
}

.header-right-nav .nav-capsule-bar > li,
ul.nav-capsule-bar > li {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.header-right-nav .nav-capsule-bar > li:before,
.header-right-nav .nav-capsule-bar > li:after,
ul.nav-capsule-bar > li:before,
ul.nav-capsule-bar > li:after {
  display: none !important;
  content: none !important;
}

.header-right-nav .nav-capsule-bar > li > a,
ul.nav-capsule-bar > li > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  float: none !important;
  height: auto !important;
  min-height: 36px !important;
  line-height: 1.2 !important;
  padding: 8px 14px !important;
  color: #0B1E3F !important;
  background: transparent !important;
  background-color: transparent !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  text-decoration: none !important;
  border-radius: 9999px !important;
  white-space: nowrap !important;
}

.header-right-nav .nav-capsule-bar > li > a:hover,
.header-right-nav .nav-capsule-bar > li > a:focus,
ul.nav-capsule-bar > li > a:hover,
ul.nav-capsule-bar > li > a:focus,
.header-right-nav .nav-capsule-bar > li.uk-active > a,
ul.nav-capsule-bar > li.uk-active > a {
  background: #FF6600 !important;
  background-color: #FF6600 !important;
  color: #ffffff !important;
}

a.btn-header-contact,
.btn-header-contact {
  background: #FF6600 !important;
  background-color: #FF6600 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 9999px !important;
  box-shadow: 0 3px 10px rgba(255, 102, 0, 0.45) !important;
}

a.btn-header-contact:hover,
.btn-header-contact:hover {
  background: #ff781a !important;
  color: #ffffff !important;
}

.uk-navbar-toggle.header-hamburger {
  background: #ffffff !important;
}

.uk-navbar-toggle.header-hamburger .hamburger-icon span {
  background: #0B1E3F !important;
}

.uk-offcanvas-bar {
  background: #0B1E3F !important;
}

.uk-offcanvas-bar .uk-nav-offcanvas > li.uk-active > a,
.uk-offcanvas-bar .uk-nav-offcanvas > li:hover > a {
  background: #FF6600 !important;
  color: #ffffff !important;
}

.head-wrap,
.site-footer {
  background: #0B1E3F !important;
  background-color: #0B1E3F !important;
}

/* Preloader: never block the page */
.preloader {
  background: #0B1E3F !important;
  pointer-events: none !important;
  transition: opacity 0.35s ease, visibility 0.35s ease !important;
}

.preloader.is-hidden,
body.is-loaded .preloader {
  opacity: 0 !important;
  visibility: hidden !important;
  display: none !important;
}

/* iPad (1024px) and below → hamburger */
@media (max-width: 1024px) {
  .header-right-nav .nav-capsule-bar,
  .tm-menu-box .header-right-nav .nav-capsule-bar,
  .tm-menu-box ul.nav-capsule-bar,
  ul.nav-capsule-bar,
  .header-right-nav .btn-header-contact,
  .tm-menu-box .btn-header-contact,
  a.btn-header-contact {
    display: none !important;
  }

  .tm-navbar .uk-container,
  .tm-menu-box .tm-navbar .uk-container {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    padding: 10px 12px 10px 16px !important;
    min-height: 56px;
    box-sizing: border-box !important;
  }

  .header-right-nav {
    margin-left: auto !important;
    margin-right: 0 !important;
    flex: 0 0 auto !important;
  }

  .uk-navbar-toggle.header-hamburger,
  .tm-menu-box .uk-navbar-toggle.header-hamburger,
  .header-right-nav .uk-navbar-toggle.header-hamburger {
    display: inline-flex !important;
    float: none !important;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative !important;
    right: 0 !important;
    left: auto !important;
    z-index: 5 !important;
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
  }

  /* Fit full club name into remaining width (avoid menu overlap) */
  .tm-logo .logo-title {
    font-size: clamp(10px, calc((100vw - 148px) / 17), 15px) !important;
    letter-spacing: 0 !important;
    font-weight: 800 !important;
    text-overflow: clip !important;
    max-width: 100% !important;
  }

  .tm-logo > img {
    height: 34px !important;
    max-width: 68px !important;
    width: auto !important;
    flex-shrink: 0 !important;
    object-fit: contain !important;
  }

  .uk-offcanvas-bar .offcanvas-logo span {
    writing-mode: horizontal-tb !important;
    white-space: normal !important;
    line-height: 1.35 !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
  }
}

@media (max-width: 480px) {
  .tm-logo .logo-title {
    font-size: clamp(10px, calc((100vw - 140px) / 17), 12px) !important;
    letter-spacing: 0 !important;
  }

  .tm-logo > img {
    height: 30px !important;
    max-width: 58px !important;
    width: auto !important;
  }

  .tm-navbar .uk-container {
    padding: 8px 10px !important;
    gap: 8px !important;
  }

  .header-right-nav {
    margin-left: 10px !important;
  }
}
