/* Product family band — [ BUILD | VERIFY | SELL | SUPPORT ] — identical on prodready.si, dataready.si,
   salesagents.si and agentor.si.
   Source of truth: family-footer.html / family-footer.css. Copy this file verbatim to /family.css; the only part
   a site edits is the SITE TINT block at the top (its own colours and fonts). Every rule below reads the tint
   variables with a neutral fallback, so the band also works with no tint at all.

   Tint variables (all optional):
     --pf-text        wordmarks                          (fallback: currentColor)
     --pf-muted       labels BUILD … SUPPORT, lines    (fallback: currentColor)
     --pf-line        brackets and the pipes between columns
     --pf-accent      the current site's underline and focus ring
     --pf-current-bg  the current site's column background
     --pf-hover-bg    a linked column on hover
     --pf-font        body text of the band              (fallback: inherit)
     --pf-wm-font     the four wordmarks                 (fallback: inherit)
     --pf-label-font  the four labels                    (fallback: ui-monospace)
     --pf-label-size  label size                         (fallback: 12px)
     --pf-max / --pf-gutter   band width and side gutter (fallback: 1180px / 16px)
   Tints per site (what each copy of this file carries in the SITE TINT block):
     prodready.si   (dark, pixel art): text #F4F4F8, muted #A9A9BA, line #3A3A4C, accent #0098EB,
                    current-bg rgba(0,152,235,.10), hover-bg rgba(244,244,248,.04), wm font Space Grotesk
     dataready.si   (white, happy):    text #1F2A44, muted #636C80, line #D3D8E6, accent #3D7BFF,
                    current-bg rgba(61,123,255,.08), hover-bg rgba(31,42,68,.04), wm font "Baloo 2"
     salesagents.si (warm light):      text #14181A, muted #565E59, line #BDB9B0, accent #C73E14,
                    current-bg rgba(255,122,77,.10), hover-bg rgba(20,24,26,.04), wm font Space Grotesk
     agentor.si     (soft plum light): text #1E2140, muted #545A7A, line #CBBEF5, accent #7B4DFF,
                    current-bg rgba(123,77,255,.08), hover-bg rgba(30,33,64,.04), wm font "Baloo 2"
   Layout: four equal columns on desktop, 2x2 from 641px to 960px, stacked at 640px and below. */

/* ---- SITE TINT (the only block that differs per site) — this copy carries dataready.si's tint ---- */
.pf{
  --pf-text:#1F2A44; --pf-muted:#636C80; --pf-line:#D3D8E6; --pf-accent:#3D7BFF;
  --pf-current-bg:rgba(61,123,255,.08); --pf-hover-bg:rgba(31,42,68,.04);
  --pf-wm-font:"Baloo 2","Nunito",system-ui,sans-serif; --pf-label-font:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
/* ---- /SITE TINT ---- */

.pf{width:min(100% - 2*var(--pf-gutter,16px),var(--pf-max,1180px));margin:0 auto 32px;padding:0;font-family:var(--pf-font,inherit);color:var(--pf-text,currentColor);text-align:left;box-sizing:border-box}
.pf *,.pf *::before,.pf *::after{box-sizing:border-box}
.pf .pf-bar{list-style:none;margin:0;padding:0 12px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:relative}
/* the brackets: [ … ] drawn as two open boxes on the outer edges */
.pf .pf-bar::before,.pf .pf-bar::after{content:"";position:absolute;top:0;bottom:0;width:12px;border:2px solid var(--pf-line,currentColor);pointer-events:none}
.pf .pf-bar::before{left:0;border-right:0}
.pf .pf-bar::after{right:0;border-left:0}
.pf .pf-col{margin:0;padding:0;min-width:0;display:flex}
/* the pipes between columns */
.pf .pf-col+.pf-col{border-left:1px solid var(--pf-line,currentColor)}
.pf .pf-cell{flex:1 1 auto;min-width:0;display:grid;gap:7px;align-content:start;margin:0;padding:16px 20px 15px;color:inherit;text-decoration:none;font-size:inherit;line-height:1.35;border:0;transition:background-color .15s ease}
.pf a.pf-cell:hover{background:var(--pf-hover-bg,transparent);text-decoration:none;color:inherit}
.pf a.pf-cell:hover .pf-wm{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.pf a.pf-cell:focus-visible{outline:2px solid var(--pf-accent,currentColor);outline-offset:-2px}
.pf .pf-cell[aria-current]{background:var(--pf-current-bg,transparent);box-shadow:inset 0 -3px 0 var(--pf-accent,currentColor)}
.pf .pf-label{font-family:var(--pf-label-font,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);font-size:var(--pf-label-size,12px);font-weight:600;line-height:1;letter-spacing:.18em;text-transform:uppercase;color:var(--pf-muted,currentColor)}
.pf .pf-cell .pf-wm{display:block;justify-self:start;font-family:var(--pf-wm-font,inherit);font-size:19px;font-weight:400;line-height:1.2;letter-spacing:-.01em;white-space:nowrap;color:var(--pf-text,currentColor)}
.pf .pf-cell .pf-wm img{display:inline-block;width:16px;height:16px;margin:0 6px 0 0;padding:0;transform:none;vertical-align:-2px}
.pf .pf-cell .pf-wm b{font-weight:700;color:inherit}
.pf .pf-line{font-size:14px;line-height:1.4;color:var(--pf-muted,currentColor)}
@media (min-width:641px) and (max-width:960px){
  .pf .pf-bar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf .pf-col:nth-child(2n+1){border-left:0}
  .pf .pf-col:nth-child(n+3){border-top:1px solid var(--pf-line,currentColor)}
}
@media (max-width:640px){
  .pf{margin-bottom:24px}
  .pf .pf-bar{grid-template-columns:1fr}
  .pf .pf-col+.pf-col{border-left:0;border-top:1px solid var(--pf-line,currentColor)}
  .pf .pf-cell{padding:13px 16px 12px}
}
@media (prefers-reduced-motion:reduce){.pf .pf-cell{transition:none}}