/*
  directory-public.css: the professions directory on the public website (the listing, a business's
  page, the registration form, and the two sections). Loaded by the public layout after the Huruma
  template, so these rules win. Colours come from tokens only (StyleRules) and layout uses logical
  properties, so the RTL build and dark mode need nothing extra.
*/

/* ---- Arrows point the reading way ---- */
[dir="rtl"] .bfau-directory-arrow,
[dir="rtl"] .bfau-directory-flip {
  display: inline-block;
  transform: scaleX(-1);
}

/* ---- The listing: summary line, empty state, pager ---- */
.bfau-directory-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  margin-block-end: 1.5rem;
  color: var(--bfau-text-muted);
}

.bfau-directory-summary strong {
  color: var(--bfau-heading);
}

.bfau-directory-count {
  margin-inline-start: auto;
}

.bfau-directory-clear {
  color: var(--bfau-primary-text);
  text-decoration: none;
}

.bfau-directory-empty {
  text-align: center;
  padding: 3rem 1rem;
  border: 1px dashed var(--bfau-border);
  border-radius: var(--bfau-radius-lg);
  color: var(--bfau-text-muted);
}

.bfau-directory-empty i {
  font-size: 3rem;
  display: block;
  margin-block-end: 0.75rem;
  color: var(--bfau-primary-text);
}

.bfau-directory-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.bfau-directory-pager a {
  min-inline-size: 2.5rem;
  text-align: center;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--bfau-border);
  border-radius: var(--bfau-radius);
  color: var(--bfau-text);
  text-decoration: none;
}

.bfau-directory-pager a.active {
  background-color: var(--bfau-primary);
  border-color: var(--bfau-primary);
  color: var(--bfau-on-primary);
}

/* ---- The sidebar: Huruma's widgets, the current category marked, counts as badges ---- */
.bfau-directory-aside .widget_categories ul li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.bfau-directory-aside .widget_categories li.bfau-current > a {
  color: var(--bfau-primary-text);
  font-weight: 600;
}

.bfau-directory-badge {
  display: inline-block;
  min-inline-size: 1.75rem;
  padding: 0.1rem 0.5rem;
  border-radius: 1rem;
  font-size: 0.8rem;
  text-align: center;
  background-color: var(--bfau-primary-subtle);
  color: var(--bfau-primary-text);
}

.bfau-directory-cta p {
  color: var(--bfau-text-muted);
}

.widget-area .widget_search form .search-field,
.bfau-directory-search .widget_search form .search-field {
  text-align: start;
}

/* ---- A listing's card: the template's blog card (single-blog), with a logo in its picture box.
   A logo is shown whole on a plain surface, never cropped like a photo. The template hides its
   "read more" link until hover and lifts the text on hover; the card also carries the phone and
   e-mail, so the link stays in view (a phone has no hover) and the text stays put. ---- */
.bfau-business-media img {
  object-fit: contain;
  object-position: center;
  padding: 1.5rem;
  background-color: var(--bfau-surface);
}

.bfau-business-card .content .blog-btn {
  position: relative;
  inset: auto;
  opacity: 1;
  margin-block-start: 0.75rem;
}

/* Above the template's hover fill, as its own heading and meta line are. */
.bfau-business-card .content .bfau-card-summary {
  position: relative;
  z-index: 1;
}

.bfau-business-card:hover .content span,
.bfau-business-card:hover .content h3 {
  transform: none;
}

.bfau-business-card .bfau-business-reach {
  color: var(--bfau-text);
  overflow-wrap: anywhere;
}

.bfau-business-card:hover .bfau-card-summary,
.bfau-business-card:hover .bfau-business-reach {
  color: var(--bfau-on-primary);
}

.bfau-business-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  inline-size: 4.5rem;
  block-size: 4.5rem;
  border-radius: var(--bfau-radius);
  border: 1px solid var(--bfau-border);
  background-color: var(--bfau-body-bg);
  color: var(--bfau-primary-text);
  font-size: 2rem;
  overflow: hidden;
}

.bfau-business-logo img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  padding: 0.35rem;
  background-color: var(--bfau-surface);
}

.bfau-business-logo-lg {
  inline-size: 7rem;
  block-size: 7rem;
  font-size: 3rem;
}

.bfau-business-logo-square {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1 / 1;
  font-size: 4rem;
  border-radius: var(--bfau-radius-lg) var(--bfau-radius-lg) 0 0;
}

.bfau-business-flag {
  align-self: flex-start;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--bfau-warning);
}

.bfau-business-subtitle {
  color: var(--bfau-text-muted);
  font-size: 0.95rem;
  margin: 0;
}

.bfau-business-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  padding: 0;
  margin: 0 0 0.75rem;
}

.bfau-business-tags li {
  padding: 0.15rem 0.65rem;
  border-radius: 1rem;
  font-size: 0.8rem;
  background-color: var(--bfau-primary-subtle);
  color: var(--bfau-primary-text);
}

.bfau-business-tags a {
  color: inherit;
  text-decoration: none;
}

/* ---- A business's page ---- */
.bfau-business-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-block-end: 1.5rem;
}

.bfau-business-heading {
  color: var(--bfau-heading);
  margin-block-end: 0.25rem;
  overflow-wrap: anywhere;
}

.bfau-business-lead {
  font-size: 1.15rem;
  color: var(--bfau-heading);
  margin-block-end: 1.5rem;
}

.bfau-business-profile h3,
.bfau-business-facts h3 {
  text-transform: none;
  font-size: 1.2rem;
  color: var(--bfau-heading);
  margin-block-end: 1rem;
}

.bfau-business-profile p {
  color: var(--bfau-text);
  white-space: pre-line;
}

.bfau-directory-fallback {
  font-size: 0.85rem;
  color: var(--bfau-text-muted);
  font-style: italic;
}

.bfau-business-facts {
  padding: 1.5rem;
  border: 1px solid var(--bfau-border);
  border-radius: var(--bfau-radius-lg);
  background-color: var(--bfau-surface);
}

.bfau-business-fact {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-block-end: 0.75rem;
  overflow-wrap: anywhere;
}

.bfau-business-fact i {
  font-size: 1.25rem;
  color: var(--bfau-primary-text);
  flex-shrink: 0;
}

.bfau-business-fact a {
  color: var(--bfau-text);
}

.bfau-business-social {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
}

.bfau-business-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 50%;
  background-color: var(--bfau-primary-subtle);
  color: var(--bfau-primary-text);
  font-size: 1.25rem;
}

.bfau-business-hours {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1rem;
  margin: 0;
}

.bfau-business-hours dt {
  color: var(--bfau-text-muted);
  font-weight: 500;
}

.bfau-business-hours dd {
  margin: 0;
  color: var(--bfau-heading);
  font-weight: 600;
}

.bfau-directory-back {
  color: var(--bfau-primary-text);
  text-decoration: none;
}

/* ---- The registration form: numbered groups instead of one wall of inputs ---- */
.bfau-directory-fieldset {
  border: 1px solid var(--bfau-border);
  border-radius: var(--bfau-radius-lg);
  padding: 1.25rem 1.25rem 0.5rem;
  margin-block-end: 1.5rem;
}

.bfau-directory-fieldset legend {
  float: none;
  inline-size: auto;
  padding-inline: 0.5rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--bfau-heading);
}

.bfau-directory-fieldset legend > span:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  margin-inline-end: 0.35rem;
  border-radius: 50%;
  background-color: var(--bfau-primary);
  color: var(--bfau-on-primary);
  font-size: 0.9rem;
}

.bfau-directory-choices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.5rem 1rem;
  margin-block-end: 0.75rem;
}

.bfau-directory-hours {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-block-end: 0.5rem;
}

/* Huruma sizes its contact inputs tall; a time needs less. */
.bfau-directory-register .contact-form form .bfau-directory-hours .form-control {
  block-size: 3rem;
}

/* ---- "Featured businesses" on Huruma's team cards: logos fitted, links always visible ---- */
.bfau-business-team .image {
  display: block;
}

.bfau-business-team .content h3 a {
  color: inherit;
  text-decoration: none;
}

.bfau-business-team .content {
  background-color: var(--bfau-surface);
}

.bfau-business-team-phone {
  display: block;
  margin-block-start: 0.5rem;
  color: var(--bfau-text);
  text-decoration: none;
}

.bfau-featured-more {
  text-align: center;
  margin-block-start: 0.5rem;
}

.bfau-directory-search .widget-area .widget:first-child {
  margin-block-start: 0;
}

.bfau-directory-search-title {
  margin-block-end: 1rem;
}

/* Huruma capitalises every word of widget titles and buttons; in English that reads as shouting and
   French and Arabic have no such rule, so the directory's own texts keep their case. */
.bfau-directory-page .widget-area .widget .widget-title,
.bfau-directory-page .default-btn,
.bfau-directory-search .widget-area .widget-title {
  text-transform: none;
}