/*
 * The Tutorials / Docs / Support strip, at the top of every MeetingHub screen.
 *
 * Printed by includes/Admin/Mhub_Help_Links.php on `in_admin_header`, which
 * fires inside #wpcontent and before #wpbody. That is above wp-admin's own
 * notice area, so the strip has to supply its own left gutter: nothing has
 * indented the page yet at that point.
 *
 * Ported from the React version this replaces, which lived in
 * assets/src/components/dashboard/Header.js and only ever reached All Meetings.
 */

.mhub-help-links {
	box-sizing: border-box;
	/*
	 * The same box every page under this row centres in.
	 *
	 * This strip is printed on in_admin_header, which fires inside #wpcontent
	 * and before #wpbody, so it never gets the 20px right padding
	 * #wpbody-content carries (assets/css/admin.css). Adding it here is what
	 * puts the two boxes on the same two edges; the gutter itself then lives on
	 * __inner, exactly as it does on .settings-container.
	 */
	padding: 14px 20px 0 0;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

.mhub-help-links *,
.mhub-help-links *::before,
.mhub-help-links *::after {
	box-sizing: border-box;
}

/*
 * Ranged right, and capped at the same 1420px the admin screens use, so the
 * last link lands on the same edge as the page content below it rather than
 * against the browser window.
 */
.mhub-help-links__inner {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 2px;
	max-width: 1420px;
	margin: 0 auto;
	padding: 0 var( --mhub-page-gutter, 24px );
}

/*
 * Pulls the last link's padding box past the gutter so its *label* lands on the
 * same column edge as the page's own primary button below it. Aligning the
 * padding box instead leaves the text 24px short, which is the usual reason a
 * header's right edge looks ragged.
 *
 * Measured: label right edge and "Add new" right edge both land on 1416.
 */
.mhub-help-links__item:last-child {
	margin-right: -10px;
}

/*
 * Upgrade, at the end of the row, printed only while the free plugin is the
 * one running.
 *
 * A filled control, so its box is what lands on the page's right column edge -
 * which is why the -10px above stops applying the moment it is here: that rule
 * exists to pull a *label* out to the edge, and this one has a background to
 * align instead.
 *
 * Navy and gold rather than the plugin's blue. Blue is what every primary
 * action on every screen already wears, so an Upgrade button in it reads as one
 * more of them; these two colours belong to the Pro band at the foot of the
 * page, and the two now say the same thing at both ends of the screen.
 */
.mhub-help-links__upgrade,
.mhub-help-links__upgrade:link,
.mhub-help-links__upgrade:visited {
	position: relative;

	/*
	 * Both are load-bearing.
	 *
	 * `overflow` clips the sheen below to the pill, so the highlight runs to
	 * the rounded ends and stops rather than escaping as a rectangle.
	 * `isolation` gives the anchor its own stacking context, which is what
	 * lets the hover tint sit at `z-index: -1` - above this element's own
	 * background, still behind its label - instead of falling through to
	 * whatever is painted under the strip.
	 */
	overflow: hidden;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 32px;
	margin-left: 8px;
	padding: 0 15px;
	border-radius: 999px;

	/*
	 * Lit from the top left rather than filled flat. A single navy was the one
	 * thing on this strip with no depth to it, which read as a placeholder
	 * beside the ghost links rather than as the one paid control in the row.
	 *
	 * The colour stays the Pro band's navy: only the light on it is new. White
	 * measures 13.1:1 on the lightest stop, so the gradient costs nothing in
	 * contrast.
	 */
	background-color: #0a1b33;
	background-image: linear-gradient( 135deg, #15305a 0%, #0e2342 48%, #0a1b33 100% );
	color: #fff;
	font-size: 13px;
	line-height: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-decoration: none;

	/*
	 * The first inset is a gold hairline at 16%, which is the whole point of
	 * the ring: it carries the accent colour around the pill so the bolt is
	 * not the only warm thing on a cold shape. Any stronger and it reads as a
	 * border somebody forgot to finish.
	 */
	box-shadow:
		inset 0 0 0 1px rgba( 240, 194, 90, 0.16 ),
		inset 0 1px 0 rgba( 255, 255, 255, 0.14 ),
		0 1px 2px rgba( 10, 27, 51, 0.3 ),
		0 4px 10px -3px rgba( 10, 27, 51, 0.28 );
	transition: transform 180ms cubic-bezier( 0.2, 0.8, 0.3, 1 ), box-shadow 180ms ease;
}

/*
 * The hover tint, as a fading overlay rather than a second gradient on the
 * element itself.
 *
 * `background-image` does not interpolate, so swapping one gradient for another
 * on hover snaps. Crossfading a second gradient over the first is what makes
 * the lift read as lighting rather than as a repaint.
 */
.mhub-help-links__upgrade::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background-image: linear-gradient( 135deg, #1c3a68 0%, #12294c 48%, #0d2340 100% );
	opacity: 0;
	transition: opacity 180ms ease;
}

/*
 * The sheen: one narrow band of light that crosses the pill once per hover.
 *
 * An animation rather than a transition, because a transition would run the
 * band backwards across the button when the pointer leaves, which reads as a
 * glitch. An animation plays out and leaves the band parked off the left edge.
 *
 * No `z-index`, deliberately. A positioned pseudo-element paints above the
 * anchor's inline content, so the light passes over the word and the bolt,
 * which is the only reason to have it.
 */
.mhub-help-links__upgrade::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 42%;
	pointer-events: none;
	background-image: linear-gradient(
		100deg,
		rgba( 255, 255, 255, 0 ) 0%,
		rgba( 255, 255, 255, 0.18 ) 50%,
		rgba( 255, 255, 255, 0 ) 100%
	);
	transform: translateX( -170% ) skewX( -18deg );
}

.mhub-help-links__upgrade:hover::after,
.mhub-help-links__upgrade:focus-visible::after {
	animation: mhub-help-upgrade-sheen 760ms cubic-bezier( 0.22, 0.61, 0.36, 1 );
}

@keyframes mhub-help-upgrade-sheen {

	from {
		transform: translateX( -170% ) skewX( -18deg );
	}

	to {
		transform: translateX( 380% ) skewX( -18deg );
	}
}

/*
 * Every state re-declares the label colour, for the reason the links below do:
 * wp-admin ships `a:hover, a:focus { color: <scheme blue> }` at specificity
 * (0,1,1), which outranks a plain class - and on a navy fill that turns a white
 * label admin-blue.
 */
.mhub-help-links__upgrade:hover,
.mhub-help-links__upgrade:focus,
.mhub-help-links__upgrade:focus-visible {
	color: #fff;
	text-decoration: none;
	transform: translateY( -1px );

	/*
	 * The gold hairline comes up with the lift, and the last shadow is a warm
	 * halo rather than another navy one. A cool shadow under a cool button only
	 * says "raised"; the halo is what says the raised thing is the gold one.
	 */
	box-shadow:
		inset 0 0 0 1px rgba( 240, 194, 90, 0.28 ),
		inset 0 1px 0 rgba( 255, 255, 255, 0.18 ),
		0 2px 4px rgba( 10, 27, 51, 0.28 ),
		0 8px 16px -5px rgba( 10, 27, 51, 0.32 ),
		0 6px 20px -8px rgba( 240, 194, 90, 0.38 );
}

.mhub-help-links__upgrade:hover::before,
.mhub-help-links__upgrade:focus::before,
.mhub-help-links__upgrade:focus-visible::before {
	opacity: 1;
}

.mhub-help-links__upgrade:focus-visible {
	outline: 2px solid #085df2;
	outline-offset: 2px;
}

/*
 * Pressed: the light goes out.
 *
 * `background-image` has to be re-declared, not just `background-color`. The
 * resting gradient would otherwise paint straight over a flat colour set
 * underneath it and the press would look identical to the hover.
 */
.mhub-help-links__upgrade:active {
	background-color: #06101f;
	background-image: linear-gradient( 135deg, #0c2140 0%, #06101f 100% );
	color: #fff;
	transform: translateY( 0 );
	box-shadow:
		inset 0 0 0 1px rgba( 240, 194, 90, 0.12 ),
		inset 0 1px 3px rgba( 0, 0, 0, 0.4 );
}

.mhub-help-links__upgrade:active::before {
	opacity: 0;
}

/*
 * The bolt is filled rather than outlined: at 13px an outlined lightning glyph
 * collapses into a squiggle against a dark fill, and the silhouette is the only
 * reason to use this shape.
 *
 * `translateY(1px)` is the same measured pixel the help-link icons carry, and
 * it is written into the transform rather than beside it so the hover rule does
 * not drop it and jump the bolt up a pixel.
 */
.mhub-help-links__bolt {
	display: inline-flex;
	align-items: center;
	color: #f0c25a;
	transform: translateY( 1px );
	transition: transform 180ms cubic-bezier( 0.2, 0.8, 0.3, 1 ), color 180ms ease, filter 180ms ease;
}

/*
 * On hover the bolt lights itself as well as growing. `drop-shadow` follows the
 * glyph's silhouette where a `box-shadow` would halo its square box, which on a
 * lightning shape is the difference between a glow and a smudge.
 */
.mhub-help-links__upgrade:hover .mhub-help-links__bolt,
.mhub-help-links__upgrade:focus-visible .mhub-help-links__bolt {
	color: #f7d07a;

	/*
	 * 1.10, down from 1.14. The scale is a fixed proportion, so the bigger the
	 * bolt the more absolute travel the same multiplier buys: at 16px, 1.14
	 * moved it almost a pixel and a half and the growth started to read as a
	 * wobble rather than as a response.
	 */
	transform: translateY( 1px ) scale( 1.1 );
	filter: drop-shadow( 0 0 5px rgba( 240, 194, 90, 0.55 ) );
}

@media ( prefers-reduced-motion: reduce ) {

	.mhub-help-links__upgrade,
	.mhub-help-links__upgrade:hover,
	.mhub-help-links__upgrade:focus-visible,
	.mhub-help-links__upgrade:active {
		transform: none;
		transition: none;
	}

	/*
	 * The sheen goes entirely. It is a travelling highlight and nothing else,
	 * so there is no static version of it worth keeping - unlike the tint and
	 * the glow below, which are colour changes that happen to be animated and
	 * still tell you the pointer is on the button.
	 */
	.mhub-help-links__upgrade::after {
		display: none;
	}

	.mhub-help-links__upgrade:hover::after,
	.mhub-help-links__upgrade:focus-visible::after {
		animation: none;
	}

	.mhub-help-links__upgrade::before {
		transition: none;
	}

	/* Still nudged - the alignment is not motion, only the scale is. */
	.mhub-help-links__bolt {
		transform: translateY( 1px );
		transition: none;
	}

	.mhub-help-links__upgrade:hover .mhub-help-links__bolt,
	.mhub-help-links__upgrade:focus-visible .mhub-help-links__bolt {
		transform: translateY( 1px );
	}
}

.mhub-help-links__item,
.mhub-help-links__item:link,
.mhub-help-links__item:visited {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 0 10px;
	border-radius: 10px;
	font-size: 13px;

	/* Pins the label's line box to the icon's height. Without it the label
	   inherits wp-admin's `body { line-height: 1.4em }`, computes to 18.2px, and
	   the anchor ends up taller than the thing inside it. */
	line-height: 15px;
	font-weight: 500;
	text-decoration: none;

	/* Slate-600. Measured 7.07:1 on the admin's page grey. */
	color: #475569;
	transition: background-color 150ms ease, color 150ms ease;
}

/*
 * Every state re-declares its colour. wp-admin ships
 * `a:hover, a:focus { color: <scheme blue> }` at specificity (0,1,1), which
 * outranks a plain class, so a link that sets its colour once turns
 * admin-blue on hover in some colour schemes and not others.
 */
.mhub-help-links__item:hover,
.mhub-help-links__item:focus,
.mhub-help-links__item:focus-visible,
.mhub-help-links__item:active {
	background: #eef2f7;
	color: #0f172a;
	text-decoration: none;
	box-shadow: none;
}

/* wp-admin's `a:focus` box-shadow is suppressed above only because a real
   outline replaces it here. A shadow is not an outline; declaring one without
   removing the other stacks two rings. */
.mhub-help-links__item:focus-visible {
	outline: 2px solid #085df2;
	outline-offset: 2px;
}

/*
 * The icon is a step lighter than its label and darkens with it, driven from
 * the anchor rather than set on the icon. A `:hover` colour on a parent never
 * reaches a child that declares its own, so setting it on the icon is what
 * makes the two halves of one control come apart at exactly the moment the
 * pointer says they are one thing.
 *
 * `translateY(1px)` is measured, not taste. A line box is not symmetrical
 * around its letters - the ascent reserves room above the caps - so a perfectly
 * centred icon sits about 1px high next to the word.
 */
.mhub-help-links__icon {
	display: inline-flex;
	align-items: center;

	/*
	 * 4.16:1 on the strip. The icons carry the meaning of each link as much as
	 * the words do - a book, a speech bubble, a video player - so they are UI
	 * graphics and owe 3:1, not decoration. The #94a3b8 they had measured
	 * 2.39:1 and failed it.
	 */
	color: #64748b;
	transform: translateY( 1px );
	transition: color 150ms ease;
}

.mhub-help-links__item:hover .mhub-help-links__icon,
.mhub-help-links__item:focus-visible .mhub-help-links__icon {
	color: #475569;
}

@media ( prefers-reduced-motion: reduce ) {
	.mhub-help-links__item,
	.mhub-help-links__icon {
		transition: none;
	}
}

/*
 * The label folds away only when the row itself would wrap, which on its own
 * line is not until about 400px.
 *
 * The icon darkens at the same breakpoint. At slate-400 it measures 2.39:1,
 * which is fine while it is decoration beside a word carrying the meaning at
 * 7.07:1, and a genuine 1.4.11 failure the moment it becomes the only visible
 * affordance. Slate-500 measures 4.4:1, clear of the 3:1 a meaningful graphic
 * has to hold.
 */
@media ( max-width: 400px ) {
	.mhub-help-links__label {
		display: none;
	}

	.mhub-help-links__item {
		padding: 0 8px;
	}

	.mhub-help-links__icon {
		color: #64748b;
	}
}

/* wp-admin drops its left menu to a 36px rail here and to nothing below 600px,
   so the strip's own gutter follows it in rather than floating. */
@media ( max-width: 960px ) {
	.mhub-help-links {
		padding-left: 24px;
	}
}

@media ( max-width: 782px ) {
	.mhub-help-links {
		padding: 12px 14px 0;
	}

	.mhub-help-links__item:last-child {
		margin-right: -8px;
	}
}

/*
 * Touch targets.
 *
 * The resting sizes here - 36px for the links, 32px for the pill - are chosen
 * for a dense admin header read with a mouse, and they clear WCAG 2.2 AA, whose
 * 2.5.8 minimum is 24px. They do not clear the 44px that 2.5.5 and every mobile
 * platform guideline ask for, and a finger does not care that the row looks
 * tidy.
 *
 * Keyed on `pointer: coarse` first and a width second, because the question is
 * what somebody is touching the screen with, not how wide the screen is. A
 * touchscreen laptop at 1440px needs the bigger target; a narrow window on a
 * desktop does not, and only gets it because wp-admin has already switched to
 * its own touch layout by then.
 *
 * Height only. The horizontal padding is untouched, so nothing reflows or
 * wraps - the rows simply get taller, which is the axis that was short.
 */
@media ( pointer: coarse ), ( max-width: 782px ) {

	.mhub-help-links__item,
	.mhub-help-links__item:link,
	.mhub-help-links__item:visited {
		min-height: 44px;
	}

	.mhub-help-links__upgrade,
	.mhub-help-links__upgrade:link,
	.mhub-help-links__upgrade:visited {
		min-height: 44px;
	}
}