/*==============================
  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;
  /* This file began life as Sister of Sincerity's stylesheet and still
     references its palette names below. They were never defined here, so
     every rule using them silently fell back (e.g. the search overlay's
     panel rendered transparent). Map them onto the KapoCast palette. */
  --sister-blue: #006f71;
  --sister-pink: #db7705;
}
/*==============================
  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;
  }
}
/*==============================
Breadcrumb bar — full bleed
==============================*/
/* The sticky breadcrumb bar sits inside the box-layout wrapper; stretch it
   to the viewport edges (body overflow-x:clip absorbs the scrollbar sliver). */
#loc-scroll-bc {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
/*==============================
Search Form
==============================*/
.search-form-wrapper .search-form {
  background-color: var(--sister-blue);
}
/* Teal panel needs light text — the theme defaults are dark-on-white. */
.search-form-wrapper .search-form h2,
.search-form-wrapper .search-form .search-input,
.search-form-wrapper .search-form .search-button {
  color: #fff !important;
}
.search-form-wrapper .search-form .search-input {
  border-bottom-color: rgba(255, 255, 255, 0.4) !important;
}
.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 */
  }
}

/*==============================
  Icon circles
==============================*/
/* Links default to --sister-blue (teal); inside teal icon circles that made
   the arrow glyphs invisible. Force white. */
.circle-box a, .circle-box a i, .circle-box i { color: #fff !important; }