/* Add your custom css in this file */

/* Logo Image Styling - DEFAULT FOR MOBILE */
.ink-of-ikaa-title .logo-image {
    display: block;
    max-width: 250px;
    height: auto;
    margin: 0 auto;
}

/* STRICT BINARY SWITCH - Desktop View (992px and above) */
@media (min-width: 992px) {
    /* Force-hide mobile header elements completely */
    .mobile-tablet-header,
    .mobile-logo-image,
    .mobile-title {
        display: none !important;
    }
    
    /* Ensure desktop branding is visible */
    .branding-center {
        width: auto !important;
        flex: 1;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        min-width: 0;
        visibility: visible !important;
    }
    
    /* Ensure desktop header is visible */
    .desktop-header {
        display: block !important;
        visibility: visible !important;
    }

    .ink-of-ikaa-title {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* Desktop logo sizing - LARGER */
    .branding-center .ink-of-ikaa-title .logo-image {
        width: 260px !important;
        max-width: 260px !important;
        height: auto !important;
        margin-bottom: 8px !important;
    }

    /* Center the ink-of-ikaa-title container for proper underline positioning */
    .branding-center .ink-of-ikaa-title {
        position: relative !important;
        padding-bottom: 12px !important;
    }
    
    /* Desktop underline - using ::after pseudo-element to create underline below logo */
    .branding-center .ink-of-ikaa-title::after {
        content: '' !important;
        display: block !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 100% !important;
        max-width: 300px !important;
        height: 3px !important;
        background-color: #ac924e !important;
        z-index: 1 !important;
    }
    
    /* Also handle if title-underline element exists */
    .branding-center .ink-of-ikaa-title .logo-image + .title-underline,
    .branding-center .ink-of-ikaa-title .title-underline {
        display: block !important;
        visibility: visible !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 100% !important;
        max-width: 300px !important;
        height: 3px !important;
        background-color: #ac924e !important;
        margin: 0 auto !important;
        z-index: 1 !important;
    }
    
    /* Ensure desktop navigation menu remains visible */
    .header-left,
    #site-navigation,
    #masthead {
        display: block !important;
        visibility: visible !important;
    }
}

/* Mobile logo sizing - only for mobile/tablet devices */
@media (max-width: 991px) {
    .mobile-ink-title .logo-image,
    .mobile-logo-image {
        max-width: 220px;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        height: auto !important;
        margin: 0 auto !important;
    }
    
    .mobile-title {
        text-align: center !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .mobile-title .ink-of-ikaa-title {
        display: inline-block !important;
        width: auto !important;
        position: relative !important;
    }
    
    /* Ensure underline is visible on mobile/tablet - matches desktop appearance */
    .mobile-ink-title .title-underline,
    .mobile-ink-title .logo-image + .title-underline {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        margin-left: 0 !important;
        bottom: -5px !important;
        height: 2px !important;
        background-color: #ac924e !important;
        z-index: 1 !important;
    }
    
    /* Ensure the container has proper positioning for absolute underline */
    .mobile-ink-title {
        position: relative !important;
        display: inline-block !important;
        width: auto !important;
    }
    
    /* Make sure underline width matches logo image width exactly */
    .mobile-ink-title .logo-image + .title-underline {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* STRICT BINARY SWITCH - Mobile/Tablet View (991px and below) */
@media (max-width: 991px) {
    /* Force-hide desktop branding and header completely */
    .branding-center,
    .desktop-header,
    .branding-center .title-underline {
        display: none !important;
    }
    
    /* Ensure mobile header structure is visible */
    .mobile-tablet-header {
        display: block !important;
        visibility: visible !important;
    }
    
    .mobile-logo-image,
    .mobile-title {
        display: block !important;
        visibility: visible !important;
    }
}

/* Larger desktop screens */
@media (min-width: 992px) {
    .branding-center .ink-of-ikaa-title .logo-image {
        max-width: 250px;
    }
}

@media (min-width: 1200px) {
    .branding-center .ink-of-ikaa-title .logo-image {
        max-width: 280px;
    }
}

/* Underline adjustments for logo image - spans full width of logo */
.ink-of-ikaa-title .logo-image + .title-underline {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    background-color: #ac924e !important;
    position: absolute !important;
    display: block !important;
}

/* Ensure underline color is consistent across all devices */
.title-underline {
    background-color: #ac924e !important;
}

.branding-center .title-underline {
    background-color: #ac924e !important;
}

.mobile-ink-title .title-underline {
    background-color: #ac924e !important;
}

/* Author name formatting - override uppercase to proper case */
.entry-meta-item.author,
.entry-meta-item.author a,
.entry-meta .author,
.entry-meta .author a,
.top-post-meta-item.author,
.top-post-meta-item.author a,
.top-post-entry-meta .author,
.top-post-entry-meta .author a,
.top-posts-carousel .top-post-meta-item.author,
.top-posts-carousel .top-post-meta-item.author a,
.top-posts-carousel .top-post-entry-meta .author,
.top-posts-carousel .top-post-entry-meta .author a {
    text-transform: none !important;
}

/* Format author name to proper case (first letter capitalized only) */
.entry-meta-item.author a,
.entry-meta .author a,
.top-post-meta-item.author a,
.top-post-entry-meta .author a,
.top-posts-carousel .top-post-meta-item.author a,
.top-posts-carousel .top-post-entry-meta .author a {
    text-transform: capitalize !important;
}

/* Hide author profile avatar on phone and tablet - show only on desktop */
@media (max-width: 991px) {
    .widget_inspiry_author_profile .avatar {
        display: none !important;
    }
}

/* Hide about-author image on phone and tablet - show only on desktop */
@media (max-width: 991px) {
    .about-author .image-thumb {
        display: none !important;
    }
}