/*
 * sbl-enrich-bands.css — the two things the dark recognition band needs that no
 * Elementor control can give it.
 *
 * SCOPE. Every rule is inside .sbl-enrich-recognition or .sbl-contact. Nothing
 * here reaches a header, a footer, an archive, an article or any other band, and
 * no element type is styled globally.
 *
 * WHY IT EXISTS AT ALL. An Elementor text editor has no link colour control and
 * no focus control, and an Elementor button has no focus control either. So on a
 * graphite band the anchors take whatever the theme draws -- the same gap that
 * put the Hello theme's pink on the archive intro -- and a white button on teal
 * is exactly where a weak focus outline disappears. Both are stylesheet work
 * because there is no setting to write.
 */

/* ------------------------------------- the footer's disclaimer anchors (MEASURED) */

/*
 * THIS ONE IS NOT A PRECAUTION. A public mobile screenshot shows footer 22's
 * text-editor 6c964d7 rendering its "Jameson Law" anchor DARK PINK on the
 * graphite footer -- the Hello theme's rgb(204,51,102), unreadable. Same cause as
 * the band anchors below and as the archive intro on another brand: a text editor
 * has no link colour control, so the theme decides.
 *
 * Scoped to text-editor widgets inside the footer, NOT to .sbl-footer a. The four
 * link columns are icon-lists whose colours ARE native settings, bound to
 * sblondark and sblsurface, and Elementor emits those at a higher specificity than
 * a single class -- but a blanket rule here would still be a rule aimed at
 * elements that already have an answer. This one is aimed only at the paragraphs
 * that do not.
 */
.sbl-footer .elementor-widget-text-editor a {
	color: #DEDBD4;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

.sbl-footer .elementor-widget-text-editor a:hover,
.sbl-footer .elementor-widget-text-editor a:active {
	color: #FFFFFF;
	text-decoration-thickness: 2px;
}

.sbl-footer .elementor-widget-text-editor a:focus {
	outline: 2px solid #FFFFFF;
	outline-offset: 3px;
}

.sbl-footer .elementor-widget-text-editor a:focus:not(:focus-visible) {
	outline: none;
}

.sbl-footer .elementor-widget-text-editor a:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 3px;
}

/* ----------------------------------- WHY THE CLASS IS DOUBLED FROM HERE DOWN */

/*
 * THE COMPETING RULE IS NOW KNOWN, AND IT IS A TIE.
 *
 * The installed stylesheet carries
 *
 *   .sbl-enrich-team a,
 *   .sbl-enrich-recognition a,
 *   .sbl-enrich-enquiry a { color: var(--sbl-copper-fill, #AA573B); }
 *
 * and a matching :focus-visible pair. That is (0,2,0) -- exactly what
 * `.sbl-enrich-recognition a` is. A one-class-to-one-class tie is settled by
 * document order, and this file's order depends on whether the handle it
 * declares as a dependency is the one that ships those rules. That is a
 * coincidence to depend on, and this repository has already lost a day to the
 * same tie between a brand sheet and Elementor Pro's posts CSS.
 *
 * So the scope class is doubled: (0,3,0), which wins whatever loads first.
 * No !important anywhere -- a doubled class keeps the editor's own per-element
 * rules above this file, which is the order that has to hold.
 *
 * It also matters for CONTRAST, not only tidiness: copper #AA573B on the
 * graphite band is 2.36:1. If the tie went the other way the band's links would
 * be the one unreadable thing on it.
 */

/* --------------------------------------------------- recognition band anchors */

/*
 * #DEDBD4 IS --sbl-on-dark AND IT IS 10.35:1 ON #252B30.
 *
 * --sbl-copper-on-dark #C0836E was the obvious choice and is not used: it is
 * 4.58:1, which passes AA for normal text and spends most of the headroom on a
 * band where this text is set at sblsmall. A link does not have to be a
 * different hue to be a link when it is underlined, and the underline here is
 * not optional.
 */
.sbl-enrich-recognition.sbl-enrich-recognition a {
	color: #DEDBD4;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

/* Hover RAISES contrast to 14.32:1 rather than lowering it, which is the way
   round a hover state should go and the way round it usually is not. */
.sbl-enrich-recognition.sbl-enrich-recognition a:hover,
.sbl-enrich-recognition.sbl-enrich-recognition a:active {
	color: #FFFFFF;
	text-decoration-thickness: 2px;
}

/*
 * A VISIBLE KEYBOARD FOCUS, AND :focus AS WELL AS :focus-visible.
 *
 * :focus-visible is what a mouse user should not see; :focus is what a browser
 * without it still honours. Declaring only the first leaves older browsers with
 * no ring at all, and declaring only the second puts a ring on every click.
 */
.sbl-enrich-recognition.sbl-enrich-recognition a:focus {
	outline: 2px solid #FFFFFF;
	outline-offset: 3px;
}

.sbl-enrich-recognition.sbl-enrich-recognition a:focus:not(:focus-visible) {
	outline: none;
}

.sbl-enrich-recognition.sbl-enrich-recognition a:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 3px;
}

/* ------------------------------------------- the white CTA on the teal band */

/*
 * TWO RINGS, BECAUSE ONE CANNOT BE SEEN ON BOTH GROUNDS.
 *
 * The button is #FFFFFF on a #205F5B band. A white ring vanishes against the
 * button; a teal ring vanishes against the band. So the inner ring is the band's
 * own teal, which is 7.37:1 against the white it sits on, and the outer halo is
 * white, which is 7.37:1 against the teal it sits on. Whichever edge a viewer's
 * eye lands on, something is visible.
 *
 * The button's own border is 1px, so outline-offset 0 puts the dark ring
 * immediately outside it rather than over the label.
 */
.sbl-contact .elementor-button:focus {
	outline: 3px solid #205F5B;
	outline-offset: 0;
	box-shadow: 0 0 0 6px #FFFFFF;
}

.sbl-contact .elementor-button:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}

.sbl-contact .elementor-button:focus-visible {
	outline: 3px solid #205F5B;
	outline-offset: 0;
	box-shadow: 0 0 0 6px #FFFFFF;
}

/* ------------------------------------- the transparent button on the white band */

/*
 * The "Meet the team" button has a transparent background on a white band, so a
 * graphite ring is visible and a white one is not. 14.32:1 on #FFFFFF.
 *
 * Its colours are native settings -- graphite text, graphite-soft on hover -- and
 * only the ring is here, for the same reason as above: there is no focus control.
 */
.sbl-enrich-team.sbl-enrich-team .elementor-button:focus {
	outline: 2px solid #252B30;
	outline-offset: 3px;
}

.sbl-enrich-team.sbl-enrich-team .elementor-button:focus:not(:focus-visible) {
	outline: none;
}

.sbl-enrich-team.sbl-enrich-team .elementor-button:focus-visible {
	outline: 2px solid #252B30;
	outline-offset: 3px;
}

/* ------------------------------------------- the awards card stops being a box */

/*
 * MEASURED ON THE PUBLIC PAGE: the transparent PNG renders inside a white box.
 * The native containers are innocent -- Home's e999728 and About's 244c5cd have
 * padding 0 on all sides and no background key or global at all. The box comes
 * from the installed stylesheet:
 *
 *   .sbl-enrich-recog-card--awards {
 *     background: #fff;
 *     border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
 *     border-radius: 10px;
 *     padding: 16px;
 *   }
 *
 * And that rule is RIGHT where it was written. The awards card was designed as
 * artwork on a light page, where a white card with a hairline is exactly what it
 * should be. On a graphite band the artwork's own alpha is the whole point, so
 * the same card has to stop being a box -- which is the identical correction
 * another brand in this portfolio already carries in its own sheet, scoped to
 * its v3 recognition band. This one is scoped to .sbl-enrich-recognition,
 * because that is the class this brand's live band actually has.
 *
 * SCOPED TO --awards AND NOTHING ELSE. The event photograph sits in a plain
 * .sbl-enrich-recog-card, which has no rule of its own and is not touched, and
 * the img rules that keep the artwork whole and uncropped are left exactly as
 * they are. box-shadow is cleared although the rule above sets none: if a later
 * rule adds one, a box is back and nothing here would have said so.
 */
.sbl-enrich-recognition.sbl-enrich-recognition .sbl-enrich-recog-card--awards {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
}

/* ------------------------------- the team button's innermost span (MEASURED) */

/*
 * The native colour reached the anchor, its wrapper and its icon -- all three
 * compute #252B30 on the public page -- and NOT the deepest element. The
 * installed sheet carries
 *
 *   .sbl-enrich-team .elementor-button,
 *   .sbl-enrich-team .elementor-button-text { color: var(--sbl-copper-fill, #AA573B); }
 *
 * so `.elementor-button-text` has a colour of its own and inherits nothing. The
 * label stayed copper inside a graphite button, which is the kind of defect that
 * looks like a rendering bug and is a specificity fact.
 *
 * `inherit` rather than a literal, deliberately: the button's colour is a NATIVE
 * setting, and the native plan sets graphite resting and graphite-soft on hover.
 * Writing #252B30 here would put a second copy of that decision in a stylesheet,
 * and the next person to change the button in the editor would watch the label
 * refuse to follow. Inherit keeps the control in charge.
 */
.sbl-enrich-team.sbl-enrich-team .elementor-button .elementor-button-text,
.sbl-enrich-team.sbl-enrich-team .elementor-button:hover .elementor-button-text,
.sbl-enrich-team.sbl-enrich-team .elementor-button:focus .elementor-button-text,
.sbl-enrich-team.sbl-enrich-team .elementor-button:focus-visible .elementor-button-text {
	color: inherit;
}

/* ------------------------- the awards card's own focus ring (MEASURED, 390px) */

/*
 * THE UA RING IS BLACK ON GRAPHITE, WHICH IS 1.47:1.
 *
 * The native attributes made the scroll region reachable and the keyboard test
 * confirms it: at 390 the card takes focus, ArrowRight moves scrollLeft by 40,
 * and the box is 327 wide around 520 of content. So the region works -- and the
 * outline the browser draws for it is rgb(0,0,0) solid 2px against #252B30,
 * which is a focus indicator nobody can see. An unreachable region and an
 * invisible ring fail the same criterion for the same person.
 *
 * White is 14.32:1 on that band and is already what this file draws for the
 * anchors beside it, so the ring matches its neighbours rather than introducing
 * a third convention. 2px with 3px of offset, the same as those anchors: the
 * offset matters more than usual here because the card's padding is now 0 and
 * the artwork runs to its edge, so a ring at offset 0 would sit on the badges.
 *
 * :focus first for browsers without :focus-visible, then reset for the mouse,
 * then :focus-visible -- the same three-rule shape as everything above, for the
 * same reason: one of them alone either misses old browsers or rings every
 * click.
 */
.sbl-enrich-recognition.sbl-enrich-recognition .sbl-enrich-recog-card--awards:focus {
	outline: 2px solid #FFFFFF;
	outline-offset: 3px;
}

.sbl-enrich-recognition.sbl-enrich-recognition .sbl-enrich-recog-card--awards:focus:not(:focus-visible) {
	outline: none;
}

.sbl-enrich-recognition.sbl-enrich-recognition .sbl-enrich-recog-card--awards:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 3px;
}