/* =====================================================================
 * Love Local Long Island — site-wide overrides
 *
 * Loaded on every page. Kept separate from style.css because that file
 * is compiled from SASS and a rebuild would discard anything added to it.
 * Page-specific rules live in submit-form.css instead.
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * Copyright and legal links in the bottom footer band
 *
 * The markup lives in site-credit.php. A small inline script there moves
 * #site-credit below .footer-bottom-bar, so these land in the darker
 * strip at the very bottom of the page. Copyright sits flush left, the
 * legal links flush right; on narrow screens they stack and centre.
 * ------------------------------------------------------------------ */

/* The parent theme prints its own copyright line in .footer-bottom-bar.
 * site-credit.php prints it now, so hide the parent's copy. */
.footer-bottom-bar .footer-about-company {
  display: none;
}

#site-credit .llli-credit-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 22px;
  padding: 14px 0;
}

#site-credit .llli-copyright {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #96a0a9;
  text-align: left;
}

#site-credit .llli-legal-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: right;
}

@media (max-width: 600px) {
  #site-credit .llli-credit-row {
    flex-direction: column;
    justify-content: center;
  }

  #site-credit .llli-copyright,
  #site-credit .llli-legal-menu {
    justify-content: center;
    text-align: center;
  }
}

#site-credit .llli-legal-menu li {
  margin: 0;
  padding: 0;
  float: none;
  list-style: none;
}

#site-credit .llli-legal-menu a {
  display: inline-block;
  font-size: 13px;
  line-height: 1.5;
  color: #96a0a9;
  text-decoration: none;
}

#site-credit .llli-legal-menu a:hover,
#site-credit .llli-legal-menu a:focus {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------------------------------------------------------------------
 * "Claimed" check on listing cards (homepage, category and search feeds)
 *
 * ListingPro draws it blue. Green #2e8b57 matches the Claimed marker on
 * the profile pages. Same badge markup everywhere: span.verified > i.
 * ------------------------------------------------------------------ */

/* !important because the theme sets this blue in several places with
   long selectors (main.css, the theme-colour CSS), per card style. */
span.verified,
.lp-listing .lp-listing-bottom h4 a span.verified, /* search/category cards: main-new.css uses !important here */
.lp-activity h4 a span.verified {
  background-color: #2e8b57 !important;
}

/* ---------------------------------------------------------------------
 * Featured Business ribbon. One component: the profile page badge row
 * and the Featured cards (llli_featured_ribbon_html).
 * The border is an outer coral layer with 1px of padding: a CSS border
 * would not follow the notch cut by clip-path.
 * ------------------------------------------------------------------ */

.llli-ribbon {
  align-self: flex-start;
  display: inline-flex;
  flex: none;
  background: #FF4D30;
  padding: 1px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 50%, 100% 100%, 0 100%);
}
.llli-ribbon .llli-ribbon-inner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FFEDE9;
  color: #353535;
  font: 600 14px/1 'Open Sans', Helvetica, Arial, sans-serif;
  font-style: normal;
  padding: 7px 22px 7px 10px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 8.5px) 50%, 100% 100%, 0 100%);
}
.llli-ribbon svg {
  flex: none;
}

/* ---------------------------------------------------------------------
 * Featured Business cards (design_handoff_featured_cards_refresh)
 *
 * Markup: featured-placements.php. Two layouts from one markup:
 *   .llli-fc--grid  image on top (homepage grid; every card on phones)
 *   .llli-fc--wide  image left ~38%, details right, from 768px up
 *                   (category, tag and location pages, blog posts)
 * The Invitation (open slot) card keeps its original design, below.
 *
 * Every text element sets its own colour and font, because the theme
 * colours all spans #404040 and sets Quicksand on some headings.
 * ------------------------------------------------------------------ */

.llli-fc-slot {
  display: grid;
  gap: 16px;
  margin: 0 0 24px;
}
/* Category, tag and location pages: a light rule between the featured
   slot and the free listings below it. */
.llli-fc-slot--archive {
  margin: 0 0 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid #e5e5e5;
}
.llli-fc-slot--post {
  margin: 28px 0;
}

article.llli-fc {
  position: relative;
  box-sizing: border-box;
  display: flex;
  margin: 0;
  padding: 0;
  float: none;
  width: auto;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  color: #353535;
  text-align: left;
}
article.llli-fc * {
  box-sizing: border-box;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  font-style: normal;
}
article.llli-fc a:focus-visible {
  outline: 3px solid #353535;
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- Populated card: grid layout, the default (and phones) ---------- */

article.llli-fc--populated {
  flex-direction: column;
  height: 100%;
  border: 2px solid #FF4D30;
}
article.llli-fc--populated .llli-fc-media {
  position: relative;
  background: #f4eeea;
  overflow: hidden;
}
article.llli-fc--populated .llli-fc-imglink {
  display: block;
}
article.llli-fc--populated .llli-fc-imglink img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  aspect-ratio: 372 / 240;
  object-fit: cover;
}
article.llli-fc--populated .llli-fc-noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 372 / 240;
  background: repeating-linear-gradient(135deg, #f6efea 0 10px, #efe5df 10px 20px);
  font: 600 12px ui-monospace, Menlo, monospace;
  letter-spacing: .04em;
  color: #666666;
}
article.llli-fc .llli-fc-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 5px 9px;
  border-radius: 4px;
  background: #353535;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .1em;
}

/* Preview: the free cards' quick-view, over a dark fade at the bottom.
   Featured cards only: the Invitation card has no photo or Preview. */
article.llli-fc--populated .llli-fc-media::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .75));
  pointer-events: none;
}
article.llli-fc a.llli-fc-preview {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-size: 15px;
  line-height: 1.2;
  text-decoration: none;
}
article.llli-fc a.llli-fc-preview:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

article.llli-fc--populated .llli-fc-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 20px 20px;
}
article.llli-fc h3.llli-fc-title {
  margin: 2px 0 0;
  padding: 0;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.25;
  color: #353535;
  /* names wrap in full, never clipped with an ellipsis */
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}
article.llli-fc h3.llli-fc-title a {
  color: #353535;
  text-decoration: none;
}
article.llli-fc h3.llli-fc-title a:hover {
  color: #d3341a;
}
/* The last word of the name and the claimed check travel together, so
   the check always sits to the right of the name. */
article.llli-fc .llli-fc-nowrap {
  white-space: nowrap;
  color: inherit; /* the theme colours spans grey */
}
article.llli-fc .llli-fc-check {
  display: inline-block;
  margin-left: 8px;
  vertical-align: -2px;
}
article.llli-fc .llli-fc-cat {
  align-self: flex-start;
  padding: 5px 10px;
  border-radius: 3px;
  background: #FF4D30;
  color: #fff;
  font-size: 14px;
  line-height: 1.3;
}
article.llli-fc p.llli-fc-desc {
  margin: 2px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: #555555;
  white-space: normal;
  overflow: visible;
}
article.llli-fc a.llli-fc-cta {
  align-self: flex-start;
  margin: 4px 0 16px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: #d3341a;
  text-decoration: underline;
  text-underline-offset: 3px;
}
article.llli-fc a.llli-fc-cta:hover {
  color: #a82812;
}

/* Footer: location left, Open Now / Closed right, as on the free cards */
article.llli-fc .llli-fc-foot {
  margin: auto -20px -20px;
  padding: 14px 20px;
  border-top: 1px solid #ece4df;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  line-height: 1.3;
  color: #555555;
}
article.llli-fc .llli-fc-loc,
article.llli-fc .llli-fc-status {
  display: inline-flex;
  align-items: center;
  font-size: 15px;
}
article.llli-fc .llli-fc-loc {
  gap: 6px;
  color: #555555;
}
article.llli-fc .llli-fc-status {
  gap: 5px;
  margin-left: auto;
}
article.llli-fc .llli-fc-status--open {
  color: #3c9a2e;
}
article.llli-fc .llli-fc-status--closed {
  color: #b3321c;
}
article.llli-fc .llli-fc-loc svg,
article.llli-fc .llli-fc-status svg {
  flex: none;
}

/* Inside blog posts the theme colours every link in the article coral
   (body.single … .blog-content a); these restate the card's own colours
   with enough weight to win there. */
body.single .blog-content article.llli-fc h3.llli-fc-title a {
  color: #353535;
  text-decoration: none;
}
body.single .blog-content article.llli-fc h3.llli-fc-title a:hover {
  color: #d3341a;
}
body.single .blog-content article.llli-fc a.llli-fc-cta {
  color: #d3341a;
}
body.single .blog-content article.llli-fc a.llli-fc-cta:hover {
  color: #a82812;
}
body.single .blog-content article.llli-fc a.llli-fc-preview {
  color: #fff;
  text-decoration: none;
}
body.single .blog-content article.llli-fc a.llli-fc-btn {
  color: #fff;
  text-decoration: none;
}

/* Preview, iPad size and down: the theme's preview popup does not fit
   small screens (its map spills out of the box), so the button is
   hidden there, on featured and free cards alike. Tapping the card
   opens the full profile instead. */
@media (max-width: 1024px) {
  article.llli-fc a.llli-fc-preview,
  article.llli-fc--populated .llli-fc-media::after,
  a.qickpopup {
    display: none !important;
  }
}

/* --- Populated card: wide layout, tablets and up -------------------- */

@media (min-width: 768px) {
  article.llli-fc--wide {
    flex-direction: row;
    flex-wrap: wrap;
  }
  article.llli-fc--wide .llli-fc-media {
    flex: 1 1 38%;
    min-width: 260px;
    min-height: 190px;
  }
  article.llli-fc--wide .llli-fc-imglink {
    position: absolute;
    inset: 0;
  }
  article.llli-fc--wide .llli-fc-imglink img,
  article.llli-fc--wide .llli-fc-noimg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }
  article.llli-fc--wide .llli-fc-body {
    flex: 1 1 62%;
    min-width: 280px;
    padding: 20px 22px 0;
  }
  article.llli-fc--wide .llli-fc-foot {
    margin: auto -22px 0;
    padding: 14px 22px;
  }
  /* No footer: keep a little room under the profile link. */
  article.llli-fc--wide .llli-fc-cta:last-child {
    margin-bottom: 22px;
  }
}

/* --- Invitation (open slot): original design, unchanged ------------- */

article.llli-fc--invite {
  flex-wrap: wrap;
  border: 1px solid #ecd6cc;
  box-shadow: 0 1px 0 #f3e6df, 0 8px 24px rgba(196, 67, 47, .07);
}
article.llli-fc--invite .llli-fc-media--invite {
  flex: 1 1 260px;
  min-height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: repeating-linear-gradient(135deg, #fff4ee 0 10px, #ffece2 10px 20px);
}
article.llli-fc .llli-fc-dashed {
  width: 100%;
  height: 100%;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  border: 2px dashed #e8a08f;
  border-radius: 8px;
  text-align: center;
}
article.llli-fc .llli-fc-dashed span {
  font-size: 12px;
  color: #8a5a4e;
}
article.llli-fc .llli-fc-dashed span.llli-fc-mono {
  font: 600 12px/1.3 ui-monospace, Menlo, monospace;
  letter-spacing: .04em;
  color: #8a3a2a;
}
article.llli-fc--invite .llli-fc-body--invite {
  flex: 1.4 1 280px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 24px 24px;
}
article.llli-fc .llli-fc-pill {
  align-self: flex-start;
  padding: 5px 9px;
  border-radius: 4px;
  background: #ffece8;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .12em;
  color: #d3341a;
}
article.llli-fc--invite h3.llli-fc-title {
  margin: 0;
  font-size: 22px;
}
article.llli-fc--invite p.llli-fc-desc {
  margin: 0;
}
article.llli-fc .llli-fc-invite-foot {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}
article.llli-fc .llli-fc-price {
  font-size: 20px;
  font-weight: 800;
  color: #353535;
}
article.llli-fc .llli-fc-price span {
  font-size: 14px;
  font-weight: 600;
  color: #666666;
}
article.llli-fc a.llli-fc-btn {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 6px;
  background: #ff4d30;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}
article.llli-fc a.llli-fc-btn:hover {
  background: #d3341a;
  color: #fff;
}

/* Homepage "Featured Local Businesses" grid. The row the featured cards
   are added to is laid out as a CSS grid, not the theme's floats, so a
   hidden duplicate card leaves no hole. 3 / 2 / 1 columns, matching the
   theme's col-md-4 col-sm-6. Each cell keeps its own 15px gutter. */
.llli-fc-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
}
/* The row also has .clearfix, whose ::before/::after would each take a
   grid cell (Bootstrap loads after this file, hence the doubled class). */
.llli-fc-grid.llli-fc-grid::before,
.llli-fc-grid.llli-fc-grid::after {
  display: none;
  content: none;
}
/* The theme drops an empty row-break div after every third card; in a
   grid it would take a cell. */
.llli-fc-grid > .lp-archive-clearfix {
  display: none;
}
.llli-fc-grid > * {
  float: none;
  clear: none;
  /* !important: Bootstrap's col-md-4 / col-sm-6 widths (33% / 50%) load
     after this file and would shrink each card to a third of its cell. */
  width: auto !important;
  max-width: none;
}
@media (min-width: 768px) {
  .llli-fc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .llli-fc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.llli-fc-cell {
  margin-bottom: 30px;
}

/* ---------------------------------------------------------------------
 * Promo library: Inline and Full-width promos (promo-library.php)
 * Values from PromoInline.dc.html and PromoFullWidth.dc.html. The
 * Invitation promo uses the Featured card styles above.
 * Text sets its own colour and font: the theme colours spans and sets
 * Quicksand on headings, and blog posts colour every link coral.
 * ------------------------------------------------------------------ */

.llli-promo-slot {
  margin: 28px 0;
}
.llli-promo-slot--bottom {
  margin: 32px 0 8px;
}
.llli-promo,
.llli-promo * {
  box-sizing: border-box;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  font-style: normal;
}
.llli-promo .llli-promo-bullets {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}
.llli-promo .llli-promo-bullets li {
  display: flex;
  align-items: baseline;
  margin: 0;
  padding: 0;
  list-style: none;
}
.llli-promo .llli-promo-bullets li::before {
  content: "";
  flex: none;
  border-radius: 2px;
  background: #ff4d30;
  transform: translateY(-1px);
}
.llli-promo .llli-promo-price {
  font-weight: 800;
  color: #353535;
}
.llli-promo .llli-promo-price span {
  font-weight: 600;
  color: #666666;
}
.llli-promo a.llli-promo-btn,
body.single .blog-content .llli-promo a.llli-promo-btn {
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
}
.llli-promo a.llli-promo-btn:focus-visible {
  outline: 3px solid #353535;
  outline-offset: 3px;
}

/* Inline (article box) */
aside.llli-promo-inline {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 26px clamp(18px, 4vw, 32px);
  background: #fff7f3;
  border: 1px solid #f0d6cb;
  border-radius: 10px;
  color: #353535;
}
.llli-promo-inline .llli-promo-eyebrow {
  justify-self: start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: #d3341a;
}
.llli-promo-inline h3.llli-promo-title {
  margin: 0;
  padding: 0;
  font-size: clamp(21px, 2.6vw, 26px);
  font-weight: 800;
  line-height: 1.25;
  color: #353535;
}
.llli-promo-inline p.llli-promo-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #444444;
}
.llli-promo-inline .llli-promo-bullets {
  margin-top: 4px;
  gap: 8px;
}
.llli-promo-inline .llli-promo-bullets li {
  gap: 10px;
  font-size: 15px;
  line-height: 1.45;
  color: #353535;
}
.llli-promo-inline .llli-promo-bullets li::before {
  width: 8px;
  height: 8px;
}
.llli-promo-inline .llli-promo-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid #f0d6cb;
}
.llli-promo-inline .llli-promo-price {
  font-size: 22px;
}
.llli-promo-inline .llli-promo-price span {
  font-size: 14px;
}
.llli-promo-inline .llli-promo-note {
  flex: 1 1 180px;
  font-size: 14px;
  color: #555555;
}
.llli-promo-inline a.llli-promo-btn,
body.single .blog-content .llli-promo-inline a.llli-promo-btn {
  min-height: 46px;
  padding: 0 20px;
  background: #ff4d30;
  font-size: 15px;
}
.llli-promo-inline a.llli-promo-btn:hover {
  background: #d3341a;
  color: #fff;
}

/* Full-width (band) */
section.llli-promo-full {
  margin: 0;
  background: #e9462d;
  color: #fff;
}
/* Inside an article column: break out to the full width of the window. */
section.llli-promo-full--bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.llli-promo-full .llli-promo-full-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(44px, 6vw, 72px) 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px 56px;
}
.llli-promo-full .llli-promo-full-copy {
  flex: 1.2 1 340px;
  display: grid;
  gap: 14px;
}
.llli-promo-full .llli-promo-eyebrow {
  justify-self: start;
  padding: 6px 10px;
  border-radius: 4px;
  background: #fff;
  color: #d3341a;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
}
.llli-promo-full h2.llli-promo-title {
  margin: 0;
  padding: 0;
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 800;
  line-height: 1.12;
  color: #fff;
}
.llli-promo-full p.llli-promo-text {
  max-width: 540px;
  margin: 0;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.6;
  color: #fff;
}
.llli-promo-full p.llli-promo-note {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}
.llli-promo-full .llli-promo-full-panel {
  flex: 1 1 320px;
  display: grid;
  gap: 16px;
  padding: 26px clamp(20px, 3vw, 30px);
  border-radius: 12px;
  background: #fff;
  color: #353535;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
}
.llli-promo-full .llli-promo-bullets {
  gap: 12px;
}
.llli-promo-full .llli-promo-bullets li {
  gap: 12px;
  font-size: 16px;
  line-height: 1.45;
  color: #353535;
}
.llli-promo-full .llli-promo-bullets li::before {
  width: 9px;
  height: 9px;
}
.llli-promo-full .llli-promo-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid #eeeeee;
}
.llli-promo-full .llli-promo-price {
  font-size: 30px;
}
.llli-promo-full .llli-promo-price span {
  font-size: 15px;
}
.llli-promo-full a.llli-promo-btn,
body.single .blog-content .llli-promo-full a.llli-promo-btn {
  min-height: 50px;
  padding: 0 24px;
  background: #353535;
  font-size: 16px;
}
.llli-promo-full a.llli-promo-btn:hover {
  background: #000;
  color: #fff;
}
.llli-promo-full a.llli-promo-btn:focus-visible {
  outline-color: #fff;
}