/* ==========================================================================
   UI FIXES — loaded LAST, after palette.css. Every rule here is scoped to an
   element type inside a named section or inside <header>. No bare
   [class*="..."] selectors: those are what broke the site three times before.

   Fixes, in order:
     1. header phone number was rendered as a second gold button
     2. header dropdown panels: invisible text, see-through panel, thin layout
     3. testimonial cards were transparent
     4. Where We Work: three glass columns -> one centred cloud of town pills
   ========================================================================== */


/* --------------------------------------------------------------------------
   1 · HEADER PHONE NUMBER
   palette.css fills every a[href^="tel:"] with gold because the phone link in
   the footer and on the contact page IS a CTA. In the header it sat directly
   beside the gold "Free Estimate" button, so the bar had two competing gold
   pills. Here it becomes a quiet outlined link: cream text, gold handset.
   -------------------------------------------------------------------------- */
header a[href^="tel:"] {
  background: rgba(255,255,255,.05) !important;
  background-image: none !important;
  color: #F6F1E7 !important;
  -webkit-text-fill-color: #F6F1E7 !important;
  border: 1px solid rgba(201,169,97,.42) !important;
  border-radius: 999px !important;
  padding: 8px 16px !important;
  transition: background-color .3s, border-color .3s;
}
header a[href^="tel:"] span,
header a[href^="tel:"] div {
  color: #F6F1E7 !important;
  -webkit-text-fill-color: #F6F1E7 !important;
}
header a[href^="tel:"] svg,
header a[href^="tel:"] svg * {
  color: #C9A961 !important;
  stroke: #C9A961 !important;
}
header a[href^="tel:"]:hover {
  background: rgba(201,169,97,.14) !important;
  border-color: rgba(201,169,97,.75) !important;
}


/* --------------------------------------------------------------------------
   2 · DROPDOWN MENUS  (Services, Service Areas)
   Two separate faults:
     a) the text was #2A0308 — near-black on a near-black panel. Cause was a
        palette.css rule keyed to [class*="fixed"][class*="right"], meant for
        the BOOK NOW rail, which also matched <header class="fixed ... right-0">
        and repainted every descendant. Fixed at source in palette.css.
     b) the panel carries an inline background at 97% opacity, but the card
        rule in palette.css overrode it to 86% and the page showed through.
   The panels are now opaque, wider, and laid out with room to breathe.
   -------------------------------------------------------------------------- */
header div[class*="absolute"][class*="top-full"] {
  background: #1B080E !important;
  background-image: none !important;
  border: 1px solid rgba(201,169,97,.30) !important;
  border-radius: 14px !important;
  box-shadow: 0 28px 70px rgba(0,0,0,.72), 0 2px 0 rgba(201,169,97,.06) inset !important;
  backdrop-filter: none !important;
  overflow: hidden;
}

/* the Services panel was 256px wide, which cramped "Waterproof Services" */
header div[class*="absolute"][class*="top-full"][class*="w-64"] {
  width: 278px !important;
}

/* rows */
header div[class*="absolute"][class*="top-full"] a {
  color: rgba(246,241,231,.86) !important;
  -webkit-text-fill-color: rgba(246,241,231,.86) !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 10px !important;
  transition: background-color .22s, color .22s, padding-left .22s;
}
header div[class*="absolute"][class*="top-full"] a:hover {
  background-color: rgba(201,169,97,.13) !important;
  color: #EBD9AB !important;
  -webkit-text-fill-color: #EBD9AB !important;
}

/* the little gold bullet on the Services rows */
header div[class*="absolute"][class*="top-full"] a span[class*="rounded-full"] {
  background-color: rgba(201,169,97,.55) !important;
}
header div[class*="absolute"][class*="top-full"] a:hover span[class*="rounded-full"] {
  background-color: #C9A961 !important;
}

/* "BERGEN COUNTY" heading on the Service Areas panel */
header div[class*="absolute"][class*="top-full"] h4 {
  color: #C9A961 !important;
  -webkit-text-fill-color: #C9A961 !important;
  border-bottom: 1px solid rgba(201,169,97,.22) !important;
}

/* the town grid: give the three columns real gutters and row height */
header div[class*="absolute"][class*="top-full"] div[class*="grid-cols-3"] {
  gap: 4px 18px !important;
}
header div[class*="absolute"][class*="top-full"] div[class*="grid-cols-3"] a {
  padding: 7px 10px !important;
}


/* --------------------------------------------------------------------------
   3 · TESTIMONIAL CARDS  ("What Our Customers Say")
   The cards are block-level <a> elements carrying a border class, so the
   "outline button" rule in palette.css claimed them and set them to
   rgba(255,255,255,.05) — a 5% wash over the section photograph. That rule is
   now scoped to inline-flex buttons; these get a real card surface.
   -------------------------------------------------------------------------- */
main section[data-bb="reviews"] a[class*="rounded-2xl"] {
  background-color: rgba(30,11,17,.95) !important;
  background-image: none !important;
  border: 1px solid rgba(201,169,97,.20) !important;
  backdrop-filter: none !important;
}
main section[data-bb="reviews"] a[class*="rounded-2xl"]:hover {
  background-color: rgba(40,15,23,.97) !important;
  border-color: rgba(201,169,97,.45) !important;
}
/* the initial-letter avatar was a 10%-opacity burgundy disc on burgundy */
main section[data-bb="reviews"] div[class*="rounded-full"][class*="h-10"] {
  background-color: rgba(201,169,97,.14) !important;
  border: 1px solid rgba(201,169,97,.30) !important;
}


/* --------------------------------------------------------------------------
   4 · WHERE WE WORK — town pills
   Was three translucent glass columns over a photograph. Rebuilt as one
   centred cloud of pills, the same structure buildwithlkdg.com uses, in B&B's
   own colours. Done entirely in CSS (display:contents flattens the three
   column wrappers) so no React-rendered markup is touched.
   -------------------------------------------------------------------------- */

/* a deeper scrim: the pills need a calm ground to sit on */
main section[data-bb="areas"] {
  background-image: linear-gradient(180deg,
      rgba(23,7,12,.95) 0%, rgba(23,7,12,.89) 38%,
      rgba(23,7,12,.90) 70%, rgba(23,7,12,.97) 100%),
    url('/images/bg/bg-areas.webp') !important;
}

/* the 3-column grid becomes a wrapping, centred row */
main section[data-bb="areas"] div[class*="grid-cols-3"] {
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}

/* the three column cards stop being boxes; their rows flow into the row above */
main section[data-bb="areas"] div[class*="grid-cols-3"] > div[class*="rounded-2xl"] {
  display: contents !important;
}

/* column headings, their hairlines, and the row bullets all go */
main section[data-bb="areas"] div[class*="rounded-2xl"] > div[class*="justify-between"],
main section[data-bb="areas"] div[class*="rounded-2xl"] > div[class*="bg-gradient-to-r"] {
  display: none !important;
}
main section[data-bb="areas"] div[class*="space-y-3"] > div > div[class*="rounded-full"] {
  display: none !important;
}

/* the list wrapper flattens too, and Tailwind's space-y margin is cleared */
main section[data-bb="areas"] div[class*="space-y-3"] {
  display: contents !important;
}
main section[data-bb="areas"] div[class*="space-y-3"] > div {
  margin-top: 0 !important;
}

/* the pill itself */
main section[data-bb="areas"] div[class*="space-y-3"] > div[class*="items-center"] {
  display: inline-flex !important;
  align-items: center;
  gap: 0 !important;
  padding: 12px 22px;
  border-radius: 100px;
  background-color: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(201,169,97,.20) !important;
  color: rgba(246,241,231,.92) !important;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .5px;
  white-space: nowrap;
  transition: transform .35s cubic-bezier(.2,.8,.2,1),
              background-color .35s, color .35s, border-color .35s, box-shadow .35s;
}
main section[data-bb="areas"] div[class*="space-y-3"] > div[class*="items-center"]:hover {
  background-color: #C9A961 !important;
  border-color: #C9A961 !important;
  color: #17070C !important;
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 14px 30px rgba(201,169,97,.24);
}

/* closing line under the cloud */
main section[data-bb="areas"] div[class*="grid-cols-3"]::after {
  content: "DON'T SEE YOUR TOWN? WE SERVE ALL OF BERGEN COUNTY AND SURROUNDING NORTH JERSEY.";
  flex-basis: 100%;
  margin-top: 34px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  line-height: 1.7;
  color: rgba(246,241,231,.52);
}

@media (max-width: 760px) {
  /* the fixed BOOK NOW rail sits over the right edge on narrow screens; keep
     the pill rows clear of it */
  main section[data-bb="areas"] div[class*="grid-cols-3"] {
    padding-left: 30px;
    padding-right: 46px;
  }
}
@media (max-width: 600px) {
  main section[data-bb="areas"] div[class*="grid-cols-3"] { gap: 9px; }
  main section[data-bb="areas"] div[class*="space-y-3"] > div[class*="items-center"] {
    padding: 10px 17px;
    font-size: 12.5px;
  }
}


/* --------------------------------------------------------------------------
   5 · OUTLINED PHONE BUTTONS OUTSIDE THE HEADER
   palette.css paints every a[href^="tel:"] gold with #2A0308 text, including
   -webkit-text-fill-color. Where a phone link is styled as the OUTLINE button
   instead (the pair at the bottom of the page: gold "Get a Free Estimate" +
   outlined phone), the background rule loses on specificity but the
   text-fill-color rule does not, so the label rendered near-black on a
   translucent dark pill. Outline phone buttons get cream text and a gold
   handset; the solid gold phone CTAs elsewhere are untouched.
   -------------------------------------------------------------------------- */
main a[href^="tel:"][class*="inline-flex"][class*="border"] {
  background-color: rgba(255,255,255,.05) !important;
  background-image: none !important;
  border: 1px solid rgba(201,169,97,.55) !important;
  color: #F6F1E7 !important;
  -webkit-text-fill-color: #F6F1E7 !important;
}
main a[href^="tel:"][class*="inline-flex"][class*="border"] span,
main a[href^="tel:"][class*="inline-flex"][class*="border"] div {
  color: #F6F1E7 !important;
  -webkit-text-fill-color: #F6F1E7 !important;
}
main a[href^="tel:"][class*="inline-flex"][class*="border"] svg,
main a[href^="tel:"][class*="inline-flex"][class*="border"] svg * {
  color: #C9A961 !important;
  stroke: #C9A961 !important;
  -webkit-text-fill-color: #C9A961 !important;
}
main a[href^="tel:"][class*="inline-flex"][class*="border"]:hover {
  background-color: rgba(201,169,97,.14) !important;
  border-color: rgba(201,169,97,.8) !important;
}


/* --------------------------------------------------------------------------
   6 · BEFORE/AFTER CAPTION LEGIBILITY
   Closter's before frame is a bright lawn under a blue sky, and the gold
   location line sat on it at about 2:1. A short scrim behind the caption.
   -------------------------------------------------------------------------- */
.ba::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 96px;
  background: linear-gradient(180deg, rgba(9,4,6,.72) 0%, rgba(9,4,6,0) 100%);
  pointer-events: none;
  z-index: 2;
}
.ba .cap { z-index: 3; }


/* --------------------------------------------------------------------------
   7 · FOOTER
   The footer had three gold slabs in it: "Contact & Booking", "Terms of
   Service" (both point at /contact) and the phone number. palette.css paints
   every a[href*="contact"] and a[href^="tel:"] gold because those ARE the CTA
   everywhere else — but in a footer link column they read as highlighter pen.
   The two social buttons were permanently gold for a different reason: their
   class is "hover:bg-primary", and [class*="bg-primary"] matches that string
   whether or not the mouse is anywhere near them.
   -------------------------------------------------------------------------- */
footer a[href*="contact" i],
footer a[href*="estimate" i],
footer a[href^="tel:"] {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  padding: 0 !important;
  color: rgba(255,255,255,.72) !important;
  -webkit-text-fill-color: rgba(255,255,255,.72) !important;
}
footer a[href^="tel:"] {
  color: #E3CE97 !important;
  -webkit-text-fill-color: #E3CE97 !important;
  font-weight: 600;
}
footer a[href*="contact" i]:hover,
footer a[href*="estimate" i]:hover,
footer a[href^="tel:"]:hover {
  color: #C9A961 !important;
  -webkit-text-fill-color: #C9A961 !important;
}

/* social buttons: outlined at rest, gold on hover, the way they were drawn */
footer a[class*="rounded-xl"][href*="facebook" i],
footer a[class*="rounded-xl"][href*="instagram" i] {
  background: rgba(255,255,255,.05) !important;
  background-image: none !important;
  border: 1px solid rgba(201,169,97,.28) !important;
  color: #F6F1E7 !important;
  -webkit-text-fill-color: #F6F1E7 !important;
}
/* the <path> needs it too: palette's [class*="bg-primary"] * rule reaches
   inside the icon, and lucide strokes with currentColor */
footer a[class*="rounded-xl"][href*="facebook" i] svg,
footer a[class*="rounded-xl"][href*="instagram" i] svg,
footer a[class*="rounded-xl"][href*="facebook" i] svg *,
footer a[class*="rounded-xl"][href*="instagram" i] svg * {
  color: #F6F1E7 !important;
  stroke: #F6F1E7 !important;
}
footer a[class*="rounded-xl"][href*="facebook" i]:hover,
footer a[class*="rounded-xl"][href*="instagram" i]:hover {
  background: #C9A961 !important;
  border-color: #C9A961 !important;
}
footer a[class*="rounded-xl"][href*="facebook" i]:hover svg,
footer a[class*="rounded-xl"][href*="instagram" i]:hover svg,
footer a[class*="rounded-xl"][href*="facebook" i]:hover svg *,
footer a[class*="rounded-xl"][href*="instagram" i]:hover svg * {
  color: #2A0308 !important;
  stroke: #2A0308 !important;
}


/* --------------------------------------------------------------------------
   8 · ICONS SITTING IN A TINTED GOLD DISC
   The pattern "<div class='rounded-full bg-primary/10'><svg …></div>" is used
   for section icons. palette.css has [class*="bg-primary"] * { color:#2A0308 }
   for the gold CTA buttons, and "bg-primary/10" contains that string, so the
   icon inside a 10%-gold disc was painted near-black on near-black — the map
   pin above "Proudly Serving New Jersey" was an empty ring. A disc that faint
   always wants a gold icon.
   -------------------------------------------------------------------------- */
main div[class*="bg-primary/"] > svg,
main div[class*="bg-primary/"] > svg *,
main span[class*="bg-primary/"] > svg,
main span[class*="bg-primary/"] > svg * {
  color: #C9A961 !important;
  stroke: #C9A961 !important;
  -webkit-text-fill-color: #C9A961 !important;
}


/* --------------------------------------------------------------------------
   9 · THE CHAT WIDGET WAS EATING EVERY TAP
   The launcher lives in <div class="fixed bottom-6 right-6 z-50 flex flex-col
   items-end">. Its first child is the chat panel - w-80 (320px), opacity 0,
   visibility hidden - but still display:block, so it keeps its box and sizes
   the container to 320x457. The container itself is pointer-events:auto at
   z-50, so on a 390px phone an invisible 320x457 rectangle sat over the
   middle of the hero and swallowed taps meant for "Get Your Free Estimate"
   and "View Our Work". Verified with elementFromPoint on the live site: the
   topmost element at the centre of both buttons was this container.

   The container is now transparent to pointer events and its real children
   get them back. The hidden panel is visibility:hidden, so it is not a
   hit-test target until it is actually opened.
   -------------------------------------------------------------------------- */
div[class*="fixed"][class*="bottom-6"][class*="right-6"][class*="z-50"] {
  pointer-events: none !important;
}
div[class*="fixed"][class*="bottom-6"][class*="right-6"][class*="z-50"] > * {
  pointer-events: auto;
}


/* --------------------------------------------------------------------------
   10 · CONTACT PAGE — the call, and the form
   Two problems measured on /contact:
     · the only phone link in the body was 139x24px of gold text. A visitor who
       just tapped "Get Your Free Estimate" had no obvious way to just ring
       him. contact.js inserts a real call bar above the form; this styles it.
     · the fields were 40px tall (under the 44px floor) on a #2C070E ground
       that is nearly the page colour, so they did not read as inputs at all.
       Two of them were 14px, which makes iOS zoom the whole page on focus.
   -------------------------------------------------------------------------- */

#bb-callbar {
  /* grid, not absolute positioning: the handset used to sit on top of the
     label, because the label is centred and long. */
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: center;
  column-gap: 13px;
  row-gap: 1px;
  width: 100%;
  min-height: 62px;
  padding: 12px 18px;
  margin: 0 0 22px;
  border-radius: 14px;
  /* palette.css fills every a[href^="tel:"] with a flat gold !important, so
     this needs !important too or the bar renders flat. */
  background: linear-gradient(180deg, #D8B96E 0%, #C9A961 55%, #B2924A 100%) !important;
  background-image: linear-gradient(180deg, #D8B96E 0%, #C9A961 55%, #B2924A 100%) !important;
  color: #2A0308 !important;
  -webkit-text-fill-color: #2A0308;
  border: 1px solid #C9A961;
  box-shadow: 0 10px 28px rgba(201,169,97,.22);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
#bb-callbar svg {
  grid-column: 1; grid-row: 1 / span 2;
  color: #2A0308; width: 24px; height: 24px;
}
#bb-callbar .lbl {
  grid-column: 2; grid-row: 1;
  font-size: 21px; font-weight: 700; letter-spacing: .01em; line-height: 1.2;
  white-space: nowrap;
}
#bb-callbar .sub {
  grid-column: 2; grid-row: 2;
  font-size: 11px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; opacity: .70; line-height: 1.3;
}
@media (max-width: 400px) { #bb-callbar .lbl { font-size: 19px; } }
#bb-callbar:active { transform: translateY(1px); }

/* ---- the form itself --------------------------------------------------- */
main form input,
main form textarea,
main form select {
  min-height: 52px;
  font-size: 16px !important;          /* under 16px iOS zooms the page */
  background-color: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(201,169,97,.28) !important;
  border-radius: 11px !important;
  color: #F6F1E7 !important;
  -webkit-text-fill-color: #F6F1E7;
  padding: 12px 14px !important;
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
main form textarea { min-height: 132px; line-height: 1.5; }
main form input::placeholder,
main form textarea::placeholder { color: rgba(246,241,231,.52) !important; }
main form input:focus,
main form textarea:focus,
main form select:focus {
  outline: none !important;
  border-color: #C9A961 !important;
  background-color: rgba(255,255,255,.085) !important;
  box-shadow: 0 0 0 3px rgba(201,169,97,.20) !important;
}
main form label {
  color: rgba(246,241,231,.86) !important;
  font-size: 13px;
  letter-spacing: .04em;
}
main form button[type="submit"],
main form button {
  min-height: 56px !important;
  font-size: 16px !important;
  border-radius: 12px !important;
  letter-spacing: .01em;
}


/* The phone number inside the "Get In Touch" card was getting palette.css's
   flat gold CTA fill, which on a line of text reads as highlighter pen. The
   call bar above the form is the button now; this one goes back to being a
   gold phone number you can still tap. */
main a[href^="tel:"]:not(#bb-callbar) {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  color: #E3CE97 !important;
  -webkit-text-fill-color: #E3CE97 !important;
  padding: 0 !important;
}
main a[href^="tel:"]:not(#bb-callbar):hover {
  color: #C9A961 !important;
  -webkit-text-fill-color: #C9A961 !important;
  text-decoration: underline;
}


/* --------------------------------------------------------------------------
   11 · THE HERO STATS CARD WAS STUCK AT 9% OPACITY
   Measured live: computed opacity 0.0912 on six readings over four seconds,
   inline style "opacity: 0; transform: translateY(27px)", one animation that
   never finishes. The entrance animation stalls, so the 500+ / 20 / 5-Star /
   100% card renders as a barely-visible grey box.

   The inline reveal sweep in index.html cannot catch it: that only acts on
   elements whose computed opacity is exactly "0", and 0.0912 is not 0.
   Author !important sits above animations in the cascade, so this wins.
   -------------------------------------------------------------------------- */
/* NB: the card is NOT in the hero. It sits in the band below it,
   <section class="relative z-20 -mt-20 pb-12 bg-[#2A0611]">, so a
   section.min-h-screen scope matched nothing. Verified in the live DOM:
   this selector matches exactly one element, and a page-wide scan for
   anything stuck between 1% and 90% opacity returns that same one. */
main div[class*="bg-[#3B0918]"][class*="rounded-2xl"][class*="shadow"] {
  opacity: 1 !important;
  transform: none !important;
}