/* =========================================================
   TugVan service landing pages
   Used by every /services/* landing page.

   Loaded via the `pageCss` local in views/layouts/layout.ejs, so it is
   never present on any other page. All page rules are scoped under
   .svc-landing so nothing here can reach the global header or footer,
   which render on these pages too.

   The site ships Bootstrap 4.5.2 while these designs were authored for
   Bootstrap 5.3.2, so the BOOTSTRAP 5 SHIM block at the bottom supplies
   the handful of BS5-only classes the markup relies on. That keeps the
   markup identical to the delivered design instead of hand-converting it.
========================================================= */

:root {
  --tug-dark: #1C2B39;
  --tug-dark-deeper: #14202B;
  --tug-gold: #FBBF24;
  --tug-gold-hover: #e5ac1a;
  --tug-bg-light: #f8fafc;
  --tug-text-main: #1C2B39;
  --tug-text-muted: #64748b;
}

/* The in-page anchors (#overview, #faq) must clear the site's fixed-top
   header, which is taller than the 90px the standalone design assumed. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}

.svc-landing {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--tug-text-main);
  background: #ffffff;
  line-height: 1.65;
}

.svc-landing a {
  transition: all 0.2s ease;
}

/* =========================================================
   COLOUR UTILITIES
========================================================= */
.svc-landing .bg-tug-dark { background-color: var(--tug-dark) !important; }
.svc-landing .bg-tug-dark-deeper { background-color: var(--tug-dark-deeper) !important; }
.svc-landing .bg-tug-light { background-color: var(--tug-bg-light) !important; }
.svc-landing .text-tug-gold { color: var(--tug-gold) !important; }
.svc-landing .text-tug-muted { color: var(--tug-text-muted) !important; }

.svc-landing .btn-gold {
  background-color: var(--tug-gold);
  color: var(--tug-dark-deeper);
  font-weight: 700;
  border: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.svc-landing .btn-gold:hover,
.svc-landing .btn-gold:focus {
  background-color: var(--tug-gold-hover);
  color: var(--tug-dark-deeper);
  transform: translateY(-1px);
}

/* =========================================================
   HERO
========================================================= */
.svc-landing .hero-service {
  background-image: url('/images/tugvan/hero-bg.svg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 75px 0;
}

.svc-landing .booking-box {
  background: #ffffff;
  color: var(--tug-text-main);
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
  padding: 32px;
}

/* Defined here for both pages: the tyre design uses .badge-gold in its hero
   but never declared it, so that badge rendered unstyled in the source file. */
.svc-landing .badge-gold {
  background: rgba(251, 191, 36, 0.15);
  color: var(--tug-gold);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 999px;
}

.svc-landing .hero-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.svc-landing .hero-list-item i {
  flex-shrink: 0;
}

/* Hero illustration, right of the hero copy. Same artwork the homepage hero
   uses, so it is already in the browser cache for anyone arriving from there. */
.svc-landing .hero-illustration {
  width: 100%;
  height: auto;
  max-width: 640px;
  display: block;
  margin-left: auto;
}

/* Below lg the hero stacks. Keep the artwork but let the copy lead, and cap it
   so it never dwarfs the text on a phone. */
@media (max-width: 991.98px) {
  .svc-landing .hero-illustration {
    max-width: 380px;
    margin: 0 auto;
  }
}

@media (max-width: 575.98px) {
  .svc-landing .hero-illustration {
    max-width: 300px;
  }
}

/* =========================================================
   CARDS
========================================================= */
.svc-landing .service-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 28px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.svc-landing .service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(28, 43, 57, 0.08);
}

.svc-landing .recovery-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 25px;
  height: 100%;
}

.svc-landing .recovery-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(251, 191, 36, 0.12);
  color: #d99f00;
  border-radius: 12px;
  font-size: 1.6rem;
  margin-bottom: 18px;
}

.svc-landing .brand-pill {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px 20px;
  font-weight: 600;
  text-align: center;
}

/* =========================================================
   STEPS
========================================================= */
.svc-landing .step-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 24px;
  border: 1px solid #e2e8f0;
  height: 100%;
}

.svc-landing .step-number {
  width: 44px;
  height: 44px;
  background-color: var(--tug-gold);
  color: var(--tug-dark-deeper);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.15rem;
  margin-bottom: 16px;
}

/* =========================================================
   COVERAGE BOX / CHECK ITEMS / CTA
========================================================= */
.svc-landing .coverage-box {
  background: var(--tug-dark-deeper);
  border-radius: 18px;
  padding: 32px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.svc-landing .check-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

.svc-landing .check-item i {
  color: var(--tug-gold);
  margin-top: 4px;
  flex-shrink: 0;
}

.svc-landing .cta-box {
  background: linear-gradient(135deg, var(--tug-dark-deeper), var(--tug-dark));
  border-radius: 20px;
  padding: 50px 30px;
  color: #ffffff;
}

/* =========================================================
   STICKY MOBILE CALL BAR
   Sits above the layout's chat launcher (views/layouts/layout.ejs) rather
   than under it, and the pages add matching bottom padding on mobile.
========================================================= */
.svc-landing .sticky-call-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--tug-dark-deeper);
  border-top: 3px solid var(--tug-gold);
}

.svc-landing .pulse-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  animation: pulse 1.6s infinite;
}

@keyframes pulse {
  0%   { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
  70%  { transform: scale(1);    box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* =========================================================
   FORM FIELDS (scoped: must not restyle the header or any other page)
========================================================= */
.svc-landing .form-control,
.svc-landing .form-select {
  border-color: #cbd5e1;
}

.svc-landing .form-control:focus,
.svc-landing .form-select:focus {
  border-color: var(--tug-gold);
  box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.18);
}

/* =========================================================
   SECTIONS
========================================================= */
.svc-landing .section-intro {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.svc-landing .faq-answer {
  line-height: 1.75;
}

/* =========================================================
   BOOKING WIDGET SECTION

   #book wraps the real booking widget and sits OUTSIDE .svc-landing so that
   nothing in this file restyles the widget itself (see the page views). Only
   the wrapper is touched here.

   The theme's global stylesheet sets `section { padding: 130px 0; overflow: hidden }`
   (style.css, with 90px/75px responsive overrides), which leaves a large empty
   band above the widget and introduces a clipping context that can cut off the
   location autocomplete dropdown. Both are reset for this one wrapper. This
   file only ever loads on the two landing pages, so no other section moves.
========================================================= */
#book {
  padding: 0 !important;
  overflow: visible !important;
}

/* =========================================================
   BOOTSTRAP 5 SHIM
   Everything below re-creates BS5-only classes on top of BS4.5.2.
   Scoped to .svc-landing so the global navbar and footer are untouched.
========================================================= */

/* --- font weight --- */
.svc-landing .fw-bold     { font-weight: 700 !important; }
.svc-landing .fw-semibold { font-weight: 600 !important; }
.svc-landing .fw-medium   { font-weight: 500 !important; }

/* --- font size --- */
.svc-landing .fs-1 { font-size: 2.5rem !important; }
.svc-landing .fs-2 { font-size: 2rem !important; }
.svc-landing .fs-3 { font-size: 1.75rem !important; }
.svc-landing .fs-4 { font-size: 1.5rem !important; }
.svc-landing .fs-5 { font-size: 1.25rem !important; }
.svc-landing .fs-6 { font-size: 1rem !important; }

/* --- flex gap --- */
.svc-landing .gap-1 { gap: 0.25rem !important; }
.svc-landing .gap-2 { gap: 0.5rem !important; }
.svc-landing .gap-3 { gap: 1rem !important; }
.svc-landing .gap-4 { gap: 1.5rem !important; }

/* --- logical spacing (BS5 ms-/me- == BS4 ml-/mr-) --- */
.svc-landing .me-1 { margin-right: 0.25rem !important; }
.svc-landing .me-2 { margin-right: 0.5rem !important; }
.svc-landing .me-3 { margin-right: 1rem !important; }
.svc-landing .ms-1 { margin-left: 0.25rem !important; }
.svc-landing .ms-2 { margin-left: 0.5rem !important; }
.svc-landing .ms-3 { margin-left: 1rem !important; }
.svc-landing .ms-auto { margin-left: auto !important; }
@media (min-width: 992px) {
  .svc-landing .ms-lg-3 { margin-left: 1rem !important; }
}

/* --- row gutters ---
   BS4 rows already carry the horizontal gutter, so only the vertical half
   is re-created, using BS5's own negative-margin/padding-top technique so
   side-by-side columns gain no stray bottom space. */
.svc-landing .row.g-3  { margin-top: -1rem; }
.svc-landing .row.g-3  > [class*="col"] { padding-top: 1rem; }
.svc-landing .row.g-4  { margin-top: -1.5rem; }
.svc-landing .row.g-4  > [class*="col"] { padding-top: 1.5rem; }
.svc-landing .row.gy-2 { margin-top: -0.5rem; }
.svc-landing .row.gy-2 > [class*="col"] { padding-top: 0.5rem; }
.svc-landing .row.gy-4 { margin-top: -1.5rem; }
.svc-landing .row.gy-4 > [class*="col"] { padding-top: 1.5rem; }
.svc-landing .row.gy-5 { margin-top: -3rem; }
.svc-landing .row.gy-5 > [class*="col"] { padding-top: 3rem; }

/* --- border radius --- */
.svc-landing .rounded-4 { border-radius: 0.5rem !important; }

/* --- select (BS5 .form-select == BS4 .custom-select) --- */
.svc-landing .form-select {
  display: block;
  width: 100%;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 0.25rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.svc-landing .form-select-lg {
  padding: 0.5rem 2.25rem 0.5rem 1rem;
  font-size: 1.25rem;
  border-radius: 0.3rem;
}

/* --- accordion (BS5 markup, driven by BS4's collapse JS) --- */
.svc-landing .accordion-item {
  background-color: #fff;
  border: 1px solid #e2e8f0;
  margin-bottom: -1px;
}
.svc-landing .accordion-item:first-of-type { border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; }
.svc-landing .accordion-item:last-of-type  { border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; margin-bottom: 0; }

.svc-landing .accordion-header { margin-bottom: 0; }

.svc-landing .accordion-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1rem 1.25rem;
  padding-right: 3rem;
  font-size: 1rem;
  color: var(--tug-text-main);
  text-align: left;
  background-color: #fff;
  border: 0;
  border-radius: 0;
  overflow-anchor: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.svc-landing .accordion-button:not(.collapsed) {
  color: var(--tug-dark-deeper);
  background-color: rgba(251, 191, 36, 0.12);
}

.svc-landing .accordion-button:hover { text-decoration: none; }

.svc-landing .accordion-button:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.25);
  z-index: 3;
}

/* Chevron drawn with the Bootstrap Icons font already loaded on these pages. */
.svc-landing .accordion-button::after {
  font-family: "bootstrap-icons";
  content: "\f282"; /* bi-chevron-down */
  position: absolute;
  right: 1.25rem;
  flex-shrink: 0;
  font-size: 0.9rem;
  line-height: 1;
  color: var(--tug-text-muted);
  transition: transform 0.2s ease-in-out;
}

.svc-landing .accordion-button:not(.collapsed)::after {
  transform: rotate(-180deg);
  color: var(--tug-dark-deeper);
}

.svc-landing .accordion-body { padding: 1rem 1.25rem 1.25rem; }

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 991.98px) {
  .svc-landing .hero-service { padding: 55px 0 70px; }
  .svc-landing .booking-box { padding: 24px; }

  /* The call bar is fixed and belongs to the page, but the footer below it is
     rendered by the layout, so the page cannot add clearance with its own
     markup. This stylesheet only ever loads on the two landing pages, so
     padding the footer here keeps the copyright row clear of the bar without
     editing views/layouts/footer.ejs, which every other page shares. */
  footer { padding-bottom: 90px !important; }
}

@media (max-width: 575.98px) {
  .svc-landing .hero-service { padding: 45px 0 65px; }
  .svc-landing .booking-box { padding: 20px; }
  .svc-landing .hero-service h1 { font-size: 2.35rem; }
  .svc-landing .top-call-text { display: none; }
}