body.single-directory_dir_ltg .drts-display--detailed {
  margin: 0 auto 72px;
}

/* Directories Pro's admin-only quick-actions gear (edit/manage dropdown),
absolutely positioned top-right of the entity display. Only ever visible to
logged-in admins and not wired up to anything functional on this site --
hide it rather than leave a dead, awkward-looking control. */
body.single-directory_dir_ltg .drts-entity-admin-buttons {
  display: none !important;
}

body.single-directory_dir_ltg .drts-display--detailed .dir-box1 {
  margin: 0 !important;
}

body.single-directory_dir_ltg .drts-display--detailed .drts-row {
  gap: 28px;
  align-items: flex-start;
  margin-inline: 0;
}

body.single-directory_dir_ltg .drts-display--detailed .drts-row > [class*="drts-col-"] {
  flex: 0 0 auto !important;
  padding-inline: 0;
}

body.single-directory_dir_ltg .drts-display--detailed .drts-display-element-column-9 {
  width: calc(65% - 14px) !important;
  max-width: calc(65% - 14px) !important;
}

body.single-directory_dir_ltg .drts-display--detailed .drts-display-element-column-10 {
  width: calc(35% - 14px) !important;
  max-width: calc(35% - 14px) !important;
}

body.single-directory_dir_ltg .drts-display--detailed .dir-left-col,
body.single-directory_dir_ltg .drts-display--detailed .dir-right-col {
  max-width: none !important;
  margin: 0 !important;
  border: 1px solid rgba(27, 45, 89, .14);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .08);
  overflow: hidden;
}

body.single-directory_dir_ltg .drts-display--detailed .dir-left-col {
  display: flex;
  flex-direction: column;
}

body.single-directory_dir_ltg .drts-display--detailed .directory-listing-photos {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  margin: 0 !important;
  padding: 28px;
  background: #f4f7fb;
  border-bottom: 1px solid rgba(27, 45, 89, .12);
}

body.single-directory_dir_ltg .drts-display--detailed .directory-listing-photos img {
  width: 100% !important;
  max-height: 360px;
  object-fit: contain;
}

body.single-directory_dir_ltg .drts-display--detailed .directory-listing-detailed-info-container {
  padding: 28px 30px 32px;
}

body.single-directory_dir_ltg .drts-display--detailed .drts-display-element-entity_field_post_title-1 {
  margin-top: 0;
  margin-bottom: 14px !important;
  color: var(--brand-primary, #1b2d59);
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
}

body.single-directory_dir_ltg .drts-display--detailed .directory-listing-description {
  color: var(--text-body, #444);
  font-size: 1.05rem;
  line-height: 1.7;
}

body.single-directory_dir_ltg .drts-display--detailed .dir-right-col {
  padding: 24px 26px;
  position: sticky;
  top: 150px;
}

body.single-directory_dir_ltg .drts-display--detailed .msad-directory-contact-heading {
  display: block;
  margin: 0 0 16px;
  color: var(--brand-primary, #1b2d59);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.2;
}

body.single-directory_dir_ltg .drts-display--detailed .dir-address {
  padding: 15px 16px;
  border-radius: 8px;
  background: #f4f7fb;
  color: var(--text-body, #444);
  font-size: .96rem;
  line-height: 1.55;
}

body.single-directory_dir_ltg .drts-display--detailed .directory-listing-contact-info .drts-bs-list-group-item {
  padding: 12px 0 !important;
  border-color: rgba(27, 45, 89, .12);
}

body.single-directory_dir_ltg .drts-display--detailed .drts-entity-field {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  justify-content: flex-start !important;
  column-gap: 12px;
  row-gap: 0;
}

body.single-directory_dir_ltg .drts-display--detailed .drts-entity-field-label {
  display: flex;
  align-items: center;
  min-width: 28px;
  color: var(--brand-primary, #1b2d59);
  font-size: .94rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Icon-only labels (Website) have nothing but the 16px icon in this cell --
without this, the leftover min-width: 28px above pads 12px of empty space
after the icon, on top of column-gap, doubling the gap to the value. */
body.single-directory_dir_ltg .drts-display--detailed .drts-entity-field-label-type-icon {
  min-width: 0;
}

body.single-directory_dir_ltg .drts-display--detailed .drts-entity-field-label-type-form,
body.single-directory_dir_ltg .drts-display--detailed .drts-entity-field-label-type-form_icon {
  min-width: 0;
}

/* Every label icon -- the real <i class="fa-fw"> FA renders for Website/
E-mail/Voice Number, or the ::before FA glyph injected below for the two
field types Directories Pro has no icon for -- gets the IDENTICAL fixed
flex slot. FA glyphs have different native proportions (round globe, wide
TV, narrow phone handset); centering each in the same flex box is what
actually makes them line up, not just giving them the same CSS width. */
body.single-directory_dir_ltg .drts-display--detailed .drts-entity-field-label i.fa-fw,
body.single-directory_dir_ltg .drts-display--detailed .drts-entity-field:has([data-name*="field_vp"]) .drts-entity-field-label::before,
body.single-directory_dir_ltg .drts-display--detailed .drts-entity-field:has([data-name*="field_phone_number"]) .drts-entity-field-label::before,
body.single-directory_dir_ltg .drts-display--detailed .drts-entity-field:has([data-name*="field_text_number"]) .drts-entity-field-label::before {
  display: inline-flex;
  flex: 0 0 16px;
  align-items: center;
  justify-content: center;
  font-family: "Font Awesome 6 Solid";
  font-weight: 900;
  font-style: normal;
}

/* Icon-only labels (Website): the grid's own column-gap already provides
the gap to the value column -- no margin here, or the two would stack into
a double gap. */
body.single-directory_dir_ltg .drts-display--detailed .drts-entity-field-label-type-icon i.fa-fw {
  margin-right: 0;
}

/* Icon+text labels (Voice Number, E-mail Address, and the two injected
icons below): gap between the icon and its adjacent label text, matching
column-gap so the icon's immediate neighboring gap reads the same
everywhere regardless of which of the two gap mechanisms is in play. */
body.single-directory_dir_ltg .drts-display--detailed .drts-entity-field-label-type-form_icon i.fa-fw,
body.single-directory_dir_ltg .drts-display--detailed .drts-entity-field:has([data-name*="field_vp"]) .drts-entity-field-label::before,
body.single-directory_dir_ltg .drts-display--detailed .drts-entity-field:has([data-name*="field_phone_number"]) .drts-entity-field-label::before,
body.single-directory_dir_ltg .drts-display--detailed .drts-entity-field:has([data-name*="field_text_number"]) .drts-entity-field-label::before {
  margin-right: 12px;
}

/* Directories Pro has no icon configured for VP Number (videophone), the
generic Phone Number field, or Text Number, so all three render with a
plain text-only label by default -- inject one via ::before instead,
sized/spaced identically to every real <i> icon above. VP = videophone, so
a monitor/TV icon reads clearer than reusing the voice phone glyph. Font
family is "Font Awesome 6 Solid" on this site's bundled build (not the
default CDN name "Font Awesome 6 Free") -- verified against
wp-content/themes/bricks/assets/css/libs/font-awesome-6.min.css. */
body.single-directory_dir_ltg .drts-display--detailed .drts-entity-field:has([data-name*="field_vp"]) .drts-entity-field-label::before {
  content: "\f26c" / "";
}

/* Generic Phone Number: same glyph as Voice Number (fa-phone). */
body.single-directory_dir_ltg .drts-display--detailed .drts-entity-field:has([data-name*="field_phone_number"]) .drts-entity-field-label::before {
  content: "\f095" / "";
}

/* Text Number (SMS): speech-bubble glyph (fa-comment). */
body.single-directory_dir_ltg .drts-display--detailed .drts-entity-field:has([data-name*="field_text_number"]) .drts-entity-field-label::before {
  content: "\f075" / "";
}

/* TTY/Voice Number: unlike the fields above, this one already renders a
real <i class="fa-phone"> (Directories Pro treats it as a plain phone-type
field) -- it's not a missing icon to inject, but the wrong one to swap.
Override the glyph's own ::before content to match the dedicated TTY
Number field's icon (fa-tty), since this field is TTY-capable too. */
body.single-directory_dir_ltg .drts-display--detailed .drts-entity-field:has([data-name*="field_tty_voice"]) .drts-entity-field-label i.fa-phone::before {
  content: "\f1e4";
}

body.single-directory_dir_ltg .drts-display--detailed .drts-entity-field-value {
  min-width: 0;
  font-size: .96rem;
  overflow: visible;
  text-align: right;
  white-space: normal;
  overflow-wrap: anywhere;
}

body.single-directory_dir_ltg .drts-display--detailed .drts-entity-field-value a,
body.single-directory_dir_ltg .drts-display--detailed .drts-entity-field-value .drts-display-element {
  display: block;
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
}

body.single-directory_dir_ltg .drts-display--detailed .directory-listing-contact-info .drts-bs-list-group-item:has([data-name*="contact"]) .drts-entity-field {
  grid-template-columns: max-content minmax(0, 1fr);
}

body.single-directory_dir_ltg .drts-display--detailed .directory-listing-contact-info .drts-bs-list-group-item:has([data-name*="contact"]) .drts-entity-field-label {
  white-space: nowrap;
}

body.single-directory_dir_ltg .drts-display--detailed .directory-listing-contact-info .drts-bs-list-group-item:has([data-name*="contact"]) .drts-entity-field-value {
  text-align: left;
}

/* E-mail Address: the value can run long (long addresses, long usernames)
-- the generic single-line ellipsis rule above left it crammed right up
against the card's edge, reading as if it were spilling out of the box.
Stack the address under the label instead of forcing both onto one line. */
body.single-directory_dir_ltg .drts-display--detailed .directory-listing-contact-info .drts-bs-list-group-item:has([data-name*="field_email"]) .drts-entity-field {
  display: block;
}

body.single-directory_dir_ltg .drts-display--detailed .directory-listing-contact-info .drts-bs-list-group-item:has([data-name*="field_email"]) .drts-entity-field-value {
  display: block;
  margin-top: 4px;
  overflow: visible;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}

body.single-directory_dir_ltg .drts-display--detailed .directory-listing-contact-info .drts-bs-list-group-item:has([data-name*="field_email"]) .drts-entity-field-value a {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Social Accounts: with every platform filled in, one nowrap row of icons
runs past the card's edge -- stack the icon row under the "Social Accounts"
label instead of beside it, and let it wrap onto more than one line if it
still doesn't fit on one. */
body.single-directory_dir_ltg .drts-display--detailed .directory-listing-contact-info .drts-bs-list-group-item:has([data-name*="social"]) .drts-entity-field {
  display: block;
}

body.single-directory_dir_ltg .drts-display--detailed .directory-listing-contact-info .drts-bs-list-group-item:has([data-name*="social"]) .drts-entity-field-label {
  white-space: nowrap;
}

body.single-directory_dir_ltg .drts-display--detailed .directory-listing-contact-info .drts-bs-list-group-item:has([data-name*="social"]) .drts-entity-field-value,
body.single-directory_dir_ltg .drts-display--detailed .directory-listing-contact-info [data-name*="social"] {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-top: 8px;
  overflow: visible;
  text-align: left;
  white-space: normal;
}

body.single-directory_dir_ltg .drts-display--detailed .directory-listing-contact-info .drts-bs-list-group-item:has([data-name*="social"]) .drts-entity-field-value a,
body.single-directory_dir_ltg .drts-display--detailed .directory-listing-contact-info [data-name*="social"] a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  margin-right: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

body.single-directory_dir_ltg .drts-display--detailed a {
  color: var(--brand-primary, #1b2d59);
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

body.single-directory_dir_ltg .drts-display--detailed a:hover,
body.single-directory_dir_ltg .drts-display--detailed a:focus-visible {
  color: var(--brand-cranberry, #9e0135);
}

body.single-directory_dir_ltg .msad-h26__dir a:focus-visible {
  outline: 3px solid #1b2d59;
  outline-offset: 2px;
}

body.single-directory_dir_ltg .msad-directory-back {
  margin: 0 0 20px;
}

/* Plain lightweight text link (arrow + label), not a bordered button --
a heavy outline button sitting right above the admin toolbar card read as
two competing buttons stacked on top of each other. Matches the "← All
news"/"← All events" back-links used on the News/Event/Video singles
(those live inside a navy hero band and use light-on-navy colours; this
page has no hero, so this is the same light-background treatment already
used for "All news →" style links elsewhere on the site). This link is
plain plugin-injected HTML, not a Bricks element, so it can't just carry
an existing global class -- Bricks only compiles a page's global-class CSS
from classes actually used on Bricks elements it renders, and none appear
on this plugin-templated page. */
body.single-directory_dir_ltg .msad-directory-back a {
  font-weight: 700;
  font-size: 15px;
  color: var(--h26-cranberry, var(--brand-cranberry));
  text-decoration: none;
  padding-bottom: 4px;
  box-shadow: inset 0 0 0 transparent;
  transition: box-shadow var(--transition-fast, 140ms ease), color var(--transition-fast, 140ms ease);
}

body.single-directory_dir_ltg .msad-directory-back a:hover,
body.single-directory_dir_ltg .msad-directory-back a:focus-visible {
  color: var(--h26-navy, var(--brand-primary));
  box-shadow: inset 0 -2px 0 var(--h26-navy, var(--brand-primary));
}

/* Same banner colours/type/padding as News/Event/Video (see
.msad-h26__visibility-banner in article-2026.css), reproduced here
standalone since that stylesheet only loads on those three post types,
not on this plugin-templated listing page -- without this, only the
margin/radius override below actually reached the page and the banner
rendered with no background, padding, or type styling at all. Unlike
News/Event/Video (flush, square corners, right under their hero), this
page keeps the existing gap above/below the banner and rounded corners
matching the toolbar card below it -- there's no hero band to sit flush
against here, and the gap reads better with this page's own spacing.
--h26-gutter fallback matches msad-2026.css's own 860px breakpoint for
it, in case load order ever puts this page's own --h26-gutter out of
reach. */
body.single-directory_dir_ltg .msad-h26__visibility-banner {
  width: 100%;
  margin: 0 0 20px;
  padding: 5px var(--h26-gutter, 32px);
  background: var(--h26-band);
  color: var(--h26-accent-700);
  font-size: 23px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  border: 1px solid var(--h26-border);
  border-radius: var(--radius-md, 8px);
}

@media (max-width: 860px) {
  body.single-directory_dir_ltg .msad-h26__visibility-banner {
    padding: 5px 24px;
  }
}

/* Admin/editor toolbar -- same bordered-card design as the News/Event/
Video singles (see article-2026.css), reproduced here standalone since
that stylesheet only loads on those three post types, not on this
plugin-templated listing page. No back-link nested inside this row
anymore (see inc/admin-quick-actions-2026.php) -- it's its own line above
this, so this card doesn't need the old align-items/flex-wrap
accommodation for a second, differently-shaped element.

Sits right before "dir-left-col" (the photo's own bordered card) as its
preceding sibling, in the same column, pushing that card down -- same
"first column, above the image" placement as the News/Event/Video
toolbars. Plain margin-bottom is enough here (not nested inside
dir-left-col's own border/shadow, so no need for margin on every side). */
body.single-directory_dir_ltg .msad-h26__admin-actions {
  display: flex;
  gap: 0;
  width: fit-content;
  max-width: none;
  margin: 0 0 20px;
  padding: 0;
  background: #fff;
  border: 1px solid var(--h26-border);
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 4px 14px rgba(15, 25, 52, 0.06);
  overflow: hidden;
}

/* Extra ".msad-h26__admin-actions" ancestor qualifier on every button rule
below isn't just belt-and-suspenders -- this page's own
"body.single-directory_dir_ltg .drts-display--detailed a" rule (further
up this file) sets a blanket link color, and its selector (2 classes + 1
element) outranks a bare ".msad-h26__admin-btn--edit" (2 classes) even
though this block comes later in the file. Adding the container class
brings these to 3 classes so they reliably win. */
body.single-directory_dir_ltg .msad-h26__admin-actions .msad-h26__admin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 110px;
  width: 110px;
  gap: 6px;
  min-height: 52px;
  padding: 0 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--transition-fast, 140ms ease), color var(--transition-fast, 140ms ease);
}

body.single-directory_dir_ltg .msad-h26__admin-actions .msad-h26__admin-btn:first-child {
  border-radius: var(--radius-md, 8px) 0 0 var(--radius-md, 8px);
}

body.single-directory_dir_ltg .msad-h26__admin-actions .msad-h26__admin-btn:last-child {
  border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
}

body.single-directory_dir_ltg .msad-h26__admin-actions .msad-h26__admin-btn i {
  font-size: 15px;
}

body.single-directory_dir_ltg .msad-h26__admin-actions .msad-h26__admin-btn--edit {
  color: var(--h26-sky-700);
}

body.single-directory_dir_ltg .msad-h26__admin-actions .msad-h26__admin-btn--edit:hover,
body.single-directory_dir_ltg .msad-h26__admin-actions .msad-h26__admin-btn--edit:focus-visible {
  background: var(--h26-band);
  color: var(--h26-sky-700);
}

body.single-directory_dir_ltg .msad-h26__admin-actions .msad-h26__admin-btn--unpublish {
  background: transparent;
  color: var(--h26-accent-700);
}

body.single-directory_dir_ltg .msad-h26__admin-actions .msad-h26__admin-btn--unpublish:hover,
body.single-directory_dir_ltg .msad-h26__admin-actions .msad-h26__admin-btn--unpublish:focus-visible {
  background: var(--h26-band);
  color: var(--h26-accent-700);
}

/* Pending listings only -- Approve is the same publish action as the
   toggle above (hidden while pending, so they never show together).
   Decline moves it to Draft, the same effect as Unpublish, so it reuses
   that same amber colour language. */
body.single-directory_dir_ltg .msad-h26__admin-actions .msad-h26__admin-btn--approve {
  background: transparent;
  color: var(--h26-green-700);
}

body.single-directory_dir_ltg .msad-h26__admin-actions .msad-h26__admin-btn--approve:hover,
body.single-directory_dir_ltg .msad-h26__admin-actions .msad-h26__admin-btn--approve:focus-visible {
  background: var(--h26-green-100);
  color: var(--h26-green-700);
}

body.single-directory_dir_ltg .msad-h26__admin-actions .msad-h26__admin-btn--decline {
  background: transparent;
  color: var(--h26-accent-700);
}

body.single-directory_dir_ltg .msad-h26__admin-actions .msad-h26__admin-btn--decline:hover,
body.single-directory_dir_ltg .msad-h26__admin-actions .msad-h26__admin-btn--decline:focus-visible {
  background: var(--h26-band);
  color: var(--h26-accent-700);
}

body.single-directory_dir_ltg .msad-h26__admin-actions .msad-h26__admin-btn--delete {
  background: transparent;
  color: var(--h26-danger);
}

body.single-directory_dir_ltg .msad-h26__admin-actions .msad-h26__admin-btn--delete:hover,
body.single-directory_dir_ltg .msad-h26__admin-actions .msad-h26__admin-btn--delete:focus-visible {
  background: var(--h26-danger-100);
  color: var(--h26-danger-700);
}

@media (max-width: 640px) {
  body.single-directory_dir_ltg .msad-h26__admin-actions {
    flex-wrap: wrap;
    width: 100%;
  }

  body.single-directory_dir_ltg .msad-h26__admin-actions .msad-h26__admin-btn {
    flex: 1 1 50%;
    width: auto;
    border-bottom: 1px solid var(--h26-border);
  }
}

@media (max-width: 991px) {
  body.single-directory_dir_ltg .drts-display--detailed .drts-display-element-column-9,
  body.single-directory_dir_ltg .drts-display--detailed .drts-display-element-column-10 {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.single-directory_dir_ltg .drts-display--detailed .dir-right-col {
    position: static;
  }
}

@media (max-width: 767px) {
  body.single-directory_dir_ltg .drts-display--detailed {
    margin-block: 34px 52px;
  }

  body.single-directory_dir_ltg .drts-display--detailed .directory-listing-detailed-info-container,
  body.single-directory_dir_ltg .drts-display--detailed .dir-right-col {
    padding: 20px;
  }

  body.single-directory_dir_ltg .drts-display--detailed .drts-entity-field {
    display: block;
  }

  body.single-directory_dir_ltg .drts-display--detailed .drts-entity-field-label,
  body.single-directory_dir_ltg .drts-display--detailed .drts-entity-field-value {
    width: 100%;
    text-align: left !important;
  }
}