/* ==========================================================================
   Corafter — Phase 21: responsive & legibility fixes
   Loaded last in includes/header.php. Every rule here is a targeted correction
   found by auditing all routes at 19 screen sizes (320px phones -> 2560px
   desktops, portrait and landscape); nothing here changes the look at >= 1260px
   except the small label/nav-weight corrections noted below.

   1. Side gutters
      Phase 7 made the home sections' containers `width:100%` with no padding, so
      text touched the screen edge on every screen narrower than the 1180px
      container (phones AND small laptops/tablets). All containers now share one
      gutter system: 20px/side normally, 16px/side <= 480px, 14px/side <= 360px.
   2. Services "Our Approach" cards
      .process-line is a dark-section component (translucent white cards, white
      text). On the white Services section it was unreadable; it gets a light variant.
   3. Contrast
      Eyebrow label on the dark highlight card, button text in the article lead
      box, and a few muted greys that fell below 4:1.
   4. Type & touch targets
      10px labels raised to 12px; small links get a larger tap area WITHOUT moving
      anything (padding + equal negative margin).
   5. Boxes that kept desktop padding on phones.
   6. Header: Services button typography matches the other nav links.
   (Sections that clip their content are handled by .bp-grow in book-pages.css.)
   ========================================================================== */

/* 1. Gutters -------------------------------------------------------------- */
:root { --bp-gutter: 40px; }
@media (max-width: 480px) { :root { --bp-gutter: 32px; } }
@media (max-width: 360px) { :root { --bp-gutter: 28px; } }

body .container {
  width: min(var(--container, 1180px), 100% - var(--bp-gutter));
  margin-inline: auto;
}

main#main-content .home-scroll-stack > section > .container,
main#main-content .home-scroll-stack > .rd-hero .hero-inner {
  width: min(var(--container, 1180px), 100% - var(--bp-gutter));
  margin-inline: auto;
}

/* 2. Services approach cards on a light section ---------------------------- */
.content-section .process-line > div {
  background: #fff;
  border-color: #dbe6fa;
  box-shadow: 0 10px 28px rgba(15, 35, 80, .06);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.content-section .process-line h3 { color: #0b1736; }
.content-section .process-line p { color: #52617f; }

/* 3. Contrast --------------------------------------------------------------- */
.service-highlight-card .eyebrow { color: #8ecbff; }
.article-lead-box .btn.btn-primary,
.article-lead-box .btn.btn-primary:hover { color: #fff; }
.blog-results-count,
.post-meta span,
.article-cover-wrap figcaption { color: #5d6c88; }

/* 4. Type & touch targets --------------------------------------------------- */
main#main-content small,
.quote-card,
.quote-card strong { font-size: 12px; }

@media (max-width: 760px) {
  .stats-grid span,
  .service-stat span { font-size: 12px; }
}

/* touch devices of any width (incl. landscape phones) and all narrow windows */
@media (max-width: 820px), (pointer: coarse) {
  .breadcrumb a,
  .rd-card-body > a,
  .blog-card-body .text-link,
  .portfolio-card-body .text-link {
    padding-block: 11px;
    margin-block: -11px;
  }

  .site-footer a,
  .contact-list a,
  .footer-bottom a {
    padding-block: 10px;
    margin-block: -10px;
  }
}

/* 5. Boxes that kept desktop padding on phones ------------------------------ */
@media (max-width: 760px) {
  .cta-box { padding: 40px 28px; }
  .faq-q { padding-inline: 4px; }
}
@media (max-width: 480px) {
  .cta-box { padding: 36px 22px; }
}

/* 6. Header: the Services button matches the other nav links ----------------------
   `.nav-drop-button { font: inherit }` loads after `.nav-link` and flattened the button
   to 15px / weight 400 while every other link is 600 (14px on desktop). */
.main-nav .nav-drop-button.nav-link { font-weight: 600; }
@media (min-width: 761px) {
  .main-nav .nav-drop-button.nav-link { font-size: 14px; }
}

/* 7. Remaining contrast gaps ------------------------------------------------------ */
.site-footer p { color: #aebbd6; }                       /* "India" line: 3.4:1 -> 8:1 on the dark footer */
.use-case-card small,
.service-stat span { color: #5d6c88; }                    /* muted grey on white: 4.0:1 -> 5.4:1 */
.dropdown-menu small { color: #5d6c88; }                  /* services dropdown card descriptions: 4.0:1 -> 5.4:1 */