/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126 | public domain
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display:block; }
body { line-height:1; }
ol, ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; }
table { border-collapse:collapse; border-spacing:0; }

/* Global box-sizing */
*, *::before, *::after { box-sizing:border-box; }

/* Images (global) */
img{
  display:block;
  max-width:100%;
  height:auto;
  margin:0 auto 14px;
  border-radius:10px;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
}

/* =========================
   Brand tokens & base
   ========================= */
:root{
  --brand-red:#b51f29;
  --brand-blue:#0e2a5e;
  --brand-yellow:#ffd84d;
  --ink:#242424;
  --muted:#6b7280;
  --bg:#ffffff;
  --panel:#ffffff;
  --panel-alt:#f9fafb;
  --line:#e5e7eb;
  --shadow:0 6px 18px rgba(0,0,0,.08);
  --radius:14px;
  --radius-sm:10px;
  --transition:.18s ease;
}

html{ scroll-behavior:smooth; }
body{
  background:
    radial-gradient(1200px 600px at 90% -10%, rgba(181,31,41,.06), transparent),
    radial-gradient(900px 500px at -10% 20%, rgba(14,42,94,.06), transparent),
    var(--bg);
  font-family:'Raleway','Helvetica','Arial',sans-serif;
  font-size:16px; line-height:1.6; color:var(--ink);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Optional last-resort guard for stray overflow */
html, body { overflow-x:hidden; }

/* =========================
   Type
   ========================= */
h1,h2,h3{ font-weight:800; letter-spacing:.2px; color:var(--brand-blue); }
h1{
  font-family: SportsWorld, 'Raleway','Helvetica',sans-serif;
  font-size:clamp(2rem,2.5vw + 1rem,3rem);
  line-height:1.15;
  margin:18px 0 18px;
  text-shadow:0 2px 0 rgba(255,255,255,.7), 0 6px 14px rgba(14,42,94,.15);
}
#theText, .otherText{ max-width:820px; width:calc(100% - 32px); margin:0 auto; text-align:left; }
strong{ font-weight:800; }
em{ font-style:italic; }

/* =========================
   Links & buttons
   ========================= */
a{
  color:var(--brand-red);
  text-decoration:none;
  position:relative;
  transition:color var(--transition), text-underline-offset var(--transition);
  text-underline-offset:3px;
}
a:hover{ color:#951922; text-decoration:underline; text-decoration-thickness:2px; }
a:active{ color:#0a58ff; }

.filterbtn{
  cursor:pointer; display:inline-block;
  border:1px solid var(--line); padding:8px 12px; border-radius:var(--radius-sm);
  background:var(--panel-alt);
  transition:transform var(--transition), box-shadow var(--transition), background var(--transition);
  box-shadow:0 2px 6px rgba(0,0,0,.04);
}
.filterbtn:hover{ background:#fff; transform:translateY(-1px); box-shadow:var(--shadow); }

/* =========================
   Header / Nav (centered logo + split nav)
   ========================= */
#header{
  position:sticky; top:0; z-index:50; width:100%;
  background:linear-gradient(180deg,#f4f9ff 0%,#ffffff 100%);
  border-bottom:1px solid var(--line);
  box-shadow:0 3px 16px rgba(14,42,94,.08);
  display:flex; justify-content:center; align-items:center;
  gap:clamp(48px,7vw,120px);
  padding:14px clamp(16px,3vw,32px);
  padding-top:calc(14px + env(safe-area-inset-top));
  flex-wrap:nowrap; /* default: no wrap on wide screens */
}

/* Logo (width-based so it can shrink) */
#logo{ min-width:0; text-align:center; }
#logo img{
  width:clamp(180px,28vw,360px);
  height:auto !important;
  display:inline-block; background:transparent;
  border-radius:0 !important; box-shadow:none !important;
}

/* Left / right clusters */
.nav-left, .nav-right{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(28px,4.5vw,72px);
  min-width:0; /* allow shrinking */
}

/* Nav type */
#header a{
  font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  font-size:clamp(16px,1.2vw + .2rem,22px);
  line-height:1; color:#121212; padding:4px 0; text-decoration:none;
}
#header a:hover{ text-decoration:underline; background:transparent; }
#header a:visited, #header a:active{ color:#121212; }

/* Hide long address line if present */
#address{ display:none; }

/* Medium: allow wrap + reduce gaps so we never overflow */
@media (max-width:1100px){
  #header{ flex-wrap:wrap; gap:16px 32px; }
  .nav-left, .nav-right{
    flex:0 1 320px;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px 18px;
  }
  #header a{ font-size:15px; }
}

/* Tablet tweaks */
@media (max-width:1024px){
  .nav-left, .nav-right{ gap:clamp(18px,5vw,60px); }
}

/* ===== Mobile layout & spacing ===== */
@media (max-width:600px){
  #header{
    flex-direction:column;
    gap:8px;
    padding:12px 18px 18px;   /* side padding + extra bottom padding */
    margin-bottom:16px;       /* explicit space under the sticky header */
  }
  .nav-left, .nav-right{
    width:100%;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px 16px;
  }
  #header a{ font-size:15px; letter-spacing:.05em; padding:6px 4px; }
  /* ensure first block after header never tucks under */
  #header + *{ margin-top:8px; }
  h1{ display:block !important; font-size:150% !important; line-height:1.2; }
}

/* =========================
   Info / “bullhorn” callout
   ========================= */
#info{
  margin:28px auto;
  background:
    linear-gradient(
      135deg,
      rgba(14, 42, 94, 0.95),
      rgba(30, 85, 150, 0.85) 35%,
      rgba(85, 155, 215, 0.80) 100%
    ),
    url('bullhorn.png') no-repeat right 14px bottom 14px;
  background-size:auto, 88px 70px;
  border:1px solid rgba(255, 255, 255, 0.25);
  color:#ffffff;
  padding:22px;
  font-size:16px;
  line-height:1.7;
  max-width:820px;
  width:calc(100% - 32px);
  box-sizing:border-box;
  border-radius:var(--radius);
  box-shadow:0 10px 22px rgba(14, 42, 94, 0.22);
}
#info a { color:#ffd84d; }
#info a:hover { color:#fff; text-decoration:underline; }

/* =========================
   News card
   ========================= */
#news{
  color:var(--brand-blue);
  background:linear-gradient(180deg,#fff9d6 0%,#fff3a3 100%);
  border:1px solid #ffe57a; padding:20px;
  max-width:820px; width:calc(100% - 32px);
  margin:24px auto; font-size:16px; line-height:1.7;
  border-radius:var(--radius); box-shadow:var(--shadow);
}

/* =========================
   Content blocks / images
   ========================= */
#divbody{ margin:auto; text-align:center; }

.playersText{ font-size:14px; max-width:1200px; width:calc(100% - 32px) !important; margin:0 auto; }
.playerPhoto{ width:min(260px,46%); padding:12px; float:left; }
.boardPic{ float:left; text-align:center; padding:10px; width:min(360px,100%); font-size:14px; }

#games{
  max-width:1100px; width:calc(100% - 32px);
  margin:24px auto; border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;
}

.tickets{
  margin:auto; max-width:820px; width:calc(100% - 32px); height:540px;
  background:var(--panel); border:1px dashed var(--line); border-radius:var(--radius);
  background-image:url('images/loading.gif'); background-position:center center; background-repeat:no-repeat;
}

/* Footer */
#footer{
  position:static; width:100%;
  background:#1f2937; color:#f3f4f6; text-align:center;
  padding:16px; margin-top:36px; box-shadow:0 -6px 18px rgba(0,0,0,.08);
}
#footer a, #footer a:visited, #footer a:active{ color:#cbd5e1; text-decoration:underline; }
#footer a:hover{ color:#fff; text-decoration:none; }

/* =========================
   Forms & buttons
   ========================= */
input, textarea, select{
  padding:12px 14px; border:1px solid var(--line); border-radius:10px;
  background:#fff; color:var(--ink);
  transition:box-shadow var(--transition), border-color var(--transition);
}
input:focus, textarea:focus, select:focus{
  outline:none; border-color:var(--brand-blue);
  box-shadow:0 0 0 4px rgba(14,42,94,.12);
}

button, input[type="submit"], input[type="button"]{
  appearance:none; border:1px solid var(--brand-blue); background:var(--brand-blue);
  color:#fff; padding:10px 14px; border-radius:10px; font-weight:800; cursor:pointer;
  transition:transform var(--transition), box-shadow var(--transition), background var(--transition);
  box-shadow:0 2px 6px rgba(0,0,0,.06);
}
button:hover, input[type="submit"]:hover, input[type="button"]:hover{
  transform:translateY(-1px); box-shadow:var(--shadow); background:#0b2250;
}

/* Utility */
.lb-caption{ font-size:18px !important; }
#message{ margin:auto; color:var(--brand-red); font-weight:800; }

/* =========================
   Responsive extras
   ========================= */
@media (max-width:980px){
  #menu{ gap:12px; } /* legacy hook — safe to keep */
}
@media (max-width:820px){
  .playerPhoto{ width:50%; }
}
@media (max-width:520px){
  h1{ font-size:clamp(1.8rem,6vw,2.2rem); }
  .playerPhoto{ width:100%; }
  #info{ background-size:64px 52px; }
}

/* Motion safety */
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}

/* ===== Mobile fix: collapse header height ===== */
@media (max-width:600px){
  /* Stop the nav clusters from stretching vertically */
  .nav-left,
  .nav-right{
    flex: 0 0 auto;    /* override the earlier flex:1 1 320px */
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 14px;
  }

  #header{
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 16px 14px;
  }

  /* Make the logo a bit smaller on phones (optional) */
  #logo img{
    width: clamp(140px, 34vw, 180px);
    margin: 4px auto;
  }

  /* Slightly smaller nav text (optional) */
  #header a{
    font-size: 14px;
    padding: 4px 2px;
    letter-spacing: .05em;
  }
}

/* Phone header should not fill the screen */
@media (max-width:600px){
  #header{
    flex-direction: column;
    justify-content: flex-start;   /* stack tightly */
    align-items: center;
    gap: 6px !important;
    padding: 10px 16px 12px;
  }

  /* stop nav clusters from growing vertically */
  .nav-left,
  .nav-right{
    flex: 0 0 auto !important;   /* override the 1 1 320px */
    width: auto;
    max-width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 14px;
  }

  #logo img{
    width: clamp(140px, 40vw, 200px);
    margin: 4px auto 6px;
  }

  #header a{
    font-size: 14px;
    padding: 4px 2px;
    letter-spacing: .05em;
  }
}

/* 🔧 Phone fix: kill the 320px flex-basis that turns into height */
@media (max-width:600px){
  #header{
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 16px 12px !important;
  }

  /* Stop all header children from using a vertical flex-basis */
  #header .nav-left,
  #header .nav-right,
  #header #logo{
    flex: 0 0 auto !important;
    flex-basis: auto !important;   /* <-- removes 320px vertical basis */
    min-height: 0 !important;
  }

  #header .nav-left,
  #header .nav-right{
    width: auto !important;
    max-width: 100% !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px 14px !important;
  }

  #logo img{
    width: 180px !important;
    margin: 4px auto 6px !important;
  }

  #header a{
    font-size: 14px !important;
    padding: 4px 2px !important;
    letter-spacing: .05em !important;
  }
}

/* 🚑 Emergency mobile header shrink */
@media (max-width:600px){
  /* kill the giant gap + padding */
  #header{
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    padding: 8px 12px 10px !important;
  }

  /* remove the 320px flex-basis that becomes height on wrap */
  #header .nav-left,
  #header .nav-right,
  #header #logo{
    flex: 0 0 auto !important;
    flex-basis: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  /* compact menus */
  #header .nav-left,
  #header .nav-right{
    width: auto !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    gap: 10px 12px !important;
    justify-content: center !important;
  }

  /* smaller logo + text */
  #logo img{ width: 160px !important; height: auto !important; margin: 2px auto !important; }
  #header a{ font-size: 14px !important; line-height: 1 !important; padding: 4px 2px !important; letter-spacing: .05em !important; }
}

@media (max-width: 600px) {
  #info {
    background:
      linear-gradient(
        135deg,
        rgba(14, 42, 94, 0.95),
        rgba(30, 85, 150, 0.85) 35%,
        rgba(85, 155, 215, 0.80) 100%
      ) no-repeat center/cover,
      url('bullhorn.png') no-repeat right 14px bottom 14px;
    background-size: cover, 64px 52px; /* first is gradient, second is image */
  }
}


/* === Header tighten: keep single row until ~880px (desktop only) === */
@media (max-width:1100px) and (min-width:601px){
  #header{
    flex-wrap: nowrap !important;
    gap: clamp(16px, 4vw, 36px) !important;
    padding-left: clamp(12px, 3vw, 24px);
    padding-right: clamp(12px, 3vw, 24px);
  }
  #logo{ min-width:0 }
  #logo img{ width: clamp(200px, 22vw, 320px) !important; }

  .nav-left, .nav-right{
    min-width:0;
    flex-wrap: nowrap;
    gap: clamp(12px, 2.2vw, 28px);
  }

  #header a{
    font-size: clamp(13px, 1.1vw + .15rem, 16px);
    letter-spacing: .04em;
    padding: 4px 0;
    white-space: nowrap;
  }
}


@media (max-width: 600px) {
  #header {
    position: sticky;
    top: 0;
    z-index: 50;
  }
  
  /* First element after the header gets pushed down by header's height */
  #header + * {
    margin-top: calc(var(--mobile-header-height, 100px)) !important;
  }
  
  /* Shrink logo on mobile */
  #logo img {
    width: clamp(80px, 32vw, 100px) !important;
    height: auto !important;
    margin: 2px auto !important;
  }

  /* Adjust mobile header height var to match */
  :root {
    --mobile-header-height: 150px; /* adjust after you see how small it gets */
  }
}