/* ==========================================================================
   Utilities the lifted stylesheet does not contain.

   assets/salwa.css is salwaproperties.com's compiled Tailwind output. Tailwind
   only compiles the classes a project actually uses, so any utility this theme
   emits that the parent site never used is a silent no-op: the markup looks
   correct, the rule simply does not exist. Nothing errors, nothing warns, the
   page just renders flat.

   That is how the header phone link ended up permanently invisible — it carried
   `hidden lg:inline-flex`, and `lg:inline-flex` was never compiled — and why
   inner pages had no vertical rhythm and no desktop heading sizes.

   Every rule below is the value Tailwind would have generated, using the same
   tokens as the parent stylesheet:
     --spacing .25rem   sm 40rem   md 48rem   lg 64rem

   Regenerate the list of gaps with scratchpad/auditclasses.py after adding
   markup. Add here; never hand-edit salwa.css.
   ========================================================================== */

/* --- Aspect ratios (card media) ---------------------------------------- */
.aspect-\[16\/9\] { aspect-ratio: 16 / 9; }
.aspect-\[4\/3\]  { aspect-ratio: 4 / 3; }

/* --- Alpha colours ------------------------------------------------------ */
.bg-black\/45   { background-color: #00000073; }
.bg-black\/50   { background-color: #00000080; }
.text-black\/50 { color: #00000080; }
.text-black\/55 { color: #0000008c; }
.text-black\/60 { color: #00000099; }
.text-black\/70 { color: #000000b3; }
.text-black\/75 { color: #000000bf; }
.text-white\/80 { color: #ffffffcc; }
.text-white\/85 { color: #ffffffd9; }
.text-white\/90 { color: #ffffffe6; }

/* --- Hairline borders --------------------------------------------------- */
.border-\[\#00000014\] { border-color: #00000014; }
.border-\[\#ffffff26\] { border-color: #ffffff26; }
.divide-\[\#00000014\] > :where(:not(:last-child)) { border-color: #00000014; }

/* --- Layout ------------------------------------------------------------- */
.shrink-0 { flex-shrink: 0; }
.gap-y-1  { row-gap: calc(var(--spacing) * 1); }

.space-y-3 > :where(:not(:last-child)) {
  --tw-space-y-reverse: 0;
  margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
  margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
}

.max-w-\[460px\] { max-width: 460px; }
.max-w-\[760px\] { max-width: 760px; }
.max-w-\[70ch\]  { max-width: 70ch; }

/* --- Section header images. Shorter than the home hero on purpose, so an
       inner page reads as a page rather than another landing screen. ------ */
.h-\[32vh\] { height: 32vh; }
.h-\[36vh\] { height: 36vh; }
.h-\[38vh\] { height: 38vh; }
.h-\[42vh\] { height: 42vh; }
.h-\[46vh\] { height: 46vh; }

/* --- Spacing ------------------------------------------------------------ */
.mt-7  { margin-top: calc(var(--spacing) * 7); }
.pt-6  { padding-top: calc(var(--spacing) * 6); }
.pt-10 { padding-top: calc(var(--spacing) * 10); }
.pb-4  { padding-bottom: calc(var(--spacing) * 4); }
.pb-8  { padding-bottom: calc(var(--spacing) * 8); }
.pb-9  { padding-bottom: calc(var(--spacing) * 9); }
.py-9  { padding-top: calc(var(--spacing) * 9);  padding-bottom: calc(var(--spacing) * 9); }
.py-14 { padding-top: calc(var(--spacing) * 14); padding-bottom: calc(var(--spacing) * 14); }

/* --- Type sizes --------------------------------------------------------- */
.text-\[13px\] { font-size: 13px; }
.text-\[24px\] { font-size: 24px; }
.text-\[25px\] { font-size: 25px; }
.text-\[27px\] { font-size: 27px; }
.text-\[28px\] { font-size: 28px; }

/* --- md: 48rem ---------------------------------------------------------- */
@media (min-width: 48rem) {
  .md\:pb-10 { padding-bottom: calc(var(--spacing) * 10); }
  .md\:pb-14 { padding-bottom: calc(var(--spacing) * 14); }
  .md\:py-14 { padding-top: calc(var(--spacing) * 14); padding-bottom: calc(var(--spacing) * 14); }
  .md\:py-20 { padding-top: calc(var(--spacing) * 20); padding-bottom: calc(var(--spacing) * 20); }

  .md\:h-\[44vh\] { height: 44vh; }
  .md\:h-\[52vh\] { height: 52vh; }
  .md\:h-\[58vh\] { height: 58vh; }
  .md\:h-\[62vh\] { height: 62vh; }

  .md\:text-\[28px\] { font-size: 28px; }
  .md\:text-\[32px\] { font-size: 32px; }
  .md\:text-\[34px\] { font-size: 34px; }
  .md\:text-\[36px\] { font-size: 36px; }
  .md\:text-\[38px\] { font-size: 38px; }
  .md\:text-\[40px\] { font-size: 40px; }
  .md\:text-\[42px\] { font-size: 42px; }
}

/* --- lg: 64rem ---------------------------------------------------------- */
@media (min-width: 64rem) {
  .lg\:inline-flex { display: inline-flex; }
}

/* ---------------------------------------------------------------------------
   FAQ plus/minus, matching the parent's toggle. Both glyphs ship in the markup
   and CSS decides which one shows, so the icon never lags the panel state.
   --------------------------------------------------------------------------- */
.salwa-faq-minus { display: none; }
[aria-expanded="true"] .salwa-faq-plus  { display: none; }
[aria-expanded="true"] .salwa-faq-minus { display: block; }

/* Filter chips: the active chip carries the parent's tinted background. */
[data-salwa-filter] .is-active { background-color: #FFF8F6; border: 1px solid #00000026; }

/* Introduced by the replica rebuild. The parent used these three on elements
   that carried inline styles, so Tailwind never compiled them. */
.whitespace-nowrap { white-space: nowrap; }
@media (min-width: 768px) { .md\:mt-6 { margin-top: 1.5rem; } }

/* Landing page hero is shorter than the site hero on phones: the fact strip
   should be visible without scrolling. The parent has no landing pages, so
   this height was never compiled. */
.h-\[80vh\] { height: 80vh; }