/* =============================================================
   HireGator - shared brand block
   -------------------------------------------------------------
   The same brand treatment on every surface: the favicon inside a
   gradient tile, the wordmark beside it.

   The favicon is an IMAGE (not a colour-inheriting icon), so it
   reads correctly on any gradient - that is what lets each page keep
   its own accent colour for the tile while the brand itself stays
   identical everywhere.
   ============================================================= */

.pf-brand {
    display: flex;
    align-items: center;
    gap: .8rem;
}

.pf-brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.pf-brand-mark img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
}

/* The monogram for a tenant that has no logo file. */
.pf-brand-mark .pf-brand-initials {
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: .02em;
    line-height: 1;
}

.pf-brand-text {
    min-width: 0;
    line-height: 1.2;
}

.pf-brand-text img.pf-brand-wordmark {
    height: 30px;
    width: auto;
    max-width: 100%;
    display: block;
}

.pf-brand-text span {
    display: block;
    margin-top: 3px;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* The wordmark artwork is white, so on a LIGHT background it has to be
   darkened to stay readable (the dark surfaces keep it white). */
.pf-brand--light .pf-brand-wordmark { filter: brightness(0); }

/* ---- the mark tile gradients: one per surface, unchanged from today ---- */
.pf-brand-mark--purple { background: linear-gradient(135deg, #a78bfa, #6d28d9); }
.pf-brand-mark--violet { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.pf-brand-mark--indigo { background: linear-gradient(135deg, #6366f1, #4f46e5); }
.pf-brand-mark--amber  { background: linear-gradient(135deg, #f59e0b, #d97706); }
.pf-brand-mark--sky    { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.pf-brand-mark--mk     { background: linear-gradient(135deg, var(--mk), rgb(var(--mk-rgb))); }