/* ============================================================
   Miles Engineering — YOOtheme Pro child custom.css
   Matches the live (yoo_katana) design on the J4 rebuild.
   Deployed to: public_html/mm4/templates/yootheme_child/css/custom.css
   Homepage rules are scoped with ".tm-top ~" — only the homepage
   renders a .tm-top (slideshow) section, so subpages are unaffected.
   Hard-refresh (Ctrl+Shift+R) to see edits (YOOtheme caches this file).
   ============================================================ */

/* --- Header: soft grey divider under the nav (separates nav from content/banner) --- */
.tm-header, .tm-header-mobile { border-bottom: 1px solid #e5e5e5; }

/* --- Sub-page article (grey page, white padded article) --- */
.uk-article { background: #ffffff; padding: 40px; }
@media (max-width: 640px) { .uk-article { padding: 20px; } }

/* --- Buttons --- */
.uk-button { border-radius: 0; }
.uk-button-primary { background: #C10A26; color: #fff; }
.uk-button-primary:hover, .uk-button-primary:focus { background: #a00920; color: #fff; }

/* --- Breadcrumb bar --- */
.tm-block-bread { background: #000; color: #fff; }

/* ============================================================
   RSForm! fields + submit — match live
   inputs: 1px #ddd, square, white, #777, 16px; Send: red, full width
   ============================================================ */
.rsform-input-box, .rsform-text-box, .rsform-select-box,
input.rsform-input-box, textarea.rsform-text-box, select.rsform-select-box {
  border: 1px solid #dddddd !important; border-radius: 0 !important;
  background: #ffffff !important; color: #777777 !important;
  padding: 6px 16px !important; font-size: 16px !important;
  font-family: 'Roboto', sans-serif !important;
  box-shadow: none !important; outline: none !important;
}
.rsform-text-box { width: 100% !important; min-height: 120px; }
.rsform-submit-button, button#Send, #Send,
.footer-contact-section #Send, .footer-contact-section .rsform-submit-button,
.uk-section-secondary .rsform-submit-button, .rsform-submit-button.uk-button-primary {
  background: #C10A26 !important; background-image: none !important;
  border: none !important; color: #ffffff !important;
  border-radius: 0 !important; padding: 10px 20px !important; width: 100% !important;
  font-size: 16px !important; cursor: pointer; text-transform: none;
}
.rsform-submit-button:hover, #Send:hover { background: #a00920 !important; }

/* RSForm layout: the form markup carries UIkit2 classes (uk-form-row,
   uk-form-controls, uk-width-1-3) that don't lay out under UIkit3.
   Rebuild each row as flex, honouring the intended column widths so
   Name/Email/Subject sit across the top, Message + Send go full width. */
.formContainer .uk-form-row {
  display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 12px 0; align-items: flex-start;
}
.formContainer .uk-form-row > * { flex: 1 1 100%; margin: 0; padding: 0; min-width: 0; }
.formContainer .uk-width-1-3 { flex: 0 0 calc(33.333% - 8px); max-width: calc(33.333% - 8px); }
.formContainer .uk-width-1-2 { flex: 0 0 calc(50% - 6px); max-width: calc(50% - 6px); }
.formContainer .uk-width-1-1 { flex: 0 0 100%; max-width: 100%; }
.formContainer .rsform-input-box,
.formContainer .rsform-text-box,
.formContainer .rsform-select-box { width: 100% !important; box-sizing: border-box; }
@media (max-width: 640px) {
  .formContainer .uk-width-1-3 { flex-basis: 100%; max-width: 100%; }
}

/* ============================================================
   FOOTER — YOOtheme footer layout area (dark contact + red-topped strip)
   ============================================================ */
.footer-contact-section { background: #1a1a1a !important; color: #ffffff; }
.footer-contact-section a { color: #ffffff; }
.footer-contact-title {
  text-align: center; font-size: 40px; line-height: 1em;
  text-transform: uppercase; font-weight: bold; color: #ffffff;
}
@media (max-width: 640px){ .footer-contact-title { font-size: 28px; } }
.footer-contact-table td { vertical-align: top; padding: 8px 10px; border: none; color: #fff; }
.footer-contact-table td:first-child { white-space: nowrap; width: 130px; }
.footer-strip-section { background: #ffffff !important; border-top: 10px solid #C10A26 !important; }
.footer-strip-section p { color: #777; margin: 4px 0; text-align: center; }

/* ============================================================
   HOMEPAGE (scoped to pages that render a .tm-top slideshow)
   ============================================================ */
/* Banner full-bleed, edge to edge */
.tm-top { background: transparent; padding: 0; }
.tm-top .uk-slideshow { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }

/* Banner overlay: transparent, big thin white headline w/ shadow */
.tm-top .uk-slideshow .uk-overlay-primary { background: transparent !important; }
.tm-top .uk-slideshow .uk-overlay .uk-h1,
.tm-top .uk-slideshow .uk-overlay .uk-h2 {
  font-size: 60px !important; line-height: 1.2em; font-weight: 100;
  color: #ffffff !important; text-shadow: 0 0 10px #924b29; font-family: 'Open Sans';
}
@media (max-width: 960px) {
  .tm-top .uk-slideshow .uk-overlay .uk-h1,
  .tm-top .uk-slideshow .uk-overlay .uk-h2 { font-size: 30px !important; }
}

/* Stack the two top modules full-width (banner over services) */
.tm-top > .uk-container > .uk-grid { flex-wrap: wrap; }
.tm-top > .uk-container > .uk-grid > * {
  flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important;
}

/* Services: overlap up into the banner, sit on a FULL-WIDTH red band
   (band is full-bleed; the tiles inside stay at container width, centred) */
.tm-top > .uk-container > .uk-grid > *:nth-child(2) {
  margin-top: -120px; position: relative; z-index: 2;
  background: #C10A26;
  flex: 0 0 100vw !important;
  width: 100vw !important; max-width: 100vw !important;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  padding-bottom: 25px;
}
.tm-top > .uk-container > .uk-grid > *:nth-child(2) > * {
  max-width: 1200px; margin-left: auto; margin-right: auto; padding: 0 15px;
}
/* Service tiles: dark caption bar over the image (like live) */
.tm-top [class*="uk-child-width-1-3"] .uk-panel { position: relative; overflow: hidden; }
.tm-top [class*="uk-child-width-1-3"] .uk-panel h3,
.tm-top [class*="uk-child-width-1-3"] .uk-panel .uk-h3 {
  position: absolute; bottom: 0; left: 0; margin: 0; width: auto;
  padding: 10px 16px; background: rgba(0,0,0,0.7);
  color: #ffffff !important; font-weight: 100; font-size: 20px;
}

/* Homepage body: near-black with white content cards */
.tm-top ~ .tm-main { background: #121212 !important; }
.tm-top ~ .tm-main .uk-article { background: #ffffff !important; }