/******************************************************************************/
/* Hewett Detailing — small additions on top of the Auto Spa template.        */
/* Everything here is either branding or something the template didn't cover. */
/* Keep this file small; prefer using the template's own classes.             */
/******************************************************************************/

/******************************************************************************/
/* Layout columns                                                             */
/*                                                                            */
/* base.css ships every layout column as visibility:hidden, and the template's */
/* jquery.responsiveElement.js measures each row and reveals it. We don't run  */
/* that jQuery, so without this the contact fields and the whole footer are    */
/* invisible. These rules do the same job with media queries.                  */
/*                                                                            */
/* The plugin stacked a row once the row itself measured 460px or less, and    */
/* 750px for the four-column rows. Those thresholds line up with the           */
/* container widths in responsive.css: 1170 / 940 / 750 / 460 / 300.           */
/******************************************************************************/

.template-layout-100 > .template-layout-column-left,
.template-layout-50x50 > .template-layout-column-left,
.template-layout-50x50 > .template-layout-column-right,
.template-layout-33x33x33 > .template-layout-column-left,
.template-layout-33x33x33 > .template-layout-column-center,
.template-layout-33x33x33 > .template-layout-column-right,
.template-layout-25x25x25x25 > .template-layout-column-left,
.template-layout-25x25x25x25 > .template-layout-column-center-left,
.template-layout-25x25x25x25 > .template-layout-column-center-right,
.template-layout-25x25x25x25 > .template-layout-column-right,
.template-layout-66x33 > .template-layout-column-left,
.template-layout-66x33 > .template-layout-column-right,
.template-layout-33x66 > .template-layout-column-left,
.template-layout-33x66 > .template-layout-column-right {
  visibility: visible;
}

/* Four-column rows (the footer) stack once the row is 750px or less. */
@media only screen and (max-width: 959px) {
  .template-layout-25x25x25x25 > .template-layout-column-left,
  .template-layout-25x25x25x25 > .template-layout-column-center-left,
  .template-layout-25x25x25x25 > .template-layout-column-center-right,
  .template-layout-25x25x25x25 > .template-layout-column-right {
    float: none !important;
    clear: both !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 60px !important;
  }
}

/* Two- and three-column rows stack once the row is 460px or less. */
@media only screen and (max-width: 767px) {
  .template-layout-50x50 > .template-layout-column-left,
  .template-layout-50x50 > .template-layout-column-right,
  .template-layout-33x33x33 > .template-layout-column-left,
  .template-layout-33x33x33 > .template-layout-column-center,
  .template-layout-33x33x33 > .template-layout-column-right,
  .template-layout-66x33 > .template-layout-column-left,
  .template-layout-66x33 > .template-layout-column-right,
  .template-layout-33x66 > .template-layout-column-left,
  .template-layout-33x66 > .template-layout-column-right {
    float: none !important;
    clear: both !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 60px !important;
  }

  .template-margin-bottom-reset {
    margin-bottom: 0 !important;
  }

  /* Stacked form fields need their left border back — see base.css:1194. */
  .template-layout-column-right .template-component-form-field,
  .template-layout-column-center .template-component-form-field {
    border-left-width: 1px;
  }
}

/******************************************************************************/
/* Package cards — featured package, and "from" pricing                       */
/******************************************************************************/

.template-component-booking .template-component-booking-package-list > li {
  position: relative;
}

/*
  The package we'd rather people booked, marked by tinting the card rather than
  sticking a badge on it.

  Deliberately just a border colour and a background — no extra ring or thicker
  border. The template sets `margin: 0 15px 30px` and `border-width: 1px` on
  these cards, and anything that layers a second edge outside the first reads
  as a double line rather than one crisp one.
*/
.template-component-booking .template-component-booking-package-list > li.hd-package-featured {
  border-color: #199cdb;
  background-color: #f5fafd;
}

/* Shown until a vehicle is picked, since the price depends on it. */
.hd-price-from {
  margin-right: 4px;
  color: #a8b1b6;
  font-size: 14px;
  font-style: italic;
  vertical-align: middle;
}

/* Nothing chosen yet, so there's no total to show. */
.hd-summary-empty {
  color: #cfd6d9;
}

/******************************************************************************/
/* Header banner                                                              */
/*                                                                            */
/* Every image shipped with the template is a flat grey placeholder — the real */
/* photos are licensed separately and were stripped out. So this paints a      */
/* deep blue instead, and layers a photo over it if one exists.                */
/*                                                                            */
/* TO USE A REAL PHOTO: save it as                                             */
/*     public/media/image/header/hero.jpg                                      */
/* and it appears automatically, darkened so the white heading stays readable.  */
/* Landscape, around 1920x800 or wider, works best.                            */
/* Until that file exists the browser skips it and the blue shows through.      */
/******************************************************************************/

.template-header.template-header-background-1 {
  background-color: #0b1f2c;
  background-image:
    /*
      Darkening wash so the white heading reads over anything underneath.
      Kept light at the top where the sky is, heavier lower down where a
      photo tends to have detail competing with the text.
    */
    linear-gradient(rgba(8, 18, 26, 0.34), rgba(8, 18, 26, 0.62)),
    /* The real photo, once one is saved to the path above. */
    url('../media/image/header/hero.jpg'),
    /* Soft glow behind the heading, in the site's blue. */
    radial-gradient(ellipse at 50% 38%, rgba(25, 156, 219, 0.55) 0%, rgba(25, 156, 219, 0) 62%),
    /* Base sweep, dark at the corners and lighter through the middle. */
    linear-gradient(125deg, #08161f 0%, #14567c 52%, #08161f 100%);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/*
  A photo has bright patches — chrome, headlights, sky — and text crossing one
  becomes hard to read. A soft shadow costs nothing and keeps the heading
  legible wherever it happens to land.
*/
.template-header .template-header-bottom .template-header-bottom-page-title h1,
.template-header .template-header-bottom .template-header-bottom-page-breadcrumb,
.template-header .template-header-top .template-header-top-logo a .hd-wordmark {
  text-shadow: 0 2px 12px rgba(6, 14, 20, 0.55);
}

/******************************************************************************/
/* Wordmark — stands in for a logo image until there's a real one             */
/******************************************************************************/

.template-header .template-header-top .template-header-top-logo a .hd-wordmark {
  font-size: 26px;
  font-weight: 900;
  line-height: 90px;
  color: #ffffff;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  font-family: 'Lato', Arial, sans-serif;
}

.template-header .template-header-top .template-header-top-logo a .hd-wordmark > span {
  color: #199cdb;
  margin-left: 10px;
}

/* The sticky header turns white, so the wordmark has to darken with it. */
.template-header .template-header-top.template-header-top-sticky .template-header-top-logo a .hd-wordmark,
.template-header .template-header-top.template-header-top-static .template-header-top-logo a .hd-wordmark {
  color: #222222;
}

/******************************************************************************/
/* Stepping down the booking form                                             */
/*                                                                            */
/* Choosing a vehicle or package scrolls to the next step. This keeps the      */
/* step heading off the very top edge when it lands.                          */
/******************************************************************************/

.template-component-booking > form > ul > li {
  scroll-margin-top: 30px;
}

/* Makes any in-page link glide down rather than jump. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/******************************************************************************/
/* Header breadcrumb                                                          */
/*                                                                            */
/* base.css:1861 pins every span in the breadcrumb to 30px, because the        */
/* template only ever put the arrow separator in a span. We put text there     */
/* too, so it needs its width back.                                           */
/******************************************************************************/

.template-header .template-header-bottom .template-header-bottom-page-breadcrumb span.hd-breadcrumb-text {
  width: auto;
  font-size: 14px;
  line-height: 28px;
  letter-spacing: 1px;
}

/******************************************************************************/
/* Booking form — bits the template handled with jQuery instead of CSS        */
/******************************************************************************/

/* The vehicle tiles are buttons in all but name, so say so on hover. */
.template-component-booking .template-component-booking-vehicle-list > li {
  cursor: pointer;
}

/*
  The template has no focus styling anywhere, so anyone tabbing through the
  page has no idea where they are. These outlines only show for keyboard
  users — :focus-visible leaves mouse clicks looking exactly as before.
*/
.template-component-booking .template-component-booking-vehicle-list > li:focus-visible,
.template-component-booking .template-component-button:focus-visible {
  outline: 2px solid #199cdb;
  outline-offset: 2px;
}

/*
  Form fields show no highlight when active, by request. The template overlaps
  fields by a pixel so they share borders, which clipped any highlight down the
  sides and looked broken.

  Note this leaves keyboard users without a visible position indicator on the
  form. Tiles and buttons below still show one.
*/

.template-component-form-field input:focus,
.template-component-form-field input:focus-visible,
.template-component-form-field textarea:focus,
.template-component-form-field textarea:focus-visible,
.template-component-form-field select:focus,
.template-component-form-field select:focus-visible,
.hd-datefield-button:focus,
.hd-datefield-button:focus-visible {
  outline: none;
}

/* Message textarea, styled to match the template's text inputs. */
.template-component-form-field textarea {
  width: 100%;
  height: 140px;
  padding: 12px 15px;
  resize: vertical;
  color: #777777;
  font-size: 14px;
  background-color: #ffffff;
  border: 1px solid #e2e6e7;
  font-family: 'Lato', Arial, sans-serif;
  box-sizing: border-box;
}

.template-component-form-field textarea:focus {
  outline: none;
  border-color: #199cdb;
}

/******************************************************************************/
/* Validation messages                                                        */
/******************************************************************************/

.template-component-form-field.hd-field-error input {
  border-color: #e02b2b;
}

/******************************************************************************/
/* Booking calendar                                                           */
/*                                                                            */
/* Replaces the browser's date box, which can't show that a day is taken.      */
/* Free days are clickable and blue; closed, too-soon and already-booked days  */
/* are visibly out of reach.                                                   */
/******************************************************************************/

.hd-calendar {
  max-width: 420px;
  margin: 26px auto 0 auto;
  padding: 18px 20px 14px 20px;
  border: 1px solid #e2e6e7;
  font-family: 'Lato', Arial, sans-serif;
}

.hd-calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.hd-calendar-month {
  color: #222222;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.hd-calendar-nav {
  width: 32px;
  height: 32px;
  color: #199cdb;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  background-color: #ffffff;
  border: 1px solid #e2e6e7;
  border-radius: 50%;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.hd-calendar-nav:hover:not([disabled]) {
  color: #ffffff;
  background-color: #199cdb;
  border-color: #199cdb;
}

.hd-calendar-nav[disabled] {
  color: #d5dadd;
  cursor: default;
}

.hd-calendar-weekdays,
.hd-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.hd-calendar-weekdays {
  margin-bottom: 6px;
}

.hd-calendar-weekdays > span {
  padding: 4px 0;
  color: #a8b1b6;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.hd-day {
  padding: 0;
  aspect-ratio: 1;
  color: #47484a;
  font-size: 14px;
  font-family: inherit;
  background-color: #ffffff;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.hd-day-blank {
  border: none;
}

/* Bookable. */
.hd-day-open {
  color: #199cdb;
  font-weight: 700;
  cursor: pointer;
  border-color: #199cdb;
}

.hd-day-open:hover {
  color: #ffffff;
  background-color: #199cdb;
}

.hd-day-selected {
  color: #ffffff;
  background-color: #199cdb;
  border-color: #199cdb;
}

/* Closed for the weekend rule, or inside the notice period. */
.hd-day-closed,
.hd-day-too-soon {
  color: #cfd6d9;
  cursor: default;
}

/* Already booked, or blocked out on the calendar. Struck through so it reads
   as "gone" rather than merely faint. */
.hd-day-taken {
  color: #b9c1c5;
  cursor: not-allowed;
  background-color: #f4f6f7;
  text-decoration: line-through;
}

.hd-calendar-note {
  margin: 14px 0 0 0;
  padding: 0;
  color: #a8b1b6;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

/******************************************************************************/
/* Date field — the calendar lives in a dropdown under it                     */
/******************************************************************************/

.hd-datefield {
  position: relative;
}

.hd-datefield-button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 10px 15px 25px 15px;
  color: #777777;
  font-size: 15px;
  font-family: 'Lato', Arial, sans-serif;
  text-align: left;
  cursor: pointer;
  background-color: transparent;
  border: none;
}

.hd-datefield-empty {
  color: #a8b1b6;
}

/* Little chevron, turned up while the calendar is showing. */
.hd-datefield-arrow {
  width: 8px;
  height: 8px;
  margin-left: 10px;
  border-right: 2px solid #199cdb;
  border-bottom: 2px solid #199cdb;
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.2s ease;
}

.hd-datefield-button[aria-expanded='true'] .hd-datefield-arrow {
  transform: translateY(1px) rotate(-135deg);
}

.hd-datefield-pop {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  min-width: 320px;
  background-color: #ffffff;
  box-shadow: 0 12px 34px rgba(11, 31, 44, 0.18);
}

.hd-datefield-pop .hd-calendar {
  margin: 0;
  border-color: #199cdb;
}

/* On a phone there isn't room to hang it off the left edge. */
@media only screen and (max-width: 767px) {
  .hd-datefield-pop {
    left: 50%;
    min-width: 0;
    width: 300px;
    transform: translateX(-50%);
  }
}

/******************************************************************************/
/* Start time                                                                 */
/******************************************************************************/

.template-component-form-field select {
  width: 100%;
  margin: 0;
  padding: 10px 15px 25px 15px;
  color: #777777;
  font-size: 15px;
  font-family: 'Lato', Arial, sans-serif;
  cursor: pointer;
  background-color: transparent;
  border: none;
  -webkit-appearance: none;
  appearance: none;
  /* Chevron drawn in, since removing the native one takes the arrow too. */
  background-image: linear-gradient(45deg, transparent 50%, #199cdb 50%),
    linear-gradient(135deg, #199cdb 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% - 4px), calc(100% - 15px) calc(50% - 4px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.template-component-form-field select:focus {
  outline: none;
}

/*
  "Choose a time" is placeholder text, so it takes the lighter grey the date
  field's "Choose a date" uses. Without this it sits at the filled-in colour
  and looks darker than its neighbour.
*/
.template-component-form-field select.hd-select-empty {
  color: #a8b1b6;
}

/* The list itself stays readable when opened. */
.template-component-form-field select option {
  color: #777777;
}

.hd-date-problem {
  max-width: 420px;
  margin: 12px auto 0 auto;
  color: #e02b2b;
  font-size: 13px;
  text-align: center;
  font-family: 'Lato', Arial, sans-serif;
}

/* Shown when the booking can't be sent at all — worth more than a field error. */
.hd-send-error {
  max-width: 560px;
  margin: 0 auto 20px auto;
  padding: 14px 18px;
  color: #8a2020;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  background-color: #fdf2f2;
  border: 1px solid #f0c9c9;
  font-family: 'Lato', Arial, sans-serif;
}

/*
  The submit control is a <button> so it can hold a spinner, but the template
  only ever styled <input>, so a button inherits none of the typography. These
  values are measured from the original input so it looks identical.
*/
button.template-component-button {
  font-family: 'Lato', Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 15px;
  cursor: pointer;
  background-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}

/* While the booking is in flight. */
.template-component-button[disabled] {
  opacity: 0.65;
  cursor: progress;
}

.hd-spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 9px;
  vertical-align: -1px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: hd-spin 0.7s linear infinite;
}

@keyframes hd-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Still turning for anyone who reduces motion, just calmly. */
@media (prefers-reduced-motion: reduce) {
  .hd-spinner {
    animation-duration: 2.4s;
  }
}

.hd-field-error-message {
  display: block;
  margin-top: 6px;
  color: #e02b2b;
  font-size: 13px;
  font-family: 'Lato', Arial, sans-serif;
}

/******************************************************************************/
/* Confirmation screen                                                        */
/******************************************************************************/

.hd-confirmation {
  padding: 50px 40px;
  text-align: center;
}

.hd-confirmation h3 {
  margin-bottom: 20px;
}

.hd-confirmation p {
  max-width: 640px;
  margin: 0 auto 15px auto;
}

.hd-confirmation .template-component-button-box {
  margin-top: 25px;
}