/**
 * Body-content Materialize shim — class hooks site editors hand-wrote
 * into CKEditor body fields (.btn, .btn-flat, .btn-floating, .card, .card-panel,
 * .bg, .hidden, .clearfix, .z-depth-1, .button). Extracted from chrome.css
 * in P9b/P11 prep. ~40 published node body rows currently rely on these
 * markup classes; a future content scrub (P11) can either rewrite the
 * editorial HTML or keep this shim as a permanent body-content surface.
 */





.clearfix {
  clear: both;
}




.card-panel {
  margin: 0.8rem 0 1.6rem 0;
  padding: 24px;
  border-radius: 2px;
  transition: box-shadow 0.25s;
  background-color: #fff;
}




.card {
  position: relative;
  margin: 0.8rem 0 1.6rem 0;
  border-radius: 2px;
  background-color: #fff;
  transition: box-shadow 0.25s;
}




.btn, .btn-small, .btn-large,
.btn-flat {
  -webkit-tap-highlight-color: transparent;
  display: inline-block;
  height: 36px;
  padding: 0 2rem;
  border: none;
  border-radius: 2px;
  line-height: 36px;
  text-transform: uppercase;
  vertical-align: middle;
}




.btn,
.btn-floating,
.btn-large,
.btn-small,
.btn-flat {
  outline: 0;
  font-size: 1rem;
}




.btn, .btn-small, .btn-large {
  background-color: #fdfdfd;
  color: #1e2031;
  letter-spacing: 0.5px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease-out;
}




.btn-floating {
  display: inline-block;
  z-index: 1;
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0;
  overflow: hidden;
  border-radius: 50%;
  background-color: #e0e0e0;
  color: #757575;
  line-height: 40px;
  vertical-align: middle;
  cursor: pointer;
  transition: background-color 0.3s;
}




.btn-large {
  height: 54px;
  padding: 0 28px;
  font-size: 15px;
  line-height: 54px;
}




.btn-small {
  height: 32.4px;
  font-size: 13px;
  line-height: 32.4px;
}




.button,
.btn {
  -webkit-tap-highlight-color: transparent;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  height: 36px;
  padding: 0 2rem;
  border: none;
  border-radius: 2px;
  outline: 0;
  font-size: 1rem;
  line-height: 36px;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
  background-color: #fdfdfd;
  color: #1e2031;
  letter-spacing: 0.5px;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: 0.2s ease-out;
  max-width: 100%;
  height: auto;
  margin-bottom: 1.6rem;
  padding-top: 5px;
  padding-bottom: 5px;
  line-height: 20px;
  white-space: normal;
}




/* Materialize colour-variant button. Editors hand-write `.btn btn-info` into
   CKEditor body fields (notably the "Send your menu design request" CTA on the
   service pages). The base `.btn` above renders white/dark; `.btn-info` is the
   brand-blue filled variant. Dropped when legacy.css was deleted, so the button
   fell back to the white base — these values reproduce prod's computed service-
   page button (solid #009fed, white text, 1px brand border, 5px radius). Comes
   after the base `.btn` block so it wins on equal (single-class) specificity. */
.btn-info {
  height: 36px;
  margin-bottom: 0;
  padding: 0 15px;
  border: 1px solid var(--color-brand);
  border-radius: var(--radius-md);
  background-color: var(--color-brand);
  box-shadow: none;
  color: #fff;
  font-weight: 300;
  line-height: 1.42857rem;
  text-transform: none;
}

.btn-info:hover,
.btn-info:focus {
  background-color: #0da4ee;
  box-shadow: none;
  color: #fff;
}




/* `.btn-primary` — the brand-blue hero CTA variant, paired in markup with
   `.btn-pulse` (the pulsing glow, below). Like `.btn-info` it was dropped with
   legacy.css, so the hero CTA fell back to the white base. Values reproduce
   prod's computed CTA (solid #009fed, white text, 5px radius, font-weight 300).
   `.waves-effect`/`.waves-button` on the same element drive a click-time ripple
   via waves.js — not restored here (no at-rest visual). */
.btn-primary {
  margin-bottom: 1rem;
  padding: 9.5px 16px;
  border: none;
  border-radius: var(--radius-md);
  background-color: var(--color-brand);
  box-shadow: 0 5px 6.65px 0.35px rgba(140, 143, 144, 0.5);
  color: #fff;
  font-weight: 300;
  line-height: 1.42857rem;
}

/* Pulsing glow — pure CSS, no JS. Expands a soft white ring on a 2s loop;
   stops + turns teal on hover. The `pulse` keyframes were stripped from
   chrome.css as "unused" once `.btn-pulse` (their only consumer) was dropped,
   so the keyframes are restored here alongside the rule that uses them. */
.btn-pulse {
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  animation: pulse 2s ease infinite;
}

.btn-pulse:hover {
  background-color: var(--color-accent);
  animation: none;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); }
  70%  { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}




.card {
  background: #ffffff;
  box-shadow: 0 4px 5.7px 0.3px rgba(140, 143, 144, 0.5);
}




.hidden {
  display: none !important;
}




.button {
  font-size: 14px;
  font-size: 1rem;
  line-height: 20px;
  line-height: 1.4285714286rem;
  letter-spacing: 0.1px;
  letter-spacing: 0.0071428571rem;
  font-weight: 400;
  text-transform: inherit;
  margin: 0 0 10px 0;
  margin-bottom: 1rem;
  color: #212121;
}




.bg {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  padding: 7px 5px;
}




@media only screen and (min-width : 993px) {

  .bg {
    width: auto;
    max-width: 50%;
  }
}





.bg .image-wrapper {
  width: 50px;
  margin-right: 10px;
}




.bg .image-wrapper img {
  display: flex;
  width: 50px;
  height: auto;
}




.bg .text-wrapper {
  font-size: 12px;
  font-size: 0.8571428571rem;
  line-height: 18px;
  line-height: 1.2857142857rem;
  letter-spacing: 0.2px;
  letter-spacing: 0.0142857143rem;
  font-weight: 300;
  text-transform: inherit;
  margin: 0 0 10px 0;
  margin-bottom: 1rem;
  color: #757575;
  margin: 0 10px 0 0;
  color: #FFF;
}




.bg .text-wrapper p:first-child {
  margin-top: 0;
}




.bg .text-wrapper p:last-child {
  margin-bottom: 0;
}




.btn-flat {
  -webkit-tap-highlight-color: transparent;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  height: 36px;
  border: none !important;
  border-radius: 2px;
  outline: 0;
  font-size: 1rem;
  line-height: 36px;
  vertical-align: middle;
  padding: 0 1rem;
  background-color: transparent !important;
  box-shadow: none !important;
  color: #009fed !important;
  text-transform: none;
  cursor: pointer;
  transition: background-color 0.2s;
  white-space: normal;
}




.btn-flat:focus, .btn-flat:hover {
  box-shadow: none !important;
}




.btn-flat:focus {
  background-color: rgba(0, 0, 0, 0.1) !important;
}