/* ==========================================================================
   Bavarsa  assets/css/wp-blocks.css

   Everything WordPress needs that the static package never had: the blog,
   single post, comments, widgets, pagination and the output of WordPress
   core blocks.

   RULES FOR THIS FILE (the same ones core.css lives by)
   1. It only ever CONSUMES design tokens. No literal colours, no literal
      type sizes. That is what lets one implementation serve all fifteen
      demo palettes without a single per-demo override.
   2. Logical properties only  never left/right. The theme ships one
      stylesheet for both RTL and LTR.
   3. No demo-specific selector ever appears here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Blog layout
   -------------------------------------------------------------------------- */

.rp-blog-layout {
  display: grid;
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  /* minmax(0, …) so a wide embed in a post cannot widen the whole page. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  align-items: start;
}

/* No sidebar registered: the post column simply takes the full width. */
.rp-blog-layout:not(:has(.rp-sidebar)) {
  grid-template-columns: minmax(0, 1fr);
  max-inline-size: 52rem;
}

@media (max-width: 940px) {
  .rp-blog-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.rp-posts {
  display: grid;
  gap: var(--rp-space-6);
  min-inline-size: 0;
}

/* --------------------------------------------------------------------------
   2. Post cards
   -------------------------------------------------------------------------- */

.rp-post-card {
  display: grid;
  gap: var(--rp-space-5);
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  align-items: start;
  padding-block-end: var(--rp-space-6);
  border-block-end: 1px solid var(--rp-border);
}

.rp-post-card:last-child {
  border-block-end: 0;
  padding-block-end: 0;
}

@media (max-width: 700px) {
  .rp-post-card {
    grid-template-columns: minmax(0, 1fr);
  }
}

.rp-post-card-media {
  display: block;
  overflow: hidden;
  border-radius: var(--rp-radius);
  background: var(--rp-surface);
  aspect-ratio: 4 / 3;
}

.rp-post-card-media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--rp-ease);
}

.rp-post-card:hover .rp-post-card-media img {
  transform: scale(1.04);
}

/* min-inline-size: 0 so a long unbroken word in an excerpt cannot widen the
   grid track and push the card past the viewport. */
.rp-post-card-body {
  min-inline-size: 0;
}

.rp-post-card-title {
  font-family: var(--rp-font-display);
  font-size: var(--rp-fs-xl);
  font-weight: 700;
  line-height: var(--rp-lh-tight);
}

.rp-post-card-title a {
  color: var(--rp-text);
  transition: color 0.25s var(--rp-ease);
}

.rp-post-card-title a:hover {
  color: var(--rp-primary);
}

.rp-post-card-excerpt {
  margin-block-start: var(--rp-space-3);
  font-size: var(--rp-fs-sm);
  color: var(--rp-muted);
}

.rp-post-card-more {
  display: inline-flex;
  align-items: center;
  gap: var(--rp-space-2);
  margin-block-start: var(--rp-space-4);
  font-size: var(--rp-fs-sm);
  font-weight: 700;
  color: var(--rp-primary);
}

.rp-post-card-more .rp-icon {
  transition: transform 0.25s var(--rp-ease);
}

.rp-post-card-more:hover .rp-icon {
  transform: translateX(-4px);
}

/* --------------------------------------------------------------------------
   3. Entry meta
   -------------------------------------------------------------------------- */

.rp-entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rp-space-2) var(--rp-space-4);
  margin-block-start: var(--rp-space-3);
  font-size: var(--rp-fs-xs);
  color: var(--rp-muted);
}

.rp-entry-meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--rp-space-2);
}

.rp-entry-meta-item .rp-icon {
  inline-size: 1em;
  block-size: 1em;
  color: var(--rp-primary);
}

.rp-entry-meta a {
  color: inherit;
}

.rp-entry-meta a:hover {
  color: var(--rp-primary);
}

/* --------------------------------------------------------------------------
   4. Single entry content
   -------------------------------------------------------------------------- */

.rp-entry-media {
  overflow: hidden;
  border-radius: var(--rp-radius-lg);
}

.rp-entry-media img {
  inline-size: 100%;
  block-size: auto;
}

.rp-entry-content {
  font-size: var(--rp-fs-base);
  line-height: var(--rp-lh-base);
  color: var(--rp-text-soft);
}

.rp-entry-content > * + * {
  margin-block-start: var(--rp-space-5);
}

.rp-entry-content h1,
.rp-entry-content h2,
.rp-entry-content h3,
.rp-entry-content h4,
.rp-entry-content h5,
.rp-entry-content h6 {
  font-family: var(--rp-font-display);
  font-weight: 700;
  line-height: var(--rp-lh-tight);
  color: var(--rp-text);
  margin-block-start: var(--rp-space-7);
}

.rp-entry-content h2 { font-size: var(--rp-fs-2xl); }
.rp-entry-content h3 { font-size: var(--rp-fs-xl); }
.rp-entry-content h4 { font-size: var(--rp-fs-lg); }

.rp-entry-content a {
  color: var(--rp-primary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.rp-entry-content ul,
.rp-entry-content ol {
  padding-inline-start: var(--rp-space-6);
}

.rp-entry-content ul { list-style: disc; }
.rp-entry-content ol { list-style: decimal; }

.rp-entry-content li + li {
  margin-block-start: var(--rp-space-2);
}

.rp-entry-content img {
  border-radius: var(--rp-radius);
}

.rp-entry-content hr {
  border: 0;
  border-block-start: 1px solid var(--rp-border);
}

.rp-entry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rp-space-2);
  margin-block-start: var(--rp-space-6);
}

.rp-entry-tags a {
  padding: 3px var(--rp-space-3);
  border: 1px solid var(--rp-border-strong);
  border-radius: var(--rp-radius-pill);
  font-size: var(--rp-fs-xs);
  color: var(--rp-muted);
}

.rp-entry-tags a:hover {
  border-color: var(--rp-primary);
  color: var(--rp-primary);
}

.rp-page-links {
  display: flex;
  gap: var(--rp-space-2);
  margin-block-start: var(--rp-space-6);
  font-size: var(--rp-fs-sm);
}

/* --------------------------------------------------------------------------
   5. Post navigation
   -------------------------------------------------------------------------- */

.rp-post-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--rp-space-4);
  margin-block-start: var(--rp-space-7);
  padding-block-start: var(--rp-space-6);
  border-block-start: 1px solid var(--rp-border);
  font-size: var(--rp-fs-sm);
}

.rp-post-nav-prev,
.rp-post-nav-next {
  /* Cap each side so a long post title cannot squeeze the other one out. */
  max-inline-size: 22rem;
}

.rp-post-nav-next {
  text-align: end;
}

.rp-post-nav a {
  color: var(--rp-text);
  font-weight: 600;
}

.rp-post-nav a:hover {
  color: var(--rp-primary);
}

/* --------------------------------------------------------------------------
   6. Pagination
   -------------------------------------------------------------------------- */

.rp-pagination,
.comments-pagination {
  margin-block-start: var(--rp-space-7);
}

.rp-pagination .nav-links,
.comments-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rp-space-2);
}

.rp-pagination .page-numbers,
.comments-pagination .page-numbers {
  display: inline-grid;
  place-items: center;
  min-inline-size: 2.5rem;
  min-block-size: 2.5rem;
  padding-inline: var(--rp-space-3);
  border: 1px solid var(--rp-border);
  border-radius: var(--rp-btn-radius);
  font-size: var(--rp-fs-sm);
  font-weight: 600;
  color: var(--rp-text-soft);
  transition: border-color 0.25s var(--rp-ease), color 0.25s var(--rp-ease);
}

.rp-pagination .page-numbers:hover,
.comments-pagination .page-numbers:hover {
  border-color: var(--rp-primary);
  color: var(--rp-primary);
}

.rp-pagination .page-numbers.current,
.comments-pagination .page-numbers.current {
  background: var(--rp-primary);
  border-color: var(--rp-primary);
  color: var(--rp-on-primary);
}

.rp-pagination .page-numbers.dots {
  border-color: transparent;
}

/* --------------------------------------------------------------------------
   7. Sidebar and widgets
   -------------------------------------------------------------------------- */

.rp-sidebar {
  display: grid;
  gap: var(--rp-space-5);
  min-inline-size: 0;
  position: sticky;
  inset-block-start: calc(var(--rp-header-h) + var(--rp-space-5));
}

@media (max-width: 940px) {
  .rp-sidebar {
    position: static;
  }
}

.rp-widget {
  padding: var(--rp-space-5);
  border: 1px solid var(--rp-border);
  border-radius: var(--rp-radius);
  background: var(--rp-surface);
  font-size: var(--rp-fs-sm);
}

.rp-widget-title {
  font-family: var(--rp-font-display);
  font-size: var(--rp-fs-base);
  font-weight: 700;
  color: var(--rp-text);
  margin-block-end: var(--rp-space-4);
}

.rp-widget ul {
  display: grid;
  gap: var(--rp-space-2);
}

.rp-widget li a {
  color: var(--rp-muted);
}

.rp-widget li a:hover {
  color: var(--rp-primary);
}

.rp-footer-col .rp-widget {
  padding: 0;
  border: 0;
  background: none;
}

/* --------------------------------------------------------------------------
   8. Search form
   -------------------------------------------------------------------------- */

.rp-search-form {
  display: flex;
  gap: var(--rp-space-2);
}

.rp-search-form .rp-input {
  flex: 1;
  min-inline-size: 0;
}

/* --------------------------------------------------------------------------
   9. Empty states, search results and 404
   -------------------------------------------------------------------------- */

.rp-empty {
  padding: var(--rp-space-8) var(--rp-space-5);
  text-align: center;
  border: 1px dashed var(--rp-border-strong);
  border-radius: var(--rp-radius-lg);
}

.rp-empty .rp-icon {
  color: var(--rp-muted);
}

.rp-empty-title {
  font-family: var(--rp-font-display);
  font-size: var(--rp-fs-xl);
  font-weight: 700;
  margin-block: var(--rp-space-4) var(--rp-space-2);
}

.rp-empty-text {
  font-size: var(--rp-fs-sm);
  color: var(--rp-muted);
}

.rp-result {
  padding-block-end: var(--rp-space-5);
  border-block-end: 1px solid var(--rp-border);
}

.rp-result-type {
  font-size: var(--rp-fs-xs);
  font-weight: 700;
  color: var(--rp-primary);
}

.rp-result-title {
  font-family: var(--rp-font-display);
  font-size: var(--rp-fs-lg);
  font-weight: 700;
  margin-block: var(--rp-space-1) var(--rp-space-2);
}

.rp-result-title a {
  color: var(--rp-text);
}

.rp-result-title a:hover {
  color: var(--rp-primary);
}

.rp-result-excerpt {
  font-size: var(--rp-fs-sm);
  color: var(--rp-muted);
}

.rp-404-code {
  font-family: var(--rp-font-display);
  font-size: var(--rp-fs-5xl);
  font-weight: 800;
  line-height: 1;
  color: var(--rp-primary);
  opacity: 0.22;
}

/* --------------------------------------------------------------------------
   10. Comments
   -------------------------------------------------------------------------- */

.rp-comments {
  margin-block-start: var(--rp-space-8);
  padding-block-start: var(--rp-space-7);
  border-block-start: 1px solid var(--rp-border);
}

.rp-comments-title {
  font-family: var(--rp-font-display);
  font-size: var(--rp-fs-xl);
  font-weight: 700;
  margin-block-end: var(--rp-space-6);
}

.rp-comment-list,
.rp-comment-list .children {
  display: grid;
  gap: var(--rp-space-5);
  list-style: none;
}

/* Replies step inward on the inline axis, so the thread reads correctly in
   both writing directions. */
.rp-comment-list .children {
  margin-block-start: var(--rp-space-5);
  padding-inline-start: var(--rp-space-5);
  border-inline-start: 2px solid var(--rp-border);
}

.rp-comment-list .comment-body {
  padding: var(--rp-space-5);
  border: 1px solid var(--rp-border);
  border-radius: var(--rp-radius);
  background: var(--rp-surface);
}

.rp-comment-list .comment-author {
  display: flex;
  align-items: center;
  gap: var(--rp-space-3);
  font-weight: 700;
}

.rp-comment-list .comment-author img {
  border-radius: 50%;
}

.rp-comment-list .comment-author .says {
  display: none;
}

.rp-comment-list .comment-meta {
  margin-block: var(--rp-space-2) var(--rp-space-4);
  font-size: var(--rp-fs-xs);
  color: var(--rp-muted);
}

.rp-comment-list .comment-meta a {
  color: inherit;
}

.rp-comment-list .reply {
  margin-block-start: var(--rp-space-3);
  font-size: var(--rp-fs-sm);
  font-weight: 600;
}

.rp-comment-list .reply a {
  color: var(--rp-primary);
}

.rp-comment-form {
  margin-block-start: var(--rp-space-7);
}

.rp-comment-form .comment-notes,
.rp-comment-form .comment-form-cookies-consent {
  font-size: var(--rp-fs-xs);
  color: var(--rp-muted);
}

.rp-comment-form .comment-form-cookies-consent {
  display: flex;
  align-items: center;
  gap: var(--rp-space-2);
}

.rp-comments-closed {
  font-size: var(--rp-fs-sm);
  color: var(--rp-muted);
}

/* --------------------------------------------------------------------------
   11. Generic contact split

   Each demo names its own two-column contact wrapper (cs-contact, se-split,
   ft-split and so on) and passes those class names to the shared contact
   part. These are the fallback used when no demo class is supplied.
   -------------------------------------------------------------------------- */

.rp-contact-split {
  display: grid;
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  /* minmax(0, …) rather than 1fr: a bare 1fr keeps its auto minimum, so the
     form row inside the panel would push the page sideways below ~360px. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}

@media (max-width: 880px) {
  .rp-contact-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

.rp-contact-panel {
  padding: var(--rp-space-6);
  border: 1px solid var(--rp-border);
  border-radius: var(--rp-radius);
  background: var(--rp-bg);
}

/* --------------------------------------------------------------------------
   12. WordPress core block output
   -------------------------------------------------------------------------- */

.rp-entry-content .alignwide {
  margin-inline: calc(var(--rp-space-7) * -1);
  max-inline-size: none;
}

.rp-entry-content .alignfull {
  margin-inline: calc(50% - 50vw);
  max-inline-size: 100vw;
}

@media (max-width: 860px) {
  .rp-entry-content .alignwide {
    margin-inline: 0;
  }
}

.rp-entry-content .aligncenter {
  margin-inline: auto;
}

.rp-entry-content figure {
  margin: 0;
}

.rp-entry-content figcaption,
.wp-caption-text {
  margin-block-start: var(--rp-space-2);
  font-size: var(--rp-fs-xs);
  color: var(--rp-muted);
  text-align: center;
}

.rp-entry-content blockquote,
.wp-block-quote {
  padding-inline-start: var(--rp-space-5);
  border-inline-start: 3px solid var(--rp-primary);
  font-family: var(--rp-font-display);
  font-size: var(--rp-fs-lg);
  font-weight: 600;
  color: var(--rp-text);
}

.wp-block-pullquote {
  padding: var(--rp-space-6);
  border-block: 2px solid var(--rp-primary);
  text-align: center;
}

.wp-block-code,
.rp-entry-content pre {
  padding: var(--rp-space-5);
  border: 1px solid var(--rp-border);
  border-radius: var(--rp-radius);
  background: var(--rp-surface);
  font-family: var(--rp-font-mono);
  font-size: var(--rp-fs-sm);
  direction: ltr;
  text-align: start;
  overflow-x: auto;
}

.rp-entry-content :not(pre) > code {
  padding: 0.15em 0.4em;
  border-radius: var(--rp-radius-sm);
  background: var(--rp-surface-2);
  font-family: var(--rp-font-mono);
  font-size: 0.9em;
}

.wp-block-table,
.rp-entry-content table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--rp-fs-sm);
}

/* A wide table scrolls inside its own box rather than widening the page. */
.wp-block-table {
  overflow-x: auto;
}

.rp-entry-content th,
.rp-entry-content td {
  padding: var(--rp-space-3) var(--rp-space-4);
  border: 1px solid var(--rp-border);
  text-align: start;
}

.rp-entry-content thead th {
  background: var(--rp-surface);
  font-weight: 700;
}

.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: var(--rp-space-2);
  padding: 0.75em 1.5em;
  border-radius: var(--rp-btn-radius);
  background: var(--rp-primary);
  color: var(--rp-on-primary);
  font-weight: 700;
  text-decoration: none;
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  border: 1px solid var(--rp-border-strong);
  color: var(--rp-text);
}

.wp-block-separator {
  border: 0;
  border-block-start: 1px solid var(--rp-border);
}

.wp-block-image img {
  border-radius: var(--rp-radius);
}

.wp-block-gallery {
  gap: var(--rp-space-3);
}

.wp-block-embed iframe {
  inline-size: 100%;
  border-radius: var(--rp-radius);
}

.wp-block-search__button {
  padding: 0.7em 1.2em;
  border: 0;
  border-radius: var(--rp-btn-radius);
  background: var(--rp-primary);
  color: var(--rp-on-primary);
  font-weight: 700;
  cursor: pointer;
}

.sticky .rp-post-card-title::after {
  content: '\2605';
  margin-inline-start: var(--rp-space-2);
  color: var(--rp-primary);
}

/* WordPress prints this class on skip links and hidden labels. */
.screen-reader-text {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus {
  position: static;
  inline-size: auto;
  block-size: auto;
  clip-path: none;
}

/* --------------------------------------------------------------------------
   Coming soon placeholder
   Shown on the front page when the selected demo has no sections built yet.
   Token driven, so it takes the palette of whichever demo is active.
   -------------------------------------------------------------------------- */

.bv-soon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-block-size: calc(100svh - var(--rp-header-h));
  text-align: center;

  /* The header is sticky and overlays the first section, so the top padding
     has to clear it as every demo hero does. */
  padding-block-start: calc(var(--rp-header-h) + clamp(2rem, 1rem + 5vw, 5rem));
  padding-block-end: clamp(3rem, 1.5rem + 5vw, 6rem);
}

.bv-soon-mark {
  /* Block level so the eyebrow below it starts on its own line. */
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 4.5rem;
  block-size: 4.5rem;
  margin-inline: auto;
  margin-block-end: var(--rp-space-5);
}

.bv-soon .rp-eyebrow {
  justify-content: center;
}

.bv-soon .rp-section-title {
  margin-block-start: var(--rp-space-3);
}

.bv-soon .rp-section-lead {
  margin-inline: auto;
  margin-block-start: var(--rp-space-4);
}

.bv-soon-ready {
  margin-block-start: var(--rp-space-7);
}

.bv-soon-chips {
  justify-content: center;
  margin-block-start: var(--rp-space-3);
}

.bv-soon-actions {
  /* Keep the button clear of the chip row above it. */
  margin-block-start: var(--rp-space-8, 3rem);
}

/* --------------------------------------------------------------------------
   Demo index
   The showcase grid rendered by page-templates/demo-index.php. Each card
   carries its own demo's palette through --bv-card-* so the page reads as
   fifteen designs rather than fifteen identical tiles.
   -------------------------------------------------------------------------- */

.bv-index-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--rp-space-3);
  max-inline-size: 46rem;
  margin-inline: auto;
  margin-block-end: var(--rp-space-6);
  padding: var(--rp-space-4) var(--rp-space-5);
  border: 1px dashed var(--rp-border-strong);
  border-radius: var(--rp-radius);
  background: var(--rp-surface);
  font-size: var(--rp-fs-sm);
}

.bv-index-notice .rp-icon {
  flex: none;
  color: var(--rp-primary);
}

.bv-index-intro {
  max-inline-size: 46rem;
  margin-inline: auto;
  margin-block-end: var(--rp-space-7);
  text-align: center;
}

.bv-index-grid {
  display: grid;
  gap: clamp(1.25rem, 0.75rem + 1.5vw, 2rem);
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  margin-block-start: var(--rp-space-7);
}

.bv-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--rp-border);
  border-radius: var(--rp-radius-lg);
  background: var(--rp-bg);
  color: inherit;
  text-decoration: none;
  transition: transform 0.25s var(--rp-ease), box-shadow 0.25s var(--rp-ease),
    border-color 0.25s var(--rp-ease);
}

.bv-card:hover,
.bv-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--bv-card-primary, var(--rp-primary));
  box-shadow: var(--rp-shadow-lg);
}

.bv-card-shot {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    var(--bv-card-primary, var(--rp-primary)),
    var(--bv-card-accent, var(--rp-accent))
  );
}

.bv-card-shot img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: top center;
}

.bv-card-badge {
  position: absolute;
  inset-block-start: var(--rp-space-3);
  inset-inline-start: var(--rp-space-3);
  padding: 0.25em 0.75em;
  border-radius: var(--rp-radius-pill);
  background: var(--rp-bg);
  color: var(--rp-text);
  font-size: var(--rp-fs-xs);
  font-weight: 700;
}

.bv-card.is-soon .bv-card-shot img {
  opacity: 0.55;
  filter: saturate(0.6);
}

.bv-card-body {
  display: flex;
  align-items: center;
  gap: var(--rp-space-3);
  padding: var(--rp-space-4) var(--rp-space-5);
}

.bv-card-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: var(--rp-radius);
  background: var(--bv-card-primary, var(--rp-primary));
  color: #fff;
}

.bv-card-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-inline-size: 0;
}

.bv-card-title {
  font-family: var(--rp-font-display);
  font-size: var(--rp-fs-base);
  font-weight: 700;
}

.bv-card-role {
  font-size: var(--rp-fs-xs);
  color: var(--rp-muted);
}

.bv-card-swatches {
  display: flex;
  gap: 0.3rem;
  margin-inline-start: auto;
}

.bv-card-swatches i {
  inline-size: 0.75rem;
  block-size: 0.75rem;
  border-radius: 50%;
}

/* --------------------------------------------------------------------------
   Demo preview bar
   Shown at the foot of the window while ?demo= is previewing a demo, so a
   visitor can always get back to the index.
   -------------------------------------------------------------------------- */

.bv-bar {
  position: fixed;
  inset-block-end: var(--rp-space-4);
  inset-inline: var(--rp-space-4);
  z-index: 90;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--rp-space-3);
  max-inline-size: max-content;
  margin-inline: auto;
  padding: var(--rp-space-3) var(--rp-space-5);
  border-radius: var(--rp-radius-pill);
  background: var(--rp-text);
  color: var(--rp-bg);
  box-shadow: var(--rp-shadow-lg);
  font-size: var(--rp-fs-sm);
}

.bv-bar-name {
  font-weight: 700;
}

.bv-bar a {
  display: inline-flex;
  align-items: center;
  gap: var(--rp-space-2);
  padding: 0.35em 1em;
  border-radius: var(--rp-radius-pill);
  background: var(--rp-primary);
  color: var(--rp-on-primary);
  font-weight: 700;
  text-decoration: none;
}

@media (max-width: 600px) {
  .bv-bar {
    inset-block-end: 0;
    inset-inline: 0;
    max-inline-size: none;
    border-radius: 0;
  }
}