/*
Theme Name: Parrot Bliss
Theme URI: https://parrotbliss.com
Description: Standalone Parrot Bliss theme (Sunset Papaya, token-based). Migrated off Divi — custom PHP templates + design tokens (assets/tokens.css). No parent theme.
Author: Parrot Bliss
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: parrotbliss
Domain Path: /languages
*/

/* Standalone theme — no Divi parent. Design tokens in assets/tokens.css.
   Species detail styles are loaded from single-parrot_species.php (scoped to .pb-sp-root). */

/* ─── PBE parrot_listing detail page image polish ───
   Targets plugin markup at /parrot/<slug>/ so images match the sanctuary treatment
   used on /available-parrots/. No plugin files modified. */
.single-parrot_listing .pbe-main-image {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1/1 !important;
  object-fit: contain !important;
  object-position: center !important;
  background: var(--pb-surface) !important;
  border-radius: 20px !important;
  padding: 12px !important;
}
.single-parrot_listing .pbe-thumbnail {
  width: 80px !important;
  height: 80px !important;
  aspect-ratio: 1/1 !important;
  object-fit: contain !important;
  background: var(--pb-surface) !important;
  border-radius: 12px !important;
  padding: 4px !important;
  flex: 0 0 auto !important;
}
.single-parrot_listing .pbe-thumbnails {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 12px !important;
}
.single-parrot_listing .pbe-gallery {
  gap: 12px !important;
}
.single-parrot_listing .pbe-single-wrapper {
  padding-top: 100px !important;
}
.single-parrot_listing .pbe-back-link {
  position: relative !important;
  z-index: 10 !important;
}
/* Plugin ships an "About <species>" block with placeholder boilerplate
   ("+ Add New Species parrots are known for..."). Hide until Kalyn fills
   species descriptions in the plugin admin. Bird-specific story remains
   in .pbe-description above. */
.single-parrot_listing .pbe-species-info {
  display: none !important;
}

/* =====================================================================
   Top-nav dropdown hover fix.
   Divi's body has class et_primary_nav_dropdown_animation_slide which adds
   a 0.4s `fadeLeft` animation to submenus on :hover. That animation freezes
   the submenu in its hidden start-frame on some browsers/touch-detection
   states. Plus Divi's JS toggles .et-hover only when its own touch-detect
   approves, which mis-flags many modern desktops.
   Fix: kill the animation, force pure CSS :hover to show the submenu, and
   add an invisible bridge under the parent so the cursor can traverse into
   the submenu without the hover state breaking.
   Mobile (<=980px) uses Divi's mobile menu unchanged.
   ===================================================================== */
@media (min-width: 981px) {
  /* Kill Divi's animation + transition that was preventing show */
  #top-menu li.menu-item-has-children > ul.sub-menu,
  #et-secondary-nav li.menu-item-has-children > ul {
    animation: none !important;
    -webkit-animation: none !important;
    transition:
      opacity 0.15s ease,
      visibility 0s linear 0.15s !important;
  }

  /* Class-driven only — :hover is unreliable (sometimes stays "stuck" in
     Chrome after the cursor moves away). Show submenu via .et-hover class
     which our footer JS toggles on real mouseenter/mouseleave. */
  #top-menu li.menu-item-has-children.et-hover > ul.sub-menu,
  #et-secondary-nav li.menu-item-has-children.et-hover > ul {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    display: block !important;
    transition:
      opacity 0.15s ease,
      visibility 0s !important;
  }

  /* Invisible bridge: extends the parent's hoverable area downward so the
     cursor can leave the parent text and enter the submenu without crossing
     a "hover gap" that closes the menu. */
  #top-menu li.menu-item-has-children::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 18px;
    background: transparent;
    pointer-events: auto;
  }
  #top-menu li:not(.menu-item-has-children)::after {
    display: none;
  }
}

/* =====================================================================
   Third-level (flyout) sub-menu support.
   Divi's JS adds .et-hover only to top-level items, so nested
   li.menu-item-has-children inside a .sub-menu never get it.
   Fix: use pure CSS :hover for the flyout — safe because the submenu
   slides to the right rather than downward, so there is no hover gap.
   ===================================================================== */
@media (min-width: 981px) {
  /* Fly out to the right of the second-level item */
  #top-menu .sub-menu li.menu-item-has-children > ul.sub-menu {
    position: absolute !important;
    left: 100% !important;
    top: 0 !important;
    margin-top: 0 !important;
  }

  /* Show on :hover — pure CSS is reliable here (horizontal flyout, no gap) */
  #top-menu .sub-menu li.menu-item-has-children:hover > ul.sub-menu {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    display: block !important;
    transition:
      opacity 0.15s ease,
      visibility 0s !important;
  }

  /* Rightward bridge: extends hover area to the right so the cursor can
     travel from the second-level item into the flyout without losing hover. */
  #top-menu .sub-menu li.menu-item-has-children::after {
    content: "";
    position: absolute;
    top: 0;
    right: -14px;
    left: auto;
    width: 14px;
    height: 100%;
    background: transparent;
    pointer-events: auto;
  }

  /* Chevron hint — signals that the item has a flyout */
  #top-menu .sub-menu li.menu-item-has-children > a::after {
    content: "›";
    float: right;
    margin-left: 10px;
    opacity: 0.5;
    font-weight: 300;
    font-size: 1.05em;
  }
}