/**
 * RFG Elementor Component System
 *
 * Each Elementor widget maps to an .rfg-e-* class that provides:
 * - Base styling (layout, typography defaults)
 * - Hover effects (button colors, image zoom)
 * - Responsive breakpoints (tablet 1024px, mobile 768px)
 * - Animations (fadeInUp, fadeIn, zoomIn)
 *
 * Values are injected via CSS custom properties on each element.
 * Example: <h2 class="rfg-e-heading" style="--heading-color:#8E0C30; --heading-size:48px;">
 *
 * The class reads the custom property: .rfg-e-heading { color: var(--heading-color); }
 * Hover/responsive are handled by the class, not inline styles.
 */

/* ================================================================
   LAYOUT: Section
   ================================================================ */
.rfg-e-section {
  position: relative;
  background-color: var(--section-bg, transparent);
  background-image: var(--section-bg-image, none);
  background-size: var(--section-bg-size, cover);
  background-position: var(--section-bg-position, center center);
  background-repeat: var(--section-bg-repeat, no-repeat);
  padding: var(--section-padding, 60px 0);
  margin: var(--section-margin, 0);
  min-height: var(--section-min-height, auto);
  overflow: var(--section-overflow, hidden);
  box-shadow: var(--section-shadow, none);
}

/* Section overlay (::before pseudo-element — impossible with inline styles) */
.rfg-e-section[data-has-overlay]::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--section-overlay-color, transparent);
  background-image: var(--section-overlay-image, none);
  background-size: var(--section-overlay-size, cover);
  background-position: var(--section-overlay-position, center center);
  opacity: var(--section-overlay-opacity, 0.5);
}

.rfg-e-section > .rfg-e-container {
  position: relative;
  z-index: 1;
}

/* ================================================================
   LAYOUT: Container (inner flex container)
   ================================================================ */
.rfg-e-container {
  display: flex;
  flex-direction: var(--container-direction, column);
  flex-wrap: var(--container-wrap, nowrap);
  gap: var(--container-gap, 20px);
  justify-content: var(--container-justify, flex-start);
  align-items: var(--container-align, stretch);
  width: var(--container-width, auto);
  max-width: var(--container-max-width, 1300px);
  margin: var(--container-margin, 0 auto);
  padding: var(--container-padding, 0 20px);
  box-sizing: border-box;
  min-height: var(--container-min-height, auto);
  background-color: var(--container-bg, transparent);
  background-image: var(--container-bg-image, none);
  background-size: var(--container-bg-size, cover);
  background-position: var(--container-bg-position, center center);
  box-shadow: var(--container-shadow, none);
  z-index: var(--container-z-index, auto);
  position: var(--container-position, relative);
  overflow: var(--container-overflow, visible);
}

/* Border support (e.g., gold box left divider) */
.rfg-e-container[data-has-border] {
  border-style: var(--container-border-style, solid);
  border-color: var(--container-border-color, transparent);
  border-width: var(--container-border-top, 0) var(--container-border-right, 0) var(--container-border-bottom, 0) var(--container-border-left, 0);
}

/* Container overlay */
.rfg-e-container[data-has-overlay]::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--container-overlay-color, transparent);
  opacity: var(--container-overlay-opacity, 0.5);
}

/* ================================================================
   LAYOUT: Column (flex child)
   ================================================================ */
.rfg-e-column {
  flex: var(--column-flex, 0 0 auto);
  width: var(--column-width, auto);
  max-width: var(--column-max-width, none);
  min-width: 0;
  box-sizing: border-box;
  padding: var(--column-padding, 0);
  display: var(--column-display, flex);
  flex-direction: var(--column-direction, column);
  justify-content: var(--column-justify, flex-start);
  align-items: var(--column-align, stretch);
}

/* ================================================================
   TEXT: Heading
   ================================================================ */
.rfg-e-heading {
  /* Typography (font-size, font-weight, font-family, text-transform) comes from:
     1. @layer base h1-h6 rules using theme CSS variables (--heading-h1-size, --font-family-heading)
     2. Per-element inline styles for overrides that differ from theme
     This class MUST NOT set font-size/weight/family/transform — it would override
     the @layer base rules (unlayered CSS always wins over @layer base). */
  line-height: var(--heading-line-height, 1.2);
  margin: var(--heading-margin, 0 0 0.5rem 0);
}
.rfg-e-heading a {
  color: inherit;
  text-decoration: none;
}

/* ================================================================
   TEXT: Text Editor / Paragraph
   ================================================================ */
.rfg-e-text {
  color: var(--text-color, inherit);
  font-family: var(--text-font, inherit);
  font-size: var(--text-size, inherit);
  font-weight: var(--text-weight, normal);
  text-align: var(--text-align, inherit);
  line-height: var(--text-line-height, 1.6);
  margin: var(--text-margin, 0 0 1rem 0);
}
.rfg-e-text p { margin-bottom: 0.75rem; }
.rfg-e-text p:last-child { margin-bottom: 0; }

/* ================================================================
   MEDIA: Image
   ================================================================ */
.rfg-e-image {
  max-width: 100%;
  height: var(--image-height, auto);
  width: var(--image-width, auto);
  object-fit: var(--image-fit, initial);
  object-position: var(--image-position, center center);
  display: block;
  margin: var(--image-margin, 0 0 1rem 0);
  transition: transform 0.4s ease;
}

/* Hover zoom — works via CSS class, impossible with inline styles */
.rfg-e-image-zoomable:hover .rfg-e-image,
.rfg-e-image[data-hover-zoom]:hover {
  transform: scale(var(--image-hover-scale, 1.1));
}

/* ================================================================
   INTERACTIVE: Button
   ================================================================ */
.rfg-e-button {
  display: inline-block;
  padding: var(--btn-padding, 12px 24px);
  background-color: var(--btn-bg, #333);
  color: var(--btn-color, #fff);
  border: var(--btn-border, none);
  border-radius: var(--btn-radius, 4px);
  font-family: var(--btn-font, inherit);
  font-size: var(--btn-font-size, 1rem);
  font-weight: var(--btn-font-weight, 600);
  text-transform: var(--btn-transform, none);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

/* Button hover — the #1 thing inline styles can't do */
.rfg-e-button:hover {
  background-color: var(--btn-hover-bg, var(--btn-bg));
  color: var(--btn-hover-color, var(--btn-color));
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  filter: brightness(0.9);
}

/* Transparent/outline button variant */
.rfg-e-button--outline {
  background-color: transparent;
  border: 2px solid var(--btn-border-color, #fff);
  color: var(--btn-color, #fff);
}
.rfg-e-button--outline:hover {
  background-color: var(--btn-hover-bg, rgba(255,255,255,0.1));
}

/* ================================================================
   CARD: Icon Box
   ================================================================ */
.rfg-e-icon-box {
  display: flex;
  gap: var(--iconbox-gap, 15px);
  align-items: var(--iconbox-align, flex-start);
  margin: var(--iconbox-margin, 0 0 1.5rem 0);
  text-align: var(--iconbox-text-align, left);
}
.rfg-e-icon-box--top {
  flex-direction: column;
  text-align: center;
}
.rfg-e-icon-box__icon {
  flex-shrink: 0;
  color: var(--iconbox-icon-color, inherit);
  font-size: var(--iconbox-icon-size, 2.5rem);
}
.rfg-e-icon-box__title {
  color: var(--iconbox-title-color, inherit);
  font-family: var(--iconbox-title-font, inherit);
  font-size: var(--iconbox-title-size, inherit);
  font-weight: var(--iconbox-title-weight, 600);
  text-transform: var(--iconbox-title-transform, none);
  margin: 0 0 0.5rem 0;
}
.rfg-e-icon-box__desc {
  color: var(--iconbox-desc-color, inherit);
  font-family: var(--iconbox-desc-font, inherit);
  font-size: var(--iconbox-desc-size, inherit);
  line-height: 1.6;
  margin: 0;
}

/* ================================================================
   CARD: Icon List
   ================================================================ */
.rfg-e-icon-list {
  list-style: none;
  padding: 0;
  margin: var(--iconlist-margin, 0 0 1rem 0);
  color: var(--iconlist-text-color, inherit);
  font-family: var(--iconlist-font, inherit);
  font-size: var(--iconlist-font-size, inherit);
  font-weight: var(--iconlist-font-weight, normal);
  text-transform: var(--iconlist-transform, none);
}
.rfg-e-icon-list li {
  display: flex;
  align-items: center;
  gap: var(--iconlist-gap, 10px);
  margin-bottom: var(--iconlist-item-spacing, 8px);
}
.rfg-e-icon-list li i,
.rfg-e-icon-list li svg {
  flex-shrink: 0;
  color: var(--iconlist-icon-color, inherit);
  font-size: var(--iconlist-icon-size, 1em);
}
.rfg-e-icon-list a {
  color: inherit;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--iconlist-gap, 10px);
}

/* ================================================================
   CARD: Image Box (service cards)
   ================================================================ */
.rfg-e-image-box {
  background-color: var(--imgbox-bg, transparent);
  padding: var(--imgbox-padding, 0);
  box-shadow: var(--imgbox-shadow, none);
  overflow: hidden;
  text-align: var(--imgbox-align, center);
  margin-bottom: var(--imgbox-margin-bottom, 1.5rem);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* Card hover lift */
.rfg-e-image-box:hover {
  box-shadow: var(--imgbox-hover-shadow, var(--imgbox-shadow));
  transform: var(--imgbox-hover-transform, none);
}

/* Image inside card — bleeds to edges */
.rfg-e-image-box__image {
  display: block;
  width: var(--imgbox-image-width, 100%);
  height: var(--imgbox-image-height, auto);
  object-fit: cover;
  margin: var(--imgbox-image-margin, 0 0 15px 0);
  transition: transform 0.4s ease;
}

/* Image hover zoom inside card */
.rfg-e-image-box:hover .rfg-e-image-box__image {
  transform: scale(var(--imgbox-image-hover-scale, 1.1));
}

.rfg-e-image-box__title {
  color: var(--imgbox-title-color, inherit);
  font-family: var(--imgbox-title-font, inherit);
  font-size: var(--imgbox-title-size, inherit);
  font-weight: var(--imgbox-title-weight, 600);
  text-transform: var(--imgbox-title-transform, none);
  margin: var(--imgbox-title-margin, 0 0 0.5rem 0);
}
.rfg-e-image-box__desc {
  color: var(--imgbox-desc-color, inherit);
  font-family: var(--imgbox-desc-font, inherit);
  font-size: var(--imgbox-desc-size, inherit);
  font-weight: var(--imgbox-desc-weight, normal);
  line-height: 1.6;
  margin: 0;
}

/* ================================================================
   INTERACTIVE: Accordion
   ================================================================ */
.rfg-e-accordion {
  margin-bottom: var(--accordion-margin, 1.5rem);
}
.rfg-e-accordion details {
  margin-bottom: -1px;
  border: 1px solid var(--accordion-border, #ddd);
}
.rfg-e-accordion summary {
  padding: var(--accordion-header-padding, 12px 16px);
  background: var(--accordion-header-bg, #F9F9F9);
  color: var(--accordion-header-color, #222);
  font-family: var(--accordion-font, inherit);
  font-size: var(--accordion-font-size, inherit);
  font-weight: var(--accordion-font-weight, 600);
  text-transform: var(--accordion-transform, none);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.2s, color 0.2s;
}
.rfg-e-accordion summary::-webkit-details-marker { display: none; }
.rfg-e-accordion summary::after {
  content: '\25BC'; /* ▼ */
  font-size: 0.7em;
  transition: transform 0.2s;
}

/* Open state — background and text color change */
.rfg-e-accordion details[open] > summary {
  background: var(--accordion-active-bg, #8E0C30);
  color: var(--accordion-active-color, #F0F0F0);
}
.rfg-e-accordion details[open] > summary::after {
  transform: rotate(180deg);
}
.rfg-e-accordion .rfg-e-accordion__content {
  padding: var(--accordion-content-padding, 12px 16px);
  font-family: var(--accordion-content-font, inherit);
  font-size: var(--accordion-content-size, inherit);
  line-height: 1.6;
}

/* ================================================================
   MEDIA: Video
   ================================================================ */
.rfg-e-video {
  position: relative;
  padding-bottom: var(--video-aspect, 56.25%); /* 16:9 default */
  height: 0;
  overflow: hidden;
}
.rfg-e-video iframe,
.rfg-e-video video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

/* Video play button overlay */
.rfg-e-video-poster {
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
.rfg-e-video-poster__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) var(--video-play-translate, none);
  width: var(--video-play-size, 60px);
  height: var(--video-play-size, 60px);
  background: var(--video-play-bg, #8E0C30);
  color: var(--video-play-color, #F0F0F0);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--video-play-size, 60px) * 0.3);
  transition: transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 0 0 0 var(--video-play-bg, #8E0C30);
}
.rfg-e-video-poster:hover .rfg-e-video-poster__play {
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 0 0 15px rgba(142, 12, 48, 0.2);
}

/* ================================================================
   UTILITY: Social Icons
   ================================================================ */
.rfg-e-social {
  display: flex;
  gap: var(--social-gap, 12px);
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}
.rfg-e-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--social-size, 40px);
  height: var(--social-size, 40px);
  border-radius: var(--social-radius, 50%);
  background-color: var(--social-bg, #333);
  color: var(--social-color, #fff);
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s, transform 0.2s;
}
.rfg-e-social a:hover {
  background-color: var(--social-hover-bg, var(--social-bg));
  color: var(--social-hover-color, var(--social-color));
  transform: translateY(-2px);
}

/* ================================================================
   UTILITY: Divider
   ================================================================ */
.rfg-e-divider {
  border: none;
  border-top: var(--divider-weight, 1px) var(--divider-style, solid) var(--divider-color, #ddd);
  width: var(--divider-width, 100%);
  margin: var(--divider-margin, 20px auto);
}

/* ================================================================
   UTILITY: Spacer
   ================================================================ */
.rfg-e-spacer {
  height: var(--spacer-height, 50px);
}

/* ================================================================
   CARD: Testimonial
   ================================================================ */
.rfg-e-testimonial {
  text-align: center;
  margin-bottom: 1.5rem;
}
.rfg-e-testimonial blockquote {
  font-style: italic;
  margin: 0 0 1rem 0;
  line-height: 1.6;
}
.rfg-e-testimonial cite {
  font-weight: 600;
}
.rfg-e-testimonial img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 1rem;
}

/* ================================================================
   CARD: Counter
   ================================================================ */
.rfg-e-counter {
  text-align: center;
  margin-bottom: 1.5rem;
}

/* ================================================================
   ANIMATIONS (scroll-triggered via Intersection Observer)
   ================================================================ */
@keyframes rfg-fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes rfg-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes rfg-slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes rfg-slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes rfg-zoomIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

/* Elements with animation start invisible */
[data-rfg-animation] {
  opacity: 0;
}
/* When triggered by Intersection Observer */
[data-rfg-animation].rfg-animated {
  animation-duration: var(--animation-duration, 0.6s);
  animation-fill-mode: both;
  animation-timing-function: ease-out;
  animation-delay: var(--animation-delay, 0s);
}
.rfg-animated[data-rfg-animation="fadeInUp"]    { animation-name: rfg-fadeInUp; }
.rfg-animated[data-rfg-animation="fadeIn"]      { animation-name: rfg-fadeIn; }
.rfg-animated[data-rfg-animation="slideInLeft"] { animation-name: rfg-slideInLeft; }
.rfg-animated[data-rfg-animation="slideInRight"]{ animation-name: rfg-slideInRight; }
.rfg-animated[data-rfg-animation="zoomIn"]      { animation-name: rfg-zoomIn; }

/* ================================================================
   RESPONSIVE: Tablet (max-width: 1024px)
   ================================================================ */
@media (max-width: 1024px) {
  .rfg-e-section {
    padding: var(--section-padding-tablet, var(--section-padding, 40px 0));
  }
  .rfg-e-container {
    flex-direction: var(--container-direction-tablet, var(--container-direction, column));
    gap: var(--container-gap-tablet, var(--container-gap, 20px));
    width: var(--container-width-tablet, var(--container-width, auto));
    padding: var(--container-padding-tablet, var(--container-padding));
  }
  /* .rfg-e-heading responsive sizes removed — theme @layer base rules handle heading sizes */
  .rfg-e-text {
    font-size: var(--text-size-tablet, var(--text-size, inherit));
  }
  .rfg-e-button {
    padding: var(--btn-padding-tablet, var(--btn-padding));
    font-size: var(--btn-font-size-tablet, var(--btn-font-size));
  }
  .rfg-e-icon-list {
    font-size: var(--iconlist-font-size-tablet, var(--iconlist-font-size, inherit));
  }
  .rfg-e-image-box__title {
    font-size: var(--imgbox-title-size-tablet, var(--imgbox-title-size, inherit));
  }
  .rfg-e-spacer {
    height: var(--spacer-height-tablet, var(--spacer-height, 30px));
  }
  .rfg-e-column {
    width: var(--column-width-tablet, var(--column-width, 100%));
    flex: var(--column-flex-tablet, var(--column-flex, 0 0 100%));
  }
}

/* ================================================================
   RESPONSIVE: Mobile (max-width: 768px)
   ================================================================ */
@media (max-width: 768px) {
  .rfg-e-section {
    padding: var(--section-padding-mobile, var(--section-padding-tablet, var(--section-padding, 30px 0)));
  }
  .rfg-e-container {
    flex-direction: var(--container-direction-mobile, column);
    gap: var(--container-gap-mobile, var(--container-gap-tablet, var(--container-gap, 15px)));
    width: 100% !important;
    padding: var(--container-padding-mobile, var(--container-padding-tablet, var(--container-padding)));
  }
  /* .rfg-e-heading responsive sizes removed — theme @layer base rules handle heading sizes */
  .rfg-e-text {
    font-size: var(--text-size-mobile, var(--text-size-tablet, var(--text-size, inherit)));
  }
  .rfg-e-button {
    padding: var(--btn-padding-mobile, var(--btn-padding-tablet, var(--btn-padding)));
    font-size: var(--btn-font-size-mobile, var(--btn-font-size-tablet, var(--btn-font-size)));
  }
  .rfg-e-column {
    width: 100% !important;
    flex: 0 0 100% !important;
  }
  .rfg-e-spacer {
    height: var(--spacer-height-mobile, var(--spacer-height-tablet, var(--spacer-height, 20px)));
  }
  .rfg-e-image-box__title {
    font-size: var(--imgbox-title-size-mobile, var(--imgbox-title-size-tablet, var(--imgbox-title-size, inherit)));
  }
}

/* ================================================================
   ANIMATION TRIGGER SCRIPT (inline — loaded with CSS)
   Intersection Observer activates .rfg-animated class on scroll
   ================================================================ */
/*
  Note: This script must be loaded separately via <script> tag.
  See: rfg-elementor-animations.js
*/