/* ==========================================================================
   site.css — cleanup layer for the restored static site.
   Loaded after the template CSS. Fixes what the scrape broke and where the
   original layout failed on small screens. No framework, no web fonts.
   ========================================================================== */

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; }
img, iframe, video { max-width: 100%; }
img { height: auto; }
.edit-area table { max-width: 100%; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  padding: 8px 14px; background: #fff; color: #333;
}
.skip-link:focus { left: 8px; top: 8px; }

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline: 2px solid #c3845a; outline-offset: 2px;
}

/* ---------- Header: logo text (was a second <h1>) ---------- */
#logo .logo-title {
  display: inline-block; height: 90px; margin: 0;
  font-size: 24px; font-weight: 600; line-height: 1.2; white-space: nowrap;
}
#logo .logo-title::before { content: ""; display: inline-block; height: 100%; vertical-align: middle; }

/* ---------- Desktop menu: CSS chevrons replace the Font Awesome glyphs ---------- */
#nav > ul > li.has-subnav > a::after,
#nav li.has-subnav ul li.has-subnav > div a::after {
  content: ""; font-family: inherit; display: inline-block;
  width: 7px; height: 7px; padding: 0; margin-left: 10px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  vertical-align: middle;
}
#nav > ul > li.has-subnav > a::after { transform: translateY(-3px) rotate(45deg); }
#nav li.has-subnav ul li.has-subnav > div a::after { transform: rotate(-45deg); }

/* ---------- Mobile drawer ---------- */
.rwd-side .nav li.has-subnav .toggle { cursor: pointer; }
.rwd-side .nav li.has-subnav .toggle::after {
  content: ""; font-family: inherit; font-size: 0;
  width: 9px; height: 9px; margin: 0 4px;
  border-right: 2px solid #e9e9e9; border-bottom: 2px solid #e9e9e9;
  transform: rotate(-45deg);
}
.rwd-side .nav li.has-subnav.opened > .toggle::after,
.rwd-side .nav li.has-subnav.opened > div .toggle::after { transform: rotate(45deg); }

/* ---------- Banner ---------- */
#banner img { display: block; width: 100%; height: auto; }
#bodyinpage #banner { min-height: 220px; background-position: center 62%; background-size: cover; }
@media only screen and (max-width: 767px) {
  #bodyinpage #banner { min-height: 110px; background-size: cover; background-position: center 62%; }
}

/* ---------- Page headings ---------- */
.productdetail .h1title { display: block; }
#news-heading h1 {
  display: inline-block; vertical-align: middle; width: 85%; margin: 0;
  font-size: 1.5rem; font-weight: 600; line-height: 1.5; word-wrap: break-word;
}
@media only screen and (max-width: 630px) {
  #news-heading h1 { width: 100%; font-size: 1.3rem; }
}

/* ---------- Homepage ---------- */
#bodyinhome .view-more { padding: 10px 15px 30px; text-align: center; }
.btn-view-more {
  display: inline-block; min-width: 180px; padding: 20px 36px; border-radius: 10px;
  background-color: #a4a4ca; color: #fff;
  font: 700 18px/1 tahoma, arial, helvetica, sans-serif; letter-spacing: .02em;
  box-shadow: rgba(180, 180, 180, .3) 3px 3px 18px 0;
  text-decoration: none; transition: background-color .2s ease;
}
.btn-view-more:hover, .btn-view-more:focus { background-color: #8e8eb9; color: #fff; text-decoration: none; }

/* Work tiles: captions were hover-only, so phones never saw them */
.works-image:focus-within .overlay { opacity: 1; transform: translateY(0); }
@media (hover: none), only screen and (max-width: 767px) {
  .works-image .overlay { opacity: 1; transform: none; }
}
@media only screen and (max-width: 767px) { .works-image { height: 320px; } }
@media only screen and (min-width: 1921px) { #bodyinhome .fcol.fcol-2 { background-size: cover; } }

/* ---------- Editor content on small screens ---------- */
@media only screen and (max-width: 767px) {
  .edit-area [style*="padding-left: 50px"] { padding-left: 15px !important; }
  .edit-area span[style*="font-size: 40px"] { font-size: 30px !important; }
  .edit-area span[style*="font-size: 30px"] { font-size: 24px !important; }
  .edit-area span[style*="font-size: 26px"] { font-size: 22px !important; }
  p.spacer br + br { display: none; }
}
/* Stacked cards kept their inline right margin and pushed the page sideways */
@media only screen and (max-width: 576px) {
  .rwd-wrapper .col-3 { margin-right: 0 !important; }
}

/* ---------- Lists: case index, related cases, article hubs, 404 ---------- */
.article-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px;
  margin: 0; padding: 0; list-style: none;
}
.article-list > li { margin: 0; }
.article-list a {
  display: flex; flex-direction: column; height: 100%; padding: 16px 18px;
  border: 1px solid #ddd; border-radius: 3px; background-color: #fff;
  color: #666; text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.article-list a:hover, .article-list a:focus {
  border-color: #ccc; box-shadow: 0 2px 5px 1px rgba(0, 0, 0, .08); text-decoration: none;
}
.article-list h3 { margin: 0 0 8px; font-size: 1.1rem; font-weight: 600; line-height: 1.5; color: #815f31; }
.article-list .desc { font-size: .9rem; line-height: 1.7; color: #777; }
.case-intro { text-align: center; font-size: 1.05rem; line-height: 1.9; }
.related-product { margin-top: 10px; }
.related-product .article-list { font-size: 1rem; }
.not-found p { margin-bottom: 20px; font-size: 1.05rem; }

/* Press items have no detail page left, so they are cards without a link */
ul.product-list li a:not([href]) { cursor: default; }
ul.product-list li a:not([href]):hover { border-color: #ddd; box-shadow: none; }
@media only screen and (max-width: 850px) { .media-reports ul.product-list li { width: 50%; } }
@media only screen and (max-width: 495px) { .media-reports ul.product-list li { width: 100%; } }

/* ---------- Contact form ---------- */
.form-note { margin: 12px 0 0; font-size: .9rem; line-height: 1.7; color: #888; }

/* ---------- Footer ---------- */
.footer-info { align-items: center; }
.footer-info .footer-map { display: block; width: 100%; height: 360px; border: 0; }
.footer-text { color: #fff; text-align: center; }
.footer-title { margin: 0 0 18px; line-height: 1.4; }
.footer-title strong { display: block; font-size: 30px; font-weight: 700; }
.footer-title span { display: block; font-size: 18px; }
.footer-area { margin: 0 0 6px; font-size: 20px; }
.footer-area-note { margin: 0; font-size: 18px; }
.footer-contact { margin: 22px 0 0; padding: 0; list-style: none; font-size: 20px; line-height: 1.8; }
.footer-contact a { color: #fff; }
.footer-contact a:hover, .footer-contact a:focus { color: #f1d9c7; }
.footer-contact .tel a { font-size: 26px; }
#copyright p { margin: 0; font-size: 13px; color: #9d9d9d; }
@media only screen and (max-width: 767px) {
  .footer-info .footer-map { height: 260px; }
  .footer-title strong { font-size: 24px; }
  .footer-contact { font-size: 17px; }
  .footer-contact .tel a { font-size: 22px; }
}

/* ---------- Floating contact buttons ---------- */
.float-contact {
  position: fixed; right: 1%; bottom: 12vh; z-index: 1000;
  display: flex; flex-direction: column; gap: 14px;
}
.float-contact a { display: block; border-radius: 50%; }
.float-contact img { display: block; width: 56px; height: 56px; }
/* Phones: a bottom bar instead of icons floating over the text */
@media only screen and (max-width: 767px) {
  .float-contact {
    left: 0; right: 0; bottom: 0; flex-direction: row; justify-content: space-around; gap: 0;
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
    background-color: rgba(39, 39, 39, .96); box-shadow: 0 -2px 10px rgba(0, 0, 0, .15);
  }
  .float-contact a { display: flex; flex: 1 1 0; justify-content: center; border-radius: 0; }
  .float-contact img { width: 38px; height: 38px; }
  body { padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px)); }
  body.menu-open .float-contact { display: none; }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important; animation-duration: .01ms !important;
    animation-iteration-count: 1 !important; scroll-behavior: auto !important;
  }
}