/* ---------------------------------------------------------------------
 * THE SERVICE CARDS OF /services/ AND THEIR ICONS
 *
 * Three classes, all handed out at runtime by inc/ccx-svccards.php:
 *
 *   .ccsvc-card     a framed tile in one of the six groups
 *   .ccsvc-ico      the round circle at the head of a card
 *   .ccsvc-ico-lg   the larger circle at the head of a group
 *
 * Nothing here draws the rim, the interior spot or the ring. All three are
 * the shared engine in assets/mm-rb.js, coloured by assets/cc-fx.css. What
 * this file does is set their scale to this page, and add the one behaviour
 * the engine has no notion of: an icon that lights when the pointer is on
 * the card it belongs to rather than on the icon itself.
 *
 * No page class anywhere in this file. The class names say what the element
 * is, they exist on no other page, and the module that hands them out is the
 * only place the page is named. A second page built from the same groups
 * later would need no line here.
 * ------------------------------------------------------------------ */


/* ---------------------------------------------------------------------
 * 1. HOW FAR THE AURA OF A CARD REACHES
 *
 * The rim is drawn on a box that stands --gc-pad past the card on every
 * side, and the cards of this page stand 24px apart, horizontally and
 * vertically, at every width they are shown side by side. Eighteen leaves
 * six pixels between the aura of one card and the frame of the next, which
 * is enough that the light reads as belonging to the card under the pointer
 * and not to the pair.
 *
 * The soft bloom around the ring is a box shadow and paints past that box
 * regardless, which is the intended spill; it is masked to the two arcs
 * nearest the pointer, so at most one neighbour is ever brushed.
 *
 * Only from 1025px up. Below that assets/ccfx-v3.css pulls --gc-pad back to
 * zero for every glow card on the site, because there the wide blocks are no
 * longer clipped and a box reaching past them widens the page. That rule is
 * a single class and this one is two, so it has to be kept inside a query
 * rather than left to the cascade.
 *
 * --edge-sensitivity is the share of the approach that passes before the rim
 * starts to show. Sixteen against the engine default of twenty: these tiles
 * are large and stand in threes, and a rim that waits too long reads as a
 * hover state rather than as an answer to an approaching pointer.
 * ------------------------------------------------------------------ */
@media (min-width: 1025px) {
  .ccsvc-card.mmrb-glowcard {
    --gc-pad: 18px;
    --edge-sensitivity: 16;
  }
}


/* ---------------------------------------------------------------------
 * 2. THE RING AROUND AN ICON
 *
 * Both sizes are round SVGs sitting in a box exactly as large as they are:
 * 64px at the head of a card, 80px at the head of a group. .ccx-glow-icon in
 * assets/cc-fx.css already gives the ring its 50% radius and a 10px reach,
 * which is the value the round icons of the home page use. Both are widened
 * a little here, because these circles carry a whole group above a headline
 * rather than sitting inside a slide, and because nothing stands close
 * enough to either of them for a wider aura to touch it.
 *
 * Two classes against the one of ccx-glow-icon, so these win; the media
 * query is not needed here for the same reason, and the icons therefore keep
 * their ring on narrow screens exactly as the round icons of the rest of the
 * site do.
 * ------------------------------------------------------------------ */
.ccsvc-ico.mmrb-glowcard {
  --gc-pad: 12px;
}

.ccsvc-ico-lg.mmrb-glowcard {
  --gc-pad: 14px;
}


/* ---------------------------------------------------------------------
 * 3. THE ICON ANSWERS THE CARD
 *
 * On its own an icon lights when the pointer comes within its own reach,
 * which for a 64px circle is a small area in the upper left of a 389px card.
 * A reader crossing the card sees the frame light up and the circle inside
 * it stay dark, and the card reads as two things rather than one.
 *
 * So the ring is given a resting brightness for as long as the pointer is
 * anywhere on the card. It is held well below the level the ring reaches
 * when the pointer is actually on the circle, so approaching the icon itself
 * still makes a visible difference, and the engine keeps steering the angle
 * of the arc from the real pointer position throughout.
 *
 * The rule the engine uses to keep a resting card dark is
 *   .mmrb-glowcard:not(:hover):not(.mmrb-near) > .mmrb-glowcard__edge
 * which counts four classes. This one counts six, so it settles above it
 * whatever order the stylesheets happen to load in.
 *
 * Pointer devices only. On a touch screen :hover latches after a tap and the
 * ring would stay lit on the card last touched.
 * ------------------------------------------------------------------ */
@media (hover: hover) and (pointer: fine) {
  .ccsvc-card.mmrb-glowcard:hover .ccsvc-ico.mmrb-glowcard > .mmrb-glowcard__edge {
    opacity: 0.42;
    transition: opacity 0.32s ease-out;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ccsvc-card.mmrb-glowcard:hover .ccsvc-ico.mmrb-glowcard > .mmrb-glowcard__edge {
    transition: none;
  }
}


/* ---------------------------------------------------------------------
 * 4. A HEADING THAT WAS READ AS A CARD
 *
 * A group is headed by a block built exactly like a card: same kind of
 * container, an icon, a title, a standfirst. What it does not have is a
 * frame, and a rim drawn on a block without one is a rectangle of light
 * around nothing.
 *
 * The module keeps the six headings the page has today off the card list by
 * name, and tells the heading of a group added later from its cards by its
 * title, h2 against h3. This is that same test written a second time, as a
 * net under the first: should a heading reach the card list anyway, it loses
 * the rim and the interior light again here. The icon ring is not touched,
 * because a heading is meant to have one.
 *
 * A selector a browser cannot parse costs nothing: the rule is dropped and
 * the page is back to the state this net was written to improve on.
 * ------------------------------------------------------------------ */
.ccsvc-card.mmrb-glowcard:has(> .elementor-widget-heading h2) > .mmrb-glowcard__edge,
.ccsvc-card.mmrb-glowcard:has(> .elementor-widget-heading h2) > .mmrb-glowcard__fill {
  display: none;
}


/* ---------------------------------------------------------------------
 * 5. A CONTAINER THAT HOLDS NOTHING
 *
 * A group can carry an empty container left over from its layout: no
 * widgets, full column width, no height. Naming the cards by their position
 * catches such a container along with the real cards, and the aura, which
 * reaches past the box on every side, then draws a 425 by 36 pixel strip of
 * light across a place where a reader sees nothing at all. The engine does
 * not catch it either; it skips an element of zero width, and this one is
 * 389 wide and zero high.
 *
 * The container in the WordPress group that this was found on has since been
 * filled with a real card, so today this rule matches nothing. It stays as
 * the guard for the next one, and for the window in which page text and
 * effect layer go live in different orders.
 * ------------------------------------------------------------------ */
.ccsvc-card.mmrb-glowcard:not(:has(.elementor-widget)) > .mmrb-glowcard__edge,
.ccsvc-card.mmrb-glowcard:not(:has(.elementor-widget)) > .mmrb-glowcard__fill {
  display: none;
}