/* Printeez Custom Menu block styles — ported from the standalone plugin's
 * src/block/styles.scss (which was already flat CSS). The tippy.js base,
 * light-border theme, and shift-toward-extreme animation styles load as
 * vendored style dependencies (assets/vendor/tippy/) instead of SCSS
 * imports. Scoped under .wp-block-custom-printeez-custom-menu. */

.wp-block-custom-printeez-custom-menu {
  --pcb-primary: var(--wp--preset--color--primary, var(--wp--preset--color--contrast, #111111));
  --pcb-secondary: var(--wp--preset--color--secondary, var(--wp--preset--color--accent-1, #cdb18c));
  --pcb-border: color-mix(in srgb, var(--pcb-primary) 8%, transparent);

  position: relative;
  display: block;
  width: 100%;
  background: transparent;
  color: var(--pcb-primary);
  font-family: inherit;
}

.wp-block-custom-printeez-custom-menu,
.wp-block-custom-printeez-custom-menu * {
  font-family: inherit;
}

.wp-block-custom-printeez-custom-menu .pcb-menu-shell {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.wp-block-custom-printeez-custom-menu .pcb-menu {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  margin: 0;
  padding: 0;
  width: 100%;
}

@media (min-width: 768px) {
  .wp-block-custom-printeez-custom-menu .pcb-menu {
    gap: 0.75rem;
  }
}

.wp-block-custom-printeez-custom-menu .pcb-menu__item {
  position: relative;
  display: flex;
  flex-direction: column;
}

.wp-block-custom-printeez-custom-menu .pcb-menu:not(.is-pcb-ready) .pcb-menu__item[data-pcb-visibility] {
  visibility: hidden;
}

.wp-block-custom-printeez-custom-menu .pcb-menu__link,
.wp-block-custom-printeez-custom-menu .pcb-menu__trigger {
  width: 100%;
  appearance: none;
  text-decoration: none;
  border: 1px solid transparent;
  color: var(--pcb-primary);
  background: transparent;
  border-radius: 0.4rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.55rem 0.65rem;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
}

.wp-block-custom-printeez-custom-menu .pcb-menu__trigger:focus,
.wp-block-custom-printeez-custom-menu .pcb-menu__trigger:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.wp-block-custom-printeez-custom-menu .pcb-menu__item.is-has-submenu .pcb-menu__trigger:focus-visible {
  outline: none;
  border-color: transparent;
  background: color-mix(in srgb, var(--pcb-secondary) 5%, transparent);
}

.wp-block-custom-printeez-custom-menu .pcb-menu__arrow {
  display: inline-flex;
  width: 0.85rem;
  height: 0.85rem;
  transition: transform 0.2s ease;
}

.wp-block-custom-printeez-custom-menu .pcb-menu__arrow svg {
  width: 100%;
  height: 100%;
}

.wp-block-custom-printeez-custom-menu .pcb-menu__trigger[aria-expanded='true'] .pcb-menu__arrow {
  transform: rotate(180deg);
}

.wp-block-custom-printeez-custom-menu .pcb-submenu {
  margin-top: 0;
  border: 0;
  border-radius: 0.6rem;
  overflow: hidden;
  background: #fff;
}

.wp-block-custom-printeez-custom-menu .pcb-submenu.is-tippy-content {
  width: min(960px, calc(100vw - 2rem));
}

.wp-block-custom-printeez-custom-menu .pcb-submenu--grid.is-tippy-content {
  width: min(960px, calc(100vw - 2rem));
}

.wp-block-custom-printeez-custom-menu .pcb-submenu--list.is-tippy-content {
  width: auto;
  min-width: 160px;
  max-width: calc(100vw);
}

.wp-block-custom-printeez-custom-menu .pcb-submenu__badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem;
  border-bottom: 1px solid var(--pcb-border);
  text-decoration: none;
  color: var(--pcb-primary);
  background: transparent;
}

.wp-block-custom-printeez-custom-menu .pcb-submenu__badge:hover,
.wp-block-custom-printeez-custom-menu .pcb-submenu__badge:focus-visible {
  background: color-mix(in srgb, var(--pcb-secondary) 5%, transparent);
}

.wp-block-custom-printeez-custom-menu .pcb-submenu__badge-right {
  display: inline-flex;
  width: 0.95rem;
  height: 0.95rem;
  color: var(--pcb-secondary);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.wp-block-custom-printeez-custom-menu .pcb-submenu__badge:hover .pcb-submenu__badge-right,
.wp-block-custom-printeez-custom-menu .pcb-submenu__badge:focus-visible .pcb-submenu__badge-right {
  opacity: 1;
  visibility: visible;
}

.wp-block-custom-printeez-custom-menu .pcb-submenu__badge-right svg {
  width: 100%;
  height: 100%;
}

.wp-block-custom-printeez-custom-menu .pcb-submenu__badge-left {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.wp-block-custom-printeez-custom-menu .pcb-icon {
  display: inline-flex;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0.35rem;
  border-radius: 0.35rem;
  background: color-mix(in srgb, var(--pcb-secondary) 10%, transparent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
}

.wp-block-custom-printeez-custom-menu .pcb-icon img,
.wp-block-custom-printeez-custom-menu .pcb-icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.wp-block-custom-printeez-custom-menu .pcb-icon svg path {
  fill: var(--pcb-secondary);
}

.wp-block-custom-printeez-custom-menu .pcb-submenu__cards {
  display: flex;
  width: 100%;
}

.wp-block-custom-printeez-custom-menu .pcb-submenu__cards--list {
  flex-direction: column;
  width: auto;
  min-width: 160px;
}

.wp-block-custom-printeez-custom-menu .pcb-submenu__cards--list .pcb-card {
  font-weight: 400;
}

.wp-block-custom-printeez-custom-menu .pcb-submenu__cards--list .pcb-card__title {
  font-weight: 400;
}

.wp-block-custom-printeez-custom-menu .pcb-submenu__cards--list .pcb-card:hover,
.wp-block-custom-printeez-custom-menu .pcb-submenu__cards--list .pcb-card:focus-visible {
  color: var(--pcb-secondary);
}

.wp-block-custom-printeez-custom-menu .pcb-submenu__cards--grid {
  flex-direction: column;
  align-items: stretch;
}

@media (min-width: 768px) {
  .wp-block-custom-printeez-custom-menu .pcb-submenu__cards--grid {
    flex-direction: row;
  }

  /* Size the panel to its cards so fewer cards yield a narrower dropdown. */
  /* max-content, not fit-content: the tippy popper is abspos inside the */
  /* narrow menu item, so fit-content would collapse to min-content (190px cards). */
  .wp-block-custom-printeez-custom-menu .pcb-submenu--grid.is-tippy-content {
    width: max-content;
    max-width: min(960px, calc(100vw - 2rem));
  }
}

.wp-block-custom-printeez-custom-menu .pcb-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--pcb-primary);
  padding: 0.9rem;
  border-right: 1px solid var(--pcb-border);
}

.wp-block-custom-printeez-custom-menu .pcb-card:hover,
.wp-block-custom-printeez-custom-menu .pcb-card:focus-visible {
  background: color-mix(in srgb, var(--pcb-secondary) 5%, transparent);
}

.wp-block-custom-printeez-custom-menu .pcb-submenu__cards--grid .pcb-card {
  flex: 1 1 0;
  min-width: 190px;
}

@media (min-width: 768px) {
  /* Fixed card width so the panel (fit-content) narrows with fewer cards */
  /* instead of stretching cards to fill it. Must come after the flex: 1 1 0 */
  /* base rule above to win the cascade. */
  .wp-block-custom-printeez-custom-menu .pcb-submenu__cards--grid .pcb-card {
    flex: 1 1 256px;
    max-width: 256px;
    box-sizing: border-box;
  }
}

/* Mobile mega-menu cards read as a LIST, not a column of hero images:
   the image shrinks to a small square thumbnail with the title (and
   description) beside it. Explicit grid placement so an imageless card's
   text doesn't slide into the thumbnail column. Desktop (≥768px) keeps
   the row-of-cards layout below. */
@media (max-width: 767px) {
  .wp-block-custom-printeez-custom-menu .pcb-submenu__cards--grid .pcb-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0.1rem;
    padding: 0.65rem 0.9rem;
    border-right: 0;
    border-bottom: 1px solid var(--pcb-border);
  }

  .wp-block-custom-printeez-custom-menu .pcb-submenu__cards--grid .pcb-card:last-child {
    border-bottom: 0;
  }

  .wp-block-custom-printeez-custom-menu .pcb-submenu__cards--grid .pcb-card__image-wrap {
    grid-row: 1 / span 2;
    width: 3.25rem;
    height: 3.25rem;
  }

  .wp-block-custom-printeez-custom-menu .pcb-submenu__cards--grid .pcb-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .wp-block-custom-printeez-custom-menu .pcb-submenu__cards--grid .pcb-card__title,
  .wp-block-custom-printeez-custom-menu .pcb-submenu__cards--grid .pcb-card__desc {
    grid-column: 2;
  }
}

.wp-block-custom-printeez-custom-menu .pcb-card__image-wrap {
  border-radius: 0.45rem;
  overflow: hidden;
}

.wp-block-custom-printeez-custom-menu .pcb-card__image {
  width: 100%;
  max-height: 16rem;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.wp-block-custom-printeez-custom-menu .pcb-card:hover .pcb-card__image {
  transform: scale(1.04);
}

.wp-block-custom-printeez-custom-menu .pcb-card__title {
  font-weight: 700;
}

.wp-block-custom-printeez-custom-menu .pcb-card__desc {
  opacity: 0.5;
  font-size: 0.82rem;
}

.wp-block-custom-printeez-custom-menu .pcb-submenu__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  padding: 0.8rem;
  background: color-mix(in srgb, var(--pcb-primary) 5%, transparent);
}

.wp-block-custom-printeez-custom-menu .pcb-submenu__link,
.wp-block-custom-printeez-custom-menu .pcb-submenu__cta {
  font-size: 0.82rem;
  text-decoration: none;
  color: color-mix(in srgb, var(--pcb-primary) 50%, transparent);
}

.wp-block-custom-printeez-custom-menu .pcb-submenu__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  font-weight: 700;
  color: var(--pcb-secondary);
}

.wp-block-custom-printeez-custom-menu .pcb-submenu__cta-arrow {
  display: inline-flex;
  width: 0.95rem;
  height: 0.95rem;
}

.wp-block-custom-printeez-custom-menu .pcb-submenu__cta-arrow svg {
  width: 100%;
  height: 100%;
}

.wp-block-custom-printeez-custom-menu .pcb-stacked {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.wp-block-custom-printeez-custom-menu .pcb-stacked__label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pcb-primary);
}

.wp-block-custom-printeez-custom-menu .pcb-stacked__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.wp-block-custom-printeez-custom-menu .pcb-stacked__item {
  margin: 0;
}

.wp-block-custom-printeez-custom-menu .pcb-stacked__link {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: transparent;
  text-decoration: none;
  color: var(--pcb-primary);
  font-weight: 400;
  font-size: 1rem;
}

.wp-block-custom-printeez-custom-menu .pcb-stacked__link:hover,
.wp-block-custom-printeez-custom-menu .pcb-stacked__link:focus-visible {
  background: transparent;
  text-decoration: underline;
}

.wp-block-custom-printeez-custom-menu .pcb-stacked__link .pcb-card__title {
  font-weight: 400;
}

.tippy-box[data-theme~='light-border'] {
  color: var(--pcb-primary);
}

.tippy-box[data-theme~='light-border'] > .tippy-content {
  padding: 0;
}

@media (min-width: 768px) {
  .wp-block-custom-printeez-custom-menu .pcb-menu-shell {
    align-items: center;
    flex-direction: row;
    gap: 1.5rem;
  }

  .wp-block-custom-printeez-custom-menu .pcb-menu {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.7rem;
  }

  .wp-block-custom-printeez-custom-menu[data-pcb-global-style='dropdown'] .pcb-menu {
    width: auto;
  }

  .wp-block-custom-printeez-custom-menu[data-pcb-global-style='expanded'] .pcb-menu {
    width: 100%;
    justify-content: space-between;
  }

  .wp-block-custom-printeez-custom-menu .pcb-menu__item {
    display: inline-flex;
  }

  .wp-block-custom-printeez-custom-menu .pcb-menu__item.is-stacked {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .wp-block-custom-printeez-custom-menu .pcb-submenu__badge {
    padding: 1rem 1.2rem;
  }

  .wp-block-custom-printeez-custom-menu .pcb-menu__link,
  .wp-block-custom-printeez-custom-menu .pcb-menu__trigger {
    width: auto;
    white-space: nowrap;
  }

  /* Broken-tippy fallback: expand submenus inline so their content stays
     reachable — but only after menu-view.js has run (the ready class).
     Unconditional (as in the old plugin) this painted every submenu
     expanded while scripts were still loading, flashing the header tall.
     In the normal path tippy has already removed [hidden] by ready time,
     so this matches nothing. */
  html.is-pcb-visibility-ready .wp-block-custom-printeez-custom-menu .pcb-submenu[hidden] {
    display: block;
  }
}
