/*
  Light theme overrides.
  Loaded AFTER existing styles (including grayscale.css) to neutralize:
  - black backgrounds
  - green outlined heading stroke
*/

:root {
  --tss-bg: #ffffff;
  --tss-fg: #111111;
  --tss-muted: #555555;
  --tss-border: rgba(0, 0, 0, 0.12);
  --tss-accent: #111111;
}

/* Oswald-only typography (prefer 400/500 everywhere)
   IMPORTANT: don't override icon fonts (e.g. Font Awesome) via a global '*' rule. */
body,
button,
input,
select,
textarea {
  font-family: "Oswald", sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Oswald", sans-serif;
  font-weight: 500;
}

b, strong {
  font-weight: 500;
}

html,
body {
  background: var(--tss-bg) !important;
  color: var(--tss-fg) !important;
}

/* Headings: remove stroke/outline and make crisp */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--tss-fg) !important;
  -webkit-text-stroke: 0 !important;
  text-stroke: 0 !important;
  letter-spacing: 0.2px;
}

p,
li,
small,
label {
  color: var(--tss-fg) !important;
}

a {
  color: var(--tss-accent) !important;
}

a:hover,
a:focus {
  color: #000 !important;
  text-decoration: underline;
}

/* Remove the “black hero sections” look site-wide */
.intro,
.intro-auth,
.content-section,
footer,
#footer,
#featured,
#authentication,
#cards,
#grading,
#brokerage,
#authenticationCase,
#cardsCase,
#gradingCase,
#brokerageCase {
  background: var(--tss-bg) !important;
  background-image: none !important;
  color: var(--tss-fg) !important;
}

/* Navbar: keep it clean */
.navbar,
.navbar-default {
  background: var(--tss-bg) !important;
  border-bottom: 1px solid var(--tss-border) !important;
}

.navbar-default .navbar-brand,
.navbar-default .navbar-nav > li > a {
  color: var(--tss-fg) !important;
}

/* Buttons: keep simple */
.btn,
.btn-default,
.btn-info,
.btn-primary {
  border-radius: 0;
}

.btn-default {
  border: 1px solid var(--tss-fg) !important;
  color: var(--tss-fg) !important;
  background: transparent !important;
}

.btn-default:hover,
.btn-default:focus {
  background: var(--tss-fg) !important;
  color: #fff !important;
}

/* Sticky mini header (appears on scroll) */
.tss-sticky-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transform: translateY(-110%);
  transition: transform 0.18s ease;
  background: rgba(250, 250, 250, 0.95);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(6px);
}

.tss-sticky-header.is-visible {
  transform: translateY(0);
}

/* Footer: keep it compact and responsive (especially on small screens) */
footer #footer {
  padding: 24px 0 !important;
}

footer #footer h3 {
  margin: 0 0 12px 0;
  font-size: 22px;
}

@media (max-width: 768px) {
  footer #footer {
    padding: 16px 0 !important;
  }

  footer #footer h3 {
    font-size: 18px;
  }
}

.tss-sticky-header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 16px 12px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.tss-sticky-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: inherit;
}

.tss-sticky-brand:hover,
.tss-sticky-brand:focus {
  text-decoration: none;
}

.tss-sticky-logo {
  width: 32px;
  height: 32px;
}

.tss-sticky-title {
  font-size: 15px;
  margin: 0;
  line-height: 1;
}

/* Shared top header (non-sticky) */
.tss-page-header {
  text-align: center;
  padding-top: 28px;
  padding-bottom: 18px;
}

.tss-page-brand {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
}

.tss-page-brand:hover,
.tss-page-brand:focus {
  text-decoration: none;
}

.tss-page-logo {
  width: 84px;
  height: auto;
}

.tss-page-title {
  margin: 0;
}