/*
 * AIVoogle AI Tools Directory v1.6
 *
 * The plugin owns only the directory layout and component alignment.
 * Foxiz remains responsible for the site's general typography and theme.
 */

/* Main directory */
.aivoogle-ai-tools-directory {
    display: block !important;
    width: 100% !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 32px 20px 60px !important;
    box-sizing: border-box !important;
    clear: both !important;
}

.aivoogle-ai-tools-directory *,
.aivoogle-ai-tools-directory *::before,
.aivoogle-ai-tools-directory *::after {
    box-sizing: border-box;
}

/* Header */
.aivoogle-ai-tools-header {
    display: block !important;
    width: 100% !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
    clear: both !important;
}

.aivoogle-ai-tools-header h1 {
    margin: 0 0 18px !important;
}

.aivoogle-ai-tools-header form {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.aivoogle-ai-tools-header input[type="search"] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
}

/*
 * Search button:
 * Use a clear AIVoogle blue so it is never rendered as Foxiz's white
 * default button. This remains readable in both Foxiz light and dark mode.
 */
.aivoogle-ai-tools-header button[type="submit"] {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 100px !important;
    margin: 0 !important;
    padding: 10px 18px !important;
    border: 1px solid #2563eb !important;
    border-radius: 6px !important;
    background: #2563eb !important;
    color: #ffffff !important;
    cursor: pointer !important;
    line-height: 1.4 !important;
    text-align: center !important;
}

.aivoogle-ai-tools-header button[type="submit"]:hover,
.aivoogle-ai-tools-header button[type="submit"]:focus {
    background: #1d4ed8 !important;
    color: #ffffff !important;
}

/* Category navigation */
.aivoogle-ai-tools-categories {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px 14px !important;
    width: 100% !important;
    margin: 0 0 28px !important;
    padding: 0 !important;
    clear: both !important;
}

.aivoogle-ai-tools-categories a {
    display: inline-block !important;
    float: none !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    text-decoration: none !important;
    line-height: 1.5 !important;
}

.aivoogle-ai-tools-categories a:hover {
    text-decoration: underline !important;
}

.aivoogle-ai-tools-categories a.is-active {
    font-weight: 600 !important;
}

/* Search status only appears when a search is active */
.aivoogle-ai-tools-search-status {
    margin: -12px 0 20px !important;
}

/*
 * Tool grid
 * !important is intentional here because Foxiz's archive/article rules can
 * otherwise turn CPT archive children into a one-column/float layout.
 */
.aivoogle-ai-tools-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    gap: 18px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    clear: both !important;
}

/* Reset common theme article/list behavior inside this grid */
.aivoogle-ai-tools-grid > .aivoogle-ai-tool-card {
    display: block !important;
    position: relative !important;
    float: none !important;
    clear: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Card link */
.aivoogle-ai-tool-card__link {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 18px !important;
    text-decoration: none !important;
}

/* Logo + tool name stay on one clean row */
.aivoogle-ai-tool-card__top {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.aivoogle-ai-tool-card__logo {
    display: flex !important;
    flex: 0 0 46px !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    overflow: hidden !important;
    border-radius: 9px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.aivoogle-ai-tool-card__logo img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    object-fit: cover !important;
    margin: 0 !important;
}

.aivoogle-ai-tool-card__logo-placeholder {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Prevent Foxiz archive heading rules from causing overlap */
.aivoogle-ai-tool-card__title {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-wrap: anywhere !important;
}

/* Description */
.aivoogle-ai-tool-card__excerpt {
    display: block !important;
    width: 100% !important;
    margin: 12px 0 10px !important;
    padding: 0 !important;
}

/* Pagination */
.aivoogle-ai-tools-directory > nav[aria-label="AI Tools pages"] {
    display: block !important;
    width: 100% !important;
    margin: 28px 0 0 !important;
    clear: both !important;
}

.aivoogle-ai-tools-directory > nav[aria-label="AI Tools pages"] ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Tablet */
@media (max-width: 1100px) {
    .aivoogle-ai-tools-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* Small tablet */
@media (max-width: 760px) {
    .aivoogle-ai-tools-directory {
        padding: 28px 16px 48px !important;
    }

    .aivoogle-ai-tools-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    .aivoogle-ai-tools-categories {
        gap: 5px 11px !important;
    }
}

/* Mobile */
@media (max-width: 520px) {
    .aivoogle-ai-tools-header form {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .aivoogle-ai-tools-header button[type="submit"] {
        width: 100% !important;
        min-width: 0 !important;
    }

    .aivoogle-ai-tools-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
}