/* ============================================================
   POLICY.CSS — Arihant Fabrics
   Shared styles for privacy-policy.html and terms-of-service.html.
   Both pages use the same hero (gold left accent bar) and
   the same long-form prose content section.
   No unique layout components — typography only.
============================================================ */


/* ── 1. HERO ──────────────────────────────────────────────── */

/* White background, 3px gold left accent bar. */
.policy-hero {
  background: var(--color-white);
  padding: 28px var(--page-padding-inline) 36px;
  border-bottom: 0.5px solid var(--color-border);
}

.policy-hero__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  border-left: 3px solid var(--color-gold);
  padding-left: 20px;
}

.policy-hero__eyebrow {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(10, 37, 117, 0.65); /* was rgba(238,204,26,0.6) ~1.3:1 — navy at 0.65 passes WCAG AA 4.5:1 */
  margin-bottom: 10px;
}

.policy-hero__heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: var(--color-navy);
  line-height: var(--line-height-heading);
  margin-bottom: 8px;
}

.policy-hero__sub {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}


/* ── 2. CONTENT SECTION ───────────────────────────────────── */

.policy-section {
  padding: min(3.5rem, 5vw) var(--page-padding-inline) min(4rem, 5vw);
}

.policy-inner {
  max-width: 72ch;  /* Optimal reading width for long-form prose */
  margin-inline: 0; /* Left-aligned — matches the gold accent bar's left edge,
                       not centred. Centring would misalign the content start
                       position with the hero banner. */
}


/* ── 3. PROSE TYPOGRAPHY ─────────────────────────────────── */

/*
 * All elements scoped inside .policy-inner to avoid bleeding
 * into header, footer, or any other component.
 */

.policy-inner h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 700;
  color: var(--color-navy);
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

/* First h2 gets no top margin — sits directly under the hero */
.policy-inner h2:first-child {
  margin-top: 0;
}

.policy-inner p {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  color: var(--color-text-body);
  line-height: 1.75;
  margin-bottom: 1rem;
}

.policy-inner p:last-child {
  margin-bottom: 0;
}

/* Inline links inside policy prose */
.policy-inner a {
  color: var(--color-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.policy-inner a:hover {
  color: var(--color-navy-dark);
}

/* Unordered lists — used for rights, data fields etc. */
.policy-inner ul {
  list-style: disc;
  padding-left: 1.4rem;
  margin-bottom: 1rem;
}

.policy-inner ul li {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  color: var(--color-text-body);
  line-height: 1.75;
  margin-bottom: 0.35rem;
}

.policy-inner ul li:last-child {
  margin-bottom: 0;
}

/* Last updated line — muted, sits just below the hero */
.policy-last-updated {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 0.5px solid var(--color-border);
}

/* Section divider between numbered sections */
.policy-inner hr {
  border: none;
  border-top: 0.5px solid var(--color-border);
  margin: 2.5rem 0;
}


/* ── 4. RESPONSIVE ────────────────────────────────────────── */

@media (min-width: 768px) and (max-width: 1023px) {
  .policy-hero    { padding: 28px var(--page-padding-inline) 36px; }
  .policy-section { padding: min(3.5rem, 5vw) var(--page-padding-inline) min(4rem, 5vw); }
}

@media (max-width: 767px) {
  .policy-hero    { padding: 24px 24px 32px; }
  .policy-section { padding: 2rem 24px 2.5rem; }
}