/* Local-SEO worklist 2026-10-21: styles for elements added by guarded element writes.
   The launcher cannot regenerate post-<id>.min.css, so new elements get their rules here.
   Specificity is raised with `html body` because FlyingPress inlines sandbox CSS ahead of Bricks. */
html body #brxe-bpdir5 { width: 100%; height: 410px; border-radius: 24px; overflow: hidden; }
html body #brxe-bpdir4 a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
html body #brxe-bpdir4 p + p { margin-top: var(--space-xs); }
@media (max-width: 478px) { html body #brxe-bpdir5 { height: 320px; } }

html body #brxe-bpdir5 { margin-top: var(--space-s); }
/* City-page "Getting here" sections (bp-local-route). */
html body .bp-local-route { padding-top: var(--section-space-s); padding-bottom: var(--section-space-s); }
html body .bp-local-route > .brxe-container { row-gap: var(--space-xs); }
html body .bp-local-route a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
html body .bp-local-route p + p { margin-top: var(--space-xs); }
/* Blog-post local link block (beyondpets-post-local-links.php). */
html body .bp-local-cta { margin-top: var(--space-l); padding: var(--space-m); border-radius: 16px; background: var(--primary-ultra-light, #eef5f9); border-left: 4px solid var(--primary); }
html body .bp-local-cta .bp-local-cta__title { font-weight: 700; font-size: 1.15em; margin-bottom: var(--space-xs); }
html body .bp-local-cta ul { margin: var(--space-xs) 0 0; padding-left: 1.2em; }
html body .bp-local-cta a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }

/* /pet-emergencies/ (40272): button, note and token rules that previously lived only in post-3607.min.css. */
html body #brx-content .bp-build.bp-restored-40272{--bp-ink:#185575;--bp-teal:#087e72;--bp-mint:#e5f5ef;font-size:1.0625rem;line-height:1.65}
html body #brx-content .bp-build.bp-restored-40272 .bp-button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:13px 24px;border-radius:100px;background:var(--bp-teal);color:#fffdf8;text-decoration:none;font-weight:700;line-height:1.4;transition:background .18s,transform .18s}
html body #brx-content .bp-build.bp-restored-40272 .bp-button:hover,html body #brx-content .bp-build.bp-restored-40272 .bp-button:focus-visible{background:#09695f;transform:translateY(-2px)}
html body #brx-content .bp-build.bp-restored-40272 .bp-note{font-size:.9375rem!important;color:#42616b;line-height:1.55;max-width:72ch}
/* replaces the per-element margin-top:16px the /emergencies/ "Hospital website & directions" lines had */
html body #brx-content .bp-build.bp-restored-40272 .bp-existing-hospital .bp-button+.brxe-text-basic{margin-top:16px}
@media (prefers-reduced-motion:reduce){html body #brx-content .bp-build.bp-restored-40272 .bp-button{transition:none;transform:none}}

/* Area + cat pages (bp-area-*), 2026-10-21. Append to late-beyondpets-local-seo.css AFTER the bp-local-route rules
   (the .bp-area-prose link colour must win over .bp-local-route a at equal specificity).
   New pages carry no per-element styles: post-<id>.min.css is not regenerated by the launcher write path.
   `html body` raises specificity because FlyingPress inlines sandbox CSS ahead of Bricks CSS. */

/* Layout shell: Bricks sets .brxe-container {width:1100px} with no max-width, so cap it here. */
html body .bp-area-hero,
html body .bp-area-section { overflow-x: clip; }
html body .bp-area-section { padding-block: var(--section-space-s); padding-inline: var(--gutter); }
html body .bp-area-wrap { width: 100%; max-width: 72rem; min-width: 0; margin-inline: auto; row-gap: 1rem; }
html body .bp-area-wrap > * { max-width: 100%; min-width: 0; }

/* Hero: same secondary-to-primary direction as the city-page heroes, darkened so white text passes AA. */
html body .bp-area-hero {
  padding-block: clamp(2.4rem, 1.4rem + 4vw, 4.3rem);
  padding-inline: var(--gutter);
  background: linear-gradient(135deg, var(--secondary) 0%, var(--primary-dark) 100%);
  color: var(--white);
}
html body .bp-area-hero .bp-area-wrap { align-items: center; text-align: center; }
html body .bp-area-hero__title {
  color: var(--white);
  font-size: clamp(2.25rem, 1.7rem + 2.2vw, 3.125rem);
  line-height: 1.1;
  text-align: center;
  overflow-wrap: break-word;
  margin: 0;
}
html body .bp-area-hero__lead { max-width: 46rem; color: var(--white); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem); line-height: 1.55; }
html body .bp-area-hero__lead strong { color: var(--white); }

/* Buttons keep the theme's button styles (style: dark/light in the hero, primary/secondary below). */
html body .bp-area-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 0.5rem; width: auto; }
html body .bp-area-hero .bp-area-actions { justify-content: center; }
html body .bp-area-actions .bricks-button { min-height: 44px; gap: 0.5em; }
/* Theme teal (#099395) on white is 3.6:1; use darker tokens on these pages only. */
html body .bp-area-hero .bricks-button.bricks-background-dark { color: var(--secondary); }
html body .bp-area-cta .bricks-button.bricks-background-primary { background-color: var(--primary-dark); color: var(--white); }
html body .bp-area-cta .bricks-button.bricks-background-secondary { color: var(--primary-dark); border-color: var(--primary-dark); }
@media (max-width: 478px) {
  html body .bp-area-actions { width: 100%; }
  html body .bp-area-actions .bricks-button { width: 100%; }
}

/* Body copy. */
html body .bp-area-prose { width: 100%; max-width: 46rem; line-height: 1.6; }
html body .bp-area-prose p + p { margin-top: var(--space-xs); }
html body .bp-area-prose ul { list-style: disc; margin: 0; padding-left: 1.25em; }
html body .bp-area-prose li + li { margin-top: 0.4em; }
html body .bp-area-prose a { color: var(--primary-dark); text-decoration: underline; text-underline-offset: 2px; }

/* Tinted band, hours card + care list split. */
html body .bp-area-section--tint { background-color: var(--tertiary-ultra-light); }
html body .bp-area-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-m); width: 100%; }
html body .bp-area-card,
html body .bp-area-col { row-gap: 1rem; min-width: 0; }
html body .bp-area-card { padding: clamp(1.25rem, 1rem + 1vw, 2rem); border-radius: 16px; background-color: var(--white); border: 1px solid rgba(24, 85, 117, 0.15); }
html body .bp-area-card h2 { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.9rem); }
@media (min-width: 768px) {
  html body .bp-area-split { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; }
}

/* Closing CTA band (matches the city pages' tertiary-trans-40 bands). */
html body .bp-area-cta { background-color: var(--tertiary-trans-40); }
html body .bp-area-cta .bp-area-wrap { align-items: center; text-align: center; }
html body .bp-area-cta .bp-area-prose { margin-inline: auto; }
html body .bp-area-cta .bp-area-prose ul { display: inline-block; text-align: left; }
html body .bp-area-cta .bp-area-actions { justify-content: center; }