/* bix-fixes.css (2026-09-28): review-sweep fixes for beachinsurancellc.com.
   Additive only. Load AFTER site.css. Two kinds of rule live here:
   (A) utilities the templates use but the purged tailwind.min.css never emitted (values copied
       from Tailwind v3.4), and (B) scoped fixes for specific broken spots. Nothing here changes
   copy. Rollback = delete the <link> tag. */

/* ─── A. Missing Tailwind utilities (they silently did nothing) ───────────────────────────── */
/* footer bottom bar (Privacy Policy · Terms · …) + travel page grid */
.gap-x-4 { column-gap: 1rem; }
.gap-y-2 { row-gap: .5rem; }
.gap-x-8 { column-gap: 2rem; }
.gap-y-3 { row-gap: .75rem; }
/* header utility bar */
.px-1 { padding-left: .25rem; padding-right: .25rem; }
@media (min-width: 640px) { .sm\:gap-4 { gap: 1rem; } .sm\:gap-6 { gap: 1.5rem; } }
/* legal pages (privacy / terms / accessibility / cookie / do-not-sell) */
.list-disc { list-style-type: disc; }
.list-none { list-style-type: none; }
.pl-6 { padding-left: 1.5rem; }
.pl-0 { padding-left: 0; }
.text-gray-200 { color: rgb(229 231 235); }
.text-gray-900 { color: rgb(17 24 39); }
.text-left { text-align: left; }
.my-4 { margin-top: 1rem; margin-bottom: 1rem; }
.bg-gray-100 { background-color: rgb(243 244 246); }
.overflow-x-auto { overflow-x: auto; }
@media (min-width: 768px) { .md\:py-20 { padding-top: 5rem; padding-bottom: 5rem; } }
/* "text-primary" came from another site's scaffold; this config has no "primary". bi-blue. */
.text-primary { color: #1565A8; }
.hover\:text-primary:hover { color: #1565A8; }
/* service-page content images (food trucks, auto, home, life): were rendering at full height */
.h-48 { height: 12rem; }
.my-8 { margin-top: 2rem; margin-bottom: 2rem; }
@media (min-width: 768px) { .md\:h-64 { height: 16rem; } }
/* blog post + author pages */
.h-20 { height: 5rem; }
.w-20 { width: 5rem; }
.h-40 { height: 10rem; }
.line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.no-underline { text-decoration-line: none; }
.hover\:opacity-80:hover { opacity: .8; }
.hover\:opacity-100:hover { opacity: 1; }
/* contact form success / error states (only seen after a submit, so nobody noticed) */
.bg-green-50 { background-color: rgb(240 253 244); }
.bg-red-50 { background-color: rgb(254 242 242); }
.border-green-200 { border-color: rgb(187 247 208); }
.border-red-200 { border-color: rgb(254 202 202); }
.text-red-600 { color: rgb(220 38 38); }
.text-red-800 { color: rgb(153 27 27); }
.disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }
.disabled\:opacity-60:disabled { opacity: .6; }
.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-red-200 { --tw-ring-opacity: 1; --tw-ring-color: rgb(254 202 202 / var(--tw-ring-opacity)); }
/* travel-insurance page accordion + cards */
.divide-y > :not([hidden]) ~ :not([hidden]) { border-top-width: 1px; border-bottom-width: 0; }
.divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: rgb(243 244 246); }
.duration-200 { transition-duration: .2s; }
.mb-7 { margin-bottom: 1.75rem; }
.pb-5 { padding-bottom: 1.25rem; }
.px-7 { padding-left: 1.75rem; padding-right: 1.75rem; }
.hover\:-translate-y-0\.5:hover {
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group[open] .group-open\:rotate-45 {
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@media (min-width: 768px) { .md\:p-8 { padding: 2rem; } .md\:col-span-2 { grid-column: span 2 / span 2; } }

/* "prose" (the typography plugin) was never installed, so blocks that rely on it alone (home
   welcome text, legal pages) lost paragraph spacing, list bullets and link styling. Minimal
   subset, only where site.css's .bi-content isn't already doing the job. :where() keeps it weaker
   than any utility class a template sets on purpose. */
:where(.prose:not(.bi-content)) :is(p, ul, ol) + :is(p, ul, ol) { margin-top: 1rem; }
:where(.prose:not(.bi-content)) ul:not(.list-none) { list-style-type: disc; padding-left: 1.5rem; }
:where(.prose:not(.bi-content)) ol:not(.list-none) { list-style-type: decimal; padding-left: 1.5rem; }
:where(.prose:not(.bi-content)) :is(p, li) a { color: #1565A8; text-decoration: underline; text-underline-offset: 2px; }
:where(.prose:not(.bi-content)) :is(p, li) a:hover { color: #0D3B6E; }

/* ─── B. Scoped fixes ─────────────────────────────────────────────────────────────────────── */

/* B1. Home hero wave: fixed in the template (T2, preserveAspectRatio="none"), not here. A CSS
   height:auto also fixes it but makes the wave 60px tall, which enlarges the existing font-swap
   layout shift (CLS 0.0076 -> 0.0079). The template attribute keeps the 48px box. */

/* B2. Welcome photo: "Protected Coastal Living" is baked into the bottom of the image, and
   object-cover at max-height 280px cropped it off. Crop from the sky instead. */
img[src*="hero-family-coastal-home-1"] { object-position: 50% 88%; }

/* B3. Mobile menu: nav.html prints a "Blog" link after EVERY sub-item (49 of them). The top-level
   Blog item stays. (Template fix T1 removes the source; this rule is then a no-op.) */
#mobile-menu .pl-4 .pl-4 > a[href="/blog/"] { display: none; }

/* B4. Imported "GET FREE QUOTE!" button (Avada markup on service pages) rendered as a default blue
   underlined link. Give it the site's gold CTA look. Pair with the /get-a-quote/ redirect (R1). */
.bi-content a.fusion-button {
  display: inline-block; background: #D4A017; color: #0D3B6E; font-weight: 700; font-size: 1rem;
  line-height: 1.5; padding: .875rem 2rem; border-radius: .5rem; text-decoration: none;
  letter-spacing: .02em; box-shadow: 0 4px 12px rgba(13, 59, 110, .15); transition: background-color .2s;
}
.bi-content a.fusion-button:hover { background: #FACC15; color: #0D3B6E; }
.bi-content a.fusion-button:focus-visible { outline: 2px solid #0D3B6E; outline-offset: 3px; }

/* B5. Office map: until Leaflet arrives (it lazy-loads from a CDN on scroll) the panel was a bare
   white box. Show a soft map-paper placeholder instead; Leaflet's own class switches it off. */
#bi-map:not(.leaflet-container) {
  background-color: #EEF4FB;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231565A8' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' opacity='.5'%3E%3Cpath d='M17.657 16.657L13.414 20.9a2 2 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z'/%3E%3Ccircle cx='12' cy='11' r='3'/%3E%3C/svg%3E"),
    linear-gradient(rgba(21, 101, 168, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 101, 168, .07) 1px, transparent 1px);
  background-position: center, 0 0, 0 0;
  background-size: 56px 56px, 40px 40px, 40px 40px;
  background-repeat: no-repeat, repeat, repeat;
}
/* desktop only (the column beside the map, so no layout change): ghost cards while buttons load */
@media (min-width: 901px) {
  #location-buttons:not(:has(.bi-loc-btn)) {
    min-height: 480px; border-radius: 12px;
    background: repeating-linear-gradient(to bottom, #F5F8FC 0 68px, transparent 68px 80px);
  }
}

/* B6. Blog post featured image: lazy + no dimensions pushed the article down on load (CLS 0.058).
   Reserve a 16:9 box until the real ratio is known. */
article.py-16 img.w-full.rounded-xl.mb-8 { aspect-ratio: auto 16 / 9; object-fit: cover; }

/* ── Fused CTAs (Eric, 2026-09-28): the page's closing CTA band flows straight into the footer
   scene. No gap; the band darkens from bi-blue to bi-navy (#0D3B6E), the exact colour at the top
   of the footer's sky, so the seam disappears. :has() unsupported → the old 4rem gap remains. */
main > section.bix-fuse { background-image: linear-gradient(180deg, #1565A8 0%, #1565A8 28%, #0D3B6E 100%); }
main:has(> section.bix-fuse:last-of-type) + footer { margin-top: 0; }
/* On narrow screens the scene's sky is cropped from the top, so it starts a shade lighter than
   #0D3B6E. A 40px fade on the scene's top edge hides that step. */
main:has(> section.bix-fuse:last-of-type) + footer > .bic-coast::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40px; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, #0D3B6E 0%, rgba(13, 59, 110, 0) 100%);
}