/* KWK Books locked palette. Gold is an accent or rule, never a fill. */

:root {
  --navy: #16324F;
  --navy-soft: #24486B;
  --gold: #B8892B;
  --kicker: #9FB3C8;
  --white: #FFFFFF;
  --ink: #1B1F24;
  --text: #1B1F24;
  --muted: #5A6875;
  --gray: #5A6875;
  --rule: #DCE2E8;
  --wash: #F4F6F8;
  --offwhite: #F4F6F8;
  --gray-lt: #F4F6F8;
  /* #2E7D5B (good) and #B3402F (bad) are form-state colors. */
  --good: #2E7D5B;
  --bad: #B3402F;
  --radius: 8px;
  --shadow: 0 2px 16px rgba(22, 50, 79, 0.09);
}

/* Primary buttons: navy fill, white text, gold rule.
   On navy bands the same class is a white fill with navy text. */
a.btn.btn-gold,
button.btn.btn-gold,
button.form-submit {
  background: var(--navy);
  color: var(--white);
  text-decoration: none;
  border-style: solid;
  border-width: 0 0 2px;
  border-color: var(--gold);
  box-sizing: border-box;
}

a.btn.btn-gold:hover,
button.btn.btn-gold:hover,
button.form-submit:hover {
  background: var(--navy-soft);
  color: var(--white);
  border-bottom-color: var(--gold);
}

nav a.btn.btn-gold,
.hero a.btn.btn-gold,
.how a.btn.btn-gold,
.cta-banner a.btn.btn-gold,
.closing a.btn.btn-gold,
.not-found a.btn.btn-gold {
  background: var(--white);
  color: var(--navy);
  border-bottom: 2px solid var(--gold);
}

nav a.btn.btn-gold:hover,
.hero a.btn.btn-gold:hover,
.how a.btn.btn-gold:hover,
.cta-banner a.btn.btn-gold:hover,
.closing a.btn.btn-gold:hover,
.not-found a.btn.btn-gold:hover {
  background: var(--wash);
  color: var(--navy);
}

button.form-submit.sending {
  background: var(--navy-soft);
  color: var(--white);
}

.btn.btn-outline:hover {
  border-color: var(--gold);
  color: var(--white);
}

/* Step circles: white fill, gold ring. The ring is the accent. */
.step-num {
  background: var(--white);
  color: var(--navy);
  box-shadow: 0 0 0 2px var(--gold);
}

/* Small labels: navy text with a gold rule. White on navy bands. */
.section-label {
  color: var(--navy-soft);
  display: inline-block;
  border-top: 2px solid var(--gold);
  padding-top: 8px;
}

.how .section-label,
.cta-banner .section-label,
.closing .section-label,
.hero .section-label {
  color: var(--white);
}

.blog-tag {
  color: var(--navy-soft);
  box-shadow: inset 0 -2px 0 var(--gold);
  padding-bottom: 3px;
  width: fit-content;
}

.post-tag {
  color: var(--white);
  box-shadow: inset 0 -2px 0 var(--gold);
}

.hero-badge {
  color: var(--white);
  background: transparent;
  border-color: var(--gold);
}

.blog-link,
.back-link,
.post-body a {
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
}

.blog-link,
.back-link {
  color: var(--navy);
  text-decoration: underline;
}

nav .nav-phone {
  color: var(--kicker);
}

nav .nav-phone:hover {
  color: var(--white);
}

nav .nav-links a:hover,
nav .nav-links a[aria-current="page"] {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 4px;
}

.logo img,
.nav-logo img,
.footer-brand img,
.not-found-logo img {
  width: 221px;
  height: 48px;
}

@media (max-width: 768px) {
  nav .logo img,
  nav .nav-logo img {
    width: auto;
    height: 32px;
    max-width: 148px;
    object-fit: contain;
    object-position: left center;
  }
}