/*
Theme Name: Amazon Refrigeration
Theme URI: https://amazonrefrigeration.com
Author: Amazon Refrigeration Ltd
Description: Custom Bootstrap 5 theme for Amazon Refrigeration Ltd, a commercial and industrial refrigeration and air conditioning company based in Grimsby. Contact and enquiry forms are built with Contact Form 7. See README.md in this theme folder for setup instructions.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: amazon-refrigeration
*/

:root {
  --brand-green: #00863c;
  --brand-green-dark: #006e30;
  --brand-grey-text: #4b4b4b;
  --brand-light-bg: #f6f6f6;
}

html {
  overflow-x: hidden;
}

body {
  font-family: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--brand-grey-text);
  overflow-x: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--brand-green);
  text-decoration: none;
}
a:hover,
a:focus {
  color: var(--brand-green-dark);
}

.btn-brand {
  background-color: var(--brand-green);
  border-color: var(--brand-green);
  color: #fff;
}
.btn-brand:hover,
.btn-brand:focus {
  background-color: var(--brand-green-dark);
  border-color: var(--brand-green-dark);
  color: #fff;
}

.btn-outline-brand {
  background-color: transparent;
  border: 1px solid var(--brand-green);
  color: var(--brand-green);
}
.btn-outline-brand:hover,
.btn-outline-brand:focus {
  background-color: var(--brand-green);
  border-color: var(--brand-green);
  color: #fff;
}

.text-brand {
  color: var(--brand-green);
}

.bg-brand {
  background-color: var(--brand-green);
}

/* Top utility bar */
.topbar {
  background-color: var(--brand-green);
  color: #fff;
  font-size: 0.9rem;
}
.topbar a {
  color: #fff;
}

/* Navbar */
.navbar-brand img {
  height: 60px;
}
.navbar .nav-link {
  color: var(--brand-grey-text);
  font-weight: 500;
}
.navbar .nav-link.active,
.navbar .nav-link:hover,
.navbar .current-menu-item > .nav-link {
  color: var(--brand-green);
}

/* Hero / banner carousel */
.hero {
  position: relative;
  min-height: 520px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.25) 100%);
}
.hero .container {
  position: relative;
  z-index: 2;
}
.hero h1,
.hero .hero-headline {
  color: #fff;
  font-weight: 700;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.hero p {
  color: #f0f0f0;
  max-width: 640px;
}

.carousel-indicators [data-bs-target] {
  background-color: #fff;
}

/* Page header (interior pages) */
.page-header {
  background: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-green-dark) 100%);
  color: #fff;
  padding: 2.25rem 0 2.75rem;
}
.page-header h1 {
  font-weight: 700;
  margin: 0;
}
.page-header .breadcrumb {
  margin-bottom: 0.75rem;
}
.page-header .breadcrumb-item a {
  color: rgba(255, 255, 255, 0.75);
}
.page-header .breadcrumb-item a:hover {
  color: #fff;
}
.page-header .breadcrumb-item.active {
  color: #fff;
  font-weight: 500;
}
.page-header .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255, 255, 255, 0.5);
}

/* What we do icons */
.feature-icon-wrap {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background-color: var(--brand-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.feature-icon {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.section-alt {
  background-color: var(--brand-light-bg);
}

.card-service {
  overflow: hidden;
  border: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.card-service img {
  transition: transform 0.35s ease;
  height: 260px;
  object-fit: cover;
}
.card-service:hover img {
  transform: scale(1.06);
}
.card-service .card-img-overlay {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.65) 100%);
  display: flex;
  align-items: flex-end;
}
.card-service .card-img-overlay h3 {
  color: #fff;
  font-weight: 700;
}

.insight-card img {
  height: 200px;
  object-fit: cover;
}

/* Service list checklist */
.service-list {
  list-style: none;
  padding-left: 0;
}
.service-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #e9e9e9;
}
.service-list li::before {
  content: "\2713";
  color: var(--brand-green);
  font-weight: 700;
  margin-right: 0.6rem;
}

/* Footer */
footer.site-footer {
  background-color: var(--brand-green);
  color: #eafaf0;
}
footer.site-footer a {
  color: #eafaf0;
}
footer.site-footer a:hover {
  color: #fff;
  text-decoration: underline;
}
footer.site-footer h5 {
  color: #fff;
  font-weight: 700;
  margin-bottom: 1rem;
}
footer.site-footer hr {
  border-color: rgba(255, 255, 255, 0.25);
}

.copyright-bar {
  background-color: var(--brand-green-dark);
  color: #dff5e6;
  font-size: 0.85rem;
}

/* Location map */
#map {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 450px;
  z-index: 0;
}

.map-minimal .leaflet-tile-pane {
  filter: grayscale(15%) sepia(8%) hue-rotate(70deg) saturate(180%) brightness(1.05);
}

.brand-marker {
  background: transparent;
  border: none;
}
.brand-marker span {
  display: block;
  width: 26px;
  height: 26px;
  background-color: var(--brand-green);
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.leaflet-popup-content-wrapper {
  border-radius: 8px;
}
.leaflet-popup-content {
  font-family: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Contact form */
.contact-form label {
  font-weight: 600;
}

/* Cookie banner */
#cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(20, 20, 20, 0.95);
  color: #fff;
  z-index: 1080;
  display: none;
}
#cookie-banner a {
  color: #7be6a4;
}

/* Contact Form 7 — make CF7's default markup match the Bootstrap form styling
   used across the rest of the site, so forms look consistent without the
   client needing to hand-edit the form HTML in every CF7 form. */
.wpcf7-form p {
  margin-bottom: 1rem;
}
.wpcf7-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form textarea,
.wpcf7-form select {
  display: block;
  width: 100%;
  padding: 0.5rem 0.85rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--brand-grey-text);
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
  border-color: var(--brand-green);
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(0, 134, 60, 0.25);
}
.wpcf7-form .wpcf7-acceptance label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-weight: 400;
  font-size: 0.85rem;
  color: #6c757d;
}
.wpcf7-form .wpcf7-list-item {
  margin: 0;
}
.wpcf7-form input[type="submit"] {
  display: block;
  width: 100%;
  padding: 0.6rem 1rem;
  background-color: var(--brand-green);
  border: 1px solid var(--brand-green);
  color: #fff;
  font-weight: 500;
  border-radius: 0.375rem;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.wpcf7-form input[type="submit"]:hover {
  background-color: var(--brand-green-dark);
  border-color: var(--brand-green-dark);
}
.wpcf7-form input[type="submit"]:disabled {
  opacity: 0.65;
}
.wpcf7-not-valid-tip {
  color: #dc3545;
  font-size: 0.85rem;
  margin-top: 0.25rem;
}
.wpcf7-response-output {
  margin: 1rem 0 0 !important;
  padding: 0.75rem 1rem !important;
  border-radius: 0.375rem !important;
  font-size: 0.9rem;
}
.wpcf7-mail-sent-ok {
  border-color: var(--brand-green) !important;
  color: var(--brand-green-dark) !important;
  background-color: #e7f6ec;
}
.wpcf7-validation-errors,
.wpcf7-mail-sent-ng {
  border-color: #dc3545 !important;
  color: #842029 !important;
  background-color: #f8d7da;
}
.wpcf7 form.sent .wpcf7-response-output {
  border: 1px solid;
}
.wpcf7-spinner {
  margin: 0 0 0 0.5rem;
}

/* Mobile / small-screen tuning */
@media (max-width: 767.98px) {
  .hero {
    min-height: 420px;
  }
  .hero h1,
  .hero .hero-headline {
    font-size: 2rem;
  }
  .page-header {
    padding: 1.5rem 0 2rem;
  }
  .feature-icon-wrap {
    width: 76px;
    height: 76px;
  }
  .feature-icon {
    width: 40px;
    height: 40px;
  }
  .card-service img {
    height: 180px;
  }
  .insight-card img {
    height: 160px;
  }
  #map {
    height: 300px;
  }
  .topbar {
    font-size: 0.8rem;
  }
}

@media (max-width: 575.98px) {
  .hero {
    min-height: 380px;
  }
  .hero h1,
  .hero .hero-headline {
    font-size: 1.65rem;
  }
  .display-4 {
    font-size: 2rem;
  }
}