/* ===========================================================================
   St. Pete Pelicans National — team site
   Look & feel inspired by basebroz.com (clean, white-forward, bold uppercase,
   image-forward, announcement bar, multi-column footer). Brand kept: pelican
   logo + electric-blue accent.
   =========================================================================== */

:root{
  --ink:#141414; --ink-2:#2a2a2a; --white:#ffffff;
  --paper:#F4F2EC; --cream:#ECEAE3; --line:#e7e4dc;
  --blue:#17A2DE; --blue-dark:#0E7FB0; --muted:#6b6b6b;
  --maxw:1200px; --shadow:0 10px 40px rgba(20,20,20,.10);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--white); color:var(--ink-2);
  font-family:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.65;
}
img{max-width:100%; display:block;}
a{color:var(--blue-dark);}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}

h1,h2,h3,.display{
  font-family:'Anton','Oswald','Arial Narrow',Impact,sans-serif; font-weight:400;
  text-transform:uppercase; letter-spacing:.5px; color:var(--ink); line-height:1.02; margin:0;
}
.eyebrow{
  font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:3px;
  font-weight:600; font-size:13px; color:var(--blue-dark);
}
.lead{font-size:18px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; cursor:pointer; border:2px solid transparent; text-decoration:none;
  font-family:'Oswald',sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:1.5px; font-size:14px; padding:14px 32px; transition:all .15s ease;
}
.btn-primary{background:var(--blue); color:#fff; border-color:var(--blue);}
.btn-primary:hover{background:var(--blue-dark); border-color:var(--blue-dark);}
.btn-dark{background:var(--ink); color:#fff; border-color:var(--ink);}
.btn-dark:hover{background:#000;}
.btn-outline{background:transparent; color:var(--ink); border-color:var(--ink);}
.btn-outline:hover{background:var(--ink); color:#fff;}
.btn-light{background:#fff; color:var(--ink); border-color:#fff;}
.btn-light:hover{background:var(--blue); color:#fff; border-color:var(--blue);}
.btn-sm{padding:10px 22px; font-size:12px;}

/* ---------- Announcement bar ---------- */
.announce{background:var(--ink); color:#fff;}
.announce .wrap{display:flex; align-items:center; justify-content:space-between; height:42px;}
.announce .socials{display:flex; gap:16px;}
.announce .socials a{color:#cfd2d6; text-decoration:none; font-size:12px; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:1px;}
.announce .socials a:hover{color:var(--blue);}
.announce .msg{font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:2px; font-size:12px; color:#fff;}
.announce .msg b{color:var(--blue);}

/* ---------- Header / nav ---------- */
.site-header{position:sticky; top:0; z-index:60; background:var(--white); border-bottom:1px solid var(--line);}
.nav{display:flex; align-items:center; gap:20px; height:76px;}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto;}
.brand img{width:46px; height:46px;}
.brand-name{font-family:'Oswald',sans-serif; font-weight:700; color:var(--ink); text-transform:uppercase; letter-spacing:1px; font-size:17px; line-height:1;}
.brand-name b{color:var(--blue);}
.nav-links{display:flex; gap:26px; align-items:center;}
.nav-links a{color:var(--ink); text-decoration:none; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:1.5px; font-size:14px; font-weight:500;}
.nav-links a:hover{color:var(--blue);}
.nav-links a.active{color:var(--blue);}
.nav-links a.btn-primary{color:#fff;} /* keep button text white despite .nav-links a color */
.nav-links a.btn-dark{color:#fff;}
.nav-links a.btn-outline{color:var(--ink);}
.nav-toggle{display:none; background:none; border:0; font-size:26px; cursor:pointer; color:var(--ink);}

/* ---------- Hero carousel ---------- */
.hero-carousel{position:relative; height:80vh; min-height:520px; overflow:hidden; background:var(--ink);}
.hero-carousel .slides{position:absolute; inset:0;}
.hero-carousel .slide{position:absolute; inset:0; opacity:0; transition:opacity .9s ease;}
.hero-carousel .slide.active{opacity:1;}
.hero-carousel .slide img{width:100%; height:100%; object-fit:cover;}
.hero-carousel .scrim{position:absolute; inset:0; background:linear-gradient(90deg, rgba(20,20,20,.72) 0%, rgba(20,20,20,.45) 45%, rgba(20,20,20,.15) 100%);}
.hero-overlay{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; z-index:3;}
.hero-overlay .wrap{width:100%;}
.hero-overlay .inner{max-width:640px;}
.hero-overlay .eyebrow{color:var(--blue); margin-bottom:14px;}
.hero-overlay h1{color:#fff; font-size:clamp(44px,6.4vw,88px);}
.hero-overlay .slide-text{font-family:'Jost',sans-serif; color:#e9eaec; font-size:19px; margin:16px 0 8px; min-height:28px;}
.hero-overlay .tagline{font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:2px; color:#bfc3c8; font-size:14px; margin-bottom:26px;}
.hero-overlay .cta-row{display:flex; gap:14px; flex-wrap:wrap;}
.car-arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:5; background:rgba(255,255,255,.14); color:#fff; border:0; width:48px; height:48px; font-size:24px; cursor:pointer; transition:background .15s;}
.car-arrow:hover{background:var(--blue);}
.car-prev{left:18px;} .car-next{right:18px;}
.dots{position:absolute; bottom:22px; left:0; right:0; z-index:5; display:flex; gap:10px; justify-content:center;}
.dots button{width:11px; height:11px; border-radius:50%; border:2px solid #fff; background:transparent; cursor:pointer; padding:0;}
.dots button.active{background:#fff;}

/* ---------- Feature (Explore) cards ---------- */
.cards3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.feature-card{position:relative; overflow:hidden; aspect-ratio:3/4; display:block; text-decoration:none; background:var(--cream);}
.feature-card img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease;}
.feature-card:hover img{transform:scale(1.06);}
.feature-card .fc-label{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:linear-gradient(to top, rgba(20,20,20,.72), rgba(20,20,20,.15)); color:#fff; text-align:center;}
.feature-card .fc-label span{font-family:'Anton',sans-serif; text-transform:uppercase; font-size:26px; letter-spacing:1px;}
.feature-card .fc-label em{font-family:'Oswald',sans-serif; font-style:normal; text-transform:uppercase; letter-spacing:2px; font-size:12px; color:var(--blue); margin-top:8px;}

/* ---------- Updates / signup band ---------- */
.updates{text-align:center;}
.signup{display:flex; gap:10px; justify-content:center; max-width:520px; margin:24px auto 0; flex-wrap:wrap;}
.signup input{flex:1; min-width:220px; padding:14px 16px; border:2px solid #3a3f45; background:#1c2025; color:#fff; font-family:'Jost',sans-serif; font-size:15px;}
.signup input::placeholder{color:#8b9096;}
.signup input:focus{outline:none; border-color:var(--blue);}
.signup .note{width:100%; color:var(--blue); font-family:'Oswald',sans-serif; letter-spacing:1px; text-transform:uppercase; font-size:13px; margin-top:6px;}

/* ---------- Sections ---------- */
.section{padding:84px 0;}
.section.cream{background:var(--paper);}
.section.ink{background:var(--ink); color:#cfd2d6;}
.section.ink h2, .section.ink h3{color:#fff;}
.section-head{text-align:center; max-width:760px; margin:0 auto 44px;}
.section-head .eyebrow{display:block; margin-bottom:10px;}
.section-title{font-size:clamp(30px,4vw,46px);}
.rule-c{width:64px; height:5px; background:var(--blue); margin:16px auto 0;}

/* ---------- Intro / quote ---------- */
.intro{max-width:820px; margin:0 auto; text-align:center;}
.intro p{font-size:19px; line-height:1.7;}
.quote{margin-top:26px; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:2px; color:var(--blue-dark); font-size:14px;}

/* ---------- 3-up value strip ---------- */
.strip{display:grid; grid-template-columns:repeat(3,1fr);}
.strip .cell{padding:34px 24px; text-align:center; border-left:1px solid rgba(255,255,255,.12);}
.strip .cell:first-child{border-left:0;}
.strip .cell .k{font-family:'Anton',sans-serif; font-size:30px; color:#fff; letter-spacing:1px;}
.strip .cell .v{font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:2px; font-size:12px; color:var(--blue); margin-top:8px;}

/* ---------- Gallery ---------- */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.shot{position:relative; overflow:hidden; aspect-ratio:4/3; background:var(--cream);}
.shot img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease;}
.shot:hover img{transform:scale(1.05);}
.shot .cap{position:absolute; left:0; right:0; bottom:0; padding:14px 16px; color:#fff;
  font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:1.5px; font-size:13px;
  background:linear-gradient(to top, rgba(20,20,20,.75), rgba(20,20,20,0));}

/* ---------- Roster (names only) ---------- */
.roster{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px;}
.player{background:var(--white); border:1px solid var(--line); padding:22px 16px; text-align:center;}
.player .no{font-family:'Anton',sans-serif; font-size:34px; color:var(--blue); line-height:1;}
.player .nm{font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase; color:var(--ink); font-size:15px; margin-top:6px; letter-spacing:.5px;}

/* ---------- Follow band ---------- */
.follow-band{text-align:center;}
.follow-band .social-row{display:flex; gap:16px; justify-content:center; margin-top:20px; flex-wrap:wrap;}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink); color:#aeb2b8; padding:56px 0 26px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px;}
.foot-brand .brand-name{color:#fff;}
.site-footer h4{font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:2px; color:#fff; font-size:14px; margin:0 0 14px;}
.site-footer a{color:#aeb2b8; text-decoration:none; display:block; margin-bottom:8px; font-size:14px;}
.site-footer a:hover{color:var(--blue);}
.site-footer p{font-size:14px; margin:0 0 8px;}
.foot-bottom{border-top:1px solid #2a2a2a; margin-top:40px; padding-top:20px; text-align:center; font-size:12px; color:#7f858c; letter-spacing:1px;}

/* ---------- Sponsor page ---------- */
.page-hero{background:var(--ink); color:#fff; padding:70px 0; text-align:center;}
.page-hero h1{color:#fff; font-size:clamp(38px,6vw,72px);}
.page-hero .eyebrow{color:var(--blue); display:block; margin-bottom:12px;}
.page-hero p{max-width:640px; margin:16px auto 0; color:#cfd2d6;}

.tiers{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; align-items:stretch;}
.tier{position:relative; background:var(--white); border:1px solid var(--line); border-top:4px solid var(--blue); padding:24px 20px; display:flex; flex-direction:column;}
.tier.featured{border:2px solid var(--blue); border-top:4px solid var(--blue); box-shadow:var(--shadow);}
.tier-flag{position:absolute; top:-12px; left:20px; background:var(--blue); color:#fff; font-family:'Oswald',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:1px; font-size:11px; padding:3px 10px;}
.tier .amt{font-family:'Anton',sans-serif; font-size:34px; color:var(--blue-dark); line-height:1;}
.tier .nm{font-family:'Oswald',sans-serif; font-weight:700; text-transform:uppercase; color:var(--ink); margin:4px 0 12px; letter-spacing:.5px; font-size:16px;}
.tier-benefits{list-style:none; margin:0; padding:0; font-size:13.5px; color:var(--ink-2);}
.tier-benefits li{position:relative; padding:0 0 7px 20px; line-height:1.4;}
.tier-benefits li::before{content:"✓"; position:absolute; left:0; color:var(--blue); font-weight:bold;}
.custom-note{background:var(--paper); padding:18px 22px; margin:26px 0; border-left:4px solid var(--blue);}
.custom-note p{margin:5px 0; font-size:15px;}
.pay-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.pay-card{background:var(--white); border:1px solid var(--line); padding:26px;}
.pay-card h3{font-family:'Oswald',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--ink); font-size:20px; margin:0 0 10px;}
.pay-card p{margin:0 0 16px; color:var(--muted); font-size:15px;}
.check-list{list-style:none; margin:0; padding:0; font-size:14px;}
.check-list li{position:relative; padding:0 0 8px 18px; line-height:1.45;}
.check-list li::before{content:"•"; position:absolute; left:2px; color:var(--blue); font-weight:bold;}
.packet-row{text-align:center; margin:26px 0;}
.taxbox{background:var(--paper); border-left:4px solid var(--blue); padding:16px 20px; font-size:14px; color:var(--muted); margin-top:10px;}
.subhead{font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:2px; font-size:14px; color:var(--muted); margin:34px 0 14px; font-weight:600; text-align:center;}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .foot-grid{grid-template-columns:1fr 1fr;}
  .gallery{grid-template-columns:repeat(2,1fr);}
  .cards3{grid-template-columns:1fr;}
}
@media (max-width:820px){
  .nav-links{display:none; position:absolute; top:76px; left:0; right:0; background:var(--white); flex-direction:column; padding:18px 24px; gap:16px; border-bottom:1px solid var(--line); box-shadow:var(--shadow);}
  .nav-links.open{display:flex;}
  .nav-toggle{display:block;}
  .hero-carousel{height:auto; min-height:0;}
  .hero-overlay{position:relative; background:var(--ink); padding:48px 0;}
  .hero-carousel .slides{position:relative; height:56vw;}
  .car-arrow{display:none;}
  .strip{grid-template-columns:1fr;} .strip .cell{border-left:0; border-top:1px solid rgba(255,255,255,.12);} .strip .cell:first-child{border-top:0;}
  .pay-grid{grid-template-columns:1fr;}
  .announce .msg{display:none;}
  .foot-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .gallery{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr;}
}