/* ===========================================================================
   port-compat.css — the only stylesheet a ported legacy page loads beyond
   us26.css. It exists so legacy markup can be carried across word for word
   instead of being rewritten.

   WHY THIS FILE EXISTS
   The legacy pages were built on Bootstrap 3 plus a purchased theme ("Unify").
   That stack is 2.6 MB across 129 stylesheets, it restyles bare elements
   (body, a, h1–h6, *), and it needs jQuery 1.10.2 — a 2013 release with known
   published vulnerabilities. Loading it would break the new header and footer
   on every ported page and would put a vulnerable script in front of visitors.

   So the markup is preserved and the ~60 classes it actually uses are
   reimplemented here, scoped under .port so nothing can escape into the
   redesigned pages. The values are the legacy stylesheets' own — #72c02c is
   Unify's green, #e67e22 its orange, #555/#777/#eee its greys — read out of
   app.css, style.css and box-shadows.css, not invented.

   WHAT A FUTURE REBUILD DOES WITH THIS
   Nothing. When a page is rebuilt in the us26 design system, it stops loading
   this file and stops using these classes. When the last ported page is gone,
   delete this file and the two icon fonts with it. That is the plan: this is
   scaffolding with a known end date, not a second design system.

   Classes referenced by the ported markup that the legacy site never defined
   either — hero-unify, tech-solution2, main-check, check-style, faq-add,
   new-title, top-part — are deliberately absent here too. They did nothing
   before and they do nothing now.
   =========================================================================== */

.port {
  /* Local to ported pages. Nothing here leaks: every rule below is inside .port. */
  --p-accent:      #72c02c;   /* Unify green, app.css */
  --p-accent-dark: #5fb611;
  --p-orange:      #e67e22;
  --p-orange-dark: #d35400;
  --p-dark:        #585f69;
  --p-ink:         #555;
  --p-ink-2:       #777;
  --p-line:        #eee;
  --p-line-2:      #e4e9f0;
  --p-gutter:      15px;

  color: var(--p-ink);
  font-family: var(--u-sans);
  font-size: 15px;
  line-height: 1.6;
}

/* --- headings ------------------------------------------------------------ */
.port h1, .port h2, .port h3, .port h4, .port h5 {
  color: #333; font-weight: 600; line-height: 1.25; letter-spacing: normal;
  margin: 1.4em 0 .5em;
}
.port h1 { font-size: 30px; margin-top: 0; }
.port h2 { font-size: 24px; }
.port h3 { font-size: 19px; }
.port h4 { font-size: 16px; }
.port h2.heading-md { font-size: 20px; line-height: 24px; }
.port h3.heading-md { font-size: 18px; line-height: 22px; }
.port h3.heading-xs { font-size: 14px; margin-bottom: 0; }
.port p  { margin: 0 0 1em; }
.port a  { color: var(--p-accent); text-decoration: none; }
.port a:hover, .port a:focus-visible { text-decoration: underline; }
.port :focus-visible { outline: 3px solid var(--u-focus); outline-offset: 2px; }
.port hr { border: 0; border-top: 1px solid var(--p-line); margin: 1.5em 0; }
.port strong, .port b { font-weight: 700; }
.port .color-green { color: var(--p-accent); }
.port .headline { display: block; margin: 10px 0 25px; border-bottom: 1px dotted var(--p-line-2); }
.port .headline h2, .port .headline h3, .port .headline h4 {
  margin: 0 0 -2px; padding-bottom: 5px; display: inline-block;
  border-bottom: 2px solid var(--p-accent);
}
.port .headline h2 { font-size: 22px; }
.port .title-box-v2 { text-align: center; margin-bottom: 40px; }
.port .title-box-v2 h2 { font-size: 25px; text-transform: uppercase; }
.port .title-box-v2 p  { font-size: 13px; }

/* --- Bootstrap 3 grid, the parts the pages use --------------------------- */
.port .container { width: 100%; padding: 0; margin: 0; }
.port .row { display: flex; flex-wrap: wrap; margin: 0 calc(var(--p-gutter) * -1); }
.port .row > [class*="col-"] { padding: 0 var(--p-gutter); width: 100%; min-width: 0; }
.port [class*="col-"] > .row { margin-left: 0; margin-right: 0; }
.port .col-xs-12 { width: 100%; }
@media (min-width: 768px) {
  .port .col-sm-4  { width: 33.3333%; }
  .port .col-sm-12 { width: 100%; }
}
@media (min-width: 992px) {
  .port .col-md-2  { width: 16.6667%; }  .port .col-md-3  { width: 25%; }
  .port .col-md-4  { width: 33.3333%; }  .port .col-md-5  { width: 41.6667%; }
  .port .col-md-6  { width: 50%; }       .port .col-md-7  { width: 58.3333%; }
  .port .col-md-8  { width: 66.6667%; }  .port .col-md-9  { width: 75%; }
  .port .col-md-10 { width: 83.3333%; }  .port .col-md-12 { width: 100%; }
}
.port .pull-left  { float: left; }
.port .pull-right { float: right; }
.port .overflow-h { overflow: hidden; }

/* --- spacing utilities --------------------------------------------------- */
.port .margin-bottom-10 { margin-bottom: 10px; }
.port .margin-bottom-20 { margin-bottom: 20px; }
.port .margin-bottom-30 { margin-bottom: 30px; }
.port .margin-bottom-40 { margin-bottom: 40px; }
.port .no-top-space { margin-top: 0; padding-top: 0; }
@media (min-width: 992px) {
  .port .md-margin-bottom-10 { margin-bottom: 10px; }
  .port .md-margin-bottom-30 { margin-bottom: 30px; }
}

/* --- media --------------------------------------------------------------- */
.port img { max-width: 100%; height: auto; }
.port .img-responsive { display: block; max-width: 100%; height: auto; }
.port .rounded   { border-radius: 4px; }
.port .rounded-x { border-radius: 50%; }

/* --- lists and tables ---------------------------------------------------- */
.port ul, .port ol { margin: 0 0 1em; padding-left: 1.6em; }
.port .list-unstyled { padding-left: 0; list-style: none; }
.port .list-inline { padding-left: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0 1em; }
.port .table { width: 100%; border-collapse: collapse; margin-bottom: 1em; }
.port .table th, .port .table td { padding: 8px; border-top: 1px solid #ddd; text-align: left; vertical-align: top; }
.port .table > thead th { border-bottom: 2px solid #ddd; border-top: 0; }
/* Wide tables scroll inside themselves rather than pushing the page sideways. */
.port .table-wrap { overflow-x: auto; }

/* --- buttons ------------------------------------------------------------- */
.port .btn-u {
  border: 0; color: #fff; font-size: 14px; cursor: pointer; font-weight: 400;
  padding: 6px 13px; background: var(--p-accent); display: inline-block;
  text-decoration: none; transition: background var(--u-dur-1) var(--u-ease);
}
.port a.btn-u, .port a.btn-u:hover { color: #fff; text-decoration: none; }
.port .btn-u:hover, .port .btn-u:focus { background: var(--p-accent-dark); }
.port .btn-u-xs, .port .btn-u-small { padding: 3px 9px; font-size: 12px; }
.port .btn-u-sm { padding: 5px 11px; font-size: 13px; }
.port .btn-u-dark { background: var(--p-dark); }
.port .btn-u-dark:hover, .port .btn-u-dark:focus { background: #464c54; }
.port .btn-u-orange { background: var(--p-orange); }
.port .btn-u-orange:hover, .port .btn-u-orange:focus { background: var(--p-orange-dark); }
.port .btn-brd { background: none; border: 1px solid currentColor; }
.port .btn-brd.btn-u-orange { color: var(--p-orange); }
.port .btn-brd.btn-u-orange:hover { background: var(--p-orange); color: #fff; }
.port button.btn-u { font-family: inherit; }

/* --- icon wrappers (glyphs come from font-awesome.css / line-icons.css) --- */
.port i.icon-custom {
  color: var(--p-ink); width: 40px; height: 40px; font-size: 20px; line-height: 40px;
  margin-bottom: 5px; text-align: center; display: inline-block; border: 1px solid var(--p-ink);
}
.port i.icon-lg { width: 55px; height: 55px; font-size: 27px; line-height: 55px; }
.port i.icon-sm { width: 30px; height: 30px; font-size: 14px; line-height: 30px; }
.port i.icon-size-actual { width: auto; height: auto; border: 0; line-height: inherit; }
.port i.icon-color-u  { color: var(--p-accent); border-color: var(--p-accent); background: none; }
.port i.icon-bg-u     { color: #fff; border-color: transparent; background: var(--p-accent); }
.port i.icon-bg-orange{ color: #fff; border-color: transparent; background: var(--p-orange); }

/* --- content blocks ------------------------------------------------------ */
.port .banner-info { margin-bottom: 10px; overflow: hidden; }
.port .banner-info i { float: left; color: #fff; padding: 11px; min-width: 40px; font-size: 22px; text-align: center; margin: 7px 20px 0 0; }
.port .banner-info i.fa { min-width: 46px; }
.port .banner-info.light i { border: 1px solid #fff; }
.port .banner-info.dark  i { background: var(--p-dark); }
.port .banner-info h3 { font-size: 21px; margin: 0 0 5px; }
.port .info-blocks { margin-bottom: 15px; overflow: hidden; }
.port .info-blocks i.icon-info-blocks { float: left; color: var(--p-ink-2); font-size: 30px; min-width: 50px; margin-top: 10px; text-align: center; }
.port .info-blocks:hover i.icon-info-blocks { color: var(--p-accent); transition: color .2s ease-in-out; }
.port .info-blocks .info-blocks-in { padding: 0 10px; overflow: hidden; }
.port .info-blocks .info-blocks-in h3 { color: var(--p-ink); font-size: 20px; line-height: 28px; margin-top: 0; }
.port .info-blocks .info-blocks-in p  { font-size: 13px; }
.port .tag-box { padding: 20px; margin-bottom: 20px; background: #fff; }
.port .tag-box-v1 { border: 1px solid var(--p-line); border-top: 2px solid var(--p-accent); }
.port .blog-medium img { margin-bottom: 20px; }
.port .blog-medium .blog-info li, .port .blog-medium .blog-info li a { color: var(--p-ink-2); }
.port .blog-info { padding-left: 0; list-style: none; font-size: 13px; }

/* --- alerts -------------------------------------------------------------- */
.port .alert { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; }
.port .alert-info { color: #31708f; background: #d9edf7; border-color: #bce8f1; }
.port .alert .close { float: right; border: 0; background: none; font-size: 20px; line-height: 1; cursor: pointer; opacity: .4; }
.port .alert .close:hover { opacity: .8; }

/* --- progress bars ------------------------------------------------------- */
.port .progress { height: 20px; margin-bottom: 20px; overflow: hidden; background: #f5f5f5; border-radius: 4px; }
.port .progress-xs { height: 10px; }
.port .progress-bar { height: 100%; background: var(--p-dark); transition: width .6s ease; }
.port .progress-bar-u { background: var(--p-accent); }

/* --- shadow effect (box-shadows.css) ------------------------------------- */
.port .shadow-wrapper { z-index: 1; position: relative; }
.port .shadow-effect-2 { position: relative; }
.port .shadow-effect-2::before, .port .shadow-effect-2::after {
  content: ""; position: absolute; z-index: -1; bottom: 12px; width: 45%; height: 20%;
  left: 5px; transform: rotate(-3deg); box-shadow: 0 15px 10px #999;
}
.port .shadow-effect-2::after { left: auto; right: 5px; transform: rotate(3deg); }

/* --- the three job/parallax picture blocks (page_job.css) ---------------- */
.port .job-img,
.port .job-img-mvno,
.port .job-img-vd { overflow: hidden; position: relative; background-repeat: no-repeat; background-size: cover; }
.port .job-img      { min-height: 300px; background-image: url("../img/job/1.jpg"); background-position: 70% 40%; }
.port .job-img-mvno { min-height: 200px; background-image: url("../img/job/2.jpg"); background-position: 60% 50%; }
.port .job-img-vd   { min-height: 200px; background-image: url("../img/job/3.jpg"); background-position: 60% 50%; }
.port .job-img .job-description {
  padding: 20px; max-width: 450px; margin: 60px auto 100px; background: rgba(255,255,255,.85);
}
.port .job-img .job-description h2 { font-size: 20px; line-height: 27px; text-align: center; text-transform: uppercase; margin-top: 0; }
@media (max-width: 768px) { .port .job-img .job-description { padding: 10px; margin: 30px auto 100px; } }
.port .parallax-bg, .port .parallax-about { position: relative; background-size: cover; background-position: center; }

/* --- accordion and tabs --------------------------------------------------
   Bootstrap 3 drove these with jQuery. port-compat.js drives them with about
   forty lines of plain JavaScript instead. Both are written so that with no
   JavaScript at all every panel is OPEN and every tab pane is VISIBLE — the
   content is readable either way, which is why .collapse is only hidden once
   the us26 inline script has set .u-js on <html>.
   ------------------------------------------------------------------------- */
.port .panel-group { margin-bottom: 20px; }
.port .panel { margin-bottom: 6px; background: #fff; border: 1px solid #ddd; border-radius: 4px; }
.port .panel-heading { padding: 0; }
.port .panel-title { margin: 0; font-size: 14px; }
.port .panel-title > a, .port .accordion-toggle {
  display: block; padding: 10px 15px; background: #fefefe; color: #333;
  text-decoration: none; font-size: 14px; font-weight: 600;
}
.port .panel-title > a:hover { background: #f5f5f5; text-decoration: none; }
.port .panel-body { padding: 15px; border-top: 1px solid #ddd; }
.u-js .port .panel-collapse.collapse:not(.in) { display: none; }
.u-js .port .tab-content > .tab-pane:not(.active) { display: none; }
.port .nav-tabs { display: flex; flex-wrap: wrap; gap: 2px; padding-left: 0; list-style: none; border-bottom: 1px solid #ddd; margin-bottom: 0; }
.port .nav-tabs > li > a { display: block; padding: 8px 14px; color: var(--p-ink-2); border: 1px solid transparent; border-radius: 4px 4px 0 0; text-decoration: none; }
.port .nav-tabs > li.active > a { color: #333; background: #fff; border-color: #ddd #ddd #fff; }
.port .tab-content { padding: 15px; border: 1px solid #ddd; border-top: 0; background: #fff; }

/* --- reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .port *, .port *::before, .port *::after { transition-duration: .01ms !important; }
}