/* Talent Street: what the static site adds on top of the Kinetic theme.
   Desktop (1024 px and wider) looks exactly like the old Joomla site;
   the media queries at the end make it fit tablets and phones. */

/* ---- Parts the old scripts used to handle ---- */

/* Slideshow: pictures stacked, the active one fades in (old RokStories: fade 1 s, Expo ease) */
#rokstories-175 .image-full {width: 830px; height: 250px;}
#rokstories-175 .image-full img {display: block; opacity: 0; visibility: hidden; transition: opacity 1s cubic-bezier(0.87, 0, 0.13, 1), visibility 1s;}
#rokstories-175 .image-full img:first-child {opacity: 1; visibility: visible;}
#rokstories-175.is-ready .image-full img:first-child:not(.is-active) {opacity: 0; visibility: hidden;}
#rokstories-175 .image-full img.is-active {opacity: 1; visibility: visible;}
#rokstories-175 button {border: 0; padding: 0; margin: 0; background-color: transparent; font: inherit;}
/* Hover pictures: the theme's own sprite positions (it switched classes by script) */
#rt-showcase .rokstories-layout2 .feature-arrow-r:hover {background-position: 0 -79px;}
#rt-showcase .rokstories-layout2 .feature-arrow-l:hover {background-position: 0 -237px;}
#rokstories-175 button:focus-visible {outline: 2px solid #ff6600; outline-offset: 2px;}

/* Menu highlight that slides on hover (old Gantry "pill"; 250 ms, sine ease-out) */
.fusion-pill-l {pointer-events: none; opacity: 0;}
.fusion-pill-l.is-animated {transition: left .25s cubic-bezier(0.39, 0.575, 0.565, 1), width .25s cubic-bezier(0.39, 0.575, 0.565, 1), top .25s cubic-bezier(0.39, 0.575, 0.565, 1), opacity .25s;}
.menutop li > .item {z-index: 100;}

/* Menu button: phones only */
.ts-menu-toggle {display: none;}

/* Footer table had border=0 cellpadding=0 cellspacing=0 width=100% align=center */
.ts-footer-table {width: 100%; margin: 0 auto; border: 0; border-collapse: collapse; border-spacing: 0;}
.ts-footer-table td {padding: 0;}

/* Video keeps 560 × 315 on desktop */
.ts-video {display: block; max-width: 560px;}
.ts-video iframe {display: block; width: 560px; max-width: 100%; height: 315px; border: 0;}

/* Contact form */
.ts-trap {position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;}
.ts-captcha {min-height: 65px;}
.ts-form-status {margin: 15px 0; padding: 10px 12px; border: 1px solid #ddd; background: #f7f7f7; font-weight: bold;}
.ts-form-status.is-ok {border-color: #c6e0b4; background: #eef7e8; color: #2f6b1f;}
.ts-form-status.is-error {border-color: #f0b8a0; background: #fdf0ea; color: #b23a00;}
.contact-form label.invalid {color: #b23a00;}
.contact-form input.invalid, .contact-form textarea.invalid {border-color: #b23a00;}
[hidden] {display: none !important;}

/* Keyboard focus that the old theme never showed */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {outline: 2px solid #ff6600; outline-offset: 2px;}

/* ---- Tablets and small laptops: same layout, fluid width ---- */
@media (max-width: 1023px) {
	body {min-width: 0;}
	.rt-container {width: auto; margin: 0 12px;}
	.bodylevel-high .rt-surround, .bodylevel-med .rt-surround {margin: 0; padding: 0 12px;}
	.bodylevel-high .rt-surround-top, .bodylevel-med .rt-surround-top,
	.bodylevel-high .rt-surround-bottom, .bodylevel-med .rt-surround-bottom {margin: 0;}
	/* Gantry columns keep their 10 px side margins; widths shrink in the old 620:300 and 380:540 ratios */
	.rt-container .rt-grid-12 {width: calc(100% - 20px);}
	.rt-container .rt-grid-8 {width: calc((100% - 40px) * 0.6739);}
	.rt-container .rt-grid-4 {width: calc((100% - 40px) * 0.3261);}
	/* Header: logo column just wide enough for the 200 px logo, the menu gets the rest */
	.rt-container .rt-grid-5 {width: 210px;}
	.rt-container .rt-grid-7 {width: calc(100% - 250px);}
	#rt-main.mb8-sa4 {background-size: 100% auto;}
	#rt-showcase .rokstories-layout2 {margin: 0; padding: 0 76px;}
	#rokstories-175 .image-container {float: none;}
	#rokstories-175 .feature-pad {margin-left: 0;}
	#rokstories-175 .image-full {width: auto; height: auto; aspect-ratio: 830 / 250;}
	#rokstories-175 .image-full img {width: 100%; height: auto;}
	.customribbon3 img {max-width: 100%; height: auto;}
	img {max-width: 100%;}
	.contact-form input[size="60"], .contact-form textarea {max-width: 100%; box-sizing: border-box;}
}

/* ---- Phones: one column, menu behind a button ---- */
@media (max-width: 767px) {
	.rt-container {margin: 0 6px;}
	.bodylevel-high .rt-surround, .bodylevel-med .rt-surround {padding: 0 8px;}
	.rt-container .rt-grid-12, .rt-container .rt-grid-8, .rt-container .rt-grid-7,
	.rt-container .rt-grid-5, .rt-container .rt-grid-4 {width: auto; float: none;}
	#rt-main.mb8-sa4 {background: none;}

	/* Header: logo left, menu button right, menu drops down */
	#rt-header .rt-grid-5 {position: relative; min-height: 100px;}
	.ts-menu-toggle {display: block; position: absolute; right: 10px; top: 32px; padding: 9px 14px 9px 40px; border: 1px solid #c9b48a; border-radius: 3px; background: #8a5a2c; color: #fff; font: bold 14px/18px Helvetica, Arial, sans-serif; text-shadow: 1px 1px 1px #333; cursor: pointer;}
	.ts-menu-bars, .ts-menu-bars::before, .ts-menu-bars::after {position: absolute; left: 13px; width: 18px; height: 2px; background: #fff; content: "";}
	.ts-menu-bars {top: 17px;}
	.ts-menu-bars::before {top: -6px; left: 0;}
	.ts-menu-bars::after {top: 6px; left: 0;}
	#rt-header .rt-grid-7 {display: none;}
	.ts-menu-open #rt-header .rt-grid-7 {display: block;}
	.fusion-pill-l {display: none;}
	.menutop {margin: 0 0 10px; padding: 0 10px;}
	.menutop li, .menutop li.active:hover, .menutop li:hover {float: none; height: auto; margin: 0; border-top: 1px solid #e2d8c4;}
	.bodylevel-low.menu-type-splitmenu .menutop li.active {padding-top: 0;}
	.menutop li .item, .menutop li.active:hover .item, .menutop li:hover .item {height: auto; margin: 0; line-height: 22px; text-align: left;}
	.menutop li .item span, .menutop li.active .item span {padding: 11px 12px;}
	.menutop li.root.active, .menu-type-splitmenu .menutop li.active {background: none !important;}
	.menu-type-splitmenu .menutop li.active .item, .menu-type-splitmenu .menutop li.active:hover .item {background: #8a5a2c !important;}

	/* Banner and content */
	#rt-showcase .rokstories-layout2 {padding: 0 34px;}
	#rt-showcase .rokstories-layout2 .feature-arrow-l, #rt-showcase .rokstories-layout2 .feature-arrow-r {top: 50%; margin-top: -37px; transform: scale(.45);}
	#rt-showcase .rokstories-layout2 .feature-arrow-l {left: 0; transform-origin: 0 50%;}
	#rt-showcase .rokstories-layout2 .feature-arrow-r {right: 0; transform-origin: 100% 50%;}
	#rt-sidebar-a {margin-top: 10px;}
	.ts-video iframe {width: 100%; height: auto; aspect-ratio: 16 / 9;}

	/* Contact form: labels above fields */
	#contact-form dl dt, #contact-form dl dd {display: block; float: none; width: auto; margin-left: 0; text-align: left;}
	#contact-form input[type="text"], #contact-form input[type="email"], #contact-form textarea {width: 100%; box-sizing: border-box; font-size: 16px;}
}