/* CC Bricks Helper — sanctioned CSS exceptions
 *
 * Each rule lives here only because Bricks's element schema cannot express it.
 * Keep this file small. Prefer native Bricks settings every time.
 */

/* ---------------------------------------------------------------------------
 * 1. Visible "MENU" label on the mobile menu toggle.
 *
 * Bricks's nav-menu element exposes only an aria-label for the toggle
 * (mobileMenuToggleAriaLabel) — there's no visible-text setting. The hamburger
 * icon alone reads as unfamiliar to some shoppers; the word "MENU" reduces
 * confusion. Toggle class confirmed at bricks 2.3.5 nav-menu.php:1881.
 *
 * Layout strategy: force the toggle to a known 150×42 box. Anchor MENU at the
 * LEFT edge via absolute positioning. Push the bars (Bricks renders them as
 * position:absolute spans with top: 0 / 7 / 14, left: auto) over to the RIGHT
 * edge. That guarantees MENU and bars can't overlap regardless of Bricks's
 * own toggle-width setting.
 * ------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .bricks-mobile-menu-toggle {
    position: relative !important;
    width: 110px !important;
    height: 42px !important;
    overflow: visible !important;
  }
  .bricks-mobile-menu-toggle::before {
    content: "MENU";
    position: absolute !important;
    left: 0;
    bottom: 0;
    top: auto;
    transform: none;
    font-family: "Amatic SC", cursive;
    font-weight: 700;
    font-size: 42px;
    line-height: 1;
    color: #6B8FAD;
    letter-spacing: 1px;
    white-space: nowrap;
  }
  /* Bars: 40×4, pushed to the right edge, anchored to BOTTOM of the toggle
   * so the lowest bar's bottom edge sits on the same baseline as MENU.
   * 12px between bar tops (8px gap between bars).
   */
  .bricks-mobile-menu-toggle .bar-top,
  .bricks-mobile-menu-toggle .bar-center,
  .bricks-mobile-menu-toggle .bar-bottom {
    left: auto !important;
    right: -3px !important;
    top: auto !important;
    width: 40px !important;
    height: 4px !important;
    background: #6B8FAD !important;
  }
  .bricks-mobile-menu-toggle .bar-top    { bottom: 30px !important; }
  .bricks-mobile-menu-toggle .bar-center { bottom: 18px !important; }
  .bricks-mobile-menu-toggle .bar-bottom { bottom:  6px !important; }

  /* When the mobile menu is OPEN (body gains .show-mobile-menu), the toggle
   * becomes the close X and our MENU label would otherwise sit on top of
   * the visible menu items. Reposition it to the bottom-centre of the
   * viewport — out of the way of the items, but still visible as a
   * "you are in the menu" confirmation.
   */
  body.show-mobile-menu .bricks-mobile-menu-toggle::before {
    position: fixed !important;
    top: auto !important;
    bottom: 40px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
}

/* ---------------------------------------------------------------------------
 * 2a. Blog posts grid — responsive columns.
 *
 * /blog page (post 18) has a Bricks `posts` element id=oyzwak with
 * columns: "3" hard-set, no breakpoint variants. Cards overflow horribly
 * at phone width. Tablet -> 2 cols, mobile -> 1 col (stacked).
 *
 * Bricks renders the posts grid as CSS-grid on #brxe-oyzwak itself.
 * ------------------------------------------------------------------------- */
@media (max-width: 991px) {
  #brxe-oyzwak .bricks-layout-wrapper {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 478px) {
  #brxe-oyzwak .bricks-layout-wrapper {
    grid-template-columns: 1fr !important;
  }
}

/* ---------------------------------------------------------------------------
 * 2b. Featured Products section — mobile_portrait stacking.
 *
 * The [sc_product_list] shortcode renders a CSS-grid with a fixed column count
 * set server-side (currently 3 → typically auto-fits to 4 on wide screens).
 * No SureCart attribute controls per-viewport columns, and a Bricks query-loop
 * rebuild is deferred. So at phone width (≤478px = Bricks mobile_portrait):
 *   - collapse the grid to 1 column (vertical stack)
 *   - hide products beyond the 3rd
 *
 * Selectors confirmed against the rendered DOM 2026-05-22:
 *   - #brxe-hmfsc wraps the shortcode output
 *   - ul.wp-block-surecart-product-template is the grid
 *   - li.sc-product-item is each card
 * ------------------------------------------------------------------------- */
@media (max-width: 478px) {
  #brxe-hmfsc .wp-block-surecart-product-template {
    grid-template-columns: 1fr !important;
  }
  #brxe-hmfsc li.sc-product-item:nth-child(n+4) {
    display: none !important;
  }
}