/* Sonaflo Demo UX Polish v0.1.0 (patched) */

/* =========================================================
   1) Astra header nav typography + spacing (desktop)
   ========================================================= */
@media (min-width: 922px) {
  .ast-builder-menu-1 .main-header-menu {
    gap: 2px;
  }

  .ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1px;
    padding-left: 12px;
    padding-right: 12px;
    line-height: 1.1;
  }

  .ast-primary-header-bar .site-header-primary-section-right {
    align-items: center;
  }
}

/* Slightly tighter header height feel without breaking Astra */
@media (min-width: 922px) {
  .main-header-bar {
    padding-top: 6px;
    padding-bottom: 6px;
  }
}

/* =========================================================
   2) Prevent any DEMO badge/pill from ballooning the header
      (DO NOT hide it; just constrain it)
   ========================================================= */
.sfl-demo-badge-wrap,
.sfl-demo-badge-inner,
.sfl-demo-badge-status,
.sfl-demo-pill,
.sfl-demo-badge,
.sfl-demo-label {
  max-height: 28px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sfl-demo-badge-wrap,
.sfl-demo-pill,
.sfl-demo-badge,
.sfl-demo-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
}

/* If a badge accidentally lands inside the header, keep it tame */
.site-header .sfl-demo-badge-wrap,
.site-header .sfl-demo-pill,
.site-header .sfl-demo-badge,
.site-header .sfl-demo-label {
  max-width: 220px;
}

/* =========================================================
   3) Remove redundant page hero/title blocks (demo workspaces)
      - Target Astra's entry header/banner, not your module content
   ========================================================= */
body.home .ast-single-entry-banner,
body.home header.entry-header,
body.page .ast-single-entry-banner,
body.page header.entry-header {
  display: none !important;
}

/* IMPORTANT:
   Do NOT blanket-hide .entry-content labels/buttons/etc.
   That was causing "where did my stuff go?" type issues.
*/

/* =========================================================
   4) Tiles grid defaults (safe, light)
   ========================================================= */
.sfl-tiles {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  margin-top: 14px;
}

/* Responsive: stack tiles nicely */
@media (max-width: 921px) {
  .sfl-tiles {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media (max-width: 544px) {
  .sfl-tiles {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* Basic tile polish (doesn’t fight Astra) */
.sfl-tile {
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.sfl-tile .sfl-tile-cta {
  padding: 14px 14px;
}

.sfl-tile .sfl-tile-meta {
  font-size: 12px;
  font-weight: 700;
  opacity: 0.75;
}

/* Optional: subtle simulated indicator without layout impact */
.sfl-tile[data-simulated="1"] {
  position: relative;
}
.sfl-tile[data-simulated="1"]::after {
  content: "SIMULATED";
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 11px;
  font-weight: 700;
  opacity: 0.55;
  pointer-events: none;
}