/*
Theme Name: MMA 2
Theme URI: https://stepfoxthemes.com/themes/mma-2/
Author: Stepfox
Author URI: https://stepfoxthemes.com
Description: MMA 2 is the block/full site editing rebuild of the MMA Sport Magazine theme. A fully responsive sports and martial-arts magazine with a super slider, breaking-news ticker, fight-event and ranking sections, video carousels and a magazine grid, all editable from the WordPress block editor and Site Editor.
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.0.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mma-2
Update URI: https://stepfoxthemes.com/
Domain Path: /languages
Network: false
Tags: blog, news, two-columns, right-sidebar, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-width-template, block-styles, wide-blocks, accessibility-ready
*/


/* -------------------------------------------------------------------------
 * This theme carries no design CSS.
 *
 * Every visual decision — colour, type, spacing, the whole magazine grid — is
 * a stepfox-looks `responsiveStyles` attribute on a core block, written by the
 * generators under tools/. If something looks wrong, fix the generator and
 * re-run tools/build.php; do not add a rule here.
 *
 * What is left is the handful of things no block attribute can express. The
 * ported classic stylesheets are still on disk under assets/css/ (and the
 * originals under tools/backup/) but nothing enqueues them.
 * ---------------------------------------------------------------------- */

/* Core wraps every top-level block in a flow layout that adds vertical
   margins between siblings. The bands and the shell own their own spacing. */
.wp-site-blocks > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.wp-site-blocks {
	padding: 0;
}

/* The Site Editor's constrained/flow layouts add the same margins one level
   down, which would reintroduce gaps inside every generated row. */
body .is-layout-constrained > *,
body .is-layout-flow > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* core/post-template renders <ul><li>; the li carries no width, so a grid or
   flex post list needs the list itself reset. */
.wp-block-post-template {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* core/post-featured-image is the one block stepfox cannot id — an output
   buffer in post-template-fallback.php strips id="block_…" off every figure
   site-wide — so its fill behaviour has to be stated once, here, rather than
   per card. Every card wraps it in a sized group. */
.wp-block-post-featured-image,
.wp-block-post-featured-image a,
.wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	/* Fighter portraits are tall full-body/headshot PNGs; centred, cover
	   cropped the face off. Anchor the crop near the top so the head always
	   survives — harmless on landscape event photos. */
	object-position: center top;
}

/* core/cover uses its own background image (fighter grids, event heroes) —
   same top-anchored crop so faces are never guillotined. */
.wp-block-cover img.wp-block-cover__image-background {
	object-position: center top;
}

/* Post bodies are classic content: raw <img> at full upload size, and captions
   wrapped by the [caption] shortcode, which writes a pixel width inline. One of
   these demo posts carries a 1290px image, so on a phone the article pushed the
   whole document 933px wide and the page scrolled sideways. Nothing here is a
   block, so no attribute reaches it — and the classic stylesheet that used to
   hold these in is no longer enqueued. */
.wp-block-post-content img,
.wp-block-post-content iframe,
.wp-block-post-content video,
.wp-block-post-content .wp-caption {
	max-width: 100%;
}

.wp-block-post-content img {
	height: auto;
}

/* core/search gives its label `width: 100%` and .screen-reader-text gives it
   `width: 1px`, at equal specificity — so which one wins is down to the order
   the two stylesheets happen to load in. On the plugin-templated routes the
   block styles land last, and the label stretched the document 153px wider
   than the viewport: invisible (it is 1px tall and clipped) but scrollable. */
.wp-block-search__label.screen-reader-text {
	width: 1px;
}


/* -------------------------------------------------------------------------
 * The plugin-templated routes only (mma_event / fighter and their taxonomies).
 *
 * mma2_scripts() re-enqueues the ported classic stylesheets there because
 * stepfox-mma-plugin renders its own classic PHP templates, which no block
 * template can reach. These two rules patch the parts of that stylesheet that
 * assumed the classic JS was running.
 * ---------------------------------------------------------------------- */

/* main-style.css:49 sets `#main { opacity: 0 }` and the classic script faded it
   in on ready. That script is gone, so without this the page renders blank.
   !important because style.css is enqueued first and the ported sheet, which
   depends on it, therefore wins at equal specificity. */
#main {
	opacity: 1 !important;
	/* Match the block templates' content shell, so a plugin-templated route
	   does not read as a plain white rectangle next to every other page. */
	border-radius: 18px;
	box-shadow: 0 18px 50px rgba(16, 16, 16, 0.10);
	margin: 28px 0 !important;
	padding: 28px 18px 36px !important;
}

/* main-style.css:444 hides every skill bar outright (`.score-width{display:none}`)
   and the classic script revealed it by adding `.active`, which also ran the
   `review` keyframes — a width-from-zero grow. With that script retired the
   fighter profile's stat meters were five empty grey tracks, each with its
   percentage label rendered invisible inside a 0x0 box. Showing the bar draws
   it at the width the plugin already writes inline; the grow was the only thing
   the script contributed. */
.score-width {
	display: block !important;
}

/* #main floats, so #wrapper collapses to zero height without a clearfix —
   the classic stylesheet relied on one that lived in the old style.css. */
#wrapper {
	max-width: 1290px;
	margin: 0 auto;
}

#wrapper:after,
#main:after,
.footer-wrap:after {
	content: "";
	display: table;
	clear: both;
}

/* The same classic content the block templates render through
   core/post-content, but here it is printed by the plugin's own PHP into
   #post-content, which that rule cannot reach. Full-size uploads, [caption]
   figures carrying an inline pixel width, and oEmbed iframes all sit at their
   authored size: the Rankings page ran 506px past the right edge of a 390px
   phone. */
#post-content img,
#post-content iframe,
#post-content video,
#post-content .wp-caption {
	max-width: 100%;
}

#post-content img {
	height: auto;
}

/* main-style.css:122 makes the share strip's <ul> absolutely positioned inside
   an 84px float that has no height of its own, so the float reserves no
   vertical space and the icons land on top of the event title. Letting the
   list flow gives the float its height back. */
.floating-share-icons ul {
	position: static !important;
	padding-right: 0 !important;
}

/* -------------------------------------------------------------------------
 * stepfox/metafield-block stat meters.
 *
 * The plugin's own stylesheet draws the fill as a purple gradient and the
 * stars gold. Those inner elements carry no id — stepfox only stamps the
 * block's outer element — so no responsiveStyles attribute can reach them,
 * and this is the one place brand colour has to be written as CSS.
 * ---------------------------------------------------------------------- */

.sfl-stat--line .sfl-line-track {
	width: 100%;
	height: 5px;
	background: rgba(255, 255, 255, 0.14);
}

.sfl-stat--line .sfl-line-fill {
	background: #e5192c;
}

.sfl-stat {
	width: 100%;
}

.sfl-stat .sfl-stat-label {
	font-weight: 700;
	opacity: 1;
}

/* The sticky header pins at top:0, which for a logged-in user is underneath
   WordPress's own admin bar. The offset cannot come from a block attribute: it
   depends on body.admin-bar, which only exists at render time. 32px is the
   desktop admin bar, 46px its mobile height.

   Only where the header is sticky. On a phone it is `position: relative`, and
   `top` on a relative box moves the paint without moving the layout — so the
   offset pushed the header 46px down over an article that had not moved, and
   the headline was drawn behind the nav bar. The admin bar is already 46px at
   the top of this range, hence the pair of queries rather than one. */
@media screen and (min-width: 769px) {

	.admin-bar #block_part-header {
		top: 32px;
	}
}

@media screen and (min-width: 769px) and (max-width: 782px) {

	.admin-bar #block_part-header {
		top: 46px;
	}
}

/* -------------------------------------------------------------------------
 * The header search field.
 *
 * core/search exposes border and typography as attributes, and its colour
 * supports go to the BUTTON — there is no attribute for the input's own
 * background. Left alone it is a white slab in a dark glass bar, so the field
 * is dressed here, scoped to the header instance only (the 404 page's search
 * sits on white and keeps core's defaults).
 * ---------------------------------------------------------------------- */

#block_hdr-search .wp-block-search__inside-wrapper {
	background: rgba(255, 255, 255, 0.07);
	overflow: hidden;
}

#block_hdr-search .wp-block-search__input {
	background: transparent;
	border: 0;
	color: #fff;
	font-size: 13px;
	padding: 9px 4px 9px 16px;
}

#block_hdr-search .wp-block-search__input::placeholder {
	color: #8f939c;
	opacity: 1;
}

#block_hdr-search .wp-block-search__button {
	background: transparent;
	border: 0;
	color: #9aa0a6;
	padding: 0 12px 0 4px;
	transition: color .25s ease;
}

#block_hdr-search .wp-block-search__button:hover,
#block_hdr-search .wp-block-search__inside-wrapper:focus-within .wp-block-search__button {
	color: #fff;
}

#block_hdr-search .wp-block-search__inside-wrapper:focus-within {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(229, 25, 44, 0.7);
}

/* -------------------------------------------------------------------------
 * The main menu's overlay breakpoint.
 *
 * The bar holds a 220px logo gutter, seven top-level menu items, six social
 * icons and the search field, and it needs 1280px to hold them on one line. Below that the menu wraps and the search runs off the right edge — 103
 * px off it at 1100. Core hands over to its overlay only below 600px, and that
 * threshold is neither a block attribute nor a theme.json value; it is
 * hard-coded into the block's own stylesheet. So the handover is moved up to
 * where the row actually stops fitting.
 *
 * That is 1280 rather than the 1024 the rest of the theme breaks at: this is
 * about one row of items running out of room, which happens well before the
 * layout itself needs rearranging.
 *
 * Nothing is re-implemented: this only decides WHICH of core's two states is
 * showing. The overlay's own styling, and the script that opens and closes it,
 * are core's and run at every width. Ids outrank core's class selectors, so
 * source order between the two stylesheets does not matter.
 * ---------------------------------------------------------------------- */

@media screen and (min-width: 600px) and (max-width: 1279px) {

	#block_hdr-menu .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	#block_hdr-menu .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	#block_hdr-menu .wp-block-navigation__responsive-container.is-menu-open {
		display: flex;
	}

	#block_hdr-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		display: block;
	}
}

/* -------------------------------------------------------------------------
 * The menu button's tap target.
 *
 * Core draws it as a bare 24px SVG with no padding, which is a 24px target —
 * under the 44px a thumb is aimed at, and it is the ONLY control left in the
 * bar once the events strip and the search go at mobile. Padding grows the hit
 * area; the matching negative margins mean the button still sits exactly where
 * it did, so the bar's right edge does not move.
 * ---------------------------------------------------------------------- */

@media screen and (max-width: 1279px) {

	/*
	 * Core leaves the button at the start of the nav's flex row, which
	 * parks it hard against the logo gutter — at 1100px that is x=220 with
	 * ~600px of empty bar between it and the social icons. It belongs at
	 * the end of the row, beside them. Two ids, because stepfox prints its
	 * own single-id rule for this nav inline, after this stylesheet.
	 */
	#block_hdr-nav #block_hdr-menu {
		justify-content: flex-end;
	}

	#block_hdr-menu .wp-block-navigation__responsive-container-open:not(.always-shown) {
		padding: 10px;
		margin: -10px 0 -10px -10px;
	}

	/*
	 * Core gives the open panel 56px of top padding and no horizontal
	 * padding at all, so every menu item started hard against the left
	 * edge of the screen.
	 */
	#block_hdr-menu .wp-block-navigation__responsive-container-content {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* Same 24px-target problem as the open button, same fix. It is
	   absolutely positioned, so padding alone grows it inward from the
	   corner and no margin correction is wanted. */
	#block_hdr-menu .wp-block-navigation__responsive-container-close {
		padding: 10px;
	}
}

/* -------------------------------------------------------------------------
 * Block parts on the plugin-templated routes.
 *
 * The ported classic stylesheet declares a bare `a { color: #000 }`, which
 * beats theme.json's `elements.link.color: inherit`. On these routes the block
 * header, footer and sidebars are rendered too, so every linked title inside
 * them — core/post-title with isLink, post-terms, author names — went black on
 * a dark bar while its own wrapper stayed white. Exactly the trap that made the
 * classic chain unusable site-wide in the first place.
 *
 * These parts are printed by block_template_part() from header.php/footer.php,
 * which emits NO .wp-block-template-part wrapper — so the parts' own ids are
 * the only handle there is.
 * ---------------------------------------------------------------------- */

#block_hdr a,
#block_ftr a,
#block_sb-post a,
#block_sb-cat a,
#block_sb-page a {
	color: inherit;
}