/* ==========================================================================
   Green Lights Motors — modern responsive layer
   --------------------------------------------------------------------------
   Loaded last, on top of the autoser theme and WPBakery. It restyles and
   repairs; it does not change any page content or builder layout, so removing
   mu-plugins/mot-modern.php restores the previous appearance exactly.
   ========================================================================== */

:root {
  --mot-green: #4a9d17;
  --mot-green-dark: #3b7d12;
  --mot-green-soft: #eef7e8;
  --mot-ink: #1b1f24;
  --mot-body: #4a5058;
  --mot-muted: #6b7280;
  --mot-line: #e4e7ea;
  --mot-surface: #ffffff;
  --mot-bg: #f6f8f5;
  --mot-radius: 14px;
  --mot-shadow: 0 1px 2px rgba(27,31,36,.04), 0 10px 28px -14px rgba(27,31,36,.22);
}

/* --------------------------------------------------------------------------
   1. Stop sideways scrolling — the single most common mobile fault
   -------------------------------------------------------------------------- */

html, body { max-width: 100%; overflow-x: hidden; }

img, video, iframe, table { max-width: 100%; }
img { height: auto; }

/* WPBakery full-width rows often overflow on small screens */
.vc_row[data-vc-full-width] { overflow: hidden; }

/* --------------------------------------------------------------------------
   2. Typography — a real scale instead of fixed pixel sizes
   -------------------------------------------------------------------------- */

body {
  color: var(--mot-body);
  font-size: clamp(15.5px, 14.5px + 0.2vw, 17px);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--mot-ink);
  line-height: 1.18;
  letter-spacing: -0.015em;
  overflow-wrap: break-word;
}

h1 { font-size: clamp(1.9rem, 1.25rem + 2.9vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 1.12rem + 1.7vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 1.03rem + 0.75vw, 1.6rem); }
h4 { font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem); }

p { overflow-wrap: break-word; }

/* Long words and phone numbers should never force the page wider */
a, li, td, th, dd, dt { overflow-wrap: break-word; }

/* --------------------------------------------------------------------------
   3. Buttons — bigger targets, modern shape
   -------------------------------------------------------------------------- */

.btn, .button, button,
input[type="submit"], input[type="button"],
.vc_btn3, .wpb_button, .woocommerce a.button, .woocommerce button.button {
  border-radius: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  min-height: 46px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.btn:hover, .button:hover, .vc_btn3:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -10px rgba(74,157,23,.8);
}

.vc_btn3.vc_btn3-color-juicy-pink,
.vc_btn3.vc_btn3-color-green,
.woocommerce a.button.alt, .woocommerce button.button.alt {
  background-color: var(--mot-green) !important;
  border-color: var(--mot-green) !important;
}

/* --------------------------------------------------------------------------
   4. Sections and cards
   -------------------------------------------------------------------------- */

.vc_row.vc_row-has-fill { background-size: cover; background-position: center; }

.service-box, .work-box, .team-box, .post-box,
.wpb_content_element .wpb_wrapper > .service-item {
  background: var(--mot-surface);
  border: 1px solid var(--mot-line);
  border-radius: var(--mot-radius);
  box-shadow: var(--mot-shadow);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}

.service-box:hover, .work-box:hover, .post-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 2px rgba(27,31,36,.05), 0 18px 38px -18px rgba(27,31,36,.3);
}

/* --------------------------------------------------------------------------
   5. Forms — readable, and no iOS zoom-on-focus
   -------------------------------------------------------------------------- */

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="number"], input[type="search"], input[type="password"],
select, textarea {
  font-size: 16px;                 /* below 16px iOS zooms the page in */
  min-height: 46px;
  border: 1px solid #d7dbdf !important;
  border-radius: 10px !important;
  padding: .6rem .8rem !important;
  background: #fff;
  width: 100%;
  max-width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--mot-green) !important;
  box-shadow: 0 0 0 3px rgba(74,157,23,.16);
}

textarea { min-height: 120px; }

/* --------------------------------------------------------------------------
   6. Tables scroll rather than stretch the page
   -------------------------------------------------------------------------- */

.entry-content table, .woocommerce table.shop_table {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------------------
   7. Mobile layout repairs
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .vc_col-sm-3, .vc_col-sm-4, .vc_col-sm-6, .vc_col-sm-8, .vc_col-sm-9 {
    margin-bottom: 1.25rem;
  }
}

@media (max-width: 768px) {
  /* Builder rows carry huge desktop padding; make it proportionate */
  .vc_row,
  .vc_row.vc_row-has-fill,
  .vc_section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .vc_row .vc_row { padding-left: 0 !important; padding-right: 0 !important; }

  .vc_custom_1705514242331,
  .vc_custom_1534150704566,
  .vc_custom_1534155603972 {
    padding-top: 42px !important;
    padding-bottom: 42px !important;
  }

  /* Parallax is heavy and jumpy on phones */
  .parallax, .vc_parallax {
    background-attachment: scroll !important;
  }

  /* Centre headings and give them room */
  h1, h2 { text-align: center; }
  .wpb_text_column { text-align: left; }

  /* Buttons go full width so they are easy to hit */
  .vc_btn3, .btn, .wpb_button { width: 100%; text-align: center; }

  /* Sliders eat vertical space on small screens */
  .rev_slider_wrapper, #rev_slider_1_1_wrapper { max-height: 78vh !important; }

  /* Leave room for the sticky action bar */
  body.has-mot-bar { padding-bottom: 68px; }
}

@media (max-width: 480px) {
  .vc_row, .vc_section { padding-left: 14px !important; padding-right: 14px !important; }
  h1, h2 { letter-spacing: -0.02em; }
}

/* --------------------------------------------------------------------------
   8. Sticky call / book bar — phones only
   An MOT centre lives on phone calls, so the number is always one tap away.
   -------------------------------------------------------------------------- */

.mot-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9999;
  display: none;
  gap: 8px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.97);
  backdrop-filter: saturate(160%) blur(8px);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  border-top: 1px solid var(--mot-line);
  box-shadow: 0 -6px 24px -12px rgba(27,31,36,.35);
}

.mot-bar a {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 48px;
  border-radius: 11px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: .01em;
}

.mot-bar__call { background: var(--mot-green); color: #fff !important; }
.mot-bar__call:hover { background: var(--mot-green-dark); }

.mot-bar__book {
  background: #fff;
  color: var(--mot-ink) !important;
  border: 1.5px solid var(--mot-line);
}

.mot-bar svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; }

@media (max-width: 768px) {
  .mot-bar { display: flex; }
}

@media print {
  .mot-bar { display: none !important; }
}

/* --------------------------------------------------------------------------
   9. Accessibility and motion
   -------------------------------------------------------------------------- */

a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(74,157,23,.55);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .button:hover, .service-box:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   10. Top bar alignment
   The phone entry contains a stray <br> (from the theme option), which pushed
   "MOT CLASS 4 & CLASS 7" onto its own line and threw the row out of line.
   Suppressing it and laying the bar out with flex fixes the alignment at
   every width.
   -------------------------------------------------------------------------- */

#top-bar { border-bottom: 1px solid var(--mot-line); }

#top-bar .top-bar-content br { display: none; }

#top-bar .top-bar-inner-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 22px;
  min-height: 46px;
}

#top-bar .top-bar-content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 22px;
  float: none !important;
  width: auto !important;
}

#top-bar .top-bar-content .content {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.5;
  white-space: nowrap;
}

#top-bar .top-bar-content .content i {
  flex: none;
  line-height: 1;
  opacity: .75;
}

#top-bar .top-bar-content .content b { font-weight: 700; }

#top-bar .top-bar-socials {
  display: flex;
  align-items: center;
  float: none !important;
  width: auto !important;
  margin-left: auto;
}

#top-bar .top-bar-socials .inner,
#top-bar .top-bar-socials .icons {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#top-bar .top-bar-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  transition: background-color .15s ease, color .15s ease;
}

#top-bar .top-bar-socials a:hover { background: var(--mot-green); color: #fff; }

/* Social links with no href are decorative, so keep them out of the tab order */
#top-bar .top-bar-socials a[href=""] { pointer-events: none; opacity: .45; }

@media (max-width: 991px) {
  #top-bar .top-bar-inner-wrap {
    justify-content: center;
    text-align: center;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  #top-bar .top-bar-content { justify-content: center; gap: 4px 16px; }
  #top-bar .top-bar-socials { margin-left: 0; }
}

@media (max-width: 600px) {
  /* Long opening hours dominate a phone screen; the essentials stay */
  #top-bar .top-bar-content .content { white-space: normal; font-size: 13px; }
  #top-bar .top-bar-content .content:nth-child(3) { display: none; }
}

/* --------------------------------------------------------------------------
   11. Appointment page — calendar first on mobile
   On desktop the offer sits in a 1/3 column beside the calendar's 2/3 column.
   Stacked on a phone that puts "GET 10% OFF TODAY" above the calendar, so the
   booking tool — the reason people open the page — is pushed below the fold.
   Reordering only, at mobile widths; the desktop layout is untouched.
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
  .page-id-300 .vc_row {
    display: flex;
    flex-direction: column;
  }

  /* The calendar's column moves to the top of its row. */
  .page-id-300 .vc_col-md-8 { order: -1; }
  .page-id-300 .vc_col-md-4 { order: 1; }

  /* Give the calendar breathing room once it leads the page */
  .page-id-300 .vc_col-md-8 { margin-bottom: 28px; }

  /* The booking calendar itself needs to fit a phone */
  .page-id-300 .booked-calendar-wrap,
  .page-id-300 .booked-calendar,
  .page-id-300 .booked-list-view { max-width: 100%; overflow-x: auto; }

  .page-id-300 .booked-calendar table { min-width: 300px; }

  /* Day cells are tap targets, not just squares */
  .page-id-300 .booked-calendar td,
  .page-id-300 .booked-calendar th { padding: 4px !important; }
}

/* Browsers without :has() still get the order above; this adds the same
   behaviour for any other page that embeds the calendar beside a column. */
@media (max-width: 991px) {
  .vc_row:has(.booked-calendar-wrap) { display: flex; flex-direction: column; }
  .vc_column_container:has(.booked-calendar-wrap) { order: -1; }
}

/* --------------------------------------------------------------------------
   12. Hide sections left empty by the missing media records
   --------------------------------------------------------------------------
   The imported database contains only 10 of ~792 attachment records, so several
   sections render as blank space. Hiding them here is presentational only — no
   page content is altered, and every section reappears the moment a complete
   database (or the images) are restored. Remove this block to bring them back.
   -------------------------------------------------------------------------- */

/* "OUR WORKS" — portfolio carousel with no usable featured images.
   Its heading is white on a background image that is also missing, so the
   whole row reads as a tall empty white band. */
.vc_custom_1534150704566 { display: none !important; }

/* "OUR PARTNERS" has been removed from the page content itself, so no rule is
   needed here any more. TESTIMONIALS now occupies the full row width. */

/* Testimonial avatar: an empty circle where the photo would be. */
.wprt-testimonials .thumb:not(:has(img)) { display: none !important; }

/* Without the avatar the quote needs its own spacing */
.wprt-testimonials.style-2 .inner { padding-left: 0; }
.wprt-testimonials .name .company:empty { display: none; }

/* Trim the gap the hidden row leaves behind */
.vc_custom_1534155603972 { padding-top: 48px !important; padding-bottom: 48px !important; }