/*
 * Responsive layer for the Rainbow Automation design (loaded after the design CSS).
 * Desktop (1200px+) keeps the design exactly; this file only changes how things fit on smaller screens.
 * Show / hide and the footer columns use the Bootstrap 5 grid (bootstrap-grid.min.css, loaded in the master layout).
 */

/* ---------- Header ---------- */
/* Below xl the desktop menu, language button and CTA are hidden (Bootstrap d-none d-xl-*) and the ☰ button opens the sidebar */
@media (max-width:1199.98px){
  header.ra-header .nav{flex-wrap:nowrap;gap:14px}
  header.ra-header .nav .brand{flex:1 1 auto}
  header.ra-header .nav .menu-btn{flex:0 0 auto;cursor:pointer}
}
@media (max-width:560px){
  header.ra-header .brand{gap:10px}
  header.ra-header .brand img{height:52px;width:52px;border-radius:14px;padding:6px}
  header.ra-header .brand-text strong{font-size:18px;letter-spacing:-.5px}
  header.ra-header .brand-text small{letter-spacing:1px;font-size:9px}
}
@media (max-width:340px){
  header.ra-header .brand-text small{display:none}
}

/* ---------- Left sidebar (mobile / tablet menu) ---------- */
.ra-sidebar{
  position:fixed;top:0;left:0;bottom:0;z-index:1050;width:min(320px,86vw);
  display:flex;flex-direction:column;background:#fff;color:#172338;
  box-shadow:24px 0 60px rgba(17,24,39,.18);border-right:1px solid #e6ebf1;
  transform:translateX(-105%);visibility:hidden;transition:transform .32s cubic-bezier(.4,0,.2,1),visibility 0s linear .32s;
  font-family:inherit
}
.ra-sidebar.is-open{transform:none;visibility:visible;transition:transform .32s cubic-bezier(.4,0,.2,1)}
.ra-sidebar::before{content:"";display:block;height:6px;flex:0 0 6px;background:linear-gradient(90deg,#2eb453 0 20%,#f3a51b 20% 40%,#ec2331 40% 60%,#8b28a4 60% 80%,#2684d9 80% 100%)}
.ra-sidebar-backdrop{position:fixed;inset:0;z-index:1040;background:rgba(10,18,32,.45);backdrop-filter:blur(2px);opacity:0;transition:opacity .3s}
.ra-sidebar-backdrop.is-open{opacity:1}
html.ra-sidebar-open,html.ra-sidebar-open body{overflow:hidden}

.ra-sidebar-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 16px 14px;border-bottom:1px solid #eef2f6}
.ra-sidebar-brand{display:flex;align-items:center;gap:10px;min-width:0;color:inherit;text-decoration:none}
.ra-sidebar-brand img{width:46px;height:46px;flex:0 0 46px;object-fit:contain;border-radius:12px;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.07);padding:5px}
.ra-sidebar-brand strong{display:block;font-size:16px;line-height:1.1;letter-spacing:-.4px;text-transform:uppercase}
.ra-sidebar-brand small{display:block;margin-top:3px;font-size:8.5px;letter-spacing:1px;text-transform:uppercase;color:#64748b}
.ra-sidebar-close{flex:0 0 auto;width:38px;height:38px;border-radius:12px;border:1px solid #dce1e8;background:#fff;color:inherit;font-size:16px;line-height:1;cursor:pointer}
.ra-sidebar-close:hover{background:#f3f7fc}

.ra-sidebar-body{flex:1 1 auto;overflow-y:auto;padding:14px 16px 22px;display:flex;flex-direction:column;gap:16px}
.ra-sidebar-nav{display:flex;flex-direction:column;gap:4px}
.ra-sidebar-nav a{display:flex;align-items:center;padding:12px 14px;border-radius:12px;color:#243249;font-size:15px;font-weight:700;text-decoration:none;transition:background .2s,color .2s}
.ra-sidebar-nav a:hover{background:#f3f7fc;color:#287dcc}
.ra-sidebar-nav a.current{background:linear-gradient(135deg,#eaf3ff,#f3edff);color:#287dcc}
.ra-sidebar-nav a.current::before{content:"";width:6px;height:6px;border-radius:50%;background:#287dcc;margin-right:10px}

.ra-sidebar-lang{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid #e6ebf1;border-radius:14px;background:#f8fafd}
.ra-sidebar-lang span{font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#64748b}
.ra-sidebar-cta{display:flex;align-items:center;justify-content:center;padding:14px 18px;border-radius:999px;background:linear-gradient(135deg,#2684d9,#1e6eb8);color:#fff;font-size:14px;font-weight:800;text-decoration:none;box-shadow:0 12px 26px rgba(38,132,217,.28)}
.ra-sidebar-cta:hover{color:#fff;filter:brightness(1.05)}
@media (min-width:1200px){.ra-sidebar,.ra-sidebar-backdrop{display:none!important}}
@media (prefers-reduced-motion:reduce){.ra-sidebar,.ra-sidebar-backdrop{transition:none}}

/* ---------- Footer: Bootstrap row / col instead of the design CSS grid ---------- */
footer.ra-footer .footer-top{display:block}
@media (min-width:1200px){
  footer.ra-footer .footer-top>.row>.footer-brand{flex:1.2 0 0%}
  footer.ra-footer .footer-top>.row>.footer-col{flex:.9 0 0%}
  footer.ra-footer .footer-top>.row>.footer-col:last-child{flex:1 0 0%}
}

/* ---------- Animated hero panels (Industrial / Training): fit instead of overlapping ----------
 * On small screens the design's own mobile positions make the panel parts overlap.
 * responsive.js adds .ra-fit there: the parts keep their desktop positions (values below are the design's
 * desktop values) and the whole stage is drawn at its 500px design width and zoomed down to fit. */
.ra-fit .ra-ind-stage{height:356px;border-radius:30px}
.ra-fit .ra-plc-dock{left:18px;bottom:18px;transform:none}
.ra-fit .ra-hmi-card{left:18px;top:18px;transform:none}
.ra-fit .ra-vfd-card{left:196px;top:20px;transform:none}
.ra-fit .ra-scada-card{right:16px;top:18px;width:156px;padding:14px;transform:none}
.ra-fit .ra-iiot-card{right:16px;bottom:18px;width:156px;padding:14px;transform:none}
.ra-fit .ra-inline-motor{left:146px;right:184px;bottom:18px;height:96px}
.ra-fit .tr-stage{height:270px}
.ra-fit .tr-hmi{left:16px;top:16px;transform:none}
.ra-fit .tr-vfd{right:16px;top:18px;transform:none}
.ra-fit .tr-cloud{right:18px;bottom:18px;transform:none}
.ra-fit .tr-robot{left:180px;top:58px;transform:none}
.ra-fit .tr-monitor{left:250px;bottom:20px;transform:none}
.ra-fit .tr-cnc{left:18px;bottom:18px;transform:none}

/* ---------- Top bar ----------
 * Desktop / tablet: unchanged (the track is invisible to layout, the copy is hidden).
 * Phones (below md): the texts wrapped onto broken lines, so they run as one smooth scrolling line instead. */
.meta-bar .meta-track{display:contents}
.meta-bar .meta-copy{display:none}
@media (max-width:767.98px){
  .meta-bar .wrap{display:block;overflow:hidden;padding:9px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
  .meta-bar .meta-track{display:flex;width:max-content;white-space:nowrap;animation:raMetaTicker 30s linear infinite}
  .meta-bar .meta-track>div{flex:0 0 auto;position:relative;padding-right:38px}
  .meta-bar .meta-track>div::after{content:"•";position:absolute;right:15px;color:#7d8a9c}
  .meta-bar .meta-copy{display:block}
  .meta-bar:hover .meta-track,.meta-bar:active .meta-track{animation-play-state:paused}
}
@keyframes raMetaTicker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:767.98px) and (prefers-reduced-motion:reduce){
  .meta-bar .wrap{-webkit-mask-image:none;mask-image:none}
  .meta-bar .meta-track{display:block;width:auto;animation:none;overflow:hidden;text-overflow:ellipsis}
  .meta-bar .meta-track>div{display:inline;padding-right:0}
  .meta-bar .meta-track>div::after{content:none}
  .meta-bar .meta-copy{display:none}
}