/* BeachBox: Homeowner CTA banner in the HomeRunner Explorer grid.
   Upload to /wp-content/uploads/owner-banner/ and enqueue via the PHP snippet.
   Layout shared by all styles; each --style block sets its own palette.
   Radius 15px matches the other in-grid BeachBox cards (no-results state);
   buttons are brand pills (999px). Copy colors pass WCAG AA on their
   background (verified), except the coral style's small copy: white-on-coral
   is the brand's own CTA pairing, kept by client call (title still passes
   as large bold text). */

/* Bree Rg is loaded by the Elementor kit on most pages, but a raw injected
   node cannot rely on that, so declare it defensively against the same-origin
   files already on the site (they only load if something uses the family). */
@font-face{font-family:'Bree Rg';src:url('/wp-content/uploads/2025/08/fonnts.com-Bree_Semibold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Bree Rg';src:url('/wp-content/uploads/2025/08/fonnts.com-Bree_Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}

/* Layout (shared by all styles). The 8px gutter compensation matches
   HomeRunner's default .hfse-properties flex grid (-8px left margin). */
.hfse-properties > .bbx-owner-banner{flex:0 0 100%;width:100%;max-width:100%;box-sizing:border-box;padding-left:8px;margin-bottom:8px}
.bbx-owner-banner-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px 28px;border-radius:15px;padding:26px 30px;font-family:var(--e-global-typography-secondary-font-family,'Jost',sans-serif);text-decoration:none !important;transition:box-shadow .32s cubic-bezier(.16,1,.3,1),transform .32s cubic-bezier(.16,1,.3,1)}
.bbx-owner-banner-inner:hover,.bbx-owner-banner-inner:focus{text-decoration:none !important;transform:translateY(-2px)}
.bbx-owner-banner-copy{flex:1 1 300px;min-width:0}
.bbx-owner-banner-eyebrow{font-size:11px;font-weight:600;letter-spacing:2.2px;text-transform:uppercase;line-height:1;margin:0 0 8px}
.bbx-owner-banner-title{font-family:var(--e-global-typography-primary-font-family,'Bree Rg',sans-serif);font-size:22px;font-weight:600;line-height:1.25;margin:0 0 5px;text-transform:none !important;overflow-wrap:break-word;word-break:break-word}
.bbx-owner-banner-text{font-size:17px;font-weight:400;line-height:1.55;margin:0;overflow-wrap:break-word;word-break:break-word}
.bbx-owner-banner-btn{display:inline-block;flex:0 0 auto;font-family:var(--e-global-typography-secondary-font-family,'Jost',sans-serif);font-size:15px;font-weight:600;letter-spacing:.2px;line-height:1;padding:15px 30px;border-radius:999px;white-space:nowrap;transition:background .32s cubic-bezier(.16,1,.3,1),color .32s cubic-bezier(.16,1,.3,1)}

/* Style: CORAL (solid brand coral, white copy, kit-native white pill button).
   White-on-coral is the brand's own CTA pairing (3.2:1): the title passes AA
   as large bold text; the small copy sits below strict AA by client call. */
.bbx-owner-banner--coral .bbx-owner-banner-inner{background:#E76957 !important;box-shadow:0 6px 18px rgba(207,77,54,.20)}
.bbx-owner-banner--coral .bbx-owner-banner-inner:hover{box-shadow:0 10px 26px rgba(207,77,54,.32)}
.bbx-owner-banner--coral .bbx-owner-banner-eyebrow{color:#FEFBFB !important}
.bbx-owner-banner--coral .bbx-owner-banner-title{color:#FFFFFF !important}
.bbx-owner-banner--coral .bbx-owner-banner-text{color:#FEFBFB !important}
.bbx-owner-banner--coral .bbx-owner-banner-btn{background:#FFFFFF !important;color:#1E1E1E !important}
.bbx-owner-banner--coral .bbx-owner-banner-inner:hover .bbx-owner-banner-btn{background:#D3D3D3 !important;color:#1E1E1E !important}

/* Style: WHITE (white card, cool-grey border, dark-coral eyebrow, coral button) */
.bbx-owner-banner--white .bbx-owner-banner-inner{background:#FFFFFF !important;border:1px solid #E7EAED;box-shadow:0 6px 18px rgba(30,30,30,.06)}
.bbx-owner-banner--white .bbx-owner-banner-inner:hover{box-shadow:0 10px 26px rgba(30,30,30,.12)}
.bbx-owner-banner--white .bbx-owner-banner-eyebrow{color:#C24A38 !important}
.bbx-owner-banner--white .bbx-owner-banner-title{color:#1E1E1E !important}
.bbx-owner-banner--white .bbx-owner-banner-text{color:#54595F !important}
.bbx-owner-banner--white .bbx-owner-banner-btn{background:#E76957 !important;color:#FFFFFF !important}
.bbx-owner-banner--white .bbx-owner-banner-inner:hover .bbx-owner-banner-btn{background:#CF4D36 !important;color:#FFFFFF !important}

/* Style: BLUSH (soft blush sand card, ink eyebrow, coral button) */
.bbx-owner-banner--blush .bbx-owner-banner-inner{background:#FBEFEA !important;box-shadow:0 6px 18px rgba(30,30,30,.06)}
.bbx-owner-banner--blush .bbx-owner-banner-inner:hover{box-shadow:0 10px 26px rgba(30,30,30,.12)}
.bbx-owner-banner--blush .bbx-owner-banner-eyebrow{color:#1E1E1E !important}
.bbx-owner-banner--blush .bbx-owner-banner-title{color:#1E1E1E !important}
.bbx-owner-banner--blush .bbx-owner-banner-text{color:#54595F !important}
.bbx-owner-banner--blush .bbx-owner-banner-btn{background:#E76957 !important;color:#FFFFFF !important}
.bbx-owner-banner--blush .bbx-owner-banner-inner:hover .bbx-owner-banner-btn{background:#CF4D36 !important;color:#FFFFFF !important}

/* Style: SKY (brand sky blue, ink copy, kit-native white pill button) */
.bbx-owner-banner--sky .bbx-owner-banner-inner{background:#88AAE0 !important;box-shadow:0 6px 18px rgba(38,74,140,.18)}
.bbx-owner-banner--sky .bbx-owner-banner-inner:hover{box-shadow:0 10px 26px rgba(38,74,140,.30)}
.bbx-owner-banner--sky .bbx-owner-banner-eyebrow{color:#1E1E1E !important}
.bbx-owner-banner--sky .bbx-owner-banner-title{color:#1E1E1E !important}
.bbx-owner-banner--sky .bbx-owner-banner-text{color:#1E1E1E !important}
.bbx-owner-banner--sky .bbx-owner-banner-btn{background:#FFFFFF !important;color:#1E1E1E !important}
.bbx-owner-banner--sky .bbx-owner-banner-inner:hover .bbx-owner-banner-btn{background:#D3D3D3 !important;color:#1E1E1E !important}

/* Style: DARK (brand ink card, cream eyebrow, coral button) */
.bbx-owner-banner--dark .bbx-owner-banner-inner{background:#1E1E1E !important;box-shadow:0 6px 18px rgba(0,0,0,.22)}
.bbx-owner-banner--dark .bbx-owner-banner-inner:hover{box-shadow:0 10px 26px rgba(0,0,0,.34)}
.bbx-owner-banner--dark .bbx-owner-banner-eyebrow{color:#FDDF9B !important}
.bbx-owner-banner--dark .bbx-owner-banner-title{color:#FFFFFF !important}
.bbx-owner-banner--dark .bbx-owner-banner-text{color:#E7EAED !important}
.bbx-owner-banner--dark .bbx-owner-banner-btn{background:#E76957 !important;color:#FFFFFF !important}
.bbx-owner-banner--dark .bbx-owner-banner-inner:hover .bbx-owner-banner-btn{background:#CF4D36 !important;color:#FFFFFF !important}

@media (max-width:640px){
	.bbx-owner-banner-inner{padding:22px 20px;gap:16px}
	.bbx-owner-banner-title{font-size:20px}
	.bbx-owner-banner-btn{flex:1 1 100%;width:100%;min-width:0;text-align:center;white-space:normal;line-height:1.3}
}