/*
Theme Name: Dev Notes
Author: Moondog Development, LLC
Version: 1.0.1
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 */
p.wp-block-code-title {
	font-weight: bold;
	color: #000;
	font-size: 0.75em;
	background: #eee;
	display: inline-block;
	padding: 6px 10px;
	line-height: 1;
	border-radius: 0;
	margin-left: 5px !important;
	border: 1px solid #000;
	position: relative;
	z-index: 1;
}
.wp-block-code {
	margin: 0;
	border: 1px solid;
	padding: 20px;
	margin-top: -15px;
	background: #eee;
	position: relative;
	color: var(--wp--preset--color--text);
}

/* 1. Ensure the button container is the anchor point for our absolute tooltip */
.code-copy-btn {
    position: absolute;
    top: 10px;
    right: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.code-copy-btn svg {
	fill: #333;
}
/* 2. Create the hidden Tooltip Box using ::before */
.code-copy-btn::before {
    content: "Copied!";
    position: absolute;
    right: 32px; /* Pushes it safely to the left of the SVG icon */
    top: 50%;
    transform: translateY(-50%) translateX(10px); /* Starts slightly shifted right for an entry animation */
    background-color: #4caf50;
    color: #ffffff;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none; /* Prevents user from accidentally clicking the tooltip text */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 3. Create a tiny little arrow pointing to the icon using ::after */
.code-copy-btn::after {
    content: "";
    position: absolute;
    right: 27px;
    top: 50%;
    transform: translateY(-50%) translateX(10px);
    border-width: 5px 0 5px 5px;
    border-style: solid;
    border-color: transparent transparent transparent #4caf50;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 4. The Active Trigger State: Reveal the tooltip when jQuery adds .copied */
.code-copy-btn.copied::before,
.code-copy-btn.copied::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0); /* Smoothly slides left into position */
}

/* 5. Optional: Keep the SVG green while the tooltip is visible */
.code-copy-btn.copied svg {
    fill: #4caf50 !important;
    transition: fill 0.3s ease;
}

.wp-block-post-excerpt__excerpt {
	font-size: .75em;
}

blockquote.wp-block-quote {
	background: #111;
	margin: 1.75rem 0;
	padding: 20px;
	color: #fff;
}

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

.is-query-list .margin-0.wp-block-post-title {
  margin: 0 !important;
  line-height: 1.75;
  font-size: 1rem;
  font-weight: 400;
}
.wp-block-query:has(.is-query-list li .margin-0.wp-block-post-title){
  margin-top: 1rem !important;
} 
.is-query-list li:has(.margin-0.wp-block-post-title) {
  margin: 0 !important;
}