/* Scoped fixes for the header's mobile/overlay toggle trigger, matching the
 * Lovable source's icon-only round button + detached overlay panel -- the
 * native Elementor Toggle widget has no border-radius control for its title
 * bar and no way to detach its content pane from the flex row, so this is
 * the minimal targeted CSS the compiler-audit's "only if impossible" rule
 * allows for. */
.pk-mobile-toggle {
  flex: 0 0 auto !important;
  position: static !important;
}
.pk-mobile-toggle .elementor-tab-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0 !important;
  border-radius: 9999px;
  border: 1px solid rgba(250, 250, 247, 0.4);
  cursor: pointer;
}
.pk-mobile-toggle .elementor-toggle-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}
.pk-mobile-toggle .elementor-toggle-icon {
  margin: 0;
}
.pk-mobile-toggle .elementor-tab-content {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  border-radius: 2rem;
  z-index: 10;
}
.pk-overlay-grid {
  align-items: end;
}
@media (max-width: 767px) {
  .pk-overlay-grid {
    grid-template-columns: 1fr !important;
  }
  .pk-mobile-toggle .elementor-tab-content {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
}

.pk-footer-meta {
  font-family: Inter, sans-serif;
  color: rgba(237, 40, 110, 0.6);
}
.pk-footer-meta .elementor-shortcode {
  font-family: Inter, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.75rem;
  color: rgba(237, 40, 110, 0.6);
}

/* Scroll-shrink animation, matching Nav.tsx's scrolled-state values exactly
 * (confirmed via computed-style inspection of the live Lovable header at
 * 1440px: unscrolled pillPadding 12px/36px logo 72px gap 40px header-pad
 * 14px -> scrolled 8px/24px logo 52px gap 24px header-pad 8px). Elementor
 * has no native scroll-triggered style-morph control, so this is CSS
 * transitions driven by one class toggle -- the same pattern the theme's
 * own compiler output already uses elsewhere for scroll-based header
 * changes. */
.pk-header-root {
  transition: padding-top 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pk-header-pill {
  padding: 12px 36px !important;
  transition: padding 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (max-width: 767px) {
  .pk-header-pill {
    padding: 10px 20px !important;
  }
}
.pk-header-logo img {
  transition: width 400ms cubic-bezier(0.22, 1, 0.36, 1), height 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pk-header-nav {
  transition: gap 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pk-header-root.pk-scrolled {
  padding-top: 8px !important;
}
.pk-header-root.pk-scrolled .pk-header-pill {
  padding: 8px 24px !important;
}
.pk-header-root.pk-scrolled .pk-header-logo,
.pk-header-root.pk-scrolled .pk-header-logo img {
  width: 52px !important;
  height: 52px !important;
}
.pk-header-root.pk-scrolled .pk-header-nav {
  gap: 24px !important;
}
@media (max-width: 767px) {
  .pk-header-root.pk-scrolled {
    padding-top: 6px !important;
  }
  .pk-header-root.pk-scrolled .pk-header-pill {
    padding: 6px 16px !important;
  }
  .pk-header-root.pk-scrolled .pk-header-logo,
  .pk-header-root.pk-scrolled .pk-header-logo img {
    width: 36px !important;
    height: 36px !important;
  }
}
.pk-arrow-icon .elementor-button-icon svg,
.pk-arrow-icon .elementor-button-icon i {
  transform: rotate(45deg);
  transition: transform 500ms cubic-bezier(0.65,0,0.35,1);
}
.pk-arrow-icon:hover .elementor-button-icon svg,
.pk-arrow-icon:hover .elementor-button-icon i {
  transform: rotate(90deg);
}
.pk-pill-btn .elementor-button {
  transition: transform 500ms cubic-bezier(0.65,0,0.35,1) !important;
}
.pk-pill-btn:hover .elementor-button {
  transform: translateY(-2px);
}