/* sjheader.css - header styles (for sjmodern.Web) */
:root{
  --sj-gold: #C99A2E;
  --sj-blue: #0B3B82;
  --sj-green: #2B8A3E;
  --sj-navy: #072146;
  --sj-white: #FFFFFF;
}

/* Login card matching main menu bar color */
.hf-login-card {
  background: var(--sj-navy);
  color: var(--sj-white);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(2,6,23,0.35);
}
.hf-login-card .form-control { background: rgba(255,255,255,0.06); color: var(--sj-white); border: 1px solid rgba(255,255,255,0.08); }
.hf-login-card .form-label { color: rgba(255,255,255,0.9); }
.hf-login-card .btn-primary { background: var(--sj-gold); border-color: var(--sj-gold); color: var(--sj-navy); }
.hf-login-card .text-danger { color: #ffb3b3; }

/* Tagline next to brand logo */
.brand-tagline {
  color: var(--sj-white);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  align-self: center;
}

@media (max-width: 767.98px) {
  .brand-tagline { display: none; }
}

/* Horse & The Fox title image next to tagline */
.brand-hf-title {
  height: auto;
  max-height: 48px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 2rem; /* extra spacing to shift image further right of the tagline */
}

@media (max-width: 991.98px) {
  .brand-hf-title { display: none; }
}

/* Main book title image on HorseAndFoxBook index */
.hf-main-title {
  max-width: 80%;
  height: auto;
  max-height: 160px;
}

@media (min-width: 1400px) {
  .hf-main-title { max-height: 220px; }
}

.hf-back-cover {
  max-width: 70%;
  height: auto;
  max-height: 480px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

@media (max-width: 767.98px) {
  .hf-back-cover { max-width: 95%; max-height: 260px; }
}

.hf-fullscreen-cover {
  width: 100%;
  height: calc(100vh - 160px); /* leave space for header and padding */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #000; /* dark backdrop to make book cover readable */
  margin: 1rem 0;
  overflow: hidden;
}

.hf-fullscreen-cover .hf-back-cover {
  /* make the cover image larger while preserving aspect ratio */
  width: auto !important;
  max-width: 98vw !important; /* almost full viewport width */
  height: auto !important;
  max-height: calc(100vh - 120px) !important; /* leave room for header */
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  object-fit: contain !important;
}

/* Thumbnail/front cover (smaller than fullscreen back cover) */
.hf-thumb {
  max-width: 40vw;
  height: auto;
  max-height: calc(100vh - 220px);
  display: block;
}

/* Ensure spacing and clean alignment when showing front/back cover pair */
.hf-cover-pair {
  gap: 1rem;
}

.hf-cover-pair img {
  display: block;
}

/* Ensure front and back thumbnails in the pair render at the same visual size */
.hf-cover-pair .hf-thumb,
.hf-cover-pair .hf-back-cover {
  /* Force both covers into the same visual box on desktop */
  width: 360px !important;
  height: 480px !important;
  max-width: 40vw !important;
  max-height: 64vh !important;
  display: block !important;
  object-fit: cover !important;
}

@media (max-width: 991.98px) {
  .hf-cover-pair .hf-thumb,
  .hf-cover-pair .hf-back-cover {
    width: 320px !important;
    height: 426px !important;
    max-width: 46vw !important;
    max-height: 60vh !important;
    object-fit: contain !important; /* avoid cropping on smaller screens */
  }
}

@media (max-width: 767.98px) {
  .hf-cover-pair .hf-thumb,
  .hf-cover-pair .hf-back-cover {
    width: 92vw !important;
    height: auto !important;
    max-width: 95vw !important;
    max-height: 420px !important;
    object-fit: contain !important; /* avoid cropping on narrow screens */
  }
}

/* Ensure both title and cover are forcibly centered */
.hf-main-title, .hf-back-cover {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Author image sizing on story page */
.hf-author-img {
  max-width: 1500px;
  max-height: 1500px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.header-navbar {
  /* solid navy background for menu bar */
  background: var(--sj-navy);
  color: var(--sj-white);
  /* reduce vertical space to make header more compact */
  padding: 0.15rem 0;
  /* bottom border color matched to logo green */
  border-bottom: 4px solid var(--sj-green);
  /* allow branded logo to overflow and overlap page content below */
  overflow: visible;
  position: relative;
}

/* Align the nav content to the bottom edge of the header (tabs sit on bottom) */
.header-navbar > .container-fluid,
.header-navbar .container,
.header-navbar .navbar-collapse {
  display: flex;
  align-items: flex-end; /* align children to the bottom */
}

.header-navbar .navbar-toggler {
  align-self: flex-end; /* ensure the toggler lines up with bottom */
}

/* Ensure any previous background image is removed */
.header-navbar { background-image: none !important; }

/* Panel used on the HorseAndFoxBook index to match the header/nav background */
.hf-title-panel {
  background: var(--sj-navy);
  padding: 0.75rem 0.5rem;
  border-radius: 8px;
}
.hf-title-panel .hf-main-title { max-height: 140px; }

/* Make the outer row on the HorseAndFoxBook index match the header/nav background */
.hf-row-bg { background: var(--sj-navy); padding: 1.25rem 0; border-radius: 10px; }
.hf-row-bg .bg-white { background: transparent !important; box-shadow: none !important; }
.hf-row-bg .book-intro { color: #fff; }
.hf-row-bg p.lead { color: #fff; }

/* Checkout page header styling */
.hf-checkout-header h2 {
  color: var(--sj-gold);
  font-weight: 700;
}

/* Note text on checkout page */
.hf-checkout-note h3,
.hf-checkout-note p {
  color: var(--sj-gold);
}

/* Modernized hover effect for checkout option cards */
.hf-option-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
  border-radius: 12px;
  padding: 0.9rem;
  border: 1px solid rgba(255,255,255,0.04);
  transition: transform 220ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms, background 220ms, border-color 220ms;
  will-change: transform, box-shadow;
}
.hf-option-card:focus { /* keyboard focus */
  outline: 2px solid rgba(201,154,46,0.18);
  outline-offset: 4px;
}
.hf-option-card .card-title {
  color: rgba(255,255,255,0.95);
  transition: color 200ms;
}
.hf-option-card .card-text {
  color: rgba(255,255,255,0.78);
  transition: color 200ms;
}
.hf-option-card:hover,
.hf-option-card:focus {
  transform: translateY(-6px) scale(1.02);
  /* soft two-tone gradient using brand navy -> gold for a modern feel */
  background: linear-gradient(135deg, rgba(11,59,130,0.92), rgba(201,154,46,0.12));
  box-shadow: 0 12px 30px rgba(2,6,23,0.45), inset 0 1px 0 rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.06);
}
.hf-option-card:hover .card-title,
.hf-option-card:focus .card-title {
  color: var(--sj-white);
}
.hf-option-card:hover .card-text,
.hf-option-card:focus .card-text {
  color: rgba(255,255,255,0.95);
}

/* Ensure paypal hosted button container text is legible on dark cards */
#paypal-container-RZVZ66V584X9A { color: #fff !important; }
/* Also target any generic paypal container prefix used in other places */
[id^="paypal-container-"] { color: #fff !important; }

/* Brand/logo */
.brand-logo {
  /* Display image at its natural/original size and allow it to overlap page content */
  height: auto;
  width: auto;
  max-width: none;
  margin-right: 0.6rem;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  z-index: 20;
  /* center the logo vertically within the navbar instead of shifting it down */
  top: 0;
  align-self: center;
}

/* Nav links aligned to the right */
.header-navbar .navbar-nav {
  display: flex;
  gap: 0.35rem;
  align-items: stretch;
}

/* Tab-style nav items: look like tabs with a white active tab */
.header-navbar .nav-link {
  color: var(--sj-white);
  font-weight: 600;
  margin: 0;
  padding: 0.45rem 0.7rem;
  font-size: 16px;
  transition: color 150ms ease, background-color 150ms ease, transform 120ms ease;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 3px solid transparent;
  border-radius: 6px 6px 0 0; /* tab shape */
}

/* Hover: subtle lighter background and gold text */
.header-navbar .nav-link:hover,
.header-navbar .nav-link:focus {
  color: var(--sj-gold);
  background: rgba(255,255,255,0.04);
  text-decoration: none;
  transform: translateY(-1px);
}

/* Active tab: white background, navy text, no bottom border so it appears connected to page */
.header-navbar .nav-link.active,
.header-navbar .nav-item.show > .nav-link {
  background: var(--sj-white);
  color: var(--sj-navy) !important;
  border-color: rgba(0,0,0,0.08);
  border-bottom-color: transparent;
}

/* Dropdown caret spacing fix when using tab style */
.header-navbar .nav-item.dropdown .nav-link.dropdown-toggle::after {
  margin-left: 0.25rem;
}

/* Mobile tweaks */
@media (max-width: 991.98px) {
  /* on mobile, reduce overlap so layout remains usable */
  .brand-logo { height: auto; max-width: 140px; max-height: 40px; top: 8px; }
  .header-navbar { padding: 0.1rem 0; }
}