/**
 * RFG Elementor Third-Party Widget Styles
 *
 * Styles for ElementsKit (ekit) and other third-party Elementor addons.
 * These classes extend the base .rfg-e-* component system with plugin-specific
 * layout and interaction patterns that the core widgets do not cover.
 *
 * Naming: .rfg-e-ekit-* for ElementsKit widgets
 *         .rfg-e-*       for generic third-party patterns (video-bg, etc.)
 *
 * All values are driven by CSS custom properties set inline by the parser.
 */

/* ================================================================
   EKIT: Image Box Card
   ElementsKit image-box widget — card with top image, title, desc
   ================================================================ */
.rfg-e-ekit-image-box {
  background-color: var(--ekit-imgbox-bg, #fff);
  padding: var(--ekit-imgbox-padding, 0);
  box-shadow: var(--ekit-imgbox-shadow, 0 2px 8px rgba(0,0,0,0.08));
  border-radius: var(--ekit-imgbox-radius, 0);
  overflow: hidden;
  text-align: var(--ekit-imgbox-align, center);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.rfg-e-ekit-image-box:hover {
  box-shadow: var(--ekit-imgbox-hover-shadow, 0 8px 24px rgba(0,0,0,0.12));
  transform: var(--ekit-imgbox-hover-transform, translateY(-4px));
}

/* Image wrapper — clips the zoom effect */
.rfg-e-ekit-image-box__figure {
  overflow: hidden;
  line-height: 0;
}

.rfg-e-ekit-image-box__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.rfg-e-ekit-image-box:hover .rfg-e-ekit-image-box__image {
  transform: scale(1.1);
}

/* Card body — text content area below the image */
.rfg-e-ekit-image-box__body {
  padding: var(--ekit-imgbox-body-padding, 20px);
}

.rfg-e-ekit-image-box__title {
  color: var(--ekit-imgbox-title-color, inherit);
  font-family: var(--ekit-imgbox-title-font, inherit);
  font-size: var(--ekit-imgbox-title-size, 1.25rem);
  font-weight: var(--ekit-imgbox-title-weight, 700);
  text-transform: var(--ekit-imgbox-title-transform, none);
  margin: 0 0 0.5rem 0;
}

.rfg-e-ekit-image-box__desc {
  color: var(--ekit-imgbox-desc-color, inherit);
  font-family: var(--ekit-imgbox-desc-font, inherit);
  font-size: var(--ekit-imgbox-desc-size, inherit);
  font-weight: var(--ekit-imgbox-desc-weight, normal);
  line-height: 1.6;
  margin: 0;
}

/* ================================================================
   EKIT: Accordion
   ElementsKit accordion with icon toggle + smooth open/close
   ================================================================ */
.rfg-e-ekit-accordion {
  margin-bottom: var(--ekit-accordion-margin, 1.5rem);
}

.rfg-e-ekit-accordion details {
  border: 1px solid var(--ekit-accordion-border, #ddd);
  margin-bottom: -1px;
  overflow: hidden;
}

.rfg-e-ekit-accordion summary {
  padding: var(--ekit-accordion-header-padding, 14px 18px);
  background: var(--ekit-accordion-header-bg, #f7f7f7);
  color: var(--ekit-accordion-header-color, #222);
  font-family: var(--ekit-accordion-font, inherit);
  font-size: var(--ekit-accordion-font-size, inherit);
  font-weight: var(--ekit-accordion-font-weight, 600);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.25s, color 0.25s;
}

.rfg-e-ekit-accordion summary::-webkit-details-marker { display: none; }

/* Toggle icon — rotates when open */
.rfg-e-ekit-accordion summary .ekit-accordion-icon {
  display: inline-flex;
  transition: transform 0.3s ease;
  font-size: 0.8em;
}

.rfg-e-ekit-accordion details[open] > summary .ekit-accordion-icon {
  transform: rotate(180deg);
}

/* Active state */
.rfg-e-ekit-accordion details[open] > summary {
  background: var(--ekit-accordion-active-bg, #8E0C30);
  color: var(--ekit-accordion-active-color, #fff);
}

/* Content panel with height transition */
.rfg-e-ekit-accordion__content {
  padding: var(--ekit-accordion-content-padding, 14px 18px);
  line-height: 1.6;
  animation: rfg-ekit-accordion-open 0.3s ease;
}

@keyframes rfg-ekit-accordion-open {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   EKIT: Video Popup
   ElementsKit video widget — poster image with pulsing play button
   ================================================================ */
.rfg-e-ekit-video {
  position: relative;
  display: inline-block;
  cursor: pointer;
  overflow: hidden;
}

.rfg-e-ekit-video__play {
  position: absolute;
  top: var(--ekit-video-play-top, 50%);
  left: var(--ekit-video-play-left, 50%);
  transform: translate(-50%, -50%);
  width: var(--ekit-video-play-size, 70px);
  height: var(--ekit-video-play-size, 70px);
  background: var(--ekit-video-play-bg, #8E0C30);
  color: var(--ekit-video-play-color, #fff);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--ekit-video-play-size, 70px) * 0.3);
  z-index: 2;
}

/* Pulsing glow / ripple ring effect */
.rfg-e-ekit-video__play::before,
.rfg-e-ekit-video__play::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: var(--ekit-video-play-bg, #8E0C30);
  opacity: 0;
  z-index: -1;
  animation: rfg-ekit-ripple 2s infinite;
}

.rfg-e-ekit-video__play::after {
  animation-delay: 0.6s;
}

@keyframes rfg-ekit-ripple {
  0%   { transform: scale(1);   opacity: 0.5; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* ================================================================
   EKIT: Navigation Menu
   ElementsKit nav-menu — horizontal desktop, hamburger on mobile
   ================================================================ */
.rfg-e-ekit-nav-menu {
  display: flex;
  align-items: center;
  position: relative;
}

.rfg-e-ekit-nav-menu__list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: var(--ekit-nav-gap, 0);
}

.rfg-e-ekit-nav-menu__list > li {
  position: relative;
}

.rfg-e-ekit-nav-menu__list > li > a {
  display: block;
  padding: var(--ekit-nav-link-padding, 10px 16px);
  color: var(--ekit-nav-link-color, inherit);
  font-family: var(--ekit-nav-font, inherit);
  font-size: var(--ekit-nav-font-size, inherit);
  font-weight: var(--ekit-nav-font-weight, 500);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s, background-color 0.2s;
}

.rfg-e-ekit-nav-menu__list > li > a:hover {
  color: var(--ekit-nav-link-hover-color, #8E0C30);
  background-color: var(--ekit-nav-link-hover-bg, transparent);
}

/* Dropdown submenu — visible on hover */
.rfg-e-ekit-nav-menu__list > li > ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: var(--ekit-nav-dropdown-width, 200px);
  background: var(--ekit-nav-dropdown-bg, #fff);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  list-style: none;
  padding: 8px 0;
  margin: 0;
  z-index: 100;
}

.rfg-e-ekit-nav-menu__list > li:hover > ul {
  display: block;
}

.rfg-e-ekit-nav-menu__list > li > ul a {
  display: block;
  padding: 8px 16px;
  color: var(--ekit-nav-dropdown-color, #333);
  text-decoration: none;
  transition: background-color 0.15s;
}

.rfg-e-ekit-nav-menu__list > li > ul a:hover {
  background-color: var(--ekit-nav-dropdown-hover-bg, #f5f5f5);
}

/* Hamburger toggle — hidden on desktop */
.rfg-e-ekit-nav-menu__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
}

.rfg-e-ekit-nav-menu__toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ekit-nav-toggle-color, #333);
  transition: transform 0.3s, opacity 0.3s;
}

/* ================================================================
   VIDEO BACKGROUND
   Sections with YouTube / Vimeo video behind content
   ================================================================ */
.rfg-e-video-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.rfg-e-video-bg iframe,
.rfg-e-video-bg video {
  position: absolute;
  top: 50%; left: 50%;
  min-width: 100%; min-height: 100%;
  width: auto; height: auto;
  transform: translate(-50%, -50%);
}

/* Overlay on top of video background — tint for readability */
.rfg-e-video-bg__overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--video-bg-overlay, rgba(0,0,0,0.5));
  z-index: 1;
}

/* ================================================================
   RESPONSIVE: Tablet (max-width: 1024px)
   ================================================================ */
@media (max-width: 1024px) {
  /* Nav menu collapses to hamburger */
  .rfg-e-ekit-nav-menu__toggle {
    display: flex;
  }

  .rfg-e-ekit-nav-menu__list {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--ekit-nav-dropdown-bg, #fff);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    z-index: 100;
  }

  .rfg-e-ekit-nav-menu__list.is-open {
    display: flex;
  }

  .rfg-e-ekit-nav-menu__list > li > ul {
    position: static;
    box-shadow: none;
    padding-left: 16px;
  }

  .rfg-e-ekit-image-box__title {
    font-size: var(--ekit-imgbox-title-size-tablet, var(--ekit-imgbox-title-size, 1.1rem));
  }
}

/* ================================================================
   RESPONSIVE: Mobile (max-width: 768px)
   ================================================================ */
@media (max-width: 768px) {
  .rfg-e-ekit-image-box {
    box-shadow: var(--ekit-imgbox-shadow-mobile, var(--ekit-imgbox-shadow, none));
  }

  .rfg-e-ekit-image-box__body {
    padding: var(--ekit-imgbox-body-padding-mobile, 16px);
  }

  .rfg-e-ekit-image-box__title {
    font-size: var(--ekit-imgbox-title-size-mobile, var(--ekit-imgbox-title-size-tablet, 1rem));
  }

  .rfg-e-ekit-video__play {
    width: var(--ekit-video-play-size-mobile, 50px);
    height: var(--ekit-video-play-size-mobile, 50px);
    font-size: calc(var(--ekit-video-play-size-mobile, 50px) * 0.3);
  }
}

/* ================================================================
   ICON FONT LOADING
   ================================================================
   Third-party icon fonts (ekiticons, font-awesome-5, etc.) are NOT
   bundled in this stylesheet. They must be loaded via <link> tags
   in the rendered HTML.

   The Elementor parser detects icon classes during conversion and
   calls trackIconLibrary() to register each required font. The
   template renderer then emits the corresponding <link> tags in
   the document <head>.

   Supported libraries (auto-detected by the parser):
     - ekiticons           -> ElementsKit icon font
     - font-awesome-5      -> FA5 (Free/Pro)
     - font-awesome-4-shim -> FA4 compatibility
     - eicons              -> Elementor built-in icons

   No additional CSS is needed here for icon display — the icon
   fonts themselves provide the glyph mappings via their own
   stylesheets.
   ================================================================ */