/*
Theme Name: Twenty Twenty-Two Child (Ballantruan styled)
Theme URI:
Author:
Author URI:
Description: Created to be able to change the template that individual media displays within
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 5.7
Version:
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: twentytwentytwo
Text Domain: twenty-twenty-two-child-ballantruan-styled
Tags:
*/

/* =========================================================
   1) ATTACHMENT PAGES (single media pages)
      Attachment templates use body classes:
      "attachment" and "single-attachment"
   ========================================================= */

:root{
  --bb-content-max: min(100%, var(--wp--style--global--content-size, 1000px));
}

/* Space below header + consistent layout */
body.attachment .wp-site-blocks > header + main,
body.single-attachment .wp-site-blocks > header + main,
body.attachment header.wp-block-template-part + main,
body.single-attachment header.wp-block-template-part + main {
  padding-top: 24px !important;
}

/* Title spacing + centring + controlled line length */
body.attachment .wp-block-post-title,
body.single-attachment .wp-block-post-title {
  margin: 0 auto !important;
  padding-top: 0 !important;
  padding-bottom: 12px !important;
  display: block !important;
  text-align: center !important;
  max-width: 22em !important;
  text-wrap: balance;
}

/* 1a) Media wrapper (shortcode outputs <div class="bb-attachment-media"> … )
      Stack multiple items vertically (artwork + audio bar; still + video; etc) */
body.attachment .bb-attachment-media,
body.single-attachment .bb-attachment-media {
  margin: 0 !important;
  padding-bottom: 12px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;

  width: 100% !important;
  box-sizing: border-box !important;
}

/* Ensure every direct child in the media stack centers itself */
body.attachment .bb-attachment-media > *,
body.single-attachment .bb-attachment-media > * {
  align-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 1b) Image orientation rules
      Requires PHP to add one of:
      bb-media-portrait | bb-media-landscape | bb-media-square */

/* Portrait: keep “natural size” (shrink wrapper to image width; still responsive) */
body.attachment .bb-attachment-media.bb-media-portrait,
body.single-attachment .bb-attachment-media.bb-media-portrait {
  width: -moz-fit-content !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Landscape + Square: make wrapper full width (so image can go full width) */
body.attachment .bb-attachment-media.bb-media-landscape,
body.single-attachment .bb-attachment-media.bb-media-landscape,
body.attachment .bb-attachment-media.bb-media-square,
body.single-attachment .bb-attachment-media.bb-media-square {
  width: 100% !important;
  max-width: 100% !important;
}

/* Center actual media elements */
body.attachment .bb-attachment-media img,
body.single-attachment .bb-attachment-media img,
body.attachment .bb-attachment-media video,
body.single-attachment .bb-attachment-media video,
body.attachment .bb-attachment-media audio,
body.single-attachment .bb-attachment-media audio,
body.attachment .bb-attachment-media iframe,
body.single-attachment .bb-attachment-media iframe {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Default image behaviour: responsive, not forced full width */
body.attachment .bb-attachment-media img,
body.single-attachment .bb-attachment-media img {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
}

/* Landscape + square images: scale to full content width */
body.attachment .bb-attachment-media.bb-media-landscape img,
body.single-attachment .bb-attachment-media.bb-media-landscape img,
body.attachment .bb-attachment-media.bb-media-square img,
body.single-attachment .bb-attachment-media.bb-media-square img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

/* 1c) AUDIO: keep centered and prevent “looks left aligned”
      REQUIREMENT: PHP adds bb-media-audio to wrapper for audio attachments */

/* Shrink wrapper to artwork width (but never exceed content column) */
body.attachment .bb-attachment-media.bb-media-audio,
body.single-attachment .bb-attachment-media.bb-media-audio{
  width: -moz-fit-content !important;
  width: fit-content !important;
  max-width: var(--bb-content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Make audio controls fill the (now-shrunk) wrapper */
body.attachment .bb-attachment-media.bb-media-audio audio.wp-audio-shortcode,
body.single-attachment .bb-attachment-media.bb-media-audio audio.wp-audio-shortcode,
body.attachment .bb-attachment-media.bb-media-audio .wp-audio,
body.single-attachment .bb-attachment-media.bb-media-audio .wp-audio,
body.attachment .bb-attachment-media.bb-media-audio .mejs-container,
body.single-attachment .bb-attachment-media.bb-media-audio .mejs-container{
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

/* Space between artwork and player */
body.attachment .bb-attachment-media img + audio.wp-audio-shortcode,
body.single-attachment .bb-attachment-media img + audio.wp-audio-shortcode {
  margin-top: 12px !important;
}

/* 1d) VIDEO only: dedicated wrapper/shell so video can be centred independently */
body.attachment .bb-attachment-media.bb-media-video,
body.single-attachment .bb-attachment-media.bb-media-video {
  width: 100% !important;
  max-width: 100% !important;
}

body.attachment .bb-attachment-media.bb-media-video .bb-video-shell,
body.single-attachment .bb-attachment-media.bb-media-video .bb-video-shell {
  width: min(100%, 2048px) !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
  box-sizing: border-box !important;
}

body.attachment .bb-attachment-media.bb-media-video .wp-video,
body.single-attachment .bb-attachment-media.bb-media-video .wp-video,
body.attachment .bb-attachment-media.bb-media-video .mejs-container,
body.single-attachment .bb-attachment-media.bb-media-video .mejs-container,
body.attachment .bb-attachment-media.bb-media-video .mejs-inner,
body.single-attachment .bb-attachment-media.bb-media-video .mejs-inner,
body.attachment .bb-attachment-media.bb-media-video video,
body.single-attachment .bb-attachment-media.bb-media-video video {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}

/* 1d-b) Video poster click-to-play overlay */
body.attachment .bb-attachment-media.bb-media-video .bb-video-poster-proxy,
body.single-attachment .bb-attachment-media.bb-media-video .bb-video-poster-proxy {
  position: relative !important;
  cursor: pointer !important;
  display: block !important;
  width: min(100%, 2048px) !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.attachment .bb-attachment-media.bb-media-video .bb-video-poster-proxy img,
body.single-attachment .bb-attachment-media.bb-media-video .bb-video-poster-proxy img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Show a conventional play badge when paused */
body.attachment .bb-attachment-media.bb-media-video .bb-video-poster-proxy.bb-video-clickplay.is-paused::after,
body.single-attachment .bb-attachment-media.bb-media-video .bb-video-poster-proxy.bb-video-clickplay.is-paused::after {
  content: "▶";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 74px;
  height: 74px;
  line-height: 74px;
  text-align: center;
  font-size: 34px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  pointer-events: none;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}

/* Hide the badge while playing */
body.attachment .bb-attachment-media.bb-media-video .bb-video-poster-proxy.bb-video-clickplay.is-playing::after,
body.single-attachment .bb-attachment-media.bb-media-video .bb-video-poster-proxy.bb-video-clickplay.is-playing::after {
  content: none;
}

/* Explicit stage-state switching: only one of poster or player visible at a time */
body.attachment .bb-attachment-media.bb-media-video .bb-video-stage.is-paused .bb-video-shell,
body.single-attachment .bb-attachment-media.bb-media-video .bb-video-stage.is-paused .bb-video-shell {
  display: none !important;
}

body.attachment .bb-attachment-media.bb-media-video .bb-video-stage.is-paused .bb-video-poster-proxy,
body.single-attachment .bb-attachment-media.bb-media-video .bb-video-stage.is-paused .bb-video-poster-proxy {
  display: block !important;
}

body.attachment .bb-attachment-media.bb-media-video .bb-video-stage.is-playing .bb-video-shell,
body.single-attachment .bb-attachment-media.bb-media-video .bb-video-stage.is-playing .bb-video-shell {
  display: block !important;
}

body.attachment .bb-attachment-media.bb-media-video .bb-video-stage.is-playing .bb-video-poster-proxy,
body.single-attachment .bb-attachment-media.bb-media-video .bb-video-stage.is-playing .bb-video-poster-proxy {
  display: none !important;
}

/* PDF only: dedicated wrapper/shell so PDFs can be centred independently */
body.attachment .bb-attachment-media.bb-media-pdf,
body.single-attachment .bb-attachment-media.bb-media-pdf {
  width: 100% !important;
  max-width: 100% !important;
}

body.attachment .bb-attachment-media.bb-media-pdf .bb-pdf-shell,
body.single-attachment .bb-attachment-media.bb-media-pdf .bb-pdf-shell {
  width: min(100%, 2048px) !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
  box-sizing: border-box !important;
}

body.attachment .bb-attachment-media.bb-media-pdf iframe,
body.single-attachment .bb-attachment-media.bb-media-pdf iframe {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Meta block spacing */
body.attachment .bb-attachment-meta,
body.single-attachment .bb-attachment-meta {
  margin: 0 !important;
  padding-top: 8px !important;
}

/* Headings + section spacing */
body.attachment .wp-block-heading,
body.single-attachment .wp-block-heading {
  margin: 0 !important;
  padding-top: 24px !important;
  padding-bottom: 12px !important;
  display: block !important;
}

/* First heading (Caption) slightly tighter */
body.attachment .bb-attachment-meta .wp-block-heading:first-of-type,
body.single-attachment .bb-attachment-meta .wp-block-heading:first-of-type {
  padding-top: 16px !important;
}

/* Paragraph blocks under headings */
body.attachment .wp-block-post-excerpt,
body.single-attachment .wp-block-post-excerpt,
body.attachment .wp-block-post-content,
body.single-attachment .wp-block-post-content,
body.attachment .bb-attachment-keywords,
body.single-attachment .bb-attachment-keywords {
  margin: 0 !important;
  padding-bottom: 18px !important;
  display: block !important;
}

/* Never truncate the Caption/Excerpt display */
body.attachment .wp-block-post-excerpt,
body.single-attachment .wp-block-post-excerpt{
  overflow: visible !important;
  text-overflow: unset !important;
  white-space: normal !important;
  max-height: none !important;
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
}

/* Players + embeds: keep PDFs responsive */
body.attachment iframe,
body.single-attachment iframe {
  width: 100%;
  max-width: 100%;
  display: block;
}

/* Keywords: subtle */
body.attachment .bb-attachment-keywords,
body.single-attachment .bb-attachment-keywords {
  font-size: 0.95em;
  opacity: 0.85;
}

/* Attachment Prev/Next nav */
.bb-attachment-nav {
  margin: 16px 0 10px 0;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 8px;
  background: #F2D7BD;
}

.bb-attachment-nav__back {
  display: inline-block;
  margin-bottom: 8px;
  text-decoration: none;
}

.bb-attachment-nav__buttons {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.bb-attachment-nav__buttons a {
  text-decoration: none;
  padding: 6px 10px;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 8px;
}

.bb-attachment-nav__buttons .is-disabled {
  opacity: 0.45;
  padding: 6px 10px;
  border: 1px dashed rgba(0,0,0,0.18);
  border-radius: 8px;
}

.bb-attachment-nav__context {
  margin-top: 8px;
  font-size: 0.95em;
  opacity: 0.85;
}

/* Add a little more breathing room when a set-nav block follows */
.bb-attachment-nav__context + .bb-attachment-nav__set {
  margin-top:20px;
}

.bb-attachment-nav__resultset-link,
.bb-attachment-nav__resultset-link:visited {
  color: #941100;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 3px dotted #941100;
  padding-bottom: 1px;
}

.bb-attachment-nav__resultset-link:hover,
.bb-attachment-nav__resultset-link:focus {
  color: #941100;
  text-decoration: none;
  border-bottom-width: 3px;
  border-bottom-style: solid;
}

/* 1e) Responsive spacing controls (Attachment) */
body.attachment .bb-attach-top-spacer,
body.single-attachment .bb-attach-top-spacer { height: 100px !important; }

body.attachment .bb-attach-before-caption-spacer,
body.single-attachment .bb-attach-before-caption-spacer { height: 16px !important; }

body.attachment .bb-attach-between-sections-spacer,
body.single-attachment .bb-attach-between-sections-spacer { height: 24px !important; }

body.attachment .bb-attach-bottom-spacer,
body.single-attachment .bb-attach-bottom-spacer { height: 16px !important; }

@media (max-width: 782px) {

  body.attachment .wp-block-spacer.bb-attach-top-spacer,
  body.single-attachment .wp-block-spacer.bb-attach-top-spacer {
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
  }

  body.attachment .wp-block-spacer.bb-attach-before-caption-spacer,
  body.single-attachment .wp-block-spacer.bb-attach-before-caption-spacer {
    height: 12px !important;
    min-height: 12px !important;
    max-height: 12px !important;
  }

  body.attachment .wp-block-spacer.bb-attach-between-sections-spacer,
  body.single-attachment .wp-block-spacer.bb-attach-between-sections-spacer {
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
  }

  body.attachment .wp-block-spacer.bb-attach-bottom-spacer,
  body.single-attachment .wp-block-spacer.bb-attach-bottom-spacer {
    height: 12px !important;
    min-height: 12px !important;
    max-height: 12px !important;
  }

  body.attachment .wp-block-heading,
  body.single-attachment .wp-block-heading {
    padding-top: 14px !important;
    padding-bottom: 10px !important;
  }

  body.attachment .bb-attachment-meta .wp-block-heading:first-of-type,
  body.single-attachment .bb-attachment-meta .wp-block-heading:first-of-type {
    padding-top: 12px !important;
  }

  body.attachment .wp-block-post-excerpt,
  body.single-attachment .wp-block-post-excerpt,
  body.attachment .wp-block-post-content,
  body.single-attachment .wp-block-post-content,
  body.attachment .bb-attachment-keywords,
  body.single-attachment .bb-attachment-keywords {
    padding-bottom: 12px !important;
  }
}

/* =========================================================
   2) COLLECTIONS (Ballantruan search + results grid)
   Markup (from PHP shortcodes):
     Wrapper: .bb-collections-gallery (Group block additional class)
     Grid:    .bb-collections-grid
     Tile:    .bb-collections-item
     Thumb:   img.bb-collections-thumb
     Caption: .bb-collections-cap
   ========================================================= */

/* 2a) Gallery wrapper: wide but fluid */
.bb-collections-gallery{
  width: 100% !important;
  max-width: min(1600px, 96vw) !important;
  margin: 0 auto !important;
  padding: 0 clamp(12px, 2vw, 32px) !important;
  box-sizing: border-box !important;
}

/* If the wrapper is a constrained Group, un-constrain it */
.wp-block-group.bb-collections-gallery.is-layout-constrained{
  max-width: none !important;
}

/* 2a) Grid: 5 desktop, 4 tablet, 3 mobile, 2 small mobile */
.bb-collections-gallery .bb-collections-grid{
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: clamp(10px, 1.2vw, 18px) !important;
  align-items: start !important;
}

@media (max-width: 1200px){
  .bb-collections-gallery .bb-collections-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 900px){
  .bb-collections-gallery .bb-collections-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 600px){
  .bb-collections-gallery .bb-collections-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* 2a) Tile/card */
.bb-collections-gallery .bb-collections-item{
  margin: 0 !important;
  padding: 10px !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,0.55) !important;
  box-sizing: border-box !important;
}

.bb-collections-gallery .bb-collections-item a{
  text-decoration: none !important;
  display: block !important;
}

/* 2a) Square thumbnails */
.bb-collections-gallery img.bb-collections-thumb{
  display: block !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  object-fit: cover !important;
  border-radius: 8px !important;
}

/* 2a) Caption clamp (2 lines) */
.bb-collections-gallery .bb-collections-cap{
  margin-top: 8px !important;
  font-size: 0.95em !important;
  line-height: 1.25 !important;

  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* 2b) Collections search form */
.bb-collections-search-form{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
  row-gap: 10px;
}

.bb-collections-search-form br{ display: none; }

.bb-collections-search-form label{ flex: 0 0 100%; }

.bb-collections-search-form input[type="text"]{
  font-family: var(--wp--preset--font-family--base, inherit) !important;
  font-size: 1rem !important;
  line-height: 1.2 !important;

  width: min(44rem, 100%) !important;
  max-width: 100% !important;

  padding: 0.85em 1em !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;

  margin-bottom: 10px !important; /* breathing before button on narrow screens */
}

.bb-collections-search-form input[type="submit"]{
  font-family: var(--wp--preset--font-family--base, inherit) !important;
  font-weight: 700 !important;

  background-color: var(--wp--preset--color--primary, var(--wp--preset--color--contrast, #1A4548)) !important;
  color: var(--wp--preset--color--base, #ffffff) !important;

  border: 1px solid transparent !important;
  border-radius: var(--wp--custom--button--border--radius, 9999px) !important;

  padding: 0.6em 1.1em !important;
  font-size: 1rem !important;
  line-height: 1.2 !important;

  cursor: pointer !important;
  display: inline-block !important;
  min-width: 9em;
  margin-top: 2px !important;
}

.bb-collections-search-form input[type="submit"]:hover{
  filter: brightness(0.95);
}

.bb-collections-search-form input[type="submit"]:focus{
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

@media (min-width: 700px){
  .bb-collections-search-form input[type="text"]{
    flex: 1 1 auto;
    margin-bottom: 0 !important;
  }
  .bb-collections-search-form input[type="submit"]{
    flex: 0 0 auto;
    margin-left: 10px !important;
  }
}

/* 2c) Pagination-only shortcodes (if you still use bb-mla-pager Groups) */
.bb-mla-pager .gallery,
.bb-mla-pager .wp-block-gallery,
.bb-mla-pager .gallery-item {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
}

/* Clickable keywords on attachment pages (theme-aware but high-contrast) */
.bb-attachment-keywords a.bb-attachment-keyword{
  text-decoration: none;
  border-bottom: 3px dotted #941100;
  text-underline-offset: 3px;
}

.bb-attachment-keywords a.bb-attachment-keyword:hover{
  border-bottom-style: solid;

  /* Slight emphasis on hover without needing a fixed color */
  filter: brightness(0.85);
}

/* Attachment Credit line (below media, above nav) */
.bb-attachment-credit{
  font-family: var(--wp--preset--font-family--sans-serif, var(--wp--preset--font-family--base, inherit));
  font-size: 0.85em;              /* 85% of body */
  color: rgba(0,0,0,0.5);         /* ~50% grey */
  margin: 6px 0 12px 0;           /* small gap below media, before nav */
  text-align: left;
  width: 100%;
}

/* Ensure the Credit aligns to the content column width */
body.attachment .bb-attachment-credit,
body.single-attachment .bb-attachment-credit{
  max-width: var(--bb-content-max);
  margin-left: auto;
  margin-right: auto;
}

/* If the media wrapper is centering items, force the credit to the left edge */
body.attachment .bb-attachment-media + .bb-attachment-credit,
body.single-attachment .bb-attachment-media + .bb-attachment-credit{
  align-self: stretch;
}

/* 1f) Attachment set navigation row (shown only for titles ending "Part x of y") */
.bb-attachment-nav__set {
  margin-top: 10px;
}

.bb-attachment-nav__buttons--set {
  align-items: center;
}

.bb-attachment-nav__set-label {
  flex: 1 1 auto;
  text-align: center;
  color: var(--wp--preset--color--primary, #941100);
  padding: 6px 10px;
}

.bb-attachment-nav__buttons--set a,
.bb-attachment-nav__buttons--set .is-disabled {
  border-color: var(--wp--preset--color--primary, #941100);
  color: var(--wp--preset--color--primary, #941100);
}

.bb-attachment-nav__buttons--set .is-disabled {
  opacity: 0.5;
  border-style: dashed;
}

.bb-attachment-nav__context--set {
  text-align: center;
  color: var(--wp--preset--color--primary, #941100);
  opacity: 1;
}

/* =========================================================
   Mobile navigation overlay: keep submenus collapsed
   until their parent toggle is tapped
   ========================================================= */
@media (max-width: 781px) {
  .wp-block-navigation__responsive-container
  .wp-block-navigation__submenu-container[hidden] {
    display: none !important;
  }
}

/* =========================================================
   Mobile navigation overlay: compact right-hand panel
   Parent text remains a normal link; chevron opens submenu
   ========================================================= */
@media (max-width: 781px) {
    
    /* Remove default top spacing above the first menu list */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-dialog .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-dialog .wp-block-page-list {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* If WordPress inserts a wrapper around the list, trim that too */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

  .wp-block-navigation__responsive-container.is-menu-open {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    padding: 0 !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  bottom: auto !important;

  display: flex !important;
  justify-content: flex-start !important;
  align-items: flex-end !important;
  flex-direction: column !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: min(92vw, 32rem) !important;

  margin: 0 !important;
  padding: 0.1rem 0.9rem 0.8rem 0.9rem !important;

  background: #fff !important;
  box-sizing: border-box !important;
  z-index: 100000 !important;
}

  .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-dialog {
  width: auto !important;
  min-width: 0 !important;
  max-width: min(92vw, 32rem) !important;
  height: auto !important;
  max-height: calc(100vh - 0.5rem) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-y: auto !important;
  background: transparent !important;
  box-sizing: border-box !important;
  position: static !important;
}

  .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-close {
  margin: 0 0 0.15rem auto !important;
  padding: 0 !important;
  display: block !important;
  line-height: 1 !important;
}

  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-dialog .wp-block-navigation__container,
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-dialog .wp-block-page-list {
    display: block !important;
    width: fit-content !important;
    min-width: 0 !important;
    margin: 0 0 0 auto !important;
    text-align: right !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item {
    display: block !important;
    width: fit-content !important;
    min-width: 0 !important;
    margin: 0 0 0 auto !important;
    text-align: right !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item.has-child {
    position: relative !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
    display: inline-block !important;
    width: auto !important;
    max-width: none !important;
    padding: 0.45rem 2.4rem 0.45rem 0 !important;
    text-align: right !important;
    vertical-align: middle !important;
    white-space: normal !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item > .wp-block-navigation-item__content {
    display: inline-block !important;
    width: auto !important;
    padding: 0.45rem 1.2rem 0.45rem 0 !important;
    text-align: right !important;
    white-space: normal !important;
  }

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-submenu__toggle {
  position: absolute !important;
  right: 0 !important;
  top: 0.15rem !important;
  width: 2rem !important;
  height: 2rem !important;
  min-width: 2rem !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  border: 1px solid rgba(0,0,0,0.18) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.75) !important;
}

 .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-submenu__toggle svg {
  width: 0.72rem !important;
  height: 0.72rem !important;
}

  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container {
    margin: 0.05rem 0 0.35rem 0 !important;
    padding: 0 1.25rem 0 0 !important;
    width: fit-content !important;
    min-width: 0 !important;
    margin-left: auto !important;
    position: static !important;
    box-shadow: none !important;
    border: 0 !important;
    background: transparent !important;
    text-align: right !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    padding: 0.32rem 0 0.32rem 0 !important;
    text-align: right !important;
    white-space: normal !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content,
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item.current_page_item > .wp-block-navigation-item__content,
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item.current_page_ancestor > .wp-block-navigation-item__content,
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item.is-menu-open > .wp-block-navigation-item__content {
    font-weight: 700 !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item.is-menu-open > .wp-block-navigation-submenu__toggle svg {
    stroke-width: 3 !important;
  }
}

/* Cross-collection search note on Collections result pages */
.bb-cross-collection-note {
  color: #1A4548;
  margin-top: 0.35rem;
}

.bb-cross-collection-note .bb-cross-collection-link,
.bb-cross-collection-note .bb-cross-collection-link:visited {
  color: #941100;
  text-decoration: none;
  border-bottom: 3px dotted #941100;
  padding-bottom: 1px;
}

.bb-cross-collection-note .bb-cross-collection-link:hover,
.bb-cross-collection-note .bb-cross-collection-link:focus {
  color: #941100;
  text-decoration: none;
  border-bottom-style: solid;
}