/* condensed overrides for theme colors */
:root{
	--ecos-green: #556B2F;
	--ecos-accent: #D4AF37;
	--ecos-pink: #F85C70; /* accent / highlight */
	--ecos-cream: #F5EBDC; /* light background / subtle */
	--ecos-dark: #444444; /* body text / dark gray */
}

/* Global links */
a{
	color: var(--ecos-green) !important;
}
a:hover{
	color: var(--ecos-accent) !important; /* gold — catches any remaining parent teal leaks */
}

/* Sections with green background */
.inner_slider_part,
.blog_slide_date,
.footer-section{
	background: var(--ecos-green) !important;
}

/* footer and sidebar heading size */
.footer-section h2,
.sidebar h2{
	font-size: 1.5rem;
}

/* Blog styles (color + borders) */
.blog_head h5,
.blog_head h5 span{
	color: var(--ecos-green) !important;
}

/* Blog post title hover: match parent specificity (0,2,2) */
.blog_inner_txt h3 a:hover {
	color: var(--ecos-accent) !important;
}

.blog_cat a,
.blog_single_cat a{
	border-color: var(--ecos-green) !important;
}

.blog_read_more a{
	border-color: var(--ecos-green) !important;
}
.blog_read_more a:hover{
	background: var(--ecos-green) !important;
	color: #fff !important;
}

/* tags list: base and hover styling using ecos-accent */
.blog_tags_part ul li a{
    color: var(--ecos-dark) !important;
	background: var(--ecos-accent) !important;
	border-color: var(--ecos-accent) !important;
}
.blog_tags_part ul li a:hover{
	background: var(--ecos-accent) !important;
	color: #fff !important; /* keep contrast */
}

/* tags heading accent */
.blog_tags_part h2 span{
    color: var(--ecos-accent) !important;
}

/* widgets: hover should use ecos accent color */
.widget ul li a:hover{
	color: var(--ecos-accent) !important;
}

/* Navigation active/hover states: mirror the parent's exact selectors so we
	 match its specificity and our child stylesheet (loaded after) wins. */
.main-navigation .menu>li .sub-menu>li.current-menu-ancestor>a,
.main-navigation .menu>li .sub-menu>li.current-menu-parent>a,
.main-navigation .menu>li .sub-menu>li.current-menu-item>a,
.main-navigation .menu .current-menu-ancestor>a,
.main-navigation .menu .current-menu-parent>a,
.main-navigation .menu .current-menu-item>a,
.main-navigation .menu>li .sub-menu>li>a:hover,
.main-navigation .menu>li>a:hover {
	color: var(--ecos-accent) !important; /* gold #D4AF37 */
}


/* Submenu arrow / caret: many themes put a small triangle or caret using a
	 pseudo-element on the submenu. This rule targets that pseudo-element and
	 attempts both common patterns: a border-based triangle and a background
	 square/caret. We use !important to preserve the override like other rules.
 */
.main-navigation .menu>li>.sub-menu::before{
	/* common triangle approach (border-color) */
	border-color: transparent transparent var(--ecos-green) transparent !important;
	/* ensure it's visible if the pseudo-element depends on color property */
	color: var(--ecos-green) !important;
}

/* Pagination current page indicator (use accent for visibility) */
.page_order .nav-links span.current {
	background: var(--ecos-accent) !important;
	border-color: var(--ecos-accent) !important;
	color: var(--ecos-cream) !important; /* ensure contrast against accent background */
}

/* Hover state for pagination links: accent background with dark text */
.page_order .nav-links a:hover {
	background: var(--ecos-accent) !important;
	color: var(--ecos-cream) !important; /* ensure contrast against accent background */
}

.page_order .nav-links a {
	border-color: var(--ecos-accent) !important;
	color: var(--ecos-dark) !important;
}

/* Slider heading size override to match design preference */
.inner_slider_content h1{
    font-size: 45px !important;
}

/* Headline decorative pseudo-element color (use accent) */
.head_line:after{
	background: var(--ecos-accent) !important;
	/* if the pseudo-element is using color or border, cover those too */
	color: var(--ecos-accent) !important;
	border-color: var(--ecos-accent) !important;
}

/* Responsive: ensure mobile nav open button uses accent color */
@media screen and (max-width: 767px) {
	button.open-nav-btn {
		color: var(--ecos-accent) !important;
		/* if the button has borders or icon color, set those too */
		border-color: var(--ecos-accent) !important;
		background: transparent !important;
	}
	/* mobile: slide-content close button use accent for icon/border */
	.slide-content .close-btn {
		color: var(--ecos-accent) !important;
		border-color: var(--ecos-accent) !important;
		background: transparent !important;
	}
}

/* =================================================================
   CTA Button Component
   Professional call-to-action button for external store links
   ================================================================= */

.cta-button {
	/* Core display properties */
	display: inline-block;
	padding: 14px 32px;
	margin: 10px 0;
	
	/* Typography */
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	letter-spacing: 0.5px;
	
	/* Colors - elegant & sober */
	color: #fff !important;
	background: var(--ecos-green);
	border: 2px solid var(--ecos-green);
	
	/* Visual polish */
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	cursor: pointer;
	
	/* Smooth transitions */
	transition: all 0.3s ease;
	
	/* Prevent unwanted text effects */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Hover state - subtle elevation & color shift */
.cta-button:hover {
	background: var(--ecos-accent);
	border-color: var(--ecos-accent);
	color: var(--ecos-dark) !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	transform: translateY(-2px);
}

/* Active/pressed state */
.cta-button:active {
	transform: translateY(0);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* Focus state for accessibility */
.cta-button:focus {
	outline: 2px solid var(--ecos-accent);
	outline-offset: 3px;
}

/* External link indicator (optional) */
.cta-button[target="_blank"]::after {
	content: " ↗";
	font-size: 14px;
	margin-left: 4px;
	opacity: 0.8;
}

/* Variant: Amazon — uses Amazon's brand orange + dark navy */
.cta-button.cta-amazon {
	background: #FF9900;
	border-color: #FF9900;
	color: #232F3E !important;
}

.cta-button.cta-amazon:hover {
	background: #232F3E;
	border-color: #232F3E;
	color: #FF9900 !important;
}

.cta-button.cta-amazon:focus {
	outline-color: #FF9900;
}

/* Variant: Secondary/Ghost style */
.cta-button.cta-secondary {
	background: transparent;
	color: var(--ecos-green) !important;
	border-color: var(--ecos-green);
}

.cta-button.cta-secondary:hover {
	background: var(--ecos-green);
	color: #fff !important;
}

/* Variant: Large size */
.cta-button.cta-large {
	padding: 18px 40px;
	font-size: 18px;
}

/* Variant: Small size */
.cta-button.cta-small {
	padding: 10px 24px;
	font-size: 14px;
}

/* Responsive: Full-width on mobile */
@media screen and (max-width: 480px) {
	.cta-button.cta-responsive {
		display: block;
		width: 100%;
		max-width: 100%;
	}
}