/* Badger Commerce marketing site: what the design brief and storefront settings don't cover. */

/* Headings in Fraunces to match badgercommerce.co; body stays Outfit from the brief */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&display=swap');
.json-heading, .nova-display-md, .nova-display-lg, .nova-hero h1, .nova-html-content h2, .nova-html-content h3,
.nova-blog-list h2, .nova-blog-list h3 {
  font-family: 'Fraunces', Georgia, serif !important; font-weight: 600; letter-spacing: -0.015em;
}

/* Logo: wide wordmark */
.brock-header__logo { max-height: 34px !important; height: 34px; width: auto; }
@media (max-width: 767px) { .brock-header__logo { max-height: 26px !important; height: 26px; } }
.brock-header__name--with-logo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Heroes: compact, content-led height */
.nova-hero--gradient { min-height: 60vh !important; }
.nova-hero--gradient .nova-hero__content, .nova-hero--split-image .nova-hero__content {
  padding-top: var(--space-12) !important; padding-bottom: var(--space-12) !important; }
@media (max-width: 767px) {
  .nova-hero--gradient { min-height: 0 !important; }
  .nova-hero--gradient .nova-hero__content, .nova-hero--split-image .nova-hero__content {
    padding-top: var(--space-8) !important; padding-bottom: var(--space-10) !important; }
}

/* Eyebrows on dark surfaces use the on-dark accent */
.nova-on-dark .nova-overline, .nova-bg-dark .nova-overline, .nova-bg-mesh-dark .nova-overline,
.nova-bg-gradient-dark .nova-overline { color: var(--color-on-dark-accent) !important; }
.nova-bg-mesh-dark .json-link { color: #E7E5E4; }
.nova-bg-mesh-dark .json-link:hover { color: #fff; }

/* Screenshots inside cards */
.json-container .json-image img { border-radius: var(--radius-md); }

/* Blog posts: readable measure and rhythm */
.nova-html-content > .nova-container { max-width: 760px; padding-top: var(--space-16); padding-bottom: var(--space-12); }
.nova-html-content p, .nova-html-content li { font-size: 1.125rem; line-height: 1.75; color: var(--color-gray-700); }
.nova-html-content h3 { font-size: 1.5rem; margin: var(--space-10) 0 var(--space-3); color: var(--color-text-strong); }
.nova-html-content a { color: var(--color-primary); text-underline-offset: 3px; }

/* Never let a section be wider than the screen */
.json-container, .json-row, .json-column { min-width: 0; max-width: 100%; }
.json-button { white-space: normal; text-align: center; max-width: 100%; }
.json-heading, .json-text { overflow-wrap: break-word; }
@media (max-width: 767px) {
  .json-row-stack > .json-button, .json-row-stack > .json-component { width: 100%; }
  .nova-display-md { font-size: 1.875rem; line-height: 1.15; }
  .nova-html-content > .nova-container { padding-top: var(--space-10); padding-bottom: var(--space-8); }
}

/* Split heroes hold product screenshots: show the whole image, framed, never cropped */
.nova-hero--split { min-height: 0 !important; align-items: center; }
.nova-hero--split-image { padding: var(--space-12) var(--space-12) var(--space-12) 0; overflow: visible !important; }
.nova-hero--split-image > div { position: relative !important; inset: auto !important; }
.nova-hero--split-image img { position: static !important; inset: auto !important; width: 100% !important; height: auto !important; object-fit: contain !important;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); border: 1px solid var(--color-gray-200); }
@media (max-width: 767px) {
  .nova-hero--split { grid-template-columns: 1fr !important; }
  .nova-hero--split-image { padding: 0 var(--space-5) var(--space-10); }
}

/* Phone screenshots: keep them phone-sized */
.json-image img[src*="-mobile"] { max-width: 300px; margin: 0 auto; display: block; border: 1px solid var(--color-gray-200); }

/* Our footer block carries the copyright line, so drop the theme's legal strip */
.brock-footer__base { display: none; }
img[src*="wordmark-light"] { max-width: 220px !important; height: auto !important; }
.brock-footer .json-link { color: #D6D3D1 !important; text-decoration: none; }
.brock-footer .json-link:hover { color: #fff !important; text-decoration: underline; }
@media (max-width: 767px) {
  .nova-hero__cta .json-row { flex-direction: column; align-items: stretch; }
  .nova-hero__cta .json-button { width: 100%; }
}