/**
 * Theme Name: Rey Child
 * Theme URI: http://reytheme.com/
 * Description: This is a child theme of Rey.
 * Author: Marius H.
 * Author URI:  https://twitter.com/mariushoria
 * Template: rey
 * Version: 1.0.0
 * License: General Public License
 * License URI: http://www.gnu.org/licenses/gpl.html
 * Text Domain: rey-child
 */


/**
 * Isotopon – Rey desktop menu + compact submenu pills
 *
 * Τι κάνει:
 * - Main menu σε μικρά pill buttons
 * - Submenu items στο ίδιο μέγεθος/ύφος με το main menu
 * - Όχι full-width submenu buttons
 * - Καθαρό compact dropdown
 * - Desktop only
 */

/* =========================
   Main menu spacing
   ========================= */

.isotopon-menu .rey-mainNavigation--desktop .rey-mainMenu--desktop {
    gap: 4px;
}

/* =========================
   Main menu items
   ========================= */

.isotopon-menu .rey-mainNavigation--desktop .rey-mainMenu--desktop > li {
    padding: 0 !important;
    margin: 0 !important;
}

/* =========================
   Main menu links
   ========================= */

.isotopon-menu .rey-mainNavigation--desktop .rey-mainMenu--desktop > li > a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 4px;

    min-height: 22px;
    padding: 0 12px !important;

    font-size: inherit;
    font-weight: inherit;
    line-height: 1;
    text-decoration: none !important;
    white-space: nowrap;

    color: #8300ff !important;
    background: transparent !important;
    border: 1px solid #8300ff !important;
    border-radius: 999px !important;
    box-shadow: none !important;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}

.isotopon-menu .rey-mainNavigation--desktop .rey-mainMenu--desktop > li > a > span {
    color: inherit !important;
    transition: none !important;
}

/* =========================
   Submenu indicator
   ========================= */

.isotopon-menu .rey-mainNavigation--desktop .rey-mainMenu--desktop > li > a i,
.isotopon-menu .rey-mainNavigation--desktop .rey-mainMenu--desktop > li > a svg,
.isotopon-menu .rey-mainNavigation--desktop .rey-mainMenu--desktop > li > a:after {
    color: inherit !important;
    fill: currentColor !important;
    stroke: currentColor !important;
    border-color: currentColor !important;
}

/* =========================
   Main hover / active
   ========================= */

.isotopon-menu .rey-mainNavigation--desktop .rey-mainMenu--desktop > li > a:hover,
.isotopon-menu .rey-mainNavigation--desktop .rey-mainMenu--desktop > li.current-menu-item > a,
.isotopon-menu .rey-mainNavigation--desktop .rey-mainMenu--desktop > li.current_page_item > a,
.isotopon-menu .rey-mainNavigation--desktop .rey-mainMenu--desktop > li.current-menu-parent > a,
.isotopon-menu .rey-mainNavigation--desktop .rey-mainMenu--desktop > li.current-page-ancestor > a {
    background: #8300ff !important;
    color: #ffffff !important;
    border-color: #8300ff !important;
}

.isotopon-menu .rey-mainNavigation--desktop .rey-mainMenu--desktop > li > a:hover > span,
.isotopon-menu .rey-mainNavigation--desktop .rey-mainMenu--desktop > li.current-menu-item > a > span,
.isotopon-menu .rey-mainNavigation--desktop .rey-mainMenu--desktop > li.current_page_item > a > span,
.isotopon-menu .rey-mainNavigation--desktop .rey-mainMenu--desktop > li.current-menu-parent > a > span,
.isotopon-menu .rey-mainNavigation--desktop .rey-mainMenu--desktop > li.current-page-ancestor > a > span {
    color: #ffffff !important;
}

/* =========================
   Submenu container
   ========================= */

.isotopon-menu .rey-mainNavigation--desktop .rey-mainMenu--desktop > li > .sub-menu {
    display: block !important;

    width: max-content !important;
    min-width: unset !important;
    max-width: unset !important;

    padding: 3px 15px 15px 15px !important;
    margin: 6px 0 0 0 !important;

    background: #ffffff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    text-align: left !important;
}

/* =========================
   Submenu items
   ========================= */

.isotopon-menu .rey-mainNavigation--desktop .rey-mainMenu--desktop > li > .sub-menu > li {
    display: block !important;

    width: max-content !important;
    min-width: unset !important;
    max-width: unset !important;

    padding: 0 !important;
    margin: 0 0 4px 0 !important;

    text-align: left !important;
}

.isotopon-menu .rey-mainNavigation--desktop .rey-mainMenu--desktop > li > .sub-menu > li:last-child {
    margin-bottom: 0 !important;
}

/* =========================
   Submenu links
   ========================= */

.isotopon-menu .rey-mainNavigation--desktop .rey-mainMenu--desktop > li > .sub-menu > li > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: unset !important;
    max-width: unset !important;

    min-height: 22px !important;
    height: 22px !important;
    padding: 0 12px !important;
    margin: 0 !important;

    box-sizing: border-box !important;

    line-height: 1 !important;

    color: #8300ff !important;
    background: transparent !important;
    border: 1px solid #8300ff !important;
    border-radius: 999px !important;
    box-shadow: none !important;

    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}

/* =========================
   Submenu text
   ========================= */

.isotopon-menu .rey-mainNavigation--desktop .rey-mainMenu--desktop > li > .sub-menu > li > a > span {
    display: inline !important;

    width: auto !important;
    min-width: unset !important;
    max-width: unset !important;

    padding: 0 !important;
    margin: 0 !important;

    color: inherit !important;
    line-height: 1 !important;
}

/* =========================
   Submenu hover / active
   ========================= */

.isotopon-menu .rey-mainNavigation--desktop .rey-mainMenu--desktop > li > .sub-menu > li > a:hover,
.isotopon-menu .rey-mainNavigation--desktop .rey-mainMenu--desktop > li > .sub-menu > li.current-menu-item > a,
.isotopon-menu .rey-mainNavigation--desktop .rey-mainMenu--desktop > li > .sub-menu > li.current_page_item > a {
    color: #ffffff !important;
    background: #8300ff !important;
    border-color: #8300ff !important;
}

.isotopon-menu .rey-mainNavigation--desktop .rey-mainMenu--desktop > li > .sub-menu > li > a:hover > span,
.isotopon-menu .rey-mainNavigation--desktop .rey-mainMenu--desktop > li > .sub-menu > li.current-menu-item > a > span,
.isotopon-menu .rey-mainNavigation--desktop .rey-mainMenu--desktop > li > .sub-menu > li.current_page_item > a > span {
    color: #ffffff !important;
}





/* =========================
   ZONE ARROW HOVER (MOVE + SCALE)
   ========================= */

@media (min-width: 1025px) {

    .zone-column {
        position: relative;
    }

    .zone-arrow {
        display: inline-block;
        transform: translateX(0) scale(1);
        transform-origin: center;
        transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
        will-change: transform;
    }

    .zone-column:hover .zone-arrow {
        transform: translateX(12px) scale(0.9);
    }

}


/**
 * BOTTOM SECTION – title block only (REVERSE VERSION)
 */
.isotopon-hero-title-section-reverse {
    position: relative;
    z-index: 5;
    margin-top: -105px;
    background: transparent !important;
    overflow: hidden !important;
}

.isotopon-hero-title-section-reverse .elementor-container {
    position: relative;
    z-index: 5;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ο τίτλος (η κορδέλα) */
.isotopon-page-title-reverse {
    position: absolute;
    left: 50.5%;
    top: 50%;
    z-index: 6;
    margin: 0;
    max-width: none;
    width: 110%;
    
    /* ΕΔΩ γίνεται η αλλαγή */
    transform: translate(-50%, -50%) rotate(-2.6deg);
    transform-origin: center center;
}
@media (max-width: 1025px) {
	.isotopon-page-title-reverse {
    left: 49%;
}
}

.isotopon-page-title-reverse .elementor-widget-container {
    width: 100%;
    margin: 0;
    box-sizing: border-box;
}

.isotopon-page-title-reverse .elementor-heading-title {
    margin: 0;
    text-align: center;
    line-height: 1.1;
}





/**
 * Isotopon – Rey desktop parent menu stagger animation
 *
 * Τι κάνει:
 * - Επηρεάζει μόνο το desktop Rey menu
 * - Κάνει τα parent menu items να εμφανίζονται με ελαφριά κίνηση προς τα πάνω
 * - Δίνει μικρή καθυστέρηση σε κάθε item ξεχωριστά
 * - Δεν πειράζει font-size
 * - Δεν επηρεάζει τα submenus
 */

@media (min-width: 1025px) {

    #site-navigation-2e4c6cd > ul > li.depth--0 {
        opacity: 0;
        transform: translateY(12px);
        animation-name: isotoponMenuParentUp;
        animation-duration: 0.55s;
        animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
        animation-fill-mode: forwards;
        will-change: opacity, transform;
    }

    #site-navigation-2e4c6cd > ul > li.depth--0:nth-child(1) {
        animation-delay: 0.05s;
    }

    #site-navigation-2e4c6cd > ul > li.depth--0:nth-child(2) {
        animation-delay: 0.12s;
    }

    #site-navigation-2e4c6cd > ul > li.depth--0:nth-child(3) {
        animation-delay: 0.19s;
    }

    #site-navigation-2e4c6cd > ul > li.depth--0:nth-child(4) {
        animation-delay: 0.26s;
    }

    #site-navigation-2e4c6cd > ul > li.depth--0:nth-child(5) {
        animation-delay: 0.33s;
    }

    #site-navigation-2e4c6cd > ul > li.depth--0:nth-child(6) {
        animation-delay: 0.40s;
    }

    #site-navigation-2e4c6cd > ul > li.depth--0:nth-child(7) {
        animation-delay: 0.47s;
    }

    #site-navigation-2e4c6cd > ul > li.depth--0:nth-child(8) {
        animation-delay: 0.54s;
    }

    @keyframes isotoponMenuParentUp {
        from {
            opacity: 0;
            transform: translateY(12px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

}













/* =========================
   ISOTOPON ACCORDION FULL CSS
   ========================= */

/* =========================
   ISOTOPON ACCORDION BASE
   ========================= */
.isotopon-accordion {
  width: 100%;
}
.isotopon-accordion-item {
  background: var(--accordion-color);
  border-radius: 20px;
  margin-bottom: 16px;
  overflow: hidden;
  padding: 16px;
}
.isotopon-accordion-trigger {
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
}
.isotopon-accordion-text {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}
.isotopon-accordion-title {
  margin: 0 0 8px 0;
  color: #ffffff;
  font-size: 14px !important;
  line-height: 1.3;
  font-weight: 500;
}
.isotopon-accordion-content {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
}
.isotopon-accordion-content-inner {
  padding: 10px 0 0 0;
}
.isotopon-accordion-content-inner p {
  margin: 0 0 10px 0;
  color: #ffffff;
  font-size: 12px !important;
  line-height: 1.5;
}
.isotopon-accordion-content-inner p:last-child {
  margin-bottom: 0;
}
.isotopon-accordion-preview {
  position: relative;
  max-height: 1.5em;
  overflow: hidden;
  margin: 4px 0 0;
  font-size: 12px;
  color: #fff;
  line-height: 1.5;
}
.isotopon-accordion-preview::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(to right, transparent, var(--accordion-color));
}
.isotopon-accordion-item.is-open .isotopon-accordion-preview {
  display: none;
}
.isotopon-accordion-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  background: url("https://remote.esotopon.com/wp-content/uploads/2026/04/arrow-down.svg") center no-repeat;
  background-size: 22px;
  transition: transform 0.3s ease;
}
.isotopon-accordion-item.is-open .isotopon-accordion-icon {
  transform: rotate(180deg);
}

@media (min-width: 768px) {
  .isotopon-accordion-item { padding: 18px; }
  .isotopon-accordion-trigger { gap: 20px; }
  .isotopon-accordion-icon { width: 50px; height: 50px; flex: 0 0 50px; background-size: 24px; }
}
@media (min-width: 1024px) {
  .isotopon-accordion-item { padding: 20px; }
  .isotopon-accordion-trigger { gap: 24px; }
  .isotopon-accordion-content-inner { padding-top: 14px; }
  .isotopon-accordion-icon { width: 60px; height: 60px; flex: 0 0 60px; background-size: 26px; }
}
@media (min-width: 1440px) {
  .isotopon-accordion-item { padding: 22px; }
}

/* =========================
   ACCORDION ΧΡΩΜΑΤΑ ΑΝΑ ΣΕΛΙΔΑ
   ========================= */
.accordion-orange-zone  { --accordion-color: #ff7600; }
.accordion-red-bikes    { --accordion-color: #ff120d; }
.accordion-red-rollers  { --accordion-color: #c41a1a; }
.accordion-clay-zone    { --accordion-color: #A82900; }
.accordion-green-zone   { --accordion-color: #00BC0C; }
.accordion-parties      { --accordion-color: #B043FF; }
.accordion-summer-camps { --accordion-color: #B043FF; }
.accordion-schools { --accordion-color: #B043FF; }
.accordion-blue-zone { --accordion-color: #006EFF; }