/* Shared responsive layer for the exported Wix pages and the article templates. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
video,
iframe,
svg {
  max-width: 100%;
}

/* The exported homepage WPhoto has no SSR <img> tag. Keep its archived cover
   visible even when Wix's client-side image loader is unavailable. */
#comp-jqs4zsl7 {
  background: url('/media/hero-salsa.jpg') center / cover no-repeat;
}

@media (max-width: 700px) {
  body,
  body:not(.responsive),
  body:not(.responsive) #site-root {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  #SITE_CONTAINER,
  #main_MF,
  #site-root,
  #masterPage,
  #PAGES_CONTAINER,
  #SITE_PAGES,
  #SITE_PAGES_TRANSITION_GROUP,
  #SITE_FOOTER_WRAPPER,
  main[style*="max-width"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #BACKGROUND_GROUP {
    display: none !important;
  }

  #masterPage {
    display: flex !important;
    flex-direction: column !important;
  }

  #PAGES_CONTAINER,
  #soapAfterPagesContainer,
  #SITE_FOOTER_WRAPPER {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    height: auto !important;
  }

  /* The replacement nav is intentionally simple and remains easy to tap. */
  .qnvkpa {
    position: relative !important;
    width: 100% !important;
  }

  .qnvkpa nav {
    justify-content: flex-start;
    gap: 10px 16px;
    padding: 16px 14px;
    font-size: 13px;
  }

  .qnvkpa a {
    display: inline-block;
    padding: 3px 0;
  }

  /* Convert Wix's absolute, desktop-sized mesh into a normal mobile flow. */
  .wixui-page,
  .wixui-section,
  [id^="Container"],
  [id^="comp-"] {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .wixui-section {
    height: auto !important;
    min-height: 0 !important;
  }

  .wixui-section [data-mesh-id$="inlineContent"],
  .wixui-section [data-mesh-id$="inlineContent-gridContainer"] {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .wixui-section [data-mesh-id$="inlineContent-gridContainer"] {
    display: flex !important;
    flex-direction: column !important;
    padding: 28px 16px !important;
  }

  .wixui-section [data-mesh-id$="inlineContent-gridContainer"] > * {
    position: relative !important;
    inset: auto !important;
    grid-area: auto !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 22px !important;
  }

  .wixui-section [data-mesh-id$="inlineContent-gridContainer"] > *:last-child {
    margin-bottom: 0 !important;
  }

  .wixui-section [data-mesh-id$="inlineContent-gridContainer"] > * > [data-mesh-id$="inlineContent"],
  .wixui-section [data-mesh-id$="inlineContent-gridContainer"] > * > [data-mesh-id$="inlineContent"] > [data-mesh-id$="inlineContent-gridContainer"] {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .wixui-section h1,
  .wixui-section h2,
  .wixui-section h3,
  .wixui-section p,
  .wixui-section .wixui-rich-text {
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }

  .wixui-section h1,
  .wixui-section h2 {
    font-size: clamp(28px, 9vw, 48px) !important;
    line-height: 1.1 !important;
  }

  .wixui-section [data-testid="container-bg"],
  .wixui-section [data-testid="linkElement"],
  .wixui-section wow-image,
  .wixui-section video,
  .wixui-section iframe {
    max-width: 100% !important;
  }

  /* Homepage hero image: keep the lazy-loaded Wix image's aspect ratio after
     the desktop mesh is converted into a mobile flow. */
  #comp-jqs4zsl7 {
    width: min(100%, 600px) !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: hidden;
  }

  #comp-jqs4zsl7 > a,
  #comp-jqs4zsl7 wow-image,
  #comp-jqs4zsl7 img {
    display: block;
    width: 100% !important;
    height: 100% !important;
  }

  /* Text pages / blog cards. */
  main[style*="max-width"] {
    padding: 28px 16px !important;
  }

  main[style*="max-width"] h1 {
    font-size: clamp(28px, 9vw, 40px) !important;
  }

  #blog-cards {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  #blog-cards > div {
    flex: none !important;
    width: 100% !important;
  }

  .qhmvsa {
    padding: 28px 16px !important;
  }

  .qhmvsa h1 {
    font-size: 26px !important;
  }

  footer#SITE_FOOTER_WRAPPER {
    padding: 24px 0 !important;
  }
}