/*
 * lpen-site-fixes.css
 *
 * Site-wide corrections to two defects the Elementor kit creates on every page.
 * Deployed 2026-09-13. Delete a block here the moment the kit itself is fixed
 * in Elementor -> Site Settings; each block says which setting makes it a no-op.
 *
 * ---------------------------------------------------------------------------
 * 1. THE THEME UNDERLINES EVERY BUTTON, LABEL AND ICON
 *
 * Hello Elementor Child underlines every <a>, and the kit's button typography
 * does not set text-decoration, so an Elementor button renders as an underlined
 * filled rectangle and the arrow icon inside it carries the underline too.
 * Measured 2026-09-13 logged out: 21 on the home page, 53 on /passes/, 8 on
 * /contact/, plus icon-only <a class="elementor-icon"> links on /courses/,
 * /instructors/ and /passes/.
 *
 * No-op once Site Settings -> Buttons -> Typography -> Decoration is set to None
 * (that fixes .elementor-button; a.elementor-icon still needs the rule below).
 * ---------------------------------------------------------------------------
 */
body.elementor-kit-8 .elementor-button,
body.elementor-kit-8 .elementor-button:hover,
body.elementor-kit-8 .elementor-button:focus,
body.elementor-kit-8 .elementor-button:visited,
body.elementor-kit-8 a.elementor-icon,
body.elementor-kit-8 a.elementor-icon:hover,
body.elementor-kit-8 a.elementor-icon:focus {
	text-decoration: none;
}

/*
 * A text link SHOULD keep its underline, but the icon beside it should not:
 * text-decoration propagates to in-flow descendants and a descendant cannot
 * switch it off. An atomic inline box is exempt, so display:inline-block takes
 * the icon out of the underline. vertical-align:middle is required with it --
 * an inline-block sits on the baseline and its descender space grows the line
 * box, which added 5-6px to every card and icon link when it was left out.
 * Buttons and icon links are excluded because the rule above already clears
 * them, and narrowing the selector keeps this off their internal flex layout.
 */
body.elementor-kit-8 a:not(.elementor-button):not(.elementor-icon) i,
body.elementor-kit-8 a:not(.elementor-button):not(.elementor-icon) svg,
body.elementor-kit-8 a:not(.elementor-button):not(.elementor-icon) .lpen-i,
body.elementor-kit-8 a:not(.elementor-button):not(.elementor-icon) .elementor-button-icon,
body.elementor-kit-8 a:not(.elementor-button):not(.elementor-icon) .elementor-icon-list-icon {
	display: inline-block;
	vertical-align: middle;
	text-decoration: none;
}

/*
 * ---------------------------------------------------------------------------
 * 2. EVERY BUTTON GROWS 6px ON HOVER
 *
 * The kit sets border-style:none normally and border-style:solid on :hover,
 * with transition:all .3s. When the style changes from none to solid inside a
 * transition Chrome does not honour the hover rule's border-width:0 and holds
 * the border at its initial value, medium = 3px, coloured currentColor. So the
 * button gains a 3px white ring and 6px of width and height for as long as the
 * pointer is on it. Measured on the /academy/ "See what's in the library"
 * button: 237x48 idle, 243x54 hovered; removing the transition alone returns it
 * to 237x48, which is the proof.
 *
 * Naming the transitioned properties instead of `all` keeps the .3s colour fade
 * and takes border-width out of it. Reported by the owner 2026-09-13 as the
 * "jumping button".
 *
 * No-op once Site Settings -> Buttons -> Normal -> Border Type is set to Solid
 * with width 0, so the style no longer changes between the two states.
 * ---------------------------------------------------------------------------
 */
body.elementor-kit-8 button,
body.elementor-kit-8 input[type="button"],
body.elementor-kit-8 input[type="submit"],
body.elementor-kit-8 .elementor-button {
	transition: background-color .3s, color .3s, border-color .3s, box-shadow .3s, opacity .3s, fill .3s;
}