/* ===========================================================
   DALLAS TITANS — design tokens
   Primary navy #001231 / Secondary teal #009F9E
   Accent clay (infield dirt) #B5651D used sparingly
=========================================================== */
:root{
  --navy: #001231;
  --navy-light: #0a2347;
  --teal: #009F9E;
  --teal-dark: #007877;
  --cream: #F3EFE3;
  --cream-2: #EAE3D0;
  --ink: #0c1117;
  --clay: #B5651D;
  --white: #ffffff;
  --line: rgba(0,18,49,0.12);

  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "Roboto Mono", "Courier New", monospace;

  --radius: 2px;
  --container: 1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--container); margin:0 auto; padding:0 24px;}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:0.5px;
  text-transform:uppercase;
  margin:0 0 .5em;
  color:var(--navy);
}
h1{font-size:clamp(2.4rem,6vw,4.6rem); line-height:0.95;}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem); line-height:1;}
h3{font-size:1.2rem;}
p{margin:0 0 1em;}

::selection{background:var(--teal); color:var(--white);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline:3px solid var(--clay);
  outline-offset:2px;
}

/* ---------- stitched seam divider (signature element) ---------- */
.seam{
  height:18px;
  width:100%;
  background-repeat: repeat-x;
  background-size: 36px 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='18' viewBox='0 0 36 18'%3E%3Cpath d='M0 9 Q9 -3 18 9 T36 9' fill='none' stroke='%23B5651D' stroke-width='2' stroke-dasharray='3 3'/%3E%3C/svg%3E");
  opacity:0.55;
}

/* ---------- top utility bar ---------- */
.utility-bar{
  background:var(--navy);
  color:var(--cream-2);
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.utility-bar .wrap{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:6px; padding-bottom:6px;
}
.utility-bar span{color:var(--teal);}

/* ---------- nav ---------- */
header.site-header{
  background:var(--navy);
  position:sticky; top:0; z-index:50;
  box-shadow:0 2px 0 var(--teal);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  color:var(--white);
}
.brand .crest{
  width:42px; height:42px; flex:none; object-fit:contain;
}
.brand-text{display:flex; flex-direction:column; line-height:1;}
.brand-text .name{
  font-family:var(--font-display);
  font-size:1.15rem; letter-spacing:1px; text-transform:uppercase;
}
.brand-text .slogan{
  font-family:var(--font-mono);
  font-size:0.62rem; color:var(--teal); letter-spacing:0.12em; text-transform:uppercase; margin-top:2px;
}
nav.main-nav ul{
  list-style:none; display:flex; gap:2px; margin:0; padding:0;
}
nav.main-nav a{
  color:var(--cream-2);
  font-family:var(--font-display);
  font-size:0.92rem;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:10px 14px;
  display:inline-block;
  border-bottom:3px solid transparent;
  transition:border-color .15s, color .15s;
}
nav.main-nav a:hover{color:var(--white); border-color:rgba(0,159,158,0.5);}
nav.main-nav a.active{color:var(--white); border-color:var(--teal);}
.nav-toggle{
  display:none; background:none; border:1px solid var(--teal); color:var(--white);
  font-family:var(--font-display); padding:8px 12px; letter-spacing:1px; text-transform:uppercase; font-size:.85rem;
}

@media (max-width:880px){
  nav.main-nav{
    display:none; width:100%; order:3;
  }
  nav.main-nav.open{ display:block !important; }
  nav.main-nav ul{flex-direction:column;}
  nav.main-nav a{border-bottom:1px solid rgba(255,255,255,0.08); border-left:3px solid transparent;}
  nav.main-nav a.active{border-left-color:var(--teal); border-bottom:1px solid rgba(255,255,255,0.08);}
  .nav-row{flex-wrap:wrap;}
  .nav-toggle{display:inline-block !important;}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;
  font-family:var(--font-display);
  letter-spacing:1px; text-transform:uppercase;
  padding:12px 26px;
  border:2px solid var(--teal);
  color:var(--white);
  background:transparent;
  cursor:pointer;
  font-size:0.95rem;
  transition:background .15s, color .15s;
}
.btn:hover{background:var(--teal); color:var(--navy);}
.btn.solid{background:var(--teal); color:var(--navy);}
.btn.solid:hover{background:var(--teal-dark); color:var(--white);}
.btn.clay{border-color:var(--clay); }
.btn.clay:hover{background:var(--clay); color:var(--white);}
.btn.small{padding:7px 14px; font-size:0.78rem;}

/* ---------- hero ---------- */
.hero{
  background-color:var(--navy);
  background-image:url("../img/hero-bg.jpg"); /* path is relative to the css/ folder */
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  color:var(--white);
  position:relative;
  overflow:hidden;
  padding:90px 0 70px;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(
    to right,
    rgba(0,18,49,0.88) 0%,
    rgba(0,18,49,0.65) 60%,
    rgba(0,18,49,0.35) 100%
  );
}
.hero .wrap{position:relative; z-index:1;}
.hero .eyebrow{
  font-family:var(--font-mono);
  color:var(--teal);
  letter-spacing:0.2em;
  text-transform:uppercase;
  font-size:0.8rem;
  margin-bottom:14px;
}
.hero h1{color:var(--white); max-width:760px;}
.hero .lede{
  max-width:560px; color:var(--cream-2); font-size:1.05rem; margin-top:18px;
}
.hero .cta-row{margin-top:30px; display:flex; gap:14px; flex-wrap:wrap;}

.page-hero{
  background:var(--navy); color:var(--white); padding:54px 0 42px;
  position:relative;
}
.page-hero .eyebrow{
  font-family:var(--font-mono); color:var(--teal); letter-spacing:0.2em; text-transform:uppercase; font-size:0.78rem; margin-bottom:8px;
}
.page-hero h1{color:var(--white); margin-bottom:6px;}
.page-hero p{color:var(--cream-2); max-width:620px; margin:0;}

/* ---------- sections ---------- */
section{padding:64px 0;}
section.alt{background:var(--cream-2);}
.section-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  margin-bottom:28px; flex-wrap:wrap;
  border-bottom:1px solid var(--line); padding-bottom:14px;
}
.section-head .tag{
  font-family:var(--font-mono); color:var(--teal); text-transform:uppercase; font-size:0.75rem; letter-spacing:.15em;
}
.see-all{font-family:var(--font-mono); font-size:0.8rem; color:var(--navy); border-bottom:1px solid var(--clay);}
.see-all:hover{color:var(--clay);}

/* ---------- cards / grid ---------- */
.grid-2{display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media (max-width:880px){
  .grid-2,.grid-3{grid-template-columns:1fr;}
}

.card{
  background:var(--white);
  border:1px solid var(--line);
  padding:22px;
}
.card .meta{
  font-family:var(--font-mono); font-size:0.72rem; color:var(--teal-dark);
  text-transform:uppercase; letter-spacing:0.08em; margin-bottom:8px;
}
.card h3{margin-bottom:8px;}
.card p{color:#3a4250; font-size:0.94rem;}

/* news list */
.news-item{
  display:grid; grid-template-columns:90px 1fr; gap:18px;
  padding:18px 0; border-bottom:1px solid var(--line);
}
.news-item .date{
  font-family:var(--font-mono); color:var(--clay); font-size:0.8rem; padding-top:4px;
}
.news-item h3{margin-bottom:4px;}
.news-item p{color:#3a4250; font-size:0.92rem; margin-bottom:6px;}

/* schedule */
.schedule-table{width:100%; border-collapse:collapse;}
.schedule-table th{
  text-align:left; font-family:var(--font-mono); text-transform:uppercase; font-size:0.72rem;
  color:var(--teal-dark); letter-spacing:.08em; padding:10px 8px; border-bottom:2px solid var(--navy);
  white-space:nowrap;
}
.schedule-table td{padding:12px 8px; border-bottom:1px solid var(--line); font-size:0.92rem;}
.schedule-table td:last-child{white-space:nowrap;}
.schedule-table tr.win td:first-child{box-shadow:inset 4px 0 0 var(--teal);}
.schedule-table tr.loss td:first-child{box-shadow:inset 4px 0 0 var(--clay);}
.badge{
  font-family:var(--font-mono); font-size:0.7rem; padding:3px 8px; text-transform:uppercase; letter-spacing:.06em;
  border-radius:2px;
  white-space:nowrap;
  display:inline-block;
}
.badge.win{background:rgba(0,159,158,0.15); color:var(--teal-dark);}
.badge.loss{background:rgba(181,101,29,0.15); color:var(--clay);}
.badge.upcoming{background:rgba(0,18,49,0.08); color:var(--navy);}
/* Tie */
.badge.tie{
  background:var(--cream);
  color:var(--navy);
  border:1px solid var(--line);
}

/* Playoff Win — same win color, bolder treatment + star to flag it as postseason */
.badge.playoff-win{
  background:var(--teal-dark);
  color:var(--white);
  box-shadow:0 0 0 2px var(--teal) inset;
}
.badge.playoff-win::before{ content:"★ "; }

/* Playoff Loss — same loss color family, same postseason treatment */
.badge.playoff-loss{
  background:var(--clay);
  color:var(--white);
  box-shadow:0 0 0 2px rgba(0,0,0,0.15) inset;
}
.badge.playoff-loss::before{ content:"★ "; }

/* Championship — gold, standalone (no W/L needed) */
.badge.championship{
  background:linear-gradient(135deg,#d4af37,#b8860b);
  color:var(--navy);
  font-weight:700;
  box-shadow:0 0 0 2px var(--navy) inset;
}
.badge.championship::before{ content:"🏆 "; }

/* roster */
.roster-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
@media (max-width:980px){.roster-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.roster-grid{grid-template-columns:1fr;}}
.player-card{
  background:var(--white); border:1px solid var(--line); position:relative; overflow:hidden;
}
.player-card .num{
  font-family:var(--font-display); font-size:2.6rem; color:var(--cream-2);
  position:absolute; top:6px; right:12px; -webkit-text-stroke:1px var(--navy); color:transparent;
}
.player-card .photo{
  height:140px; background:var(--navy);
  display:flex; align-items:center; justify-content:center;
  color:var(--teal); font-family:var(--font-display); font-size:2rem;
}
.player-card .info{padding:14px;}
.player-card h3{font-size:1rem; margin-bottom:2px;}
.player-card .pos{font-family:var(--font-mono); font-size:0.75rem; color:var(--teal-dark); text-transform:uppercase;}
.player-card .bio{font-size:0.82rem; color:#566; margin-top:8px;}

.filter-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:24px;}
.filter-row button{
  font-family:var(--font-mono); font-size:0.75rem; text-transform:uppercase; letter-spacing:.06em;
  padding:8px 14px; border:1px solid var(--navy); background:transparent; cursor:pointer; color:var(--navy);
}
.filter-row button.active, .filter-row button:hover{background:var(--navy); color:var(--white);}

/* stats */
.stats-toolbar{
  display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-bottom:18px;
}
.stats-toolbar input[type="search"]{
  font-family:var(--font-mono); padding:10px 12px; border:1px solid var(--navy); min-width:240px; background:var(--white);
}
.stats-toolbar select{
  font-family:var(--font-mono); padding:10px 12px; border:1px solid var(--navy); background:var(--white);
}
.table-scroll{
  overflow-x:auto;
  border:1px solid var(--line);
  -webkit-overflow-scrolling:touch;
  transform:translateZ(0);
  will-change:transform;
  contain:paint;
}
table.stats-table{
  width:100%; border-collapse:collapse; font-family:var(--font-mono); font-size:0.84rem; min-width:760px;
  background:var(--white);
}
table.stats-table thead th{
  background:var(--navy); color:var(--cream-2); text-align:left; padding:10px 10px;
  position:sticky; top:0; cursor:pointer; user-select:none; white-space:nowrap;
}
table.stats-table thead th:hover{background:var(--navy-light);}
table.stats-table thead th .arrow{color:var(--teal); margin-left:4px;}
table.stats-table tbody td{padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap;}
table.stats-table tbody tr:nth-child(even){background:var(--cream);}
table.stats-table tbody tr:hover{background:rgba(0,159,158,0.12);}
table.stats-table td.name{font-family:var(--font-body); font-weight:600; color:var(--navy);}
.stats-tabs{display:flex; gap:6px; margin-bottom:18px;}
.stats-tabs button{
  font-family:var(--font-display); letter-spacing:1px; text-transform:uppercase; font-size:0.85rem;
  padding:9px 18px; background:var(--cream-2); border:1px solid var(--line); cursor:pointer; color:var(--navy);
}
.stats-tabs button.active{background:var(--navy); color:var(--white); border-color:var(--navy);}

/* gallery */
.year-block{margin-bottom:54px;}
.year-head{
  display:flex; align-items:center; gap:18px; margin-bottom:18px;
}
.year-head h2{margin:0; color:var(--navy);}
.year-head .rule{flex:1; height:1px; background:var(--line);}
.season-block{margin-bottom:30px;}
.season-label{
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.12em; font-size:0.78rem;
  color:var(--teal-dark); margin-bottom:12px; display:flex; align-items:center; gap:8px;
}
.season-label::before{content:""; width:10px; height:10px; background:var(--teal); display:inline-block;}
.season-label.fall::before{background:var(--clay);}
.photo-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
}
@media (max-width:880px){.photo-grid{grid-template-columns:repeat(2,1fr);}}
.photo-grid .ph{
  aspect-ratio:4/3; background:var(--navy); display:flex; align-items:center; justify-content:center;
  color:var(--teal); font-family:var(--font-mono); font-size:0.7rem; text-align:center; padding:6px;
  position:relative; overflow:hidden;
}
.photo-grid .ph span{opacity:0.85;}

/* shop */
.shop-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media (max-width:880px){.shop-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.shop-grid{grid-template-columns:1fr;}}
.product-card{background:var(--white); border:1px solid var(--line);}
.product-card .photo{
  aspect-ratio:1; background:var(--navy);
  display:flex; align-items:center; justify-content:center; color:var(--teal);
  font-family:var(--font-display); font-size:1.3rem; letter-spacing:1px;
}
.product-card .info{padding:16px;}
.product-card .price{font-family:var(--font-mono); color:var(--clay); margin-top:6px;}
.coming-soon{
  text-align:center; padding:90px 0; color:var(--navy);
}

/* footer */
footer{
  background:var(--navy); color:var(--cream-2); padding:50px 0 24px; margin-top:40px;
}
footer .foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:30px; margin-bottom:30px;}
@media (max-width:760px){footer .foot-grid{grid-template-columns:1fr;}}
footer h4{color:var(--white); font-size:1rem;}
footer ul{list-style:none; padding:0; margin:0;}
footer li{margin-bottom:8px;}
footer a:hover{color:var(--teal);}
footer .bottom{
  border-top:1px solid rgba(255,255,255,0.1); padding-top:18px;
  font-family:var(--font-mono); font-size:0.75rem; color:#7f8aa3;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
}