/* ==========================================================================
   upmarket.css — subtle polish layer
   --------------------------------------------------------------------------
   Loaded LAST, after every other stylesheet, so it only ever overrides.
   Nothing in the original CSS was edited. Delete this one file (and its
   <link> tag in the three HTML pages) to return the site to how it was.

   Scope on purpose: depth, softness and motion only.
   No layout moves, no repositioning, no colour changes, no content changes.
   Palette borrowed from the site: #c8102e red, #8a0b1f deep-red accent.
   ========================================================================== */


/* --- 1. Smooth motion on anything interactive ---------------------------- */
/* Instant state flips are the cheapest tell of a stock template.            */

a,
.btn,
button,
input[type="submit"],
.form-control,
.footer-info-box .info-inner,
.main-menu .navigation > li > a {
  transition: color .22s ease,
              background-color .22s ease,
              border-color .22s ease,
              box-shadow .28s ease,
              transform .28s cubic-bezier(.2, .7, .3, 1);
}


/* --- 2. Header sits above the page rather than touching it --------------- */

.main-header .header-upper {
  box-shadow: 0 1px 0 rgba(27, 20, 24, .05);
}

.main-header .header-lower {
  box-shadow: 0 6px 22px -12px rgba(27, 20, 24, .35);
}

.main-header.fixed-header .sticky-header,
.sticky-header {
  box-shadow: 0 8px 26px -14px rgba(27, 20, 24, .45);
}


/* --- 3. Content images: softer edge, quiet lift -------------------------- */
/* The first banner carries an inline 1px #ddd border, hence !important.     */

.welcome-section img[src*="aosmith-banner"] {
  border: 1px solid rgba(27, 20, 24, .08) !important;
  border-radius: 10px;
  box-shadow: 0 14px 34px -20px rgba(27, 20, 24, .45);
  max-width: 100%;
  height: auto;
}


/* --- 4. The booking form reads as a raised card -------------------------- */

.contact-area .right-content-area {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 2px 4px rgba(27, 20, 24, .04),
              0 18px 44px -24px rgba(27, 20, 24, .38);
}


/* --- 5. Inputs: softer resting state, clear focus ------------------------ */

.form-control,
select.form-control,
#form_state {
  border: 1px solid rgba(27, 20, 24, .14);
  border-radius: 8px;
  box-shadow: inset 0 1px 2px rgba(27, 20, 24, .04);
}

.form-control:hover,
#form_state:hover {
  border-color: rgba(200, 16, 46, .38);
}

/* Visible focus is an accessibility requirement, not decoration. */
.form-control:focus,
#form_state:focus {
  outline: none;
  border-color: #c8102e;
  box-shadow: 0 0 0 3px rgba(200, 16, 46, .16);
}


/* --- 6. Buttons gain weight and answer the cursor ------------------------ */

.btn,
.btn-primary,
input[type="submit"] {
  border-radius: 8px;
  box-shadow: 0 8px 18px -10px rgba(138, 11, 35, .65);
}

.btn:hover,
.btn-primary:hover,
input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 26px -12px rgba(138, 11, 35, .75);
}

.btn:active,
.btn-primary:active,
input[type="submit"]:active {
  transform: translateY(0);
  box-shadow: 0 6px 14px -10px rgba(138, 11, 35, .7);
}


/* --- 7. Footer boxes lift very slightly on hover ------------------------- */
/* Dotted borders left exactly as they were, as requested.                   */

.main-footer .footer-info-box .info-inner:hover {
  box-shadow: 0 10px 28px -18px rgba(0, 0, 0, .55);
}


/* --- 8. Floating call badge feels tappable ------------------------------- */

img[src*="number.png"] {
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .28));
}

a:hover > img[src*="number.png"] {
  transform: translateY(-2px);
}


/* --- 9. Respect the visitor's motion preference -------------------------- */

@media (prefers-reduced-motion: reduce) {
  a, .btn, button, input[type="submit"], .form-control,
  .footer-info-box .info-inner, .main-menu .navigation > li > a,
  img[src*="number.png"] {
    transition: none;
    transform: none;
  }
}