/* LlynLive Suite — UX module: nav drawer, upgrade nudge, claim journey */
:root{
  --lls-ux-ocean: var(--wp--preset--color--teal-dark, var(--wp--preset--color--ocean, #0B4F6C));
  --lls-ux-tide: var(--wp--preset--color--teal, var(--wp--preset--color--tide, #1180A8));
  --lls-ux-sunset: var(--wp--preset--color--orange, var(--wp--preset--color--sunset, #E07A3F));
  --lls-ux-foam: var(--wp--preset--color--warm-grey, var(--wp--preset--color--foam, #FBF9F4));
  --lls-ux-sand: var(--wp--preset--color--cream, var(--wp--preset--color--sand, #E9DCC5));
  --lls-ux-slate: var(--wp--preset--color--charcoal, var(--wp--preset--color--slate, #22333B));
  --lls-ux-radius: 12px;
  --lls-ux-top: 0px;                 /* set at runtime from the admin bar height */
  --lls-ux-drawer-w: min(94vw, 460px);
}

/* =========================================================
   1. MOBILE NAVIGATION — full-height slide-in drawer
   ========================================================= */
@media (max-width: 781px){

  /* Hamburger: proper 48px touch target */
  body.lls-drawer-nav .wp-block-navigation__responsive-container-open{
    min-width:48px; min-height:48px;
    display:flex !important; align-items:center; justify-content:center;
    border-radius:10px;
  }
  body.lls-drawer-nav .wp-block-navigation__responsive-container-open svg{ width:30px; height:30px; }

  /* Container becomes the scrim only */
  body.lls-drawer-nav .wp-block-navigation__responsive-container.is-menu-open{
    position:fixed !important;
    top: var(--lls-ux-top) !important;
    right:0 !important; bottom:0 !important; left:0 !important;
    z-index:99999;
    display:block !important;
    padding:0 !important;
    background: rgba(11,79,108,.45) !important;
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    overflow:hidden !important;
    animation: lls-ux-fade .18s ease-out both;
  }

  /* THE FIX: core wraps the menu in .__responsive-close > .__responsive-dialog,
     and .__responsive-dialog is position:relative with an auto height, so an
     absolutely positioned drawer collapses to ~96px. Promote .__responsive-close
     to be the drawer itself and flatten the wrappers underneath it. */
  body.lls-drawer-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-close{
    position:absolute !important;
    top:0 !important; right:0 !important; bottom:0 !important; left:auto !important;
    width: var(--lls-ux-drawer-w) !important;
    max-width:none !important;
    height:100% !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    flex-direction:column;
    background: var(--lls-ux-foam) !important;
    color: var(--lls-ux-slate) !important;
    box-shadow:-16px 0 44px rgba(0,0,0,.32);
    overflow:hidden;
    animation: lls-ux-slide .22s cubic-bezier(.22,.61,.36,1) both;
  }

  body.lls-drawer-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-dialog{
    position:static !important;
    display:flex !important;
    flex-direction:column;
    flex:1 1 auto;
    min-height:0;
    height:100%;
    width:100%;
  }

  /* Sticky drawer header strip */
  body.lls-drawer-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-close::before{
    content:"Menu";
    position:absolute; top:0; left:0; right:0;
    height: calc(env(safe-area-inset-top, 0px) + 64px);
    display:flex; align-items:center;
    padding: env(safe-area-inset-top, 0px) 20px 0;
    font-size:13px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
    color:#fff; background: var(--lls-ux-ocean);
    z-index:1;
  }

  /* Close button — 52px, high contrast, always clear of the WP admin bar */
  body.lls-drawer-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-close{
    position:absolute !important;
    top: calc(env(safe-area-inset-top, 0px) + 6px) !important;
    right:12px !important; left:auto !important; bottom:auto !important;
    width:52px !important; height:52px !important;
    display:flex !important; align-items:center; justify-content:center;
    border-radius:50%;
    background: rgba(255,255,255,.16) !important;
    color:#fff !important;
    border:0; padding:0; cursor:pointer;
    z-index:3;
  }
  body.lls-drawer-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-close svg{ width:26px; height:26px; fill:currentColor; }

  /* Scrolling list area below the header strip */
  body.lls-drawer-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content{
    flex:1 1 auto;
    min-height:0;
    width:100% !important;
    display:block !important;
    padding: calc(env(safe-area-inset-top, 0px) + 64px) 0 calc(env(safe-area-inset-bottom, 0px) + 20px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    background: var(--lls-ux-foam) !important;
    color: var(--lls-ux-slate) !important;
  }

  body.lls-drawer-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container,
  body.lls-drawer-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-page-list{
    display:block !important;
    width:100% !important;
    gap:0 !important; margin:0 !important; padding:0 !important;
  }

  /* Rows */
  body.lls-drawer-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item{
    display:block !important;
    position:relative;
    width:100% !important;
    border-bottom:1px solid var(--lls-ux-sand);
  }
  body.lls-drawer-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content{
    display:flex !important;
    align-items:center;
    min-height:58px;
    padding:0 62px 0 20px;
    font-size:18px !important;
    line-height:1.25;
    font-weight:700;
    color: var(--lls-ux-ocean) !important;
    text-decoration:none !important;
  }
  body.lls-drawer-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content{
    color: var(--lls-ux-sunset) !important;
    box-shadow: inset 4px 0 0 var(--lls-ux-sunset);
  }
  body.lls-drawer-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content:active{ background: rgba(17,128,168,.10); }

  /* Core's tiny chevron is replaced by our own 52px toggle */
  body.lls-drawer-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-icon{ display:none !important; }

  .lls-ux-sub-toggle{
    position:absolute; top:3px; right:0;
    width:56px; height:52px;
    display:flex; align-items:center; justify-content:center;
    background:transparent; border:0; padding:0; cursor:pointer;
    color: var(--lls-ux-tide);
    z-index:2;
  }
  .lls-ux-sub-toggle::before{
    content:""; width:11px; height:11px;
    border-right:2.5px solid currentColor; border-bottom:2.5px solid currentColor;
    transform:rotate(45deg) translate(-2px,-2px);
    transition:transform .18s ease;
  }
  .wp-block-navigation-item.lls-ux-open > .lls-ux-sub-toggle::before{
    transform:rotate(-135deg) translate(-3px,-3px);
  }

  /* Accordion submenus — collapsed by default */
  body.lls-drawer-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container{
    position:static !important;
    opacity:1 !important; visibility:visible !important;
    width:100% !important; min-width:0 !important;
    border:0 !important; box-shadow:none !important;
    background: rgba(17,128,168,.06) !important;
    transform:none !important;
    margin:0 !important; padding:0 !important;
    display:none !important;
  }
  body.lls-drawer-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item.lls-ux-open > .wp-block-navigation__submenu-container{
    display:block !important;
  }
  body.lls-drawer-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container .wp-block-navigation-item{
    border-bottom:1px solid rgba(233,220,197,.7);
  }
  body.lls-drawer-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container .wp-block-navigation-item:last-child{ border-bottom:0; }
  body.lls-drawer-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
    min-height:52px;
    padding-left:38px;
    font-size:17px !important;
    font-weight:500;
    color: var(--lls-ux-slate) !important;
  }

  /* Optional CTA pinned under the list */
  .lls-ux-nav-cta{
    display:block; margin:18px 20px 6px;
    padding:15px 18px; text-align:center;
    border-radius:12px;
    background: var(--lls-ux-sunset); color:#fff !important;
    font-weight:800; font-size:17px; text-decoration:none !important;
  }

  html.lls-ux-locked, body.lls-ux-locked{ overflow:hidden !important; touch-action:none; }
}

@keyframes lls-ux-slide{ from{ transform:translateX(100%);} to{ transform:translateX(0);} }
@keyframes lls-ux-fade{ from{ opacity:0;} to{ opacity:1;} }
@media (prefers-reduced-motion: reduce){
  body.lls-drawer-nav .wp-block-navigation__responsive-container.is-menu-open,
  body.lls-drawer-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-close{ animation:none !important; }
}

/* =========================================================
   4. DASHBOARD UPGRADE NUDGE
   ========================================================= */
.lls-ux-nudge{ position:relative; margin:0 0 26px; padding:22px 22px 20px; border-radius:16px; border:1px solid var(--lls-ux-sand);
  background: radial-gradient(120% 140% at 100% 0%, rgba(224,122,63,.14) 0%, rgba(224,122,63,0) 55%), var(--lls-ux-foam);
  box-shadow:0 2px 14px rgba(11,79,108,.08); }
.lls-ux-nudge-x{ position:absolute; top:10px; right:10px; width:44px; height:44px; border:0; border-radius:50%; background:transparent; color: var(--lls-ux-slate); font-size:24px; line-height:1; cursor:pointer; opacity:.55; }
.lls-ux-nudge-x:hover{ opacity:1; background:rgba(0,0,0,.05); }
.lls-ux-nudge-eyebrow{ margin:0 0 6px; font-size:.74rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--lls-ux-tide); }
.lls-ux-nudge-title{ margin:0 0 12px; font-size:1.4rem; line-height:1.22; color: var(--lls-ux-ocean); }
.lls-ux-nudge-list{ margin:0 0 14px; padding-left:20px; }
.lls-ux-nudge-list li{ margin:0 0 6px; font-size:.95rem; color: var(--lls-ux-slate); }
.lls-ux-nudge-scarce{ margin:0 0 16px; padding:10px 12px; font-size:.88rem; background:rgba(224,122,63,.12); border-left:3px solid var(--lls-ux-sunset); border-radius:6px; color: var(--lls-ux-slate); }
.lls-ux-nudge-actions{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 10px; }
.lls-ux-nudge-foot{ margin:0; font-size:.82rem; color: var(--lls-ux-tide); }
@media (max-width:600px){ .lls-ux-nudge-title{ font-size:1.2rem; } .lls-ux-nudge-actions .lls-btn{ width:100%; text-align:center; } }

/* =========================================================
   6. CLAIM PAGE — search + post-claim upgrade panel (1.2.0)
   ========================================================= */
.lls-ux-claim-search{ margin:0 0 10px; }
#lls-ux-claim-find{
  width:100%; padding:15px 16px; font-size:17px;
  border:2px solid var(--lls-ux-sand); border-radius:10px;
  background:#fff; color: var(--lls-ux-slate);
}
#lls-ux-claim-find:focus{ outline:none; border-color: var(--lls-ux-tide); box-shadow:0 0 0 3px rgba(17,128,168,.15); }
.lls-ux-claim-count{ margin:6px 2px 0; font-size:.82rem; color: var(--lls-ux-tide); }

.lls-ux-claim-panel{
  margin:18px 0 0; padding:22px;
  border-radius:16px; border:1px solid var(--lls-ux-sand);
  background: radial-gradient(120% 140% at 100% 0%, rgba(224,122,63,.14) 0%, rgba(224,122,63,0) 55%), var(--lls-ux-foam);
  box-shadow:0 2px 14px rgba(11,79,108,.08);
}
.lls-ux-claim-eyebrow{ margin:0 0 6px; font-size:.74rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--lls-ux-tide); }
.lls-ux-claim-title{ margin:0 0 10px; font-size:1.3rem; line-height:1.25; color: var(--lls-ux-ocean); }
.lls-ux-claim-body{ margin:0 0 12px; font-size:.96rem; color: var(--lls-ux-slate); }
.lls-ux-claim-scarce{ margin:0 0 16px; padding:10px 12px; font-size:.88rem; background:rgba(224,122,63,.12); border-left:3px solid var(--lls-ux-sunset); border-radius:6px; color: var(--lls-ux-slate); }
.lls-ux-claim-actions{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 10px; }
.lls-ux-claim-foot{ margin:0; font-size:.82rem; color: var(--lls-ux-tide); }
@media (max-width:600px){ .lls-ux-claim-actions .lls-btn{ width:100%; text-align:center; } }

/* =========================================================
   7. TAP TARGETS — .lls-btn is 39px tall, under the 44px
   minimum. Raised on mobile only; desktop is untouched.
   ========================================================= */
@media (max-width: 781px){
  .lls-btn{
    min-height:48px;
    display:inline-flex; align-items:center; justify-content:center;
    padding:12px 22px;
    font-size:1rem;
  }
  .lls-btn-mini{ min-height:36px; padding:8px 14px; font-size:.85rem; }
}

/* =========================================================
   8. HOMEPAGE LENS VIDEO — facade until played
   ========================================================= */
.lls-rn-video{ margin:16px 0 4px; }
.lls-rn-video iframe,
.lls-rn-play{
  display:block; width:100%; aspect-ratio:16/9;
  border:0; border-radius:14px; overflow:hidden;
  background:#000; padding:0; cursor:pointer; position:relative;
}
.lls-rn-play img{ width:100%; height:100%; object-fit:cover; display:block; }
.lls-rn-play-ico{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:68px; height:48px; border-radius:12px;
  background:rgba(11,79,108,.86);
  transition:background .15s ease, transform .15s ease;
}
.lls-rn-play-ico::after{
  content:""; position:absolute; top:50%; left:54%; transform:translate(-50%,-50%);
  border-style:solid; border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent #fff;
}
.lls-rn-play:hover .lls-rn-play-ico,
.lls-rn-play:focus-visible .lls-rn-play-ico{ background:var(--lls-ux-sunset); transform:translate(-50%,-50%) scale(1.06); }
.lls-rn-video-cap{ margin:8px 2px 0; font-size:.9rem; font-weight:600; }

/* The Right Now panel sits inside .ll-hero, whose `.ll-hero p` rule paints all
   paragraphs white for the dark cover image behind it. The panel itself is
   cream, so that inherited white is invisible. These selectors are deliberately
   one step more specific than .ll-hero p so the panel keeps dark text. */
.lls-rn{ color: var(--lls-ux-slate); }
.ll-hero .lls-rn p,
.ll-hero .lls-rn .lls-rn-video-cap,
.lls-rn .lls-rn-video-cap{ color: var(--lls-ux-slate); }
.ll-hero .lls-rn .lls-rn-note,
.lls-rn .lls-rn-note{ color: var(--lls-ux-slate); opacity:.72; }

/* =========================================================
   9. RIGHT NOW — legible text on the cream panel
   The block sits inside the hero cover, which sets white text on everything
   beneath it. Anything in the panel without its own colour inherits that and
   disappears. Fixed values, no variables — a missing token is what caused it.
   ========================================================= */
.lls-rn{ color:#22333B; }
.lls-rn .lls-rn-video-cap{ color:#3d4f57 !important; font-weight:600; }
.lls-rn .lls-rn-note{ color:#5c6b73 !important; }
.lls-rn .lls-rn-local-head,
.lls-rn .lls-rn-soon strong{ color:#22333B !important; }
.lls-rn .lls-rn-soon span{ color:#5a6a72 !important; }

/* =========================================================
   9. RIGHT NOW PANEL — text colour inside the hero
   The theme sets `.ll-hero p { color: rgba(255,255,255,.85) }`, which
   out-specifies a single-class rule and turns any paragraph inside the
   Right Now panel white — on a cream panel. Two classes beats one class
   plus one element, so no !important needed.
   ========================================================= */
.lls-rn .lls-rn-video-cap{
  color: var(--wp--preset--color--teal-dark, #0B4F6C);
  font-weight:600;
}
.lls-rn .lls-rn-note{
  color: var(--wp--preset--color--charcoal, #3F4A50);
  opacity:.85;
}

/* =========================================================
   10. BUSINESS LOGO — dashboard uploader + card mark
   ========================================================= */
.lls-logo-upload{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.lls-logo-upload.is-dragging .lls-logo-preview{ border-color:var(--lls-ux-sunset); }
.lls-logo-preview{
  width:104px; height:104px; flex:0 0 104px;
  border-radius:16px; border:2px dashed rgba(0,0,0,.18);
  background:#fff center/contain no-repeat;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; overflow:hidden;
}
.lls-logo-preview.is-empty{
  background: hsl(var(--lls-hue,200) 42% 92%);
  border-style:solid; border-color:hsl(var(--lls-hue,200) 38% 80%);
}
.lls-logo-mono{
  font-size:2rem; font-weight:800; letter-spacing:.02em;
  color:hsl(var(--lls-hue,200) 46% 32%);
}
.lls-logo-actions{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }

/* Card mark — logo, or initials when there is none, so cards never look broken */
.lls-card-logo{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; flex:0 0 34px;
  margin-right:9px; vertical-align:middle;
  border-radius:9px; overflow:hidden; background:#fff;
  border:1px solid rgba(0,0,0,.08);
}
.lls-card-logo img{ width:100%; height:100%; object-fit:contain; display:block; }
.lls-card-logo.is-mono{
  background:hsl(var(--lls-hue,200) 42% 92%);
  border-color:hsl(var(--lls-hue,200) 38% 82%);
  color:hsl(var(--lls-hue,200) 46% 30%);
  font-size:.82rem; font-weight:800; letter-spacing:.01em;
}
.lls-biz-card h3{ display:flex; align-items:center; gap:0; }
@media (max-width:600px){
  .lls-logo-preview{ width:88px; height:88px; flex-basis:88px; }
}

/* Logo on the single business page — never cropped, never blown up */
.lls-details-logo{ margin:0 0 16px; }
.lls-details-logo img{
  max-width:180px; max-height:110px; width:auto; height:auto;
  display:block; object-fit:contain;
}

/* =========================================================
   11. CARD GRID — stop rows stretching to the tallest card
   A grid row defaults to `align-items: stretch`, so one card
   with a photo padded every card beside it with dead space.
   ========================================================= */
.lls-cards-grid{ align-items:start; }
.lls-cards-grid > .lls-card{ height:auto; align-self:start; }

/* Title row: keep the logo beside the name rather than pushing it
   onto a second line on a 240px card. */
.lls-biz-card h3{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:9px;
  margin:0 0 4px;
}
.lls-biz-card h3 .lls-card-logo{ margin-right:0; }
.lls-biz-card h3 > a{ min-width:0; overflow-wrap:break-word; }
.lls-biz-card h3 .lls-popular-badge{ grid-column:2; justify-self:start; }
@media (max-width:400px){
  .lls-card-logo{ width:30px; height:30px; flex-basis:30px; }
}

/* =========================================================
   11. CARD GRID — stop rows stretching to the tallest card
   Grid items default to `stretch`, so one card with a photo
   padded every other card in its row with empty white space.
   ========================================================= */
.lls-cards-grid{ align-items:start; }

/* Logo mark and title sit side by side without forcing a wrap */
.lls-biz-card h3{
  display:flex; align-items:flex-start; gap:0;
  line-height:1.25;
}
.lls-card-logo{ margin-top:1px; }
@media (max-width:600px){
  .lls-card-logo{ width:30px; height:30px; flex-basis:30px; margin-right:8px; }
}

/* =========================================================
   12. OWNER PIN MAP — drag to your own front door
   ========================================================= */
.lls-pinmap-wrap{ margin:14px 0 18px; }
.lls-pinmap{
  height:320px; width:100%;
  border-radius:14px; overflow:hidden;
  border:1px solid rgba(0,0,0,.12);
  background:#dfe8ec;
}
.lls-pinmap-foot{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:8px 2px 0;
}
.lls-pinmap-coords{ font-size:.84rem; color:var(--lls-ux-tide,#1180A8); font-weight:600; }
.lls-pinmap .leaflet-marker-icon{ cursor:grab; }
.lls-pinmap .leaflet-marker-icon:active{ cursor:grabbing; }
@media (max-width:600px){ .lls-pinmap{ height:260px; } }

/* =========================================================
   13. PLAN CHOOSER on the add-a-business form
   ========================================================= */
.lls-plans{ display:grid; gap:12px; margin:10px 0 18px; }
@media (min-width:760px){ .lls-plans{ grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); } }
.lls-plan{
  display:block; position:relative; cursor:pointer;
  padding:16px 16px 16px 44px;
  border:2px solid var(--lls-ux-sand,#E9DCC5); border-radius:14px; background:#fff;
}
.lls-plan input{ position:absolute; top:18px; left:16px; width:18px; height:18px; }
.lls-plan:has(input:checked){ border-color:var(--lls-ux-sunset,#E07A3F); box-shadow:0 0 0 3px rgba(224,122,63,.14); }
.lls-plan.is-unavailable{ opacity:.55; cursor:not-allowed; }
.lls-plan-name{ display:block; font-weight:800; color:var(--lls-ux-ocean,#0B4F6C); }
.lls-plan-price{ display:block; font-size:1.15rem; font-weight:800; color:var(--lls-ux-sunset,#E07A3F); margin:2px 0 6px; }
.lls-plan-blurb{ display:block; font-size:.88rem; color:var(--lls-ux-slate,#22333B); }
.lls-plan-left{ display:block; margin-top:8px; font-size:.8rem; font-weight:700; color:var(--lls-ux-tide,#1180A8); }