/* ============================================================
   ScanCafe Brand Kit — LEGACY BRIDGE  ***TRANSITIONAL FILE***
   Spec: docs/core/BRAND_KIT.md · Rollout: docs/core/BRAND_ROLLOUT_PLAN.md

   Shrunk after Phase 5 (2026-07-11): ~330 lines -> this.

   Every legacy BUTTON class (.start-here, .learnmore, .cafe-continue,
   .bg-sc-orange, .link-btns, .back-btns, .btn-scancafe, .btn-outline-sc,
   .order-now, .print-product-btn, .select-btn) is now GONE from the
   markup — all buttons use .sc-btn-*, so those blocks were deleted.

   What remains are legacy class names still present in Blade that are
   not buttons: page titles, the inner-page hero band, utility link
   colours, and Bootstrap's .form-control. They are kept here (rather
   than folded into sc-components.css) because they are legacy names
   with no future: rename them in Blade and this file disappears.

   !important is still required in places because the legacy bundle
   (style.css / scancafe.css) sets these with !important itself. This
   remains the ONLY customer-facing file permitted to use it.
   ============================================================ */


/* ------------------------------------------------------------
   1. Legacy page titles — used in 20+ Blade files
   (.cafe-page-title / .cafe-sub-title / .cafe-subtotal)
   Rename to h1/h2 + kit classes to retire these.
   ------------------------------------------------------------ */

.cafe-page-title,
.cafe-sub-title,
.cafe-subtotal {
  color: var(--sc-navy) !important;
}

.cafe-page-title {
  font-weight: var(--sc-weight-bold);
}


/* ------------------------------------------------------------
   2. Inner-page hero band — .inner-heder, 7 files.
   The single most visible surface on the site.
   ------------------------------------------------------------ */

.inner-heder,
#save {
  background: var(--sc-light-blue);
}


/* ------------------------------------------------------------
   3. Utility link colours — .color-blue is used in 42 files.
   Equivalent to the kit's .sc-link-utility.
   ------------------------------------------------------------ */

a.order-id,
a.price-link,
a.service-link,
.extra-cont p a,
.color-blue,
.span_link {
  color: var(--sc-light-blue) !important;
  font-weight: var(--sc-weight-semi);
}

a.order-id:hover,
a.price-link:hover,
a.service-link:hover,
.color-blue:hover {
  color: var(--sc-light-blue) !important;
  text-decoration: underline;
}


/* ------------------------------------------------------------
   4. Bootstrap .form-control — 32 files.
   Legacy pinned it to 14px !important, below the 16px floor that
   stops iOS Safari zooming the page on focus.
   ------------------------------------------------------------ */

.form-control {
  box-sizing: border-box;
  font-family: var(--sc-font);
  font-size: var(--sc-body) !important;
  color: var(--sc-text) !important;
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  max-width: 100%;
}

.form-control:focus {
  border-color: var(--sc-light-blue);
  box-shadow: 0 0 0 3px rgba(0, 181, 226, .2);
}


/* ------------------------------------------------------------
   5. Order-flow chrome still keyed off legacy ids/classes
   ------------------------------------------------------------ */

/* Cart summary panel */
#form-total h4,
#form-total h5 {
  color: var(--sc-navy);
}

/* Service-form submit (custom-page-builder block) */
.add-to-cart {
  background-color: var(--sc-orange) !important;
  color: var(--sc-on-brand) !important;
  border-radius: var(--sc-radius) !important;
}

.add-to-cart:hover {
  background-color: var(--sc-bg) !important;
  color: var(--sc-orange) !important;
  border: 1px solid var(--sc-orange) !important;
}

/* Pill tabs (media selector) */
.cafe-tab-nav .nav-tabs {
  background-color: var(--sc-orange);
  border-radius: var(--sc-radius-pill);
}

.cafe-tab-nav .nav-tabs button {
  background-color: transparent;
  border-radius: var(--sc-radius-pill);
  color: var(--sc-on-brand);
  font-family: var(--sc-font);
  font-size: var(--sc-small);
}

.cafe-tab-nav .nav-tabs button.active {
  background-color: var(--sc-bg);
  color: var(--sc-navy);
}

/* Wizard card + stepper (steps.css) */
.wizard-v5-content {
  box-shadow: var(--sc-shadow-card);
  border-radius: var(--sc-radius-lg);
  font-family: var(--sc-font);
}

.form-register .steps li.current a .step-icon,
.form-register .steps li.current a:active .step-icon {
  background: rgba(255, 131, 3, .2);
  border-color: var(--sc-orange);
  color: var(--sc-orange);
}

.form-register .steps li.done a .step-icon,
.form-register .steps li.done a:active .step-icon {
  background: var(--sc-orange);
  border-color: var(--sc-orange);
  color: var(--sc-on-brand);
}


/* ------------------------------------------------------------
   6. Shared chrome keyed off legacy ids
   ------------------------------------------------------------ */

/* Promo bar sits on navy */
#topHead h1,
#topHead h2 {
  color: var(--sc-on-brand);
}

/* Mega-menu: h6 is an eyebrow in the kit, but a menu title here */
#navbarCollapse .col-megamenu li a,
#navbarCollapse h6.title,
#sidebar .col-megamenu li a {
  color: var(--sc-navy);
  text-transform: none;
  letter-spacing: normal;
}

#navbarCollapse .col-megamenu li a:hover,
#navbarCollapse h6.title a:hover,
#navbarCollapse h6.title a.active {
  color: var(--sc-light-blue);
}

/* Footer sits on navy */
footer {
  background: var(--sc-navy);
}

footer p {
  color: var(--sc-light-blue);
}

footer a {
  color: var(--sc-on-brand);
}

footer a:hover {
  color: var(--sc-light-blue);
}

footer .footer-full-width,
footer .footer-copyright {
  color: var(--sc-on-brand);
  font-size: var(--sc-small);
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
}