/* Shared breadcrumb + icon + title + actions page header.
   Rendered by page-header-helpers.php's render_page_header(). */

.page-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.ph-block {
    flex: 1;
    min-width: 0;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
}
.ph-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12.5px;
    color: var(--slate);
    margin-bottom: 12px;
}
.ph-breadcrumb a {
    color: var(--slate);
    text-decoration: none;
}
.ph-breadcrumb a:hover {
    color: var(--navy);
    text-decoration: underline;
}
.ph-breadcrumb svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    color: #cbd5e1;
}
.ph-breadcrumb span[aria-current] {
    color: var(--navy);
    font-weight: 600;
}
.ph-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}
.ph-title {
    display: flex;
    align-items: center;
    gap: 12px;
}
/* .ph-title itself doesn't grow inside .ph-row by default (a flex item
   with no flex-grow just shrinks to content width) — fine for the plain
   icon+title+subtitle case, but the search bar's own flex:1/max-width
   (below) has nothing to actually grow into without this, so it was
   rendering at content-size regardless of max-width. Scoped to the
   search variant only, so the title+subtitle layout on every other page
   is untouched. */
.ph-title-search {
    flex: 1;
    min-width: 0;
}
.ph-title h1 {
    margin: 0;
    font-size: 24px;
    color: var(--navy);
}
.ph-title p {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--slate);
}
/* Standard visually-hidden-but-accessible pattern — used when
   search_placeholder replaces the visible h1/p with a search input, so
   there's still a real heading for screen readers/document outline. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* Unwired visual placeholder — render_page_header()'s search_placeholder
   option. Same idle-background/border look as the app's other inputs
   (css/resume.css) rather than a one-off style, so it reads as a real
   search field even though nothing is listening to it yet. */
.ph-search {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    max-width: 714px;
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: #fbfcfd;
}
.ph-search svg {
    width: 17px;
    height: 17px;
    color: #94a3b8;
    flex-shrink: 0;
}
.ph-search-input-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}
.ph-search input {
    border: none;
    background: none;
    padding: 0;
    width: 100%;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    color: #1e293b;
    position: relative;
    /* Above the fake overlay so real typing/clicking always reaches the
       actual input, never the decorative layer sitting on top of it. */
    z-index: 1;
}
.ph-search input:focus { outline: none; }
/* Decorative "type it out, then turn green word-by-word" overlay — see
   the search_phrases option in page-header-helpers.php. Purely visual;
   the real <input> underneath is what actually receives focus/typing. */
.ph-search-fake {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    /* Flex containers collapse whitespace-only text nodes between
       children instead of rendering them as a visible gap the way
       normal inline flow does — that's what was swallowing the spaces
       between .word spans (typing itself uses a plain text node, so it
       looked fine right up until the word-by-word markup replaced it).
       gap is the correct fix in a flex context, not more markup. */
    gap: 0.3em;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
.ph-search-fake .word {
    display: inline-block;
    transition: color 0.25s ease;
}
.ph-search-fake .word.green {
    color: #16a34a;
}
.ph-search-fake.ph-search-fake-hidden {
    opacity: 0;
}
.ph-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ph-icon svg {
    width: 19px;
    height: 19px;
    color: var(--gold-glow);
}
.ph-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 6px;
}
.ph-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid var(--border);
    color: var(--navy);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.15s ease;
}
.ph-btn:hover {
    border-color: #94a3b8;
}
.ph-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .ph-title p { display: none; }
    .ph-btn-hide-mobile { display: none; }
}

/* Shared "blue wrap" for a tool's main card — same treatment as
   home.php's Recent Tools carousel (.recent-tools-widget): a thick
   navy-mid border instead of the plain 1px card border, with overflow
   hidden (inherited from .card/.form-card) so a flush-fitted header
   band's corners get clipped to match. Apply .tool-form-wrap alongside
   .card or .form-card — two page-local names for the same white-bg,
   rounded, overflow-hidden shell that grew independently across tool
   pages before this convention existed. If that card has a
   .tool-hero-header or .form-card-header as its first child, it's
   automatically recolored to match and its own radius/margin zeroed so
   it sits flush against the wrap's edge and the white body below,
   mirroring how .recent-tools-header sits flush against
   .recent-tools-body. */
.tool-form-wrap {
    border: 4px solid var(--navy-mid);
    border-radius: 14px;
}
.tool-form-wrap .tool-hero-header,
.tool-form-wrap .form-card-header {
    background: var(--navy-mid);
    border-radius: 0;
    margin-bottom: 0;
}

/* ── Smart search dropdown (search_default_links / search_endpoint) ── */
.ph-search-wrap {
    position: relative;
    flex: 1;
    max-width: 714px;
}
.ph-search-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.18);
    max-height: 380px;
    overflow-y: auto;
    z-index: 50;
    padding: 6px;
}
.ph-search-group-label {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 8px 10px 4px;
}
.ph-search-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: #1e293b;
    cursor: pointer;
}
.ph-search-option:hover,
.ph-search-option.ph-search-option-active {
    background: #f1f5f9;
}
.ph-search-option-disabled {
    color: #94a3b8;
    cursor: default;
}
.ph-search-option-icon {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ph-search-option-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.ph-search-option-text {
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ph-search-option-cat {
    font-size: 11.5px;
    color: #94a3b8;
}
.ph-search-boost-tag {
    font-size: 10.5px;
    font-weight: 700;
    color: #166534;
    background: #dcfce7;
    padding: 2px 8px;
    border-radius: 999px;
    flex-shrink: 0;
    white-space: nowrap;
}
.ph-search-soon-tag {
    font-size: 10.5px;
    font-weight: 600;
    color: #94a3b8;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 999px;
    flex-shrink: 0;
    white-space: nowrap;
}
.ph-search-empty {
    padding: 16px 10px;
    font-size: 13px;
    color: #64748b;
    text-align: center;
}
.ph-search-empty a {
    color: var(--navy);
    font-weight: 600;
}