/* ===================================================================
   Golf theme: "Scorecard". Loaded after main.css on golf.thegearsports.com only.
   Navy and cream like a printed scorecard, a pin-flag yellow highlight,
   a golf-ball dimple pattern in the hero with an 18-hole scorecard strip
   beneath it, hole-numbered cards and scorecard-grid tables.
   =================================================================== */
html:root {
  --paper:       #f8f6ef;
  --paper-2:     #efece1;
  --ink:         #13202e;
  --ink-soft:    #3f4b58;
  --ink-faint:   #5d6875;
  --line:        #d9d4c4;
  --accent:      #12304f;
  --accent-deep: #0c2238;
  --accent-soft: #e3eaf2;
  --white:       #ffffff;
  --navy:        #12304f;
  --flag:        #f2c230;
  --fairway:     #2f6b3a;
  --link:        #1d4f91;
  --display: 'DM Serif Display', Georgia, serif;
  --body:    'Public Sans', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, monospace;
  --radius:  2px;
}
html:root[data-theme="dark"] {
  --paper:       #0e1621;
  --paper-2:     #142030;
  --ink:         #eef1f4;
  --ink-soft:    #c3cbd4;
  --ink-faint:   #98a3af;
  --line:        #263446;
  --accent:      #8fb8e8;
  --accent-deep: #b5d0f0;
  --accent-soft: #18283b;
  --white:       #142030;
  --link:        #9cc3f0;
}

body { font-size: 1.05rem; }
body::before { display: none; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: 0; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-deep); }
.eyebrow { color: var(--fairway); font-family: var(--mono); font-weight: 500; letter-spacing: .12em; }
html[data-theme="dark"] .eyebrow { color: #8fd19e; }

/* Nav: navy with a pin-flag yellow rule */
.nav { background: var(--navy); border-bottom: 3px solid var(--flag); backdrop-filter: none; }
html[data-theme="dark"] .nav { background: #0b1a2b; }
.brand { color: #f8f6ef; }
.brand .rev { color: var(--flag); font-style: italic; }
.brand__mark { background: var(--flag); color: var(--navy); }
.brand__sub { color: #b9c8d8; }
.nav__links a { color: #f8f6ef; font-weight: 600; font-size: .9rem; }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--flag); }
.nav__cta { background: var(--flag); color: var(--navy) !important; }
.nav__cta:hover { background: #f8f6ef; }
.nav__toggle span { background: #f8f6ef; }
.nav .iconbtn { background: transparent; border-color: #2b4a6d; color: #f8f6ef; }
.nav .iconbtn:hover { color: var(--flag); border-color: var(--flag); }
@media (max-width: 1120px) {
  .nav__links { background: var(--navy); border-bottom-color: #2b4a6d; }
  .nav__links a { border-bottom-color: #1d3d60; }
}

/* Hero: golf-ball dimples on navy, then an 18-hole scorecard strip */
.hero {
  background-color: var(--navy); color: #fff;
  background-image:
    radial-gradient(ellipse at 70% 0%, rgba(255,255,255,.10), rgba(0,0,0,0) 55%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.07) 0 6px, transparent 7px);
  background-size: auto, 22px 22px;
  padding-bottom: calc(clamp(2.5rem,6vw,4rem) + 30px);
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: auto;
  width: auto; height: 30px; aspect-ratio: auto; transform: none; border-radius: 0; opacity: 1; filter: none;
  background:
    repeating-linear-gradient(90deg, #f8f6ef 0 calc(100% / 18 - 1px), #c9c2ad calc(100% / 18 - 1px) calc(100% / 18));
  border-top: 3px solid var(--flag);
}
.hero h1 { color: #fff; }
.hero h1 .spin { color: var(--flag); font-style: italic; }
.hero h1 .hero__brand { color: var(--flag); font-family: var(--mono); font-weight: 500; font-style: normal; font-size: .2em; letter-spacing: .24em; text-transform: uppercase; }
.hero .eyebrow { color: #cfe3d3; }
.hero .lede { color: #dde6ef; }
.hero .btn--solid { background: var(--flag); border-color: var(--flag); color: var(--navy); }
.hero .btn--solid:hover { background: #fff; border-color: #fff; }
.hero .btn--ghost { border-color: #fff; color: #fff; }
.hero .btn--ghost:hover { background: #fff; color: var(--navy); }

.btn { font-weight: 700; }

/* Cards: numbered like scorecard holes, in a boxed cell */
.card::before { display: none; }
.card:hover { border-color: var(--navy); }
a.card > .card__num { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 .3rem;
  border: 2px solid var(--navy); background: var(--white); color: var(--navy); font-family: var(--mono); font-weight: 500; font-size: .95rem; }
html[data-theme="dark"] a.card > .card__num { border-color: var(--accent); color: var(--accent); }
.card__tag { color: var(--fairway); font-family: var(--mono); }
html[data-theme="dark"] .card__tag { color: #8fd19e; }

/* Section headings: a small pin flag before the title */
.shead { border-bottom: 2px solid var(--navy); }
html[data-theme="dark"] .shead { border-bottom-color: var(--accent); }
.shead h2::before { content: ""; display: inline-block; width: .5em; height: .36em; margin-right: .5em; background: var(--flag);
  box-shadow: -2px 0 0 0 var(--ink); vertical-align: .32em; }

.callout { background: var(--accent-soft); border: 0; border-left: 4px solid var(--fairway); }

/* Tables: scorecard grid */
.facts { border: 2px solid var(--navy); }
.facts thead th { background: var(--navy); color: #f8f6ef; font-family: var(--mono); font-weight: 500; border-bottom: 3px solid var(--flag); }
.facts td { border: 1px solid var(--line); }
.facts tbody tr:nth-child(even) td { background: #fbfaf5; }
html[data-theme="dark"] .facts { border-color: #2b4a6d; }
html[data-theme="dark"] .facts tbody tr:nth-child(even) td { background: #111c29; }

/* Gear box: scorecard card with a yellow flag edge */
.gearline { background: var(--white); border: 2px solid var(--navy); border-left: 8px solid var(--flag); }
html[data-theme="dark"] .gearline { border-color: #2b4a6d; border-left-color: var(--flag); }
.gearline__t { color: var(--navy); }
html[data-theme="dark"] .gearline__t { color: var(--accent); }
.gearline a.btn { background: var(--navy); border-color: var(--navy); color: #fff; }

.footer { background: #0b1a2b; border-top: 3px solid var(--flag); }
.footer, .footer a, .footer__bottom a { color: #e4e9ef; }
.footer__brand .rev { color: var(--flag); }
.footer h4 { color: var(--flag); }

.pick__cta .btn--solid { background: var(--navy); border-color: var(--navy); color: #fff; }
.pick__cta .btn--solid:hover { background: var(--fairway); border-color: var(--fairway); }