/*
 Theme Name: Ele Child
 Template: hello-elementor
 Version: 1.0.8
*/

/* =========================
   Empty state
========================= */
.no-events{
    color:#777;
    font-style:italic;
}

/* =========================================================
   WIDGET EVENT CARDS — LAYOUT ONLY (WIDGET ONLY)
========================================================= */
.elementor-widget-ghs_event_card .event-card{
    display:grid;
    grid-template-columns:90px 1fr;
    grid-template-areas:
        "image content"
        "location location";
    column-gap:16px;
    row-gap:10px;
    position:relative;
    overflow:hidden;
}

.elementor-widget-ghs_event_card .event-left{grid-area:image;}
.elementor-widget-ghs_event_card .event-right{grid-area:content;}
.elementor-widget-ghs_event_card .event-location{grid-area:location;}

.elementor-widget-ghs_event_card .event-right{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.elementor-widget-ghs_event_card .event-datetime{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    white-space:normal;
    align-items:baseline;
}

@media (max-width:1023px){
    .elementor-widget-ghs_event_card .event-card{
        grid-template-columns:70px 1fr;
    }
}

@media (max-width:767px){
    .elementor-widget-ghs_event_card .event-card{
        grid-template-columns:1fr;
        grid-template-areas:
            "image"
            "content"
            "location";
        text-align:center;
    }
    .elementor-widget-ghs_event_card .event-right{align-items:center;}
    .elementor-widget-ghs_event_card .event-location{text-align:center;}
}

/* =========================================================
   GHS Gallery Tile
   - Arrow shows only on hover
   - Image fills the tile (cover)
   - Elementor "Grow" hover stays centered (no drifting)
   - Clips overflow so the grow doesn’t spill outside

   USE:
   Add CSS class → ghs-gallery-tile
   to the tile container in Elementor.
========================================================= */

/* Tile wrapper */
.ghs-gallery-tile{
  position: relative;
  overflow: hidden; /* IMPORTANT for centered grow */
}

/* Arrow hidden until hover */
.ghs-gallery-tile .ghs-gallery-arrow{
  opacity: 0;
  transform: translateX(0);
  transition: opacity 200ms ease, transform 200ms ease;
  pointer-events: none; /* prevents hover flicker */
}

/* Show arrow on hover */
.ghs-gallery-tile:hover .ghs-gallery-arrow{
  opacity: 1;
  transform: translateX(4px);
  pointer-events: auto;
}

/* Make the image area behave like a centered “frame” */
.ghs-gallery-tile .elementor-widget-image,
.ghs-gallery-tile .elementor-widget-image .elementor-widget-container,
.ghs-gallery-tile .elementor-widget-image a{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Fill the frame and ensure hover-grow scales from the center */
.ghs-gallery-tile .elementor-widget-image img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
}



/* =========================================================
   Global — anchor offset & scroll stability
========================================================= */
html{
    scroll-behavior:smooth;
    scrollbar-gutter:stable;
}

.elementor-menu-anchor{
    scroll-margin-top:120px;
}
/* =========================================================
   Live Preview: prevent overlap when no image (mobile)
========================================================= */
@media (max-width: 767px) {

  /* Ensure preview panel participates normally in flow */
  .ghs-preview-panel {
    position: relative;
    z-index: 1;
    margin-bottom: 24px; /* space before the form */
  }

  /* If your preview uses columns on desktop, stack on mobile */
  .ghs-event-preview {
    display: flex;
    flex-direction: column;
    gap: 16px; /* space between image and text */
  }

  /* Reserve a reliable image area height even when <img> is hidden */
  .ghs-ep-image {
    width: 100%;
    min-height: 200px;      /* adjust: 160–240 depending on taste */
    display: flex;
  }

  /* Make the fallback fill the reserved area */
  .ghs-preview-image-fallback {
    width: 100%;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* If an image exists, let it fill neatly */
  .ghs-ep-image img.ghs-preview-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }
}
/* =========================================================
   Elementor Nav Menu
   - Anchor submenu links (e.g. /about/#section) are incorrectly marked "active"
   - Remove their active/current styling so only the parent page looks active
   - Keep normal hover styling on those anchor submenu links
========================================================= */

/* 1) Neutralise "active/current" styling for anchor submenu links */
.elementor-nav-menu .sub-menu a.elementor-item-anchor.elementor-item-active,
.elementor-nav-menu .sub-menu a.elementor-item-anchor[aria-current="location"] {
  color: inherit !important;
  background: transparent !important;
  text-decoration: none !important;
  border-bottom: 0 !important;
}

/* 2) Restore hover styling for those same anchor submenu links */
.elementor-nav-menu .sub-menu a.elementor-item-anchor.elementor-item-active:hover,
.elementor-nav-menu .sub-menu a.elementor-item-anchor[aria-current="location"]:hover {
  background-color: #F0F4F8 !important;
  color: inherit !important;
}





/* =========================================================
   Quick Links — WordPress Menu widget (Elementor Pro 3.34.2)
   Sidebar accordion behaviour (submenu opens UNDER parent)
   Target: .ghs-quick-links
========================================================= */

/* 0) Hide the burger toggle + dropdown duplicate menu */
.ghs-quick-links .elementor-menu-toggle{
    display:none !important;
}
.ghs-quick-links nav.elementor-nav-menu--dropdown{
    display:none !important;
}

/* 1) Keep submenus in normal flow (accordion style) */
.ghs-quick-links .elementor-nav-menu--layout-vertical .sub-menu{
    position:static !important;
    left:auto !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    transform:none !important;

    width:100% !important;
    display:none;
    margin:6px 0 0 0;
    padding-left:14px;
    border-left:2px solid rgba(2,110,159,0.20);
}

/* Prevent flyout positioning quirks */
.ghs-quick-links .elementor-nav-menu--layout-vertical li{
    position:static !important;
}

/* 2) OPEN state (SmartMenus) */
.ghs-quick-links .elementor-nav-menu--layout-vertical li.sm-open > .sub-menu{
    display:block !important;
}

/* 3) Keep arrow on same line as text */
.ghs-quick-links .elementor-nav-menu--layout-vertical a.has-submenu{
    display:inline-flex !important;
    align-items:center;
    gap:6px;
}
.ghs-quick-links .elementor-nav-menu--layout-vertical a.has-submenu .sub-arrow{
    display:inline-flex;
    align-items:center;
    margin-left:4px;
}

/* Hover background (frontend + preview) */
.ghs-quick-links .elementor-nav-menu--layout-vertical > ul > li > a.elementor-item:hover{
    background:#F0F4F8;
}

/* =========================================================
   Elementor Editor ONLY — Quick Links display fixes
========================================================= */
.elementor-editor-active .ghs-quick-links .elementor-nav-menu--layout-vertical .sub-menu{
    position:static !important;
    transform:none !important;
    width:100% !important;
}

/* In editor, SmartMenus often uses .highlighted */
.elementor-editor-active .ghs-quick-links
.elementor-nav-menu--layout-vertical a.has-submenu.highlighted + .sub-menu{
    display:block !important;
}

/* Editor hover background */
.elementor-editor-active .ghs-quick-links
.elementor-nav-menu--layout-vertical > ul > li > a.elementor-item:hover,
.elementor-editor-active .ghs-quick-links
.elementor-nav-menu--layout-vertical .sub-menu > li > a.elementor-sub-item:hover{
    background:#F0F4F8 !important;
}

/* =========================================================
   Quick Links — rotate caret icon when open (robust)
========================================================= */
.ghs-quick-links .sub-arrow svg{
    transition:transform 0.25s ease;
    transform:rotate(0deg);
}

.ghs-quick-links a.has-submenu[aria-expanded="true"] .sub-arrow svg,
.ghs-quick-links a.has-submenu.highlighted .sub-arrow svg,
.ghs-quick-links li.sm-open > a.has-submenu .sub-arrow svg{
    transform:rotate(180deg);
}
/* =========================================================
   Copied from old Loop Grid template styles (for shortcode compatibility)
   Targets the mimicked classes we added above
========================================================= */
.elementor-1440 .elementor-element.elementor-element-7b18f20 {
    --display: flex;
    --min-height: 0px;
    --gap: 0px 0px;
    --row-gap: 0px;
    --column-gap: 0px;
    --border-radius: 0px 0px 0px 0px;
    --margin-top: 5px;
    --margin-bottom: 5px;
    --margin-left: 0px;
    --margin-right: 0px;
    --padding-top: 0px;
    --padding-bottom: 0px;
    --padding-left: 0px;
    --padding-right: 0px;
}

.elementor-1440 .elementor-element.elementor-element-c4b08b3 .event-card {
    background-color: var(--e-global-color-1f5fe5c);
    row-gap: 0px;
    border-style: solid;
    border-width: 0px 0px 0px 0px;
    border-radius: 8px 8px 8px 8px;
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);
    padding: 8px 8px 8px 8px;
}

.elementor-1440 .elementor-element.elementor-element-c4b08b3 > .elementor-widget-container {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}

.elementor-1440 .elementor-element.elementor-element-c4b08b3 .event-thumb-wrap {
    border-radius: 0px 0px 0px 0px;
}

.elementor-1440 .elementor-element.elementor-element-c4b08b3 .event-left {
    margin: 0;
}

.elementor-1440 .elementor-element.elementor-element-c4b08b3 .event-datetime {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0px;
}

.elementor-1440 .elementor-element.elementor-element-c4b08b3 .event-date {
    color: var(--e-global-color-secondary);
    font-size: 14px;
    font-weight: 600;
    margin: 0px 0px 0px -10px;
}

.elementor-1440 .elementor-element.elementor-element-c4b08b3 .event-time {
    color: var(--e-global-color-secondary);
    font-size: 14px;
    font-weight: 600;
    margin: 0px 0px 0px -10px;
}

.elementor-1440 .elementor-element.elementor-element-c4b08b3 .event-title a {
    color: var(--e-global-color-primary);
}

.elementor-1440 .elementor-element.elementor-element-c4b08b3 .event-title a:hover {
    color: var(--e-global-color-accent);
}

.elementor-1440 .elementor-element.elementor-element-c4b08b3 .event-title,
.elementor-1440 .elementor-element.elementor-element-c4b08b3 .event-title a {
    font-size: 14px;
    font-weight: 500;
}

.elementor-1440 .elementor-element.elementor-element-c4b08b3 .event-title {
    margin: 0px 0px 0px -10px;
}

.elementor-1440 .elementor-element.elementor-element-c4b08b3 .event-location {
    color: var(--e-global-color-secondary);
    font-weight: 500;
    font-style: italic;
    margin: 0px 0px 0px 5px;
}

/* Mobile adjustments from old template */
@media (max-width: 767px) {
    .elementor-1440 .elementor-element.elementor-element-c4b08b3 .event-card {
        padding: 10px 10px 10px 10px;
    }
    .elementor-1440 .elementor-element.elementor-element-c4b08b3 .event-left {
        width: 160px;
        height: 160px;
        margin: 0 auto;
    }
    .elementor-1440 .elementor-element.elementor-element-c4b08b3 .event-thumb-wrap {
        width: 160px;
        height: 160px;
    }
    .elementor-1440 .elementor-element.elementor-element-c4b08b3 .event-date {
        margin: 5px 0px 0px 5px;
    }
    .elementor-1440 .elementor-element.elementor-element-c4b08b3 .event-time {
        margin: 0px 0px 0px 0px;
    }
    .elementor-1440 .elementor-element.elementor-element-c4b08b3 .event-title {
        margin: 0px 0px 0px 0px;
    }
    .elementor-1440 .elementor-element.elementor-element-c4b08b3 .event-location {
        margin: 5px 0px 0px 0px;
    }
}