/*
Theme Name: Kiddin Child
Template: kiddin
Theme URI: https://1.envato.market/kiddin-wp
Description: Kiddin Child Theme
Author: AwaikenThemes
Author URI: https://awaikenthemes.com/
Version: 1.0.0
Text Domain: kiddin-child
*/

/* ==========================================================
   ROCKETMIND – CHILD THEME STYLES
   ==========================================================

   01. Design-Variablen
   02. SVG-Icons
   03. Blog & Beiträge
   04. Animierter Cursor
   05. Video-Elemente
   06. Parallax-Effekte
   07. Logo- & Bilder-Slider
   08. Breadcrumbs
   09. Logo

   ========================================================== */


/* ==========================================================
   01. DESIGN-VARIABLEN
   ========================================================== */

:root {
    --rm-primary: #402581;
    --rm-secondary: #FFA428;
}


/* ==========================================================
   02. SVG-ICONS
   ========================================================== */

/* Icon-Listen: Hintergrund des Check-Icons */
.elementor-icon-list-icon svg path:first-child,

/* FAQ-Accordion: Icon-Hintergrund */
.faq-accordion .elementskit-card .ekit-accordion--toggler .ekit_accordion_icon_group .ekit_accordion_normal_icon circle {
    fill: var(--rm-primary) !important;
}

/* FAQ-Accordion: ACTIVE Icon-Hintergrund */
.faq-accordion .elementskit-card .ekit-accordion--toggler .ekit_accordion_icon_group .ekit_accordion_active_icon circle {
    fill: var(--rm-secondary) !important;
}


/* ==========================================================
   03. BLOG & BEITRÄGE
   ========================================================== */

/* Einheitliche Höhe der Beitragstitel */
.post-item-body .post-item-content h2,
.our-blog .entry-title {
    height: 56px;
}


/* ==========================================================
   04. ANIMIERTER CURSOR
   ========================================================== */

/* Standard-Cursor-Ball zurücksetzen */
#ball {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
}

/* Eigenes SVG als Cursor-Symbol */
#ball::before {
    content: "";
    position: absolute;

    top: 50%;
    left: 50%;

    width: 20px;
    height: 20px;

    transform: translate(-50%, -50%) scale(1);

    background-image: url('/wp-content/uploads/2026/10/cursor-icon.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    pointer-events: none;

    transition: transform 0.2s ease;
}

/* Cursor-Symbol bei bestimmten Hover-Elementen ausblenden */
body:has(.magic-cursor-hide:hover) #ball::before {
    transform: translate(-50%, -50%) scale(0);
}


/* ==========================================================
   05. VIDEO-ELEMENTE
   ========================================================== */

/* Rotierender Play-Button */
.play-video-circle {
    animation: infiniterotate 20s linear infinite;
}

/* Rotation beim Hover stoppen */
.play-video-circle:hover {
    animation: none !important;
    transform: rotate(0deg) !important;
    transition: none !important;
}

/* Rotationsanimation */
@keyframes infiniterotate {
    100% {
        transform: rotate(360deg);
    }
}

/* Video-Popup-Button zentrieren */
.video-content .ekit-video-popup-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* Icon innerhalb des Buttons ausrichten */
.video-content .ekit-video-popup-btn i {
    position: static !important;
    display: block;

    line-height: 1;
    margin-left: 5px;

    transform-origin: center center !important;
    transition: none !important;
}


/* ==========================================================
   06. PARALLAX-EFFEKTE
   ========================================================== */

/* Abgerundete Jarallax-Container */
.jarallax-round-20 {
    border-radius: 20px !important;
    overflow: hidden !important;
}

/* Jarallax-Layer inklusive Clip-Path abrunden */
.jarallax-round-20>.jarallax-container {
    border-radius: 20px !important;
    overflow: hidden !important;

    clip-path: inset(0 round 20px) !important;
}

/* Innere Jarallax-Elemente abrunden */
.jarallax-round-20>.jarallax-container>div {
    border-radius: 20px !important;
}


/* ==========================================================
   07. LOGO- & BILDER-SLIDER
   ========================================================== */

/* Einheitliche Ausrichtung der Logos */
.company-supports-slider .swiper-slide-inner .content-image {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 60px;
}

/* Feste Breite für Slider-Elemente */
.company-supports-slider .elementskit-client-slider-item {
    width: 225px !important;
}

/* Logos proportional skalieren */
.company-supports-slider .swiper-slide-inner .content-image img {
    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 60px;

    object-fit: contain;
}


/* ==========================================================
   08. BREADCRUMBS
   ========================================================== */

/* Breadcrumbs auf ausgewählten Seiten ausblenden */
body.page-id-10045 .breadcrumb-trail.breadcrumbs,
body.page-id-9802 .breadcrumb-trail.breadcrumbs,
body.blog .breadcrumb-trail.breadcrumbs,
body.page-id-10034 .breadcrumb-trail.breadcrumbs {
    display: none !important;
}


/* ==========================================================
   09. LOGO
   ========================================================== */

/* SVG-Logo auf volle Containerbreite setzen */
#logo-svg {
    width: 100%;
}