/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

/* ================================================================
	EGYPTIAN MASTERS OPEN — Brand Theme
	Palette taken from the official logo:
	  charcoal  #1e221e   (canvas / header / footer)
	  gold      #E0A82E   (primary accent, buttons, links)
	  red       #C0392B   (hairline accents)
	Overrides the Canvas template's green (#83b341) accent.
================================================================= */

:root {
	--emo-charcoal: #1e221e;
	--emo-charcoal-2: #16190f;
	--emo-gold: #E0A82E;
	--emo-gold-dark: #c8941f;
	--emo-red: #C0392B;

	/* Recolour every Canvas accent (used 100+ times) from green -> gold */
	--cnvs-themecolor: #E0A82E;
	--cnvs-themecolor-rgb: 224, 168, 46;
}

/* ---------- Links ---------- */
a { color: var(--emo-gold-dark); }
a:hover { color: var(--emo-gold); }

/* ================================================================
	HEADER — dark charcoal with gold accents
================================================================= */
#header,
#header.sticky-header,
#header.sticky-header .header-wrap {
	--cnvs-header-bg: var(--emo-charcoal);
	--cnvs-header-sticky-bg: var(--emo-charcoal);
	--cnvs-primary-menu-color: rgba(255, 255, 255, 0.82);
	--cnvs-primary-menu-hover-color: var(--emo-gold);
	--cnvs-primary-menu-active-color: var(--emo-gold);
	--cnvs-header-misc-icons-color: rgba(255, 255, 255, 0.82);
	background-color: var(--emo-charcoal) !important;
}

#header { border-bottom: 2px solid var(--emo-gold); }
#header.sticky-header .header-wrap { background-color: var(--emo-charcoal) !important; }

/* Roomier header bar so the landscape logo reads well */
#header.header-size-sm { --cnvs-header-height-sm: 76px; }
#logo img { max-height: 56px; width: auto; }

/* Primary menu links */
#header .menu-link { color: rgba(255, 255, 255, 0.82); }
/* Active / hovered top-level link -> gold (overrides the template's
   per-category colours such as --cnvs-color-news #007BFF) */
#header .menu-container > .menu-item:hover > .menu-link,
#header .menu-container > .menu-item.current > .menu-link,
#header .menu-container > .menu-item[class*="menu-color-"].current > .menu-link {
	color: var(--emo-gold) !important;
}

/* Dropdown / sub menus */
#header .sub-menu-container,
#header .mega-menu-content {
	background-color: #25291f;
	border-color: rgba(224, 168, 46, 0.25);
}
#header .sub-menu-container .menu-link { color: rgba(255, 255, 255, 0.75); }
#header .sub-menu-container .menu-item:hover > .menu-link { color: var(--emo-gold); background-color: rgba(224, 168, 46, 0.08); }

/* Mobile hamburger */
.primary-menu-trigger,
#header .primary-menu-trigger .icon-line { color: #fff; }

/* Top utility nav (Login etc.) -> gold pill */
#header .nav .nav-link.text-uppercase {
	color: var(--emo-charcoal);
	background-color: var(--emo-gold);
	padding: 6px 18px;
	border-radius: 4px;
	font-weight: 600;
	transition: background-color .2s ease;
}
#header .nav .nav-link.text-uppercase:hover { background-color: #fff; }

/* ================================================================
	BUTTONS — solid gold with dark text
================================================================= */
.button,
.button.button-3d,
button.button {
	background-color: var(--emo-gold);
	color: var(--emo-charcoal) !important;
	border-radius: 4px;
	text-shadow: none;
}
.button:hover,
button.button:hover { background-color: var(--emo-gold-dark); color: var(--emo-charcoal) !important; }

.button.button-border {
	background-color: transparent;
	color: var(--emo-gold) !important;
	border: 2px solid var(--emo-gold);
}
.button.button-border:hover {
	background-color: var(--emo-gold);
	color: var(--emo-charcoal) !important;
}

/* ================================================================
	HEADINGS — gold underline + red hairline (echoes the logo)
================================================================= */
.heading-block::after { border-top-color: var(--emo-gold); }

/* Reusable accent rule you can drop under any title */
.emo-rule {
	display: block;
	width: 64px;
	height: 3px;
	margin: 14px 0 0;
	background: var(--emo-gold);
	border: 0;
	position: relative;
}
.emo-rule::after {
	content: "";
	position: absolute;
	left: 0; top: 6px;
	width: 32px; height: 3px;
	background: var(--emo-red);
}

/* Section title highlight colour */
.h-color-themecolor { color: var(--emo-gold) !important; }

/* ================================================================
	FOOTER — unify to brand charcoal, gold widget titles
================================================================= */
#footer { background-color: var(--emo-charcoal) !important; }
#footer .widget-title,
#footer h3, #footer h4 { color: var(--emo-gold); }
#footer a:hover { color: var(--emo-gold) !important; }
#footer img { max-height: 60px; width: auto; }

#copyrights {
	background-color: var(--emo-charcoal-2) !important;
	color: #9a9d92;
	border-top: 2px solid var(--emo-gold);
}
#copyrights a { color: var(--emo-gold); }
#copyrights a:hover { color: #fff; }

/* ================================================================
	MISC accents
================================================================= */
::selection { background: var(--emo-gold); color: var(--emo-charcoal); }
hr.emo-divider { border-color: var(--emo-gold); opacity: .6; }