/* =====================================================================
   TOP 50 JUNIOR TOUR — Redesign Design System
   Aesthetic: premium athletic / pro-tour broadcast graphics
   Palette: navy + fairway green + gold (heritage)
   ===================================================================== */

/* ---- Fonts (local — see assets/fonts/fonts.css + FONTS-README.txt) ---- */
@import url('../assets/fonts/fonts.css');

:root {
  /* heritage palette */
  --navy-900: #08182e;
  --navy-850: #0a2038;
  --navy-800: #0d2745;
  --navy-700: #15375c;
  --navy-600: #1c4a78;
  --royal:    #2f63ad;
  --royal-deep:#21477f;

  --paper:    #f6f4ee;
  --paper-2:  #ece8df;
  --paper-3:  #e0dbcf;
  --card:     #ffffff;

  --green:      #1c7d4d;
  --green-deep: #0f5a36;
  --green-soft: #e4efe7;

  --gold:      #c8a458;
  --gold-soft: #f0e6cf;
  --red:       #c23b32;

  --ink:      #14202c;
  --ink-soft: #4a5a68;
  --ink-faint:#7c8893;
  --line:     #d8d2c6;
  --line-strong: #c4bcab;

  /* gold accent (harmonized to the crest) */
  --accent:      var(--gold);
  --accent-deep: #9c7a30;
  --accent-ink:  #1a1304;

  /* fonts */
  --font-display: 'Oswald', sans-serif;
  --font-body:    'Barlow', sans-serif;
  --font-mono:    'Spline Sans Mono', monospace;

  --shadow-sm: 0 1px 2px rgba(8,32,58,.06), 0 2px 8px rgba(8,32,58,.06);
  --shadow-md: 0 4px 14px rgba(8,32,58,.10), 0 12px 34px rgba(8,32,58,.10);
  --shadow-lg: 0 18px 60px rgba(6,23,42,.28);

  --maxw: 1240px;
  --radius: 4px;
}

/* dark scoreboard theme tokens */
[data-theme="dark"], .scoreboard {
  --paper: var(--navy-900);
  --paper-2: var(--navy-850);
  --card: var(--navy-800);
  --ink: #f3f1ea;
  --ink-soft: #b3c0cc;
  --ink-faint: #7e91a3;
  --line: rgba(255,255,255,.10);
  --line-strong: rgba(255,255,255,.18);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.02; margin: 0; letter-spacing: -0.01em; }

/* ---- Utility ---- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent-deep);
}
.eyebrow.on-dark { color: var(--accent); }
.tnum { font-variant-numeric: tabular-nums; }

/* slash motif used across broadcast graphics */
.slash { color: var(--accent); font-weight: 700; }

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--font-display); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  font-size: 15px;
  padding: 13px 22px;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  cursor: pointer; transition: transform .12s ease, background .15s ease, box-shadow .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { box-shadow: 0 6px 20px color-mix(in oklab, var(--accent) 45%, transparent); transform: translateY(-1px); }
.btn-navy { background: var(--navy-800); color: #fff; }
.btn-navy:hover { background: var(--navy-700); transform: translateY(-1px); }
.btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-deep); }
.btn-ghost.on-dark { color: #fff; border-color: rgba(255,255,255,.3); }
.btn-ghost.on-dark:hover { border-color: var(--accent); color: var(--accent); }
.btn-sm { font-size: 13px; padding: 9px 15px; }
.btn-lg { font-size: 17px; padding: 16px 28px; }

/* ============ IMAGE PLACEHOLDER WELLS ============ */
/* intentional, broadcast-styled placeholder for real photography */
.imgwell {
  position: relative;
  background-color: var(--navy-850);
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 14px, transparent 14px 28px);
  color: rgba(255,255,255,.5);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  min-height: 120px;
}
.imgwell::before, .imgwell::after {
  content:""; position: absolute; width: 16px; height: 16px;
  border: 2px solid var(--accent); opacity: .7;
}
.imgwell::before { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.imgwell::after { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
.imgwell .imgwell-cap {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; text-align: center; padding: 8px 14px;
  border: 1px solid rgba(255,255,255,.18); border-radius: 2px;
  background: rgba(0,0,0,.25); max-width: 80%;
}
.imgwell.light { background-color: var(--paper-3); color: var(--ink-faint);
  background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.03) 0 14px, transparent 14px 28px); }
.imgwell.light .imgwell-cap { border-color: var(--line-strong); background: rgba(255,255,255,.5); }
/* real images inside wells */
.imgwell > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.imgwell.contain { background:#fff; border-radius:10px; }
.imgwell.contain > img { object-fit:contain; padding:16px; }
.imgwell:has(img) { background:none; }
.imgwell:has(img)::before, .imgwell:has(img)::after { display:none; }
/* small wells: opt out of the 120px floor + oversized corner ticks */
.imgwell.tight { min-height: 0; }
.imgwell.tight::before, .imgwell.tight::after { width: 9px; height: 9px; top: 7px; left: 7px; bottom: 7px; right: 7px; }

/* ============ TAGS / PILLS ============ */
.tag {
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 3px;
}
.tag-mi { background: var(--green-soft); color: var(--green-deep); }
.tag-fl { background: #fdecc8; color: #93641a; }
.tag-sc { background: #e7eaf3; color: #2f3f6b; }
.tag-live { background: var(--red); color:#fff; }
.tag-outline { border:1px solid var(--line-strong); color: var(--ink-soft); }
[data-theme="dark"] .tag-outline, .scoreboard .tag-outline { border-color: rgba(255,255,255,.2); color: var(--ink-soft); }

/* division chip */
.chip {
  display:inline-block; font-family: var(--font-mono); font-size: 11px;
  letter-spacing:.08em; text-transform:uppercase; color: var(--ink-soft);
  border:1px solid var(--line); padding:3px 8px; border-radius:999px;
}

/* ============ SECTION HEADERS ============ */
.sec-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom: 28px; flex-wrap: wrap; }
.sec-head .eyebrow { display:block; margin-bottom: 12px; }
.sec-head h2 { font-size: clamp(28px, 4vw, 42px); text-transform: uppercase; }
.sec-head .sec-line { display:flex; align-items:center; gap:14px; }
.sec-head .sec-line::before { content:""; width:34px; height:4px; background: var(--accent); display:block; }

section { position: relative; }
.section-pad { padding: 76px 0; }

/* ============ INTERIOR PAGE HERO ============ */
.page-hero { background: var(--navy-900); color:#fff; position:relative; overflow:hidden; padding: 46px 0 50px; border-bottom: 3px solid var(--accent); }
.page-hero::before { content:""; position:absolute; inset:0; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.022) 0 2px, transparent 2px 22px); }
.page-hero::after { content:""; position:absolute; right:-10%; top:-60%; width:48%; height:200%; background: radial-gradient(closest-side, color-mix(in oklab, var(--accent) 16%, transparent), transparent 72%); }
.page-hero .wrap { position:relative; z-index:2; }
.crumbs { font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:18px; }
.crumbs a { color:rgba(255,255,255,.5); } .crumbs a:hover { color:var(--accent); }
.crumbs .sep { margin:0 8px; color:var(--accent); }
.page-hero h1 { font-size: clamp(40px, 6vw, 68px); text-transform:uppercase; line-height:.96; letter-spacing:-.01em; }
.page-hero h1 .slash { color:var(--accent); }
.page-hero .ph-sub { color:rgba(255,255,255,.74); font-size:18px; max-width:60ch; margin:18px 0 0; }
.page-hero .ph-meta { margin-top: 22px; display:flex; gap:10px; flex-wrap:wrap; }

/* prose for informational pages */
.prose { font-size: 17.5px; line-height: 1.72; color: var(--ink); }
.prose h2 { font-size: clamp(26px,3.4vw,36px); text-transform:uppercase; margin: 44px 0 16px; }
.prose h3 { font-family:var(--font-display); font-size: 22px; text-transform:uppercase; margin: 30px 0 10px; color: var(--navy-800); }
.prose p { margin: 0 0 18px; max-width: 68ch; }
.prose ul, .prose ol { max-width: 68ch; padding-left: 0; list-style:none; margin: 0 0 22px; }
.prose ul li { position:relative; padding: 8px 0 8px 30px; border-bottom:1px solid var(--line); }
.prose ul li::before { content:""; position:absolute; left:2px; top:17px; width:10px; height:10px; background:var(--accent); transform: rotate(45deg); }
.prose ol { counter-reset: it; }
.prose ol li { position:relative; padding: 12px 0 12px 46px; border-bottom:1px solid var(--line); counter-increment: it; }
.prose ol li::before { content: counter(it,decimal-leading-zero); position:absolute; left:0; top:12px; font-family:var(--font-display); font-weight:700; color:var(--accent-deep); font-size:18px; }
.prose a.inline { color:var(--accent-deep); text-decoration:underline; text-underline-offset:3px; font-weight:600; }
.prose strong { font-weight:700; color:var(--navy-800); }

/* ============ CARDS ============ */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }

/* ============ HEADER / NAV ============ (styles in site.js inject) */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--navy-900);
  color: #fff;
  border-bottom: 2px solid color-mix(in oklab, var(--accent) 30%, transparent);
}
.utilbar {
  background: var(--navy-850);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.utilbar .wrap { display:flex; align-items:center; justify-content: space-between; height: 34px; }
.utilbar a { color: rgba(255,255,255,.72); white-space: nowrap; }
.utilbar a:hover { color: var(--accent); }
.utilbar .util-socials { display:flex; gap: 16px; align-items:center; }
.utilbar .util-contact { display:flex; gap: 18px; align-items:center; }

.navbar .wrap { display:flex; align-items:center; gap: 28px; height: 72px; }

/* CSS wordmark logo */
.wordmark { display:flex; align-items:center; gap: 13px; flex-shrink:0; }
.wordmark .wm-crest { height: 58px; width:auto; display:block; flex-shrink:0; }
@media (max-width: 720px) { .wordmark .wm-crest { height: 46px; } }
.wordmark .mark {
  width: 46px; height: 46px; flex-shrink:0; position: relative;
  background: linear-gradient(150deg, var(--navy-700), var(--navy-850));
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--accent);
  letter-spacing: -.02em;
}
.wordmark .mark::after {
  content:""; position:absolute; inset: 3px; border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
}
.wordmark .wm-text { line-height: 1; }
.wordmark .wm-top {
  font-family: var(--font-display); font-weight: 700; font-size: 21px;
  letter-spacing: .01em; text-transform: uppercase; color:#fff; display:flex; align-items:baseline; gap:5px;
  white-space: nowrap;
}
.wordmark .wm-top b { color: var(--accent); font-weight:700; }
.wordmark .wm-sub {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .34em;
  text-transform: uppercase; color: rgba(255,255,255,.55); margin-top: 4px;
}

.mainnav { display:flex; align-items:center; gap: 4px; margin-left: auto; }
.mainnav > a, .mainnav > .navitem > a {
  font-family: var(--font-display); font-weight: 500; font-size: 15px;
  letter-spacing: .04em; text-transform: uppercase;
  color: rgba(255,255,255,.86); padding: 10px 13px; border-radius: 3px;
  display:inline-flex; align-items:center; gap: 5px; cursor: pointer;
  transition: color .12s, background .12s;
}
.mainnav > a:hover, .mainnav > .navitem > a:hover { color: #fff; background: rgba(255,255,255,.07); }
.mainnav a.active { color: var(--accent); }
.mainnav a.active::after, .navitem.active > a { }

.navitem { position: relative; }
.navitem > a .caret { width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity:.6; }
.dropdown {
  position: absolute; top: calc(100% + 8px); left: 0;
  background: #fff; min-width: 230px; border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 8px;
  opacity:0; visibility:hidden; transform: translateY(8px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  border-top: 3px solid var(--accent);
}
.navitem:hover .dropdown, .navitem:focus-within .dropdown { opacity:1; visibility:visible; transform: translateY(0); }
.dropdown a {
  display:flex; align-items:center; justify-content:space-between;
  font-family: var(--font-body); font-weight: 500; font-size: 15px; text-transform:none; letter-spacing: 0;
  color: var(--ink); padding: 10px 13px; border-radius: 3px;
}
.dropdown a:hover { background: var(--paper-2); color: var(--accent-deep); }
.dropdown a .dd-desc { display:block; font-size:12px; color: var(--ink-faint); font-family: var(--font-mono); letter-spacing:0; }
.dropdown a .dd-wrap { display:flex; flex-direction:column; }

.nav-cta { display:flex; align-items:center; gap: 10px; margin-left: 6px; }

/* burger */
.burger { display:none; margin-left:auto; background:none; border:0; cursor:pointer; padding:8px; }
.burger span { display:block; width:26px; height:2.5px; background:#fff; margin:5px 0; border-radius:2px; transition: .2s; }

/* mobile drawer */
.mobile-drawer {
  position: fixed; inset: 0 0 0 auto; width: min(86vw, 380px);
  background: var(--navy-900); z-index: 200; transform: translateX(100%);
  transition: transform .26s cubic-bezier(.4,0,.2,1); overflow-y:auto;
  box-shadow: var(--shadow-lg); padding: 22px 22px 60px;
}
.mobile-drawer.open { transform: translateX(0); }
.mobile-scrim { position: fixed; inset:0; background: rgba(6,23,42,.55); z-index:190; opacity:0; visibility:hidden; transition:.2s; backdrop-filter: blur(2px); }
.mobile-scrim.open { opacity:1; visibility:visible; }
.mobile-drawer .md-close { background:none;border:0;color:#fff;font-size:30px;cursor:pointer; position:absolute; top:14px; right:18px; line-height:1; }
.mobile-drawer .md-group { border-top:1px solid rgba(255,255,255,.1); padding: 6px 0; }
.mobile-drawer .md-group > .md-label { font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color: var(--accent); padding: 12px 6px 6px; }
.mobile-drawer a { display:block; color:rgba(255,255,255,.9); font-family:var(--font-display); text-transform:uppercase; letter-spacing:.03em; font-size:18px; padding: 11px 6px; }
.mobile-drawer a.sub { font-family: var(--font-body); text-transform:none; font-size:16px; padding: 9px 6px 9px 18px; color: rgba(255,255,255,.72); letter-spacing:0; }
.mobile-drawer a:hover { color: var(--accent); }
.mobile-drawer .md-cta { display:flex; gap:10px; margin-top: 20px; }
.mobile-drawer .md-cta .btn { flex:1; justify-content:center; }

/* ============ FOOTER ============ */
.site-footer { background: var(--navy-900); color: rgba(255,255,255,.7); padding: 48px 0 0; margin-top: 0; }
.site-footer .foot-grid { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 40px; }
.site-footer h4 { color:#fff; font-size: 15px; text-transform:uppercase; letter-spacing:.12em; font-family:var(--font-mono); font-weight:500; margin-bottom: 18px; }
.site-footer a:not(.btn) { color: rgba(255,255,255,.66); display:block; padding: 5px 0; font-size: 15px; }
.site-footer a:hover { color: var(--accent); }
.site-footer .foot-bottom { border-top:1px solid rgba(255,255,255,.1); padding: 22px 0; display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:13px; font-family:var(--font-mono); color: rgba(255,255,255,.5); }
.foot-contact-line { display:flex; align-items:center; gap:10px; padding: 5px 0; font-size:15px; }

#tweaks-panel .tw-opt.sel { background: var(--navy-900); color:#fff; border-color: var(--navy-900); }

/* ============ LOGIN DROPDOWN POPUP ============ */
.login-modal { position:fixed; top:72px; right:20px; z-index:310; width:340px; max-width:calc(100vw - 24px);
  background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-lg);
  padding:22px 22px 20px;
  opacity:0; visibility:hidden; transform:translateY(-8px) scale(.985); transform-origin:top right;
  transition:opacity .16s ease, transform .16s ease, visibility .16s; }
.login-modal.open { opacity:1; visibility:visible; transform:none; }
.login-modal::before { content:""; position:absolute; top:-8px; right:36px; width:15px; height:15px; background:var(--card); border-left:1px solid var(--line); border-top:1px solid var(--line); transform:rotate(45deg); border-radius:3px 0 0 0; }
.login-modal .lm-close { position:absolute; top:12px; right:16px; background:none; border:0; font-size:24px; line-height:1; color:var(--ink-faint); cursor:pointer; }
.login-modal .lm-close:hover { color:var(--ink); }
.login-modal .lm-head { text-align:left; margin-bottom:18px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.login-modal .lm-crest { width:40px; height:40px; flex-shrink:0; }
.login-modal .lm-crest img { width:100%; height:100%; object-fit:contain; }
.login-modal .lm-head h3 { font-family:var(--font-display); text-transform:uppercase; font-size:19px; letter-spacing:.01em; line-height:1; }
.login-modal .lm-head p { flex-basis:100%; font-size:13px; color:var(--ink-soft); margin:2px 0 0; line-height:1.45; }
.login-modal .lm-field { margin-bottom:12px; }
.login-modal .lm-field label { display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px; }
.login-modal .lm-field input { width:100%; border:1.5px solid var(--line-strong); border-radius:7px; padding:11px 13px; font-family:var(--font-body); font-size:15px; background:var(--paper); color:var(--ink); }
.login-modal .lm-field input:focus { outline:none; border-color:var(--accent); }
.login-modal .lm-row { display:flex; align-items:center; justify-content:space-between; margin:4px 0 14px; font-size:13px; }
.login-modal .lm-remember { display:flex; align-items:center; gap:7px; color:var(--ink-soft); cursor:pointer; }
.login-modal .lm-remember input { width:15px; height:15px; accent-color:var(--accent); }
.login-modal .lm-forgot { color:var(--accent-deep); }
.login-modal .lm-forgot:hover { text-decoration:underline; }
.login-modal .lm-error { display:none; background:color-mix(in oklab, var(--red) 10%, white); color:var(--red); border:1px solid color-mix(in oklab, var(--red) 30%, white); border-radius:6px; padding:8px 11px; font-size:12.5px; margin-bottom:12px; line-height:1.4; }
.login-modal .lm-error.show { display:block; }
.login-modal .lm-divider { display:flex; align-items:center; gap:12px; margin:16px 0 12px; }
.login-modal .lm-divider::before, .login-modal .lm-divider::after { content:""; flex:1; height:1px; background:var(--line); }
.login-modal .lm-divider span { font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }
@media (max-width:480px){
  .login-modal { left:12px; right:12px; width:auto; }
  .login-modal::before { right:auto; left:50%; }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1080px) {
  .mainnav, .nav-cta { display:none; }
  .utilbar .util-contact { display:none; }
  .burger { display:block; }
  .site-footer .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .wrap { padding: 0 18px; }
  .section-pad { padding: 52px 0; }
  .utilbar .util-contact { display:none; }
  .utilbar .util-socials { gap:14px; }
  .site-footer .foot-grid { grid-template-columns: 1fr; gap: 28px; }
  .wordmark .wm-sub { display:none; }
}