/*
 * Base styles the hand-coded service pages were designed on.
 *
 * Those pages (/services, /refrigerator-removal and the other .oc-cr pages) were written
 * inside the old WordPress/Elementor shell, so their own CSS leans on that shell's
 * defaults: the theme's reset.css, the Elementor kit's typography and buttons, and a few
 * global form rules. This file brings those defaults back, only inside
 * <main class="oc-legacy">, so the pages look exactly as before on the new build.
 * custom-page.html loads it before the page's own CSS.
 *
 * :where(.oc-legacy) rules weigh the same as the old element-level reset rules;
 * .oc-legacy rules weigh the same as the old ".elementor-kit-2932 h1" kit rules.
 */

/* ---- Elementor kit: body text ---- */
.oc-legacy {
  color: #000;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- theme reset.css (and the browser defaults Bootstrap's reboot changes) ---- */
:where(.oc-legacy) :is(h1, h2, h3, h4, h5, h6) {
  color: inherit; font-family: inherit; font-weight: 500; line-height: 1.2;
  margin-top: .5rem; margin-bottom: 1rem;
}
:where(.oc-legacy) h1 { font-size: 2.5rem; }
:where(.oc-legacy) h2 { font-size: 2rem; }
:where(.oc-legacy) h3 { font-size: 1.75rem; }
:where(.oc-legacy) h4 { font-size: 1.5rem; }
:where(.oc-legacy) h5 { font-size: 1.25rem; }
:where(.oc-legacy) h6 { font-size: 1rem; }
:where(.oc-legacy) p { margin-top: 0; margin-bottom: .9rem; }
:where(.oc-legacy) a { background-color: transparent; color: #c36; text-decoration: none; }
:where(.oc-legacy) a:active, :where(.oc-legacy) a:hover { color: #336; }
:where(.oc-legacy) :is(b, strong) { font-weight: bolder; }
:where(.oc-legacy) small { font-size: 80%; }
:where(.oc-legacy) img { border-style: none; height: auto; max-width: 100%; }
:where(.oc-legacy) :is(img, svg) { vertical-align: baseline; }
:where(.oc-legacy) figure, :where(.oc-legacy) blockquote { margin: 1em 40px; }
:where(.oc-legacy) figcaption { color: #333; font-size: 16px; font-style: italic; font-weight: 400; line-height: 1.4; }
:where(.oc-legacy) :is(ul, ol) { padding-left: 40px; }
:where(.oc-legacy) :is(dd, dl, dt, li, ol, ul) {
  background: transparent; border: 0; font-size: 100%; margin-top: 0; margin-bottom: 0;
  outline: 0; vertical-align: baseline;
}
:where(.oc-legacy) details { display: block; }
:where(.oc-legacy) summary { display: list-item; cursor: auto; }
:where(.oc-legacy) label { display: inline-block; line-height: 1; vertical-align: middle; margin-bottom: 0; }
:where(.oc-legacy) :is(button, input, optgroup, select, textarea) {
  font-family: inherit; font-size: 1rem; line-height: 1.5; margin: 0;
}
:where(.oc-legacy) :is(input[type=date], input[type=email], input[type=number], input[type=password],
  input[type=search], input[type=tel], input[type=text], input[type=url], select, textarea) {
  border: 1px solid #666; border-radius: 3px; padding: .5rem 1rem; transition: all .3s; width: 100%;
}
:where(.oc-legacy) :is(input[type=date], input[type=email], input[type=number], input[type=password],
  input[type=search], input[type=tel], input[type=text], input[type=url], select, textarea):focus { border-color: #333; }
:where(.oc-legacy) textarea { overflow: auto; resize: vertical; }
:where(.oc-legacy) :is([type=checkbox], [type=radio]) { box-sizing: border-box; padding: 0; }
:where(.oc-legacy) :is([type=button], [type=submit], button) {
  -webkit-appearance: button; width: auto;
  background-color: transparent; border: 1px solid #c36; border-radius: 3px; color: #c36;
  display: inline-block; font-size: 1rem; font-weight: 400; padding: .5rem 1rem; text-align: center;
  transition: all .3s; -webkit-user-select: none; user-select: none; white-space: nowrap; text-transform: none;
}
:where(.oc-legacy) :is([type=button], [type=submit], button):focus:not(:focus-visible) { outline: none; }
:where(.oc-legacy) :is([type=button], [type=submit], button):is(:focus, :hover) {
  background-color: #c36; color: #fff; text-decoration: none;
}
:where(.oc-legacy) :is([type=button], [type=submit], button):not(:disabled) { cursor: pointer; }
:where(.oc-legacy) table {
  background-color: transparent; border-collapse: collapse; border-spacing: 0; font-size: .9em;
  margin-bottom: 15px; width: 100%;
}
:where(.oc-legacy) :is(td, th) { border: 1px solid hsla(0,0%,50%,.502); line-height: 1.5; padding: 15px; vertical-align: top; }
:where(.oc-legacy) th { font-weight: 700; }
:where(.oc-legacy) table :is(tfoot, thead) th { font-size: 1em; }
:where(.oc-legacy) table :is(caption + thead, colgroup + thead, thead:first-child) tr:first-child :is(td, th) {
  border-top: 1px solid hsla(0,0%,50%,.502);
}
:where(.oc-legacy) table tbody > tr:nth-child(odd) > :is(td, th) { background-color: hsla(0,0%,50%,.071); }
:where(.oc-legacy) table tbody tr:hover > :is(td, th) { background-color: hsla(0,0%,50%,.102); }
:where(.oc-legacy) table tbody + tbody { border-top: 2px solid hsla(0,0%,50%,.502); }
:where(.oc-legacy) :is(thead, tbody, tfoot, tr, td, th) { border-style: none; }
:where(.oc-legacy) :is(td, th) { border-style: solid; }
@media (max-width: 767px) {
  :where(.oc-legacy) table table { font-size: .8em; }
  :where(.oc-legacy) table table :is(td, th) { line-height: 1.3; padding: 7px; }
  :where(.oc-legacy) table table th { font-weight: 400; }
}

/* old global rule: long words never overflow */
.oc-legacy a, .oc-legacy h1, .oc-legacy h2, .oc-legacy h3, .oc-legacy p { word-break: break-word !important; }

/* ---- Elementor wrapper (.elementor a / .elementor img) ---- */
.oc-legacy a { box-shadow: none; text-decoration: none; }
.oc-legacy img { border: none; border-radius: 0; box-shadow: none; height: auto; max-width: 100%; }

/* ---- Elementor kit: links, headings, buttons ---- */
.oc-legacy a { color: #ED6F23; }
.oc-legacy h1 { font-size: 60px; font-weight: 900; line-height: 70px; }
.oc-legacy h2 { font-size: 42px; font-weight: 700; line-height: 50px; }
.oc-legacy h3 { font-size: 30px; font-weight: 700; line-height: 38px; }
.oc-legacy h4 { font-size: 24px; font-weight: 700; line-height: 28px; }
.oc-legacy button, .oc-legacy input[type="button"], .oc-legacy input[type="submit"] {
  background-color: #ED6F23; font-size: 16px; font-weight: 900; color: #fff;
  border-radius: 7px; padding: 20px 35px;
}
.oc-legacy button:hover, .oc-legacy button:focus, .oc-legacy input[type="button"]:hover,
.oc-legacy input[type="button"]:focus, .oc-legacy input[type="submit"]:hover, .oc-legacy input[type="submit"]:focus {
  background-color: #000; color: #fff;
}
@media (max-width: 1350px) {
  .oc-legacy h1 { font-size: 50px; line-height: 60px; }
  .oc-legacy h2 { font-size: 40px; }
}
@media (max-width: 1199px) {
  .oc-legacy h1 { font-size: 44px; line-height: 50px; }
  .oc-legacy h2 { font-size: 40px; line-height: 44px; }
}
@media (max-width: 1024px) {
  .oc-legacy h2 { font-size: 36px; }
  .oc-legacy h3 { font-size: 28px; }
}
@media (max-width: 991px) {
  .oc-legacy h1 { font-size: 36px; line-height: 44px; }
  .oc-legacy h2 { font-size: 30px; line-height: 32px; }
  .oc-legacy h3 { font-size: 26px; }
  .oc-legacy h4 { font-size: 20px; line-height: 24px; }
}
@media (max-width: 767px) {
  .oc-legacy { font-size: 14px; }
  .oc-legacy h1 { font-size: 28px; line-height: 36px; }
  .oc-legacy h2 { font-size: 24px; line-height: 28px; }
  .oc-legacy h3 { font-size: 22px; line-height: 28px; }
  .oc-legacy h4 { font-size: 20px; }
}

/* ---- old global form and FAQ rules ---- */
.oc-legacy .oc-consent-check {
  display: flex !important; align-items: flex-start !important; gap: 8px !important;
  font-size: 11px !important; line-height: 1.4 !important; color: #888 !important;
  margin: 10px 0 !important; cursor: pointer !important; padding: 0 !important; border: none !important;
  background: none !important; width: auto !important; height: auto !important; min-height: auto !important;
}
.oc-legacy .oc-consent-check input[type="checkbox"] {
  width: 16px !important; min-width: 16px !important; height: 16px !important; min-height: 16px !important;
  margin: 1px 0 0 0 !important; padding: 0 !important; border: 1.5px solid #ccc !important;
  border-radius: 3px !important; background: #fff !important; flex-shrink: 0 !important;
  accent-color: #F6851F !important; -webkit-appearance: checkbox !important; appearance: checkbox !important;
  cursor: pointer !important;
}
.oc-legacy .e-n-accordion-item summary {
  transition: background 0.25s ease, padding-left 0.25s ease !important; border-radius: 8px !important;
}

/* old global rule (css/hide-service-images-mobile.css): the people cut-outs are hidden on phones */
@media (max-width: 767px) {
  .oc-legacy img[src*="service-man.png"],
  .oc-legacy img[src*="How-Our-Junk-Haulers-Can-Help-You"],
  .oc-legacy img[src*="Local-Yard-Waste-Removal-Person-01.png"],
  .oc-legacy picture:has(img[src*="service-man.png"], img[src*="How-Our-Junk-Haulers-Can-Help-You"], img[src*="Local-Yard-Waste-Removal-Person-01.png"]) {
    display: none !important;
  }
}