/* ExpoFolio on the website. Fonts and colours come from the theme. */

.ef-directory,
.ef-detail,
.ef-news
{
   --ef-accent: var(--the7-accent-color, var(--e-global-color-accent, #333));
   --ef-line: rgba(0, 0, 0, 0.12);
}

/* The theme's featured image: this page already shows the logo or the news image. */
.single-ef_exhibitor .post-thumbnail,
.single-ef_news .post-thumbnail
{
   display: none;
}

/* Overview */

.ef-directory__search
{
   align-items: stretch;
   display: flex;
   gap: 8px;
   margin-bottom: 24px;
   max-width: 400px;
}

/* Three classes: themes give fields a margin, which would make the button taller. */
.ef-directory .ef-directory__search input[type="search"]
{
   box-sizing: border-box;
   flex: 1;
   margin: 0;
   min-height: 40px;
   min-width: 0;
}

/* Three classes: themes give buttons their own fixed height and borders. */
.ef-directory .ef-directory__search button
{
   background: var(--ef-accent);
   border: 0;
   border-radius: var(--ef-radius, 8px);
   color: #fff;
   cursor: pointer;
   flex: none;
   font: inherit;
   height: auto;
   line-height: 1;
   margin: 0;
   min-height: 0;
   padding: 0 20px;
}

.ef-directory .ef-directory__search button:hover,
.ef-directory .ef-directory__search button:focus-visible
{
   opacity: 0.85;
}

.ef-directory__grid
{
   display: grid;
   gap: var(--ef-card-gap, 24px);
   grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.ef-card
{
   border: var(--ef-card-border-width, 1px) solid var(--ef-line);
   border-radius: var(--ef-radius, 8px);
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   min-width: 0;
   padding: 16px;
}

.ef-directory--no-border .ef-card
{
   border-color: transparent;
}

.ef-directory--plain .ef-card
{
   border: 0;
   padding: 0;
}

.ef-card__logo
{
   align-items: center;
   display: flex;
   height: 120px;
   justify-content: flex-start;
   margin-bottom: 12px;
}

/* Landscape, portrait and round logos all fit without cropping. */
.ef-card__logo img
{
   height: auto;
   max-height: 100%;
   max-width: 100%;
   object-fit: contain;
   width: auto;
}

.ef-card__logo img[src$=".svg"]
{
   height: 100%;
}

/* Long names run over several lines, also without spaces. */
.ef-card__name
{
   font-size: 1.05em;
   margin: 0;
   overflow-wrap: anywhere;
}

/* A website stays on one line and is cut off when it does not fit. */
.ef-card__website
{
   font-size: 0.9em;
   margin: 2px 0 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.ef-card__extra
{
   font-size: 0.9em;
   margin: 4px 0 0;
   overflow-wrap: anywhere;
}

.ef-directory--logo-below .ef-card__logo
{
   margin: auto 0 0;
   order: 1;
   padding-top: 12px;
}

.ef-directory--center .ef-card
{
   text-align: center;
}

.ef-directory--center .ef-card__logo
{
   justify-content: center;
}

/* Page numbers. Doubled classes: themes style every link in the content. */
.ef-directory__pages.ef-directory__pages,
.ef-news__pages.ef-news__pages
{
   align-items: center;
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   justify-content: center;
   margin-top: 32px;
}

.ef-directory__pages.ef-directory__pages a,
.ef-news__pages.ef-news__pages a,
.ef-pages__current.ef-pages__current
{
   border: 1px solid var(--ef-line);
   border-radius: var(--ef-radius, 8px);
   box-sizing: border-box;
   line-height: 1.4;
   min-width: 2.2em;
   padding: 6px 8px;
   text-align: center;
   text-decoration: none;
}

.ef-directory__pages.ef-directory__pages a:hover,
.ef-directory__pages.ef-directory__pages a:focus-visible,
.ef-news__pages.ef-news__pages a:hover,
.ef-news__pages.ef-news__pages a:focus-visible
{
   border-color: var(--ef-accent);
}

.ef-pages__current.ef-pages__current
{
   background: var(--ef-accent);
   border-color: var(--ef-accent);
   color: #fff;
}

.ef-pages__gap
{
   opacity: 0.6;
}

/*
 * Detail. Margins between the parts belong to [exhibitor]. With separate
 * shortcodes the page itself arranges them, so they stay out of the way there.
 */

/* The padding is for the theme's own template: on a chosen page the page builder decides. */
.single-ef_exhibitor .ef-detail
{
   padding: 48px 0;
}

.ef-detail .ef-detail__banner
{
   margin-bottom: var(--ef-gap-banner, 32px);
}

/* Doubled classes here and below: Elementor resets the corners of all images. */
.ef-detail__banner.ef-detail__banner img
{
   border-radius: var(--ef-radius, 8px);
   display: block;
   height: auto;
   max-height: 360px;
   object-fit: cover;
   width: 100%;
}

.ef-detail__columns
{
   display: grid;
   gap: var(--ef-gap-columns, 40px);
   grid-template-columns: 280px minmax(0, 1fr);
}

.ef-detail__columns--single
{
   grid-template-columns: minmax(0, 1fr);
}

.ef-detail .ef-detail__logo
{
   margin-bottom: var(--ef-gap-logo, 24px);
}

.ef-detail__logo img
{
   display: block;
   height: auto;
   max-height: 180px;
   max-width: 100%;
   object-fit: contain;
   width: auto;
}

.ef-detail__address
{
   font-style: normal;
   margin-bottom: 16px;
}

/* Doubled class: themes style lists with selectors like ".content ul". */
ul.ef-detail__contact.ef-detail__contact,
ul.ef-detail__social.ef-detail__social
{
   list-style: none;
   margin: 0 0 16px;
   padding: 0;
}

ul.ef-detail__contact.ef-detail__contact > li
{
   list-style: none;
   margin: 0 0 4px;
   overflow-wrap: anywhere;
   padding: 0;
}

.ef-detail__social
{
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
}

ul.ef-detail__social.ef-detail__social > li
{
   list-style: none;
   margin: 0;
   padding: 0;
}

/* No extra room below the last item, so a coloured info block looks even. */
.ef-detail .ef-detail__side > :last-child,
.ef-detail__extras dd:last-child
{
   margin-bottom: 0;
}

.ef-detail__social a
{
   display: block;
   line-height: 0;
}

.ef-detail__social svg
{
   height: 22px;
   width: 22px;
}

.ef-detail__extras
{
   margin: 0 0 16px;
}

.ef-detail__extras dt
{
   font-weight: 600;
}

.ef-detail__extras dd
{
   margin: 0 0 8px;
}

.ef-detail__gallery
{
   display: grid;
   gap: 12px;
   grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.ef-detail .ef-detail__gallery
{
   margin-top: var(--ef-gap-gallery, 32px);
}

.ef-detail__gallery a
{
   display: block;
   line-height: 0;
}

.ef-detail__gallery.ef-detail__gallery img
{
   aspect-ratio: 4 / 3;
   border-radius: var(--ef-radius, 8px);
   height: auto;
   object-fit: cover;
   width: 100%;
}

.ef-detail .ef-detail__back
{
   margin-top: var(--ef-gap-back, 32px);
}

/* News */

.ef-detail .ef-news
{
   margin-top: var(--ef-gap-news, 32px);
}

/* After the photos more room, so the news reads as a new part of the page. */
.ef-detail .ef-detail__gallery + .ef-news
{
   margin-top: var(--ef-gap-news-gallery, 96px);
}

.ef-news__heading
{
   margin: 0 0 16px;
}

.ef-news__grid
{
   display: grid;
   gap: var(--ef-news-gap, 24px);
   grid-template-columns: repeat(var(--ef-news-columns, 3), minmax(0, 1fr));
}

.ef-news-card
{
   border: var(--ef-news-border-width, 1px) solid var(--ef-line);
   border-radius: var(--ef-radius, 8px);
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   min-width: 0;
   overflow: hidden;
}

.ef-news--no-border .ef-news-card
{
   border-color: transparent;
}

.ef-news--center .ef-news-card
{
   text-align: center;
}

.ef-news-card__image
{
   display: block;
   line-height: 0;
}

/* All images in the same format, so that a row of cards stays even. */
.ef-news-card__image img,
.ef-news-item__image img
{
   aspect-ratio: 16 / 9;
   display: block;
   height: auto;
   object-fit: cover;
   width: 100%;
}

.ef-news-card__body
{
   display: flex;
   flex: 1;
   flex-direction: column;
   padding: 16px;
}

.ef-news-card__meta
{
   font-size: 0.85em;
   margin: 0 0 4px;
   opacity: 0.75;
}

.ef-news-card__title
{
   font-size: 1.05em;
   margin: 0 0 8px;
   overflow-wrap: anywhere;
}

.ef-news-card__excerpt
{
   margin: 0;
   overflow-wrap: anywhere;
}

/* At the bottom of the card, so the links in a row are level. */
.ef-news-card__more
{
   margin: auto 0 0;
   padding-top: 12px;
}

.ef-news-item__image
{
   margin-bottom: 24px;
}

.ef-news-item__image.ef-news-item__image img
{
   border-radius: var(--ef-radius, 8px);
}

.ef-news-item__date
{
   font-size: 0.9em;
   margin: 0 0 12px;
   opacity: 0.75;
}

/* Doubled classes: themes give every paragraph its own margins. */
.ef-news-item__exhibitor.ef-news-item__exhibitor
{
   margin: 48px 0 0;
}

.ef-news-item__back.ef-news-item__back
{
   margin: 12px 0 0;
}

/* The padding is for the theme's own template: on a chosen page the page builder decides. */
.single-ef_news .ef-news-item
{
   padding: 32px 0;
}

/* Lightbox. Doubled classes: themes reset the margins and sizes of many elements. */

.ef-lightbox-open
{
   overflow: hidden;
}

dialog.ef-lightbox.ef-lightbox
{
   background: rgba(0, 0, 0, 0.92);
   border: 0;
   box-sizing: border-box;
   height: 100vh;
   height: 100dvh;
   left: 0;
   margin: 0;
   max-height: none;
   max-width: none;
   overflow: hidden;
   padding: 0;
   position: fixed;
   top: 0;
   width: 100vw;
}

dialog.ef-lightbox.ef-lightbox[open]
{
   align-items: center;
   display: flex;
   justify-content: center;
}

dialog.ef-lightbox.ef-lightbox::backdrop
{
   background: transparent;
}

img.ef-lightbox__image.ef-lightbox__image
{
   border-radius: var(--ef-radius, 8px);
   cursor: pointer;
   display: block;
   height: auto;
   max-height: calc(100vh - 96px);
   max-height: calc(100dvh - 96px);
   max-width: calc(100vw - 144px);
   object-fit: contain;
   width: auto;
}

button.ef-lightbox__button.ef-lightbox__button
{
   align-items: center;
   background: rgba(0, 0, 0, 0.55);
   border: 0;
   border-radius: 50%;
   box-shadow: none;
   color: #fff;
   cursor: pointer;
   display: flex;
   font-size: 30px;
   height: 44px;
   justify-content: center;
   line-height: 1;
   margin: 0;
   min-height: 0;
   min-width: 0;
   padding: 0;
   position: absolute;
   width: 44px;
}

button.ef-lightbox__button.ef-lightbox__button:hover,
button.ef-lightbox__button.ef-lightbox__button:focus-visible
{
   background: rgba(255, 255, 255, 0.25);
}

button.ef-lightbox__button--close.ef-lightbox__button--close
{
   right: 16px;
   top: 16px;
}

button.ef-lightbox__button--previous.ef-lightbox__button--previous
{
   left: 16px;
   top: calc(50% - 22px);
}

button.ef-lightbox__button--next.ef-lightbox__button--next
{
   right: 16px;
   top: calc(50% - 22px);
}

p.ef-lightbox__counter.ef-lightbox__counter
{
   bottom: 12px;
   color: #fff;
   font-size: 14px;
   left: 0;
   line-height: 24px;
   margin: 0;
   pointer-events: none;
   position: absolute;
   right: 0;
   text-align: center;
}

@media (max-width: 782px)
{
   .ef-detail__columns
   {
      gap: min(var(--ef-gap-columns, 40px), 24px);
      grid-template-columns: minmax(0, 1fr);
   }

   .ef-news .ef-news__grid
   {
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
   }

   /* On a phone the photo uses the full width, and the arrows move out of its way. */
   img.ef-lightbox__image.ef-lightbox__image
   {
      max-width: 100vw;
   }

   button.ef-lightbox__button--previous.ef-lightbox__button--previous,
   button.ef-lightbox__button--next.ef-lightbox__button--next
   {
      bottom: 6px;
      top: auto;
   }
}