/* MVP Golf hosted course page. Course colors arrive as --primary, --accent, --accent-text. */

@font-face { font-family: "Archivo"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/archivo-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 800; font-style: normal; font-display: swap; src: url("../fonts/archivo-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }

:root {
  --primary: #103547;
  --accent: #00BF63;
  --accent-text: #00733D;
  --paper: #E9EFF1;
  --card: #FBFCFD;
  --card-border: #D3DEE2;
  --body: #42555E;
  --on-dark: #DCE7EB;
  --on-dark-muted: #93AAB6;
  --display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --text: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --gutter: 16px;
  --radius-sm: 6px;
  --radius: 12px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font: 400 1rem/1.55 var(--text);
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: var(--accent-text); text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); color: var(--primary); line-height: 1.05; margin: 0; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 4px; }
.bar :focus-visible, .hero :focus-visible, .callout :focus-visible, .foot :focus-visible { outline-color: var(--accent); }
.player__start:focus-visible { outline: 3px solid #fff; outline-offset: -8px; box-shadow: inset 0 0 0 8px var(--primary); }
.player__end :focus-visible { outline-color: var(--accent); }
.player__error :focus-visible { outline-color: var(--primary); }
.player__video:focus { outline: none; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 720px) { :root { --gutter: 32px; } }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 10; background: var(--card); color: var(--primary); padding: 10px 14px; border-radius: var(--radius-sm); }
.skip:focus { left: 8px; }

/* ---------- brand bar ---------- */
.bar { background: var(--primary); }
.bar__inner { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 12px; }
.bar__home { display: inline-flex; align-items: center; min-height: 48px; text-decoration: none; }
.bar__mvp { height: 36px; width: auto; }
.bar__course-logo { height: 44px; width: auto; }
.bar__course-name { font: 800 1.25rem/1 var(--display); color: #fff; }
.bar__credit { display: inline-flex; align-items: center; gap: 8px; font-size: .8125rem; color: var(--on-dark-muted); }
.bar__credit img { height: 22px; width: auto; }

/* ---------- hero band ---------- */
.hero { background: var(--primary); color: var(--on-dark); padding: 20px 0 32px; }
.hero h1, .hero h2 { color: #fff; }
.hero__title {
  font-weight: 800;
  font-size: clamp(2.6rem, 11vw, 5.5rem);
  letter-spacing: -0.02em;
  line-height: .95;
  margin: 8px 0 10px;
}
.hero__tagline { font-size: 1.0625rem; max-width: 34em; margin-bottom: 20px; color: var(--on-dark); }
.crumb { font-size: .9375rem; margin-bottom: 0; }
.crumb a { color: var(--on-dark); display: inline-flex; align-items: center; min-height: 44px; }

/* The hole number is the one big moment on a hole page: a scorecard numeral. */
.hole-title { display: flex; align-items: baseline; gap: .18em; margin: 4px 0 14px; }
.hole-title__word { font-weight: 600; font-size: clamp(1.5rem, 6vw, 2.25rem); color: var(--on-dark); letter-spacing: .01em; }
.hole-title__num { font-weight: 800; font-size: clamp(5rem, 28vw, 10rem); line-height: .8; color: var(--accent); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.presented { font-size: .9375rem; color: var(--on-dark); margin: -4px 0 14px; }

.facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 18px; }
.facts div { display: flex; flex-direction: column; }
.facts dt { font-size: .8125rem; color: var(--on-dark-muted); }
.facts dd { margin: 0; font: 800 1.5rem/1.1 var(--display); color: #fff; }
.facts .unit { font: 400 .875rem var(--text); color: var(--on-dark); }

/* ---------- player ---------- */
.player { max-width: 960px; }
.player__frame { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius); overflow: hidden; }
.player.is-vertical .player__frame { aspect-ratio: 9 / 16; max-width: min(100%, 420px); max-height: 78vh; margin: 0 auto; }
.player__video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.player__start {
  position: absolute; inset: 0; width: 100%; border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: linear-gradient(to top, rgba(16, 53, 71, .55), rgba(16, 53, 71, .05) 60%);
  background: linear-gradient(to top, color-mix(in srgb, var(--primary) 55%, transparent), color-mix(in srgb, var(--primary) 5%, transparent) 60%);
  color: #fff; font: 600 1rem var(--text);
}
.player__start svg { width: 76px; height: 76px; color: var(--accent); filter: drop-shadow(0 4px 14px rgba(0,0,0,.35)); transition: transform .15s ease; }
.player__start:hover svg { transform: scale(1.06); }
.player__start span { background: rgba(16, 53, 71, .82); background: color-mix(in srgb, var(--primary) 85%, transparent); padding: 6px 12px; border-radius: 999px; }
.player__splash, .player__end, .player__error { z-index: 2; }
.player__splash[hidden], .player__end[hidden], .player__start[hidden], .player__error[hidden] { display: none; }

/* Opening sponsor splash: covers the frame, then the video shows through and the sponsor
   slides to the lower corner and fades. pointer-events: none keeps the video controls usable. */
.player__splash {
  position: absolute; inset: 0; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary);
  transition: background-color .9s ease;
}
.splash__content {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  color: #fff; transform-origin: left bottom;
  transition: transform .9s ease, opacity .5s ease;
}
.splash__kicker { font-size: .9375rem; color: var(--on-dark); }
.splash__plate { background: var(--card); border-radius: var(--radius-sm); padding: 6px; width: min(56vw, 280px); }
.player.is-vertical .splash__plate { width: min(64vw, 240px); }
.splash__logo { width: 100%; height: auto; }
.player__splash.is-clearing { background: transparent; background: color-mix(in srgb, var(--primary) 0%, transparent); align-items: flex-end; justify-content: flex-start; padding: 0 0 64px 12px; }
.player__splash.is-clearing .splash__content { transform: scale(.55); align-items: flex-start; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.player__splash.is-leaving .splash__content { opacity: 0; }

/* End screen: thanks the sponsor; golfers who scanned a course QR code also see the offer. */
.player__end {
  position: absolute; inset: 0; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: 10px; padding: 14px; background: var(--primary); color: var(--on-dark);
}
.end__sponsor { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.end__kicker { font-size: .9375rem; }
.end__tag, .tag { display: inline-block; font-size: .8125rem; font-weight: 600; color: var(--primary); background: var(--paper); border: 1px solid var(--card-border); border-radius: 999px; padding: 2px 10px; }
.offer { width: min(100%, 360px); background: var(--card); color: var(--body); border-radius: var(--radius-sm); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.offer__headline { font: 800 clamp(1.25rem, 5vw, 1.6rem)/1.1 var(--display); color: var(--primary); }
.offer__details { font-size: .9375rem; }
.offer__code { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin-top: 4px; }
.offer__code-label { font-size: .8125rem; }
.offer__code strong { font: 800 1.4rem/1 var(--display); letter-spacing: .06em; color: var(--accent-text); border: 2px dashed var(--accent-text); border-radius: var(--radius-sm); padding: 4px 10px; }
.offer__valid { font-size: .8125rem; }
.player__end .actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.player__end .btn--outline { color: #fff; border-color: var(--on-dark-muted); }
@media (max-width: 699px) {
  /* A wide frame is too short for the end screen on a phone, so it grows while the end screen shows. */
  .player.is-ended:not(.is-vertical) .player__frame { aspect-ratio: 4 / 5; }
  .player:not(.is-vertical) .player__end .splash__plate { width: min(46vw, 200px); }
}
.player__error { position: absolute; left: 12px; right: 12px; bottom: 12px; background: var(--card); color: var(--primary); border-radius: var(--radius-sm); padding: 10px 12px; font-size: .9375rem; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; }


.chapters { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 12px 0 0; }
.chapters button { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--on-dark-muted); background: transparent; color: #fff; font: 600 .875rem var(--text); cursor: pointer; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border-radius: 999px; font: 600 1rem var(--text); text-decoration: none; border: 2px solid transparent; cursor: pointer; }
.btn--accent { background: var(--accent); color: var(--primary); }
.btn--light { background: var(--card); color: var(--primary); }
.btn--outline { background: transparent; color: var(--primary); border-color: var(--primary); }

/* ---------- notes ---------- */
.note { display: flex; gap: 10px; align-items: flex-start; margin: 20px 0 0; padding: 12px 14px; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-sm); font-size: .9375rem; color: var(--body); max-width: 760px; }
.note__icon { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--accent-text); }

/* ---------- hole grid: a scorecard row of tiles ---------- */
.nine { margin: 32px 0 0; }
.nine__title { font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 800; margin-bottom: 12px; }
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(5, 1fr); gap: 10px; } }
@media (min-width: 1000px) { .tiles { grid-template-columns: repeat(9, 1fr); } }
.tile { position: relative; display: block; border-radius: var(--radius-sm); overflow: hidden; background: var(--primary); text-decoration: none; aspect-ratio: 4 / 5; }
.tile img { width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: opacity .15s ease, transform .25s ease; }
.tile:hover img { opacity: 1; transform: scale(1.04); }
.tile__label { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 8px 6px; background: linear-gradient(to top, var(--primary) 45%, transparent); color: #fff; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
.tile__word { font-size: .8125rem; color: var(--on-dark); }
.tile__num { font: 800 2.1rem/1 var(--display); letter-spacing: -0.02em; color: #fff; }
.tile__par { flex-basis: 100%; font-size: .8125rem; color: var(--on-dark); }

/* ---------- hole page ---------- */
.hole-sponsor { margin: 18px 0 0; font-size: 1rem; }
.hole-sponsor strong { color: var(--primary); }
.holenav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: stretch; margin: 24px 0 40px; }
.holenav a { display: flex; flex-direction: column; justify-content: center; min-height: 56px; padding: 8px 14px; border-radius: var(--radius-sm); background: var(--card); border: 1px solid var(--card-border); color: var(--primary); text-decoration: none; font: 800 1.125rem/1.1 var(--display); }
.holenav__next { text-align: right; align-items: flex-end; }
.holenav__all { align-items: center; font: 600 .9375rem var(--text) !important; }
.holenav__dir { font: 400 .8125rem var(--text); color: var(--body); }

/* ---------- sponsors ---------- */
.sponsors { margin-top: 48px; padding: 32px 0; background: var(--card); border-top: 1px solid var(--card-border); border-bottom: 1px solid var(--card-border); }
.sponsors h2 { font-size: 1.5rem; font-weight: 800; }
.sponsors__note { margin-top: 6px; font-size: .9375rem; }
.sponsors__list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 720px) { .sponsors__list { grid-template-columns: repeat(4, 1fr); } }
.sponsors__list img { width: 100%; height: auto; }
.sponsors__list figure { margin: 0; }
.sponsors__list figcaption { margin-top: 6px; font-size: .9375rem; font-weight: 600; color: var(--primary); }
.sponsors__list a { text-decoration: none; display: block; }

/* ---------- sample callout ---------- */
.callout { background: var(--primary); color: var(--on-dark); padding: 32px 0; }
.callout__inner { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
.callout h2 { color: #fff; font-size: 1.5rem; font-weight: 800; margin-bottom: 6px; }
.callout p { max-width: 36em; }
.page-home .callout { margin-top: 0; }
.page-home main > .wrap:last-of-type { padding-bottom: 8px; }

/* ---------- report ---------- */
.sample-banner { position: sticky; top: 0; z-index: 5; background: #FFF3C4; color: #3B2F00; border-bottom: 2px solid #C9A227; font-size: .9375rem; padding: 10px 0; }
.sample-banner strong { font-weight: 600; }
.report-title { color: #fff; font-weight: 800; font-size: clamp(2rem, 8vw, 3.5rem); margin: 6px 0 10px; }
.report { padding-bottom: 40px; }
.stat { margin: 24px 0 8px; }
.stat__num { font: 800 clamp(3rem, 14vw, 5rem)/1 var(--display); color: var(--primary); letter-spacing: -0.02em; }
.stat__label { margin-top: 4px; }
.panel { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 18px 16px; margin-top: 16px; }
.panel h2 { font-size: 1.375rem; font-weight: 800; }
.panel__sub { margin: 4px 0 10px; font-size: .9375rem; }
.chart { width: 100%; height: auto; }
.chart .grid { stroke: var(--card-border); stroke-width: 1; }
.chart .axis__label { fill: var(--body); font: 400 13px var(--text); }
.chart .bar path { fill: var(--primary); }
.chart .bar--max path { fill: var(--accent-text); }
.chart .bar:hover path, .chart .bar:focus path { fill: var(--accent-text); }
.chart .bar__value { fill: var(--primary); font: 800 15px var(--display); }
.chart--line polyline { fill: none; stroke: var(--primary); stroke-width: 2; stroke-linejoin: round; }
.chart--line circle { fill: var(--primary); stroke: var(--card); stroke-width: 2; }
.chart--line .pt:hover circle, .chart--line .pt:focus circle { fill: var(--accent-text); r: 7; }
.chart g:focus { outline: none; }
.hbars { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.hbars li { display: grid; grid-template-columns: 7.5em 1fr 3em; gap: 10px; align-items: center; }
.hbars__track { height: 14px; background: var(--paper); border-radius: 4px; overflow: hidden; }
.hbars__fill { display: block; height: 100%; background: var(--primary); border-radius: 0 4px 4px 0; }
.hbars__value { font: 800 1.0625rem var(--display); color: var(--primary); text-align: right; }
.table-view { margin-top: 10px; font-size: .9375rem; }
.table-view summary { cursor: pointer; color: var(--accent-text); font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.table-view table { border-collapse: collapse; margin-top: 6px; min-width: 200px; }
.table-view caption { text-align: left; font-weight: 600; padding-bottom: 4px; }
.table-view th, .table-view td { text-align: left; padding: 4px 16px 4px 0; border-bottom: 1px solid var(--card-border); }
.report__foot { margin-top: 18px; font-size: .9375rem; max-width: 46em; }

/* ---------- footer ---------- */
.foot { background: var(--primary); color: var(--on-dark); padding: 28px 0 36px; border-top: 1px solid rgba(255,255,255,.08); }
.foot__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.foot img { height: 40px; width: auto; }
.foot p { font-size: .9375rem; }
main + .foot { margin-top: 0; }
.page-hole main, .page-404 main { padding-bottom: 8px; }

/* Without JavaScript the plain video controls are used; the start button stays hidden. */
html:not(.js) .player__start { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation-duration: .001s !important; }
}

/* column charts (report) */
.cols { display: grid; grid-template-columns: auto 1fr; gap: 6px; margin-top: 8px; }
.cols__axis { display: flex; flex-direction: column; justify-content: space-between; height: 180px; font-size: .75rem; text-align: right; padding-bottom: 0; }
.cols__axis span { transform: translateY(-50%); }
.cols__axis span:last-child { transform: translateY(0); }
.cols__plot { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 3px; height: 206px; align-items: end;
  background: linear-gradient(var(--card-border), var(--card-border)) 0 0 / 100% 1px no-repeat,
              linear-gradient(var(--card-border), var(--card-border)) 0 90px / 100% 1px no-repeat,
              linear-gradient(var(--card-border), var(--card-border)) 0 180px / 100% 1px no-repeat; }
.cols__col { display: grid; grid-template-rows: 180px 26px; align-items: end; outline-offset: 1px; }
.cols__bar { position: relative; display: block; background: var(--primary); border-radius: 4px 4px 0 0; min-height: 2px; }
.cols__col:hover .cols__bar, .cols__col:focus .cols__bar { background: var(--accent-text); }
.cols__col--month .cols__bar { background: var(--accent-text); }
.cols__col--month:hover .cols__bar, .cols__col--month:focus .cols__bar { background: var(--primary); }
.cols__value { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding-bottom: 2px; font: 800 .8125rem var(--display); color: var(--primary); white-space: nowrap; }
.cols__label { align-self: center; text-align: center; font-size: .75rem; }
.key { white-space: nowrap; font-weight: 600; color: var(--accent-text); }
.key i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--accent-text); margin-right: 4px; }

/* Home page: the course opens on hole 1 instead of a long full-course video. */
.tour { position: relative; display: block; max-width: 960px; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; text-decoration: none; }
.tour__img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.tour:hover .tour__img { transform: scale(1.03); }
.tour__label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #fff; font: 600 1.0625rem var(--text);
  background: linear-gradient(to top, rgba(16, 53, 71, .55), rgba(16, 53, 71, .05) 60%);
  background: linear-gradient(to top, color-mix(in srgb, var(--primary) 55%, transparent), color-mix(in srgb, var(--primary) 5%, transparent) 60%); }
.tour__label svg { width: 76px; height: 76px; color: var(--accent); filter: drop-shadow(0 4px 14px rgba(0,0,0,.35)); }
.tour__label > span { background: rgba(16, 53, 71, .82); background: color-mix(in srgb, var(--primary) 85%, transparent); padding: 6px 14px; border-radius: 999px; }
.tour:focus-visible { outline-color: var(--accent); }

/* Links back to the course's own website */
.sitenav { border-top: 1px solid rgba(255,255,255,.1); }
.sitenav__inner { display: flex; flex-wrap: wrap; align-items: center; column-gap: 18px; }
.sitenav a, .sitenav__stub { display: inline-flex; align-items: center; min-height: 44px; font-size: .9375rem; color: var(--on-dark); text-decoration: none; }
.sitenav a:hover { text-decoration: underline; }
.sitenav__home { font-weight: 600; color: #fff; }
.sitenav__home::before { content: "\2190"; margin-right: 6px; }
.sitenav__stub { color: var(--on-dark-muted); text-decoration: underline dashed; text-underline-offset: 4px; }
.sitenav__note { flex-basis: 100%; font-size: .8125rem; color: var(--on-dark-muted); padding-bottom: 8px; }
@media (min-width: 700px) { .sitenav__note { flex-basis: auto; padding-bottom: 0; } }

/* Shown when a phone starts the video with the sound off */
.player__sound { position: absolute; top: 10px; right: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(16, 53, 71, .88); background: color-mix(in srgb, var(--primary) 88%, transparent); color: #fff; font: 600 .9375rem var(--text); cursor: pointer; }
.player__sound svg { width: 20px; height: 20px; }
.player__sound[hidden] { display: none; }
.player__sound:focus-visible { outline-color: #fff; }