/*

Theme Name: Night Sea

Theme URI: https://surfgalleon.com/

Description: SurfGalleon's chart-room theme - deep ink-sea panels, lantern gold, antique chart typography. Built for surfgalleon.com.

Version: 1.0

Author: SurfGalleon

*/

/* ============================================================
   1. Tokens
   ============================================================ */
:root {
  --sea-0:  #081118;   /* abyss / page ground */
  --sea-1:  #0D1A21;   /* base */
  --sea-2:  #13252E;   /* panel */
  --sea-3:  #1A3140;   /* panel raised */
  --line:   #24404A;
  --line-soft: #1C3540;
  --gold:   #E3AE4F;   /* lantern */
  --gold-deep: #B8842E;
  --teal:   #4FA39C;   /* sea */
  --parch:  #E7DCC4;   /* body text */
  --mist:   #93A5A0;   /* muted text */
  --red:    #D4604A;
  --good:   #6FB477;

  --serif: "IM Fell English", Georgia, "Times New Roman", serif;
  --body:  "Alegreya", Georgia, serif;
  --mono:  "IBM Plex Mono", Consolas, monospace;

  --radius: 8px;
  --shadow: 0 6px 28px rgba(0, 0, 0, .45);
  --onGold: #241703;   /* readable ink on a gold button */
  --bg:
    radial-gradient(1100px 520px at 78% -120px, #14303c 0%, transparent 60%),
    radial-gradient(820px 400px at 10% -80px, #10242e 0%, transparent 60%),
    linear-gradient(180deg, #081118 0%, #0D1A21 55%, #0B1B23 100%);
}

/* ============================================================
   2. Base
   ============================================================ */
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  background-attachment: fixed;
  color: var(--parch);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--parch);
  text-wrap: balance;
}
h1 { font-size: clamp(34px, 5vw, 52px); line-height: 1.08; }
h2 { font-size: clamp(27px, 3.6vw, 36px); }
h3 { font-size: 24px; color: var(--gold); }
h4 { font-size: 20px; }

p { max-width: 72ch; }

a { color: var(--teal); text-decoration: none; transition: color .15s; }
a:hover { color: var(--gold); text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

hr { border: 0; border-top: 1px solid var(--line); opacity: 1; }

::selection { background: var(--gold); color: var(--onGold); }

/* ============================================================
   3. Menu bar
   ============================================================ */
.lfm_menu_bar {
  background: rgba(8, 17, 24, .94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
  position: sticky;
  top: 0;
  z-index: 1030;
}
.lfm_menu_bar .navbar { padding: .4rem 1rem; }

.lfm_menu_logo {
  height: 52px;
  max-height: 52px;
  width: auto;
  vertical-align: middle;
  display: block;
}
@media (max-width: 991px) { .lfm_menu_logo { height: 42px; } }

/* Wordmark fallback when no logo image is set */
.sg-wordmark {
  font-family: var(--serif);
  font-size: 25px;
  letter-spacing: .01em;
  white-space: nowrap;
  line-height: 1;
}
.sg-wordmark .sg-a { color: var(--teal); }
.sg-wordmark .sg-b { color: var(--gold); }

.lfm_menu_bar .nav > li > a,
.lfm_menu_bar .navbar-nav > li > a,
.lfm_menu_bar .nav-link {
  color: var(--mist) !important;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 10px 14px !important;
  border: 1px solid transparent;
  border-radius: 6px;
  transition: color .15s, border-color .15s, background .15s;
}
.lfm_menu_bar .nav > li > a:hover,
.lfm_menu_bar .navbar-nav > li > a:hover,
.lfm_menu_bar .nav-link:hover {
  color: var(--parch) !important;
  border-color: var(--line);
  background: rgba(255, 255, 255, .03);
}
.lfm_menu_bar .nav > li.active > a,
.lfm_menu_bar .nav > li > a.active {
  color: var(--gold) !important;
  border-color: var(--gold-deep);
  background: rgba(227, 174, 79, .08);
}

/* --- Member menu: LFMTE renders tabs on one row and the OPEN tab's items on a
   second row. Stock styling leaves them looking like two unrelated menus, so
   bind them visually: tabs read as tabs, the sub-row as a connected sub-bar. --- */
.lfm_menu_bar .navbar-nav { align-items: center; row-gap: 0; }

.lfm_menu_bar .nav-item > a.nav-link {
  border-radius: 6px 6px 0 0;
  border-bottom: 2px solid transparent;
}
.lfm_menu_bar .nav-item.lfm_tab_opened > a.nav-link {
  color: var(--gold) !important;
  background: rgba(227, 174, 79, .09);
  border-color: var(--line) var(--line) var(--gold) var(--line);
}

/* The second-row sub-bar sits IN FLOW, not absolutely positioned. Floating it
   over the page meant it clipped the top of whatever came next — the same
   overlap bug the surf bar had. A taller menu is the cheaper price. */
.lfm_menu_bar ul.lfm_menu_tab {
  display: none;
  width: 100%;
  background: var(--sea-2);
  border-top: 1px solid var(--line);
  padding: 4px 20px;
  margin: 6px 0 0;
  gap: 2px;
  flex-wrap: wrap;
}
.lfm_menu_bar .lfm_tab_opened > ul.lfm_menu_tab { display: flex; }

/* Keep every tab on ONE row, with the sub-bar underneath all of them.
   The open tab's <li> contains both its own link AND the full-width sub-bar,
   so in a flex row that sub-bar breaks the line and shoves the tabs after it
   ("Surfing Center", "My Ads") onto a third row, below their own sub-menu.
   Reading order then makes no sense at all.

   display: contents dissolves that <li>'s box on desktop, so its link and its
   sub-bar become siblings of the other tabs. The link keeps its place in the
   row; the sub-bar takes the last order and drops to a row of its own. */
@media (min-width: 992px) {
  .lfm_menu_bar .navbar-nav { flex-wrap: wrap; }
  .lfm_menu_bar .nav-item.lfm_tab_opened { display: contents; }
  .lfm_menu_bar .lfm_tab_opened > ul.lfm_menu_tab { order: 99; }
}
.lfm_menu_bar ul.lfm_menu_tab > li > a {
  display: block;
  color: var(--mist);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 9px 13px;
  border-radius: 5px;
}
.lfm_menu_bar ul.lfm_menu_tab > li > a:hover {
  color: var(--gold);
  background: rgba(227, 174, 79, .08);
}
.lfm_menu_bar .navbar { position: relative; }


/* Between the desktop breakpoint and about 1200px the sub-bar is a few dozen
   pixels too wide and wraps to a second line. Tightening the tracking and the
   padding there buys back enough room to keep it on one, which is the whole
   point of the row. */
@media (min-width: 992px) and (max-width: 1199px) {
  /* gap: 0 as well as the tighter padding. Nine items means eight gaps, which
     is 16px -- enough on its own to push the row onto a second line. Each item
     carries its own padding, so closing the gap costs nothing visually. */
  .lfm_menu_bar ul.lfm_menu_tab { padding-left: 12px; padding-right: 12px; gap: 0; }
  /* !important is not decoration here: the base .lfm_menu_bar .nav-link rule
     above sets its padding with !important, so a plain override loses however
     specific it is. */
  .lfm_menu_bar ul.lfm_menu_tab > li > a {
    padding: 10px 5px !important;
    font-size: 11.5px;
    letter-spacing: .03em;
  }
}

@media (max-width: 991px) {
  .lfm_menu_bar ul.lfm_menu_tab { padding: 2px 0 6px; background: transparent; }
}

/* Join Free — the one emphasised item in the logged-out nav */
.lfm_menu_bar .sg-nav-cta > a.nav-link,
.lfm_menu_bar .sg-nav-cta > a {
  color: #241703 !important;
  background: linear-gradient(180deg, #EBBE68, #C9923A);
  border-color: #F0CC85;
  font-weight: 600;
  margin-left: 8px;
}
.lfm_menu_bar .sg-nav-cta > a.nav-link:hover,
.lfm_menu_bar .sg-nav-cta > a:hover {
  color: #241703 !important;
  filter: brightness(1.07);
  border-color: #F5D89C;
}

.lfm_menu_bar .dropdown-menu {
  background: var(--sea-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 6px;
}
.lfm_menu_bar .dropdown-item {
  color: var(--parch);
  border-radius: 5px;
  font-size: 15px;
  padding: 7px 12px;
}
.lfm_menu_bar .dropdown-item:hover,
.lfm_menu_bar .dropdown-item:focus {
  background: var(--sea-3);
  color: var(--gold);
}
.lfm_menu_bar .dropdown-divider { border-top-color: var(--line); }

/* Section headers inside the Rewards dropdown, so a long menu reads in groups. */
.lfm_menu_bar .dropdown-menu .sg-dh {
  color: var(--gold);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 9px 12px 4px;
  margin: 2px 0 0;
  opacity: .85;
  pointer-events: none;
}
.lfm_menu_bar .dropdown-menu .sg-dh:first-child { margin-top: 0; }

.navbar-toggler {
  border-color: var(--line);
  color: var(--parch);
}
.navbar-toggler:focus { box-shadow: 0 0 0 2px var(--gold); }

/* ============================================================
   4. Layout / surfaces
   ============================================================ */
.container, .container-fluid { max-width: 1120px; }

.card, .panel, .well {
  background: var(--sea-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--parch);
}
.card-header {
  background: var(--sea-3);
  border-bottom: 1px solid var(--line);
  font-family: var(--serif);
  font-size: 19px;
  color: var(--gold);
}
.card-body { color: var(--parch); }

/* Bootstrap utility overrides — DB templates lean on these heavily */
.bg-white, .bg-light { background: var(--sea-2) !important; color: var(--parch) !important; }
.bg-dark { background: var(--sea-0) !important; }
.text-dark, .text-body { color: var(--parch) !important; }
.text-muted { color: var(--mist) !important; }
.text-white { color: var(--parch) !important; }
.border { border-color: var(--line) !important; }
.shadow, .shadow-sm, .shadow-lg { box-shadow: var(--shadow) !important; }

/* ============================================================
   5. Buttons
   ============================================================ */
.btn {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .09em;
  text-transform: uppercase;
  border-radius: 6px;
  padding: 11px 22px;
  border: 1px solid transparent;
  transition: filter .15s, border-color .15s, color .15s;
}
.btn-primary,
.btn-success {
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  border-color: var(--gold);
  color: var(--onGold);
  font-weight: 600;
}
.btn-primary:hover, .btn-success:hover,
.btn-primary:focus, .btn-success:focus {
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  border-color: var(--gold);
  color: var(--onGold);
  filter: brightness(1.06);
}
.btn-secondary, .btn-default, .btn-outline-secondary {
  background: transparent;
  border-color: var(--line);
  color: var(--parch);
}
.btn-secondary:hover, .btn-default:hover, .btn-outline-secondary:hover {
  border-color: var(--gold-deep);
  color: var(--gold);
  background: rgba(227, 174, 79, .06);
}
.btn-danger { background: var(--red); border-color: var(--red); color: #1a0b07; font-weight: 600; }
.btn-info   { background: var(--teal); border-color: var(--teal); color: #04201e; font-weight: 600; }
.btn-link   { color: var(--teal); text-transform: none; font-family: var(--body); letter-spacing: 0; }

/* LFMTE ships bare <input type="submit"> all over the member area rather than
   .btn markup, so style those directly or they render as OS default buttons. */
input[type="submit"],
input[type="button"],
input[type="reset"],
button[type="submit"] {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .09em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #EBBE68, #C9923A);
  border: 1px solid #F0CC85;
  color: #241703;
  font-weight: 600;
  border-radius: 6px;
  padding: 10px 22px;
  cursor: pointer;
  transition: filter .15s;
}
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
button[type="submit"]:hover { filter: brightness(1.07); }
input[type="reset"] {
  background: transparent;
  border-color: var(--line);
  color: var(--parch);
}

/* Captcha images are generated on a white ground — give them a frame so they
   do not float as a bright rectangle on the dark page. */
img[src*="captcha"] {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px;
  background: #EDE4CE;
}

/* ============================================================
   6. Forms
   ============================================================ */
.form-control, .form-select, input[type="text"], input[type="email"],
input[type="password"], input[type="number"], input[type="url"],
select, textarea {
  background: var(--sea-0);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--parch);
  padding: 10px 13px;
}
.form-control:focus, .form-select:focus,
input:focus, select:focus, textarea:focus {
  background: var(--sea-0);
  border-color: var(--gold-deep);
  color: var(--parch);
  box-shadow: 0 0 0 3px rgba(227, 174, 79, .14);
}
.form-control::placeholder, input::placeholder, textarea::placeholder { color: #5C6E6B; }
label, .form-label {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--mist);
}
.form-check-input { background-color: var(--sea-0); border-color: var(--line); }
.form-check-input:checked { background-color: var(--gold); border-color: var(--gold); }

/* ============================================================
   7. Tables
   ============================================================ */
table { color: var(--parch); border-color: var(--line); }
.table { color: var(--parch); --bs-table-bg: transparent; }
.table > :not(caption) > * > * {
  background: transparent;
  color: var(--parch);
  border-bottom-color: var(--line-soft);
  padding: 10px 12px;
}
.table thead th,
table thead th {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mist);
  border-bottom: 2px solid var(--line) !important;
  white-space: nowrap;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background: rgba(255, 255, 255, .022);
  color: var(--parch);
}
.table-hover > tbody > tr:hover > * { background: rgba(227, 174, 79, .06); color: var(--parch); }
.table-bordered > :not(caption) > * > * { border-color: var(--line); }

/* Numbers line up */
td.num, .num, .credits, .stat-value { font-variant-numeric: tabular-nums; font-family: var(--mono); }

/* Wide tables must scroll inside themselves, never the page */
.table-responsive { overflow-x: auto; }

/* ============================================================
   8. Alerts / badges
   ============================================================ */
.alert { border-radius: var(--radius); border: 1px solid var(--line); background: var(--sea-2); color: var(--parch); }
.alert-success { border-color: var(--good); background: rgba(111, 180, 119, .10); }
.alert-danger  { border-color: var(--red);  background: rgba(212, 96, 74, .10); }
.alert-warning { border-color: var(--gold-deep); background: rgba(227, 174, 79, .10); }
.alert-info    { border-color: var(--teal); background: rgba(79, 163, 156, .10); }

.badge {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .07em;
  border-radius: 4px;
  padding: 5px 9px;
}
.bg-primary, .badge-primary { background: var(--gold) !important; color: #241703 !important; }
.bg-secondary { background: var(--sea-3) !important; color: var(--parch) !important; }
.bg-success { background: var(--good) !important; color: #06210b !important; }
.bg-danger  { background: var(--red) !important;  color: #1a0b07 !important; }
.bg-info    { background: var(--teal) !important; color: #04201e !important; }

.progress { background: var(--sea-3); border-radius: 5px; height: 10px; }
.progress-bar { background: linear-gradient(90deg, var(--teal), var(--gold)); }

/* ============================================================
   9. Footer
   ============================================================ */
.lfm_footer {
  background: var(--sea-0);
  border-top: 1px solid var(--line);
  margin-top: 56px;
  color: var(--mist);
}
.lfm_footer h4, .lfm_footer h5 { color: var(--gold); }
.lfm_footer a { color: var(--mist); }
.lfm_footer a:hover { color: var(--gold); }
.sg-footer-mark {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #4A5C58;
}

/* ============================================================
   10. Small helpers used by our own templates
   ============================================================ */
.sg-eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--teal);
}
.sg-tagline { font-style: italic; font-size: 20px; color: var(--mist); }
.sg-statband {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.sg-statband .sg-cell { background: var(--sea-2); padding: 17px 18px; text-align: center; }
.sg-statband .sg-n { font-family: var(--mono); font-size: 25px; color: var(--gold); font-variant-numeric: tabular-nums; }
.sg-statband .sg-l { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); margin-top: 4px; }

/* ============================================================
   10b. Landing-page sections (used by the DB page templates)
   ============================================================ */

/* --- hero --- */
.sg-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: #081118;
}
.sg-hero-art {
  position: absolute;
  inset: 0;
  background-image: url("images/hero-sea.svg");
  background-size: cover;
  background-position: center bottom;
  opacity: .95;
}
/* Scrim: dark enough for legible text on the left, clear on the right so the
   galleon actually reads. Stops well before the ship. */
.sg-hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      rgba(8,17,24,.93) 0%,
      rgba(8,17,24,.86) 26%,
      rgba(8,17,24,.42) 48%,
      rgba(8,17,24,.06) 64%,
      rgba(8,17,24,0)   100%);
}
.sg-hero-inner { position: relative; z-index: 2; padding: 104px 0 116px; min-height: 520px; }
.sg-hero h1 { margin: 10px 0 14px; }
.sg-hero h1 .sg-a { color: var(--teal); }
.sg-hero h1 .sg-b { color: var(--gold); }
.sg-hero .lead { font-size: 20px; color: var(--parch); max-width: 34ch; }
@media (max-width: 767px) {
  .sg-hero-inner { padding: 60px 0 68px; }
  .sg-hero-art::after { background: linear-gradient(180deg, rgba(8,17,24,.86) 0%, rgba(8,17,24,.72) 60%, rgba(8,17,24,.9) 100%); }
}

/* --- feature cards --- */
.sg-feature {
  background: var(--sea-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  height: 100%;
  transition: border-color .18s, transform .18s;
}
.sg-feature:hover { border-color: var(--gold-deep); transform: translateY(-3px); }
.sg-feature img { width: 62px; height: 62px; margin-bottom: 12px; }
.sg-feature h3 { font-size: 22px; margin: 0 0 8px; }
.sg-feature p { font-size: 15.5px; color: var(--mist); margin: 0; max-width: none; }

/* --- numbered steps --- */
.sg-step { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 22px; }
.sg-step .sg-num {
  flex: none;
  width: 42px; height: 42px;
  border: 1.5px solid var(--gold-deep);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 15px; color: var(--gold);
}
.sg-step h4 { margin: 6px 0 4px; font-size: 20px; color: var(--parch); }
.sg-step p { margin: 0; color: var(--mist); font-size: 15.5px; }

/* --- section rhythm --- */
.sg-section { padding: 62px 0; }
.sg-section-alt { background: rgba(255,255,255,.018); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.sg-rule {
  border: 0; height: 1px; margin: 0;
  background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
}

/* ============================================================
   10d. Homepage v2 — photo hero, crews/rallies, screenshot, leaderboard, photo CTA
   All token-based so every theme (fairwinds/blackbeard/driftwood/lagoon,
   which @import this file) inherits it.
   ============================================================ */

/* photo hero: swap the art for the world photo + a stronger left scrim */
.sg-hero-art--world {
  background-image: url("images/world.jpg");
  background-position: right center;
}
.sg-hero-art--world::after {
  background: linear-gradient(90deg,
      rgba(8,17,24,.96) 0%,
      rgba(8,17,24,.88) 34%,
      rgba(8,17,24,.55) 62%,
      rgba(8,17,24,.20) 100%);
}
@media (max-width: 767px) {
  .sg-hero-art--world { background-position: center; }
  .sg-hero-art--world::after { background: linear-gradient(180deg, rgba(8,17,24,.74) 0%, rgba(8,17,24,.86) 55%, var(--sea-1) 100%); }
}
.sg-hero-note { margin-top: 18px; color: var(--mist); font-size: 14.5px; }
.sg-hero-note::before { content: "\2713\00a0"; color: var(--good); }
.sg-lede { max-width: 62ch; margin: 10px auto 0; color: var(--mist); font-size: 17px; }

/* Crews & Rallies — the live rally card */
.sg-rallycard {
  background: var(--sea-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow);
}
.sg-rc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.sg-rc-label { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
.sg-rc-live { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--red); display: inline-flex; align-items: center; gap: 6px; }
.sg-rc-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(212,96,74,.2); }
.sg-rc-mult { font-family: var(--serif); font-size: 18px; color: var(--parch); }
.sg-rc-mult b { font-size: 46px; color: var(--gold); font-weight: 400; margin-right: 8px; }
.sg-rc-meta { font-family: var(--mono); font-size: 12.5px; color: var(--mist); margin-top: 4px; }
.sg-rc-bars { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.sg-rc-bar-l { display: flex; justify-content: space-between; font-size: 13px; color: var(--parch); margin-bottom: 6px; }
.sg-rc-bar-l span:last-child { font-family: var(--mono); font-size: 11px; color: var(--mist); }
.sg-rc-track { height: 8px; border-radius: 4px; background: var(--sea-0); overflow: hidden; }
.sg-rc-track i { display: block; height: 8px; border-radius: 4px; }

/* See it in action — browser-framed screenshot */
.sg-shot { max-width: 960px; margin: 0 auto; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); background: var(--sea-1); }
.sg-shot-bar { height: 42px; display: flex; align-items: center; gap: 8px; padding: 0 16px; background: var(--sea-2); border-bottom: 1px solid var(--line); }
.sg-shot-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--line); }
.sg-shot-dot:nth-child(1) { background: var(--red); }
.sg-shot-dot:nth-child(2) { background: var(--gold); }
.sg-shot-dot:nth-child(3) { background: var(--good); }
.sg-shot-url { flex: 1; text-align: center; font-family: var(--mono); font-size: 11.5px; color: var(--mist); }
.sg-shot img { display: block; width: 100%; height: auto; }

/* a faithful render of the CURRENT surf bar (countdown, surf icons, the
   credited line with crew/rally bonus, nav) — no rank/Kraken/Raid, which the
   2026-08 slim-down removed. */
.sg-surfbar { display: flex; align-items: center; gap: 18px; padding: 16px 20px; background: var(--sea-1); flex-wrap: wrap; }
.sg-surf-dial { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--sea-2); border: 2px solid var(--teal); display: grid; place-items: center; font-family: var(--mono); font-weight: 600; font-size: 17px; color: var(--teal); }
.sg-surf-find { display: flex; align-items: center; gap: 10px; }
.sg-surf-find img { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--gold); box-shadow: 0 0 0 2px rgba(227,174,79,.18); background: var(--sea-2); padding: 3px; }
.sg-surf-find span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mist); }
.sg-surf-icons { display: flex; gap: 8px; }
.sg-surf-icons i { width: 30px; height: 30px; border-radius: 8px; background: var(--sea-2); border: 1px solid var(--line); display: block; }
.sg-surf-msg { flex: 1 1 auto; min-width: 190px; font-family: var(--mono); font-size: 12.5px; color: var(--parch); }
.sg-surf-msg b { color: var(--teal); }
.sg-surf-msg em { color: var(--mist); font-style: normal; }
.sg-surf-links { display: flex; gap: 6px; }
.sg-surf-links a { font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--teal); padding: 6px 9px; border: 1px solid transparent; border-radius: 5px; }
.sg-surf-links a:hover { color: var(--gold); border-color: var(--line); background: rgba(227,174,79,.08); }
.sg-surf-brand { display: flex; align-items: center; gap: 10px; padding: 10px 20px; background: var(--sea-0); border-top: 1px solid var(--line); }
.sg-surf-brand img { height: 22px; width: auto; }
.sg-surf-brand span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mist); }
@media (max-width: 600px) { .sg-surf-links { display: none; } .sg-surf-msg { min-width: 120px; } }

/* Weekly crew leaderboard */
.sg-lb { background: var(--sea-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 22px; box-shadow: var(--shadow); }
.sg-lb-head { display: flex; justify-content: space-between; padding: 15px 2px 13px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--mist); }
.sg-lb-row { display: flex; align-items: center; gap: 16px; padding: 15px 2px; border-bottom: 1px solid var(--line-soft); }
.sg-lb-row:last-child { border-bottom: 0; }
.sg-lb-rank { width: 26px; font-family: var(--serif); font-size: 22px; color: var(--mist); }
.sg-lb-row.sg-lb-top .sg-lb-rank { color: var(--gold); }
.sg-lb-name { flex: 1; font-size: 16px; color: var(--parch); }
.sg-lb-bar { width: 42%; max-width: 200px; height: 8px; border-radius: 4px; background: var(--sea-0); overflow: hidden; }
.sg-lb-bar i { display: block; height: 8px; }

/* Final CTA over the night-traffic photo */
.sg-cta--photo { position: relative; overflow: hidden; border-top: 1px solid var(--line); }
.sg-cta--photo::before { content: ""; position: absolute; inset: 0; background: url("images/traffic.jpg") center/cover; }
.sg-cta--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,17,24,.84), rgba(8,17,24,.9)); }
.sg-cta--photo > * { position: relative; z-index: 2; }

/* ============================================================
   10c. The Quarter Deck (member area home)
   ============================================================ */
.sg-deck { padding-top: 8px; }

.sg-deck-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding-bottom: 20px; margin-bottom: 26px;
  border-bottom: 3px double var(--line);
}
.sg-deck-title { font-size: clamp(30px, 4.4vw, 44px); margin: 6px 0 4px; }
.sg-deck-sub { color: var(--mist); margin: 0; font-size: 15.5px; }
.sg-deck-sub strong { color: var(--gold); }
.sg-setsail { white-space: nowrap; }

.sg-deck-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; margin-bottom: 26px;
}
.sg-stat { background: var(--sea-2); padding: 18px 20px; }
.sg-stat-l {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--mist);
}
.sg-stat-n {
  font-family: var(--mono); font-size: 30px; line-height: 1.15;
  color: var(--parch); font-variant-numeric: tabular-nums; margin-top: 6px;
}
.sg-stat-n.sg-gold { color: var(--gold); }

/* Kept from when the purse carried two balances: the surviving card and, on
   side, a different typeface. They are not two views of one number and the eye
   should never read them as a pair of the same thing: gold coin against the
   mono the rest of the site uses for data. */
.sg-stat-n.sg-teal { color: var(--teal); }
.sg-stat-n.sg-gold { font-family: var(--serif); font-size: 34px; }
.sg-stat-f { font-size: 13.5px; color: var(--mist); margin-top: 4px; }

.sg-deck-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
}
.sg-card {
  background: var(--sea-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 24px;
}
.sg-card h3 { margin: 0 0 4px; font-size: 21px; }
.sg-card-note { color: var(--mist); font-size: 14.5px; margin: 0 0 14px; max-width: none; }
.sg-card-wide { grid-column: 1 / -1; }

table.sg-mini { width: 100%; border-collapse: collapse; font-size: 15px; }
table.sg-mini td { padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
table.sg-mini tr:last-child td { border-bottom: none; }
table.sg-mini td.num {
  text-align: right; font-family: var(--mono); font-size: 14px;
  color: var(--parch); font-variant-numeric: tabular-nums; white-space: nowrap;
}
table.sg-mini td.act { text-align: right; width: 76px; }
table.sg-mini td.act a { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }

.sg-w100 { width: 100%; margin-top: 16px; }

.sg-reflink input {
  width: 100%; background: var(--sea-0); border: 1px solid var(--line);
  border-radius: 6px; color: var(--gold); font-family: var(--mono);
  font-size: 14px; padding: 12px 14px;
}

/* Rewards & Perks grid on the Quarter Deck */
.sg-perks {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.sg-perk {
  display: block; text-decoration: none; background: var(--sea-0);
  border: 1px solid var(--line); border-radius: 8px; padding: 14px 15px;
  transition: border-color .15s, transform .15s;
}
.sg-perk:hover { border-color: var(--gold); transform: translateY(-2px); }
.sg-perk-ic { font-size: 22px; line-height: 1; display: block; }
.sg-perk-t {
  display: block; color: var(--parch); font-weight: 700; font-size: 15px;
  margin: 7px 0 3px;
}
.sg-perk-d { display: block; color: var(--mist); font-size: 13px; line-height: 1.45; }
@media (max-width: 767px) {
  .sg-perks { grid-template-columns: 1fr 1fr; }
}

.sg-deck-foot {
  margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.sg-deck-foot-note { color: var(--mist); font-style: italic; }

@media (max-width: 767px) {
  .sg-deck-head { align-items: flex-start; }
  .sg-setsail { width: 100%; }
  .sg-deck-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   10f. Page headers on the ad-management screens
   (DB templates mysites_instr / mybanners_instr / mytexts_instr)
   ============================================================ */
.sg-pagehead {
  text-align: left;
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 3px double var(--line);
}
.sg-pagehead h1 { margin: 8px 0 8px; font-size: clamp(28px, 4vw, 40px); }
.sg-pagehead-sub { color: var(--mist); max-width: 62ch; margin: 0 0 16px; }
.sg-pagehead-bal {
  display: inline-flex; align-items: baseline; gap: 12px;
  background: var(--sea-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 10px 18px; margin-right: 12px;
}
.sg-bal-l {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--mist);
}
.sg-bal-n {
  font-family: var(--mono); font-size: 24px; color: var(--gold);
  font-variant-numeric: tabular-nums;
}

/* LFMTE centres these headers with a stray <center>; undo it */
.sg-pagehead center, center .sg-pagehead { text-align: left; }

/* ============================================================
   10e. Document pages (FAQ, Terms, Support)
   ============================================================ */
.sg-doc { max-width: 78ch; margin: 0 auto; }
.sg-doc-head { padding-bottom: 20px; margin-bottom: 26px; border-bottom: 3px double var(--line); }
.sg-doc-head h1 { margin: 8px 0 10px; }
.sg-doc-lede { font-size: 19px; color: var(--mist); font-style: italic; }
.sg-doc h2 { font-size: 25px; margin: 34px 0 10px; color: var(--parch); }
.sg-doc p { font-size: 16.5px; }

.sg-faq-cat {
  font-family: var(--mono) !important;
  font-size: 11.5px !important;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--teal) !important;
  margin: 38px 0 12px !important;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

details.sg-faq {
  background: var(--sea-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 10px;
  overflow: hidden;
}
details.sg-faq > summary {
  cursor: pointer;
  list-style: none;
  padding: 15px 46px 15px 18px;
  font-family: var(--serif);
  font-size: 19px;
  color: var(--parch);
  position: relative;
  transition: color .15s, background .15s;
}
details.sg-faq > summary::-webkit-details-marker { display: none; }
details.sg-faq > summary::after {
  content: "+";
  position: absolute;
  right: 18px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 20px;
  color: var(--gold);
  line-height: 1;
}
details.sg-faq[open] > summary::after { content: "\2212"; }
details.sg-faq > summary:hover { color: var(--gold); background: rgba(227,174,79,.05); }
details.sg-faq[open] > summary { color: var(--gold); border-bottom: 1px solid var(--line); }
details.sg-faq .sg-faq-a { padding: 16px 18px 4px; }
details.sg-faq .sg-faq-a p { font-size: 16px; color: var(--mist); }
details.sg-faq .sg-faq-a strong { color: var(--parch); }

.sg-doc-cta {
  margin-top: 46px; padding: 26px;
  background: var(--sea-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  text-align: center;
}
.sg-doc-cta h3 { margin: 0 0 6px; }
.sg-doc-cta p { color: var(--mist); margin: 0 auto 16px; }

/* ============================================================
   10d. Legacy markup rescue
   LFMTE's member pages are 2000s HTML: attribute-styled tables
   (border=1 bordercolor=black), <font> tags, and layout tables. We cannot
   edit those PHP files without forking the script, so normalise them here.
   This one block is what makes every stock page look like ours.
   ============================================================ */

/* <font face="" size=N> — strip the browser defaults it forces */
font {
  font-family: inherit !important;
  font-size: inherit !important;
  color: inherit !important;
}
font[size="1"] { font-size: 13px !important; }
font[size="4"], font[size="5"] {
  font-size: 22px !important;
  font-family: var(--serif) !important;
  color: var(--gold) !important;
}

/* Attribute-bordered data tables: black borders are invisible here */
table[border]:not([border="0"]) {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius);
  overflow: hidden;
  margin: 14px 0;
  background: var(--sea-2);
}
table[border]:not([border="0"]) > tbody > tr > td,
table[border]:not([border="0"]) > tbody > tr > th,
table[border]:not([border="0"]) > thead > tr > th {
  border: 1px solid var(--line) !important;
  padding: 10px 12px;
}
table[bordercolor] { border-color: var(--line) !important; }

/* Any bare <th>, wherever it appears */
th {
  background: var(--sea-3);
  color: var(--mist);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .11em;
  text-transform: uppercase;
  font-weight: 500;
  text-align: left;
  padding: 10px 12px;
}

/* Layout tables (border=0) must stay invisible but breathe */
table[border="0"] { border: 0; margin: 6px 0; }
table[border="0"] > tbody > tr > td { border: 0; padding: 7px 10px 7px 0; vertical-align: middle; }

/* Legacy label cells LFMTE uses on forms */
.formlabelbold, td.formlabelbold {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mist);
  white-space: nowrap;
  padding-right: 14px;
}

/* Stock pages rarely carry a heading; give the content some air */
.sg-deck, .container > form, .container > table { margin-top: 4px; }

/* Old attribute alignment still used everywhere */
td[align="right"] { text-align: right; }
td[align="center"], th[align="center"] { text-align: center; }

/* Anything that still slips through with a light background */
[bgcolor="#FFFFFF"], [bgcolor="#ffffff"], [bgcolor="white"] {
  background-color: var(--sea-2) !important;
  color: var(--parch) !important;
}

/* Small print / hints LFMTE renders as plain text after fields */
small, .small { color: var(--mist); font-size: 13.5px; }

/* Broken third-party import buttons: LFMTE links out to partner services
   (HitsConnect, IntelliBanners, InstantBannerCreator). Those are other
   people's businesses and their images 404, so hide the dead affiliates. */
img[src*="hitsconnect.com"],
img[src*="intellibanners.com"],
img[src*="instantbannercreator.com"],
img[src*="instantsqueezepagegenerator.com"],
img[src*="advertisingknowhow.com"],
img[src*="hitsviral.com"],
img[src*="launchformulamarketing.com"],
img[src*="lfmads.com"] { display: none !important; }

/* Merchant logos on the buy page 404 because no gateway is configured yet */
img[src*="ipnimg.php"] { display: none !important; }

/* ============================================================
   11. Responsive + motion
   ============================================================ */
@media (max-width: 991px) {
  /* The stock mobile brand link doubles as the menu toggle, which draws a
     button box and a caret around the logo. Strip both. */
  .lfm_menu_bar a.navbar-toggler {
    border: 0 !important;
    padding: 4px 0 !important;
    display: inline-flex;
    align-items: center;
  }
  .lfm_menu_bar a.navbar-toggler.dropdown-toggle::after { display: none; }
  .lfm_menu_bar .navbar { padding: .5rem .9rem; }
}

@media (max-width: 767px) {
  body { font-size: 16px; }

  /* Keep content off the screen edges — the full-bleed hero sits on a
     .container whose default gutter is too tight at this width. */
  .container, .container-fluid { padding-left: 20px; padding-right: 20px; }

  .btn { width: 100%; margin-bottom: 8px; }
  .lfm_menu_bar .nav > li > a { padding: 12px 10px !important; }
  .lfm_menu_bar .sg-nav-cta > a { margin-left: 0; margin-top: 6px; text-align: center; }

  .sg-hero h1 { font-size: 34px; }
  .sg-hero .lead { font-size: 17px; max-width: none; }
  .sg-statband { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Auto page headings injected by header.php for screens LFMTE leaves untitled */
.sg-pagehead-auto { margin-bottom: 8px; padding-bottom: 16px; }
.sg-pagehead-auto + * { margin-top: 0; }

/* Support page */
.sg-support-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; }
@media (max-width: 820px) { .sg-support-grid { grid-template-columns: 1fr; } }
.sg-support-form textarea {
  width: 100%; background: var(--sea-0); border: 1px solid var(--line);
  border-radius: 6px; color: var(--parch); padding: 12px 14px;
  font-family: var(--body); font-size: 16px; margin-bottom: 14px;
}
.sg-support-form label { display: block; margin-bottom: 6px; }
.sg-support-links { list-style: none; padding: 0; margin: 0; }
.sg-support-links li {
  padding: 9px 0; border-bottom: 1px solid var(--line-soft);
  font-size: 15px; color: var(--mist);
}
.sg-support-links li:last-child { border-bottom: 0; }

/* The open tab used to be given a full row of its own here, which did get the
   sub-bar to the left edge -- but it also pushed every tab AFTER the open one
   down below that tab's own sub-menu, so the row read Home / sub-menu /
   Surfing Center, My Ads. See the display:contents rule further up, which puts
   the sub-bar at the left edge without breaking the row of tabs. */


/* Navigation ---------------------------------------------------------------
   Every addon that shipped put another link on the member row until it wrapped
   onto a second line. The row is grouped in theme/nightsea/header.php now; this
   is the one item that is not a link but a call to action. */

.lfm_menu_tab .sg-nav-cta > a {
  background: var(--gold);
  color: #241703 !important;
  border-radius: 5px;
  padding: 4px 14px !important;
  font-weight: 600;
}

.lfm_menu_tab .sg-nav-cta > a:hover { opacity: .9; }
.lfm_menu_tab .sg-nav-cta > a span { color: #241703 !important; }

/* ===========================================================================
   THE MASTHEAD AND NAV STRIP
   ---------------------------------------------------------------------------
   Ported from docs/design/te-homepage.html, which is the approved direction:
   a real logo banner over a dark nav strip, the way a traffic exchange that
   has been running for fifteen years looks, rather than the dark-hero /
   three-cards / centred-everything landing page this theme shipped with.

   Scoped deliberately. These rules restyle the head of the page and nothing
   below it, so they can land without touching the 900 lines of dark theme
   underneath. The light body treatment from the mockup is a separate pass.
   ========================================================================= */

:root {
  /* Sampled from the logo itself rather than picked: the compass ring's
     dominant opaque orange measures #f09010 across ~29k pixels. The masthead
     accent is therefore literally the artwork's own paint, which is why the
     header reads as one object instead of a logo dropped onto somebody
     else's colour scheme. */
  --sg-gold:  #f0a02c;
  --sg-navy:  #123353;
  --sg-navy2: #1c4a76;
  --sg-navy3: #0d2740;
  --sg-mist:  #a8c6e2;
  --sg-rule:  #2f5578;
}

.sg-mast {
  background: linear-gradient(180deg, var(--sg-navy2), var(--sg-navy));
  color: #fff;
}
.sg-mast-in {
  max-width: 1100px; margin: 0 auto; padding: 10px 12px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}

/* The logo, exactly as supplied — the horizontal lockup, uncut, carrying its
   own wordmark and its own tagline. Nothing is set in type beside it.

   At 2.95:1 it needs far less height than the stacked version did: measured on
   navy the wordmark is crisp from 76px and the tagline becomes comfortable at
   88, so it gets 88. That takes the masthead from 160px down to about 108 and
   lifts everything below it up the page.

   The export carried a semi-transparent dark halo baked into its alpha — 19,000
   pixels between 1 and 69 — which renders as a grey box on navy. It is floored
   out and the surviving alpha re-stretched, so the shipped file is NOT the file
   the generator produced. Re-cut from logo-wide-master.png, never from the
   shipped copy, or the trim compounds. */
.sg-brand { margin-right: auto; display: flex; align-items: center; }
.sg-brand img { height: 88px; width: auto; display: block; }
.sg-brand-fallback {
  font: 700 30px/1 Georgia, 'Times New Roman', serif; color: #fff;
  letter-spacing: .01em;
}
@media (max-width: 767px) {
  .sg-brand img { height: 64px; }
  .sg-mast-in { gap: 10px; }
}

/* Logged out: a bordered login panel. With a 140px logo on the left, a loose
   row of inputs left the right half of the band reading as empty navy; the
   panel gives the masthead two objects of comparable weight. */
.sg-loginpanel, .sg-mast-you {
  border: 1px solid var(--sg-rule); background: rgba(255,255,255,.05);
  border-radius: 3px; padding: 10px 14px 11px;
}
.sg-loginpanel h2, .sg-mast-you h2 {
  margin: 0 0 8px; font: 700 11px/1 Arial, Helvetica, sans-serif;
  letter-spacing: .09em; text-transform: uppercase; color: var(--sg-gold);
}
.sg-loginbar { display: flex; align-items: flex-end; gap: 6px; margin: 0; }
.sg-loginbar label {
  display: block; font-size: 10.5px; color: var(--sg-mist); margin-bottom: 2px;
}
.sg-loginbar input {
  width: 130px; padding: 5px 7px; border: 1px solid #7f9cb8;
  border-radius: 2px; font-size: 13px; background: #fff; color: #1b2a38;
}
.sg-loginbar button {
  padding: 6px 13px; border: 1px solid #7f9cb8; border-radius: 2px;
  background: #fff; color: var(--sg-navy);
  font: 700 13px Arial, Helvetica, sans-serif; cursor: pointer;
}
.sg-loginbar button:hover { background: #e8f0f8; }
.sg-lost { font-size: 11px; color: var(--sg-mist); margin-left: 4px; }
.sg-lost a { color: #cfe2f4; }
.sg-newhere {
  margin: 9px 0 0; padding-top: 8px; border-top: 1px solid var(--sg-rule);
  font-size: 11.5px; color: var(--sg-mist);
}
.sg-newhere a { color: var(--sg-gold); font-weight: 700; }

/* Logged in: same box, same height, different contents. A masthead that
   changes shape when you sign in reads as two different sites. */
.sg-mast-links { display: flex; align-items: center; gap: 14px; font-size: 12.5px; }
.sg-mast-links a { color: #cfe2f4; }
.sg-mast-links a:hover { color: #fff; }
.sg-mast-links a.sg-mast-surf { color: var(--sg-gold); font-weight: 700; }

/* The nav strip below the masthead. The theme's own navbar keeps every scrap
   of its menu-building PHP — only the paint changes. */
.lfm_menu_bar {
  background: var(--sg-navy3);
  border-bottom: 3px solid var(--sg-gold);
  box-shadow: none;
}
.lfm_menu_bar .navbar { padding: 0; max-width: 1100px; margin: 0 auto; }
.lfm_menu_bar .nav > li > a,
.lfm_menu_bar .navbar-nav > li > a,
.lfm_menu_bar .nav-link {
  padding: 11px 15px; border-radius: 0;
  font: 700 13px Arial, Helvetica, sans-serif; letter-spacing: .01em;
  color: #dce9f5;
}
.lfm_menu_bar .nav > li > a:hover,
.lfm_menu_bar .navbar-nav > li > a:hover,
.lfm_menu_bar .nav-link:hover { background: #17405f; color: #fff; }
.lfm_menu_bar .nav-item.lfm_tab_opened > a.nav-link,
.lfm_menu_bar .nav > li.active > a,
.lfm_menu_bar .nav > li > a.active {
  background: var(--sg-gold); color: #21160a; border-radius: 0;
}
.lfm_menu_bar .sg-nav-cta > a.nav-link,
.lfm_menu_bar .sg-nav-cta > a {
  background: var(--sg-gold); color: #21160a; border-radius: 0;
}
.lfm_menu_bar .sg-nav-cta > a.nav-link:hover,
.lfm_menu_bar .sg-nav-cta > a:hover { background: #ffb648; color: #21160a; }

/* The logo now lives in the masthead, so the navbar's own brand would be the
   same artwork twice on one screen. The mobile toggler keeps a plain label
   instead — it is a menu button, not a second wordmark. */
.lfm_menu_bar .sg-navbrand-desktop { display: none !important; }
.lfm_menu_bar .navbar-toggler {
  font: 700 13px Arial, Helvetica, sans-serif; letter-spacing: .06em;
  text-transform: uppercase; padding: 11px 15px; color: #dce9f5;
}

/* The theme wraps most menu labels in a <span>, and the dark theme colours
   that span rather than the anchor. Without matching the span the active tab
   rendered its own pale text on the gold ground -- legible only if you already
   knew what it said. */
.lfm_menu_bar .nav-item.lfm_tab_opened > a.nav-link,
.lfm_menu_bar .nav-item.lfm_tab_opened > a.nav-link span,
.lfm_menu_bar .nav > li.active > a,
.lfm_menu_bar .nav > li.active > a span,
.lfm_menu_bar .nav > li > a.active,
.lfm_menu_bar .nav > li > a.active span,
.lfm_menu_bar .sg-nav-cta > a.nav-link,
.lfm_menu_bar .sg-nav-cta > a.nav-link span,
.lfm_menu_bar .sg-nav-cta > a,
.lfm_menu_bar .sg-nav-cta > a span { color: #21160a !important; }

/* The masthead on the pages that ARE the form (login, signup, lost password).
   Two username/password forms on one screen is confusing to a person and was
   an outright ambiguity to anything automating the page. */
.sg-mast-quiet {
  border: 1px solid var(--sg-rule); background: rgba(255,255,255,.05);
  border-radius: 3px; padding: 12px 16px; font-size: 12.5px; color: var(--sg-mist);
}
.sg-mast-quiet p { margin: 0 0 4px; }
.sg-mast-quiet p:last-child { margin-bottom: 0; }
.sg-mast-quiet a { color: var(--sg-gold); font-weight: 700; }