/*
Theme Name:   Sinatra Child
Theme URI:    https://bransonrvers.com
Description:  Child theme of Sinatra for Ozark View RV Park. Holds all custom CSS, PHP and template overrides so they survive Sinatra parent updates.
Author:       SEO Architect
Template:     sinatra
Version:      1.0.2
Text Domain:  sinatra-child
*/

/* Custom CSS for Ozark View RV Park goes here (survives parent theme updates). */

/* --- Brand color fixes ---------------------------------------------------
   Replaces factory grays that show when theme_mods / JKit globals are unset
   or reset. Brand: gold #d08e02, dark #181d23 (mirrors the Elementor kit).
-------------------------------------------------------------------------- */

/* Header links, logo and hamburger were rendering Sinatra default #23282d.
   `body` prefix raises specificity so this wins regardless of CSS load order. */
body #sinatra-header,
body .si-header-widgets a:not(.si-btn),
body .sinatra-logo a,
body .si-hamburger {
	color: #181d23;
}

/* Jeg Elementor Kit ships its OWN palette on .jkit-color-scheme:
   meta gray #96989b and links/buttons blue #0058e6. Override the vars at
   source so every JKit widget (meta icons, links, buttons) is on-brand.
   `body` prefix guarantees these beat JKit's own .jkit-color-scheme rule. */
body .jkit-color-scheme,
body .jeg-elementor-kit {
	--jkit-txt-m-color: #181d23;            /* post-meta icons + text (was #96989b gray) */
	--jkit-txt-a-color: #d08e02;            /* links (was #0058e6 blue) */
	--jkit-btn-bg-color: #d08e02;           /* buttons (was #0058e6 blue) */
	--jkit-btn-bg-hover-color: #b87b02;     /* button hover (darker gold) */
	--jkit-element-darken-bg-color: #d08e02;
}

/* Elementor's kit-level global styling (button/icon colors) is not rendering
   on this site — only the --e-global-color-* vars output, not the kit element
   rules — so buttons fall to Elementor's default gray #69727d and icons lose
   their gold. Bind them to the brand color here. `body` prefix + wrapper
   selector guarantee these beat the default regardless of CSS load order.
   Buttons/icons that set an explicit color use a higher-specificity
   .elementor-element-XXX rule and are left untouched. */
body .elementor-button,
body .elementor-button-wrapper .elementor-button {
	background-color: var(--e-global-color-secondary, #d08e02);
	color: #fff;
}
body .elementor-button:hover,
body .elementor-button-wrapper .elementor-button:hover {
	background-color: #b87b02;
	color: #fff;
}

/* Elementor / ElementsKit icon widgets that lost their global-color binding
   render gray. Restore brand gold (header map icon, info-box icons, etc.). */
body .elementor-icon,
body .elementor-icon i,
body .elementor-icon svg,
body .elementor-icon-box-icon .elementor-icon,
body .elementskit-info-box-icon i,
body .elementskit-info-box-icon svg,
body .ekit-wid-con .icon i {
	color: var(--e-global-color-secondary, #d08e02);
	fill: var(--e-global-color-secondary, #d08e02);
}

/* Icon-list icons (header contact: map/phone/envelope, amenity lists) are
   hardcoded tan #b59d5c via per-element Elementor CSS (or uncolored → gray).
   Force brand gold. !important beats Elementor's .elementor-element-XXX rule
   without hand-editing Elementor data (forbidden per CLAUDE.md). Star ratings
   are NOT in .elementor-icon-list-icon, so they keep their own color. */
body .elementor-icon-list-icon i,
body .elementor-icon-list-icon svg,
body .elementor-icon-box-icon i,
body .elementor-icon-box-icon svg {
	color: var(--e-global-color-secondary, #d08e02) !important;
	fill: var(--e-global-color-secondary, #d08e02) !important;
}

/* Amenities icons use the ElementsKit ".icon style-color" wrapper, missed by
   the rules above. Force brand gold. */
body .icon.style-color,
body .icon.style-color i,
body .icon.style-color svg {
	color: var(--e-global-color-secondary, #d08e02) !important;
	fill: var(--e-global-color-secondary, #d08e02) !important;
}

/* The footer is an ELEMENTOR template (not Sinatra #colophon). Its links are
   icon-list widgets (Quick Links / Information / Office Location / social),
   with text in <span class="elementor-icon-list-text">. They rendered
   gray-on-dark and were invisible. Make them brand gold, white on hover.
   Color is set on BOTH the anchor and the text span (the span is what shows),
   and the hover targets the span so it actually flips. */
footer .elementor-widget-icon-list .elementor-icon-list-text,
footer .elementor-widget-icon-list .elementor-icon-list-item > a,
footer .elementor-widget-text-editor a,
footer .elementor-nav-menu a {
	color: #fff !important;
}
footer .elementor-widget-icon-list .elementor-icon-list-item > a:hover .elementor-icon-list-text,
footer .elementor-widget-icon-list .elementor-icon-list-item > a:hover,
footer .elementor-widget-text-editor a:hover,
footer .elementor-nav-menu a:hover {
	color: var(--e-global-color-secondary, #d08e02) !important;
}

/* Home "Read Our Reviews" section sits on a dark background; its heading and
   paragraph rendered dark-on-dark (invisible). Force white, scoped to these
   two Elementor widgets by ID so it can't affect light sections. */
.elementor-element-69c18535 .elementor-heading-title,
.elementor-element-97a9369,
.elementor-element-97a9369 .elementor-widget-container,
.elementor-element-97a9369 p {
	color: #fff !important;
}