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

/* No width/max-width/margin of its own, deliberately — every page that
   calls render_page_header() (125 of them) does so from INSIDE
   <main class="content">, which already provides the 1300px cap,
   centering, and 32px side padding (see .content in shared.css); this
   block just needs to fill that box. intro.php was the one outlier
   calling render_page_header() BEFORE .content opened instead of
   inside it — briefly "fixed" here with its own width/margin/padding to
   match .content's box independently, which really only worked by
   coincidence for that one page's particular DOM position and, worse,
   would have added a second, stacked 32px of padding on every other
   page (page-header nested a level deeper than .content's own children,
   each with their own 32px). The actual fix belongs in intro.php's
   markup, not here — see that file's own comment at its
   render_page_header() call. */
.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.
   Also doubles as the search bar's "zone": a solid navy-mid band around
   the whole greeting/input/chips stack, not a tint. An earlier version
   used --navy-light (#e8edf3) here, which sits almost on top of --bg
   (#f0f0f0) in lightness — exactly the "near-invisible tint difference"
   shared.css's own --bg/--card-bg comments (below --border) say this
   app deliberately moved away from in favor of real elevation. Solid
   navy-mid is the same "this band matters" language the app already
   uses for CTA bands/card headers (tool-form-wrap, the guide page's
   closing CTA) — so the search zone now reads as at least as bold as
   everything else on the page, not quieter than it. */
.ph-title-search {
    flex: 1;
    min-width: 0;
    background: var(--navy-mid);
    padding: 26px 24px;
    border-radius: 16px;
    box-shadow: 0 12px 28px rgba(21, 48, 76, 0.28);
    /* Overrides .ph-title's row/left-align layout above — this variant
       stacks greeting → kicker → input → chips as a centered column
       instead of a left-aligned icon+title row. Centered (Google-style)
       rather than left-hugging its own content: the panel spans the
       full header width regardless, so centering keeps the leftover
       space split evenly either side instead of piling it all on the
       right. */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* No flat gap here on purpose — greeting/kicker/input/chips aren't
       four equally-related lines, they're a header (greeting) followed
       by one tight input module (kicker pairs with the box right below
       it, chips pair with the box right above them). Each element below
       carries its own margin so the grouping actually shows: generous
       space under the greeting, snug space between the kicker and the
       input it's labeling. */
    gap: 0;
}
/* "Welcome back, {name}" — the one thing on this panel that can only
   be true for the logged-in user, so the header reads as personal
   rather than generic chrome any visitor would see. Sits in the
   breadcrumb's own slot (see render_page_header() in
   page-header-helpers.php) rather than beneath it — on the one page
   that sets search_greeting_name (home.php), the breadcrumb was just a
   single, non-linking "Home" label, redundant chrome on the home page
   itself, so the greeting replaces it instead of stacking on top. The
   done/total stat next to it is optional (search_progress_done/_total
   in render_page_header()'s $config) and only renders when both are
   set. */
.ph-header-greeting {
    margin-bottom: 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
}
.ph-header-greeting-stat {
    font-size: 13px;
    font-weight: 500;
    color: var(--slate);
    margin-left: 6px;
}
/* Small gold eyebrow sitting right above the input — turns the search
   box into a little "hero" of its own instead of just a wider input,
   and gives screen-reader-visible users a plain-language cue for what
   the (otherwise sr-only-labeled) box is for. Gold rather than navy-mid
   now that the panel itself is navy-mid — needs to read against a dark
   fill, not a pale one. Centered under .ph-title-search's align-items
   above, so no directional margin here — just enough margin-bottom to
   sit snug against the input it's labeling, not evenly spaced from it
   like an unrelated line. */
.ph-search-kicker {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold-glow);
    margin: 0 0 8px;
}
/* Always-visible "what you actually need next" shortcuts — same data
   as the on-focus dropdown's default state (search_default_links),
   surfaced here so the search area isn't empty/inert until someone
   clicks into it. Wraps rather than scrolls since there are at most 4
   (one per track); justify-content centers a wrapped second line too,
   not just the first. */
.ph-search-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.ph-search-chip {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--border);
    color: var(--navy);
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.ph-search-chip:hover {
    border-color: var(--gold-glow);
    color: var(--navy-mid);
}
.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;
}
/* This is the app's tier-1 action on the pages that use it (home.php
   today), so it's styled to actually look like one: solid white against
   the navy-mid .ph-title-search panel behind it, a gold-tinted border
   (--gold-glow is the app's reserved "the one to notice" accent — see
   shared.css) instead of the generic --border hairline, a soft shadow
   to lift it off the panel, and a stronger gold glow on focus. Bigger
   padding/radius than a standard input too, on purpose — physically
   larger reads as more important before any color even registers.
   Shadow is black-based, not the navy-tinted one used elsewhere in this
   file — a navy shadow would all but disappear sitting on the panel's
   own navy-mid fill, where a plain dark shadow still reads as a lift. */
.ph-search {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    max-width: 714px;
    padding: 15px 20px;
    border: 2px solid rgba(240, 180, 41, 0.35);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ph-search:focus-within {
    border-color: var(--gold-glow);
    box-shadow: 0 0 0 4px rgba(240, 180, 41, 0.28), 0 10px 24px rgba(0, 0, 0, 0.28);
}
.ph-search svg {
    width: 19px;
    height: 19px;
    color: var(--navy-mid);
    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: 16px;
    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: 16px;
    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;
    /* Was a solid navy (or --hub-accent) fill with a gold icon punched
       out of it — a saturated color block is the one visual idiom
       nothing else on this page (or the app) uses; every other "this is
       a distinct thing" marker here is a plain white surface plus a
       thin accent border/rule (.ph-search-chip, .home-full-guide's
       side rules, focus-item's accent border), so the solid badge read
       as generic template chrome instead of belonging to this app.
       Swapped for that same white-plus-accent-border language: still
       picks up each hub's own color via --hub-accent, just as a border/
       icon tint now instead of a fill (Andrew, 2026-08-29). */
    background: var(--card-bg);
    border: 1.5px solid var(--hub-accent, var(--navy));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ph-icon svg {
    width: 18px;
    height: 18px;
    color: var(--hub-accent, var(--navy));
}
.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;
}
/* Lets a 'form' action's wrapping <form> sit inside .ph-actions' flex
   row without becoming its own flex item (which would otherwise push
   the button onto its own line/gap) — see page-header-helpers.php. */
.ph-btn-form {
    display: contents;
}
/* 'static' action — same slot/sizing as a real .ph-btn, but a plain
   <span>, not a button/link/form: for a state with nothing left to
   click (e.g. "Marked Complete"). Dimmed + no pointer/hover feedback
   so it doesn't invite a click that would do nothing. */
.ph-btn-static {
    cursor: default;
    color: var(--slate);
    background: var(--bg);
}

@media (max-width: 640px) {
    .ph-title p { display: none; }
    .ph-btn-hide-mobile { display: none; }
    .ph-title-search { padding: 18px 14px; border-radius: 14px; }
    .ph-search { padding: 12px 16px; }
    .ph-header-greeting-stat { display: block; margin: 2px 0 0; }
}

/* Shared "blue wrap" for a tool's main card: 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. (Originally
   modeled on home.php's Recent Tools carousel, which used the same
   thick-navy-border treatment before that widget was removed
   2026-08-16.) */
.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 was for when this sat beside the boxed .ph-icon in a flex
       ROW (now removed) and needed to grow into the remaining space.
       .ph-title-search is a column now with align-items:center, so a
       flex item there sizes to its own content/width by default —
       width:100% (capped by max-width) is what makes it actually claim
       the full available column width up to 714px instead of shrinking
       to fit .ph-search's own content, which is what centers it. */
    width: 100%;
    max-width: 714px;
    /* Space before the chips row below it (see .ph-title-search's gap:0
       comment) — margin, not the parent's gap, so this still collapses
       correctly whether or not a given page actually has chips to show. */
    margin-bottom: 14px;
}
.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;
}