/*
Theme Name:   Zox News Child
Theme URI:    https://themeforest.net/user/mvpthemes/
Description:  Zox News Child Theme — YesBoss customizations
Author:       MVP Themes
Author URI:   https://themeforest.net/user/mvpthemes/portfolio
Template:     zox-news
Version:      2.0.1
License:      GNU General Public License v3 or later
License URI:  http://www.gnu.org/licenses/gpl-3.0.html
Tags:         two-columns, custom-background, custom-colors, custom-menu, featured-images, theme-options, threaded-comments, translation-ready
Text Domain:  zox-news-child
*/

/* ==========================================================================
   YesBoss customizations, migrated out of the modified parent theme.
   Parent baseline: Zox News 3.17.1

   Contents
     1. Migrated from Theme Options -> Custom CSS  (the mvp_customcss option)
     2. Thumbnail cropping                          (replaces the old inline
                                                     background-image edits)
     3. Overrides of parent style.css
     4. Custom components
     5. Overrides of parent css/media-queries.css
   ========================================================================== */


/* ==========================================================================
   1. MIGRATED FROM THEME OPTIONS -> CUSTOM CSS

   This block used to live in the `mvp_customcss` option and was injected
   inline against the `mvp-custom-style` handle. Clear that field once this
   file is verified, or these rules will load twice.

   NOTE: AMP pages do NOT load this stylesheet. The parent also emits
   `mvp_customcss` on `amp_post_template_css`, so anything AMP needs must
   stay in the option (or be re-added via that hook in functions.php).
   ========================================================================== */

.mvp-nav-small-logo img {
	max-height: 100%;
	}

.mvp-nav-top-mid img,
#mvp-foot-logo img {
	max-height: 48px;
	}

/* CJK headlines: keep author-entered spacing rather than collapsing it. */
.mvp-stand-title,
h1.mvp-post-title,
h1, h2, h3, h4 {
	white-space: break-spaces !important;
	}

figcaption {
	font-size: 0.9em !important;
	margin-top: 0 !important;
	font-style: italic;
	color: #999;
	}

/* "More" pill. This is a custom class, NOT the parent's .mvp-inf-more-but. */
.mvp-info-more-but {
	background: #fff;
	border: 1px solid #000;
	border-radius: 3px;
	color: #000 !important;
	display: inline-block;
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .02em;
	line-height: 1;
	padding: 15px 0;
	text-align: center;
	text-transform: uppercase;
	width: 70%;
	}


/* ==========================================================================
   2. THUMBNAIL CROPPING

   The old parent edits commented out the_post_thumbnail() and set an inline
   style="background-image:url(...)" on each wrapper. That is reproduced here
   in CSS instead, so no template or widget PHP has to be forked.

   Doing it this way also keeps srcset, loading="lazy" and alt text, and
   sidesteps the 'mvp-post-thump' typo that was serving full-size originals.

   1.904 == 1200 / 630, matching the mvp-post-thumb size set in functions.php.
   ========================================================================== */

.mvp-blog-story-img,
.mvp-feat1-list-img,
.mvp-feat2-bot-img,
.mvp-widget-feat1-bot-img,
.mvp-widget-feat2-right-img,
.mvp-widget-dark-sub-img,
.mvp-related-img {
	aspect-ratio: 1.904;
	overflow: hidden;
	}

.mvp-blog-story-img img,
.mvp-feat1-list-img img,
.mvp-feat2-bot-img img,
.mvp-widget-feat1-bot-img img,
.mvp-widget-feat2-right-img img,
.mvp-widget-dark-sub-img img,
.mvp-related-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	}

/* The featured hero is cropped the same way. */
.mvp-feat1-feat-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	}

/*
 * Parent 3.17.1 hides .mvp-reg-img on every 5th blog story and shows
 * .mvp-big-img instead — but only category/archive/search/page-home actually
 * output a .mvp-big-img. On index.php, author.php and page-latest.php the
 * 5th story would lose its image entirely. Put it back where no big image
 * exists.
 */
.mvp-blog-story-wrap:nth-child(5n+0) .mvp-blog-story-img:not(:has(.mvp-big-img)) .mvp-reg-img {
	display: block;
	}


/* ==========================================================================
   3. OVERRIDES OF PARENT style.css
   ========================================================================== */

/* Bottom nav row: flex instead of the parent's negative-margin construction. */
.mvp-nav-bot-right-out {
	display: flex;
	width: 100%;
	}

.mvp-nav-bot-right-in {
	flex-grow: 1;
	}

.mvp-nav-bot-left,
.mvp-nav-bot-right {
	flex: 1;
	height: 50px;
	}

/* Featured hero: responsive height instead of a fixed 600px. */
.mvp-feat1-feat-img {
	height: auto;
	aspect-ratio: 1.904;
	}

/* Hero caption sits BELOW the image in black, not overlaid in white. */
.mvp-feat1-feat-text {
	position: relative;
	width: 100%;
	padding: 1em 0 !important;
	box-sizing: border-box;
	background: transparent;
	color: #000;
	}

.mvp-feat1-feat-text h2.mvp-stand-title {
	font-size: 2.3rem;
	color: #000;
	}

.mvp-feat2-bot-img {
	max-width: unset;
	}

/* Dark home widget: 2-column grid. */
.mvp-widget-dark-sub-out {
	display: grid;
	grid-template-columns: 0.5fr 0.5fr;
	}

.mvp-widget-dark-sub-in {
	margin-left: 1em !important;
	}

.mvp-widget-dark-sub-img {
	width: 100%;
	}

.mvp-blog-story-img {
	width: 375px;
	}


/* ==========================================================================
   4. CUSTOM COMPONENTS
   ========================================================================== */

/* --- Sub-category nav strip (emitted by category.php) --------------------- */

.mvp-sub-cat-wrap {
	display: inline-block;
	margin: 1em auto;
	text-decoration: underline;
	}

.mvp-sub-cat-wrap a {
	color: #000;
	font-size: 1rem;
	text-decoration: underline;
	}

.mvp-sub-cat-wrap a:visited {
	color: #000;
	}

.mvp-sub-cat-wrap ul {
	list-style: none;
	}

.mvp-sub-cat-wrap ul li {
	display: inline-block;
	margin-right: 1em;
	}

/* --- Clock + Simplified/Traditional toggle (header.php, fly-menu.php) ----- */

#icontosc,
#icontotc {
	border-radius: 3px;
	line-height: 50px;
	padding: 0 0.3em;
	cursor: pointer;
	}

.mobiletools {
	display: none;
	}

/* --- Home top section: Smart Slider hero (featured.php) ------------------- */

.home_top_section {
	width: 100%;
	display: flex;
	margin: 0 auto 1em auto;
	max-width: 1200px;
	}

.home_top_section_left {
	width: 72%;
	margin: 0;
	}

.home_top_section_right {
	flex: 1;
	text-align: center;
	}

/* --- Footer social icons (footer.php) ------------------------------------ */

ul.mvp-foot-soc-list li a {
	background: transparent;
	margin-top: 0;
	font-size: 0;
	padding: 0;
	}

ul.mvp-foot-soc-list li {
	margin: 0 0.5em;
	}

.new_footer_sc {
	background: #fff;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	}

/* --- "Attitude Asia" sister-brand footer block (footer.php) --------------- */

.tifooter {
	margin: 0 auto;
	background-color: #111111;
	padding: 0;
	}

.extrafooter {
	text-align: center;
	color: #fff;
	padding: 1em 0 2em 0;
	box-sizing: border-box;
	clear: both;
	}

.extrafooter .bigtitle {
	font-weight: bold;
	letter-spacing: 1px;
	font-size: 20px;
	margin: 2em auto 0 auto;
	}

.extrafooter a {
	color: #fff;
	}

.ul_horizontal {
	list-style: none;
	padding: 0;
	line-height: 2;
	}

.ul_horizontal li {
	display: inline;
	margin: 0 0.5em;
	}

.extrafooterblock {
	text-align: center;
	display: inline-block;
	}

.extrafooterblock img {
	height: 36px;
	width: auto;
	margin: 0 auto;
	}

/* --- Web Share popup (footer.php + yb-custom.js) -------------------------- */

.div_share_popup {
	position: fixed;
		top: 0;
		left: 0;
	z-index: 9999;
	background-color: rgba(255, 255, 255, 0.9);
	width: 100%;
	height: 100%;
	}

.div_share_popup .div_share_popup_inner {
	position: absolute;
		top: 50%;
		left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	max-width: 500px;
	background-color: #c82b68;
	padding: 20px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	border-radius: 8px;
	color: #fff;
	text-align: center;
	}

.div_share_popup .div_share_popup_inner .share_popup_button {
	display: inline-block;
	background-color: transparent;
	color: #fff;
	line-height: 3;
	border-radius: 8px;
	text-decoration: none;
	font-weight: bold;
	text-align: center;
	margin: 1em auto 0;
	border: 2px solid #fff;
	cursor: pointer;
	width: 90%;
	}

.div_share_popup .div_share_popup_inner .share_popup_button.share_popup_button2 {
	border: none;
	font-size: 0.75rem;
	}

.div_share_popup .div_share_popup_inner .share_popup_button:hover {
	background-color: #a32354;
	}

.div_share_popup .div_share_popup_inner .share_popup_button.share_popup_button2:hover {
	background-color: transparent;
	}

.div_share_popup .div_share_popup_inner .share_popup_button img {
	width: auto;
	height: 20px;
	vertical-align: middle;
	display: inline-block;
	}


/* ==========================================================================
   5. OVERRIDES OF PARENT css/media-queries.css

   That file is enqueued from get_template_directory_uri(), so it cannot be
   overridden by copying it into the child. It is re-declared here instead.

   These only win because functions.php enqueues this stylesheet at hook
   priority 99, which forces it to print AFTER css/media-queries.css. At the
   default priority the child prints first (a child's functions.php loads
   before the parent's) and every rule below silently loses.
   ========================================================================== */

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

	.mvp-feat1-feat-img {
		height: auto;
		aspect-ratio: 1.904;
		}

	.mvp-widget-dark-sub-img {
		width: auto;
		}

	.mvp-widget-feat1-top-text h2,
	h1.mvp-post-title-wide,
	.mvp-feat1-feat-text h2.mvp-stand-title {
		font-size: 1.6rem;
		}

}

@media screen and (max-width: 599px) and (min-width: 480px) {

	/*
	 * The old parent edit dropped the height here but never added an
	 * aspect-ratio, leaving this breakpoint with no image height at all.
	 * Restored to match the other two breakpoints.
	 */
	.mvp-feat1-feat-img {
		height: auto;
		aspect-ratio: 1.904;
		}

	.mvp-widget-dark-sub-img {
		width: auto;
		}

	h1.mvp-post-title,
	#mvp-post-content h1.mvp-post-title,
	.mvp-feat5-mid-main-text h2 {
		font-size: 1.6rem;
		}

}

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

	/* Taller top nav so the clock and 简/繁 toggle fit. */
	#mvp-main-nav-top,
	.mvp-nav-top-wrap,
	.mvp-nav-top-mid {
		height: 48px !important;
		}

	.mvp-feat1-feat-img {
		height: auto;
		aspect-ratio: 1.904;
		}

	.mvp-feat1-feat-text {
		padding: 1em;
		width: 100%;
		}

	.mvp-widget-dark-sub-img {
		width: auto;
		}

	.mvp-widget-feat1-bot-img,
	.mvp-feat2-bot-img {
		width: auto;
		max-width: none;
		}

	/*
	 * At this breakpoint the parent swaps .mvp-reg-img (mvp-mid-thumb, 400x240)
	 * for .mvp-mob-img (mvp-small-thumb, 80x80) — sized for its old 80px-wide
	 * list layout. These cards are full-width and cropped to 1.904, so the 80px
	 * source is both far too small and the wrong shape. Keep the larger one,
	 * which is what the previous background-image build used at every width.
	 *
	 * BOTH rules need !important. The parent hides .mvp-reg-img inside a
	 * 40-selector group at css/media-queries.css:5414 that ends in
	 * `display: none !important`, and shows .mvp-mob-img with !important too.
	 * Without it here, the reg image stays hidden and the card renders empty.
	 */
	.mvp-blog-story-img .mvp-reg-img,
	.mvp-feat2-bot-img .mvp-reg-img,
	.mvp-widget-feat1-bot-img .mvp-reg-img,
	.mvp-widget-feat2-right-img .mvp-reg-img,
	.mvp-widget-dark-sub-img .mvp-reg-img,
	.mvp-related-img .mvp-reg-img {
		display: block !important;
		}

	.mvp-blog-story-img .mvp-mob-img,
	.mvp-feat2-bot-img .mvp-mob-img,
	.mvp-widget-feat1-bot-img .mvp-mob-img,
	.mvp-widget-feat2-right-img .mvp-mob-img,
	.mvp-widget-dark-sub-img .mvp-mob-img,
	.mvp-related-img .mvp-mob-img {
		display: none !important;
		}

	.mvp-widget-feat1-bot-text,
	.mvp-feat2-bot-text {
		margin-top: 0;
		margin-left: 1em;
		width: auto;
		}

	.mvp-blog-story-col .mvp-blog-story-img,
	#mvp-home-widget-wrap .mvp-flex-row .mvp-flex-story-img,
	#mvp-home-widget-wrap .mvp-flex-col .mvp-flex-story-img {
		margin: 0;
		width: auto;
		}

	.mvp-related-img,
	.mvp-post-more-img {
		margin: 0 4.5454545454% 0 0;
		width: 40%;
		}

	.mvp-related-text,
	.mvp-post-more-text {
		font-size: 1rem;
		width: 53%;
		}

	.mvp-feat1-feat-text h2.mvp-stand-title {
		font-size: 1.6rem;
		}

	.home_top_section {
		display: block;
		}

	.home_top_section_left {
		width: 100%;
		}

}

/*
 * Mobile grid overrides. Kept at the original 481px breakpoint rather than
 * the theme's 479px — that is how these were authored.
 */
@media screen and (max-width: 481px) {

	.mobiletools {
		display: block;
		margin: 1em auto;
		text-align: right;
		}

	#yb_datetime_mobile {
		font-size: 1em !important;
		line-height: 2;
		color: #fff;
		}

	.mobiletools span {
		line-height: 1.5 !important;
		}

	.mvp-blog-story-wrap:nth-child(5n+0) .mvp-blog-story-text {
		width: auto;
		margin: 0 1em;
	}

	#icontosc,
	#icontotc {
		margin: 0.5em 0.5em;
		line-height: 2 !important;
		border-radius: 30px;
		padding: 0.5em;
		}

	.mvp-feat1-list-out {
		display: grid;
		grid-template-columns: 0.5fr 0.5fr;
		}

	.mvp-feat1-list-out .mvp-feat1-list-img {
		display: flex;
		width: 100%;
		aspect-ratio: 1.904;
		}

	.mvp-feat1-list-out .mvp-feat1-list-in,
	.mvp-blog-story-text {
		margin-left: 1em;
		width: auto;
		}

	.mvp-widget-feat2-right-cont {
		display: grid;
		grid-template-columns: 0.5fr 0.5fr;
		}

	.mvp-widget-feat2-right-cont .mvp-widget-feat2-right-img {
		display: flex;
		width: 100%;
		aspect-ratio: 1.904;
		}

	.mvp-widget-feat2-right-cont .mvp-widget-feat2-right-text {
		margin-left: 1em;
		width: auto;
		}

	.mvp-widget-feat1-bot-story,
	.mvp-feat2-bot-story,
	.mvp-blog-story-out {
		display: grid;
		grid-template-columns: 0.5fr 0.5fr;
		}

	.mvp-widget-feat1-bot-img {
		width: 100%;
		aspect-ratio: 1.904;
		}

	.mvp-blog-story-in {
		margin-left: 0 !important;
		}

	.mvp-blog-story-img {
		width: auto;
		}

}