/**
* Frontend styles for AI Dynamic Navigation
*/

.aidn-nav {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
padding: 1rem;
margin: 1.5rem 0;
border-top: 1px solid var(--aidn-border, #ccc);
border-bottom: 1px solid var(--aidn-border, #ccc);
}

/* Base button styles */
/* body .aidn-nav .aidn-btn,
body .aidn-nav a.aidn-btn {
    background: var(--aidn-bg) !important;
    color: var(--aidn-color) !important;
    padding: var(--aidn-pad-y) var(--aidn-pad-x);
    border-radius: var(--aidn-radius);
    font-size: var(--aidn-fs);
    text-decoration: none;
    display: inline-block;
    transition: background 0.25s ease, color 0.25s ease;
}

    body .aidn-nav .aidn-btn:hover,
    body .aidn-nav a.aidn-btn:hover {
        background: var(--aidn-hover) !important;
        color: var(--aidn-color) !important;
    }
*/
/* coreect one */
body .aidn-nav a.aidn-btn,
body .aidn-nav .aidn-btn {
    display: inline-block;
    padding: 0.6em 1.2em;
    font-size: 1rem;
    border-radius: 8px;
    text-decoration: none;
    background: var(--aidn-bg, #e5331f) !important;
    color: var(--aidn-color, #ffffff) !important;
    transition: background 0.25s ease, color 0.25s ease, opacity 0.25s ease;
} 

    body .aidn-nav a.aidn-btn:hover,
    body .aidn-nav .aidn-btn:hover {
        background: var(--aidn-hover, #f33535) !important;
        color: var(--aidn-color, #ffffff) !important;
    }
 
    body .aidn-nav .aidn-btn.disabled,
    body .aidn-nav .aidn-btn[aria-disabled="true"] {
        background: #777 !important;
        color: #eee !important;
        opacity: 0.6;
        pointer-events: none;
    }

    .aidn-nav .aidn-btn.active {
        background: var(--aidn-active, #444) !important;
        opacity: 0.9;
        cursor: default;
    }


    /* Contextual colors */
    .aidn-nav .aidn-btn.prev {
        background: var(--aidn-prev, #888) !important;
    }
/* 
    .aidn-nav .aidn-btn.next {
        background: var(--aidn-next, #2563eb) !important;
    }
*/
    .aidn-nav .aidn-btn.pillar {
        background: var(--aidn-pillar, #222) !important;
    }
 
    body .aidn-nav .aidn-btn.pillar {
        background: var(--aidn-bg) !important;
        color: var(--aidn-color) !important;
    }

.aidn-btn .dashicons {
    font-size: 18px;
    line-height: 1;
    vertical-align: middle;
    margin-right: 6px;
}

/* Dark / light mode support */
@media (prefers-color-scheme: dark) {
    : root {
        --aidn-bg: #444;
        --aidn-color: #fff;
        --aidn-hover: #666;
        --aidn-border: #555;
    }
}

@media (prefers-color-scheme: light) {
    :root {
        --aidn-bg: #0073aa;
        --aidn-color: #fff;
        --aidn-hover: #005177;
        --aidn-border: #ccc;
    }
}

/* Responsive */
@media (max-width: 600px) {
    .aidn-btn {
        flex: 1 1 100%;
        text-align: center;
    }
}