/**
 * roosho. lab - brand layer (site-wide + Elementor editor)
 * 2026-11-02 23:31 GMT+6 - v0.2.0
 *
 * Classes usable anywhere in Elementor:
 *   .rs-hl        the "jack of all IT trades" highlight: cyan text, animated scan-line underline
 *   .rs-anchor    the word the logo's full stop belongs to; shows a magenta "." after it
 *   .rs-marquee   on a Heading widget: its text scrolls endlessly (rs-brand.js duplicates it)
 *   .rs-quote     on a Heading/Text widget: wraps it in terminal-style quote marks
 */
.rs-hl {
	--rs-hl-c: var(--e-global-color-primary, #00AEFF);
	color: var(--rs-hl-c);
	background-image: linear-gradient(90deg, var(--rs-hl-c), var(--e-global-color-accent, #E31F71), var(--rs-hl-c));
	background-size: 400px 0.08em;
	background-repeat: repeat-x;
	background-position: 0 100%;
	padding-bottom: 0.06em;
	animation: rs-hl-scan 6s linear infinite;
	white-space: nowrap;
}
@keyframes rs-hl-scan { from { background-position: 0 100%; } to { background-position: 400px 100%; } }
.rs-anchor::after { content: "."; color: var(--e-global-color-accent, #E31F71); }
html.rs-motion .rs-anchor::after { color: transparent; }
.rs-quote .elementor-heading-title::before,
.rs-quote .elementor-text-editor > :first-child::before { content: "> \""; color: var(--e-global-color-secondary, #0CBD8E); }
.rs-quote .elementor-heading-title::after,
.rs-quote .elementor-text-editor > :last-child::after { content: "\""; color: var(--e-global-color-secondary, #0CBD8E); }
.rs-marquee { overflow: hidden; }
.rs-marquee .elementor-heading-title { white-space: nowrap; }
.rs-marquee.is-running .elementor-heading-title { display: inline-flex; width: max-content; animation: rs-marquee var(--rs-marquee-speed, 38s) linear infinite; }
.rs-marquee.is-running:hover .elementor-heading-title { animation-play-state: paused; }
.rs-marquee .rs-marquee-copy { padding-right: 0.9em; }
@keyframes rs-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	.rs-hl { animation: none; background-size: 100% 0.08em; }
	.rs-marquee.is-running .elementor-heading-title { animation: none; }
}
/* 2026-11-02 23:50 GMT+6 - second line of the hero H1, and marquee separators. */
.rs-hl-sub { display: inline-block; margin-top: 0.18em; font-size: 0.52em; letter-spacing: -0.01em; }
.rs-sep { color: var(--e-global-color-accent, #E31F71); padding: 0 0.5em; }
.elementor-widget-text-editor .rs-hl { white-space: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (max-width: 600px) { .rs-hl-sub { white-space: normal; font-size: 0.58em; } }

/* 2026-11-02 22:31 GMT+6 - loop cards: lift + cyan edge on hover, image zoom. Add class rs-card to a loop item's root container. */
.rs-card { transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s, box-shadow .35s; will-change: transform; }
.rs-card:hover { transform: translateY(-4px); border-color: var(--e-global-color-primary, #00AEFF) !important; box-shadow: 0 18px 40px -22px rgba(0,174,255,.45); }
.rs-card .elementor-widget-image img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.rs-card:hover .elementor-widget-image img { transform: scale(1.045); }
.rs-card .rs-card-cta { transition: letter-spacing .3s; }
.rs-card:hover .rs-card-cta { letter-spacing: .06em; }
/* skill tiles */
.rs-tile { transition: border-color .3s, background-color .3s; }
.rs-tile:hover { border-color: var(--e-global-color-secondary, #0CBD8E) !important; }
@media (prefers-reduced-motion: reduce) { .rs-card, .rs-card:hover, .rs-card:hover .elementor-widget-image img { transform: none; transition: none; } }

/* 2026-11-10 16:05 GMT+6 - site search: header trigger, Off-Canvas modal, Search widget, live result rows */
.rs-search-trigger .elementor-button { display: inline-flex; align-items: center; gap: 0; transition: color .2s, border-color .2s, box-shadow .2s; }
.rs-search-trigger .elementor-button:hover, .rs-search-trigger .elementor-button:focus-visible { border-color: var(--e-global-color-primary, #00AEFF) !important; box-shadow: 0 0 0 3px rgba(0,174,255,.15); }
.rs-search-trigger .elementor-button-icon { margin: 0 !important; font-size: 14px; }
.rs-search-trigger .elementor-button-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* the widget box itself takes no room in the header row */
.elementor-widget-off-canvas.rs-search-modal { position: absolute !important; width: 0 !important; height: 0 !important; margin: 0 !important; }

.rs-search-modal .e-off-canvas__overlay { background: rgba(6,8,10,.72) !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.rs-search-modal .e-off-canvas__main { margin-top: 12vh; max-width: calc(100vw - 32px); background: #14171A !important; border: 1px solid #30353A; border-radius: 18px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(0,174,255,.08); overflow: visible; }
.rs-search-modal .e-off-canvas__content { max-height: 76vh; overflow-y: auto; border-radius: 18px; }
.rs-search-panel { background: transparent !important; }

.rs-search-box .e-search-form, .rs-search-box form { display: flex; gap: 10px; align-items: stretch; }
.rs-search-box .e-search-input-wrapper { flex: 1 1 auto; position: relative; }
.rs-search-box input[type="search"], .rs-search-box .e-search-input { width: 100%; min-height: 52px; background: #0E1012 !important; border: 1px solid #30353A !important; border-radius: 12px !important; color: #ECEFF1 !important; font-family: "JetBrains Mono", monospace; font-size: 15px; padding: 12px 16px 12px 44px !important; caret-color: #00AEFF; transition: border-color .2s, box-shadow .2s; }
.rs-search-box input::placeholder { color: #6B747C; }
.rs-search-box input:focus { outline: none; border-color: #00AEFF !important; box-shadow: 0 0 0 3px rgba(0,174,255,.18); }
.rs-search-box .e-search-input-wrapper > svg, .rs-search-box .e-search-input-wrapper > i, .rs-search-box .e-search-label { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #9AA4AD; fill: #9AA4AD; width: 15px; height: 15px; pointer-events: none; }
.rs-search-box .e-search-submit { min-height: 52px; padding: 0 20px !important; border-radius: 12px !important; background: #00AEFF !important; color: #071018 !important; border: 1px solid #00AEFF !important; font-family: "JetBrains Mono", monospace; font-weight: 600; font-size: 14px; cursor: pointer; transition: background .2s, color .2s; }
.rs-search-box .e-search-submit:hover { background: transparent !important; color: #00AEFF !important; }
.rs-search-box .e-search-submit svg { fill: currentColor; }

.rs-search-box .e-search-results-container, .rs-search-box .e-search-results { position: static !important; margin-top: 10px; background: transparent !important; border: 0 !important; box-shadow: none !important; max-height: none !important; padding: 0 !important; }
.rs-search-box .e-search-results .e-loop-item + .e-loop-item { margin-top: 2px; }
.rs-search-box .e-search-nothing-found-message { color: #9AA4AD; font-size: 14px; padding: 14px 4px; }

.rs-sr { transition: background .2s, box-shadow .2s; text-decoration: none !important; }
.rs-sr:hover, .rs-sr:focus-visible { background: #1E2226; box-shadow: inset 2px 0 0 #00AEFF; outline: none; }
.rs-sr .rs-sr-thumb img { width: 76px !important; height: 56px !important; object-fit: cover; border-radius: 8px; border: 1px solid #30353A; display: block; }
.rs-sr:hover .rs-sr-title .elementor-heading-title { color: #00AEFF !important; }
.rs-sr .rs-sr-title .elementor-heading-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.rs-search-hint .elementor-heading-title { opacity: .8; }
@media (max-width: 767px) {
	.rs-search-modal .e-off-canvas__main { margin-top: 10px; }
	.rs-search-hint { display: none; }
	.rs-search-box .e-search-submit { padding: 0 14px !important; }
}


/* 2026-11-10 16:40 GMT+6 - site search v2: matched to Elementor Pro 4.3 markup
   form.e-search-form > label.e-search-label + div.e-search-input-wrapper(input + output.results) + button.e-search-submit */
.rs-search-modal .e-off-canvas__content { background: transparent !important; color: #ECEFF1; }
.rs-search-box .e-search-form { position: relative !important; display: block !important; }
.rs-search-box .e-search-label { position: absolute !important; left: 16px !important; top: 26px !important; transform: translateY(-50%) !important; width: 16px !important; height: 16px !important; margin: 0 !important; padding: 0 !important; z-index: 2; display: flex !important; align-items: center; justify-content: center; color: #9AA4AD; }
.rs-search-box .e-search-label svg, .rs-search-box .e-search-label i { width: 15px !important; height: 15px !important; font-size: 15px !important; fill: #9AA4AD !important; color: #9AA4AD !important; }
.rs-search-box .e-search-input-wrapper { display: flex !important; flex-wrap: wrap !important; width: 100% !important; position: static !important; }
.rs-search-box .e-search-input { flex: 0 0 calc(100% - 124px) !important; max-width: calc(100% - 124px) !important; height: 52px !important; }
.rs-search-box .e-search-submit { position: absolute !important; right: 0 !important; top: 0 !important; width: 112px !important; height: 52px !important; min-height: 52px !important; justify-content: center; align-items: center; }
.rs-search-box .e-search-results-container { flex: 0 0 100% !important; width: 100% !important; position: static !important; display: block !important; }
.rs-search-box .e-search-results { display: block !important; }
.rs-search-box .e-search-results-list { display: grid !important; grid-template-columns: 1fr !important; gap: 2px !important; }
.rs-search-box .e-search-results .elementor-pagination { display: none !important; }
.rs-search-box .e-search-loader { margin: 12px auto 0; }
/* the row layout stays a row on phones too */
.rs-sr { flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; }
.rs-sr > .e-con { min-width: 0; }
.rs-sr .rs-sr-thumb { flex: 0 0 76px !important; width: 76px !important; }
.rs-sr .rs-sr-title .elementor-heading-title { color: #ECEFF1 !important; }
@media (max-width: 767px) {
	.rs-search-box .e-search-input { flex-basis: calc(100% - 64px) !important; max-width: calc(100% - 64px) !important; }
	.rs-search-box .e-search-submit { width: 54px !important; font-size: 0 !important; }
	.rs-search-box .e-search-submit::before { content: "\2192"; font-size: 20px; }
	.rs-search-panel { padding: 20px 16px 16px !important; }
	.rs-sr .rs-sr-thumb, .rs-sr .rs-sr-thumb img { width: 60px !important; flex-basis: 60px !important; height: 46px !important; }
}

/* 2026-11-10 17:20 GMT+6 - site search v3: icon spacing, panel scrolls inside the viewport on every screen */
.rs-search-box .e-search-input { padding-left: 46px !important; }
.rs-search-box .e-search-label { left: 18px !important; }
.rs-search-modal .e-off-canvas__main { overflow: hidden !important; max-height: calc(100vh - 14vh) !important; max-height: calc(100dvh - 14vh) !important; }
.rs-search-modal .e-off-canvas__content { max-height: inherit !important; overflow-y: auto !important; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #30353A transparent; }
@media (max-width: 767px) {
	.rs-search-modal .e-off-canvas__main { max-height: calc(100vh - 20px) !important; max-height: calc(100dvh - 20px) !important; }
}

/* 2026-11-10 17:30 GMT+6 - search: more room between the magnifier and the typed text */
.rs-search-modal .rs-search-box input.e-search-input { padding-left: 60px !important; }