/* Search Widget - Clean Square Style */
.widget-search__field {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    padding: 0.75rem;
    border: none;
    border-radius: 0;
    font-size: 1rem;
    background: var(--bg-secondary);
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.widget-search__field:hover,
.widget-search__field:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

.widget-search__field::selection {
    background: #000;
    color: #fff;
}

/* Remove browser search input styling */
.widget-search__field::-webkit-search-decoration,
.widget-search__field::-webkit-search-cancel-button,
.widget-search__field::-webkit-search-results-button,
.widget-search__field::-webkit-search-results-decoration {
    -webkit-appearance: none;
}

.widget-search__submit {
    display: none;
}

/* Menu Search Box - Force Override */


/* 1. Kill the theme's global focus shadow specifically for search */
.menu__item--search:focus-within .menu__btn-title,
.menu__item--search:focus .menu__btn-title,
.menu__search:focus-within,
.menu__search:focus {
    box-shadow: none !important;
}

/* 2. Prevent the menu item background from changing on hover/focus */
.menu__item--search:hover,
.menu__item--search:focus-within {
    background: transparent !important;
}

/* 3. Ensure the input itself doesn't trigger the inherited shadow */
.menu__search input:focus {
    box-shadow: none !important;
    outline: 0 !important;
    /* Maintain your desired background here */
    background: rgba(255, 255, 255, 0.1) !important;
}

.menu__item--search {
    border-left: 1px solid rgba(255, 255, 255, .1) !important;
}

.menu__search input,
.menu__search input[type="text"],
.menu .menu__search input {
    display: block !important;
    padding: .625rem .9375rem !important;
    font-weight: 700 !important;
    font-size: .875rem !important;
    text-transform: uppercase !important;
    color: #fff !important;
    background: transparent !important;
    border: none !important;
    width: 120px !important;
    transition: background-color .25s ease-out !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.menu__search input::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

.menu__search input:focus {
    outline: none !important;
    background: rgba(255, 255, 255, 0.1) !important;
    width: 160px !important;
}

/* --- Clean Obsidian Icon Only --- */

.highlight {
    position: relative !important;
}

.copy-code-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 100;

    /* Reset everything to transparent */
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    
    /* Icon Styling */
    color: #6b7280 !important; /* Muted gray */
    cursor: pointer;
    display: flex !important;
    
    /* Smooth but snappy transitions */
    opacity: 0;
    transition: opacity 0.2s ease, color 0.2s ease;
}

/* 1. Show icon on hover - NO BOX */
.highlight:hover .copy-code-btn {
    opacity: 1 !important;
    background: transparent !important;
}

/* 2. Hover Icon Color - NO BOX */
.copy-code-btn:hover {
    color: #ef4444 !important; /* Red hover */
    background: transparent !important;
}

/* 3. Copied state - NO BOX */
.copy-code-btn.copied {
    color: #10b981 !important; /* Green success */
    opacity: 1 !important;
    background: transparent !important;
}

/* 4. Kill the messy transition on the 'innerHTML' swap */
/* This ensures the icon swap feels 'mechanical' and crisp, not blurry */
.copy-code-btn svg {
    transition: none !important; 
}

/* --- Existing Styles Maintained --- */
.logo__tagline {
  color: #ff0000 !important;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .copy-code-btn {
        opacity: 1 !important;
    }
}