@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600&family=Anton&family=Bebas+Neue&family=Teko:wght@600;700&family=Russo+One&family=Playfair+Display:wght@700&family=Dancing+Script:wght@700&display=swap');

:root {
  --black: #0A0A0A;
  --red: #D6202B;
  --red-dark: #A8161F;
  --white: #FFFFFF;
  --off-white: #F5F3F1;
  --charcoal: #2A2A2A;
  --gray: #6b6b6b;
  --line: #E3E0DC;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--off-white);
  color: var(--black);
  line-height: 1.55;
}

h1, h2, h3, .display {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0;
}

a { color: var(--red); text-decoration: none; }
a:hover { color: var(--red-dark); }

.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Top bar */
.topbar {
  background: var(--black);
  border-bottom: 3px solid var(--red);
  padding: 18px 0;
}
.topbar .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.topbar .brand,
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Oswald', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.brand-logo {
  height: 40px;
  width: auto;
  display: block;
}
.brand-name-image {
  max-height: 40px;
  width: auto;
  display: block;
}
.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.brand-link:hover {
  color: var(--red);
}
.topbar a { color: var(--white); }
.topbar a:hover { color: var(--red); }
.topbar .session { color: #999; font-size: 14px; }

/* Roster grid */
.roster-heading {
  padding: 36px 0 20px;
}
.roster-heading h1 {
  font-size: 30px;
  text-transform: uppercase;
}
.roster-heading p {
  color: var(--gray);
  margin-top: 6px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px;
  padding-bottom: 60px;
}

/* Schedule page */
.schedule-item {
  display: flex;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.schedule-item:last-child { border-bottom: none; }
.schedule-item-date {
  flex: 0 0 130px;
  text-align: center;
}
.schedule-date {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--black);
  line-height: 1.3;
}
.schedule-time {
  font-size: 12px;
  color: var(--gray);
  margin-top: 2px;
}
.schedule-item-body { flex: 1; }
.schedule-event {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
}
.schedule-meta {
  font-size: 14px;
  color: var(--gray);
  margin-top: 2px;
}
.schedule-result {
  margin-top: 4px;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--red);
}
@media (max-width: 480px) {
  .schedule-item { flex-direction: column; gap: 4px; }
  .schedule-item-date { flex: none; text-align: left; }
}

.player-tile {
  background: var(--white);
  border: 1px solid var(--line);
  overflow: hidden;
  color: var(--black);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.player-tile:hover {
  border-color: var(--red);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.tile-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--charcoal);
  position: relative;
  overflow: hidden;
}
.tile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.player-tile:hover .tile-photo img {
  transform: scale(1.03);
}
.tile-photo .num {
  position: absolute;
  bottom: 8px;
  left: 10px;
  font-family: 'Oswald', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--white);
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.tile-photo.no-photo {
  display: flex;
  align-items: center;
  justify-content: center;
}
.tile-photo.no-photo .num {
  position: static;
  font-size: 40px;
  color: #666;
  text-shadow: none;
}

.tile-info { padding: 12px 14px 16px; }
.tile-info .name {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 17px;
  text-transform: uppercase;
}
.tile-info .pos { color: var(--gray); font-size: 14px; margin-top: 2px; }

/* Player hero */
.hero {
  position: relative;
  background: var(--charcoal) center top/cover no-repeat;
  color: var(--white);
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  transition: background-size 0.4s ease;
}
.hero:hover {
  background-size: 110%;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0) 30%, rgba(10,10,10,0.92) 100%);
}

/* Home page hero: an actual <img> (not a CSS background), so a wide
   group photo is never cropped - it's letterboxed instead, scaled to
   fit within a height that's responsive but capped so it never gets
   huge. Only used on index.php; player.php's hero keeps the cover/crop
   background-image approach, which suits portrait player photos. */
.team-hero {
  min-height: 220px;
  max-height: 400px;
  height: 28vw;
}
.team-hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Optional sponsor/side logos shown in the letterboxed space beside the
   team photo. Bottom is reserved (rather than a plain vertical-center)
   so the logo never reaches down into .hero-content's text, regardless
   of how tall the hero or the tagline ends up being. Hidden below
   700px, where there's no meaningful side space left once the hero
   narrows down to roughly the photo's own width. */
.hero-side-logo {
  position: absolute;
  top: 16px;
  bottom: 110px;
  z-index: 2;
  width: 120px;
  max-width: 18%;
  display: flex;
  align-items: center;
}
.hero-side-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.hero-side-logo-left {
  left: 16px;
  justify-content: flex-start;
}
.hero-side-logo-right {
  right: 16px;
  justify-content: flex-end;
}
@media (max-width: 700px) {
  .hero-side-logo { display: none; }
}

.hero-content {
  position: relative;
  z-index: 1;
  padding: 28px 20px 26px;
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
}
.hero-num {
  font-family: 'Oswald', sans-serif;
  font-size: 30px;
  font-weight: 700;
  color: var(--red);
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 6px;
}
.hero-name {
  font-size: 34px;
  text-transform: uppercase;
  line-height: 1.05;
}
.hero-name-image {
  display: block;
  max-height: 80px;
  width: auto;
  max-width: 100%;
}
.hero-meta {
  margin-top: 8px;
  color: #ddd;
  font-size: 15px;
}

.section {
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
}
.section h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray);
  margin-bottom: 12px;
}
.section p { margin: 0; }

/* Player page: shareable QR code */
.qr-section { padding: 24px 0; }
.player-qr {
  width: 140px;
  height: 140px;
  background: var(--white);
  padding: 8px;
  border: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.qr-caption {
  margin-top: 8px;
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray);
}

/* Player page: recruiting vitals */
.vitals-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 24px;
  margin-bottom: 14px;
}
.vitals-row:last-child { margin-bottom: 0; }
.vitals-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
}
.vitals-label {
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--gray);
}
.vitals-value {
  font-weight: 600;
  color: var(--black);
  text-align: right;
}

@media (max-width: 480px) {
  .vitals-row { grid-template-columns: 1fr; }
}

.btn {
  display: inline-block;
  background: var(--red);
  color: var(--white);
  padding: 12px 22px;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.03em;
  border: none;
  cursor: pointer;
}
.btn:hover { background: var(--red-dark); color: var(--white); }

.btn-outline {
  background: transparent;
  color: var(--black);
  border: 1px solid var(--black);
}
.btn-outline:hover { background: var(--black); color: var(--white); }

/* Meet the Team strip (home page) */
.team-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  padding-top: 6px;
}
.team-strip-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80px;
  text-align: center;
  color: var(--black);
}
.team-strip-item img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--line);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.team-strip-item:hover img {
  transform: scale(1.08);
  border-color: var(--red);
}
.team-strip-item span {
  margin-top: 6px;
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--black);
}

/* Coaching Staff (home page) */
.coach-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 24px;
  padding-top: 6px;
  align-items: start;
  justify-items: center;
}
.coach-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 160px;
  text-align: center;
}
.coach-photo-wrap {
  width: 90px;
  height: 90px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--charcoal);
  border: 2px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.coach-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.coach-photo-placeholder {
  font-family: 'Oswald', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--white);
}
.coach-name {
  margin-top: 8px;
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--black);
}
.coach-title {
  font-size: 12px;
  color: var(--gray);
  margin-top: 2px;
}
.coach-contact {
  font-size: 12px;
  color: var(--gray);
  margin-top: 2px;
  word-break: break-word;
}
.coach-contact a { color: var(--red); }
.coach-contact a:hover { color: var(--red-dark); }
.coach-links {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.coach-links a {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--red);
}
.coach-links a:hover { color: var(--red-dark); }

/* Follow Us (home page) */
.social-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding-top: 6px;
}

/* Forms (admin) */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--red);
  padding: 28px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

form label {
  display: block;
  font-weight: 600;
  margin: 16px 0 6px;
  font-size: 14px;
}
form input[type=text],
form input[type=email],
form input[type=tel],
form input[type=url],
form input[type=password],
form input[type=file],
form select,
form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  font-size: 15px;
  font-family: inherit;
  background: var(--white);
}
form textarea { min-height: 100px; }
form input[type=range] {
  width: 100%;
  margin-top: 4px;
}

/* In-context hero preview in admin/team.php - a compact, static replica
   of the real .team-hero / .hero-side-logo layout, so a coach can see
   exactly how the size/rotation/position sliders affect the actual home
   page hero without saving or leaving the page. */
/* This box is a true miniature of the real .team-hero, at the scale
   factor computed in admin/team.php as $hero_preview_scale (assumed
   reference desktop width 1200px -> a 320px-tall hero, scaled down to
   this box's 500x133). Every dimension below is that same real value
   (top/bottom/left/right: 16px/110px/16px/16px, logo width: 120px)
   times that scale factor, rounded - not independently chosen - so the
   photo's object-fit: contain math and the logos' position/size all
   land in the same proportion as the live page. If either reference
   number changes, these must be recomputed together.
*/
.hero-preview-box {
  position: relative;
  width: 500px;
  max-width: 100%;
  height: 133px;
  background: var(--charcoal);
  overflow: hidden;
  margin-top: 8px;
  border: 1px solid var(--line);
}
.hero-preview-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.hero-preview-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0) 30%, rgba(10,10,10,0.92) 100%);
}
.hero-preview-logo {
  position: absolute;
  top: 7px;
  bottom: 46px;
  width: 50px;
  max-width: 18%;
  display: flex;
  align-items: center;
}
.hero-preview-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.hero-preview-logo-left { left: 7px; justify-content: flex-start; }
.hero-preview-logo-right { right: 7px; justify-content: flex-end; }

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.form-row .form-field {
  flex: 1;
  min-width: 140px;
}

.photo-preview-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 8px;
}
.photo-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.photo-box[hidden] {
  display: none;
}
.photo-box-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray);
  margin-bottom: 4px;
}
.remove-photo-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--red);
  cursor: pointer;
}
.remove-photo-label input { width: auto; }
.name-preview-box {
  background: var(--charcoal);
  border: 1px solid var(--line);
  padding: 24px 16px;
  margin-top: 8px;
  text-align: center;
  line-height: 1.1;
  overflow-wrap: break-word;
}
.current-photo {
  width: 120px;
  height: 150px;
  object-fit: cover;
  border: 1px solid var(--line);
  display: block;
  margin-top: 0;
}
.current-photo.logo-preview {
  width: 160px;
  height: 60px;
  object-fit: contain;
  background: var(--black);
  padding: 4px;
}

.error {
  background: #fdecea;
  color: var(--red-dark);
  padding: 12px 16px;
  margin-bottom: 18px;
  border-left: 3px solid var(--red);
}
.success {
  background: #eaf5ec;
  color: #1e7d32;
  padding: 12px 16px;
  margin-bottom: 18px;
  border-left: 3px solid #1e7d32;
}

.admin-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.admin-list-item > div:first-child {
  flex: 1 1 300px;
  min-width: 0;
}
.admin-list-item > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex-shrink: 0;
}
.admin-list-item .name { font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase; }

.muted { color: var(--gray); font-size: 14px; }

@media (max-width: 480px) {
  .hero-name { font-size: 26px; }
}