/* ===========================================================================
 * The call inside an app block (post 1977)
 *
 * Every one of the three app blocks now carries the same button the reference
 * blocks of the home page carry: a dark pill with a hair line, a warm glow
 * lying inside it and the arrow in an orange disc at its right end.
 *
 * The shape is not invented here. It is the one that stands on the home page
 * under every reference block, and it was read off that page rather than
 * guessed: the numbers below are the ones the browser reports for
 * .ccref-btnw, whose own declarations live in the custom stylesheet of the
 * reference container f7ddec2 on post 8073. Only the scope is different, so
 * that a change to one page cannot move the other.
 *
 *   height        50px, which is 36 for the disc plus 6 above and below plus
 *                 the hair line
 *   text          15px / 600, line height 1.15, 14px on a phone
 *   inner padding 6 all round, 22 on the left, so the word keeps its distance
 *                 from the rounded end
 *   disc          36px, 32 on a phone, the arrow 15px inside it
 *   gap           12px between the word and the disc
 *
 * The widget box takes the corner radius as well, which is what lets the
 * pointer rim ride the round shape: ccfx-specular is written onto the widget
 * in the page data, the travelling light onto the link inside it from
 * inc/ccx-appbtn28.php. Two effects, two elements, exactly as the reference
 * button does it, because the light sets overflow:hidden and would otherwise
 * clip the rim canvas away.
 * ======================================================================== */

/* The widget box is only as wide as the button inside it and carries the
 * radius, so the rim has a round shape to trace. Without the flex line an
 * Elementor widget is a block that fills its column. */
.ccapp-btn28 {
  width: auto;
  flex: 0 0 auto;
  display: flex;
  border-radius: 999px;
}

.ccapp-btn28 > .elementor-widget-container { display: flex; }
.ccapp-btn28 .elementor-button-wrapper { display: flex; }

/* The button keeps its own stacking context, so the rim layer of the widget
 * stays behind the letters. The inset shadow is the warm light inside the
 * pill; on the first block that light used to come from a masked drawing
 * laid over the background picture, and it is the one part of the old
 * construction worth keeping. It grows a little under the pointer. */
.ccapp-btn28 .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  box-shadow: inset 0 0 26px rgba(255, 142, 43, 0.12);
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.ccapp-btn28 .elementor-button:hover,
.ccapp-btn28 .elementor-button:focus,
.ccapp-btn28 .elementor-button:focus-visible {
  box-shadow: inset 0 0 32px rgba(255, 142, 43, 0.20);
}

.ccapp-btn28 .elementor-button-content-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* The disc. The gradient is the one the calls to action of this site use,
 * read top left to bottom right, and the shadow under it is what lifts it
 * off the dark pill. */
.ccapp-btn28 .elementor-button-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  margin: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #FFA24D 0%, #E2680D 100%);
  box-shadow: 0 4px 12px rgba(206, 89, 4, 0.35);
}

.ccapp-btn28 .elementor-button-icon svg {
  width: 15px;
  height: 15px;
  display: block;
}

.ccapp-btn28 .elementor-button-text { line-height: 1.15; }

/* Where the button stands.
 *
 * flex-start does two jobs at once, which is why it is written once and not
 * per block. In the text column of the second and third block the parent
 * stacks its children, so flex-start means the left edge of the column, the
 * same place the first block has always had its button. In the first block
 * the button sits in a row beside the bare text link, and there flex-start
 * means the top edge of that row, which is where it belongs: the row is
 * 158px tall because the button carries a large margin below it, and without
 * this line a stretched widget would pull the pill to that full height.
 *
 * On a phone the second and third block used to centre their button while
 * the first one stood left. All three stand left now. */
.ccapp-btn28 { align-self: flex-start; }

/* The space the two old elements carried below them, kept so that no block
 * changes height by more than the six pixels the taller button costs.
 *
 * It is written here and not into the page data on purpose. A widget margin
 * set in the page builder lands on the container INSIDE the widget, which
 * makes the widget as tall as the button plus that space, and the pointer rim
 * traces the widget: the first block showed a 244 by 164 outline standing
 * under its button until this was moved out. On the widget itself the space
 * lies outside the box the rim traces, and the row keeps the height it had,
 * because a margin on a flex item counts towards the height of its row.
 *
 * First block: 114px on wide screens only, which is what holds the button row
 * open beside the bare text link. Second block: 90px in the tablet band
 * alone, which is what separates the button from the small print there; on a
 * phone that block had none and gets none.
 *
 * The class name stands three times because the page builder clears the
 * bottom margin of every widget inside a container twice over, once through
 * .e-con .elementor-widget.elementor-widget and once for widgets that size
 * themselves to their content, and both of those rules weigh three class
 * names. Written once the line is simply ignored. */
.ccapp-n1 .ccapp-btn28.ccapp-btn28.ccapp-btn28 { margin-bottom: 114px; }

@media (max-width: 1024px) {
  .ccapp-n1 .ccapp-btn28.ccapp-btn28.ccapp-btn28 { margin-bottom: 0; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .ccapp-n2 .ccapp-btn28.ccapp-btn28.ccapp-btn28 { margin-bottom: 90px; }
}

@media (max-width: 767px) {
  .ccapp-btn28 .elementor-button-icon { width: 32px; height: 32px; }
  .ccapp-btn28 .elementor-button-icon svg { width: 14px; height: 14px; }
}