/* BK mobile rendering: keep the theme's colors, geometry and content.
 * Load after bk-theme.css. Wide screens with a mouse retain the original CSS.
 */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  /* The header had two nested 18px backdrop blurs, also on touch screens. */
  body.bk-modern-design .mg-menu-full,
  body.bk-modern-design .bk-header-actions,
  body.bk-modern-design .bk-language-menu {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body.bk-modern-design .mg-menu-full {
    box-shadow: 0 3px 10px rgba(7, 30, 71, .18);
  }

  body.bk-modern-design .bk-header-actions,
  body.bk-modern-design .bk-language-menu {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2),
      inset 0 1px 0 color-mix(in srgb, var(--bk-ink) 9%, transparent);
  }

  /* Replace backdrop sampling with the existing translucent painted surfaces. */
  body.bk-modern-design.home .bk-stat,
  body.bk-modern-design.home .bk-stage-card,
  body.bk-modern-design.home .bk-hero-aside,
  body.bk-modern-design.home .mg-posts-sec-post {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body.bk-modern-design.home .bk-hero-panel {
    transform-style: flat;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
  }

  body.bk-modern-design.home .bk-hero-stage {
    perspective: none;
  }

  /* Pure decoration: avoid large overlapping transparent layers on phones. */
  body.bk-modern-design.home .bk-hero-orbit,
  body.bk-modern-design.home .bk-hero-panel::before,
  body.bk-modern-design.home .bk-hero-panel::after,
  body.bk-modern-design.home .bk-stage-card::after {
    display: none;
  }

  body.bk-modern-design.home .bk-stage-card {
    transform: none !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .22),
      inset 0 1px 0 color-mix(in srgb, var(--bk-ink) 16%, transparent);
  }

  body.bk-modern-design.home .bk-hero-copy h2 {
    text-shadow: 0 3px 10px rgba(0, 0, 0, .22);
  }

  body.bk-modern-design.home .bk-hero-panel::before,
  body.bk-modern-design.home .bk-hero-orbit span {
    filter: none;
  }

  body.bk-modern-design.home .bk-hero-orbit span:nth-child(1) {
    box-shadow: 0 0 16px rgba(74, 163, 255, .24);
  }

  body.bk-modern-design.home .bk-hero-orbit span:nth-child(2) {
    box-shadow: 0 0 14px rgba(215, 232, 255, .24);
  }

  /* Match the theme's ID-based card rules and their !important shadows.
   * Hover/focus retain the existing border and color feedback, without lifts.
   */
  body.bk-modern-design.home #content.home #grid .mg-blog-post-box,
  body.bk-modern-design.home #content.home #grid .mg-blog-post-box:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2) !important;
    transform: none !important;
    transition: border-color 120ms ease;
  }

  body.bk-modern-design.home .mg-posts-sec-post,
  body.bk-modern-design.home .mg-posts-sec-post:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2) !important;
    transform: none !important;
    transition: border-color 120ms ease;
  }

  body.bk-modern-design.home #secondary .mg-sidebar :is(#block-27, #block-25, #block-3),
  body.bk-modern-design.home #secondary .mg-sidebar :is(#block-27, #block-25, #block-3):hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .22),
      inset 0 1px 0 color-mix(in srgb, var(--bk-ink) 10%, transparent) !important;
    transform: none !important;
    transition: border-color 120ms ease;
  }

  body.bk-modern-design.home #secondary .mg-sidebar #block-27 img {
    box-shadow: 0 3px 10px rgba(0, 0, 0, .24) !important;
  }

  body.bk-modern-design.home footer .mg-footer-bottom-area .row.align-items-center {
    box-shadow: inset 0 1px 0 rgba(247, 251, 253, .08),
      0 3px 10px rgba(7, 30, 71, .16);
  }

  body.bk-modern-design.home .mg-social a,
  body.bk-modern-design.home .mg-social a:hover,
  body.bk-modern-design.home .mg-social a:focus,
  body.bk-modern-design.home .bk-footer-bottom-whatsapp,
  body.bk-modern-design.home .bk-footer-bottom-whatsapp:hover,
  body.bk-modern-design.home .bk-footer-bottom-whatsapp:focus {
    box-shadow: 0 3px 9px rgba(0, 0, 0, .2);
    transform: none;
    transition-property: color, background-color, border-color;
  }

  /* Touch can leave :hover active after a tap. Avoid image zoom/filter layers. */
  body.bk-modern-design.home #content.home #grid .mg-post-thumb img,
  body.bk-modern-design.home #secondary .mg-sidebar #block-25 .wp-block-image img {
    filter: none !important;
    transform: none !important;
    transition: none;
  }

  body.bk-modern-design .bk-header-action,
  body.bk-modern-design .bk-header-action:hover,
  body.bk-modern-design .bk-header-action:focus-visible,
  body.bk-modern-design .bk-header-action::before,
  body.bk-modern-design .bk-header-action:hover::before,
  body.bk-modern-design .bk-header-action:focus-visible::before,
  body.bk-modern-design .bk-language-option,
  body.bk-modern-design .bk-language-option:hover,
  body.bk-modern-design .bk-language-option:focus,
  body.bk-modern-design .bk-language-option.is-active,
  body.bk-modern-design.home .bk-stage-card a,
  body.bk-modern-design.home .bk-stage-card a:hover,
  body.bk-modern-design.home #secondary .mg-sidebar #block-3 .wp-block-latest-posts a,
  body.bk-modern-design.home #secondary .mg-sidebar #block-3 .wp-block-latest-posts a:hover {
    transform: none;
    transition-property: color, background-color, border-color;
  }
}
