/* ===================================================================
   Scuba theme: "Dive Line". Loaded after main.css on scuba.thegearsports.com only.
   Deep-water teal that darkens with depth, light caustics in the hero, a
   gauge-tick strip along its base, dial-ring card markers, and surface
   marker buoy orange for the rules that matter (the Get trained callout).
   =================================================================== */
html:root {
  --paper:       #f3f8f9;
  --paper-2:     #e4eff1;
  --ink:         #0c2229;
  --ink-soft:    #34505a;
  --ink-faint:   #55707a;
  --line:        #cfe0e4;
  --accent:      #00737e;
  --accent-deep: #005962;
  --accent-soft: #d6eef0;
  --white:       #ffffff;
  --deep:        #062a33;
  --smb:         #ff6a13;
  --smb-soft:    #fff0e6;
  --display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --body:    'Nunito Sans', system-ui, sans-serif;
  --radius:  10px;
}
html:root[data-theme="dark"] {
  --paper:       #071a20;
  --paper-2:     #0c252d;
  --ink:         #e6f3f5;
  --ink-soft:    #b5cdd3;
  --ink-faint:   #8aa7ae;
  --line:        #17363f;
  --accent:      #38c4cf;
  --accent-deep: #6ad6de;
  --accent-soft: #0f3036;
  --white:       #0c252d;
  --smb-soft:    #2a1a10;
}

body { font-size: 1.05rem; }
body::before { display: none; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -.01em; }
h1 { line-height: 1.02; }
h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-deep); }
.eyebrow { color: var(--accent); font-family: var(--body); font-weight: 800; letter-spacing: .14em; }

/* Nav: deep water with an orange surface-marker line */
.nav { background: var(--deep); border-bottom: 3px solid var(--smb); backdrop-filter: none; }
html[data-theme="dark"] .nav { background: #04161b; }
.brand { color: #eef8f9; white-space: nowrap; letter-spacing: -.02em; }
.brand .rev { color: #6ad6de; }
.brand__mark { background: var(--smb); color: #1b0d03; }
.brand__sub { color: #a9c7cd; }
.nav__links a { color: #eef8f9; font-weight: 600; font-size: .93rem; }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: #6ad6de; }
.nav__cta { background: var(--smb); color: #1b0d03 !important; }
.nav__cta:hover { background: #eef8f9; color: var(--deep) !important; }
.nav__toggle span { background: #eef8f9; }
.nav .iconbtn { background: transparent; border-color: #1d4b56; color: #eef8f9; }
.nav .iconbtn:hover { color: #6ad6de; border-color: #6ad6de; }
@media (max-width: 1120px) {
  .nav__links { background: var(--deep); border-bottom-color: #1d4b56; }
  .nav__links a { border-bottom-color: #10394a; }
}

/* Hero: water that darkens with depth, light caustics near the surface, gauge ticks at the base */
.hero {
  background-color: #08414d; color: #eef8f9;
  background-image:
    radial-gradient(ellipse 60% 40% at 30% -10%, rgba(255,255,255,.22), rgba(255,255,255,0) 70%),
    radial-gradient(circle at 12% 22%, rgba(255,255,255,.06) 0 22px, transparent 23px),
    radial-gradient(circle at 78% 30%, rgba(255,255,255,.05) 0 34px, transparent 35px),
    radial-gradient(circle at 58% 12%, rgba(255,255,255,.05) 0 16px, transparent 17px),
    linear-gradient(180deg, #0e7482 0%, #08414d 55%, #052b34 100%);
  padding-bottom: calc(clamp(2.5rem,6vw,4rem) + 26px);
}
html[data-theme="dark"] .hero { background-color: #052129;
  background-image:
    radial-gradient(ellipse 60% 40% at 30% -10%, rgba(106,214,222,.16), rgba(106,214,222,0) 70%),
    radial-gradient(circle at 12% 22%, rgba(255,255,255,.04) 0 22px, transparent 23px),
    radial-gradient(circle at 78% 30%, rgba(255,255,255,.035) 0 34px, transparent 35px),
    linear-gradient(180deg, #0a4b57 0%, #062e37 55%, #03181e 100%); }
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: auto;
  width: auto; height: 26px; aspect-ratio: auto; transform: none; border-radius: 0; opacity: 1; filter: none;
  background:
    repeating-linear-gradient(90deg, rgba(238,248,249,.55) 0 2px, transparent 2px 24px) bottom / 100% 10px no-repeat,
    repeating-linear-gradient(90deg, rgba(238,248,249,.9) 0 2px, transparent 2px 120px) bottom / 100% 20px no-repeat,
    #031c22;
  border-top: 2px solid var(--smb);
}
.hero h1 { color: #ffffff; }
.hero h1 .spin { color: #ffb37f; }
.hero h1 .hero__brand { color: #6ad6de; font-family: var(--body); font-weight: 800; font-size: .2em; letter-spacing: .24em; text-transform: uppercase; }
.hero .lede { color: #cfe6ea; }
.hero .eyebrow { color: #ffb37f; }
.hero .btn--solid { background: var(--smb); border-color: var(--smb); color: #1b0d03; }
.hero .btn--solid:hover { background: #ffffff; border-color: #ffffff; color: var(--deep); }
.hero .btn--ghost { border-color: #eef8f9; color: #eef8f9; }

.btn { font-weight: 700; }

/* Cards: dial-ring numbers, like a gauge face */
.card::before { display: none; }
.card:hover { border-color: var(--accent); }
a.card > .card__num { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 2px solid var(--accent); font-family: var(--display); font-weight: 700; font-size: 1rem; line-height: 1; color: var(--accent); }
.card__tag { color: var(--accent); font-weight: 800; }

/* Section headings: a thin depth line */
.shead { border-bottom: 2px solid var(--line); }
.shead h2::before { content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .45em; border-radius: 50%;
  border: 2px solid var(--smb); vertical-align: .05em; }

/* Callouts: the Get trained box is the one that must be seen; surface-marker orange */
.callout { background: var(--smb-soft); border: 0; border-left: 4px solid var(--smb); }
.callout .eyebrow { color: #b34400; }
html[data-theme="dark"] .callout .eyebrow { color: #ffb37f; }

/* Tables: deep-water headers */
.facts thead th { background: var(--deep); color: #eef8f9; border-bottom: 3px solid var(--accent); letter-spacing: .03em; }
html[data-theme="dark"] .facts thead th { background: #04161b; border-bottom-color: var(--accent); }
.facts tbody tr:nth-child(even) td { background: #f7fbfc; }
html[data-theme="dark"] .facts tbody tr:nth-child(even) td { background: #0a2128; }

/* Gear box: a cylinder with its valve-end band */
.gearline { background: var(--white); border: 2px solid var(--accent); border-top: 8px solid var(--accent); }
html[data-theme="dark"] .gearline { border-color: #1d4b56; border-top-color: var(--accent); }
.gearline__t { color: var(--deep); }
html[data-theme="dark"] .gearline__t { color: #eef8f9; }
.gearline a.btn { background: var(--accent); border-color: var(--accent); color: #fff; }
html[data-theme="dark"] .gearline a.btn { color: #03181e; }

.footer { background: #04161b; border-top: 3px solid var(--smb); }
.footer, .footer a, .footer__bottom a { color: #dcebee; }
.footer__brand .rev { color: #6ad6de; }
.footer h4 { color: #6ad6de; }

.pick__cta .btn--solid { background: var(--accent); border-color: var(--accent); color: #fff; }
.pick__cta .btn--solid:hover { background: var(--deep); border-color: var(--deep); }
html[data-theme="dark"] .pick__cta .btn--solid { color: #03181e; }