/* WordPress and accessibility adaptations; original visual styles stay intact. */
html { scroll-behavior: smooth; }
body { top: 0 !important; position: static !important; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 100000; background: #fff; color: #172638; padding: 12px 18px; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid #3474ba; outline-offset: 3px; }
.onecadvn-background-source { display: none; }
.wow { visibility: visible !important; }
.onecadvn-content { padding-top: 125px; padding-bottom: 80px; min-height: 60vh; }
.onecadvn-content article { margin: 25px 0 45px; }
.onecadvn-content h1 { margin-bottom: 25px; }
.onecadvn-submenu-toggle { display: none; }
/* Keep the source #back-top geometry and arrow from the legacy stylesheet. */
.onecadvn-back-top { margin: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .4s, visibility .4s; }
.onecadvn-back-top.is-visible { opacity: 1; visibility: visible; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
    .onecadvn-back-top { transition: none; }
}
.admin-bar .topabsolute { top: 32px; }
@media (min-width: 992px) {
    .btr-menu > li.mega:focus-within > ul { display: block; background: #f4f6f7; position: absolute; width: 100%; left: 0; z-index: 999; padding: 10px; border-top: 5px solid #172638; border-radius: 1rem; box-shadow: 0 4px 5px #0003; }
    .btr-menu > li.normal:focus-within > ul { display: block; position: absolute; background: #f4f6f7; min-width: 250px; border-top: 4px solid #172638; }
}
@media (max-width: 991px) {
    .navbar-header { float: none; }
    .navbar-toggle { display: block; }
    .navbar-collapse.collapse { display: none !important; }
    .navbar-collapse.in { display: block !important; }
    .navbar-nav { float: none !important; margin: 7.5px -15px; }
    .navbar-nav > li { float: none; }
    header.navbar-inverse, .topabsolute header.navbar-inverse { background: white; }
    header.navbar-inverse .container { width: 100%; }
    .navbar-brand { height: 50px; padding: 5px 15px; }
    .navbar-brand img { height: 36px !important; width: auto; }
    .btr-menu li > ul { display: none !important; position: static !important; width: 100% !important; min-height: 0 !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; }
    .btr-menu > li.mega > ul > li { width: 100%; float: none !important; }
    .btr-menu > li { text-align: center; }
    .btr-menu > li > a { padding: 12px 15px; line-height: 24px; }
    .btr-menu .caret { display: none; }
    .onecadvn-submenu-toggle { display: block; position: absolute; right: 0; top: 3px; width: 44px; min-height: 40px; border: 0; border-left: 1px solid #ddd; background: transparent; color: #172638; font-size: 22px; }
    .btr-menu li.hassub { position: relative; }
    .btr-menu li.hassub > a { padding-right: 48px; }
    .btr-menu li.submenu-open > ul { display: block !important; }
    .navbar-collapse.in { max-height: calc(100dvh - 100px); overflow-y: auto; background: #f4f6f7; }
    .topabsolute .navbar-collapse.in .btr-menu > li > a { color: #172638; }
    .nav-tabs { display: flex; }
    .nav-tabs > li { float: none; flex: 1; }
    .nav-tabs > li > a { padding: 10px 5px; }
    .typography-block img { max-width: 100%; height: auto; }
    .admin-bar .topabsolute { top: 46px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}
.ocd-post-grid{display:flex;flex-wrap:wrap;gap:28px 0}.ocd-post-grid img{width:100%;height:200px;object-fit:cover}.ocd-post-grid h2,.ocd-post-grid h3{font-size:22px;line-height:1.4;margin:18px 0}.onecadvn-content h1{font-size:36px;line-height:1.3}
@media(min-width:768px){.ocd-hide-desktop{display:none!important}}
@media(max-width:767px){.ocd-hide-mobile{display:none!important}.ocd-mobile-cta a.fancybox{display:inline-block!important}.ocd-mobile-cta .container{display:flex;flex-wrap:wrap}.ocd-mobile-cta a{font-size:12px;padding:8px}.ocd-mobile-cta{max-width:100%}}

.fix-bottommenu .fancybox { background: #0068b1; }

.ocd-about-section { padding-top: 25px; padding-bottom: 25px; }
.ocd-about-section img { max-width: 100%; height: auto !important; }
.ocd-about-section > .container > .row { margin-left: 0; margin-right: 0; }

.ocd-info-section { margin-bottom: 0; }
.ocd-info-page .content > .ocd-info-section { padding-top:0; padding-bottom:0; }
.ocd-info-page .content > .ocd-info-section:last-of-type { padding-bottom:30px; }
.ocd-info-section img { max-width:100%; height:auto !important; }
.ocd-info-menu { list-style:none; margin:0; padding:0; }
.ocd-info-menu li a { display:block; padding:9px 10px 9px 15px; color:#333; font-size:15px; line-height:25px; }
.ocd-info-menu li a::before { content:"\e080"; font-family:"Glyphicons Halflings"; font-size:10px; color:#0068b1; display:inline-block; vertical-align:middle; position:relative; top:-2px; margin-right:7px; }
.ocd-info-menu .current-menu-item > a, .ocd-info-menu li a:hover { background:#dadada; color:#333; }

.ocd-page-views { clear:both; padding:0; margin:0; font-size:16px; line-height:24px; }
.ocd-info-menu li a::before { line-height:1; }

.ocd-product-list{display:flex;flex-wrap:wrap}.ocd-product-list>div{display:flex;flex-direction:column}.ocd-product-list .product-box{min-height:470px;height:100%;display:flex;flex-direction:column}.ocd-product-list .product-box>.p-15{margin-top:auto}
h2.ocd-source-section-title{font-size:36px;line-height:1.1;margin-top:20px;margin-bottom:10px}
.ocd-product-pagination ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:24px 0;justify-content:center}.ocd-product-pagination a,.ocd-product-pagination span{display:block;padding:8px 14px;border:1px solid #ddd;border-radius:4px}.ocd-product-pagination .current,.ocd-product-pagination a:hover{background:#0068b1;color:white;border-color:#0068b1}
.ocd-linked-article>.typography-block{max-width:960px;margin:0 auto;padding:40px 15px}.ocd-linked-article img{max-width:100%;height:auto}

/* Blog lists share the archive's content column and single sidebar. */
.ocd-blog-main > .container.blog-wrapper {
  width: auto;
  padding-right: 0;
  padding-left: 0;
}

/* Keep legacy comparison tables scrollable within narrow content columns. */
@media (max-width: 767px) {
    .blocks-container .typography-block table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .blocks-container .typography-block .row > .row {
        margin-left: 0;
        margin-right: 0;
    }
}

/* Forma comparison cards: source styles belong in the theme, not richtext. */
.forma-wrap .hero {
  height: 240px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.forma-wrap .hero input { display: none; }

.forma-wrap .cards {
  position: absolute;
  inset: 0;
  perspective: 1200px;
  display: flex;
  align-items: center;
}

.forma-wrap .card {
  position: absolute;
  top: 50%;
  width: 36%;
  height: 72%;
  border-radius: 20px;
  cursor: pointer;
  transition: 0.6s ease;
  transform-style: preserve-3d;
  overflow: hidden;
  min-width: 140px;
}

.forma-wrap .card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
  border-radius: 20px;
  z-index: 1;
  pointer-events: none;
}

.forma-wrap .card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  border: 2px solid #ffd84d;
  opacity: 0;
  z-index: 2;
  transition: 0.3s;
}

.forma-wrap #tab1:checked ~ .cards .card1::after,
.forma-wrap #tab2:checked ~ .cards .card2::after {
  opacity: 1;
  box-shadow: 0 0 14px rgba(255,216,77,0.9);
}

.forma-wrap .card-content {
  position: absolute;
  inset: 0;
  padding: 20px;
  color: #fff;
  display: flex;
  flex-direction: column;
  z-index: 3;
}

.forma-wrap .logo-wrap {
  height: 38px;
  margin-bottom: 10px;
}

.forma-wrap .logo-wrap img {
  max-height: 100%;
  max-width: 90%;
  object-fit: contain;
}

.forma-wrap .card-content p {
  margin: 0;
  opacity: 0;
  transform: translateY(6px);
  transition: 0.4s;
}

.forma-wrap #tab1:checked ~ .cards .card1 p,
.forma-wrap #tab2:checked ~ .cards .card2 p {
  opacity: 1;
  transform: translateY(0);
}

.forma-wrap .card1 {
  left: 20%;
  transform: translateY(-50%);
}

.forma-wrap .card2 {
  right: 20%;
  transform: translateY(-50%) rotateY(-55deg);
  opacity: 0.65;
}

.forma-wrap #tab1:checked ~ .cards .card1 {
  left: 18%;
  width: 40%;
}

.forma-wrap #tab1:checked ~ .cards .card2 {
  right: 18%;
  transform: translateY(-50%) rotateY(-65deg) scale(0.9);
}

.forma-wrap #tab2:checked ~ .cards .card2 {
  right: 18%;
  width: 40%;
  transform: translateY(-50%);
}

.forma-wrap #tab2:checked ~ .cards .card1 {
  left: 18%;
  transform: translateY(-50%) rotateY(65deg) scale(0.9);
}

@media (max-width:768px){

  .forma-wrap .hero {
    height: 300px;
  }

  .forma-wrap .card {
    width: 44%;
    height: 82%;
  }

  .forma-wrap .card1 { left: 2%; }
  .forma-wrap .card2 { right: 2%; }

  .forma-wrap #tab1:checked ~ .cards .card1,
  .forma-wrap #tab2:checked ~ .cards .card2 {
    width: 55%;
  }

  .forma-wrap #tab1:checked ~ .cards .card2,
  .forma-wrap #tab2:checked ~ .cards .card1 {
    opacity: 0.7;
  }

  .forma-wrap .card2 {
    transform: translateY(-50%) rotateY(-25deg);
  }

  .forma-wrap #tab1:checked ~ .cards .card2 {
    transform: translateY(-50%) rotateY(-30deg) scale(0.95);
  }

  .forma-wrap #tab2:checked ~ .cards .card1 {
    transform: translateY(-50%) rotateY(30deg) scale(0.95);
  }

  .forma-wrap .card-content p {
    font-size: 13px;
    line-height: 1.4;
    word-break: break-word;
  }

  .forma-wrap .logo-wrap {
    height: 30px;
  }
}

/* Embedded players in article bodies keep their source size on desktop and fit the column on small screens. */
.ocd-article-body iframe, .ocd-cs iframe { max-width: 100%; }
.ocd-article-body video, .ocd-cs video { max-width: 100%; height: auto; }
@media (max-width: 767px) {
    .ocd-article-body a, .ocd-cs a, .ocd-cs span { overflow-wrap: anywhere; }
    .ocd-article-body .btn, .ocd-cs .btn { white-space: normal; }
    .ocd-cs img { max-width: 100%; height: auto; }
    /* Source rows are not always inside a padded container; keep them within the screen. */
    .ocd-cs .row { margin-left: 0; margin-right: 0; }
}
/* Below 1200px the article column is narrower than the usual 800px source players. */
@media (max-width: 1199px) {
    :is(.ocd-article-body, .ocd-cs) iframe:is([src*="youtube.com/embed"], [src*="youtube-nocookie.com"], [src*="player.vimeo.com"], [src*="wistia"]) { height: auto; aspect-ratio: 16 / 9; }
}

/* Contact page form: on the source this block is the second on the page, so the legacy
   `.block:nth-child(2n)` colours apply (white panel, grey fields). Keep them regardless of position. */
#contact-form .form-block { background: #fff; }
#contact-form .field-entry input,
#contact-form .field-entry textarea { background: #f2f3f5; }
/* The source captcha sat under the fields, beside the submit button; keep Turnstile there too. */
#contact-form .wpcf7-form { display: flex; flex-direction: column; }
#contact-form .wpcf7-form > * { order: 2; }
#contact-form .wpcf7-form > .field-entry { order: 0; }
#contact-form .wpcf7-form > .cf-turnstile { order: 1; margin-bottom: 15px; }
