/* ==========================================================================
   JT Computers Inc. — brand overrides
   The approved mockup's design system stays intact; only the accent hue moves
   to the client's own cyan, sampled from their current logo (#2DA6DF).
   ========================================================================== */

:root {
  --brand-500: #2da6df;
  --brand-600: #1d8dc4;
  --brand-700: #14719f;
  --brand-100: #ddf1fb;
  --brand-50:  #f0f9fe;

  /* remap the mockup's semantic accents onto the client's cyan */
  --blue-700: var(--brand-700);
  --blue-600: var(--brand-600);
  --blue-500: var(--brand-500);
  --blue-400: #63c0ea;
  --blue-100: var(--brand-100);
  --blue-50:  var(--brand-50);

  --accent: var(--brand-600);
  --accent-hover: var(--brand-700);
  --accent-soft: var(--brand-50);
  --text-link: var(--brand-700);

  --sh-focus: 0 0 0 3px rgba(45, 166, 223, 0.34);
}

/* Condition badges — this business's key differentiator, so they get their
   own treatment rather than reusing the generic badge colours. */
.cond {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px var(--sp-2); border-radius: var(--r-xs);
  font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  white-space: nowrap;
}
.cond--success { background: var(--success-100); color: var(--success-600); }
.cond--brand   { background: var(--brand-100);   color: var(--brand-700); }
.cond--info    { background: #e8eaf6;            color: #3949ab; }
.cond--neutral { background: var(--ink-100);     color: var(--ink-600); }

/* "Call for price" replaces the price in the approved design. */
.price-call {
  font-size: var(--fs-xl); font-weight: var(--fw-bold);
  color: var(--brand-700); letter-spacing: -0.01em;
}
.price-call small {
  display: block; font-size: var(--fs-xs); font-weight: var(--fw-medium);
  color: var(--text-muted); letter-spacing: 0; margin-top: 2px;
}
.price-block .price-call { font-size: var(--fs-3xl); }

/* Logo lockup */
.brand__logo { height: 44px; width: auto; flex: none; }
.site-footer .brand__logo { height: 40px; }

.skip-link:focus { top: var(--sp-4); }

/* ----------------------------------------------------- brand lockup ------
   The mark is a circular badge with "COMPUTERS INC." set around its rim, so
   rotating it — the obvious move for a round logo — would turn that text
   upside down. Instead the badge lifts and sends out a ring, which echoes the
   dashed circle already drawn in the mark.

   The ring is a box-shadow rather than an extra element: it needs no markup
   change across the three places the lockup appears (header, footer, admin),
   and it sizes itself to whichever logo height that context uses.
   -------------------------------------------------------------------------- */
.brand__logo {
  /* Safe on this asset: the badge is circular and its corners are already
     transparent, so the clip only tidies the box the ring is drawn around. */
  border-radius: 50%;
  transition: transform .45s cubic-bezier(.34,1.2,.5,1),
              filter .35s var(--ease);
}
.brand:hover .brand__logo,
.brand:focus-visible .brand__logo,
.rail__brand:hover .brand__logo,
.rail__brand:focus-visible .brand__logo {
  transform: scale(1.07);
  filter: drop-shadow(0 4px 12px rgba(45,166,223,.45));
  animation: brandPing 1.8s cubic-bezier(.2,.7,.3,1) infinite;
}
@keyframes brandPing {
  0%        { box-shadow: 0 0 0 0 rgba(45,166,223,.42); }
  70%, 100% { box-shadow: 0 0 0 14px rgba(45,166,223,0); }
}

/* The wordmark answers the hover too, so the whole lockup reads as one
   control rather than an image that happens to react. */
.brand__name em,
.brand__name i,
.brand__tag {
  transition: color .3s var(--ease), opacity .3s var(--ease),
              letter-spacing .35s var(--ease);
}
.brand:hover .brand__name em { color: var(--brand-500); }
.brand:hover .brand__name i  { opacity: 1; }
.brand:hover .brand__tag     { color: var(--ink-500); letter-spacing: .16em; }

/* On a dark ground the light-mode colours would vanish, so the footer and the
   admin rail get their own resting and hover states. These used to be inline
   style attributes on the markup, which no stylesheet rule can override —
   which is why the lockup down there never answered a hover. */
.site-footer .brand__name,
.rail__brand .brand__name { color: #fff; }
.site-footer .brand__name em,
.rail__brand .brand__name em { color: var(--brand-500); }
.site-footer .brand:hover .brand__name em,
.rail__brand:hover .brand__name em { color: var(--brand-300); }
.site-footer .brand:hover .brand__tag,
.rail__brand:hover .brand__tag { color: rgba(255,255,255,.8); }

.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--r-md); }

@media (prefers-reduced-motion: reduce) {
  /* Keep the colour response, drop the movement and the ping. */
  .brand:hover .brand__logo,
  .rail__brand:hover .brand__logo { transform: none; animation: none; }
}