/**
 * Page Designer — Site Search Block (pd-blk-srch-*)   owner, 27 Oct 2026
 * ---------------------------------------------------------------------------
 * Every colour comes from the website's Global Theme (--pd-*) and falls back
 * to the admin theme labels (--at-color-*) on admin-styled pages, then to the
 * text colour around it. No colour is written here.
 *   - words: inherit the page's General Text (or --pd-general-color)
 *   - the field: a tint of the words' own colour (like the Form block)
 *   - the button: the theme's FILLED BUTTON pair (--pd-btn-bg + --pd-btn-color)
 *   - focus, result titles and highlights: the theme's Link colour
 *   - the dropdown surface: the page background (--pd-color-bg)
 * Sizes, colours, radius and spacing can be changed per block with the
 * Design panel (brush) on the block, the Search Box or the Search Button.
 * Sizing follows the block's OWN width (container query), not the screen.
 */
.pd-blk-srch {
    --pd-blk-srch-radius: var(--pd-btn-radius, 10px);
    --pd-blk-srch-h: 48px;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    container-type: inline-size;
    container-name: pd-blk-srch;
    font-family: var(--pd-general-font, inherit);
    color: var(--pd-general-color, inherit);
    z-index: 5;
}
.pd-blk-srch.pd-blk-srch-open { z-index: 60; }

.pd-blk-srch-form {
    display: flex;
    align-items: stretch;
    gap: 8px;
    width: 100%;
}
.pd-blk-srch-field {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}
.pd-blk-srch-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    pointer-events: none;
    color: var(--pd-link-color, currentColor);
}
.pd-blk-srch-icon-svg { display: block; }

.pd-blk-srch-input {
    display: block;
    width: 100%;
    min-height: var(--pd-blk-srch-h);
    box-sizing: border-box;
    margin: 0;
    padding: 10px 14px 10px 42px;
    font-family: inherit;
    font-size: max(16px, var(--pd-general-size, 16px));   /* 16px+ so phones never zoom in */
    line-height: 1.4;
    color: inherit;
    background: color-mix(in srgb, currentColor 4%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
    border-radius: var(--pd-blk-srch-radius);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.pd-blk-srch-input::placeholder { color: color-mix(in srgb, currentColor 62%, transparent); opacity: 1; }
.pd-blk-srch-input::-webkit-search-decoration { -webkit-appearance: none; }
.pd-blk-srch-input:focus {
    border-color: var(--pd-link-color, currentColor);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pd-link-color, currentColor) 24%, transparent);
    background: color-mix(in srgb, currentColor 2%, transparent);
}

/* The filled button: the theme's button pair, never one colour on its own. */
.pd-blk-srch-btn {
    flex: 0 0 auto;
    min-height: var(--pd-blk-srch-h);
    min-width: 44px;
    margin: 0;
    padding: 10px 20px;
    font-family: var(--pd-btn-font, inherit);
    font-size: var(--pd-btn-size, 15px);
    font-weight: var(--pd-btn-weight, 600);
    line-height: 1.2;
    /* No theme button colours at all (a bare page): a readable tinted button in the text colour. */
    color: var(--pd-btn-color, inherit);
    background: var(--pd-btn-bg, color-mix(in srgb, currentColor 12%, transparent));
    border: 1px solid var(--pd-btn-bg, currentColor);
    border-radius: var(--pd-blk-srch-radius);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, transform 0.12s;
}
.pd-blk-srch-btn:hover,
.pd-blk-srch-btn:focus-visible {
    color: var(--pd-btn-hover-color, var(--pd-btn-color, inherit));
    background: var(--pd-btn-hover-bg, var(--pd-btn-bg, color-mix(in srgb, currentColor 20%, transparent)));
}
.pd-blk-srch-btn:focus-visible {
    outline: 2px solid var(--pd-link-color, currentColor);
    outline-offset: 2px;
}
.pd-blk-srch-btn:active { transform: translateY(1px); }
.pd-blk-srch[data-pd-srch-btn="0"] .pd-blk-srch-btn { display: none; }

/* ── Large hero search ── */
.pd-blk-srch[data-pd-srch-layout="hero"] { --pd-blk-srch-h: 60px; }
.pd-blk-srch[data-pd-srch-layout="hero"] .pd-blk-srch-form,
.pd-blk-srch[data-pd-srch-layout="hero"] .pd-blk-srch-list,
.pd-blk-srch[data-pd-srch-layout="hero"] .pd-blk-srch-status {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
.pd-blk-srch[data-pd-srch-layout="hero"] .pd-blk-srch-input {
    font-size: clamp(17px, 2.4cqi, 20px);
    padding-left: 50px;
    border-width: 2px;
}
.pd-blk-srch[data-pd-srch-layout="hero"] .pd-blk-srch-icon { left: 18px; }
.pd-blk-srch[data-pd-srch-layout="hero"] .pd-blk-srch-icon-svg { width: 22px; height: 22px; }
.pd-blk-srch[data-pd-srch-layout="hero"] .pd-blk-srch-btn { padding: 12px 28px; font-size: max(16px, var(--pd-btn-size, 16px)); }
.pd-blk-srch[data-pd-srch-layout="hero"] .pd-blk-srch-list { left: 0; right: 0; }

/* ── Results ── */
.pd-blk-srch-list {
    list-style: none;
    margin: 0;
    padding: 6px;
    box-sizing: border-box;
    background: var(--pd-color-bg, var(--at-color-popover, var(--at-color-background)));
    color: var(--pd-general-color, var(--at-color-popover-foreground, inherit));
    border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
    border-radius: var(--pd-blk-srch-radius);
    max-height: min(60vh, 440px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, currentColor 35%, transparent) transparent;
    text-align: left;
}
.pd-blk-srch-list[hidden] { display: none; }
/* Dropdown: floats over the page under the box */
.pd-blk-srch[data-pd-srch-results="dropdown"] .pd-blk-srch-list,
.pd-blk-srch:not([data-pd-srch-results]) .pd-blk-srch-list {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--pd-blk-srch-h) + 6px);
    z-index: 60;
    box-shadow: 0 14px 34px color-mix(in srgb, var(--pd-general-color, currentColor) 20%, transparent);
    animation: pd-blk-srch-in 0.16s ease-out;
}
/* Inline: part of the page, pushes what is below it down */
.pd-blk-srch[data-pd-srch-results="inline"] .pd-blk-srch-list {
    position: static;
    margin-top: 10px;
    max-height: none;
    overflow: visible;
}
@keyframes pd-blk-srch-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pd-blk-srch-opt { margin: 0; padding: 0; border-radius: calc(var(--pd-blk-srch-radius) * 0.7); }
.pd-blk-srch-link {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    min-height: 44px;
    box-sizing: border-box;
    border-radius: inherit;
    text-decoration: none;
    color: inherit;
    overflow-wrap: anywhere;
}
.pd-blk-srch-title {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.35;
    color: var(--pd-link-color, inherit);
}
.pd-blk-srch-snip {
    font-size: 0.9rem;
    line-height: 1.5;
    color: inherit;
}
.pd-blk-srch-opt-active,
.pd-blk-srch-opt:hover {
    background: color-mix(in srgb, var(--pd-link-color, currentColor) 10%, transparent);
}
.pd-blk-srch-opt-active .pd-blk-srch-title { text-decoration: underline; text-underline-offset: 3px; }
.pd-blk-srch-mark {
    background: color-mix(in srgb, var(--pd-link-color, currentColor) 20%, transparent);
    color: inherit;
    font-weight: 700;
    border-radius: 3px;
    padding: 0 1px;
}
.pd-blk-srch-empty {
    padding: 12px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: inherit;
}
/* Read out to screen readers, not shown */
.pd-blk-srch-status {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.pd-blk-srch-busy .pd-blk-srch-icon { animation: pd-blk-srch-pulse 0.9s ease-in-out infinite; }
@keyframes pd-blk-srch-pulse { 50% { transform: translateY(-50%) scale(0.86); } }

/* ── Narrow blocks (its own width, not the screen) ── */
@container pd-blk-srch (max-width: 300px) {
    .pd-blk-srch-btn { display: none; }   /* typing already searches; the phone keyboard has its own Search key */
}
@container pd-blk-srch (max-width: 480px) {
    .pd-blk-srch[data-pd-srch-layout="hero"] .pd-blk-srch-btn,
    .pd-blk-srch-btn { padding-left: 14px; padding-right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .pd-blk-srch[data-pd-srch-results] .pd-blk-srch-list,
    .pd-blk-srch:not([data-pd-srch-results]) .pd-blk-srch-list { animation: none; }
    .pd-blk-srch-busy .pd-blk-srch-icon { animation: none; }
    .pd-blk-srch-input, .pd-blk-srch-btn { transition: none; }
}

/* Editor canvas only (data-gjs-* never reaches the published page): the box can be typed in. */
[data-gjs-type="pd-site-search"] .pd-blk-srch-input { cursor: text; }