/* Brand to Bowl theme styles */

:root {
	--btb-teal: #00656E;
	--btb-sea: #0A434B;
	--btb-orange: #DC582A;
	--btb-ball: #DDB04F;
	--btb-aqua: #CFE6E3;
	--btb-cream: #F5EEDF;
	--btb-stone: #BFB8AF;
	--btb-charcoal: #3D3935;
}

html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 24px; }

/* Remove gaps between header, page & footer */
.wp-site-blocks > * { margin-block-start: 0; }
.btb-main > .wp-block-post-content > *:first-child { margin-block-start: 0; }
.btb-main > .wp-block-post-content > .btb-cta:last-child { margin-block-end: 0; }

/* ---------- Header ---------- */
.btb-site-header { padding: 20px 24px; }
.btb-header { gap: 16px; margin-inline: auto; max-width: 1240px; }
.btb-logo {
	margin: 0;
	display: inline-flex !important; align-items: center;
	width: auto !important;
	background: var(--btb-teal);
	padding: 10px 18px;
	border-radius: 18px 24px 18px 22px;
}
.btb-logo a { display: flex; align-items: center; }
.btb-logo img { height: 38px !important; width: auto !important; display: block; }
.btb-nav { gap: 28px; font-size: 16px; font-weight: 500; }
.btb-nav .wp-block-navigation-item__content { color: var(--btb-sea); text-decoration: none; }
.btb-nav .wp-block-navigation-item__content:hover { color: var(--btb-teal); }
.btb-nav .btb-nav-cta > .wp-block-navigation-item__content {
	background: var(--btb-teal);
	color: #FFFFFF;
	font-weight: 600;
	padding: 12px 24px;
	border-radius: 14px 18px 14px 16px;
}
.btb-nav .btb-nav-cta > .wp-block-navigation-item__content:hover { background: var(--btb-sea); color: #FFFFFF; }
.btb-nav .wp-block-navigation__responsive-container-open svg { width: 30px; height: 30px; color: var(--btb-teal); }
.btb-nav .wp-block-navigation__responsive-container.is-menu-open { padding: 32px 24px; }
.btb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 24px; font-size: 22px; }

/* ---------- Type ---------- */
.btb-eyebrow {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--btb-orange);
	margin-block: 0;
}
.btb-hero-title { font-size: clamp(38px, 4.6vw, 62px); line-height: 1.08; margin: 0; }
.btb-page-title { font-size: clamp(34px, 4vw, 52px); line-height: 1.12; }
.btb-sub { font-size: 20px; line-height: 1.6; max-width: 520px; }
.btb-lead { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.5; font-weight: 500; color: var(--btb-sea); }
.btb-lead.btb-left { font-size: clamp(22px, 2.2vw, 28px); max-width: 720px; }
.btb-body { font-size: 20px; line-height: 1.7; }
.btb-textlink { font-size: 17px; font-weight: 600; }
.btb-meta { font-size: 15px; color: #5A5550; }
.btb-policy-heading { font-size: 22px !important; margin-top: 40px !important; }

/* ---------- Sections ---------- */
.btb-section { padding-block: 96px; }
.btb-section.btb-top { padding-top: 48px; }
.btb-section.btb-tight-top { padding-top: 0; }
.btb-hero { padding-top: 32px; }
.btb-center { text-align: center; }
.btb-center > * { margin-inline: auto !important; }
.btb-narrow > * { max-width: 760px; }
.btb-medium > * { max-width: 860px; }
.btb-reading > * { max-width: 720px; }
.btb-intro > * { max-width: 1240px; }

.btb-cols { gap: 64px !important; align-items: center !important; }
@media (min-width: 782px) {
	.btb-cols > .wp-block-column { flex: 1 1 0 !important; min-width: 0; }
	.btb-hero .btb-cols > .wp-block-column:first-child { flex: 0 1 44% !important; }
	.btb-contact-cols > .wp-block-column:first-child { flex: 0 1 60% !important; }
}
.btb-hero-text { display: flex; flex-direction: column; gap: 24px; }
.btb-hero-text > * { margin: 0 !important; }

/* ---------- Photos: organic shapes, fixed proportions ---------- */
.btb-photo { margin: 0; }
.btb-photo img { width: 100%; height: auto; object-fit: cover; display: block; }
.btb-photo-hero img     { aspect-ratio: 7 / 6;  border-radius: 120px 48px 140px 56px; }
.btb-photo-wide img     { aspect-ratio: 16 / 7; border-radius: 64px 160px 64px 140px; }
.btb-photo-wide-alt img { aspect-ratio: 16 / 7; border-radius: 64px 160px 64px 140px; }
.btb-photo-help img     { aspect-ratio: 6 / 5;  border-radius: 48px 140px 56px 120px; }
.btb-photo-walk img     { aspect-ratio: 2 / 1;  border-radius: 160px 64px 140px 64px; }
.btb-photo-remote img   { aspect-ratio: 6 / 5;  border-radius: 140px 48px 120px 56px; }
.btb-photo-contact img  { aspect-ratio: 4 / 5;  border-radius: 120px 40px 110px 48px; }
.btb-photo-pet-a img    { aspect-ratio: 4 / 5;  border-radius: 80px 32px 72px 32px; }
.btb-photo-pet-b img    { aspect-ratio: 4 / 5;  border-radius: 32px 80px 32px 72px; }
.btb-photo-pet-c img    { aspect-ratio: 4 / 5;  border-radius: 72px 32px 80px 32px; }

/* ---------- How we help list ---------- */
.btb-services { list-style: none; padding: 0; margin: 0; }
.btb-services li {
	padding: 14px 0;
	border-top: 1px solid var(--btb-stone);
	font-size: 18px;
	line-height: 1.5;
}
.btb-services li:last-child { border-bottom: 1px solid var(--btb-stone); }
.btb-services strong { display: block; font-size: 15px; font-weight: 600; color: var(--btb-teal); margin-bottom: 2px; }

/* ---------- Walk photo + overlay ---------- */
.btb-walk { position: relative; }
.btb-overlay-box {
	position: relative;
	max-width: 520px;
	margin: -120px 0 0 auto !important;
	background: var(--btb-sea);
	border-radius: 40px 56px 40px 48px;
	padding: 40px 44px;
}
.btb-overlay-box p { margin: 0; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.45; font-weight: 600; color: #FFFFFF; }

/* ---------- Meet the Pack ---------- */
.btb-pack { gap: 32px !important; margin-top: 40px !important; }
.btb-pack .wp-block-column > * { margin-block: 0; }
.btb-name { font-size: 19px; font-weight: 600; color: var(--btb-sea); margin-top: 14px !important; }
.btb-role { font-size: 16px; margin-top: 4px !important; }

/* ---------- Beliefs ---------- */
.btb-beliefs { list-style: none; padding: 0; margin-top: 24px; display: flex; flex-direction: column; gap: 18px; }
.btb-beliefs li { font-size: clamp(20px, 2vw, 26px); line-height: 1.4; font-weight: 500; color: var(--btb-teal); }

/* ---------- CTA band & footer ---------- */
.btb-cta {
	background: var(--btb-teal);
	border-radius: 96px 96px 0 0;
	padding: 88px 24px !important;
	margin-top: 0 !important;
}
.btb-cta-inner { max-width: 1240px; margin-inline: auto !important; gap: 32px; }
.btb-cta-inner > * { margin: 0 !important; }
.btb-cta h2 { color: #FFFFFF; font-size: clamp(30px, 3.2vw, 42px); line-height: 1.15; }

.btb-footer { background: var(--btb-teal); padding: 40px 24px !important; border-radius: 96px 96px 0 0; }
body:has(.btb-cta) .btb-footer { border-radius: 0; padding-top: 0 !important; }
body:has(.btb-cta) .btb-footer-inner { border-top: 1px solid var(--btb-aqua); padding-top: 28px; }
.btb-footer-inner { max-width: 1240px; margin-inline: auto !important; gap: 16px; color: var(--btb-cream); }
.btb-footer-logo { margin: 0; }
.btb-footer-logo img { height: 34px !important; width: auto !important; display: block; }
.btb-footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; font-size: 15px; margin: 0; }
.btb-footer a { color: var(--btb-cream); }
.btb-footer a:hover { color: #FFFFFF; }

/* ---------- Contact ---------- */
.btb-contact-cols { align-items: flex-start !important; }
.btb-aside-title { font-size: 26px !important; }
.btb-contact-links { font-size: 17px; font-weight: 600; line-height: 2; }
.btb-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.btb-field { display: flex; flex-direction: column; gap: 8px; }
.btb-field-wide { grid-column: 1 / -1; }
.btb-field label { font-size: 15px; font-weight: 600; color: var(--btb-sea); }
.btb-optional { font-weight: 400; color: #5A5550; }
.btb-field input,
.btb-field textarea {
	font-family: inherit;
	font-size: 16px;
	padding: 14px 16px;
	border: 1.5px solid var(--btb-stone);
	border-radius: 12px;
	background: #FFFFFF;
	color: var(--btb-charcoal);
	width: 100%;
	box-sizing: border-box;
}
.btb-field textarea { resize: vertical; }
.btb-field input:focus,
.btb-field textarea:focus { outline: 2px solid var(--btb-teal); outline-offset: 1px; border-color: var(--btb-teal); }
.btb-form-actions { margin: 24px 0 0; }
.btb-form-actions button { border: none; cursor: pointer; font-family: inherit; }
.btb-form-note { font-size: 14px; color: #5A5550; margin-top: 16px; }
.btb-form-success { font-size: 22px; font-weight: 600; color: var(--btb-teal); background: var(--btb-aqua); padding: 28px 32px; border-radius: 28px 36px 28px 32px; }
.btb-form-error { font-weight: 600; color: #9E3A16; }
.btb-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Phones & small tablets ---------- */
@media (max-width: 781px) {
	.btb-section { padding-block: 64px; }
	.btb-section.btb-tight-top { padding-top: 0; }
	.btb-cols { gap: 40px !important; }
	.btb-cols-reverse-mobile { flex-direction: column-reverse; }
	.btb-photo img { border-radius: 56px 24px 64px 28px !important; }
	.btb-photo-wide img, .btb-photo-wide-alt img, .btb-photo-walk img { aspect-ratio: 4 / 3; }
	.btb-overlay-box { margin: -48px 16px 0 16px !important; padding: 28px; }
	.btb-cta { border-radius: 56px 56px 0 0; padding: 64px 24px !important; }
	.btb-footer { border-radius: 56px 56px 0 0; }
	.btb-header { flex-wrap: nowrap !important; }
	.btb-logo img { height: 30px !important; }
}

.btb-lead.btb-left { margin-left: 0 !important; }
.btb-section.btb-intro { padding-bottom: 48px; }

.btb-nav .wp-block-navigation__responsive-container.is-menu-open { background: #FFFFFF; color: var(--btb-sea); }
.btb-nav .is-menu-open .wp-block-navigation-item__content { color: var(--btb-sea); }
.btb-nav .is-menu-open .btb-nav-cta > .wp-block-navigation-item__content { color: #FFFFFF; padding: 12px 24px !important; }
.btb-nav .wp-block-navigation__responsive-container-close svg { width: 30px; height: 30px; color: var(--btb-teal); }
