/*
  Responsive fixes layered over the design-tool export.
  The page styles are inline, so these rules target stable attributes and use !important.
  This file is hand-written: tools/build_site.py links it but never overwrites it.
*/

/* Pills with a fixed 34px height: let the text wrap inside the pill instead of spilling out. */
#dc-root span[style*="height: 34px"][style*="border-radius: 999px"] {
  height: auto !important;
  min-height: 34px;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  line-height: 1.3 !important;
  border-radius: 17px !important;
}

/* Footer toran + hanging lamps are absolutely positioned but the footer box was not a containing
   block, so they attached to the top of the page (visible over guide articles, which have no hero). */
footer > div:first-of-type {
  position: relative;
  isolation: isolate;
}
/* Keep the scalloped border, but not the hanging lamps: anchored correctly they hang over the footer text. */
footer [aria-hidden="true"] div[style*="top: 20px"] {
  display: none !important;
}
footer > div:first-of-type > div[style*="max-width: 1240px"][style*="display: grid"] {
  padding-top: 72px !important;
}

/* ---- Small phones (most Android phones are 360px wide; some are 320px) ---- */
@media (max-width: 400px) {
  /* Header: logo + "Rameshwaram Cabs" + Menu button need ~330px at desktop sizes. */
  header[style*="fixed"] {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  header > div {
    gap: 10px !important;
    padding-left: 12px !important;
    padding-right: 8px !important;
  }
  header a[aria-label="Rameshwaram Cabs home"] {
    gap: 9px !important;
    min-width: 0;
    flex-shrink: 1 !important;
  }
  header a[aria-label="Rameshwaram Cabs home"] > span:first-child {
    width: 36px !important;
    height: 36px !important;
    font-size: 17px !important;
    flex-shrink: 0;
  }
  header a[aria-label="Rameshwaram Cabs home"] > span:last-child {
    min-width: 0;
  }
  header a[aria-label="Rameshwaram Cabs home"] > span:last-child > span:first-child {
    font-size: 18px !important;
    white-space: nowrap;
  }
  header a[aria-label="Rameshwaram Cabs home"] > span:last-child > span:last-child {
    font-size: 11px !important;
    white-space: nowrap;
  }
  header button[aria-expanded] {
    padding: 0 14px !important;
    flex-shrink: 0;
  }

  /* Hero caption chip: slightly smaller text on narrow screens. */
  #dc-root span[style*="height: 34px"][style*="border-radius: 999px"] {
    font-size: 13px !important;
  }
}

@media (max-width: 340px) {
  header a[aria-label="Rameshwaram Cabs home"] > span:last-child > span:first-child {
    font-size: 17px !important;
  }
  header a[aria-label="Rameshwaram Cabs home"] > span:last-child > span:last-child {
    font-size: 10.5px !important;
  }
}