/*==============================
  Variables: Base Color Palette
==============================*/
:root {
  --base-color: #006f71;
  --dark-gray: #2e3436;
  --very-light-gray: #eceff1;
  --medium-gray: #7c898d;
  --secondary-color: #a27752;
  --tertiary-color: #db7705;
  --alternate-color: #111111;
}
/*==============================
  General
==============================*/
body {
  padding-top: 70px;
}
a {
  color: var(--sister-blue);
}
a:hover {
  color: var(--sister-pink);
}
.btn.btn-link:hover {
  color: var(--sister-pink);
}
footer .nav-link {
  color: var(--sister-blue);
}
footer .nav-link:hover {
  color: var(--sister-pink) !important;
}
.sticky-wrap div,
.sticky-wrap span,
.sticky-wrap p,
.sticky-wrap a {
  color: var(--sister-blue) !important;
}
.sticky-wrap a:hover {
  color: var(--sister-pink) !important;
}
.text-alternate-color {
  color: var(--alternate-color);
}
.text-secondary-color {
  color: var(--secondary-color);
}
/* neutral pipe/separator for odds rows */
.odds-sep {
  color: var(--bs-body-color);
  opacity: 0.6;
}
/* Hide border on mobile */
@media (max-width: 767.98px) {
  .border-mobile-none {
    border: none !important;
  }
  .fs-md-12 {
    font-size: 12px !important;
  }
}
/* Prevent header wrap on narrow columns */
.th-nowrap {
  white-space: nowrap;
}
.entry-image.alignleft.pb-3.body-entry img {
  padding-right: 20px;
  max-width: 35%;
}
.player-name {
  font-size: 12px;
  font-weight: 600;
  color: #333; /* or your base color */
}
.footer-demo ul li {
  list-style: none;
}
/*==============================
  Rankings
==============================*/
/* Team Logos and QBs Styles */
.team-logos,
.qbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  background-color: #ffffff;
}
.team-logos img,
.qbs img {
  width: 60px;
  height: auto;
  display: block;
  margin: 0 auto;
  background: transparent !important;
}
.qbs img {
  width: 80px;
}
/* Team and QB Wrapper (common for both teams and QBs) */
.team-logo-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  text-align: center;
}
/* QB and Team Badge Styles */
.team-logo-wrapper .badge {
  margin-top: 5px; /* Ensure the badge is placed below the image */
  background-color: #ffcc00;
  color: black;
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 16px;
  font-weight: bold;
  width: 100%;
  text-align: center;
}
.qbs .team-logo-wrapper .badge {
  top: 80px;
}
/* Player Name Styling */
.player-name {
  font-weight: bold;
  font-size: 12px;
  text-align: center;
  position: relative;
  top: -10px;
}
/* Responsive Styles */
@media (max-width: 768px) {
  .team-logos,
  .qbs {
    justify-content: center;
  }
  .team-logos img,
  .qbs img {
    margin: 5px auto;
    width: 35px;
  }
  .tier-name,
  .team-logos {
    text-align: center;
  }
}
@media (max-width: 575px) {
  .accordion-style-05 .accordion-item {
    padding: 18px 20px 20px 23px;
  }
  td.tier-name,
  .text-very-small {
    font-size: 14px;
  }
  .team-logo-wrapper .badge {
    font-size: 11px;
  }
  .tab-style-07 .nav-tabs .nav-item .nav-link {
    padding: 15px;
  }
}
/*==============================
  Breadcrumbs
==============================*/
.breadcrumb-item {
  color: var(--white);
  text-transform: uppercase;
}
.breadcrumb-item.active {
  color: var(--white);
  font-weight: 700;
}
/*==============================
  Footer
==============================*/
/*==============================
  Footer
==============================*/
footer .footer-logo img {
  max-height: 80px;
}
/*==============================
  Navbar + Brand Styles
==============================*/
/* Restore Bootstrap gutter space for header containers */
.header-with-topbar nav.navbar > .container,
.header-with-topbar nav.navbar > .container-fluid {
  padding-left: var(--bs-gutter-x, 0.75rem);
  padding-right: var(--bs-gutter-x, 0.75rem);
}
.header-light .header-icon .icon > a {
  color: var(--white);
}
i.bi.bi-caret-down-fill.ms-1 {
  font-size: 10px;
}
.navbar-nav > .nav-item > .nav-link {
  white-space: nowrap;
}
header .navbar-brand img {
  max-height: 80px;
}
a.navbar-brand img {
  max-width: 150%;
}
@media only screen and (max-width: 767px) {
  a.navbar-brand img {
    max-width: 80%;
  }
}
header.sticky .navbar-brand {
  padding: 5px 0;
}
.navbar .navbar-nav .nav-link {
  color: var(--base-color) !important;
}
/* --- NAVBAR ITEM SPACING --- */
.navbar-nav > .nav-item {
  margin-left: 12px;
  margin-right: 12px;
}
.navbar-nav > .nav-item:first-child {
  margin-left: 0;
}
.navbar-nav > .nav-item:last-child {
  margin-right: 0;
}
@media (max-width: 991.98px) {
  .navbar-nav > .nav-item {
    margin-left: 0;
    margin-right: 0;
  }
}
/*==============================
  Button Styles
==============================*/
.btn {
  font-weight: 400 !important;
}
.btn.btn-sister-blue {
  background-color: var(--sister-blue);
  color: var(--white);
}
.btn.btn-sister-blue:hover {
  background-color: var(--white);
  color: var(--sister-blue);
}
.btn.btn-sister-pink {
  background-color: var(--sister-pink);
  color: var(--white);
}
.btn.btn-sister-pink:hover {
  background-color: var(--white);
  color: var(--sister-pink);
}
.btn.btn-dark-gray:hover,
.btn.btn-dark-gray:active,
.btn.btn-transparent-light-gray:hover,
.btn.btn-transparent-light-gray:active,
.btn.btn-box-shadow.btn-base-color:hover,
.btn.btn-box-shadow.btn-base-color:active {
  background-color: var(--alternate-color);
  border-color: var(--alternate-color);
  color: var(--white);
}
/*==============================
  Text Utilities
==============================*/
.text-outline-color-base-color {
  -webkit-text-stroke-color: var(--secondary-color);
}
i.bi.toggle-icon.bi-plus,
i.bi.bi-dash.toggle-icon {
  color: var(--secondary-color);
}
.accordion-style-05 .accordion-item.active-accordion .number {
  -webkit-text-fill-color: var(--alternate-color);
  -webkit-text-stroke-color: var(--alternate-color);
}
/*==============================
  Background Utilities
==============================*/
.bg-alternate-color {
  background-color: var(--alternate-color);
}
.bg-secondary-color {
  background-color: var(--secondary-color);
}
/*==============================
  Hover Effects
==============================*/
.hover-box.dark-hover:hover i {
  color: var(--alternate-color) !important;
  -webkit-text-stroke-color: var(--white);
}
.hover-box.dark-hover:hover span:not(.btn-double-text) {
  color: var(--tertiary-color) !important;
  -webkit-text-stroke-color: var(--white);
}
/*==============================
  Overlay Layers
==============================*/
.transparent-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(210, 210, 210, 0.3); /* 70% transparency */
  z-index: 2; /* Covers background, under content */
}
.background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(219, 119, 5, 0.4); /* Adjust opacity/color */
  z-index: 1; /* Behind content, above background */
  pointer-events: none;
}
.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--alternate-color);
  opacity: 0.6; /* Adjust if needed */
  z-index: 1; /* Sits behind number but above background image */
  pointer-events: none;
}
.cover-background span {
  position: relative;
  z-index: 2;
}
/*==============================
  Section Positioning Layer
==============================*/
section.position-relative > .container,
section.position-relative > .bg-base-color,
section.position-relative figure,
section.position-relative .col-xxl-5 {
  position: relative;
  z-index: 2;
}
/*==============================
  About Us Grid
==============================*/
.bg-sliding-line {
  background-image: linear-gradient(
    135deg,
    transparent 45%,
    #d1b9b2 45%,
    #d1b9b2 55%,
    transparent 0
  );
  background-size: 5px 5px;
}
/*==============================
  Menu Dropdown
==============================*/
/* 1) Position the 2nd-level submenu */
.dropdown-submenu {
  position: relative;
}
.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-left: 0.2rem;
  z-index: 1056; /* sit above parent menu */
}
/* 2) Fix clipping ONLY while the parent dropdown is open */
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 > .dropdown-menu {
  overflow: hidden; /* default (closed) */
}
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02.show > .dropdown-menu {
  overflow: visible; /* when open, let submenu spill out */
}
/* 3) Optional: prevent label wrapping (e.g., “QB Tiers”) */
.dropdown-menu > li > a {
  white-space: nowrap;
}
/* position the 2nd-level submenu */
.dropdown-submenu {
  position: relative;
}
.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-left: 0.2rem;
  z-index: 1056;
  display: none; /* safety in case theme overrides Bootstrap */
}
.dropdown-submenu > .dropdown-menu.show {
  display: block;
}
/* clip when closed… */
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 > .dropdown-menu {
  overflow: hidden;
}
/* …but allow spill ONLY when the menu UL is open */
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 > .dropdown-menu.show {
  overflow: visible !important; /* bump specificity; override theme */
}
.tab-style-05 .nav-tabs .nav-item .nav-link {
  padding: 0;
}
.tab-style-05 .nav-tabs .nav-item .nav-link.active {
  background-color: var(--alternate-color);
}
/*==============================
  Sidebar (scoped to .right-side-bar)
==============================*/
/* 0) Optional: control the offset from one place */
:root {
  --sticky-offset: 100px;
}
/* 1) Ensure equal-height columns so the sidebar's parent is tall enough */
.right-side-bar .row {
  align-items: stretch !important;
}
/* 2) Let the sidebar column stretch with the row */
aside.sidebar {
  align-self: stretch !important;
}
/* 3) Sticky lives on the inner box only */
.sidebar-inner.sticky-sidebar {
  position: sticky;
  top: var(--sticky-offset);
  z-index: 100;
}
/* 4) Safety: make sure nothing in this section clips the sticky element */
.right-side-bar .container,
.right-side-bar .row {
  overflow: visible !important;
}
/* 5) If your theme adds weird alignment on the article column, neutralize it */
.right-side-bar .blog-standard {
  align-self: auto;
}
/* 6) Optional: disable sticky on smaller screens */
@media (max-width: 991.98px) {
  .sidebar-inner.sticky-sidebar {
    position: static;
    top: auto;
  }
}
/* Make sure floats inside the article don't collapse the column height */
.right-side-bar .blog-standard::after {
  content: "";
  display: block;
  clear: both;
}
/*==============================
  Sidebar (scoped to .right-side-bar)
==============================*/
/* control the offset in one place */
:root {
  --sticky-offset: 100px;
}
/* equal-height columns so aside stretches to article height */
.right-side-bar .row {
  align-items: stretch !important;
}
/* make sure the aside itself can stretch */
aside.sidebar {
  align-self: stretch !important;
}
/* sticky lives on the inner box */
.sidebar-inner.sticky-sidebar {
  position: sticky;
  top: var(--sticky-offset);
  z-index: 100;
}
/* don't let the section/container clip the sticky element */
.right-side-bar .container,
.right-side-bar .row {
  overflow: visible !important;
}
.top-space-margin {
  margin-top: 56px;
}
/* optional: disable on mobile */
@media (max-width: 991.98px) {
  .sidebar-inner.sticky-sidebar {
    position: static;
    top: auto;
  }
}
/*==============================
Search Form
==============================*/
.search-form-wrapper .search-form {
  background-color: var(--sister-blue);
}
.search-input::placeholder {
  color: #fff !important;
  opacity: 1; /* fully opaque, some browsers default to faded */
}
/*==============================
  Contact Page Form
==============================*/
.contact-form-style-03 {
  margin-top: -100px;
}
@media (max-width: 991px) {
  .contact-form-style-03 {
    margin-top: 0;
  }
}
/*==============================
  Calendar
==============================*/
.calendar-responsive {
  position: relative;
  width: 100%;
  padding-bottom: 75%; /* Default ratio (4:3) */
  height: 0;
  overflow: hidden;
}
.calendar-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Optional: Force a taller calendar height on mobile */
@media (max-width: 767px) {
  .calendar-responsive {
    padding-bottom: 120%; /* Makes iframe taller on small screens */
  }
}