/* ==========================================================================
   Search results template (templates/search.html)

   The theme's card language applied to core/query, which search has to use:
   the results come from the main query, and only an inheriting core query
   reads the search term and paginates on /page/N/ correctly.

   Cards are core/post-template list items rather than forge/loop-item, so the
   selectors differ from the other listings even though the result matches. The
   card is not one big link here: the title is the link and the row responds to
   hover, which keeps one target per result instead of nesting anchors.
   ========================================================================== */

/* --- Search header --------------------------------------------------------- */

/* The fixed header (80px: the 56px logo plus the bar's padding) lies over the
   top of this section as it does over every hero, so the padding clears it
   before the section's own space begins. Owned here rather than as block
   padding so the phone step-down below needs no second copy in the template. */
.cf-search-results .cf-search-results__header {
    padding: calc(80px + var(--wp--preset--spacing--2-xl)) var(--wp--preset--spacing--sm) var(--wp--preset--spacing--2-xl);
}

/* A results line, not a page hero: 24px, with the term carrying the emphasis. */
.cf-search-results__header .wp-block-query-title {
    color: var(--wp--preset--color--primary-light);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: var(--wp--custom--line-height--snug);
    letter-spacing: -0.02em;
}

/* query-title prints the term inside a span; it carries the emphasis. */
.cf-search-results__header .wp-block-query-title span {
    color: var(--wp--preset--color--background);
    font-style: normal;
}

.cf-search-results__form .wp-block-search__inside-wrapper {
    gap: var(--wp--preset--spacing--2-xs);
    padding: 0;
    border: 0;
}

.cf-search-results__form .wp-block-search__input {
    min-height: 48px;
    padding: 0 var(--wp--preset--spacing--sm);
    background-color: var(--wp--preset--color--background);
    border: 1px solid transparent;
    border-radius: 30px;
    color: var(--wp--preset--color--foreground);
    font-family: inherit;
    /* 16px: smaller and iOS Safari zooms the page when the field takes focus. */
    font-size: var(--wp--preset--font-size--base);
}

.cf-search-results__form .wp-block-search__input:focus-visible {
    border-color: var(--wp--preset--color--secondary);
    outline: none;
}

/* The browser draws the type="search" clear button in its own accent colour,
   which lands as a blue X. Replaced with the glyph as a mask so it takes the
   field's own foreground. */
.cf-search-results__form .wp-block-search__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    background-color: var(--wp--preset--color--foreground);
    cursor: pointer;
    opacity: 0.85;
    transition: opacity var(--wp--custom--transition--base);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 3l10 10M13 3L3 13'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 3l10 10M13 3L3 13'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.cf-search-results__form .wp-block-search__input::-webkit-search-cancel-button:hover {
    opacity: 1;
}

/* The theme button, restated: core/search draws its own button rather than the
   button element theme.json styles. */
.cf-search-results__form .wp-block-search__button {
    min-height: 48px;
    margin: 0;
    padding: 0 var(--wp--preset--spacing--lg);
    background-color: var(--wp--preset--color--secondary);
    border: 1px solid var(--wp--preset--color--secondary);
    border-radius: 30px;
    color: var(--wp--preset--color--background);
    font-family: inherit;
    font-size: var(--wp--preset--font-size--base);
    font-weight: var(--wp--custom--font-weight--semibold);
    letter-spacing: -0.02em;
    cursor: pointer;
    transition: var(--wp--custom--transition--base);
    transition-property: background-color, border-color, color;
}

.cf-search-results__form .wp-block-search__button:hover,
.cf-search-results__form .wp-block-search__button:focus-visible {
    background-color: var(--wp--preset--color--background);
    border-color: var(--wp--preset--color--background);
    color: var(--wp--preset--color--primary);
}

/* The copy of the form inside "no results" sits on white, where a white hover
   would vanish, so it deepens to primary instead. */
.cf-search-results__form--light .wp-block-search__input {
    border-color: var(--wp--preset--color--background-alt);
}

.cf-search-results__form--light .wp-block-search__button:hover,
.cf-search-results__form--light .wp-block-search__button:focus-visible {
    background-color: var(--wp--preset--color--primary);
    border-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--background);
}

/* --- Result grid ----------------------------------------------------------- */

.cf-search-results .wp-block-post-template {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--sm);
    align-items: stretch;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cf-search-results .wp-block-post-template > li {
    display: flex;
    flex-direction: column;
    margin: 0;
}

/* Search spans every post type, so plenty of results have no featured image
   (podcast episodes carry a player, some campaigns nothing at all). Nothing is
   faked in its place: the card simply starts at the type pill and the row keeps
   its rhythm from the grid rather than from a placeholder box. */
.cf-search-results__media {
    margin: 0 0 var(--wp--preset--spacing--sm);
}

.cf-search-results__media img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 12px;
}

/* The listing pill, naming the post type: a set of results mixes articles,
   courses, campaigns, podcasts and blog posts, and which is which matters more
   here than the category does. */
.cf-search-results__type {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    width: fit-content;
    margin: 0 0 var(--wp--preset--spacing--xs);
    padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--sm);
    border-radius: 30px;
    background-color: #3935681F;
    color: var(--wp--preset--color--foreground);
    font-weight: var(--wp--custom--font-weight--semibold);
    line-height: 1.4;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* An unregistered type leaves the binding empty; an empty pill is worse than
   no pill. */
.cf-search-results__type:empty {
    display: none;
}

.cf-search-results__title {
    gap: var(--wp--preset--spacing--xs);
    align-items: flex-start;
    margin: 0 0 var(--wp--preset--spacing--2-xs);
}

.cf-search-results__title .wp-block-post-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.cf-search-results__title .wp-block-post-title a {
    text-decoration: none;
    transition: color var(--wp--custom--transition--base);
}

.cf-search-results__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 0.35rem;
    color: var(--wp--preset--color--foreground);
    transition: transform var(--wp--custom--transition--base), color var(--wp--custom--transition--base);
}

/* Driven from the list item, not the anchor, so hovering anywhere on the card
   answers even though only the title is clickable. :focus-within covers the
   keyboard, where the title link is what takes focus. */
.cf-search-results .wp-block-post-template > li:hover .cf-search-results__arrow,
.cf-search-results .wp-block-post-template > li:focus-within .cf-search-results__arrow {
    transform: translateX(4px);
    color: var(--wp--preset--color--secondary);
}

/* !important to match the preset colour class the theme emits on the title. */
.cf-search-results .wp-block-post-template > li:hover .wp-block-post-title a,
.cf-search-results .wp-block-post-template > li:focus-within .wp-block-post-title a {
    color: var(--wp--preset--color--secondary) !important;
}

.cf-search-results__excerpt {
    margin: 0;
    color: var(--wp--preset--color--foreground-muted);
}

/* The clamp goes on core/post-excerpt's inner <p>, not the block wrapper: as a
   -webkit-box the wrapper counts that paragraph as one box child and would cut
   the whole thing at a single line rather than at two lines of text. */
.cf-search-results__excerpt .wp-block-post-excerpt__excerpt {
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    line-height: 1.6;
    overflow: hidden;
}

/* The "Read more" link core appends would be a second target on a card whose
   title is already the link. */
.cf-search-results__excerpt .wp-block-post-excerpt__more-text {
    display: none;
}

/* --- No results ------------------------------------------------------------ */

.cf-search-results__empty {
    padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--md);
    background-color: var(--wp--preset--color--background-light);
    border-radius: var(--wp--custom--border-radius--xl);
    text-align: center;
}

/* --- Pagination -------------------------------------------------------------
   Three columns, each part assigned its own, so the numbers stay centred on the
   row whatever sits beside them. Core drops Previous on the first page and Next
   on the last, so a space-between row would sit off centre at both ends.
   --------------------------------------------------------------------------- */

.cf-search-results__pagination {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--wp--preset--spacing--sm);
    width: 100%;
    margin-top: var(--wp--preset--spacing--xl);
    padding-top: var(--wp--preset--spacing--md);
    border-top: 1px solid #DBDAD9;
}

.cf-search-results__pagination > * {
    margin-block: 0;
}

.cf-search-results__pagination .wp-block-query-pagination-previous {
    grid-column: 1;
    justify-self: start;
}

.cf-search-results__pagination .wp-block-query-pagination-numbers {
    grid-column: 2;
    justify-self: center;
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--2-xs);
}

.cf-search-results__pagination .wp-block-query-pagination-next {
    grid-column: 3;
    justify-self: end;
}

/* Square-ish rather than wide: min-width carries the single digits and the box
   grows for 10 and up, instead of the row jumping between the two widths. */
.cf-search-results__pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 0.4rem;
    border-radius: 8px;
    color: var(--wp--preset--color--foreground);
    font-size: var(--wp--preset--font-size--small);
    line-height: 1;
    text-decoration: none;
    transition: var(--wp--custom--transition--base);
}

.cf-search-results__pagination a.page-numbers:hover,
.cf-search-results__pagination a.page-numbers:focus-visible,
.cf-search-results__pagination .page-numbers.current {
    background-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--foreground-inverted);
}

/* The ellipsis marks a gap in the range, not a target, no box, no hover. */
.cf-search-results__pagination .page-numbers.dots {
    min-width: 0;
    padding: 0 0.15rem;
    background: none;
}

/* Both ends are coral, the one accent on an otherwise navy-and-grey row. */
.cf-search-results__pagination .wp-block-query-pagination-previous,
.cf-search-results__pagination .wp-block-query-pagination-next {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--wp--preset--color--secondary);
    font-size: var(--wp--preset--font-size--base);
    text-decoration: none;
    transition: var(--wp--custom--transition--base);
}

.cf-search-results__pagination .wp-block-query-pagination-previous:hover,
.cf-search-results__pagination .wp-block-query-pagination-next:hover {
    color: var(--wp--preset--color--primary);
}

.cf-search-results__pagination .wp-block-query-pagination-previous::before,
.cf-search-results__pagination .wp-block-query-pagination-next::after {
    content: "";
    flex-shrink: 0;
    width: 1.1em;
    height: 1.1em;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    transition: transform var(--wp--custom--transition--base);
}

.cf-search-results__pagination .wp-block-query-pagination-previous::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 8H2M7 3l-5 5 5 5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 8H2M7 3l-5 5 5 5'/%3E%3C/svg%3E");
}

.cf-search-results__pagination .wp-block-query-pagination-next::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h12M9 3l5 5-5 5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h12M9 3l5 5-5 5'/%3E%3C/svg%3E");
}

.cf-search-results__pagination .wp-block-query-pagination-previous:hover::before {
    transform: translateX(-3px);
}

.cf-search-results__pagination .wp-block-query-pagination-next:hover::after {
    transform: translateX(3px);
}

/* --- Responsive ------------------------------------------------------------ */

@media (max-width: 900px) {
    .cf-search-results .wp-block-post-template {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .cf-search-results .cf-search-results__header {
        padding-top: calc(80px + var(--wp--preset--spacing--xl));
    }

    .cf-search-results .wp-block-post-template {
        grid-template-columns: 1fr;
    }

    .cf-search-results__form .wp-block-search__inside-wrapper {
        flex-wrap: wrap;
    }

    .cf-search-results__form .wp-block-search__button {
        width: 100%;
    }

    .cf-search-results__pagination {
        grid-template-columns: 1fr 1fr;
        row-gap: var(--wp--preset--spacing--sm);
    }

    .cf-search-results__pagination .wp-block-query-pagination-numbers {
        grid-row: 1;
        grid-column: 1 / -1;
    }

    .cf-search-results__pagination .wp-block-query-pagination-previous {
        grid-row: 2;
        grid-column: 1;
    }

    .cf-search-results__pagination .wp-block-query-pagination-next {
        grid-row: 2;
        grid-column: 2;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cf-search-results__title .wp-block-post-title a,
    .cf-search-results__arrow,
    .cf-search-results__pagination .wp-block-query-pagination-previous::before,
    .cf-search-results__pagination .wp-block-query-pagination-next::after {
        transition-duration: 0.01ms;
    }
}