/**
 * One Source Interiors — brand overrides for the Theratio theme.
 *
 * Loaded after style.css (see theratio_scripts() in functions.php).
 * The parent style.css is a vendor file and is never edited; everything the
 * theme's own `main_color` option cannot reach is overridden here instead.
 */

:root {
	--os-dark: #260E0E;
	--os-maroon: #721F0F;
	--os-accent: #FA6900;
	--os-cream: #FFF6F0;
	--os-white: #FFFFFF;
	--os-body: #7A6E68;
}

/* --------------------------------------------------------------------------
 * Buttons — style.css:1101 hard-codes #1a1a1a and main_color does not reach it
 * -------------------------------------------------------------------------- */
.octf-btn,
.octf-btn:visited,
.comment-form .octf-btn,
.cs-form .octf-btn {
	background: var(--os-accent);
	color: var(--os-white);
}

.octf-btn:hover,
.octf-btn:active,
.octf-btn:focus {
	background: var(--os-dark);
	color: var(--os-white);
}

.octf-btn.octf-btn-light {
	background: var(--os-white);
	color: var(--os-dark);
}

.octf-btn.octf-btn-light:hover,
.octf-btn.octf-btn-light:focus {
	background: var(--os-accent);
	color: var(--os-white);
}

.octf-btn.octf-btn-dark {
	background: var(--os-dark);
	color: var(--os-white);
}

.octf-btn.octf-btn-dark:hover,
.octf-btn.octf-btn-dark:focus {
	background: var(--os-accent);
	color: var(--os-white);
}

/* --------------------------------------------------------------------------
 * Royal Preloader — never let it trap clicks
 *
 * css/royal-preload.css fades the overlay with `opacity: 0` only. The div keeps
 * position:fixed, 100% x 100% and z-index:9999999999, so once the fade ends it
 * is an invisible full-screen shield; the page looks fine and nothing is
 * clickable. It normally survives only until the JS removes the node — but if
 * that never runs (slow asset, script error, bfcache restore) the shield stays.
 * -------------------------------------------------------------------------- */
#royal_preloader {
	pointer-events: none;
}

#royal_preloader.complete,
#royal_preloader.royal_preloader_loaded {
	visibility: hidden !important;
	pointer-events: none !important;
}

/* If the preloader JS never runs at all, body.royal_preloader would leave the
   whole document visibility:hidden. Guard against a blank page. */
body.royal_preloader {
	visibility: visible;
}

/* --------------------------------------------------------------------------
 * Hero slider
 * -------------------------------------------------------------------------- */

/* The client's interiors are bright and high-key, so white headline text washes
   out over them. Two-part fix, matching the dimmed hero in the approved design:
   knock the background down a stop, then lay a brand-tinted scrim over it.
   The scrim sits at z-index 4 — above the background mask (z 0), below the
   button (z 6) and the text layers (z 9-11) — so only the photo is affected. */
sr7-module sr7-bg {
	filter: brightness(0.94) saturate(0.98);
}

sr7-module sr7-slide::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(26, 16, 14, 0.30) 0%,
		rgba(26, 16, 14, 0.16) 40%,
		rgba(26, 16, 14, 0.34) 100%
	);
}

/* a touch of shadow keeps the headline crisp wherever the photo is palest */
sr7-module sr7-txt {
	text-shadow: 0 2px 24px rgba(38, 14, 14, 0.45);
}

/* --------------------------------------------------------------------------
 * Header — transparent over the hero, solid maroon once stuck
 * -------------------------------------------------------------------------- */

/* the logo sits on its own white plate; give it room to breathe */
.site-header .the-logo,
.site-header .the-logo a {
	display: block;
	line-height: 0;
}
@media screen and (min-width: 1024px) {
	section.is-stuck {
		background-color: var(--os-maroon);
	}
}

.site-header .octf-menu > ul > li > a:hover,
.site-header .octf-menu > ul > li.current-menu-item > a,
.main-navigation ul.menu > li.current-menu-item > a,
.main-navigation ul.menu > li:hover > a {
	color: var(--os-accent);
}

/* dropdowns pick up the brand dark rather than the demo near-black */
.main-navigation ul.menu ul.sub-menu,
.main-navigation ul.menu > li > ul {
	background-color: var(--os-dark);
}

.main-navigation ul.menu ul.sub-menu li a:hover {
	color: var(--os-accent);
}

/* --------------------------------------------------------------------------
 * Headings & type
 * -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.elementor-widget-heading .elementor-heading-title {
	color: var(--os-dark);
}

body {
	color: var(--os-body);
}

/* the "[ ABOUT COMPANY ]" style eyebrow above each section heading */
.ot-heading > span {
	color: var(--os-accent);
	letter-spacing: 1.5px;
}

.ot-heading.is-dots:before {
	border-bottom-color: var(--os-accent);
}

a {
	color: var(--os-dark);
}

a:hover,
a:focus,
a:active {
	color: var(--os-accent);
}

/* --------------------------------------------------------------------------
 * Icon boxes (services) — maroon panel, orange icon
 * -------------------------------------------------------------------------- */
.icon-box .icon-main,
.icon-box .icon-main svg {
	color: var(--os-accent);
	fill: var(--os-accent);
}

/* the small "READ MORE" link inside a service box: style.css paints a #dddddd
   swatch behind it, which reads as a grey chip on the maroon panel */
.icon-box .btn-details {
	color: var(--os-accent);
}

.icon-box .btn-details:before {
	background: rgba(250, 105, 0, 0.35);
}

.icon-box .btn-details:hover {
	color: var(--os-white);
}

/* --------------------------------------------------------------------------
 * Counters — [200+] in orange over an uppercase dark label
 * -------------------------------------------------------------------------- */
.ot-counter span {
	color: var(--os-accent);
	font-weight: 400;
}

.ot-counter h6 {
	color: var(--os-dark);
}

/* --------------------------------------------------------------------------
 * Skill / progress bars
 * -------------------------------------------------------------------------- */
.ot-progress {
	color: var(--os-dark);
}

.ot-progress .progress-bar,
.ot-progress .progress-bar:after {
	background: var(--os-accent);
}

/* --------------------------------------------------------------------------
 * Portfolio filter
 * -------------------------------------------------------------------------- */
.project_filters li a {
	color: var(--os-body);
}

.project_filters li a.selected,
.project_filters li a:hover {
	color: var(--os-accent);
}

.projects-grid .projects-box .portfolio-info .portfolio-cates,
.projects-grid .projects-box .portfolio-info .portfolio-cates a {
	color: var(--os-accent);
}

/* --------------------------------------------------------------------------
 * Footer — dark band, cream text, orange accents
 * -------------------------------------------------------------------------- */
.site-footer {
	background-color: var(--os-dark);
	color: rgba(255, 246, 240, 0.7);
}

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6,
.site-footer .elementor-heading-title {
	color: var(--os-white);
}

.site-footer a {
	color: rgba(255, 246, 240, 0.7);
}

.site-footer a:hover {
	color: var(--os-accent);
}

.site-footer .elementor-social-icon {
	background-color: transparent;
	border: 1px solid rgba(255, 246, 240, 0.25);
}

.site-footer .elementor-social-icon:hover {
	background-color: var(--os-accent);
	border-color: var(--os-accent);
}

/* newsletter field in the last footer column */
.site-footer input[type="email"],
.site-footer input[type="text"] {
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(255, 246, 240, 0.25);
	color: var(--os-white);
	border-radius: 0;
}

.site-footer input::-webkit-input-placeholder {
	color: rgba(255, 246, 240, 0.5);
}

.site-footer input::placeholder {
	color: rgba(255, 246, 240, 0.5);
}

/* --------------------------------------------------------------------------
 * Misc chrome
 * -------------------------------------------------------------------------- */
#back-to-top,
.octf-swiper-button-next,
.octf-swiper-button-prev,
.bg-primary {
	background: var(--os-accent);
}

blockquote {
	border-left-color: var(--os-accent);
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--os-accent);
	outline: none;
}

::selection {
	background: var(--os-accent);
	color: var(--os-white);
}