/* ==========================================================================
   BuySide Studio — Brand Overrides
   --------------------------------------------------------------------------
   Purpose-built refinements that Kajabi's native settings cannot express
   (letter-spacing, uppercase nav, hover states, the login card).
   Everything else — colors, fonts, layouts, section content — is driven by
   native theme settings and remains fully editable in the theme editor.
   ========================================================================== */

/* Safety net: guarantees brand fonts load even before the editor's
   font settings are re-saved after theme import. (@import must precede
   all other rules to be valid CSS.) */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --bss-navy: #16213a;
  --bss-navy-deep: #0e1626;
  --bss-gold: #b8975a;
  --bss-gold-light: #d4af7a;
  --bss-cream: #faf8f3;
  --bss-cream-dark: #e6e0d3;
  --bss-divider: rgba(22, 33, 58, 0.1);
}

/* --------------------------------------------------------------------------
   1. Typography refinements
   -------------------------------------------------------------------------- */

h1, h2, h3, .h1, .h2, .h3 {
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Italic accent inside headings renders in gold — matches the brand site */
h1 em, h2 em, h3 em,
.h1 em, .h2 em, .h3 em {
  font-style: italic;
  color: var(--bss-gold-light);
}

.background-light h1 em, .background-light h2 em, .background-light h3 em {
  color: var(--bss-gold);
}

/* --------------------------------------------------------------------------
   2. Buttons — square, uppercase, tracked, navy on hover
   -------------------------------------------------------------------------- */

.btn,
.form-btn,
.two-step__btn {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.btn--solid:hover,
.form-btn:not(.btn--outline):hover {
  background-color: var(--bss-navy) !important;
  border-color: var(--bss-navy) !important;
}

.btn--outline:hover {
  border-color: var(--bss-gold) !important;
  color: var(--bss-gold) !important;
}

/* --------------------------------------------------------------------------
   3. Header — compact uppercase nav with gold underline on hover
   -------------------------------------------------------------------------- */

.header {
  border-bottom: 1px solid var(--bss-divider);
}

.header a.link-list__link,
.header .dropdown__trigger,
.header .user__login a {
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .header a.link-list__link {
    position: relative;
  }
  .header a.link-list__link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 1px;
    background: var(--bss-gold);
    transition: width 0.25s ease;
  }
  .header a.link-list__link:hover::after {
    width: 100%;
  }
  .header a.link-list__link:hover,
  .header .dropdown__trigger:hover {
    color: var(--bss-navy) !important;
  }
}

/* --------------------------------------------------------------------------
   4. Footer — deep navy, muted uppercase links, inverted logo
   -------------------------------------------------------------------------- */

form.oauth-form {
    text-align: center;
}

.footer a.link-list__link {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.footer a.link-list__link:hover {
  color: var(--bss-gold) !important;
}

.footer .copyright {
  font-size: 12px;
}

/* --------------------------------------------------------------------------
   5. Login page — white card on the navy section
   -------------------------------------------------------------------------- */

.auth__content {
  background: #ffffff;
  padding: 48px 44px;
  text-align: left;
  box-shadow: 0 24px 60px rgba(14, 22, 38, 0.35);
}

@media (max-width: 767px) {
  .auth__content {
    padding: 36px 24px;
  }
}

/* Contents sit on white, so restore brand colors inside the card
   (the section's dark-background rules would otherwise turn them white) */
.section.background-dark .auth__content,
.section.background-dark .auth__content a {
  color: #4a4a4a;
}

.section.background-dark .auth__content .auth__title {
  color: var(--bss-navy);
}

.auth__content .auth__title {
  text-align: center;
  margin-bottom: 28px;
  font-size: 32px;
}

.auth__content .auth__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bss-navy);
}

.auth__content .form-control {
  border: 1px solid var(--bss-cream-dark);
  border-radius: 0;
  background: var(--bss-cream);
  transition: border-color 0.2s ease;
}

.auth__content .form-control:focus {
  border-color: var(--bss-gold);
  box-shadow: none;
}

.auth__link {
  text-align: center;
}

.section.background-dark .auth__content .auth__link a {
  color: var(--bss-gold);
  font-size: 13px;
}

.section.background-dark .auth__content .auth__link a:hover {
  color: var(--bss-navy);
}

/* --------------------------------------------------------------------------
   6. Library — product cards in the brand's flat, bordered style
   -------------------------------------------------------------------------- */

.product {
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.product:hover {
  box-shadow: 0 14px 34px rgba(22, 33, 58, 0.1);
  transform: translateY(-2px);
}

.product__title {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
}

.products__title {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   7. Forms (global) — square inputs with gold focus, brand consistency
   -------------------------------------------------------------------------- */

.form-control {
  border-radius: 0;
}

.form-control:focus {
  border-color: var(--bss-gold);
  box-shadow: 0 0 0 1px var(--bss-gold);
}