/* ==========================================================================
   COMPONENTS — generic, reusable pieces shared across page-specific sections
   ========================================================================== */

/* ---- Search Field ----
   Generic input, built entirely from existing tokens (surface, border,
   radius, shadow, transitions) so it matches the visual language of
   .du-btn / .du-cta without introducing new values. */
.du-search-field {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.du-search-field__submit {
    position: absolute;
    left: var(--space-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: var(--outline);
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.du-search-field__submit:hover {
    color: var(--on-surface-variant);
}

.du-search-field__submit:focus-visible {
    outline: 2px solid var(--primary-hover);
    outline-offset: 2px;
}

.du-search-field__input {
    width: 100%;
    background-color: var(--surface);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-full);
    color: var(--on-surface);
    padding: var(--space-xs) var(--space-sm) var(--space-xs) 44px;
    height: 48px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.du-search-field__input::placeholder {
    color: var(--outline);
}

.du-search-field__input:hover {
    border-color: var(--outline-variant);
}

.du-search-field__input:focus-visible {
    outline: none;
    border-color: var(--primary-hover);
    box-shadow: 0 0 0 3px var(--surface-container-low);
}

/* Remove native OS search decorations so our own icon/styling is the
   only thing shown across browsers. */
.du-search-field__input::-webkit-search-decoration,
.du-search-field__input::-webkit-search-cancel-button,
.du-search-field__input::-webkit-search-results-button,
.du-search-field__input::-webkit-search-results-decoration {
    -webkit-appearance: none;
}

/* ---- Inverse ----
   For use on dark, full-bleed sections (e.g. the 404 page's .du-404
   section, background: var(--inverse-surface)). Built from the same
   --primary-container / --on-primary-container pairing already used
   elsewhere for content sitting on a dark surface, rather than
   inventing a new dark-input color. */
.du-search-field--inverse .du-search-field__input {
    background-color: var(--primary-container);
    border-color: transparent;
    color: var(--on-primary-container);
}

.du-search-field--inverse .du-search-field__input::placeholder {
    color: var(--on-primary-container);
    opacity: 0.75;
}

.du-search-field--inverse .du-search-field__input:hover {
    border-color: var(--outline-variant);
}

.du-search-field--inverse .du-search-field__input:focus-visible {
    border-color: var(--surface);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
}

.du-search-field--inverse .du-search-field__submit {
    color: var(--on-primary-container);
}

.du-search-field--inverse .du-search-field__submit:hover {
    color: var(--on-primary);
}

/* ---- Honeypot ----
   Hides a spam-trap field from real visitors (visually and from screen
   readers) while remaining fillable by bots that blindly fill every field.
   Generic — reusable on any future form, not just Newsletter. */
.du-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---- Badge ----
   Small pill label (e.g. "Featured", category/tag names on resource cards).
   Neutral by default; kept to one calm style rather than per-category
   colors, to match the site's restrained editorial aesthetic. */
.du-badge {
    display: inline-flex;
    align-items: center;
    background-color: var(--surface-container-low);
    color: var(--on-surface-variant);
    border-radius: var(--radius-full);
    padding: 4px var(--space-xs);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
}

/* ---- Arrow Link ----
   Text link with a trailing arrow icon that nudges forward on hover/focus.
   Used for "Read Full Article", "Read Article", and similar CTAs. */
.du-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
}

.du-link-arrow__icon {
    display: inline-flex;
    transition: transform var(--transition-fast);
}

.du-link-arrow:hover .du-link-arrow__icon,
.du-link-arrow:focus-visible .du-link-arrow__icon {
    transform: translateX(4px);
}

/* ---- Pill ----
   Interactive pill link/toggle (distinct from .du-badge, which is a static
   label). Used by Goal Navigation today; generic enough for any future
   filter row or toggle group. */
.du-pill {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    background-color: var(--surface);
    color: var(--on-surface-variant);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-full);
    padding: var(--space-xs) var(--space-sm);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.du-pill:hover {
    border-color: var(--primary-hover);
    color: var(--on-surface);
}

.du-pill:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--surface-container-low);
    border-color: var(--primary-hover);
}

.du-pill--active,
.du-pill--active:hover {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
}

/* ---- Media Placeholder ----
   Shown in place of a featured image when a post has none. */
.du-media-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: var(--surface-container-low);
    color: var(--outline);
}