/*
 * The MeetingHub Pro band, shown at the foot of every MeetingHub admin screen
 * while the free plugin is the one running.
 *
 * A port of the band inside the Get Started bundle
 * (assets/src/get-started/get-started.css, .mhub-gs-upcard), which is itself a
 * port of DriveHub's UpgradeCard. The values are matched deliberately - the
 * 20px radius, the 5px inner rule, the 28px column gap, the 0.26em eyebrow
 * tracking, the 56px seal - so the same band appears on Get Started and on every
 * other screen without anyone being able to tell which one drew it.
 *
 * Deliberately not built. It is a hundred lines of static CSS with no variables
 * to share and no build step to justify, so it sits beside admin.css and
 * fonts.css where the plugin's other plain stylesheets live.
 */

/*
 * Some MeetingHub screens hide #wpfooter to get a full-bleed layout - the
 * Dashboard does, and Get Started does the same thing for the same reason. This
 * band is printed inside that container, so on those screens it inherited
 * `display: none` and measured zero wide.
 *
 * Shown again, and only on the screens this stylesheet is loaded on, which is
 * only the screens the band actually renders on. WordPress's own footer line
 * comes back with it; that is standard admin furniture rather than something
 * this plugin should be suppressing.
 */
#wpfooter {
	display: block !important;

	/*
	 * WordPress pins #wpfooter with `position: absolute; bottom: 0`, which is
	 * right for the single line of text it was built to hold: it takes no room
	 * in the flow, so it never pushes a page taller.
	 *
	 * A 142px band cannot be pinned over the page like that. Measured on the
	 * Dashboard and on All Meetings, the band sat on top of the last of the
	 * content - the footer contributes no height, so the document simply ended
	 * underneath it.
	 *
	 * Letting the footer flow costs nothing on a long page and, on a short one,
	 * moves it up under the content instead of stranding it at the bottom of
	 * the viewport, which reads better anyway.
	 */
	position: static !important;
}

/*
 * `in_admin_footer` prints this inside #wpfooter, which WordPress styles for a
 * single line of small grey text: 13px, its own colour, and a top border. Those
 * three are undone here rather than fought with elsewhere.
 */
#wpfooter .mhub-uc {
	position: relative;
	box-sizing: border-box;
	margin: 4px 0 22px;
	overflow: hidden;
	border: 1px solid rgba( 240, 194, 90, 0.25 );
	border-radius: 20px;
	background:
		/*
		 * Engraved diagonal hatching, at the threshold of visible. This is the
		 * only texture on the card, and it is a ruled pattern rather than a soft
		 * blur, so it holds an edge the way printed board does.
		 */
		repeating-linear-gradient( 135deg, rgba( 255, 255, 255, 0.022 ) 0 1px, rgba( 255, 255, 255, 0 ) 1px 7px ),
		linear-gradient( 180deg, #0a1b33 0%, #06101f 100% );
	box-shadow: 0 18px 40px -28px rgba( 0, 0, 0, 0.85 );
	transition: transform 0.3s ease, border-color 0.3s ease;
}

#wpfooter .mhub-uc *,
#wpfooter .mhub-uc *::before,
#wpfooter .mhub-uc *::after {
	box-sizing: border-box;
}

#wpfooter .mhub-uc:hover {
	transform: translateY( -2px );
	border-color: rgba( 240, 194, 90, 0.45 );
}

/* Inner rule. A second line inset from the first is what makes an edge read as
   printed rather than as a container. */
#wpfooter .mhub-uc__rule {
	position: absolute;
	inset: 5px;
	pointer-events: none;
	border: 1px solid rgba( 240, 194, 90, 0.14 );
	border-radius: 15px;
}

/*
 * Wrapping row rather than a breakpoint switch.
 *
 * A width query reads the viewport, not the space this actually has, so on a
 * wide screen with a collapsed admin menu it would keep the horizontal layout
 * and squeeze the headline against a squashed button. Wrapping on a real
 * minimum means the button drops to its own line exactly when the text would
 * otherwise be crushed, at any viewport, with no breakpoint to keep in sync.
 */
#wpfooter .mhub-uc__row {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 28px;
	padding: 26px 22px;
}

@media ( min-width: 783px ) {
	#wpfooter .mhub-uc__row {
		padding: 32px;
	}
}

#wpfooter .mhub-uc__seal {
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	transition: transform 0.5s ease-out;
}

#wpfooter .mhub-uc:hover .mhub-uc__seal {
	transform: rotate( -7deg );
}

/* Fades at both ends so it never looks like a table border. Dropped on the
   narrowest widths, where the row has wrapped and there is nothing beside it
   to divide. */
#wpfooter .mhub-uc__divider {
	display: none;
	width: 1px;
	height: 56px;
	flex-shrink: 0;
	background: linear-gradient(
		to bottom,
		rgba( 240, 194, 90, 0 ) 0%,
		rgba( 240, 194, 90, 0.35 ) 50%,
		rgba( 240, 194, 90, 0 ) 100%
	);
}

@media ( min-width: 783px ) {
	#wpfooter .mhub-uc__divider {
		display: block;
	}
}

/* The minimum is what drives the wrap: below it the words start breaking, so
   the button leaves the row instead. */
#wpfooter .mhub-uc__text {
	min-width: 260px;
	flex: 1;
}

#wpfooter .mhub-uc__eyebrow {
	margin: 0;
	padding: 0;
	font-size: 10px;
	font-weight: 600;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.26em;
	color: #f0c25a;
}

/*
 * Deliberately plain. Every copywriting shape tried here read as an advert
 * before it read as a sentence, which puts the whole weight of the pitch on the
 * list underneath - so keep that list specific and ordered by what people
 * actually want, because the headline does none of that work.
 */
#wpfooter .mhub-uc__title {
	margin: 8px 0 0;
	padding: 0;
	font-size: 21px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: #fff;
}

#wpfooter .mhub-uc__features {
	margin: 8px 0 0;
	padding: 0;
	font-size: 13px;
	line-height: 1.6;
	color: #afbccf;
}

#wpfooter .mhub-uc__dot {
	color: rgba( 240, 194, 90, 0.6 );
}

/* Each item holds together: a run like this only reads as a list while every
   entry stays whole. */
#wpfooter .mhub-uc__feature {
	white-space: nowrap;
}

#wpfooter .mhub-uc__action {
	display: flex;
	flex-shrink: 0;
	align-items: center;
}

/*
 * Flat gold, not a metallic gradient: a solid block of the accent is more
 * confident than a polished one, and it is the same gold as the seal at the
 * other end of the band.
 *
 * Colour is re-declared on hover, focus and active, and the focus box-shadow is
 * cleared. WordPress ships `a:hover { color: <scheme blue> }` and
 * `a:focus { box-shadow: 0 0 0 2px <scheme blue> }` - the first would turn this
 * near-black label blue on a gold button, and the second is a shadow rather than
 * an outline, so declaring an outline stacks a blue ring on top instead of
 * replacing it.
 */
#wpfooter .mhub-uc__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: 12px;
	background: #f0c25a;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: #0b1730;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

#wpfooter .mhub-uc__btn:hover,
#wpfooter .mhub-uc__btn:focus-visible {
	background: #fbd87c;
	color: #0b1730;
}

#wpfooter .mhub-uc__btn:focus {
	color: #0b1730;
	box-shadow: none;
}

#wpfooter .mhub-uc__btn:focus-visible {
	outline: 2px solid #f0c25a;
	outline-offset: 3px;
}

#wpfooter .mhub-uc__btn:active {
	background: #dda83c;
	color: #0b1730;
}

#wpfooter .mhub-uc__btn svg {
	transition: transform 0.2s ease;
}

#wpfooter .mhub-uc:hover .mhub-uc__btn svg {
	transform: translateX( 2px );
}

/*
 * Once the row has wrapped, the action is alone on its own line, and a gold
 * pill at the left edge of a card reads as unfinished. Full width is what a
 * wrapped action wants.
 */
@media ( max-width: 782px ) {
	#wpfooter .mhub-uc__action,
	#wpfooter .mhub-uc__btn {
		width: 100%;
	}
}

/* Everything that moves, stopped. */
@media ( prefers-reduced-motion: reduce ) {
	#wpfooter .mhub-uc,
	#wpfooter .mhub-uc__seal,
	#wpfooter .mhub-uc__btn,
	#wpfooter .mhub-uc__btn svg {
		transition: none;
	}

	#wpfooter .mhub-uc:hover {
		transform: none;
	}

	#wpfooter .mhub-uc:hover .mhub-uc__seal {
		transform: none;
	}
}

/* ============================================================================
 * Alignment with the page above it
 *
 * The card is printed on `in_admin_footer`, inside #wpfooter, which is not the
 * box the page content is measured from: #wpfooter carries `padding: 10px 20px`
 * where #wpbody-content carries none. Laid out against the footer the card
 * landed at 180-1420 while the page content sat at 204-1416 - 24px out on the
 * left, 4px on the right, on every MeetingHub screen.
 *
 * Two wrappers rather than one, because correcting the box and centring inside
 * it are the same two properties and cannot both win on a single element.
 * ========================================================================== */

/*
 * Step one: match #wpbody-content's box exactly.
 *
 * This used to pull 20px off the right, because #wpbody-content ran to the
 * window edge and the footer did not. #wpbody-content now carries a 20px right
 * gutter of its own (assets/css/admin.css), which is the footer's own padding,
 * so the two boxes already agree and nothing needs reclaiming.
 */
#wpfooter .mhub-uc-fix {
	box-sizing: border-box;
	margin-right: 0;
}

/*
 * Step two: the rule every MeetingHub screen uses for its own content - capped
 * at 1420px, centred, 24px gutters. Because step one made the containing block
 * match, centring here puts the card on the same axis as the content above it
 * at any width, not only where the cap happens not to bind.
 */
#wpfooter .mhub-uc-align {
	box-sizing: border-box;
	max-width: 1420px;
	margin: 0 auto;

	/* The plugin's one page gutter, declared on #wpwrap in assets/css/admin.css.
	   The fallback matters: it is the value every screen used to hardcode. */
	padding: 0 var( --mhub-page-gutter, 24px );
}

/*
 * The card's own outer margin is now the gap between it and the page content,
 * so it is set here rather than left at the 4px that only ever separated it
 * from the footer's top border.
 */
#wpfooter .mhub-uc {
	margin: 28px 0 22px;
}

/*
 * Integrations only: pull the band off the category rail.
 *
 * That screen lays its content out as `grid-template-columns: 212px minmax(0,
 * 1fr)` with a 28px gap - see .mhub-layout in assets/src/scss/dashboard/
 * _addon.scss. A band running the full width of the body therefore passes
 * underneath the rail, and a dark block that starts at the sidebar's left edge
 * reads as the sidebar's own footer rather than as the end of the page. Moving
 * it by the rail plus the gap puts its left edge on the same pixel as the cards
 * above it, which is the only vertical line that screen has.
 *
 * Set on the card and not on .mhub-uc-align, because the align box owns the
 * page gutter and the 1420px cap; adding to its padding would change the
 * measure the cap applies to and put the band's right edge off the cards'.
 *
 * The modifier is printed only on that page - see Mhub_Upgrade_Card::render() -
 * so no other screen can pick this up.
 */
#wpfooter .mhub-uc-align--inset .mhub-uc {
	margin-left: 240px;
}

/*
 * The same breakpoint .mhub-layout collapses at. Below 960px the rail becomes a
 * row of chips above the cards and the grid is a single column, so there is
 * nothing left to clear and the offset would only push the band off-centre.
 */
@media ( max-width: 960px ) {
	#wpfooter .mhub-uc-align--inset .mhub-uc {
		margin-left: 0;
	}
}

/*
 * Below 782px the two boxes stop agreeing on the left as well.
 *
 * wp-admin folds the menu to a 36px rail and keeps that as #wpfooter's
 * margin-left, but #wpbody-content is no longer offset by it - the menu overlays
 * instead. The footer therefore starts 36px + its own 20px padding further in
 * than the page content.
 *
 * 46 rather than the footer's whole 56, because the page itself does not start
 * at zero down here: #wpcontent keeps a 10px inset, so cancelling the full
 * offset puts the band ten pixels to the left of the column rather than on it.
 *
 * This used to be 56 with a second rule restoring 46 below 600px, on the
 * reasoning that wp-admin drops the rail there. It does not - the footer
 * measures 36px of margin and 20px of padding at 782, 700, 600 and 480 alike -
 * so the two rules were one correction written twice, and the wider of them was
 * wrong. Measured at all four widths: band and card share a left edge.
 */
@media ( max-width: 782px ) {
	#wpfooter .mhub-uc-fix {
		margin-left: -46px;
	}
}

/* ============================================================================
 * Vertical rhythm
 *
 * The gap above the card measured 143px against 22px below it. That is not one
 * decision, it is four things stacking: the page container's own bottom padding
 * (40px on All Meetings, 20px on the settings screens), wp-admin's 65px reserve
 * under #wpbody-content, #wpfooter's 10px top padding, and the card's own 28px
 * margin. Below it, only the card's 22px margin.
 *
 * Where this card renders it is the last thing on the page, so it owns the
 * spacing around itself and everything above stops contributing. One number on
 * each side, set below.
 *
 * Scoped safely by loading: this stylesheet is enqueued only on the screens the
 * card actually renders on, so nothing here reaches a page without it.
 * ========================================================================== */

#wpbody-content {
	padding-bottom: 0;
}

#wpfooter {
	padding-top: 0;
}

/*
 * The page containers stop supplying a bottom gap of their own; they disagreed
 * with each other about it anyway - 40px on one screen, 20px on the next.
 *
 * The four ids are here because meeting.scss sets `padding: 30px 10px 30px 0` on
 * them at its small breakpoint, with id specificity a class cannot reach. That
 * is why the gap above the card stayed at 50px on All Meetings below 600px while
 * every other screen had already come into line.
 */
#meeting_hub_admin_dasboard,
#meetinghub_zoom_users,
#meetinghub_zoom_reports,
#meetinghub_zoom_recordings,
.mhub-am,
.mhub-cm,
.settings-container,
.mhub-admin-dasboard-bg {
	padding-bottom: 0;
}

/*
 * All Meetings stops supplying a horizontal gutter from its mount point too.
 *
 * The same meeting.scss rule is asymmetric on the axis nobody was looking at:
 * `padding: 30px 30px 30px 10px` normally, `30px 10px 30px 0` below its small
 * breakpoint. Right and left have never matched.
 *
 * Above about 1420px that is invisible, because `.mhub-am` is capped and its
 * `margin: 0 auto` simply absorbs whatever uneven space it is handed. Below the
 * cap it fills the width instead, the lopsidedness lands on the page, and the
 * upgrade card - which correctly aligns to the container - is what makes it
 * obvious: measured at 480px, page content ended at 435 while the band ran to
 * 445.
 *
 * `.mhub-am` already owns the page gutter through `--mhub-page-gutter`, which
 * is the rule this codebase settled on for the settings screens: the gutter
 * belongs to one element, and it is the inner one. This makes the mount point
 * agree.
 *
 * Only this id. The Zoom screens share that selector but have no inner element
 * carrying a gutter of its own, so zeroing theirs would put content against the
 * edge. They need the same treatment eventually and cannot be verified here -
 * they answer 403 without a connected Zoom account.
 */
#meeting_hub_admin_dasboard {
	padding-left: 0;
	padding-right: 0;
}

/*
 * More air above than below, and that asymmetry is the point.
 *
 * The two sides are not doing the same job. Above the card is a seam: page
 * content ends and a dark full-width banner begins. On the screens that finish
 * on a line of text rather than a bordered card - Frontend Meetings ends on its
 * vendor note - 40px was close enough that the banner read as that paragraph.
 * Below it there is only the footer, which needs separating and nothing more.
 */
#wpfooter .mhub-uc {
	--mhub-uc-gap-top: 56px;
	--mhub-uc-gap: 40px;

	margin: var( --mhub-uc-gap-top ) 0 var( --mhub-uc-gap );
}

/*
 * Tightens with the viewport. 56px of air above a banner is right on a desktop
 * and is most of a phone screen, so both values step down twice rather than
 * holding one number everywhere. The top stays a step ahead of the bottom at
 * every width.
 */
@media ( max-width: 960px ) {
	#wpfooter .mhub-uc {
		--mhub-uc-gap-top: 40px;
		--mhub-uc-gap: 28px;
	}
}

@media ( max-width: 600px ) {
	#wpfooter .mhub-uc {
		--mhub-uc-gap-top: 28px;
		--mhub-uc-gap: 20px;
	}
}

/* ============================================================================
 * The five platform screens run a narrower column than the rest of the plugin
 *
 * Every other MeetingHub screen fills the 1420px page, and the band matches it
 * exactly - measured at 1500 and 1700, card and content share both edges. The
 * platform detail screens do not: they cap their own content at 960px, so the
 * band ran 276px past the cards at 1500 and 380px past them at 1700 while the
 * left edge stayed right, which reads as the band belonging to a different
 * page from the thing above it.
 *
 * Capped rather than centred. The align box above supplies the left origin and
 * is shared with every other screen; narrowing that box would centre it and
 * take the left edge off the column too. Constraining the card inside it, with
 * the free margin on the right, keeps the left where it already agrees.
 *
 * Keyed off the container each of those screens renders, because the footer is
 * printed by PHP before the hash route is known and :has() is the one way to
 * ask what the page turned out to be. Chrome, Safari and Firefox all support
 * it, and the plugin's own settings CSS already relies on it.
 * ========================================================================== */

body:has( .zoom-settings-container ) #wpfooter .mhub-uc,
body:has( .jitsi-settings-container ) #wpfooter .mhub-uc,
body:has( .webex-settings-container ) #wpfooter .mhub-uc,
body:has( .google-meet-settings-container ) #wpfooter .mhub-uc,
body:has( .msteams-settings-container ) #wpfooter .mhub-uc {
	max-width: 960px;
	margin-right: auto;
}