/* ==========================================================================
   LMPS_Overrides.css
   Site: LocalMomAndPopShops.com
   Version: 2025-09-28.8
   Notes:
   - This file loads after parent & child styles; keep all custom rules here.
   - Rotator: update --count to match the number of <li> towns (default set to 12).
   - Page 527 rules scope layout/spacing while the page is WIP.
   ========================================================================== */

/* ========== 00. Header / Logo quick tweak ========== */
.site-header .custom-logo-link img { height: 100px; width: auto; }

/* ========== 10. Listing display utilities (inline labels/values) ========== */
.drts-display--detailed .lmps-inline .drts-entity-field-label,
.drts-display--detailed .lmps-inline .drts-entity-field-value {
  display: inline;
  margin-right: 6px;
  vertical-align: baseline;
}
.drts-display--detailed .lmps-inline { line-height: 1.3; margin-bottom: 6px; }
.drts-display--detailed .lmps-inline * { display: inline; }

/* ========== 20. Photos / sliders ========== */
.lmps-photos img { display: block; width: 100%; }
@media (min-width: 641px) {
  .lmps-photos img { height: 340px; object-fit: cover; }
}
@media (max-width: 640px) {
  .lmps-photos .slick-list,
  .lmps-photos .slick-slide,
  .lmps-photos .slick-track { height: auto !important; }
  .lmps-photos img { height: auto !important; object-fit: contain; }
}
.drts-slider-photos-photo-no-padding { background-color: #fff; }

/* ========== 30. Widgets tightening (hours blocks, etc.) ========== */
.widget-area .widget { margin-bottom: 10px !important; line-height: .9 !important; }
.widget-area .widget p,
.widget-area .widget div,
.widget-area .widget span { margin-bottom: 5px !important; line-height: 1.4; }

.widget-area .widget .drts-entity-field-item { margin-bottom: 2px !important; line-height: 1.2; }
.widget-area .widget .drts-entity-field-label,
.widget-area .widget .drts-entity-field-value { margin-bottom: 2px !important; padding-bottom: 0; }

.widget-area .drts-entity-hours .drts-entity-field-item { margin-bottom: 1px !important; }
.widget-area .widget tr { margin: 0 !important; padding: 0 !important; }
.widget-area .widget td { padding-top: 2px !important; padding-bottom: 2px !important; margin: 0 !important; line-height: 1.1 !important; }

.widget-area .drts-entity-field-hours tr,
.widget-area .drts-entity-field-hours td { margin: 0 !important; padding: 1px 0 !important; }
.widget-area .widget .drts-entity-field-item { margin-bottom: -2px !important; padding-bottom: 0 !important; }
.widget-area .widget tr,
.widget-area .widget td { border-spacing: 0 !important; border-collapse: collapse !important; margin: 0 !important; padding: 0 2px !important; }
.widget-area .widget .drts-entity-field-item::after,
.widget-area .widget tr::after { display: none !important; }

/* ========== 40. Services showcase card group ========== */
.lmps-services-showcase { margin: 20px 0; padding: 20px; background: #f9f9f9; border-radius: 8px; border: 1px solid #e5e5e5; }
.lmps-services-showcase h2 { margin-top: 0; margin-bottom: 15px; color: #333; font-size: 1.4em; font-weight: 700; }
.lmps-services-showcase h3 { margin-top: 0; margin-bottom: 15px; color: #333; font-size: 1.2em; }
.service-item { background: #fff; padding: 15px; margin-bottom: 12px; border-radius: 6px; border: 1px solid #ddd; box-shadow: 0 2px 4px rgba(0,0,0,.05); }
.service-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.service-name { font-weight: 700; color: #333; font-size: 1.1em; }
.service-price { color: #2c5aa0; font-weight: 600; background: #e3f2fd; padding: 4px 8px; border-radius: 4px; font-size: .95em; }
.service-desc { margin: 0; color: #666; line-height: 1.4; }

/* ========== 50. Page-specific small tweaks (keep if needed) ========== */
.page-id-266 h1,
.page-id-266 h2,
.page-id-266 h3 { text-align: center; }
.page-id-266 h2 { font-weight: 700; }

/* ==========================================================================
   60. HERO + ROTATOR (base)
   - Update the rotator count when you add/remove towns (default 12).
   ========================================================================== */
.lmps-hero { position: relative; aspect-ratio: 16/9; overflow: hidden; } /* height is constrained per-breakpoint below */
.lmps-hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Overlay box (lower-left) */
.lmps-hero-overlay{
  position: absolute; left: 2.5%; bottom: 4%; z-index: 20; color: #fff;
  display: flex; flex-direction: column; gap: .55rem;
  padding: .9rem 1.1rem; max-width: min(560px, 92vw);
  background: linear-gradient(90deg, rgba(0,0,0,.60), rgba(0,0,0,.34) 55%, transparent);
  border-radius: .75rem;
}

/* Heading: stacked lines, white */
.lmps-hero-h1 { margin: 0; line-height: 1.08; font-weight: 800; }
.lmps-hero-h1 .lmps-line1,
.lmps-hero-h1 .lmps-line2 { display: block; color: #fff; }
/* Optional support if backgrounds are very bright */
.lmps-hero-h1 span { text-shadow: 0 2px 8px rgba(0,0,0,.35); }

/* Rotator (CSS-only) */
.lmps-rotator { display: flex; align-items: center; gap: .15rem; font-weight: 700;
  font-size: clamp(1.05rem, 1.2vw + .6rem, 1.35rem); }

.lmps-rotator-viewport{
  --item-h: 1.6em;     /* line height of each item */
  --count: 12;         /* number of <li> towns — UPDATE if you change the list */
  --duration: 24s;     /* ~2s per town: count * 2 */
  height: var(--item-h); overflow: hidden; display: inline-block;
}
.lmps-rotator-list{
  margin: 0; padding: 0; list-style: none; line-height: var(--item-h);
  animation: lmps-rotate var(--duration) steps(var(--count)) infinite;
  will-change: transform;
}
.lmps-rotator-list li { white-space: nowrap; }
.lmps-rotator-viewport:hover .lmps-rotator-list { animation-play-state: paused; }
@keyframes lmps-rotate { to { transform: translateY(calc(var(--item-h) * var(--count) * -1)); } }

/* CTA button */
.lmps-cta{
  align-self: flex-start; margin-top: .25rem; padding: .65rem 1.05rem;
  background: #fff; color: #111; text-decoration: none; font-weight: 800;
  border-radius: .6rem; box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.lmps-cta:hover { transform: translateY(-1px); }

/* ==========================================================================
   61. HERO height/size by breakpoint (phones → tablets → desktops)
   ========================================================================== */

/* Phones (pre-existing mobile compaction + width caps) */
@media (max-width: 720px){
  .lmps-hero-overlay{ max-width: 72%; }
  .lmps-hero-h1 .lmps-line1{ font-size: clamp(1.1rem, 3.2vw + .5rem, 1.35rem); }
  .lmps-hero-h1 .lmps-line2{ font-size: clamp(1.2rem, 3.5vw + .5rem, 1.45rem); }
  .lmps-rotator{ font-size: clamp(1rem, 3.6vw + .45rem, 1.2rem); }
  .lmps-cta{ padding: .45rem .7rem; font-size: .85rem; border-radius: .45rem; }
}
@media (max-width: 420px){
  .lmps-hero-overlay{ max-width: 68%; }
  .lmps-hero-h1 .lmps-line1{ font-size: 1.05rem; }
  .lmps-hero-h1 .lmps-line2{ font-size: 1.15rem; }
  .lmps-rotator{ font-size: 1.05rem; }
  .lmps-cta{ padding: .4rem .65rem; font-size: .8rem; border-radius: .4rem; }
}

/* Tablets & up (prevents landscape crop while keeping a good ceiling) */
@media (min-width: 768px){
  .lmps-hero{
    max-width: 1100px;
    max-height: min(70vh, 640px); /* tablet landscape: shrink to viewport */
    margin: 0 auto;
    border-radius: .75rem;
    overflow: hidden;
  }
}

/* Desktops (tune overlay proportions for bigger canvases) */
@media (min-width: 1024px){
  .lmps-hero-overlay{
    max-width: 520px;      /* narrower text block for readability */
    padding: 1.2rem 1.4rem;
    gap: .65rem;
  }
  .lmps-hero-h1 .lmps-line1{ font-size: clamp(1.8rem, 2.2vw + 1rem, 2.4rem); }
  .lmps-hero-h1 .lmps-line2{ font-size: clamp(2rem, 2.4vw + 1rem, 2.6rem); }
  .lmps-rotator{ font-size: 1.25rem; }
  .lmps-cta{ padding: .6rem 1rem; font-size: .95rem; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){ .lmps-rotator-list { animation: none; } }

/* ==========================================================================
   70. Hide Prev/Next navigation on single pages (tighten to CPT later if needed)
   ========================================================================== */
.single .post-navigation,
.single nav.navigation.post-navigation,
.single .nav-links { display: none !important; }

/* ==========================================================================
   80. Featured Early Members (cards/grid)
   ========================================================================== */
.lmps-featured{margin:clamp(20px,3vw,36px) auto;max-width:1200px}
.lmps-featured-head{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;margin-bottom:clamp(12px,2vw,18px)}
.lmps-featured h2{margin:0;font-size:clamp(1.4rem,1.2vw + 1rem,1.9rem);font-weight:800}
.lmps-sub{margin:0;color:#666;font-size:.95rem}

.lmps-card-grid{
  display:grid; gap:clamp(14px,2vw,18px);
  grid-template-columns: repeat(12, 1fr);
}
.lmps-card{
  grid-column: span 6; /* 2 per row on laptop */
  background:#fff;border:1px solid #e8e8e8;border-radius:16px;overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.04)
}
@media (min-width:1200px){ .lmps-card{ grid-column: span 4; } } /* 3 per row if space allows */
@media (max-width:720px){ .lmps-card{ grid-column: span 12; } } /* 1 per row on mobile */

.lmps-card-img{position:relative;display:block;aspect-ratio:16/9;overflow:hidden}
.lmps-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.lmps-card:hover .lmps-card-img img{transform:scale(1.03)}
.lmps-badge{
  position:absolute;left:10px;top:10px;background:#2ecc71;color:#fff;font-weight:800;
  padding:.3rem .5rem;border-radius:.5rem;font-size:.8rem;box-shadow:0 4px 12px rgba(0,0,0,.15)
}

.lmps-card-body{padding:14px 14px 16px}
.lmps-card-body h3{margin:.1rem 0 .35rem 0;font-size:1.15rem;line-height:1.2}
.lmps-card-body h3 a{text-decoration:none}
.lmps-meta{color:#555;margin-bottom:.35rem;font-weight:600}
.lmps-blurb{color:#666;margin:.25rem 0 .65rem 0;line-height:1.35}

.lmps-card-btn{
  display:inline-block;font-weight:800;text-decoration:none;background:#111;color:#fff;
  padding:.5rem .8rem;border-radius:.45rem;box-shadow:0 6px 16px rgba(0,0,0,.15)
}
.lmps-card-btn:hover{transform:translateY(-1px)}

.lmps-chip-row{display:flex;flex-wrap:wrap;gap:.5rem;margin:clamp(12px,2vw,16px) 0}
.lmps-chip{
  display:inline-block;border:1px solid #ddd;border-radius:999px;padding:.4rem .7rem;
  text-decoration:none;font-weight:700;background:#fff
}
.lmps-chip:hover{background:#f5f5f5}
.lmps-note{color:#666;margin-top:6px}

/* ==========================================================================
   90. Page 527 (WIP “Local Mom & Pop Shops” page) – tighten top spacing + laptop hero size
   Theme: Storefront
   ========================================================================== */

/* A) Reduce space between menu and first block on this page only */
.page-id-527 .site-header{ margin-bottom: clamp(6px, 0.8vw, 12px); }
.page-id-527 .site-content{ padding-top: 0 !important; }
.page-id-527 .site-content .col-full{ padding-top: clamp(6px, 0.8vw, 14px) !important; }
.page-id-527 .entry-content > *:first-child{ margin-top: 0 !important; }
.page-id-527 .entry-content > .wp-block-group:first-child,
.page-id-527 .entry-content > .wp-block-cover:first-child,
.page-id-527 .entry-content > section:first-child{ margin-top: 0 !important; }

/* B) Laptop hero tuning on this page (inherits the 70vh/640px ceiling above) */
@media (min-width: 1024px){
  .page-id-527 .lmps-hero{
    max-width: 1100px;                /* laptop-friendly width */
    max-height: min(70vh, 640px);     /* avoid tablet landscape cropping */
    margin: 0 auto;
    border-radius: .75rem;
    overflow: hidden;
  }
  .page-id-527 .lmps-hero-overlay{
    max-width: 440px;                 /* keep text block proportional */
    padding: 1rem 1.2rem;
    gap: .55rem;
  }
  .page-id-527 .lmps-hero-h1 .lmps-line1{ font-size: clamp(1.5rem, 1.7vw + .85rem, 2rem); }
  .page-id-527 .lmps-hero-h1 .lmps-line2{ font-size: clamp(1.65rem, 1.9vw + .85rem, 2.15rem); }
  .page-id-527 .lmps-rotator{ font-size: 1.1rem; }
  .page-id-527 .lmps-cta{ font-size: .88rem; padding: .5rem .9rem; }
}


/* ============================================
   Tablet landscape hero tuning (show more bottom)
   ============================================ */
@media (min-width: 768px) and (max-width: 1023.98px){
  /* a) allow a bit more vertical room on tablets */
  .lmps-hero{
    max-height: min(80vh, 680px); /* was 70vh/640px */
  }

  /* b) keep full-bleed but bias the crop to the TOP so the BOTTOM stays visible */
  .lmps-hero-img{
    object-fit: cover;
    object-position: center bottom; /* show more bottom of the image */
  }
}

.lmps-hero-img{ object-position: center 95%; }


/* LMPS_OVERRIDES_VERSION: 2025-09-28.3 */

/* --- TEMP: spacing above DPro grid --- */
.lmps-hero + .wp-block-spacer {
  height: 24px !important; /* adjust if needed */
}

/* --- DPro listing cards – light polish --- */
#drts .drts-bs-card {
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  border: 1px solid #eee;
  overflow: hidden; /* ensures scaled image stays inside card */
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* Hover effect: gentle lift + slightly stronger shadow */
#drts .drts-bs-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
}

/* Image zoom on hover */
#drts .drts-bs-card img {
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  transition: transform 0.25s ease;
}
#drts .drts-bs-card:hover img {
  transform: scale(1.05); /* subtle zoom */
}

#drts .drts-bs-card-body {
  padding: 18px 18px 16px;
}

/* Listing title */
#drts .drts-entity-title a {
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none; /* keep it clean */
}

/* Meta lines */
#drts .drts-entity-field--categories,
#drts .drts-entity-address,
#drts .drts-entity-phone {
  color: #626262;
  font-size: .95rem;
}

/* “Featured” badge styling */
#drts .drts-entity-badge--featured {
  background: #ffd54f;
  color: #1a1a1a;
  font-weight: 700;
  border-radius: 10px;
  padding: 4px 10px;
  box-shadow: 0 3px 10px rgba(0,0,0,.08);
}

/* “Founding Member” text line (if used as a field) */
#drts .drts-entity-field--founding_member { 
  font-weight: 600;
  color: #2a7a2a;
}

/* LMPS_OVERRIDES_VERSION: 2025-09-28.6 */
.lmps-footer-note {
  margin: .5rem 0 0;
  font-size: 16px;
  opacity: .8;
  text-align: center;
}

/* Better anchor jump & spacing */
#lmps-listings { scroll-margin-top: 80px; }
.wp-block-spacer.lmps-after-hero { height: 20px; } /* drop under hero if needed */

/* Long button text wraps nicely on small screens */
.wp-block-button__link { white-space: normal; }

/* LMPS_OVERRIDES_VERSION: 2025-09-28.7 */
.everest-forms .evf-field-label { font-weight: 600; }
.everest-forms input, .everest-forms textarea, .everest-forms select { border-radius: 10px; }
.everest-forms .evf-submit-container .evf-submit { border-radius: 999px; padding: 10px 18px; }

