/* Layered over the 2012 template (css/style.css): accessibility, contact form, footer, small screens. */

/* ---- Skip link and focus ---- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  padding: 0.6rem 1rem;
  background: #f66a13;
  color: #000;
  font: bold 16px Arial, Helvetica, sans-serif;
  text-decoration: none;
}
main:focus { outline: none; }
:focus-visible {
  outline: 3px solid #f66a13;
  outline-offset: 2px;
}

#leftcoln .logo a { display: inline-block; }
.cf-turnstile { display: block; }

/* ---- Contrast: testimonial author and the DOWNLOAD badge ---- */
#content .excerpt p.author span { color: #a3400a; }
#leftcoln .download a { color: #000; }

/* ---- Former fake links in the Male | Range | Non-Union row ---- */
#content .sub_links .sl-on { color: #f76a10; }
#content .sub_links .sl-dim { color: #9f9f9f; }

/* ---- Demo transcript link ---- */
#leftcoln .demo-transcript {
  clear: both;
  margin: -6px 0 14px 10px;
  font: 14px Arial, Helvetica, sans-serif;
}
#leftcoln .demo-transcript a { color: #f66a13; }

/* ---- Primary call to action ---- */
.cta-row { margin: 18px 0 6px; clear: both; }
#content .cta-btn {
  display: inline-block;
  background: #f66a13;
  color: #000;
  font: bold 18px/1 Arial, Helvetica, sans-serif;
  padding: 14px 28px;
  border-radius: 6px;
  text-decoration: none;
}
#content .cta-btn:hover { background: #fff; color: #000; }

/* ---- Footer ---- */
.site-footer {
  clear: both;
  padding: 24px 25px 30px;
  color: #c9c9c9;
  font: 14px/1.6 Arial, Helvetica, sans-serif;
}
.site-footer p { margin: 0; }
.site-footer a { color: #f66a13; }

/* ---- Text pages (transcript, legal, 404) ---- */
#content .doc { clear: both; color: #e6e6e6; font: 15px/1.7 Arial, Helvetica, sans-serif; }
#content .doc h2 { margin: 22px 0 6px; }
#content .doc p, #content .doc li { margin: 0 0 10px; }
#content .doc ul { padding-left: 20px; list-style: disc; }
#content .doc a { color: #f66a13; }
#content .doc .doc-meta { color: #bdbdbd; font-size: 13px; }
#content p a { color: #f66a13; }

/* ---- Contact form (template look, real labels, room to type) ---- */
#content .contactform_holder h3 { color: #000; margin-bottom: 4px; }
#content .ct-form .row { margin-top: 12px; }
#content .ct-form label {
  float: none;
  display: block;
  width: auto;
}
#content .ct-form .ct-req { color: #a3400a; font-size: 14px; }
#content .ct-form .ct-opt { color: #555; font-size: 14px; }
#content .ct-form .ct-hint {
  display: block;
  color: #444;
  font: 14px/1.4 Arial, Helvetica, sans-serif;
  margin-bottom: 4px;
}
#content .ct-form .text_field,
#content .ct-form .area {
  float: none;
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  min-width: 0;
  height: auto;
  min-height: 0;
  max-height: none;
  padding: 9px 10px;
  font: 16px Arial, Helvetica, sans-serif;
  color: #000;
  background: #fff;
  border: 1px solid #767676;
  border-radius: 4px;
}
#content .ct-form .area { min-height: 160px; resize: vertical; }
#content .ct-form [aria-invalid="true"] { border-color: #b00020; border-width: 2px; }
#content .ct-form .ct-error { display: block; color: #b00020; font: 14px Arial, Helvetica, sans-serif; }
#content .ct-form .ct-error:empty { display: none; }
#content .ct-form .ct-submit {
  background: #f66a13;
  color: #000;
  border: 0;
  border-radius: 6px;
  padding: 12px 26px;
  font: bold 18px Arial, Helvetica, sans-serif;
  cursor: pointer;
}
#content .ct-form .ct-submit:hover { background: #000; color: #fff; }
#content .ct-form .ct-submit[disabled] { opacity: 0.6; cursor: wait; }
#content .ct-status {
  clear: both;
  min-height: 1.4em;
  margin: 12px 0 0;
  color: #000;
  font: bold 15px Arial, Helvetica, sans-serif;
}
#content .ct-status.ct-ok { color: #1b6e20; }
#content .ct-status.ct-bad { color: #b00020; }
.ct-hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Small screens: stack the two columns ---- */
@media (max-width: 1020px) {
  #main_wrapper, #main { width: auto; max-width: 1000px; float: none; }
  #wrapper { padding: 16px 0; }
  #main { margin: 0 8px; border-radius: 10px; }
  #leftcoln, #rightcoln {
    float: none;
    width: auto;
    margin: 0 16px;
    display: block;
  }
  #rightcoln { padding-bottom: 8px; }
  #rightcoln .topnav_container { float: none; }
  #leftcoln .logo { width: auto; text-align: center; }
  #leftcoln .logo img { max-width: 100%; height: auto; }
  #leftcoln .voiceover_demo,
  #leftcoln .featured_clients { width: auto; box-sizing: border-box; }
  #leftcoln .voiceover_demo { height: auto; padding-bottom: 12px; background-color: #fff; border-radius: 10px; }
  #leftcoln .demo-transcript { margin: 8px 0 16px 4px; }
  #leftcoln .detail_box { width: auto; max-width: 286px; }
  #content { float: none; width: auto; }
  #content .header,
  #content .sub_links { float: none; width: auto; display: block; text-align: left; }
  #content .sub_links ul { text-align: left; }
  #content h1 { font-size: 22px; line-height: 26px; }
  #content .contactform_holder { float: none; width: auto; box-sizing: border-box; margin-bottom: 16px; }
  #content .excerpt,
  #content .studio_snapshot {
    float: none;
    display: block;
    width: auto;
    height: auto;
    margin: 0 0 16px;
    padding-bottom: 14px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
  }
  #content .studio_snapshot ul li { width: auto; }
  img, audio { max-width: 100%; }
}

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