/* ==========================================================
   VIJAY ENTERPRISES
   WEBSITE FOOTER STYLESHEET

   Website:
   https://vijayenterprises1986.in/

   Dependencies:
   - sections/footer.html
   - js/footer.js
   - css/style.css

   Design preserved:
   - Dark navy background
   - Four-column desktop grid
   - Circular company logo
   - Gold accents
   - Two-column tablet and mobile layout
   - Three-part footer bottom bar

   Improvements:
   - Better link readability
   - Responsive spacing
   - Safe email and address wrapping
   - Accessible focus states
   - Clear navigation hierarchy
   - Reduced-motion and print support
========================================================== */


/* ==========================================================
   01. FOOTER VARIABLES
========================================================== */

.ve-footer {
  --footer-bg: #102a46;
  --footer-blue: #203f83;
  --footer-text: #d3dce8;
  --footer-muted: #bccbdd;
  --footer-gold: #e5c08b;

  --footer-border:
    rgba(255, 255, 255, 0.14);

  width: 100%;
  min-width: 0;

  color: #ffffff;
  background: var(--footer-bg);

  font-family: "Inter", sans-serif;
}

.ve-footer,
.ve-footer *,
.ve-footer *::before,
.ve-footer *::after {
  box-sizing: border-box;
}


/* ==========================================================
   02. MAIN CONTAINER
========================================================== */

.ve-footer .ve-footer-container {
  width: 100%;
  max-width: 1320px;

  margin-inline: auto;
  padding-inline: 24px;
}


/* ==========================================================
   03. FOUR-COLUMN DESKTOP GRID
========================================================== */

.ve-footer-main {
  display: grid;

  grid-template-columns:
    minmax(0, 1.5fr)
    minmax(0, 0.75fr)
    minmax(0, 0.8fr)
    minmax(0, 1.25fr);

  align-items: start;

  gap: 36px;

  padding: 64px 0 55px;
}

.ve-footer-brand-column,
.ve-footer-column {
  min-width: 0;
}


/* ==========================================================
   04. BRAND LINK
========================================================== */

.ve-footer-brand {
  display: inline-flex;
  align-items: center;

  gap: 15px;

  max-width: 100%;

  color: #ffffff;

  text-decoration: none;
}


/* ==========================================================
   05. CIRCULAR COMPANY LOGO
========================================================== */

.ve-footer-logo {
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 68px;

  width: 68px;
  height: 68px;

  overflow: hidden;

  background: var(--footer-blue);

  border-radius: 50%;
}

.ve-footer-logo img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  transform: scale(1.12);
}


/* ==========================================================
   06. BRAND NAME AND TAGLINE
========================================================== */

.ve-footer-brand-text {
  display: flex;
  flex-direction: column;

  gap: 5px;

  min-width: 0;
}

.ve-footer-brand-text strong {
  display: block;

  color: #ffffff;

  font-family:
    "Plus Jakarta Sans", sans-serif;

  font-size: 16px;
  font-weight: 800;

  line-height: 1.35;
  letter-spacing: -0.4px;

  overflow-wrap: break-word;
}

.ve-footer-brand-text small {
  display: block;

  color: var(--footer-gold);

  font-size: 11px;
  font-weight: 500;

  line-height: 1.5;
}


/* ==========================================================
   07. BUSINESS DESCRIPTION
========================================================== */

.ve-footer-description {
  max-width: 355px;

  margin: 22px 0 19px;

  color: var(--footer-text);

  font-size: 13px;
  font-weight: 400;

  line-height: 1.85;

  overflow-wrap: break-word;
}


/* ==========================================================
   08. BRAND LOCATION LABEL
========================================================== */

.ve-footer-location {
  display: flex;
  align-items: flex-start;

  gap: 9px;

  color: var(--footer-muted);

  font-size: 12px;

  line-height: 1.75;
}

.ve-footer-location svg {
  display: block;

  flex: 0 0 16px;

  width: 16px;
  height: 16px;

  margin-top: 3px;

  color: var(--footer-gold);

  stroke-width: 1.8;
}


/* ==========================================================
   09. COLUMN HEADINGS
========================================================== */

.ve-footer-column h2 {
  margin: 7px 0 23px;

  color: #ffffff;

  font-family:
    "Plus Jakarta Sans", sans-serif;

  font-size: 15px;
  font-weight: 750;

  line-height: 1.5;
}


/* ==========================================================
   10. NAVIGATION LIST
========================================================== */

.ve-footer-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  gap: 13px;

  margin: 0;
  padding: 0;

  list-style: none;
}

.ve-footer-links li {
  min-width: 0;
  max-width: 100%;
}


/* ==========================================================
   11. NAVIGATION LINKS
========================================================== */

.ve-footer-links a {
  display: inline-block;

  max-width: 100%;

  padding: 2px 0;

  color: var(--footer-text);

  font-size: 13px;
  font-weight: 400;

  line-height: 1.65;

  text-decoration: none;

  overflow-wrap: break-word;

  transition: color 200ms ease;
}

.ve-footer-links a:hover {
  color: var(--footer-gold);
}


/* ==========================================================
   12. CONTACT ADDRESS
========================================================== */

.ve-footer-address {
  display: flex;
  flex-direction: column;

  gap: 17px;

  margin: 0;

  font-style: normal;
}


/* ==========================================================
   13. CONTACT ITEM
========================================================== */

.ve-footer-contact-item {
  display: flex;
  align-items: flex-start;

  gap: 11px;

  min-width: 0;
}

.ve-footer-contact-item > svg {
  display: block;

  flex: 0 0 17px;

  width: 17px;
  height: 17px;

  margin-top: 3px;

  color: var(--footer-gold);

  stroke-width: 1.8;
}


/* ==========================================================
   14. CONTACT ADDRESS TEXT
========================================================== */

.ve-footer-contact-item p {
  min-width: 0;

  margin: 0;

  color: var(--footer-text);

  font-size: 12.5px;
  font-weight: 400;

  line-height: 1.85;

  overflow-wrap: break-word;
}


/* ==========================================================
   15. PHONE AND EMAIL LINKS
========================================================== */

.ve-footer-contact-item a {
  display: inline-block;

  width: fit-content;
  max-width: 100%;

  color: var(--footer-text);

  font-size: 12.5px;

  line-height: 1.75;

  text-decoration: none;

  overflow-wrap: anywhere;

  transition: color 200ms ease;
}

.ve-footer-contact-item a:hover {
  color: var(--footer-gold);
}


/* ==========================================================
   16. MULTIPLE PHONE NUMBERS
========================================================== */

.ve-footer-contact-values {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  gap: 5px;

  min-width: 0;
}

.ve-footer-contact-values a {
  min-height: 24px;
}


/* ==========================================================
   17. GOOGLE MAPS DIRECTIONS LINK
========================================================== */

.ve-footer-directions {
  display: inline-flex;
  align-items: center;

  gap: 9px;

  width: fit-content;
  max-width: 100%;

  min-height: 36px;

  margin-top: 21px;
  padding: 4px 0 6px;

  color: var(--footer-gold);

  border-bottom:
    1px solid rgba(229, 192, 139, 0.65);

  font-size: 13px;
  font-weight: 700;

  line-height: 1.5;

  text-decoration: none;

  transition:
    color 200ms ease,
    border-color 200ms ease;
}

.ve-footer-directions svg {
  display: block;

  flex: 0 0 16px;

  width: 16px;
  height: 16px;

  stroke-width: 1.8;
}

.ve-footer-directions:hover {
  color: #ffffff;
  border-color: #ffffff;
}


/* ==========================================================
   18. BOTTOM BAR

   Desktop:
   Left   - Copyright
   Center - Developer credit
   Right  - Legal links
========================================================== */

.ve-footer-bottom {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1.2fr)
    minmax(0, 1fr);

  align-items: center;

  gap: 22px;

  min-height: 80px;

  padding: 23px 0;

  border-top:
    1px solid var(--footer-border);
}


/* ==========================================================
   19. COPYRIGHT
========================================================== */

.ve-footer-copyright {
  min-width: 0;

  margin: 0;

  color: var(--footer-muted);

  font-size: 12px;

  line-height: 1.7;
}


/* ==========================================================
   20. DEVELOPER CREDIT
========================================================== */

.ve-footer-credit {
  min-width: 0;

  margin: 0;

  color: var(--footer-muted);

  font-size: 12px;

  line-height: 1.7;
  text-align: center;
}

.ve-footer-credit a {
  display: inline-flex;
  align-items: center;

  gap: 4px;

  margin-left: 4px;

  color: var(--footer-gold);

  font-weight: 700;

  line-height: inherit;

  text-decoration: none;

  transition: color 200ms ease;
}

.ve-footer-credit a:hover {
  color: #ffffff;
}

.ve-footer-credit a svg {
  display: block;

  flex: 0 0 13px;

  width: 13px;
  height: 13px;

  stroke-width: 1.8;
}


/* ==========================================================
   21. LEGAL LINKS CONTAINER
========================================================== */

.ve-footer-legal-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;

  gap: 12px;

  min-width: 0;
}


/* ==========================================================
   22. PRIVACY AND TERMS LINKS
========================================================== */

.ve-footer-legal-links a {
  display: inline-block;

  color: var(--footer-text);

  font-size: 12px;
  font-weight: 500;

  line-height: 1.6;

  text-decoration: none;

  transition: color 200ms ease;
}

.ve-footer-legal-links a:hover {
  color: var(--footer-gold);
}


/* ==========================================================
   23. LEGAL LINKS DIVIDER
========================================================== */

.ve-footer-legal-links > span {
  display: block;

  flex: 0 0 1px;

  width: 1px;
  height: 13px;

  background:
    rgba(255, 255, 255, 0.28);
}


/* ==========================================================
   24. KEYBOARD ACCESSIBILITY
========================================================== */

.ve-footer a:focus-visible {
  outline:
    3px solid var(--footer-gold);

  outline-offset: 4px;

  border-radius: 2px;
}


/* ==========================================================
   25. LAPTOP
========================================================== */

@media (max-width: 1199.98px) {

  .ve-footer-main {
    grid-template-columns:
      minmax(0, 1.3fr)
      minmax(0, 0.75fr)
      minmax(0, 0.85fr)
      minmax(0, 1.2fr);

    gap: 24px;

    padding: 55px 0 45px;
  }

  .ve-footer-brand {
    gap: 12px;
  }

  .ve-footer-logo {
    flex-basis: 57px;

    width: 57px;
    height: 57px;
  }

  .ve-footer-brand-text strong {
    font-size: 14px;
  }

  .ve-footer-description {
    font-size: 12.5px;
  }

  .ve-footer-bottom {
    gap: 12px;
  }

  .ve-footer-copyright,
  .ve-footer-credit,
  .ve-footer-legal-links a {
    font-size: 11px;
  }

}


/* ==========================================================
   26. TABLET
========================================================== */

@media (max-width: 991.98px) {

  .ve-footer .ve-footer-container {
    padding-inline: 20px;
  }

  .ve-footer-main {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 36px 28px;

    padding: 50px 0 42px;
  }

  .ve-footer-description {
    max-width: 420px;
  }

  .ve-footer-column h2 {
    margin-top: 0;
    margin-bottom: 19px;
  }

  .ve-footer-bottom {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 14px;
  }

  .ve-footer-credit {
    text-align: right;
  }

  .ve-footer-legal-links {
    grid-column: 1 / -1;

    justify-content: flex-end;
  }

}


/* ==========================================================
   27. MOBILE
========================================================== */

@media (max-width: 575.98px) {

  .ve-footer .ve-footer-container {
    padding-inline: 17px;
  }

  .ve-footer-main {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 34px 20px;

    padding: 43px 0 35px;
  }

  /*
    Keep brand and contact information
    full width.

    Quick Links and Our Services remain
    in two columns for compact browsing.
  */

  .ve-footer-brand-column,
  .ve-footer-contact {
    grid-column: 1 / -1;
  }

  .ve-footer-brand {
    gap: 12px;
  }

  .ve-footer-logo {
    flex-basis: 60px;

    width: 60px;
    height: 60px;
  }

  .ve-footer-brand-text strong {
    font-size: 15px;
  }

  .ve-footer-brand-text small {
    font-size: 11px;
  }

  .ve-footer-description {
    max-width: 460px;

    margin: 19px 0 16px;

    font-size: 13px;
    line-height: 1.8;
  }

  .ve-footer-location {
    font-size: 12px;
  }

  .ve-footer-column h2 {
    margin: 0 0 16px;

    font-size: 14px;
  }

  .ve-footer-links {
    gap: 11px;
  }

  .ve-footer-links a {
    font-size: 13px;

    line-height: 1.65;
  }

  /*
    Contact information occupies its
    own full-width mobile row.
  */

  .ve-footer-address {
    gap: 16px;
  }

  .ve-footer-contact-item p,
  .ve-footer-contact-item a {
    font-size: 13px;
  }

  .ve-footer-contact-values {
    gap: 7px;
  }

  .ve-footer-directions {
    margin-top: 18px;
  }

  /* Bottom bar */

  .ve-footer-bottom {
    grid-template-columns: 1fr;

    justify-items: center;

    gap: 13px;

    padding: 23px 0;

    text-align: center;
  }

  .ve-footer-copyright,
  .ve-footer-credit {
    text-align: center;
  }

  .ve-footer-legal-links {
    grid-column: auto;

    justify-content: center;
  }

  .ve-footer-copyright,
  .ve-footer-credit,
  .ve-footer-legal-links a {
    font-size: 12px;
  }

}


/* ==========================================================
   28. SMALL MOBILE
========================================================== */

@media (max-width: 380px) {

  .ve-footer .ve-footer-container {
    padding-inline: 14px;
  }

  .ve-footer-main {
    column-gap: 12px;
    row-gap: 30px;
  }

  .ve-footer-brand-text strong {
    font-size: 13px;

    letter-spacing: -0.2px;
  }

  .ve-footer-brand-text small {
    font-size: 10.5px;
  }

  .ve-footer-logo {
    flex-basis: 54px;

    width: 54px;
    height: 54px;
  }

  .ve-footer-links a {
    font-size: 12.5px;
  }

  .ve-footer-legal-links {
    gap: 10px;
  }

}


/* ==========================================================
   29. EXTRA SMALL VIEWPORT
========================================================== */

@media (max-width: 320px) {

  .ve-footer .ve-footer-container {
    padding-inline: 11px;
  }

  .ve-footer-main {
    column-gap: 10px;
  }

  .ve-footer-brand {
    gap: 9px;
  }

  .ve-footer-brand-text strong {
    font-size: 12px;
  }

  .ve-footer-column h2 {
    font-size: 13px;
  }

  .ve-footer-links a {
    font-size: 12px;
  }

}


/* ==========================================================
   30. REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

  .ve-footer a {
    animation: none !important;
    transition: none !important;
  }

}


/* ==========================================================
   31. PRINT SUPPORT
========================================================== */

@media print {

  .ve-footer {
    color: #112b48;
    background: #ffffff;
  }

  .ve-footer-main {
    padding: 30px 0 20px;
  }

  .ve-footer-bottom {
    padding: 15px 0;

    border-color: #d9e0e8;
  }

  .ve-footer-brand-text strong,
  .ve-footer-column h2 {
    color: #112b48 !important;
  }

  .ve-footer-description,
  .ve-footer-location,
  .ve-footer-links a,
  .ve-footer-contact-item p,
  .ve-footer-contact-item a,
  .ve-footer-copyright,
  .ve-footer-credit,
  .ve-footer-legal-links a {
    color: #34475c !important;
  }

  .ve-footer-directions,
  .ve-footer-credit a {
    color: #203f83 !important;
  }

}


/* ==========================================================
   END OF FOOTER STYLESHEET
========================================================== */