/*
Theme Name: Off The Bench V2
Theme URI: https://example.com/
Author: OpenAI
Description: A premium, parent-focused youth sports theme for the Off The Bench app. Built to scale across sports, Player Cards, and app downloads.
Version: 2.0.0
Requires at least: 6.2
Requires PHP: 7.4
Text Domain: off-the-bench
*/

:root {
  --otb-navy: #10233F;
  --otb-orange: #F36C21;
  --otb-green: #3D7A4A;
  --otb-offwhite: #F5F3ED;
  --otb-white: #FFFFFF;
  --otb-graphite: #252A30;
  --otb-muted: #65707C;
  --otb-line: rgba(16,35,63,.12);
  --otb-radius: 8px;
  --otb-shadow: 0 18px 50px rgba(16,35,63,.14);
  --otb-max: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 92px; }
body {
  margin: 0;
  color: var(--otb-graphite);
  background: var(--otb-white);
  font-family: 'Inter', Arial, sans-serif;
  line-height: 1.6;
}
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

.otb-container { width: min(calc(100% - 40px), var(--otb-max)); margin: 0 auto; }
.otb-section { padding: 92px 0; position: relative; overflow: hidden; }
.otb-section--tight { padding: 68px 0; }
.otb-section--navy { background: var(--otb-navy); color: var(--otb-white); }
.otb-section--offwhite { background: var(--otb-offwhite); }
.otb-section--dark { background: #09172b; color: var(--otb-white); }

.otb-kicker {
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--otb-orange);
  margin-bottom: 14px;
}
.otb-title,
.otb-display,
.otb-stat-number,
.otb-card-title,
.otb-step-number {
  font-family: 'Oswald', Impact, sans-serif;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.otb-display { font-size: clamp(3.1rem, 7vw, 6.7rem); line-height: .96; margin: 0; }
.otb-title { font-size: clamp(2.2rem, 4.3vw, 4.4rem); line-height: 1.02; margin: 0 0 22px; }
.otb-lead { font-size: clamp(1.05rem, 1.8vw, 1.32rem); max-width: 760px; color: inherit; opacity: .9; }
.otb-copy { max-width: 760px; font-size: 1.04rem; }
.otb-highlight { color: var(--otb-orange); }

.otb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 22px;
  border-radius: 6px;
  font-size: .86rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 2px solid transparent;
  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.otb-btn:hover { transform: translateY(-2px); }
.otb-btn--primary { background: var(--otb-orange); color: #fff; }
.otb-btn--primary:hover { background: #dd5d18; }
.otb-btn--ghost { border-color: rgba(255,255,255,.75); color: #fff; }
.otb-btn--ghost:hover { background: #fff; color: var(--otb-navy); }
.otb-btn--light { background: #fff; color: var(--otb-navy); }
.otb-btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* Header */
.otb-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  transition: background .25s ease, box-shadow .25s ease;
  color: #fff;
}
.otb-header.is-scrolled { background: rgba(255,255,255,.97); color: var(--otb-navy); box-shadow: 0 8px 28px rgba(0,0,0,.08); backdrop-filter: blur(10px); }
.otb-header__inner { height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.otb-brand { display: flex; align-items: center; gap: 12px; font-family: 'Oswald', Impact, sans-serif; font-size: 1.55rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.custom-logo { max-height: 46px; width: auto; }
.otb-nav { display: flex; align-items: center; gap: 26px; }
.otb-nav .menu { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; align-items: center; }
.otb-nav .menu a { font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.otb-nav .menu a:hover { color: var(--otb-orange); }
.otb-menu-toggle { display: none; background: none; border: 0; color: inherit; font-size: 1.75rem; cursor: pointer; }

/* Hero */
.otb-hero {
  min-height: 92vh;
  display: flex;
  align-items: center;
  color: #fff;
  position: relative;
  background-image:
    linear-gradient(90deg, rgba(7,21,40,.93) 0%, rgba(7,21,40,.72) 42%, rgba(7,21,40,.28) 67%, rgba(7,21,40,.10) 100%),
    url('assets/images/otb-bench-hero.jpg');
  background-size: cover;
  background-position: center;
}
.otb-hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background: var(--otb-orange);
}
.otb-hero__content { position: relative; z-index: 2; max-width: 800px; padding-top: 80px; }
.otb-hero .otb-lead { max-width: 680px; }

/* Parent story */
.otb-two-col { display: grid; grid-template-columns: 1.05fr .95fr; gap: 58px; align-items: center; }
.otb-photo-panel { position: relative; min-height: 440px; border-radius: var(--otb-radius); overflow: hidden; box-shadow: var(--otb-shadow); background: #d7dde3; }
.otb-photo-panel img { width: 100%; height: 100%; min-height: 440px; object-fit: cover; }
.otb-action-cloud { position: absolute; inset: 0; pointer-events: none; }
.otb-action-tag { position: absolute; padding: 9px 13px; background: var(--otb-navy); color: #fff; border-left: 4px solid var(--otb-orange); font-weight: 900; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.otb-action-tag:nth-child(1){ top: 16%; left: 8%; }
.otb-action-tag:nth-child(2){ top: 31%; right: 7%; }
.otb-action-tag:nth-child(3){ bottom: 32%; left: 10%; }
.otb-action-tag:nth-child(4){ bottom: 15%; right: 10%; }

/* Steps */
.otb-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.otb-step { padding: 28px; border-top: 4px solid var(--otb-orange); background: #fff; box-shadow: 0 12px 34px rgba(16,35,63,.08); }
.otb-step-number { font-size: 3.2rem; color: rgba(16,35,63,.18); line-height: 1; }
.otb-step h3 { margin: 10px 0; font-size: 1.16rem; text-transform: uppercase; color: var(--otb-navy); }

/* Sports */
.otb-sports-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 44px; }
.otb-sport-card { position: relative; min-height: 430px; border-radius: var(--otb-radius); overflow: hidden; background: #152e51; box-shadow: 0 18px 45px rgba(0,0,0,.22); }
.otb-sport-card__bg { position:absolute; inset:0; background: linear-gradient(180deg, rgba(16,35,63,.05), rgba(16,35,63,.95)); }
.otb-sport-card__media { position:absolute; inset:0; background-size: cover; background-position:center; opacity:.65; transition: transform .35s ease; }
.otb-sport-card:hover .otb-sport-card__media { transform: scale(1.035); }
.otb-sport-card__content { position:absolute; inset:auto 0 0 0; padding: 28px; z-index:2; }
.otb-card-title { font-size: 2.15rem; line-height:1; margin: 0 0 12px; }
.otb-actions { font-size: .9rem; opacity:.86; }
.otb-link-arrow { display:inline-block; margin-top:16px; color:var(--otb-orange); font-weight:900; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; }

/* Journey */
.otb-journey { margin-top: 52px; display:grid; grid-template-columns: repeat(5,1fr); position:relative; }
.otb-journey::before { content:''; position:absolute; top:38px; left:10%; right:10%; height:2px; background:var(--otb-line); }
.otb-journey__item { text-align:center; position:relative; z-index:1; }
.otb-journey__dot { width:18px; height:18px; margin:29px auto 18px; border-radius:50%; background:var(--otb-orange); box-shadow:0 0 0 9px #fff; }
.otb-journey__age { font-family:'Oswald',Impact,sans-serif; font-size:1.9rem; color:var(--otb-navy); }
.otb-journey__sport { font-weight:800; font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--otb-muted); }

/* Stats */
.otb-stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:40px; }
.otb-stat-card { padding:30px; border:1px solid rgba(255,255,255,.13); background:rgba(255,255,255,.04); }
.otb-stat-card h3 { margin:0 0 22px; font-size:.82rem; letter-spacing:.11em; text-transform:uppercase; color:var(--otb-orange); }
.otb-stat-line { display:flex; justify-content:space-between; align-items:baseline; border-top:1px solid rgba(255,255,255,.09); padding:14px 0; }
.otb-stat-number { font-size:2.35rem; line-height:1; }
.otb-stat-label { opacity:.7; font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; }
.otb-example-note { margin-top:18px; opacity:.6; font-size:.78rem; }

/* Player cards */
.otb-player-card-stage { position:relative; min-height:500px; }
.otb-player-card { width:280px; min-height:400px; position:absolute; top:30px; left:50%; transform:translateX(-50%) rotate(-2deg); background:linear-gradient(145deg,#10233F,#183d6d); color:#fff; border-radius:14px; padding:24px; box-shadow:0 24px 65px rgba(16,35,63,.25); border:1px solid rgba(255,255,255,.16); }
.otb-player-card:nth-child(2){ transform:translateX(-92%) rotate(-8deg); top:70px; opacity:.86; }
.otb-player-card:nth-child(3){ transform:translateX(-7%) rotate(8deg); top:70px; opacity:.86; }
.otb-player-card__brand { font-family:'Oswald',Impact,sans-serif; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; color:var(--otb-orange); }
.otb-player-card__number { font-family:'Oswald',Impact,sans-serif; font-size:6rem; line-height:.9; margin:34px 0 10px; color:rgba(255,255,255,.18); }
.otb-player-card__name { font-family:'Oswald',Impact,sans-serif; text-transform:uppercase; font-size:2.2rem; }
.otb-player-card__meta { opacity:.7; font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; }
.otb-player-card__stats { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:28px; }
.otb-player-card__stats div { padding-top:10px; border-top:1px solid rgba(255,255,255,.15); }
.otb-player-card__stats strong { display:block; font-family:'Oswald',Impact,sans-serif; font-size:1.55rem; }
.otb-player-card__stats span { font-size:.67rem; text-transform:uppercase; opacity:.65; }

/* Download */
.otb-download { text-align:center; }
.otb-download .otb-lead { margin-left:auto; margin-right:auto; }
.otb-download .otb-btn-row { justify-content:center; }
.otb-store-badge { min-width:210px; }

/* Footer */
.otb-footer { background:#07152a; color:#dfe6ef; padding:58px 0 26px; }
.otb-footer__grid { display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:36px; }
.otb-footer h4 { margin:0 0 14px; color:#fff; font-size:.82rem; text-transform:uppercase; letter-spacing:.1em; }
.otb-footer ul { list-style:none; margin:0; padding:0; }
.otb-footer li { margin:8px 0; }
.otb-footer a { opacity:.76; }
.otb-footer a:hover { opacity:1; color:var(--otb-orange); }
.otb-footer__bottom { margin-top:42px; padding-top:20px; border-top:1px solid rgba(255,255,255,.1); font-size:.76rem; opacity:.55; }

/* Generic pages */
.otb-page-hero { padding:150px 0 80px; background:var(--otb-navy); color:#fff; }
.otb-content { padding:70px 0; }
.otb-content > * { max-width:800px; }


/* V2 visual refinements */
.otb-sport-card__media { filter: saturate(.93) contrast(1.04); }
.otb-sport-card::after { content:''; position:absolute; inset:0; border:1px solid rgba(255,255,255,.08); pointer-events:none; }

.otb-journey { align-items:start; }
.otb-journey::before { top:172px; }
.otb-journey__visual {
  height:124px;
  margin:0 10px 12px;
  border-radius:8px;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  padding:14px;
  position:relative;
  overflow:hidden;
  color:#fff;
  font-family:'Oswald',Impact,sans-serif;
  font-size:2.5rem;
  line-height:1;
  letter-spacing:.02em;
  box-shadow:0 14px 35px rgba(16,35,63,.12);
  background-size:cover;
  background-position:center;
}
.otb-journey__visual::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(16,35,63,.05),rgba(16,35,63,.78)); }
.otb-journey__visual { text-shadow:0 2px 12px rgba(0,0,0,.25); }
.otb-journey__visual--soccer { background-image:url('assets/images/soccer-young.webp'); }
.otb-journey__visual--flag { background-image:url('assets/images/otb-bench-hero.jpg'); }
.otb-journey__visual--tackle { background-image:url('assets/images/tackle-football.jpg'); }
.otb-journey__visual--future { background:linear-gradient(145deg,#28486f,#10233f); }
.otb-journey__visual--today { background:linear-gradient(145deg,var(--otb-orange),#c94e11); }
.otb-journey__visual--future::after,.otb-journey__visual--today::after { display:none; }
.otb-journey__visual { z-index:1; }
.otb-journey__visual > * { position:relative; z-index:2; }
.otb-journey__dot { margin:30px auto 18px; }

.otb-player-card-stage::before {
  content:'';
  position:absolute;
  width:300px;
  height:300px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(243,108,33,.18),rgba(243,108,33,0) 68%);
  left:50%; top:88px; transform:translateX(-50%);
}
.otb-player-card { background:linear-gradient(145deg,#10233F 0%,#12345d 58%,#f36c21 140%); }
.otb-player-card:first-child { transform:translateX(-50%) rotate(-1deg) scale(1.04); z-index:3; }
.otb-player-card:first-child::before {
  content:''; position:absolute; left:0; right:0; top:0; height:128px;
  background:linear-gradient(130deg,rgba(255,255,255,.08),rgba(255,255,255,0));
  border-radius:14px 14px 0 0;
}

.otb-parent-photo { position:relative; min-height:430px; border-radius:var(--otb-radius); overflow:hidden; box-shadow:var(--otb-shadow); }
.otb-parent-photo img { width:100%; height:100%; min-height:430px; object-fit:cover; object-position:center; }
.otb-parent-photo::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(7,21,40,0) 45%,rgba(7,21,40,.82) 100%); }
.otb-parent-photo__caption { position:absolute; z-index:2; left:26px; right:26px; bottom:24px; color:#fff; }
.otb-parent-photo__caption strong { display:block; font-family:'Oswald',Impact,sans-serif; text-transform:uppercase; font-size:1.65rem; line-height:1.05; }
.otb-parent-photo__caption span { display:block; opacity:.86; font-size:.9rem; margin-top:5px; }

.otb-memories { color:#fff; min-height:500px; display:flex; align-items:center; }
.otb-memories__image { position:absolute; inset:0; background-image:url('assets/images/soccer-young.webp'); background-size:cover; background-position:center 44%; transform:scale(1.01); }
.otb-memories__overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(7,21,40,.95) 0%,rgba(7,21,40,.82) 46%,rgba(7,21,40,.30) 78%,rgba(7,21,40,.18) 100%); }
.otb-memories__content { position:relative; z-index:2; }
.otb-memories .otb-title,.otb-memories .otb-lead { max-width:760px; }

@media (max-width: 980px) {
  .otb-two-col, .otb-grid-4, .otb-sports-grid, .otb-stats-grid, .otb-footer__grid { grid-template-columns:1fr 1fr; }
  .otb-grid-4 .otb-step { min-height:240px; }
  .otb-sports-grid .otb-sport-card:last-child { grid-column:1 / -1; min-height:360px; }
  .otb-nav { position:fixed; top:78px; left:0; right:0; background:#fff; color:var(--otb-navy); padding:22px; display:none; box-shadow:0 18px 30px rgba(0,0,0,.08); }
  .otb-nav.is-open { display:block; }
  .otb-nav .menu { flex-direction:column; align-items:flex-start; }
  .otb-menu-toggle { display:block; }
  .otb-header .otb-btn--primary { display:none; }
}

@media (max-width: 720px) {
  .otb-container { width:min(calc(100% - 28px), var(--otb-max)); }
  .otb-section { padding:68px 0; }
  .otb-hero { min-height:86vh; background-position:58% center; }
  .otb-hero__content { padding-top:72px; }
  .otb-hero::before { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,21,40,.42), rgba(7,21,40,.88)); }
  .otb-two-col, .otb-grid-4, .otb-sports-grid, .otb-stats-grid, .otb-footer__grid { grid-template-columns:1fr; }
  .otb-sports-grid .otb-sport-card:last-child { grid-column:auto; }
  .otb-photo-panel, .otb-photo-panel img, .otb-parent-photo, .otb-parent-photo img { min-height:340px; }
  .otb-memories { min-height:520px; }
  .otb-memories__overlay { background:linear-gradient(180deg,rgba(7,21,40,.36),rgba(7,21,40,.94) 72%); }
  .otb-journey { grid-template-columns:1fr; text-align:left; margin-left:18px; }
  .otb-journey__visual { display:none; }
  .otb-journey::before { top:0 !important; }
  .otb-journey::before { top:0; bottom:0; left:9px; right:auto; width:2px; height:auto; }
  .otb-journey__item { display:grid; grid-template-columns:28px 1fr; grid-template-areas:'dot age' 'dot sport'; column-gap:14px; text-align:left; padding:0 0 26px; }
  .otb-journey__dot { grid-area:dot; margin:9px 0 0; width:18px; height:18px; box-shadow:0 0 0 7px #fff; }
  .otb-journey__age { grid-area:age; }
  .otb-journey__sport { grid-area:sport; }
  .otb-player-card-stage { min-height:430px; transform:scale(.88); transform-origin:center top; margin-bottom:-45px; }
  .otb-player-card { width:250px; }
}