/*
 * App-level adjustments to the rado2loc design system.
 *
 * Plain, unlayered CSS (like r2l/components.css): Tailwind utilities, which live in cascade
 * layers, cannot override design-system classes, so adjustments go here with a more specific
 * selector than the design-system rule they change.
 */

/* Home hero headline: about 20% smaller than the design system's display-xl (96 px max). */
.home-hero .r2l-headline {
  font-size: clamp(40px, 5.8vw, 76px);
}

/* Listing category on R2l::RaftCardComponent (app extension), between the title and the specs:
   same data style as the specs, in full ink since it tells the ISO 9650 standard. */
.r2l-card-category {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
  color: var(--ink);
}

/* Weekly and monthly rates on R2l::RaftCardComponent (app extension), under the daily price: in ink, unlike the
   muted place below them, so that they read as prices. */
.r2l-card-rates {
  margin-top: 2px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* A rate never breaks inside ("500 € / mois"): the line only wraps between rates. */
.r2l-card-rates span {
  white-space: nowrap;
}

/* Fields with a unit (R2l::FieldComponent suffix, app extension): the unit is drawn over the input's right end, so
   the input keeps room for it. The component gives the unit's length in characters, and the unit is set in 13 px IBM
   Plex Mono, 0.6 em per character. Number inputs also lose the browser's spin buttons, which covered the unit's last
   letters (always in Safari, on hover in Chrome). */
.r2l-field-suffix .r2l-field-control {
  padding-right: calc(14px + var(--r2l-suffix-chars, 0) * 0.6 * 13px + 8px);
}

.r2l-field-suffix input[type="number"] {
  appearance: textfield;
}

.r2l-field-suffix input[type="number"]::-webkit-inner-spin-button,
.r2l-field-suffix input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Requests awaiting the user's answer, in a pill on the navbar's first-name link (ApplicationHelper#account_nav_link):
   the action orange, darker than the logo's, keeps the white digit readable. Sized in em for the burger menu too. */
.r2l-nav-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4em;
  height: 1.4em;
  padding: 0 .4em;
  margin-left: .2em;
  border-radius: var(--radius-pill);
  background: var(--action);
  color: var(--on-action);
  font-size: .8em;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Navbar (app extension of the r2l-navbar controller): labels never wrap onto two lines. When the links do not fit
   on one line (signed-in users have up to 6), the controller adds r2l-nav-wrap--collapsed: the burger menu takes over,
   as it does under 900 px. */
.r2l-nav-link {
  white-space: nowrap;
}

.r2l-nav-wrap--collapsed .r2l-nav-links {
  display: none;
}

.r2l-nav-wrap--collapsed .r2l-nav-burger {
  display: inline-flex;
}

.r2l-nav-wrap--collapsed .r2l-nav-menu:not([hidden]) {
  display: flex;
}