/**
 * Components CSS
 * 
 * UI components and page element styles
 * 
 * @package Kindi
 * @since 1.0.0
 */

/* ============================================
   NAVIGATION
   ============================================ */

/* Always underline the current page link */
.wp-block-navigation-item.current-menu-item > a,
.wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
    text-decoration: underline !important;
}

/* Mobile navigation hierarchy styles */
@media screen and (max-width: 782px) {
    /* Remove all horizontal padding from mobile menu */
    .wp-block-navigation__responsive-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .wp-block-navigation__responsive-close {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .wp-block-navigation__responsive-dialog {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .wp-block-navigation__responsive-container-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Mobile menu container - left aligned */
    .wp-block-navigation__responsive-container .wp-block-navigation__container {
        text-align: left !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Remove padding from ul element */
    .wp-block-navigation__responsive-container ul.wp-block-navigation__container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        list-style: none !important;
    }
    
    /* Force left alignment on all menu items */
    .wp-block-navigation__responsive-container .wp-block-navigation-item {
        text-align: left !important;
        justify-content: flex-start !important;
        width: 100% !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
    
    /* Remove padding from home link */
    .wp-block-navigation__responsive-container .wp-block-home-link {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
    
    /* Root level menu items - larger font */
    .wp-block-navigation__responsive-container .wp-block-navigation-item > .wp-block-navigation-item__content {
        font-size: 18px !important;
        font-weight: 600 !important;
        padding: 4px 0 !important;
        padding-left: 0 !important;
        display: block !important;
        text-align: left !important;
        width: 100% !important;
    }
    
    /* Home link content */
    .wp-block-navigation__responsive-container .wp-block-home-link__content {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
    
    /* Mobile: Always underline current items */
    .wp-block-navigation__responsive-container .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
        text-decoration: underline !important;
    }
    
    /* Force left alignment on label spans */
    .wp-block-navigation__responsive-container .wp-block-navigation-item__label {
        text-align: left !important;
        display: inline-block !important;
    }
    
    /* Hide submenu toggle arrows - we'll show everything expanded */
    .wp-block-navigation__responsive-container .wp-block-navigation__submenu-icon {
        display: none !important;
    }
    
    /* Submenu containers - always visible, no special background */
    .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container {
        position: static !important;
        visibility: visible !important;
        opacity: 1 !important;
        display: block !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 8px 0 0 0 !important;
    }
    
    /* Level 1 children - smaller font with tab + dash */
    .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
        font-size: 15px !important;
        font-weight: 400 !important;
        padding: 4px 0 !important;
        color: #555 !important;
        position: relative !important;
        text-align: left !important;
        width: 100% !important;
        padding-left: 0 !important;
    }
    
    .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content::before {
        content: '\00a0\00a0\00a0\00a0–\00a0' !important;
        color: #999 !important;
        font-weight: 300 !important;
        text-decoration: none !important;
    }
    
    /* Prevent underline on ::before content */
    .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
        text-decoration-skip-ink: none !important;
    }
    
    .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content .wp-block-navigation-item__label {
        text-decoration: inherit !important;
    }
    
    /* Level 2 children - even smaller with double tab + middle dot */
    .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
        font-size: 14px !important;
        font-weight: 300 !important;
        padding: 3px 0 !important;
        color: #666 !important;
        text-align: left !important;
        width: 100% !important;
        padding-left: 0 !important;
    }
    
    .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content::before {
        content: '\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0–\00a0' !important;
        color: #999 !important;
        font-weight: 300 !important;
        text-decoration: none !important;
    }
    
    /* Level 3+ children - smallest with triple tab + small dot */
    .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
        padding: 3px 0 !important;
        padding-left: 0 !important;
        font-size: 13px !important;
    }
    
    .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content::before {
        content: '\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0–\00a0' !important;
        color: #999 !important;
        font-weight: 300 !important;
        text-decoration: none !important;
    }
}

/* ============================================
   FOCUS STATES
   ============================================ */

:where(.wp-site-blocks *:focus) {
    outline-width: 2px;
    outline-style: solid;
}

/* ============================================
   VIDEO STYLING
   ============================================ */

.rounded-video video {
    border-radius: 35px;
}

.rounded-video {
    overflow: hidden; /* keeps corners clean */
}

/* ============================================
   CIRCLE SECTIONS
   ============================================ */

.circle-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    position: relative;
}

.circle-section {
    border-radius: 50%;
    width: 550px;
    height: 550px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2em;
    position: relative;
    z-index: 1; /* so you can control which one is on top */
}

.circle-section:nth-child(1) {
    margin-right: -60px;
    z-index: 3;
    margin-top: -100px;
}

.circle-section:nth-child(2) {
    z-index: 2;
    margin-top: 250px;
}

.circle-section:nth-child(3) {
    margin-left: -60px;
    z-index: 1;
    margin-top: -250px;
}

/* ============================================
   BACKGROUND IMAGES
   ============================================ */

.add-background-images-home {
    background-image: 
        url('https://shopkindi.com/wp-content/uploads/2025/10/pumpkin-spice-rotated-1-768x1225.png'),
        url('https://shopkindi.com/wp-content/uploads/2025/10/lemon-drop-right-768x1219.png'),
        url('https://shopkindi.com/wp-content/uploads/2025/10/spicy-768x1409.png'),
        url('https://shopkindi.com/wp-content/uploads/2025/09/Stars.png'),
        url('https://shopkindi.com/wp-content/uploads/2025/09/Candle-tr-1.png'),
        url('https://shopkindi.com/wp-content/uploads/2025/10/pumpkin-rotated-1-768x783.png');
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: 
        left -110px top 20px,
        right -120px top 1000px,
        left -100px top 1500px,
        right -100px top 1800px,
        right -170px bottom 0px,
        left -100px bottom 0px;
    background-size: 300px auto, 300px auto, 300px auto, 300px auto, 300px auto, 300px auto;
}

.add-background-images {
    background-image: 
        url('https://shopkindi.com/wp-content/uploads/2025/10/pumpkin-spice-rotated-1-768x1225.png'),
        url('https://shopkindi.com/wp-content/uploads/2025/10/lemon-drop-right-768x1219.png');
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: 
        left -110px top 0px,
        right -120px bottom 30px;
    background-size: 300px auto, 300px auto;
}

/* ============================================
   PAGE DECORATIONS
   ============================================ */

.daily-reading-spark-section {
    position: relative;
    overflow: visible;
}

@media(min-width: 768px) {
    .daily-reading-spark-section::before {
        content: "";
        position: absolute;
        left: -400px;
        top: -200px;
        width: 1000px;
        height: auto;
        aspect-ratio: 1;
        background: url('https://shopkindi.com/wp-content/uploads/2025/10/vibes-1.png') no-repeat center/contain;
        z-index: -5;
        opacity: 1;
        transform: scale(1) rotate(0deg);
        pointer-events: none;
    }
}

.bottom-section {
    position: relative;
    overflow: visible;
}

.bottom-section::before {
    content: "";
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 1024px;
    height: 600px;
    background: url('https://shopkindi.com/wp-content/uploads/2025/09/Raffia.png') no-repeat center/contain;
    z-index: -5;
    opacity: 0.5;
    transform: scale(1) rotate(0deg);
    pointer-events: none;
}

/* ============================================
   HEADER SCROLL EFFECT
   ============================================ */

/* Initial state */
.header-scroll {
    transition: all 0.5s ease;
}

/* State when scrolled */
.header-scroll.scrolled {
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* ============================================
   BUTTON HOVER EFFECTS
   ============================================ */

/* Default button style */
kbutton,
button,
a.button,
.wp-block-button__link {
    background-color: #c3b08a; /* default color */
    color: #fff; /* text color */
    transition: all 0.2s ease-in-out; /* smooth short transition */
}

/* Hover effect */
kbutton:hover,
button:hover,
a.button:hover,
.wp-block-button__link:hover {
    background-color: #8a9676; /* hover color */
    color: #fff; /* text color stays white */
    transform: scale(1.05); /* slight zoom */
    box-shadow: 0 4px 8px rgba(0,0,0,0.15); /* subtle shadow */
}

/* ============================================
   LINK TYPOGRAPHY
   ============================================ */

/* Make links inside paragraphs match normal text size */
p a,
.entry-content a,
.wp-block-post-content a {
    font-size: inherit;
    line-height: inherit;
    text-decoration: underline; /* optional, keep link style */
}

/* Optional: make hover effect consistent and elegant */
p a:hover,
.entry-content a:hover,
.wp-block-post-content a:hover {
    color: #8a9676; /* your hover color */
    text-decoration: none; /* remove underline on hover */
}