/*
Theme Name: Madara - Child
Description:  Madara Child-Theme
Author:       Madara
Author URI:   http://demo.mangabooth.com/
Template: madara
Tags: one-column, two-columns, right-sidebar, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Version: 1.0.1.1
*/

/* ==========================================================================
   Mobile SEO & Accessibility Enhancements (Core Web Vitals & Tap Targets)
   ========================================================================== */

/* 1. Breadcrumb Contrast & Tap Targets */
.text-ui-dark .c-breadcrumb .breadcrumb li a {
	color: #b0b0b0;
}
.text-ui-dark .c-breadcrumb .breadcrumb li a:hover {
	color: #ffffff;
}
.text-ui-light .c-breadcrumb .breadcrumb li a,
body:not(.text-ui-dark) .c-breadcrumb .breadcrumb li a {
	color: #555555;
}

@media (max-width: 768px) {
	/* Breadcrumb link tap area */
	.c-breadcrumb .breadcrumb li a {
		display: inline-block;
		padding: 6px 3px;
		min-height: 40px;
		line-height: 28px;
	}

	/* Action buttons (Bookmark, Dark/Light Mode) */
	body.reading-manga .entry-header .entry-header_wrap .action-icon ul li a,
	body.reading-manga .c-select-bottom .entry-header_wrap .action-icon ul li a {
		width: 44px !important;
		height: 44px !important;
		line-height: 44px !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		font-size: 22px !important;
		margin: 0 4px !important;
	}

	/* Prev / Next / Manga Info navigation buttons */
	body.reading-manga .entry-header .select-pagination .nav-links .nav-previous a,
	body.reading-manga .c-select-bottom .select-pagination .nav-links .nav-previous a,
	body.reading-manga .entry-header .select-pagination .nav-links .nav-next a,
	body.reading-manga .c-select-bottom .select-pagination .nav-links .nav-next a,
	body.reading-manga .entry-header .select-pagination .nav-links .btn-primary a,
	body.reading-manga .c-select-bottom .select-pagination .nav-links .btn-primary a {
		min-width: 44px !important;
		min-height: 44px !important;
		line-height: 44px !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		padding: 0 6px !important;
	}

	/* Mobile navigation hamburger icon */
	body.reading-manga .entry-header .wp-manga-nav .select-pagination .nav-links .mobile-nav-btn {
		min-width: 44px !important;
		min-height: 44px !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		padding: 6px !important;
	}

	/* Header Search & Menu Toggle buttons */
	.site-header .main-navigation .search-navigation .menu-search .open-search-main-menu,
	body.reading-manga .site-header .main-navigation .search-navigation .menu-search .open-search-main-menu {
		min-width: 44px !important;
		min-height: 44px !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
	}

	.c-togle__menu .menu_icon__open,
	.mobile-menu .menu_icon__close {
		min-width: 44px;
		min-height: 44px;
	}
}

/* ==========================================================================
   Manga Reading Page - Core Web Vitals (CLS & LCP Optimization)
   ========================================================================== */

/* 1. Reserve viewport space for reading content to eliminate CLS */
body.reading-manga .reading-content {
	min-height: 100vh;
	contain: layout;
}

/* 2. First image container holds space so initial screen does NOT shift */
body.reading-manga .reading-content .page-break:first-child,
body.reading-manga .reading-content .page-break-first {
	min-height: calc(100vh - 160px);
	display: block;
	position: relative;
	background: transparent;
}

/* 3. Offscreen page breaks: allow browser to skip offscreen rendering and reserve rough space */
@supports (content-visibility: auto) {
	body.reading-manga .reading-content .page-break:not(:first-child) {
		content-visibility: auto;
		contain-intrinsic-size: auto 1200px;
	}
}

/* 4. Ensure chapter images fill width smoothly */
body.reading-manga .reading-content .page-break picture {
	display: block;
	width: 100%;
	max-width: 100%;
}
body.reading-manga .reading-content .page-break picture img.wp-manga-chapter-img,
body.reading-manga .reading-content .page-break img.wp-manga-chapter-img {
	width: 100%;
	height: auto;
	max-width: 100%;
	display: block;
	margin: 0 auto;
}

/* 5. Chapter & Server Dropdown Selects - High-Performance SVG Caret Arrow (No FontAwesome dependency) */
body.reading-manga .entry-header .c-selectpicker label,
body.reading-manga .c-select-bottom .c-selectpicker label,
body.reading-manga .select-view .c-selectpicker label {
	display: block;
	position: relative;
	margin-bottom: 0;
	width: 100%;
}
body.reading-manga .entry-header .c-selectpicker label:after,
body.reading-manga .c-select-bottom .c-selectpicker label:after,
body.reading-manga .select-view .c-selectpicker label:after {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	content: "" !important;
	width: 10px;
	height: 12px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath fill='%23666666' d='M5 1L1 5h8L5 1zm0 10l4-4H1l4 4z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: contain !important;
	pointer-events: none;
	z-index: 2;
}
body.reading-manga.text-ui-light .entry-header .c-selectpicker label:after,
body.reading-manga.text-ui-light .c-select-bottom .c-selectpicker label:after,
body.reading-manga.text-ui-light .select-view .c-selectpicker label:after,
.text-ui-light body.reading-manga .entry-header .c-selectpicker label:after,
.text-ui-light body.reading-manga .c-select-bottom .c-selectpicker label:after,
.text-ui-light body.reading-manga .select-view .c-selectpicker label:after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath fill='%23cccccc' d='M5 1L1 5h8L5 1zm0 10l4-4H1l4 4z'/%3E%3C/svg%3E") !important;
}

/* ==========================================================================
   Universal FontAwesome to Ionicons & Native SVG Fallback Bridge
   Eliminates all remaining dependencies on heavy fa-solid/brands webfonts.
   Guarantees 100% icon rendering even when FontAwesome is dequeued.
   ========================================================================== */

/* 1. Base font mapping for FontAwesome icon tags */
.fa, .fas, .far, .fab {
	display: inline-block;
	font-family: "Ionicons" !important;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* 2. Common Glyph Mappings to Ionicons */
.fa-eye:before, .fas.fa-eye:before { content: "\f2e9" !important; }
.fa-caret-right:before, .fas.fa-caret-right:before { content: "\f3d1" !important; }
.fa-caret-left:before, .fas.fa-caret-left:before { content: "\f3cf" !important; }
.fa-caret-down:before, .fas.fa-caret-down:before, .fa-sort-down:before { content: "\f280" !important; }
.fa-caret-up:before, .fas.fa-caret-up:before, .fa-sort-up:before { content: "\f286" !important; }
.fa-sort:before, .fa-unsorted:before { content: "\f280" !important; }
.fa-plus:before, .fas.fa-plus:before { content: "\f273" !important; }
.fa-times:before, .fas.fa-times:before, .fa-close:before { content: "\f2d7" !important; }
.fa-clock:before, .far.fa-clock:before, .fa-clock-o:before, .fa-history:before { content: "\f394" !important; }
.fa-spinner:before, .fas.fa-spinner:before { content: "\f38b" !important; }
.fa-sign-in:before, .fa-sign-in-alt:before, .fas.fa-sign-in-alt:before { content: "\f31e" !important; }
.fa-quote-left:before, .fas.fa-quote-left:before { content: "\f35f" !important; }
.fa-pencil:before, .fa-pencil-alt:before, .fas.fa-pencil-alt:before { content: "\f2bf" !important; }

/* 3. Social Media Brands Mapping */
.fa-facebook:before, .fa-facebook-f:before, .fab.fa-facebook-f:before { content: "\f236" !important; }
.fa-twitter:before, .fab.fa-twitter:before { content: "\f2b0" !important; }
.fa-pinterest:before, .fa-pinterest-p:before, .fab.fa-pinterest:before { content: "\f244" !important; }
.fa-linkedin:before, .fa-linkedin-in:before, .fab.fa-linkedin:before { content: "\f240" !important; }
.fa-tumblr:before, .fab.fa-tumblr:before { content: "\f24d" !important; }
.fa-google-plus:before, .fa-google-plus-g:before, .fab.fa-google-plus:before { content: "\f23a" !important; }
.fa-envelope:before, .far.fa-envelope:before { content: "\f1b8" !important; }

/* 4. Spinner Animation Fallback */
.fa-spin {
	-webkit-animation: ion-spin 1.5s infinite linear !important;
	animation: ion-spin 1.5s infinite linear !important;
}
@-webkit-keyframes ion-spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } }
@keyframes ion-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* 5. Theme Pseudo-Elements Overrides */
/* Reading chapter active marker */
.listing-chapters_wrap .wp-manga-chapter.reading:before {
	content: '\f394' !important;
	font-family: "Ionicons" !important;
	font-weight: normal !important;
}

/* Manga detail page Read More / Read Less toggles */
body.manga-page .content-readmore:after,
body.manga-page .chapter-readmore:after,
body.manga-page.wp-manga-page .wp-manga-section .content-readmore:after,
body.manga-page.wp-manga-page .wp-manga-section .chapter-readmore:after {
	content: "\f3d0" !important;
	font-family: "Ionicons" !important;
	font-weight: normal !important;
}
body.manga-page .content-readmore.more:after,
body.manga-page .chapter-readmore.more:after,
body.manga-page.wp-manga-page .wp-manga-section .content-readmore.more:after,
body.manga-page.wp-manga-page .wp-manga-section .chapter-readmore.more:after {
	content: "\f3d8" !important;
}

/* Discussion sort dropdown caret */
#manga-discussion .comment-selection-wrapper:after {
	content: "\f280" !important;
	font-family: "Ionicons" !important;
	font-weight: normal !important;
}

/* Comments time metadata clock icon */
#madara-comments.comments-area ol.comment-list li.comment article.comment-body footer.comment-meta .comment-metadata a time:before,
#madara-comments.comments-area ol.comment-list li.pingback article.comment-body footer.comment-meta .comment-metadata a time:before,
body.single.wp-manga-page .wp-manga-section #comments.comments-area ol.comment-list li.comment article.comment-body footer.comment-meta .comment-metadata a time:before,
body.single.wp-manga-page .wp-manga-section #comments.comments-area ol.comment-list li.pingback article.comment-body footer.comment-meta .comment-metadata a time:before {
	content: "\f394" !important;
	font-family: "Ionicons" !important;
	font-weight: normal !important;
}

/* Recent comments widget quote icon */
#wpmanga-recentcomments .comment-content:before {
	content: "\f35f" !important;
	font-family: "Ionicons" !important;
	font-weight: normal !important;
}