/*
 * WordPress integration styles.
 *
 * Only the pieces the original static site never needed: accessibility
 * utilities, admin-bar offsets, editor/blog fallbacks and form messaging.
 * The design system itself lives untouched in css/style.css.
 */

/* ---------------------------------------------------------- Accessibility */

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus {
  position: fixed !important;
  top: 12px;
  left: 12px;
  z-index: 100000;
  width: auto;
  height: auto;
  padding: 12px 20px;
  clip: auto;
  margin: 0;
  overflow: visible;
  background: #fff;
  color: #111;
  border-radius: 8px;
  font: 600 15px/1.2 "Manrope", system-ui, sans-serif;
  text-decoration: none;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
}

/* ------------------------------------------------------------- Admin bar */

/* The header is fixed, so it has to clear the admin bar for logged-in users. */
body.admin-bar .site-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }
}

/* The admin bar is itself fixed on small screens; keep it above the menu. */
@media screen and (max-width: 600px) {
  body.admin-bar.mobile-menu-open #wpadminbar {
    position: absolute;
  }
}

/* ----------------------------------------- Blog, search and 404 fallbacks */

.geofast-basic {
  /* Clears the fixed header, which the designed pages handle with their heroes. */
  padding: 170px 0 96px;
  background: #fff;
  color: #17181a;
}

.geofast-basic__title {
  margin: 0 0 28px;
  font: 700 clamp(30px, 4vw, 46px) / 1.15 "Manrope", system-ui, sans-serif;
  color: #17181a;
}

.geofast-basic__content,
.geofast-basic__list {
  max-width: 780px;
  font: 400 17px/1.7 "Manrope", system-ui, sans-serif;
}

.geofast-basic__content h2,
.geofast-basic__content h3 {
  margin: 1.6em 0 0.5em;
  line-height: 1.25;
}

.geofast-basic__content a {
  color: #f2a01c;
}

.geofast-basic__item {
  padding: 0 0 32px;
  margin: 0 0 32px;
  border-bottom: 1px solid rgba(23, 24, 26, 0.1);
}

.geofast-basic__item:last-child {
  border-bottom: 0;
}

.geofast-basic__item h2 {
  margin: 0 0 8px;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.25;
}

.geofast-basic__item h2 a {
  color: inherit;
  text-decoration: none;
}

.geofast-basic__item h2 a:hover,
.geofast-basic__item h2 a:focus-visible {
  color: #f2a01c;
}

.geofast-basic__meta {
  margin: 0 0 12px;
  font-size: 14px;
  color: rgba(23, 24, 26, 0.6);
}

.geofast-basic .pagination {
  margin-top: 40px;
  font-weight: 600;
}

.geofast-basic .pagination .page-numbers {
  display: inline-block;
  padding: 8px 14px;
  margin-right: 6px;
  border-radius: 8px;
  color: #17181a;
  text-decoration: none;
}

.geofast-basic .pagination .page-numbers.current,
.geofast-basic .pagination .page-numbers:hover {
  background: #f2a01c;
  color: #fff;
}

/* --------------------------------------------- Editor alignment classes */

.geofast-basic__content .alignleft {
  float: left;
  margin: 0 24px 16px 0;
}

.geofast-basic__content .alignright {
  float: right;
  margin: 0 0 16px 24px;
}

.geofast-basic__content .aligncenter {
  display: block;
  margin-inline: auto;
}

.geofast-basic__content img {
  max-width: 100%;
  height: auto;
}

/* ------------------------------------------------- Footer credit / copyright */

/*
 * The original design had no links in the footer's bottom bar, so an editor
 * adding one (the agency credit, for example) would inherit the browser's
 * default blue. Scoped to the two <span> lines so the sibling social icons —
 * which are also links, and paint their SVGs with currentColor — keep their own
 * slightly dimmed white.
 */
.site-footer__bottom > span a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: opacity 0.2s ease;
}

.site-footer__bottom > span a:hover,
.site-footer__bottom > span a:focus-visible {
  color: #fff;
  opacity: 0.75;
}

.site-footer__bottom > span a:visited {
  color: #fff;
}

/* ---------------------------------------------------- Growth roadmap layout */

/*
 * The roadmap now starts at 2015 rather than 2006, which left the first slot of
 * the top row empty — a blank gap between the heading and the 2015 badge. Each
 * remaining year on that row moves up one slot, reusing the original slot
 * coordinates so the badges, connector dots and cards stay on the road.
 *
 *   slot 1: 422 / 444 / 468      slot 2: 641 / 663 / 682
 *   slot 3: 840 / 862 / 880      (badge --x / connector left / card left)
 */
.about-growth-roadmap .year-2015 { --x: 422px; }
.about-growth-roadmap .year-2016 { --x: 641px; }
.about-growth-roadmap .year-2019 { --x: 840px; }

.about-growth-roadmap .c-2015 { left: 444px; }
.about-growth-roadmap .c-2016 { left: 663px; }
.about-growth-roadmap .c-2019 { left: 862px; }

.about-growth-roadmap .m-2015 { left: 468px; }
.about-growth-roadmap .m-2016 { left: 682px; }
.about-growth-roadmap .m-2019 { left: 880px; }

/* Align the three 2026 product illustrations with the three 2025 columns. */
.about-growth-roadmap .m-2026-saffola { left: 258px; }
.about-growth-roadmap .m-2026-perfume { left: 497px; }
.about-growth-roadmap .m-2026-beer { left: 790px; }

/* Give the 2025 labels more breathing room below their horizontal road. */
@media (min-width: 901px) {
  body .about-growth-roadmap #aboutGrowthStage .milestone[data-year="2025"] .copy,
  body .about-growth-roadmap #aboutGrowthStage .milestone[data-year="2025"][aria-expanded="true"] .copy {
    transform: translateX(-50%) translateY(50px) !important;
  }

  /* Keep the perfume heading to two lines, with Pain Relief Spray on line two. */
  body .about-growth-roadmap #aboutGrowthStage .m-2026-perfume .copy {
    width: 270px !important;
    max-width: 270px !important;
  }

  /* Single city/state locations should remain together on one line. */
  body .about-growth-roadmap #aboutGrowthStage .milestone:not(.m-2023-juice):not(.m-2023-cereal) .copy p > span:last-child {
    white-space: nowrap !important;
  }

  body .about-growth-roadmap #aboutGrowthStage .milestone:not(.m-2023-juice):not(.m-2023-cereal) .copy p {
    align-items: center !important;
  }

  body .about-growth-roadmap #aboutGrowthStage .milestone:not(.m-2023-juice):not(.m-2023-cereal) .copy .pin {
    margin-top: 0 !important;
  }

  /* Let multi-location copy wrap naturally while keeping city/state pairs intact. */
  body .about-growth-roadmap #aboutGrowthStage .m-2023-juice .copy {
    width: 230px !important;
    max-width: 230px !important;
  }

  body .about-growth-roadmap #aboutGrowthStage .m-2023-cereal .copy {
    width: 260px !important;
    max-width: 260px !important;
  }

}

/* ------------------------------------------------ Roadmap tablet alignment */

/*
 * Between the stacked mobile layout and full desktop, the fixed roadmap is
 * scaled as one canvas. Reposition every copy block beneath its illustration
 * so labels never fall beside the artwork at widths such as 768px and 900px.
 */
@media (min-width: 761px) and (max-width: 900px) {
  body .about-growth-roadmap #aboutGrowthStage .milestone .copy {
    text-align: center !important;
    transform: translateX(-50%) translateY(7px) !important;
  }

  body .about-growth-roadmap #aboutGrowthStage .milestone[aria-expanded="true"] .copy {
    transform: translateX(-50%) translateY(0) !important;
  }

  body .about-growth-roadmap #aboutGrowthStage .milestone .copy p {
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
  }

  body .about-growth-roadmap #aboutGrowthStage .m-2015 .copy {
    left: 72px !important; top: 128px !important; width: 150px !important; max-width: 150px !important;
  }

  body .about-growth-roadmap #aboutGrowthStage .m-2016 .copy {
    left: 84px !important; top: 114px !important; width: 150px !important; max-width: 150px !important;
  }

  body .about-growth-roadmap #aboutGrowthStage .m-2019 .copy {
    left: 84px !important; top: 113px !important; width: 160px !important; max-width: 160px !important;
  }

  body .about-growth-roadmap #aboutGrowthStage .m-2020-salt .copy {
    left: 59px !important; top: 103px !important; width: 150px !important; max-width: 150px !important;
  }

  body .about-growth-roadmap #aboutGrowthStage .m-2020-agarbatti > img {
    left: 36px !important; top: 0 !important;
  }

  body .about-growth-roadmap #aboutGrowthStage .m-2020-agarbatti .copy {
    left: 71px !important; top: 118px !important; width: 150px !important; max-width: 150px !important;
  }

  body .about-growth-roadmap #aboutGrowthStage .m-2023-juice .copy {
    left: 41px !important; top: 106px !important; width: 230px !important; max-width: 230px !important;
  }

  body .about-growth-roadmap #aboutGrowthStage .m-2023-cereal .copy {
    left: 42px !important; top: 96px !important; width: 260px !important; max-width: 260px !important;
  }

  body .about-growth-roadmap #aboutGrowthStage .m-2023-namkeen .copy {
    left: 48px !important; top: 99px !important; width: 150px !important; max-width: 150px !important;
  }

  body .about-growth-roadmap #aboutGrowthStage .m-2023-juice .copy p,
  body .about-growth-roadmap #aboutGrowthStage .m-2023-cereal .copy p {
    align-items: flex-start !important;
  }

  body .about-growth-roadmap #aboutGrowthStage .m-2025-atta .copy {
    left: 50px !important; top: 129px !important; width: 155px !important; max-width: 155px !important;
  }

  body .about-growth-roadmap #aboutGrowthStage .m-2025-juice .copy {
    left: 39px !important; top: 128px !important; width: 175px !important; max-width: 175px !important;
  }

  body .about-growth-roadmap #aboutGrowthStage .m-2025-candy .copy {
    left: 40px !important; top: 131px !important; width: 195px !important; max-width: 195px !important;
  }

  body .about-growth-roadmap #aboutGrowthStage .m-2026-saffola .copy {
    left: 49px !important; top: 127px !important; width: 175px !important; max-width: 175px !important;
  }

  body .about-growth-roadmap #aboutGrowthStage .m-2026-paperboat .copy {
    left: 35px !important; top: 128px !important; width: 185px !important; max-width: 185px !important;
  }

  body .about-growth-roadmap #aboutGrowthStage .m-2026-perfume .copy {
    left: 49px !important; top: 137px !important; width: 270px !important; max-width: 270px !important;
  }

  body .about-growth-roadmap #aboutGrowthStage .m-2026-beer .copy {
    left: 33px !important; top: 127px !important; width: 210px !important; max-width: 210px !important;
  }
}

/* ------------------------------------------- Roadmap title alignment (desktop) */

/*
 * Each milestone card sits at its own vertical offset, and each copy block had
 * its own `top`, so the titles landed on different baselines — most visibly in
 * 2026, where they spanned 33px. These line every row's copy up on one baseline
 * by making (card top + copy top) constant per row. The tablet block further up
 * already aligns those widths and keeps winning there via !important.
 *
 *   row 2015-2019  -> 285    row 2020 -> 507    row 2023 -> 431
 *   row 2025       -> 639    row 2026 -> 836
 */
.about-growth-roadmap .m-2006 .copy { top: 121px; }   /* card 164 */
.about-growth-roadmap .m-2015 .copy { top: 129px; }   /* card 156 */
.about-growth-roadmap .m-2016 .copy { top: 115px; }   /* card 170 */
.about-growth-roadmap .m-2019 .copy { top: 111px; }   /* card 174 */

.about-growth-roadmap .m-2020-salt .copy      { top: 108px; }  /* card 399 */
.about-growth-roadmap .m-2020-agarbatti .copy { top: 117px; }  /* card 390 */

.about-growth-roadmap .m-2023-juice .copy   { top: 33px; }  /* card 398 */
.about-growth-roadmap .m-2023-cereal .copy  { top: 30px; }  /* card 401 */
.about-growth-roadmap .m-2023-namkeen .copy { top: 33px; }  /* card 398 */

.about-growth-roadmap .m-2025-atta .copy  { top: 27px; }  /* card 612 */
.about-growth-roadmap .m-2025-juice .copy { top: 26px; }  /* card 613 */
.about-growth-roadmap .m-2025-candy .copy { top: 29px; }  /* card 610 */

.about-growth-roadmap .m-2026-saffola .copy   { top: 14px; }  /* card 822 */
.about-growth-roadmap .m-2026-paperboat .copy { top: 15px; }  /* card 821 */
.about-growth-roadmap .m-2026-perfume .copy   { top: 24px; }  /* card 812 */
.about-growth-roadmap .m-2026-beer .copy      { top: 14px; }  /* card 822 */

/* ------------------------------------------------------- Home hero overlay */

/*
 * The hero shade is three stacked gradients; at full strength only about 5% of
 * the photograph showed through on the left. These are the same gradients with
 * every alpha at 65% of the original, letting far more of the building show
 * while keeping the white text legible.
 *
 * Measured against the actual hero photo (worst-case contrast on white):
 *   headline  5.9 -> 3.7   (WCAG AA for large text needs 3.0)
 *   tag pills 10.3 -> 5.2  (WCAG AA for normal text needs 4.5)
 *
 * Anything below ~60% pushes the headline under the AA threshold.
 */
.hero__shade {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.59) 14%, rgba(0, 0, 0, 0.51) 28%, rgba(0, 0, 0, 0.37) 47%, rgba(0, 0, 0, 0.20) 72%, rgba(0, 0, 0, 0.22) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0.04) 30%, rgba(0, 0, 0, 0.07) 61%, rgba(0, 0, 0, 0.56) 100%),
    radial-gradient(circle at 11% 52%, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0.22) 22%, rgba(0, 0, 0, 0.08) 38%, rgba(0, 0, 0, 0) 54%);
}