/*
 * Site styles for the public pages. Tailwind in app.css is a purged 2021
 * build that can't be rebuilt here, so new components live in this file.
 */

/* Layout */
.zp-page { display: flex; flex-direction: column; min-height: 100vh; }
.zp-grow { flex: 1 0 auto; }
.zp-container { max-width: 1280px; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .zp-container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .zp-container { padding: 0 2rem; } }
.zp-section { padding: 4rem 0; }
.zp-tint { background: #EEF8F7; }
.zp-section-title { color: #00244B; font-size: 1.75rem; font-weight: 800; line-height: 1.2; text-align: center; }
.zp-lead { max-width: 48rem; margin: 1rem auto 0; color: #00244B; font-size: 1.0625rem; line-height: 1.7; text-align: center; }
.zp-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Buttons */
.zp-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .625rem 1.25rem; border: 0; border-radius: .5rem; font-size: .9375rem; font-weight: 700; line-height: 1.25; cursor: pointer; transition: background-color .15s, color .15s, box-shadow .15s; }
.zp-btn svg { flex-shrink: 0; width: 1.125rem; height: 1.125rem; }
.zp-btn-light { background: #fff; color: #00244B; box-shadow: 0 1px 2px rgba(0, 36, 75, .15); }
.zp-btn-light:hover { background: #EEF8F7; }
.zp-btn-navy { background: #00244B; color: #fff; }
.zp-btn-navy:hover { background: #346D6B; }
.zp-btn-teal { background: #57B6B2; color: #fff; }
.zp-btn-teal:hover { background: #4EA4A0; }
.zp-btn-lg { padding: .875rem 1.5rem; font-size: 1.0625rem; }
.zp-btn-block { width: 100%; }
.zp-btn:focus-visible, .zp-chip:focus-visible, .zp-logo:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.zp-btn-navy:focus-visible, .zp-btn-teal:focus-visible { outline-color: #57B6B2; }

/* Header */
.zp-topbar { background: #57B6B2; padding: 1.5rem 0; }
.zp-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.zp-logo { color: #00244B; font-size: 1.5rem; font-weight: 800; line-height: 1; letter-spacing: -.025em; }
.zp-logo span { color: #fff; }
@media (min-width: 640px) { .zp-logo { font-size: 1.875rem; } }
.zp-nav-actions { display: flex; gap: .75rem; }
@media (max-width: 639px) {
    .zp-nav-actions .zp-btn { padding: .625rem; }
    .zp-nav-actions .zp-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}

/* Hero */
.zp-hero { background: #57B6B2; padding-top: 1.5rem; }
.zp-hero-body { padding: 3rem 0 0; text-align: center; }
@media (min-width: 768px) { .zp-hero-body { padding-top: 4.5rem; } }
.zp-hero-title { color: #fff; font-size: 3rem; font-weight: 800; line-height: 1; letter-spacing: -.025em; }
.zp-hero-sub { display: block; margin-top: 1rem; color: #00244B; font-size: 1.5rem; line-height: 1.2; letter-spacing: -.01em; }
@media (min-width: 640px) { .zp-hero-title { font-size: 3.75rem; } .zp-hero-sub { font-size: 2.25rem; } }
.zp-hero-lead { max-width: 42rem; margin: 1.25rem auto 0; color: #fff; font-size: 1.125rem; line-height: 1.6; }
@media (min-width: 768px) { .zp-hero-lead { font-size: 1.25rem; } }
.zp-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem .75rem; margin-top: 1.5rem; }
.zp-chip { display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .875rem; border: 1px solid rgba(255, 255, 255, .4); border-radius: 9999px; background: rgba(255, 255, 255, .18); color: #fff; font-size: .875rem; font-weight: 700; }
.zp-chip svg { flex-shrink: 0; width: 1rem; height: 1rem; }
.zp-chip-star { color: #F5B301; }
a.zp-chip:hover { background: rgba(255, 255, 255, .3); }

/* Bid card */
.zp-bid { padding-top: 3rem; background: linear-gradient(to bottom, #57B6B2 50%, #fff 50%); }
.zp-bid-card { display: grid; gap: 1.5rem; align-items: center; padding: 1.75rem 1.5rem; border-radius: 1.25rem; background: #00244B; box-shadow: 0 24px 48px -24px rgba(0, 36, 75, .6); }
@media (min-width: 768px) { .zp-bid-card { padding: 3rem; } }
@media (min-width: 1024px) { .zp-bid-card { grid-template-columns: 5fr 7fr; gap: 2.5rem; padding: 3.5rem 4rem; } }
.zp-bid-title { color: #fff; font-size: 1.5rem; font-weight: 800; line-height: 1.2; }
@media (min-width: 640px) { .zp-bid-title { font-size: 1.875rem; } }
.zp-bid-text { margin-top: .5rem; color: #BFC8D2; font-size: 1.125rem; }
.zp-bid-form { display: grid; grid-template-columns: 7fr 5fr; gap: .625rem; }
.zp-bid-form .zp-btn { grid-column: 1 / -1; }
@media (min-width: 640px) { .zp-bid-form { grid-template-columns: 5fr 3fr 4fr; } .zp-bid-form .zp-btn { grid-column: auto; } }

/* Forms */
.zp-label { display: block; margin-bottom: .375rem; color: #00244B; font-size: .875rem; font-weight: 700; }
.zp-field { position: relative; }
.zp-input { display: block; width: 100%; padding: .875rem 1rem; border: 1px solid #BFC8D2; border-radius: .5rem; background: #fff; color: #00244B; font-size: 1rem; line-height: 1.5; transition: border-color .15s, box-shadow .15s; }
.zp-input::placeholder { color: #4D6681; opacity: 1; }
.zp-input:focus { border-color: #57B6B2; outline: none; box-shadow: 0 0 0 3px rgba(87, 182, 178, .35); }
.zp-bid-form .zp-input { border-color: transparent; }
.zp-input-error, .zp-input-error:focus { border-color: #ef4444; padding-right: 2.75rem; }
.zp-field-icon { position: absolute; top: 0; right: .875rem; bottom: 0; display: flex; align-items: center; color: #ef4444; pointer-events: none; }
.zp-field-icon svg { width: 1.25rem; height: 1.25rem; }
.zp-form-grid { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .zp-form-grid-split { grid-template-columns: 3fr 2fr; } .zp-form-grid-split-rev { grid-template-columns: 2fr 3fr; } }
.zp-form { margin-top: 2rem; }
.zp-form-heading { padding-top: 1.5rem; border-top: 1px solid #E6E9ED; color: #00244B; font-size: 1.125rem; font-weight: 800; }

/* Cards */
.zp-card { padding: 1.75rem; border-radius: 1rem; background: #fff; box-shadow: 0 1px 3px rgba(0, 36, 75, .08), 0 12px 24px -16px rgba(0, 36, 75, .25); }
.zp-usps { display: grid; gap: 1.5rem; margin-top: 3rem; }
@media (min-width: 768px) { .zp-usps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.zp-icon { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 9999px; background: #57B6B2; color: #fff; }
.zp-icon svg { width: 1.5rem; height: 1.5rem; }
.zp-card-title { margin-top: 1.125rem; color: #00244B; font-size: 1.125rem; font-weight: 800; }
.zp-card-text { margin-top: .5rem; color: #00244B; line-height: 1.6; }

/* Contact form page */
.zp-form-layout { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 1024px) { .zp-form-layout { grid-template-columns: 7fr 5fr; gap: 3rem; } }
.zp-form-card { padding: 2rem 1.5rem; }
@media (min-width: 640px) { .zp-form-card { padding: 2.5rem; } }
.zp-page-title { color: #00244B; font-size: 1.875rem; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
@media (min-width: 640px) { .zp-page-title { font-size: 2.25rem; } }
.zp-page-lead { margin-top: .75rem; color: #4D6681; font-size: 1.125rem; }
.zp-photo { overflow: hidden; border-radius: 1rem; box-shadow: 0 24px 48px -24px rgba(0, 36, 75, .45); }
.zp-photo img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
@media (min-width: 1024px) { .zp-photo { position: sticky; top: 2rem; } .zp-photo img { aspect-ratio: 4 / 5; } }

/* Confirmation */
.zp-done { max-width: 34rem; margin: 0 auto; padding: 3rem 1.5rem; text-align: center; }
.zp-done .zp-btn { margin-top: 2rem; }
.zp-done .zp-icon { width: 4rem; height: 4rem; margin: 0 auto 1.25rem; }
.zp-done .zp-icon svg { width: 2rem; height: 2rem; }

/* Footer */
.zp-footer { background: #00244B; color: #fff; }
.zp-footer-inner { display: flex; flex-direction: column-reverse; gap: .75rem; padding-top: 1.25rem; padding-bottom: 1.25rem; font-size: .875rem; }
@media (min-width: 768px) { .zp-footer-inner { flex-direction: row; align-items: center; justify-content: space-between; } }
.zp-footer button { text-decoration: underline; }
.zp-footer-brand { font-size: 1.0625rem; }
.zp-footer-brand a { font-size: 1.25rem; font-weight: 700; }
.zp-footer-brand a:hover, .zp-footer button:hover { color: #D5EDEC; }

/* Google reviews */
.gr { background: #EEF8F7; padding: 4rem 0; }
.gr-inner { max-width: 1280px; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .gr-inner { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .gr-inner { padding: 0 2rem; } }

.gr-head { text-align: center; }
.gr-title { color: #00244B; font-size: 1.75rem; font-weight: 800; line-height: 1.2; }
.gr-summary { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.5rem; margin-top: 1.5rem; padding: 1rem 1.5rem; background: #fff; border-radius: 1rem; box-shadow: 0 1px 3px rgba(0, 36, 75, .08); }
.gr-score { color: #00244B; font-size: 2.75rem; font-weight: 800; line-height: 1; }
.gr-rating { text-align: left; }
.gr-count { display: flex; align-items: center; gap: .375rem; margin-top: .375rem; color: #4D6681; font-size: .875rem; }
.gr-button { display: inline-block; padding: .625rem 1.25rem; border-radius: .5rem; background: #00244B; color: #fff; font-size: .875rem; font-weight: 700; transition: background-color .15s; }
.gr-button:hover { background: #346D6B; }

.gr-stars { position: relative; display: inline-flex; line-height: 0; }
.gr-stars-base, .gr-stars-fill { display: flex; gap: 2px; }
.gr-stars-base { color: #D5EDEC; }
.gr-stars-fill { position: absolute; top: 0; left: 0; overflow: hidden; color: #F5B301; }
.gr-stars svg { flex-shrink: 0; width: 1.25rem; height: 1.25rem; fill: currentColor; }
.gr-card .gr-stars svg { width: 1.125rem; height: 1.125rem; }

.gr-carousel { position: relative; margin-top: 2.5rem; }
.gr-track { position: relative; display: flex; align-items: flex-start; gap: 1.5rem; margin: 0; padding: .5rem .25rem 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; list-style: none; }
.gr-track::-webkit-scrollbar { display: none; }
.gr-track:focus-visible { outline: 2px solid #57B6B2; outline-offset: 4px; border-radius: 1rem; }

.gr-card { position: relative; display: flex; flex: 0 0 85%; flex-direction: column; gap: .875rem; padding: 1.5rem; background: #fff; border-radius: 1rem; box-shadow: 0 1px 3px rgba(0, 36, 75, .08), 0 12px 24px -16px rgba(0, 36, 75, .25); scroll-snap-align: start; }
@media (min-width: 768px) { .gr-card { flex-basis: calc((100% - 1.5rem) / 2); } }
@media (min-width: 1024px) { .gr-card { flex-basis: calc((100% - 3rem) / 3); } }
.gr-card::before { content: "\201C"; position: absolute; top: .5rem; right: 1.25rem; color: #D5EDEC; font-family: Georgia, serif; font-size: 4.5rem; line-height: 1; }

.gr-author { display: flex; align-items: center; gap: .75rem; padding-right: 2.5rem; }
.gr-avatar { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 9999px; background: #57B6B2; color: #fff; font-size: 1.125rem; font-weight: 800; }
.gr-name { display: block; color: #00244B; font-weight: 700; line-height: 1.3; }
a.gr-name:hover { text-decoration: underline; }
.gr-date { color: #4D6681; font-size: .8125rem; }

.gr-text { color: #00244B; font-size: .9375rem; line-height: 1.6; white-space: pre-line; }
.gr-js .gr-text { display: -webkit-box; min-height: 8em; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 5; }
.gr-js .gr-open .gr-text { display: block; -webkit-line-clamp: unset; }
.gr-more { display: none; align-self: flex-start; padding: 0; border: 0; background: none; color: #346D6B; font-size: .875rem; font-weight: 700; cursor: pointer; }
.gr-js .gr-more { display: block; }
.gr-js .gr-more.gr-more-off { visibility: hidden; }
.gr-more:hover { text-decoration: underline; }

.gr-nav { display: none; }
@media (min-width: 768px) {
    .gr-js .gr-nav:not([hidden]) { position: absolute; top: 9.75rem; z-index: 1; display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 9999px; background: #fff; color: #00244B; box-shadow: 0 2px 8px rgba(0, 36, 75, .2); cursor: pointer; transform: translateY(-50%); }
    .gr-prev { left: -1.25rem; }
    .gr-next { right: -1.25rem; }
    .gr-nav:disabled { opacity: .35; cursor: default; }
}
.gr-dots { display: flex; justify-content: center; gap: .5rem; margin-top: 1rem; }
.gr-dot { width: .5rem; height: .5rem; padding: 0; border: 0; border-radius: 9999px; background: #BFC8D2; cursor: pointer; transition: width .2s, background-color .2s; }
.gr-dot[aria-current="true"] { width: 1.5rem; background: #00244B; }
.gr button:focus-visible, .gr a:focus-visible { outline: 2px solid #57B6B2; outline-offset: 2px; }