/**
 * WMFL Responsive styles
 */

/* ===== Muse layout overrides ===== */
#pu130 {
  width: 100% !important;
  margin-left: 0 !important;
  overflow: hidden;
}

#u659-45 {
  margin-top: 40px !important;
  left: 0 !important;
  margin-right: 0 !important;
  width: auto !important;
  max-width: 900px;
  padding: 0 20px;
}

#page_position_content {
  margin-top: 0 !important;
}

/* ===== New header ===== */
#wmfl-header {
  background: #dc262a;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  /* No z-index here — keeping this a non-stacking context so the absolutely-positioned
     dropdown menus (z-index: 1001) live in the root stacking context and correctly
     paint above page content like #tableContainer (position: relative, z-index: auto). */
  margin-top: 50px;
}

.wmfl-header-top {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 0 20px;
  min-height: 44px;
  flex-wrap: wrap;
}

.wmfl-brand {
  flex-shrink: 0;
  margin-right: 16px;
  position: relative;
  z-index: 1002;
  align-self: center;
  margin-top: -52px;
  margin-bottom: -52px;
}

.wmfl-logo {
  height: 155px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}

/* ===== Nav container (display overridden by media queries) ===== */
.wmfl-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px 4px;
  flex: 1;
  min-width: 0;
}

/* Shared style for all nav items and dropdown toggles */
.wmfl-nav-link,
.wmfl-dropdown-toggle {
  color: #ffffff;
  text-decoration: none;
  font-family: 'Oswald', Arial, Helvetica, sans-serif;
  font-size: 19px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 12px;
  border-radius: 4px;
  text-align: center;
  white-space: normal;
  line-height: 1.2;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Override Muse a:link / a:visited which have higher specificity than a class alone */
a.wmfl-nav-link:link,
a.wmfl-nav-link:visited {
  color: #ffffff;
  text-decoration: none;
}

a.wmfl-nav-link:hover,
.wmfl-dropdown-toggle:hover {
  background: rgba(0, 0, 0, 0.15);
  color: #ffe0e0;
  text-decoration: none;
}

a.wmfl-nav-link:active {
  color: #ffffff;
  text-decoration: none;
}

/* ===== Active page highlight ===== */
.wmfl-nav-link.active,
a.wmfl-nav-link.active:link,
a.wmfl-nav-link.active:visited {
  background: rgba(0, 0, 0, 0.25);
  color: #ffffff;
  text-decoration: none;
}

.wmfl-dropdown-toggle.active {
  background: rgba(0, 0, 0, 0.25);
}

.wmfl-dropdown-menu a.active,
.wmfl-dropdown-menu a.active:link,
.wmfl-dropdown-menu a.active:visited {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

/* ===== Dropdown ===== */
.wmfl-dropdown {
  position: relative;
}

.wmfl-dropdown-toggle {
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1.3;
}

.wmfl-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #b71c1c;
  min-width: 200px;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  z-index: 1001;
  flex-direction: column;
}

.wmfl-dropdown.is-open .wmfl-dropdown-menu {
  display: flex;
}

.wmfl-dropdown-menu a,
.wmfl-dropdown-menu a:link,
.wmfl-dropdown-menu a:visited {
  color: #ffffff;
  text-decoration: none;
  font-family: 'Oswald', Arial, Helvetica, sans-serif;
  font-size: 17px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: block;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.wmfl-dropdown-menu a:first-child {
  border-top: none;
}

.wmfl-dropdown-menu a:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffe0e0;
  text-decoration: none;
}

/* ===== Hamburger button (hidden by default, shown via media query) ===== */
.wmfl-hamburger {
  display: none;
  background: none;
  border: 2px solid #ffffff;
  color: #ffffff;
  font-size: 24px;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: auto;
  flex-shrink: 0;
  line-height: 1;
}

/* ===== Page sub-header (title bar + controls like year selectors) ===== */
.page-subheader {
  background: #f5f5f5;
  border-bottom: 2px solid #dc262a;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.page-subheader h1 {
  margin: 0;
  /* Shift the title right so the logo that hangs below the nav bar doesn't cover it.
     The offset is applied to h1 only (not the whole flex container) so that year/season
     selectors remain naturally right-aligned via justify-content: space-between.
     Logo right edge ≈ 119px when header is full-width (≤1200px viewport). */
  margin-left: 105px;
  font-family: 'Oswald', Arial, Helvetica, sans-serif;
  font-size: 24px;
  font-weight: 600;
  color: #333;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* As viewport widens above 1200px the header-top is centered (max-width:1200px),
   which pushes the logo right. Logo right edge = (vw-1200)/2 + 119px. */
@media screen and (min-width: 1201px) { .page-subheader h1 { margin-left: 150px; } }
@media screen and (min-width: 1301px) { .page-subheader h1 { margin-left: 175px; } }
@media screen and (min-width: 1401px) { .page-subheader h1 { margin-left: 200px; } }

/* >1500px: header-top fills full width; logo starts at x=16px, width 129px → right edge 161px */
@media screen and (min-width: 1501px) { .page-subheader h1 { margin-left: 145px; } }

/* Modern browsers: smooth interpolation instead of steps */
@supports (margin-left: max(1px, 2px)) {
  .page-subheader h1 {
    margin-left: max(105px, calc((100vw - 1200px) / 2 + 105px));
  }
  @media screen and (min-width: 1501px) {
    .page-subheader h1 { margin-left: 145px; }
  }
}

/* Pages where .page-subheader sits inside #tableContainer (schedule, stats, standings):
   the container is already centered so the logo overlaps much less — use a smaller offset.
   80px clears the logo at all medium viewports (700-1500px). At >1500px the container
   is far enough from the viewport edge that the logo doesn't reach it at all.
   At mobile (≤700px) the logo is small and the page-subheader stacks vertically, so reset. */
#tableContainer .page-subheader h1 { margin-left: 80px; }
@media screen and (max-width: 700px) {
  #tableContainer .page-subheader h1 { margin-left: 0; }
}
@media screen and (min-width: 1501px) {
  #tableContainer .page-subheader h1 { margin-left: 0; }
}

.page-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.page-controls label {
  font-family: 'Oswald', Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #555;
  text-transform: uppercase;
}

.page-controls select {
  font-family: 'Oswald', Arial, Helvetica, sans-serif;
  font-size: 14px;
  padding: 4px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
}

/* ===== Responsive modes ===== */

/* DEFAULT (large screens >1500px): show individual items, hide grouped dropdowns.
   Below that, 11 top-level links + logo do not fit in the header — use grouped nav. */
.wmfl-grouped {
  display: none !important;
}

.wmfl-expanded {
  display: inline-block;
}

/* Wide desktop: hide grouped duplicates and give the bar the full width so ~11 links fit. */
@media screen and (min-width: 1501px) {
  #wmfl-header .wmfl-nav .wmfl-dropdown.wmfl-grouped {
    display: none !important;
  }

  .wmfl-header-top {
    max-width: none;
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }

}

/* ===== Base responsive rules ===== */
html {
  overflow-x: hidden;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  width: 100%;
  min-width: 0 !important;
  /* Ensures the body is always at least viewport height so that absolutely-positioned
     dropdowns (which extend below the header) are never clipped by the body's
     overflow-x: hidden block-formatting context on short pages. */
  min-height: 100vh;
}

/* Inner pages: modest horizontal inset for main content (header stays edge-to-edge).
   Home + rules use body.wmfl-layout-full — no side gutter. */
body:not(.wmfl-layout-full) > *:not(#wmfl-header) {
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
}

img.wmfl-logo {
  max-width: none;
}

#page {
  max-width: 100%;
  width: 100% !important;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

/* ===== DataTables base responsive ===== */
#tableContainer {
  width: 100%;
  min-width: 0 !important;
  position: relative;
}

.table-scroll-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

.table-scroll-wrapper table.dataTable,
.table-scroll-wrapper > table {
  min-width: 100%;
}

.dataTables_scrollBody {
  -webkit-overflow-scrolling: touch;
}

.dataTables_wrapper {
  overflow: visible;
}

.dataTables_wrapper .dataTables_filter input {
  font-size: 14px;
  padding: 4px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.dataTables_wrapper .dataTables_length select {
  font-size: 14px;
  padding: 4px 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.dataTables_wrapper .dataTables_info {
  font-size: 13px;
  color: #666;
  padding-top: 8px;
}

.dataTables_wrapper .dataTables_paginate {
  padding-top: 8px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 4px 10px !important;
  font-size: 13px;
}

/* Polished table row stripes */
table.dataTable tbody tr:hover {
  background-color: rgba(0, 123, 255, 0.06);
}

table.dataTable thead,
.table-scroll-wrapper > table > thead {
  background-color: #DE2429;
  color: #fff;
}

table.dataTable thead td,
table.dataTable thead th,
.table-scroll-wrapper > table > thead td,
.table-scroll-wrapper > table > thead th {
  color: #fff;
  font-family: 'Oswald', Arial, Helvetica, sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-bottom: none;
}

/* Leader tables styling */
.leaders-grid td {
  vertical-align: top;
}

.leaderTable {
  border-collapse: collapse;
}

.leaderTable td {
  border-bottom: 1px solid #eee;
  padding: 3px 6px;
}

.leaders-grid > tbody > tr > td,
.leaders-grid > tr > td {
  background: #f8f9fa;
  border-radius: 6px;
  padding: 10px;
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
  background-color: transparent !important;
}

table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
  background-color: rgba(0,0,0,0.15) !important;
}

@media screen and (max-width: 1500px) {
  /* MEDIUM: hide individual items, show grouped dropdowns */
  .wmfl-expanded {
    display: none !important;
  }

  /* Stack toggle + menu; stretch so labels can use full cell width for centered text */
  .wmfl-grouped {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
  }

  .wmfl-logo {
    height: 100px;
    width: auto;
  }

  .wmfl-brand {
    margin-top: -28px;
    margin-bottom: -28px;
  }

  #wmfl-header {
    margin-top: 30px;
  }

  .wmfl-nav {
    gap: 4px 2px;
    align-items: stretch;
  }

  /* Equal columns so each label sits in a centered band (grouped + Home + Trash Talk) */
  .wmfl-nav > .wmfl-nav-link,
  .wmfl-nav > .wmfl-dropdown {
    flex: 1 1 0%;
    min-width: 0;
  }

  /*
   * Row flex on the control makes a single shrink-wrapped text box — wrapped lines look left-aligned.
   * Column + stretch gives the text box full width so text-align:center applies to every line.
   */
  .wmfl-nav-link,
  .wmfl-dropdown-toggle {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
  }

  /* Two-class specificity (0,2,0) beats .wmfl-nav-link (0,1,0) above — keep expanded hidden */
  .wmfl-nav-link.wmfl-expanded {
    display: none !important;
  }

  .wmfl-dropdown > .wmfl-dropdown-toggle {
    flex: 1 1 auto;
    align-self: stretch;
    justify-content: center;
    text-align: center;
    min-height: 0;
  }

  #tableContainer {
    min-width: 0 !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  table.dataTable td,
  table.dataTable th {
    font-size: 13px;
    padding: 6px 8px;
  }

  #page {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }
}

@media screen and (max-width: 768px) {
  #page {
    width: 100% !important;
    max-width: 100%;
  }

  #u659-45 {
    width: 100% !important;
    max-width: 100%;
    padding: 0 12px;
  }
}

@media screen and (max-width: 700px) {
  /* SMALL: compact inline nav, no hamburger.
     Equal-width cells so nothing overflows; text wraps at word boundaries within each cell. */
  .wmfl-hamburger {
    display: none !important;
  }

  .wmfl-header-top {
    padding: 0 6px;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
  }

  /* Logo */
  .wmfl-logo {
    height: 46px;
    width: auto;
  }

  .wmfl-brand {
    flex-shrink: 0;
    align-self: center;
    margin-top: -6px;
    margin-bottom: -6px;
    margin-right: 4px;
  }

  #wmfl-header {
    margin-top: 8px;
  }

  /* Ensure grouped dropdowns show (expanded items are hidden via .wmfl-nav-link.wmfl-expanded below) */
  .wmfl-grouped {
    display: flex !important;
  }

  /* Nav: one row, 5 equal columns */
  .wmfl-nav {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    flex: 1 1 auto;
    padding: 2px 0;
    gap: 2px;
  }

  /* Equal-width cells; each is as tall as the tallest sibling */
  .wmfl-nav > .wmfl-nav-link,
  .wmfl-nav > .wmfl-dropdown {
    flex: 1 1 0%;
    align-self: stretch;
  }

  /* Tighter type; keep column flex + stretch from max-width:1500px for true centered wraps */
  .wmfl-nav-link,
  .wmfl-dropdown-toggle {
    padding: 3px 5px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0px;
    white-space: normal;
    word-break: normal;
    line-height: 1.2;
    border-radius: 3px;
    border-top: none;
  }

  /* Two-class selector beats single-class .wmfl-nav-link above — keep expanded items hidden */
  .wmfl-nav-link.wmfl-expanded {
    display: none !important;
  }

  /* Dropdown wrapper: flex so button fills full cell height */
  .wmfl-dropdown {
    display: flex !important;
    align-items: stretch;
    position: relative;
  }

  /* Dropdown menus open downward */
  .wmfl-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: auto;
    min-width: 160px;
    max-width: min(260px, 90vw);
    background: #b71c1c;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    z-index: 1010;
  }

  .wmfl-dropdown-menu a,
  .wmfl-dropdown-menu a:link,
  .wmfl-dropdown-menu a:visited {
    padding: 10px 14px;
    font-size: 13px;
    white-space: nowrap;
  }

  .page-subheader {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 12px;
  }

  .page-subheader h1 {
    font-size: 20px;
    margin-left: 0;
  }

  /* DataTables mobile: compact cells, let scrollX handle overflow */
  table.dataTable td,
  table.dataTable th {
    font-size: 12px;
    padding: 5px 6px;
    white-space: nowrap;
  }

  table.dataTable thead td,
  table.dataTable thead th {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }

  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_length {
    float: none !important;
    text-align: left !important;
    margin-bottom: 8px;
  }

  .dataTables_wrapper .dataTables_filter input {
    width: 100%;
    box-sizing: border-box;
    margin-left: 0 !important;
    margin-top: 4px;
    display: block;
  }

  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    float: none !important;
    text-align: center !important;
    font-size: 12px;
  }

  .dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 3px 8px !important;
    font-size: 12px;
  }

  /* Stats leader tables: stack vertically on mobile */
  .leaders-grid {
    display: block !important;
    width: 100% !important;
  }

  .leaders-grid > tbody {
    display: block;
  }

  .leaders-grid > tbody > tr {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .leaders-grid > tbody > tr > td {
    display: block;
    text-align: center;
    white-space: normal;
  }

  .leaderTable {
    font-size: 12px !important;
    width: 100% !important;
    max-width: 400px;
    margin: 0 auto;
  }

  .leaderTable td,
  .leaderTable th {
    padding: 5px 8px !important;
  }

  /* Teams table compact */
  #teams td,
  #teams th {
    font-size: 11px;
    padding: 4px 5px;
  }
}