/* ==========================================================
   VIJAY ENTERPRISES
   SHARED LEGAL PAGES STYLESHEET

   Website:
   https://vijayenterprises1986.in/

   Used by:
   - privacy-policy.html
   - terms-and-conditions.html

   Design:
   - Clean editorial legal presentation
   - Light grey page introduction
   - Navy and blue typography
   - Sticky contents navigation on desktop
   - Readable article layout
   - Navy footer
   - Fully responsive design

   Improvements:
   - Consistent typography and spacing
   - Better mobile table of contents
   - Accessible keyboard focus
   - Reliable anchor navigation
   - Improved text wrapping
   - Reduced-motion support
   - Print-friendly layout

   No JavaScript required.
========================================================== */


/* ==========================================================
   01. DESIGN VARIABLES
========================================================== */

:root {
  --legal-navy: #112b48;
  --legal-blue: #203f83;
  --legal-text: #536276;
  --legal-muted: #718096;
  --legal-border: #e3e9f0;
  --legal-gold: #e5c08b;

  --legal-surface: #f8fafc;
  --legal-white: #ffffff;

  --legal-content-width: 1250px;
}


/* ==========================================================
   02. BOX SIZING
========================================================== */

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


/* ==========================================================
   03. DOCUMENT BASE
========================================================== */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 30px;

  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 0;

  color: var(--legal-navy);
  background: var(--legal-white);

  font-family: "Inter", sans-serif;
  font-size: 14px;

  line-height: 1.7;

  overflow-wrap: break-word;
}

body,
main,
article,
section,
nav,
footer {
  min-width: 0;
}


/* ==========================================================
   04. GENERAL TYPOGRAPHY RESET
========================================================== */

h1,
h2,
h3,
p {
  overflow-wrap: break-word;
}

h1,
h2,
h3 {
  font-family: "Plus Jakarta Sans", sans-serif;
}

a {
  text-underline-offset: 3px;
}

a,
button {
  -webkit-tap-highlight-color: transparent;
}


/* ==========================================================
   05. SHARED CONTENT CONTAINER
========================================================== */

.legal-container {
  width: 100%;
  max-width: var(--legal-content-width);

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


/* ==========================================================
   06. ACCESSIBLE SKIP LINK

   Both legal HTML pages contain:
   .visually-hidden-focusable

   Bootstrap provides this utility, but
   a standalone fallback is included here.
========================================================== */

.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  padding: 0 !important;
  margin: -1px !important;

  overflow: hidden !important;

  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;

  border: 0 !important;
}

.visually-hidden-focusable:focus {
  position: fixed;
  top: 12px;
  left: 12px;

  z-index: 9999;

  display: inline-block;

  width: auto;
  height: auto;

  padding: 11px 16px;

  color: #ffffff;
  background: var(--legal-navy);

  border-radius: 5px;

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

  text-decoration: none;

  box-shadow:
    0 5px 20px rgba(17, 43, 72, 0.18);
}


/* ==========================================================
   07. PAGE INTRODUCTION
========================================================== */

.legal-hero {
  padding: 65px 0 51px;

  background: var(--legal-surface);

  border-bottom: 1px solid var(--legal-border);
}


/* ==========================================================
   08. INTRO EYEBROW
========================================================== */

.legal-eyebrow {
  display: inline-flex;
  align-items: center;

  gap: 12px;

  margin-bottom: 16px;

  color: var(--legal-blue);

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

  line-height: 1.5;
  letter-spacing: 1.7px;
}


/* ==========================================================
   09. EYEBROW ACCENT
========================================================== */

.legal-eyebrow::before {
  content: "";

  display: block;

  flex: 0 0 30px;

  width: 30px;
  height: 2px;

  background: var(--legal-blue);
}


/* ==========================================================
   10. LEGAL PAGE HEADING
========================================================== */

.legal-hero h1 {
  max-width: 960px;

  margin: 0 0 17px;

  color: var(--legal-navy);

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

  font-size:
    clamp(39px, 4.5vw, 61px);

  font-weight: 800;

  line-height: 1.17;
  letter-spacing: -2.3px;
}

.legal-hero h1 span {
  color: var(--legal-blue);
}


/* ==========================================================
   11. INTRODUCTION DESCRIPTION
========================================================== */

.legal-hero p {
  max-width: 770px;

  margin: 0;

  color: var(--legal-text);

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

  line-height: 1.85;
}


/* ==========================================================
   12. POLICY METADATA
========================================================== */

.legal-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 11px;

  margin-top: 22px;

  color: var(--legal-muted);

  font-size: 12px;

  line-height: 1.7;
}

.legal-meta > span {
  min-width: 0;
}


/* ==========================================================
   13. MAIN CONTENT SECTION
========================================================== */

.legal-content {
  padding: 60px 0 85px;

  background: #ffffff;
}


/* ==========================================================
   14. TWO-COLUMN LEGAL LAYOUT

   Desktop:
   - Sticky table of contents
   - Main legal document

   Tablet/mobile:
   - Stacked layout
========================================================== */

.legal-layout {
  display: grid;

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

  align-items: start;

  gap: clamp(40px, 5vw, 80px);
}


/* ==========================================================
   15. TABLE OF CONTENTS
========================================================== */

.legal-toc {
  position: sticky;
  top: 30px;

  min-width: 0;

  max-height: calc(100vh - 60px);
  max-height: calc(100dvh - 60px);

  padding-left: 19px;
  padding-right: 8px;

  overflow-y: auto;
  overscroll-behavior: contain;

  border-left: 2px solid var(--legal-border);

  scrollbar-width: thin;
  scrollbar-color:
    #c2cddd transparent;
}


/* ==========================================================
   16. TABLE OF CONTENTS HEADING
========================================================== */

.legal-toc h2 {
  margin: 0 0 18px;

  color: var(--legal-blue);

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

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

  line-height: 1.5;
  letter-spacing: 1.2px;

  text-transform: uppercase;
}


/* ==========================================================
   17. TABLE OF CONTENTS LINKS
========================================================== */

.legal-toc a {
  display: block;

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

  margin-bottom: 13px;

  color: var(--legal-text);

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

  line-height: 1.65;

  text-decoration: none;

  overflow-wrap: break-word;

  transition:
    color 180ms ease;
}

.legal-toc a:hover {
  color: var(--legal-blue);
}

.legal-toc a:last-child {
  margin-bottom: 0;
}


/* ==========================================================
   18. MAIN LEGAL DOCUMENT
========================================================== */

.legal-document {
  width: 100%;
  max-width: 850px;
  min-width: 0;
}


/* ==========================================================
   19. INDIVIDUAL LEGAL SECTIONS
========================================================== */

.legal-document section {
  margin-bottom: 31px;
  padding-bottom: 25px;

  border-bottom:
    1px solid var(--legal-border);

  scroll-margin-top: 30px;
}

.legal-document section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;

  border-bottom: 0;
}


/* ==========================================================
   20. SECTION HEADINGS
========================================================== */

.legal-document h2 {
  margin: 0 0 16px;

  color: var(--legal-navy);

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

  font-size:
    clamp(20px, 2vw, 24px);

  font-weight: 750;

  line-height: 1.4;
  letter-spacing: -0.6px;
}


/* ==========================================================
   21. SUBHEADINGS
========================================================== */

.legal-document h3 {
  margin: 17px 0 10px;

  color: var(--legal-navy);

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

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

  line-height: 1.5;
}


/* ==========================================================
   22. PARAGRAPHS AND LIST ITEMS
========================================================== */

.legal-document p,
.legal-document li {
  color: var(--legal-text);

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

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

  line-height: 1.95;

  overflow-wrap: break-word;
}

.legal-document p {
  margin: 0 0 14px;
}

.legal-document p:last-child {
  margin-bottom: 0;
}


/* ==========================================================
   23. UNORDERED LISTS
========================================================== */

.legal-document ul {
  margin: 0 0 15px;

  padding-left: 22px;

  list-style-type: disc;
}

.legal-document li {
  margin-bottom: 5px;
  padding-left: 4px;
}

.legal-document li:last-child {
  margin-bottom: 0;
}

.legal-document li::marker {
  color: var(--legal-blue);
}


/* ==========================================================
   24. STRONG EMPHASIS
========================================================== */

.legal-document strong {
  color: var(--legal-navy);

  font-weight: 650;
}


/* ==========================================================
   25. LINKS INSIDE POLICY CONTENT
========================================================== */

.legal-document a {
  color: var(--legal-blue);

  text-decoration: underline;
  text-decoration-thickness: 1px;

  overflow-wrap: anywhere;

  transition:
    color 180ms ease;
}

.legal-document a:hover {
  color: var(--legal-navy);
}


/* ==========================================================
   26. BUSINESS ADDRESS
========================================================== */

.legal-address {
  display: block;

  margin: 12px 0 19px;

  color: var(--legal-text);

  font-size: 14px;
  font-style: normal;

  line-height: 1.9;

  overflow-wrap: break-word;
}

.legal-address strong {
  display: block;

  margin-bottom: 7px;
}


/* ==========================================================
   27. LEGAL FOOTER
========================================================== */

.legal-footer {
  padding: 34px 0;

  color: #ffffff;
  background: #102a46;
}


/* ==========================================================
   28. FOOTER TOP LAYOUT
========================================================== */

.legal-footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 24px;
}


/* ==========================================================
   29. BUSINESS IDENTITY
========================================================== */

.legal-footer-company {
  display: flex;
  flex-direction: column;

  gap: 7px;

  min-width: 0;
}

.legal-footer-company strong {
  color: #ffffff;

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

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

  line-height: 1.5;
  letter-spacing: -0.2px;
}

.legal-footer-company span {
  color: #b9c8d9;

  font-size: 11.5px;

  line-height: 1.65;
}


/* ==========================================================
   30. FOOTER NAVIGATION
========================================================== */

.legal-footer-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 12px 17px;

  min-width: 0;
}

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

  padding: 3px 0;

  color: #d1dbe7;

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

  line-height: 1.6;

  text-decoration: none;

  transition:
    color 180ms ease;
}

.legal-footer-links a:hover,
.legal-footer-links a[aria-current="page"] {
  color: var(--legal-gold);
}


/* ==========================================================
   31. FOOTER BOTTOM LAYOUT
========================================================== */

.legal-footer-bottom {
  display: grid;

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

  align-items: center;

  gap: 20px;

  margin-top: 26px;
  padding-top: 19px;

  border-top:
    1px solid rgba(255, 255, 255, 0.14);
}


/* ==========================================================
   32. COPYRIGHT AND DEVELOPER CREDIT
========================================================== */

.legal-footer-bottom p {
  margin: 0;

  color: #b9c8d9;

  font-size: 11px;

  line-height: 1.7;
}

.legal-footer-bottom p:last-child {
  text-align: right;
}

.legal-footer-bottom a {
  color: var(--legal-gold);

  font-weight: 650;

  text-decoration: none;

  transition:
    color 180ms ease;
}

.legal-footer-bottom a:hover {
  color: #ffffff;
}


/* ==========================================================
   33. KEYBOARD ACCESSIBILITY

   Clear focus indication across legal
   document navigation and footer links.
========================================================== */

.legal-toc a:focus-visible,
.legal-document a:focus-visible,
.legal-footer a:focus-visible {
  outline:
    3px solid var(--legal-gold);

  outline-offset: 4px;

  border-radius: 2px;
}


/* ==========================================================
   34. TABLET LAYOUT
   BELOW 992px
========================================================== */

@media (max-width: 991.98px) {

  .legal-layout {
    grid-template-columns: 1fr;

    gap: 35px;
  }

  /*
    The table of contents becomes a
    normal document block.

    Avoid nested scrolling on tablets.
  */

  .legal-toc {
    position: static;

    display: flex;
    align-items: baseline;
    flex-wrap: wrap;

    gap: 10px 18px;

    max-height: none;

    padding-right: 0;

    overflow: visible;
    overscroll-behavior: auto;
  }

  .legal-toc h2 {
    flex-basis: 100%;

    margin-bottom: 5px;
  }

  .legal-toc a {
    margin-bottom: 0;
  }

  .legal-document {
    max-width: 100%;
  }

  .legal-content {
    padding: 42px 0 65px;
  }

}


/* ==========================================================
   35. MOBILE LAYOUT
   BELOW 768px
========================================================== */

@media (max-width: 767.98px) {

  .legal-container {
    padding-inline: 17px;
  }

  /* Page introduction */

  .legal-hero {
    padding: 44px 0 39px;
  }

  .legal-hero h1 {
    font-size:
      clamp(35px, 9vw, 46px);

    line-height: 1.2;
    letter-spacing: -1.5px;
  }

  .legal-hero p {
    font-size: 13.5px;

    line-height: 1.85;
  }

  .legal-meta {
    gap: 8px 10px;

    font-size: 11px;
  }

  /* Content spacing */

  .legal-content {
    padding: 36px 0 60px;
  }

  .legal-layout {
    gap: 32px;
  }

  /* Table of contents */

  .legal-toc {
    gap: 10px 15px;

    padding-left: 15px;
  }

  .legal-toc h2 {
    margin-bottom: 4px;

    font-size: 11px;
  }

  .legal-toc a {
    font-size: 12px;

    line-height: 1.7;
  }

  /*
    Links remain comfortably tappable
    without introducing button-style cards.
  */

  .legal-toc a {
    padding-block: 3px;
  }

  /* Legal content */

  .legal-document section {
    margin-bottom: 26px;
    padding-bottom: 23px;
  }

  .legal-document h2 {
    font-size: 20px;

    line-height: 1.4;
  }

  .legal-document p,
  .legal-document li {
    font-size: 13.5px;

    line-height: 1.9;
  }

  .legal-document ul {
    padding-left: 21px;
  }

  .legal-address {
    font-size: 13.5px;

    line-height: 1.9;
  }

  /* Footer */

  .legal-footer {
    padding: 31px 0;
  }

  .legal-footer-top {
    flex-direction: column;
    align-items: flex-start;

    gap: 22px;
  }

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

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

    gap: 9px;

    margin-top: 23px;
  }

  .legal-footer-bottom p:last-child {
    text-align: left;
  }

}


/* ==========================================================
   36. SMALL MOBILE
   BELOW 421px
========================================================== */

@media (max-width: 420px) {

  .legal-hero h1 {
    font-size:
      clamp(32px, 8.5vw, 38px);

    letter-spacing: -1.15px;
  }

  .legal-meta {
    align-items: flex-start;
  }

  .legal-toc {
    gap: 8px 12px;
  }

  .legal-toc a {
    font-size: 11.5px;
  }

  .legal-document h2 {
    font-size: 19px;
  }

  .legal-footer-links a {
    font-size: 11.5px;
  }

}


/* ==========================================================
   37. VERY SMALL MOBILE
   BELOW 361px
========================================================== */

@media (max-width: 360px) {

  .legal-container {
    padding-inline: 13px;
  }

  .legal-hero {
    padding: 37px 0 34px;
  }

  .legal-hero h1 {
    font-size: 31px;
  }

  .legal-hero p {
    font-size: 13px;
  }

  .legal-document p,
  .legal-document li {
    font-size: 13px;
  }

  .legal-toc a {
    font-size: 11px;
  }

  .legal-footer-company strong {
    font-size: 14px;
  }

}


/* ==========================================================
   38. REDUCED MOTION

   Remove smooth-scrolling when users
   request reduced motion.
========================================================== */

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

  html {
    scroll-behavior: auto;
  }

  .legal-toc a,
  .legal-document a,
  .legal-footer a {
    transition: none !important;
  }

}


/* ==========================================================
   39. PRINT SUPPORT

   Printed legal documents should be clean,
   readable and free from unnecessary links
   or navigation controls.
========================================================== */

@media print {

  html {
    scroll-behavior: auto;
  }

  body {
    color: #111111;
    background: #ffffff;
  }

  .legal-container {
    max-width: 100%;
    padding-inline: 0;
  }

  .legal-hero {
    padding: 0 0 20px;

    background: #ffffff;

    border-bottom:
      1px solid #cccccc;
  }

  .legal-hero h1 {
    color: #111111;

    font-size: 30px;
  }

  .legal-hero h1 span {
    color: #111111;
  }

  .legal-content {
    padding: 24px 0;
  }

  .legal-layout {
    display: block;
  }

  .legal-toc {
    display: none;
  }

  .legal-document {
    max-width: 100%;
  }

  .legal-document section {
    break-inside: auto;
  }

  .legal-document h2,
  .legal-document h3 {
    break-after: avoid;
  }

  .legal-document p,
  .legal-document li {
    orphans: 3;
    widows: 3;
  }

  .legal-footer {
    padding: 20px 0 0;

    color: #111111;
    background: #ffffff;

    border-top:
      1px solid #cccccc;
  }

  .legal-footer-company strong,
  .legal-footer-company span,
  .legal-footer-bottom p {
    color: #111111;
  }

  .legal-footer-links {
    display: none;
  }

  .legal-footer-bottom a {
    color: #111111;
  }

}


/* ==========================================================
   END OF SHARED LEGAL STYLESHEET
========================================================== */