/*
Theme Name:   Betheme Child - Museum of MTG
Theme URI:    https://museumofmtg.com
Description:  Child theme for Museum of MTG. Adds the catalogue system for MTG sets and
              products, and replaces several third-party plugins with native theme code.
Author:       Museum of MTG
Template:     betheme
Version:      1.7.0
Text Domain:  betheme-child
*/

/* replaces the mousewheel-smooth-scroll plugin */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/*
 * Sliding footer on short pages.
 *
 * BeTheme's "sliding" footer layout is position:fixed at z-index -1 and is
 * revealed as #Content scrolls up off it. On a page shorter than the viewport
 * #Content stops mid-screen, so the footer showed through already half
 * uncovered — the widget row sliced horizontally, with only the copyright bar
 * fully legible. That is what looked like a cropping bug on About us.
 *
 * Giving #Content a full-viewport minimum keeps it covering the footer until
 * the visitor actually scrolls, which is the behaviour the layout intends.
 */
body.footer-sliding #Content { min-height: 100vh; }
@supports (min-height: 100svh) {
	body.footer-sliding #Content { min-height: 100svh; }
}

/*
 * Post navigation and back-to-top.
 *
 * BeTheme fixes the previous/next post links to the screen edges at
 * bottom:40px with an 80px tall tab, and fixes #back_to_top at right:75px
 * bottom:20px. Measured on a 1920px viewport the two overlap by roughly
 * 40x22px in the bottom right corner, because the next tab widens to 115px
 * once its thumbnail is in play while back-to-top sits at a fixed offset.
 *
 * Both were also easy to miss: the tabs are a 35px slice of colour at the very
 * edge of the screen, and back-to-top is a flat square with no separation from
 * whatever is behind it.
 */

/* Clear of the navigation tabs, which occupy 40-120px from the bottom. */
body.single #back_to_top {
	bottom: 132px;
	right: 20px;
}

#back_to_top {
	right: 20px;
	width: 48px;
	height: 48px;
	line-height: 48px;
	border-radius: 4px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
}

#back_to_top i {
	font-size: 20px;
	line-height: 48px;
}

#back_to_top:hover,
#back_to_top:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, .34);
}

/* The visible tab: wider, with an edge and a shadow so it reads on any image. */
.fixed-nav .arrow {
	width: 46px;
	box-shadow: 0 3px 14px rgba(0, 0, 0, .3);
}

.fixed-nav .arrow i {
	font-size: 22px;
}

.fixed-nav-prev .arrow {
	border-radius: 0 3px 3px 0;
}

.fixed-nav-next .arrow {
	border-radius: 3px 0 0 3px;
}

.fixed-nav .photo {
	box-shadow: 0 3px 14px rgba(0, 0, 0, .25);
}

/* Keyboard users get the same affordance as the mouse hover. */
.fixed-nav:focus-visible .arrow,
#back_to_top:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -3px;
}

/*
 * Below the tablet breakpoint BeTheme drops the navigation tabs, so
 * back-to-top can return to the corner.
 */
@media (max-width: 767px) {
	body.single #back_to_top {
		bottom: 20px;
	}
}

/*
 * Footer credit line. BeTheme prints its own "Betheme by Muffin group |
 * Powered by WordPress" only while the footer-copy option is empty; it is now
 * set, so this styles the trademark notice that follows the museum's line.
 */
.footer_copy .motg-tm {
	display: block;
	margin-top: .5rem;
	font-size: .72rem;
	line-height: 1.5;
	opacity: .65;
}