/*
Theme Name: Dev Notes
Author: Moondog Development, LLC
Version: 1.0.0
Description: A clean, modern Full Site Editing block theme baseline.
Text Domain: dev-notes
*/

/* ==========================================================================
   Category Navigation Pills (Dynamic Variables)
   ========================================================================== */

/* 1. Target the exact HTML wrapper you found */
ul.wp-block-categories-list.is-style-pill-links {
    list-style-type: none !important;
    padding-left: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 0;
}

/* 2. Target the individual inner category items */
ul.wp-block-categories-list.is-style-pill-links li {
    margin: 0 !important;
    padding: 0 !important;
    list-style-image: none !important; /* Forces editor bullet icons to vanish */
}

/* 3. Style the interactive links into perfect pill shapes */
ul.wp-block-categories-list.is-style-pill-links li a {
    display: inline-block;
    border: 1px solid var(--wp--preset--color--primary);
    color: var(--wp--preset--color--primary);
    background-color: var(--wp--preset--color--background);
    border-radius: 9999px;
    padding: 0.35rem 1rem;
    text-decoration: none !important;
    font-size: var(--wp--preset--font-size--small);
    transition: all 0.2s ease-in-out;
}

/* 4. Interactive hover transition */
ul.wp-block-categories-list.is-style-pill-links li a:hover {
    background-color: var(--wp--preset--color--primary) !important;
    color: var(--wp--preset--color--background) !important;
    transform: translateY(-1px);
}

/* ==========================================================================
   Active / Current Category Pill Styles
   ========================================================================== */

/* 1. Force the active link item to stay filled with your primary color */
.is-style-pill-links li.current-cat a,
.is-style-pill-links li.current-cat a:link,
.is-style-pill-links li.current-cat a:visited {
    background-color: var(--wp--preset--color--primary) !important;
    color: var(--wp--preset--color--background) !important;
    border-color: var(--wp--preset--color--primary) !important;
    font-weight: 600;
    cursor: default;
}

/* 2. Soften the hover response on the already active item */
.is-style-pill-links li.current-cat a:hover {
    background-color: var(--wp--preset--color--primary) !important;
    color: var(--wp--preset--color--background) !important;
    transform: none !important;
}

/* ==========================================================================
   Quick Add Button Layout
   ========================================================================== */

/* Container Spacing */
.quick-add-wrapper {
    margin-top: 1.5rem;
    margin-bottom: 2rem;
}

/* Button Cosmetics matching your global variables */
.wp-block-button__link.quick-add-btn {
    background-color: var(--wp--preset--color-white) !important;
    color: var(--wp--preset--color--primary) !important;
    border: 1px solid var(--wp--preset--color--primary) !important;
    padding: 0.5rem 1.2rem !important;
    border-radius: 6px !important;
    font-size: var(--wp--preset--font-size--small) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-block;
    transition: all 0.2s ease-in-out;
}

.wp-block-button__link.quick-add-btn:hover {
    background-color: var(--wp--preset--color--primary) !important;
    color: var(--wp--preset--color-white) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}


/* Ensure block code blocks respect line breaks and scale safely */
.wp-block-code {
    white-space: pre-wrap !important;
    word-break: break-all !important;
    overflow-x: auto;
    display: block;
}

.wp-block-code code {
    font-family: var(--wp--preset--font-family--mono) !important;
    white-space: pre-wrap !important;
    line-height: 1.7 !important;
}

.wp-block-heading > a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--text);
	text-decoration: underline;
}