/*
Theme Name: Especio Child Theme
Theme URI: https://especio.themerex.net/
Description: Especio is a Premium WordPress theme that has built-in support for popular Page Builders, slider with swipe gestures, and is SEO- and Retina-ready. The unique system of inheritance and override options allows setting up individual parameters for different sections of your site and supported plugins.
Author: ThemeREX
Author URI: https://themerex.net/
Version: 1.0.8
Tested up to: 6.8.1
Requires at least: 5.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: flexible-header, custom-background, custom-colors, custom-header, custom-menu, featured-image-header, featured-images, full-width-template, microformats, post-formats, theme-options, threaded-comments, translation-ready
Text Domain: especio
Template: especio
*/


/* =Child-Theme customization starts here
------------------------------------------------------------ */

/* ---- Ed's design tweaks (SOW change requests, 2026-07) ---- */

/* 1. Category tile labels centered (client request). The parent theme lays the
   label out full-width but leaves it left-aligned. */
.widget_categories_list .categories_list_style_2 .categories_list_title {
	text-align: center;
}

/* 2. No thin white/light ring inside category tile images. The parent theme
   masks the rounded image with a radial gradient (white, black); dropping the
   mask removes the light edge that shows on the rounded corners. The :after
   border/shadow reset is a defensive no-op — the parent overlay carries neither
   today, but this guards against a future theme update adding one. */
.widget_categories_list .categories_list_style_2 .categories_list_item .categories_list_image {
	-webkit-mask-image: none;
	mask-image: none;
}
.widget_categories_list .categories_list_style_2 .categories_list_image:after {
	border: 0;
	box-shadow: none;
}

/* 3. Homepage category grid on phones: the parent theme keeps the 3-up columns'
   -20px wrap margin without resetting column widths at this width, so the grid
   spills past the viewport. Stack the tiles one per row and neutralise the
   negative margin so the page never scrolls sideways. */
@media (max-width: 767px) {
	.categories_list_columns.trx_addons_columns_wrap {
		margin-right: 0 !important;
	}
	.categories_list_columns.trx_addons_columns_wrap > [class*="trx_addons_column-"] {
		width: 100% !important;
		padding-right: 0 !important;
	}
}

/* 4. The footer socials block has its title set to "Icons" (the layout's label),
   which renders as a visible heading; the client footer just needs the Pinterest
   icon, so hide it. Note: an empty title renders no heading at all, so this rule
   only takes effect while a title is configured on the block. */
.footer_wrap .sc_socials_title {
	display: none;
}

/* 5. Blog archive (front-page posts grid): the parent theme zeroes the archive's
   bottom padding (`.blog_archive { padding-bottom: 0 }`), so the last row /
   pagination sits flush against the footer. Add breathing room before the footer.
   Same specificity as the parent rule, loaded after it → no !important needed. */
.blog_archive {
	padding-bottom: 60px;
}
/* 6. #3024: WP Recipe Maker comment-rating stars were unclickable on the recipe
   comment form. Two faults: (a) the fieldset <legend> renders position:absolute /
   z-index:1 (opacity:0) directly over the star row and swallowed the clicks;
   (b) all rating radios (values 1-5) were stacked over the first star instead of
   spread across the five, so stars 2-5 had no hit target. Fix (child theme, upgrade
   -safe): let clicks fall through the invisible legend, and place each radio over
   its own star. Selectors are value-based (stable in WPRM output). */
.comment-form-wprm-rating .wprm-comment-ratings-container {
	position: relative;
}
.comment-form-wprm-rating .wprm-comment-ratings-container legend {
	pointer-events: none;
}
.comment-form-wprm-rating .wprm-comment-ratings-container input[type="radio"] {
	position: absolute;
	top: 0;
	z-index: 2;
	width: 24px !important;
	height: 24px !important;
	margin: 0 !important;
	opacity: 0;
	cursor: pointer;
	pointer-events: auto;
}
.comment-form-wprm-rating .wprm-comment-ratings-container input[type="radio"][value="0"] { left: -24px; }
.comment-form-wprm-rating .wprm-comment-ratings-container input[type="radio"][value="1"] { left: 0; }
.comment-form-wprm-rating .wprm-comment-ratings-container input[type="radio"][value="2"] { left: 24px; }
.comment-form-wprm-rating .wprm-comment-ratings-container input[type="radio"][value="3"] { left: 48px; }
.comment-form-wprm-rating .wprm-comment-ratings-container input[type="radio"][value="4"] { left: 72px; }
.comment-form-wprm-rating .wprm-comment-ratings-container input[type="radio"][value="5"] { left: 96px; }
/* WPRM hides the native rating radios with clip: rect(1px,1px,1px,1px) (screen-reader
   technique), which also shrinks their clickable area to 1px. Restore full hit area so
   the transparent radios (positioned over each star above) are clickable by mouse. */
.comment-form-wprm-rating .wprm-comment-ratings-container input[type="radio"] {
	clip: auto !important;
	clip-path: none !important;
}

/* 7. #3029: keep the HEADER logo compact (~70px tall, like the Especio demo). The real brand
   SVG has a wide viewBox; cap its height and let width follow the aspect ratio. Scoped to the
   header top panel so the footer logo is unaffected. SVG scales crisply at any size. */
.top_panel .sc_layouts_logo img {
	max-height: 40px !important; /* beats parent theme .sc_layouts_logo img max-height:68px!important */
	width: auto;
	height: auto;
}

/* 8. #3029: shrink the FOOTER logo too (parent theme forces .sc_layouts_logo img
   max-height:68px !important, which also hit the footer). ~48px reads well on the dark
   footer and stays proportional to the 40px header. Scoped to .footer_wrap so the header
   rule above is untouched; !important to beat the parent default. */
.footer_wrap .sc_layouts_logo img {
	max-height: 48px !important;
	width: auto;
	height: auto;
}

/* 9. #2992: Amazon affiliate FTC disclosure — top-of-post banner + inline #ad marker. */
.ee-affiliate-disclosure {
	margin: 0 0 1.5em;
	padding: 0.6em 1em;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-left: 3px solid #b3541e; /* warm accent, reads as a notice */
	border-radius: 3px;
	background: rgba(0, 0, 0, 0.03);
	font-size: 0.85em;
	line-height: 1.5;
}
.ee-affiliate-disclosure a {
	text-decoration: underline;
}
.ee-ad-tag {
	margin-left: 0.15em;
	font-size: 0.7em;
	font-weight: 400;
	vertical-align: super;
	opacity: 0.6;
}