/* interactive.css — styling for the JS-built mobile menu panel.
   The original slide-in panel is client-rendered, so it is reconstructed in
   app.js; these rules use the site's own design tokens so it matches. */
.cw-mobile-menu {
  position: fixed;
  left: 0;
  top: var(--size-header, 64px);
  width: 100vw;
  height: calc(100vh - var(--size-header, 64px));
  background: var(--color-white, #fff);
  z-index: var(--z-index-mobile-menu, 90);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-medium, 24px);
}
.cw-mobile-menu[hidden] { display: none; }
.cw-mobile-menu > ul,
.cw-mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.cw-mobile-menu > ul > li { border-bottom: 1px solid var(--color-border, #e6e6e6); }
.cw-mobile-menu .cw-mm-head {
  display: block;
  font-family: var(--font-family-heading, inherit);
  font-weight: 700;
  font-size: var(--fs-body, 1rem);
  color: var(--color-accent, #1a1a1a);
  text-decoration: none;
  padding: var(--space-small, 16px) 0;
}
.cw-mobile-menu ul ul { padding: 0 0 var(--space-small, 16px) var(--space-small, 16px); }
.cw-mobile-menu ul ul a {
  display: block;
  padding: calc(var(--space-tiny, 8px)) 0;
  color: var(--color-button-default, #1a1a1a);
  text-decoration: none;
  font-size: var(--fs-body, 1rem);
}
.cw-mobile-menu ul ul a:hover { color: var(--color-dext, #ff4f00); }
.cw-mm-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-small, 16px);
  margin-top: var(--space-medium, 24px);
}
/* footer top row: Windows download badge on the left, the three link columns
   to its right. Mobile keeps the desktop nav hidden (accordion shows instead). */
.cw-footer-top { display: flex; flex-wrap: wrap; gap: var(--space-large, 40px); align-items: flex-start; }
.cw-footer-top .footer-apps { flex: 0 0 auto; margin: 0; }
@media (min-width: 768px) {
  .cw-footer-top .footer-nav-desktop {
    display: flex; flex-direction: row; flex-wrap: wrap;
    gap: var(--space-large, 40px); flex: 1 1 auto;
  }
}

/* announcement bar dismissed — hide the bar, pull the fixed header to the top
   and trim the content offset by the bar height so no gap is left. */
.cw-banner-closed .announcement-bar { display: none !important; }
.cw-banner-closed .d-header-wrapper .d-header { top: 0 !important; }
.cw-banner-closed .layout-main-container {
  margin-top: calc(var(--size-header) - var(--size-top-banner)) !important;
}

/* step-tabs media panel images (panels built in app.js) */
.d-step-tabs-panel img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 600px;
  margin: 0 auto;
}
.d-step-tabs-tab { cursor: pointer; }

/* Windows download badge (footer) — store-badge format, light on dark footer */
.cw-win-download {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 10px;
  color: var(--color-white, #fff);
  text-decoration: none;
  line-height: 1.1;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.cw-win-download:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--color-white, #fff);
}
.cw-win-glyph { width: 26px; height: 26px; flex-shrink: 0; }
.cw-win-txt { display: flex; flex-direction: column; text-align: left; }
.cw-win-txt small { font-size: 0.72rem; opacity: 0.85; }
.cw-win-txt strong { font-size: 1rem; font-weight: 700; }

/* desktop: never show the JS panel even if toggled */
@media (min-width: 992px) {
  .cw-mobile-menu { display: none !important; }
}


/* smoother active-tab switching (color + underline fade) */
.d-tabs .react-tabs__tab{transition:color .2s ease;}
.d-tabs .react-tabs__tab svg{transition:color .2s ease;}
.d-tabs .react-tabs__tab:after{transition:background-color .2s ease;}

/* responsive safety net — never allow horizontal overflow / oversized media */
html{overflow-x:hidden;}
img,svg,video{max-width:100%;}

/* mobile header: move the Download button out of the top bar into the burger menu */
@media (max-width: 1099px){
  .d-header .d-header-buttons{ display:none !important; }
}
.cw-mm-actions .d-button{ width:100%; justify-content:center; }

/* hero / CTA button rows stack full-width instead of overflowing on small screens */
@media (max-width: 600px){
  .button-container{ flex-direction:column; align-items:stretch; row-gap:var(--space-small,12px); }
  .button-container > .d-button{ width:100%; justify-content:center; }
}

/* mobile footer: link columns sit side-by-side (fills the width, not sparse)
   instead of the chevron-less accordion. */
@media (max-width: 767px){
  .d-footer{ padding-left:var(--space-medium,24px); padding-right:var(--space-medium,24px); }
  .cw-footer-top{ flex-direction:column; gap:var(--space-medium,24px); align-items:flex-start; }
  .cw-footer-top .footer-apps{ align-self:center; }
  .cw-footer-top .footer-nav-desktop{
    display:flex !important; flex-direction:row; flex-wrap:wrap;
    justify-content:space-between; gap:var(--space-medium,24px);
    text-align:left; width:100%;
  }
  .cw-footer-top .footer-nav-desktop .footer-links{
    margin:0; flex:1 1 auto; min-width:40%; display:flex; flex-direction:column; gap:6px;
  }
  .cw-footer-top .footer-nav-desktop .footer-links-label{ margin-bottom:4px; }
  .d-footer .footer-nav-mobile{ display:none !important; }
  .d-footer hr{ margin:var(--space-small,16px) 0; }
  .d-footer .footer-bottom{ margin-top:0; }
}