/* ============================================================
   HEADER — replaces the "1. INFO BAR" and "2. NAV BAR" sections
   in main.css. Keep the :root block merged with your existing one.
   ============================================================ */

:root {
  --hdr-cyan: #00A5EA;
  --hdr-cyan-dark: #00A5EA;
  --hdr-cyan-darker: #0489b5;
  --hdr-white: #ffffff;
  --hdr-text: #333333;
  --hdr-border: rgba(255, 255, 255, 0.25);

  /* new tokens for the redesigned header */
  --hdr-yellow: #f7c600;
  --hdr-yellow-dark: #e0b300;
  --hdr-yellow-text: #1a1a1a;
  --hdr-nav-active: #c4d114;
  --hdr-topbar-border: #ededed;
}

body {
  margin: 0;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
}

a {
  text-decoration: none;
}

.container-1200 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* ============================================================
   0. TOP UTILITY BAR (welcome message + social icons)
   ============================================================ */
.hdr-topbar {
  background: var(--hdr-white);
  border-bottom: 1px solid var(--hdr-topbar-border);
}

.hdr-topbar__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hdr-topbar__welcome {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: var(--hdr-text);
  white-space: nowrap;
}

.hdr-topbar__welcome svg {
  width: 16px;
  height: 16px;
  fill: var(--hdr-text);
  flex-shrink: 0;
}

.hdr-topbar__social {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hdr-topbar__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  color: var(--hdr-text);
  transition: opacity 0.15s ease;
}

.hdr-topbar__social a:hover {
  opacity: 0.7;
}

.hdr-topbar__social svg {
  width: 100%;
  height: 100%;
}

/* ============================================================
   1. INFO BAR (logo + contact details)
   ============================================================ */
.hdr-infobar {
  background: linear-gradient(to bottom, #f5f6f7, #ffffff);
}

.hdr-infobar__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 100px;
}

.hdr-infobar__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.hdr-infobar__logo img {
  display: block;
  height: 62px;
  width: auto;
}

.hdr-infobar__contacts {
  display: flex;
  align-items: center;
  gap: 0;
}

.hdr-contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  border-left: 1px solid #e2e2e2;
}

.hdr-contact-item:first-child {
  border-left: none;
}

.hdr-contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--hdr-cyan-dark);
  flex-shrink: 0;
}

.hdr-contact-icon svg {
  width: 100%;
  height: 100%;
}

.hdr-contact-col {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}

.hdr-contact-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--hdr-cyan-dark);
}

.hdr-contact-value {
  font-size: 15px;
  font-weight: 600;
  color: #222222;
}

a.hdr-contact-value:hover {
  color: var(--hdr-cyan-dark);
}

/* ============================================================
   2. NAV BAR
   ============================================================ */
.hdr-nav {
  background: var(--hdr-cyan-dark);
  position: relative;
  z-index: 1000;
  width: 100%;
}

.hdr-nav.is-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
  animation: hdrSlideDown 0.25s ease;
}

@keyframes hdrSlideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

.hdr-nav__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 0 0 24px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  min-height: 52px;
}

.hdr-nav__hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 2px solid var(--hdr-white);
  cursor: pointer;
  color: var(--hdr-white);
  flex-shrink: 0;
}

.hdr-nav__hamburger svg {
  fill: var(--hdr-white);
  width: 20px;
  height: 16px;
}

.hdr-nav__menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  min-width: 0; /* allow this flex item to actually shrink below its content size */
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* old Edge/IE */
}

.hdr-nav__menu::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.hdr-nav__menu > li {
  position: relative;
  display: flex;
  align-items: stretch;
}

.hdr-nav__menu > li > a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  min-height: 52px;
  transition: color 0.2s ease;
}

.hdr-nav__menu > li > a:hover,
.hdr-nav__menu > li.active > a,
.hdr-nav__menu > li.has-sub:hover > a,
.hdr-nav__menu > li.has-sub.sub-open > a {
  color: #ffd700;
}

.hdr-sub-toggle {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.hdr-sub-toggle svg {
  fill: currentColor;
  width: 10px;
  height: 8px;
  opacity: 0.85;
  transition: transform 0.2s ease;
}

.has-sub:hover > a .hdr-sub-toggle svg,
.has-sub.sub-open > a .hdr-sub-toggle svg {
  transform: rotate(180deg);
}

.hdr-sub {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: var(--hdr-white);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  border-top: 3px solid var(--hdr-cyan-dark);
  display: none;
}

@media (min-width: 992px) {
  .hdr-nav__menu > li.has-sub:hover > .hdr-sub,
  .hdr-nav__menu > li.has-sub.sub-open > .hdr-sub {
    display: block;
  }
}

.hdr-sub li a {
  display: block;
  padding: 12px 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--hdr-text);
  transition: all 0.15s ease;
  border-bottom: 1px solid #f0f0f0;
}

.hdr-sub li:last-child a {
  border-bottom: none;
}

.hdr-sub li a:hover {
  background: var(--hdr-cyan);
  color: var(--hdr-white);
  /* padding-left: 24px; */
}

/* Desktop "Call Now" CTA at the right edge of the nav bar */
.hdr-nav__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--hdr-yellow);
  color: var(--hdr-yellow-text);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 0 45px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s ease;
}

.hdr-nav__cta:hover {
  background: var(--hdr-yellow-dark);
}

/* Tighten link spacing on medium desktop widths so everything fits
   without needing the menu's horizontal-scroll fallback */
@media (min-width: 992px) and (max-width: 1180px) {
  .hdr-nav__menu > li > a {
    padding: 10px 12px;
    font-size: 12px;
  }

  .hdr-nav__cta {
    padding: 0 45px;
    font-size: 13px;
  }
}

/* Mobile-only strip holding the "Call Now" label + hamburger.
   Kept as its own flex line (see flex-wrap in the media query below)
   and pinned to the top of the viewport while the dropdown menu
   scrolls underneath it. */
.hdr-nav__mobile-bar {
  display: none;
}

.hdr-nav__cta-label {
  color: var(--hdr-yellow-text);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
}

/* ============================================================
   3. RESPONSIVE
   ============================================================ */

@media (max-width: 991px) {
  /* Top utility bar: stack + center */
  .hdr-topbar__inner {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    text-align: center;
  }

  /* Info bar: logo only, centered */
  .hdr-infobar__inner {
    justify-content: center;
    padding: 16px;
    min-height: auto;
    background: linear-gradient(to bottom, #eef0f2, #ffffff);
  }

  .hdr-infobar__contacts {
    display: none;
  }

  /* Nav bar becomes the yellow Call Now / hamburger strip */
  .hdr-nav {
    background: var(--hdr-yellow);
  }

  .hdr-nav__inner {
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 0;
    min-height: 0;
  }

  .hdr-nav__hamburger {
    display: flex;
    border-color: var(--hdr-yellow-text);
  }

  .hdr-nav__hamburger svg {
    fill: var(--hdr-yellow-text);
  }

  .hdr-nav__cta {
    display: none;
  }

  /* Top strip: Call Now + hamburger, full width, pinned on scroll */
  .hdr-nav__mobile-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    order: 0;
    padding: 0 16px;
    min-height: 56px;
    background: var(--hdr-yellow);
    position: sticky;
    top: 0;
    z-index: 1001;
  }

  .hdr-nav__menu {
    display: none;
    flex-direction: column;
    width: 100%;
    order: 10;
    background: var(--hdr-cyan-dark);
    max-height: calc(100vh - 56px);
    overflow-y: auto;
  }

  .hdr-nav__menu.menu-open {
    display: flex;
  }

  .hdr-nav__menu > li {
    border-bottom: 1px solid var(--hdr-border);
    width: 100%;
    display: block;
  }

  .hdr-nav__menu > li > a {
    padding: 0 16px;
    min-height: 48px;
    font-size: 14px;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
  }

  .hdr-nav__menu > li.active > a,
  .hdr-nav__menu > li.has-sub.sub-open > a {
    background: var(--hdr-yellow);
    color: var(--hdr-yellow-text);
  }

  .has-sub > a .hdr-sub-toggle {
    margin-left: auto;
  }

  .hdr-nav__menu > li.has-sub.sub-open > .hdr-sub {
    display: block;
  }

  .hdr-sub {
    position: static;
    border-top: none;
    box-shadow: none;
    background: #f0fafe;
    width: 100%;
    min-width: 100%;
    display: none;
  }

  .hdr-sub li a {
    padding: 12px 16px 12px 32px;
    font-size: 15px;
    color: var(--hdr-text);
    border-bottom: 1px solid #e5e5e5;
  }

  .hdr-sub li a:hover {
    background: #dbf6ff;
    color: var(--hdr-text);
    padding-left: 36px;
  }
}

@media (max-width: 767px) {
  .hdr-infobar__logo img {
    height: 50px;
  }

  .hdr-topbar__welcome {
    font-size: 13px;
  }
}

/* ============================================================
   FOOTER — replaces the "1. MAIN FOOTER" and "2. BOTTOM BAR"
   sections in main.css. The CTA bar (.ftr-cta) is unchanged.
   ============================================================ */

:root {
  --ftr-heading: #1a1a1a;
  --ftr-text: #4a4a4a;
  --ftr-divider: #e2e2e2;
  --ftr-cyan: #05a5d8;
}

/* ============================================================
   1. MAIN FOOTER
   ============================================================ */
.site-footer {
  background: #ffffff;
  background: url(../images/footer/footer-bg.png) 0 0 / 100% 100% no-repeat;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 32px;
  padding: 64px 0 48px;
}

.footer-col {
  min-width: 0;
}

/* -- shared heading + divider -- */
.footer-heading,
.footer-subheading {
  margin: 0 0 18px;
  color: var(--ftr-heading);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: left;
}

.footer-col:not(.brand-col) .footer-heading,
.footer-col:not(.brand-col) .footer-subheading {
  text-align: left;
}

.ftr-divider {
  width: 100%;
  height: 1px;
  margin: 0 0 22px;
  background: var(--ftr-divider);
  border: none;
}

/* -- Column 1: brand -- */
.brand-col .footer-logo {
  display: inline-flex;
  margin-bottom: 20px;
}

.brand-col .footer-logo img {
  display: block;
  height: 56px;
  width: auto;
}

.footer-desc {
  margin: 0;
  color: var(--ftr-text);
  font-size: 16px;
  line-height: 1.6;
  max-width: 280px;
}

/* -- Column 2: Useful Links -- */
.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  gap: 14px;
}

.footer-links li {
  /* text-align: center; */
}

.footer-links a {
  color: var(--ftr-heading);
  font-size: 16px;
  font-weight: 500;
  transition: color 0.15s ease;
}

.footer-links a:hover {
  color: var(--ftr-cyan);
}

/* -- Column 3: Facebook page embed -- */
.footer-fb {
  display: flex;
  justify-content: center;
}

.footer-fb iframe {
  max-width: 100%;
  border-radius: 6px;
  overflow: hidden;
}

/* -- Column 4: Contact details -- */
.footer-contact {
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  gap: 18px;
  /* text-align: center; */
}

.footer-contact-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer-contact-label {
  color: var(--ftr-cyan);
  font-size: 15px;
  font-weight: 700;
}

.footer-contact-value {
  color: var(--ftr-heading);
  font-size: 15px;
}

a.footer-contact-value:hover {
  color: var(--ftr-cyan);
}

.footer-contact-legal {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.footer-contact-legal a {
  color: var(--ftr-cyan);
  font-size: 14px;
  font-weight: 600;
}

.footer-contact-legal a:hover {
  text-decoration: underline;
}

/* ============================================================
   2. BOTTOM BAR
   ============================================================ */
.footer-bottom {
  background: #f5f6f7;
  padding: 0;
  border-top: 1px solid var(--ftr-divider);
}

.footer-bottom__inner {
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.copyright-left {
  color: #000;
  font-size: 14px;
  text-align: left;
  padding: 20px;
}

.copyright-left a {
  color: var(--ftr-cyan);
  font-weight: 700;
}

.copyright-left a:hover {
  text-decoration: underline;
}

.footer-social-icons {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #ffffff;
  transition:
    transform 0.15s ease,
    opacity 0.15s ease;
}

.footer-social-icons a svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.footer-social-icons a.social-fb {
  background: #1877f2;
}

.footer-social-icons a.social-ig {
  background: #e1306c;
}

.footer-social-icons a.social-yt {
  background: #ff0000;
}

.footer-social-icons a:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

/* ============================================================
   3. RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    row-gap: 44px;
    padding: 48px 0 36px;
  }

  .brand-col {
    grid-column: 1 / -1;
    text-align: center;
  }

  .brand-col .footer-logo {
    justify-content: center;
    width: 100%;
  }

  .footer-desc {
    max-width: none;
    margin: 0 auto;
  }

  .footer-col:not(.brand-col) .footer-heading,
  .footer-col:not(.brand-col) .footer-subheading {
    text-align: left;
  }

  .ftr-divider {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 767px) {
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 40px 0 32px;
  }

  .footer-bottom__inner {
    flex-direction: column;
    text-align: center;
  }

  .copyright-left {
    text-align: center;
  }
}


/* Fix desktop hover dropdown */
@media (min-width: 992px) {
  .hdr-nav,
  .hdr-nav__inner,
  .hdr-nav__menu,
  .hdr-nav__menu > li {
    overflow: visible !important;
  }

  .hdr-sub {
    z-index: 9999;
  }

  .hdr-nav__menu > li.has-sub:hover > .hdr-sub {
    display: block;
  }
}