/*
 * ZKKR static-site CSS overrides.
 * Loaded by every page via <link rel="stylesheet" href="/zkkr-overrides.css">.
 * Place all post-mirror visual tweaks here.
 */

/* Mobile header: pin the hamburger button to the absolute right edge.
   The header row is split into two columns (1/4 logo + 3/4 right). The
   hamburger lives in the right column but TRX Addons default padding plus
   the column's own width leaves a visible gap. Use position:absolute on the
   hamburger relative to its closest positioned ancestor (the row container)
   so the icon always sits flush with the right padding boundary. */
@media (max-width: 1024px) {
  /* The hamburger uses position:absolute. To anchor it to the FULL-WIDTH
     row (top_panel_navi) instead of the 75 %-width inner column, force all
     intermediate ancestors to position:static and only the row to relative. */
  .top_panel_navi,
  .top_panel_navi.sc_layouts_row,
  .top_panel .sc_layouts_row,
  .top_panel_top .sc_layouts_row {
    position: relative !important;
  }
  .top_panel_navi .content_wrap,
  .top_panel_navi .columns_wrap,
  .top_panel_navi .sc_layouts_column,
  .top_panel_navi .sc_layouts_item,
  .top_panel .content_wrap,
  .top_panel .columns_wrap,
  .top_panel .sc_layouts_column,
  .top_panel .sc_layouts_item {
    position: static !important;
  }
  /* Now position the hamburger flush with the row's right edge */
  .sc_layouts_menu_mobile_button {
    position: absolute !important;
    top: 50% !important;
    right: 16px !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 10;
  }
  .sc_layouts_menu_mobile_button > a {
    padding: 8px !important;
    margin: 0 !important;
  }
  /* Hide leftover empty slots from the removed search / language switcher */
  .sc_layouts_item:empty,
  .sc_layouts_column:empty {
    display: none !important;
  }
}

@media (max-width: 1024px) {
  /* The TRX Addons mobile rules collapse content_wrap to a fixed inner
     width with auto-margins, leaving big side gaps. Override to full
     viewport width with explicit padding so logo & hamburger sit near
     the edges. */
  .top_panel .content_wrap,
  .top_panel_navi .content_wrap,
  .top_panel_top .content_wrap {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media (max-width: 768px) {
  .top_panel .content_wrap,
  .top_panel_navi .content_wrap,
  .top_panel_top .content_wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .sc_layouts_menu_mobile_button {
    right: 16px !important;
  }
}

/* Breadcrumb delimiter — show a real bullet instead of relying on the
   `fontello` icon font (\e83c) which doesn't load on every page. Override
   the theme rule `.breadcrumbs .breadcrumbs_delimiter:before` with !important. */
.breadcrumbs .breadcrumbs_delimiter,
.breadcrumbs_delimiter {
  display: inline-block !important;
  width: 1em;
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
}
.breadcrumbs .breadcrumbs_delimiter::before,
.breadcrumbs .breadcrumbs_delimiter:before,
.breadcrumbs_delimiter::before {
  content: "•" !important;
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif !important;
}

@media (max-width: 480px) {
  .top_panel .content_wrap,
  .top_panel_navi .content_wrap,
  .top_panel_top .content_wrap {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .sc_layouts_menu_mobile_button {
    right: 12px !important;
  }
}