/*
Theme Name: Building Permits Florida
Theme URI: https://buildingpermitsflorida.com/
Description: Child theme of Twenty Twenty-Five for Building Permits Florida LLC. Design tokens live in theme.json; this file holds only the component CSS the block editor cannot express. No external resources are loaded.
Author: Building Permits Florida LLC
Template: twentytwentyfive
Version: 0.2.1
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bpf-child
*/

/* ============================================================================
   Building Permits Florida - component layer
   ----------------------------------------------------------------------------
   Design tokens (colour, type, spacing, shadow, radius) are declared once in
   theme.json and reach this file as --wp--preset--* / --wp--custom--* custom
   properties. Nothing below invents a colour: every value is a token.

   TYPOGRAPHY (Microphase 2B.1). The site has exactly two voices, both
   self-hosted inside this theme at assets/fonts/ and both declared once, in
   theme.json, as variable WOFF2 with font-display: swap and weight range
   400-700. Nothing here loads a font.

     --wp--preset--font-family--serif   Source Serif 4   H1, H2, editorial
     --wp--preset--font-family--sans    Source Sans 3    everything else

   There is deliberately no third family. What used to be set in IBM Plex Mono
   - eyebrows, table headers, meta lines, permit numbers, statutory labels -
   is now Source Sans 3 in uppercase with letter-spacing and a heavier weight,
   plus font-variant-numeric: tabular-nums wherever digits have to line up in
   a column. Do not reintroduce a monospace family without a functional need.

   The file is deliberately NOT wrapped in @layer: WordPress prints its
   theme.json global styles unlayered, and unlayered CSS always beats layered
   CSS regardless of specificity. Sections below run base, layout, components,
   utilities, and rely on class specificity plus source order.
   ========================================================================== */

/* --------------------------------------------------------------------------
   BASE - document level behaviour
   -------------------------------------------------------------------------- */

:root {
  --bpf-radius: var(--wp--custom--radius--md);
  --bpf-focus: var(--wp--custom--focus--color);
  --bpf-header-h: var(--wp--custom--header--height-mobile);
}

@media (min-width: 48rem) {
  :root { --bpf-header-h: var(--wp--custom--header--height-desktop); }
}

/* The parent theme does not border-box form controls, which pushed inputs
   past the viewport on narrow screens. One rule, applied once, fixes it. */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }

/* The focus ring is drawn 2px outside the control, so it has to contrast
   with the surface behind it, not with the control. #3D5D7D clears 3:1 on the
   light surfaces (6.86:1 on white) but only reaches 2.10:1 on navy-900, so
   dark surfaces switch the ring to gold (10.40:1 on navy-900, 12.53:1 on
   navy-950). Same token, two values, resolved by inheritance. */
.bpf-header,
.bpf-footer,
.bpf-hero,
.bpf-drawer { --bpf-focus: var(--wp--preset--color--brand-gold); }

/* One visible focus treatment for the whole site. Never removed. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--wp--custom--focus--width) solid var(--bpf-focus);
  outline-offset: var(--wp--custom--focus--offset);
  border-radius: var(--wp--custom--radius--sm);
}

/* Headings should not sit alone at the bottom of a column. */
:where(h1, h2, h3) { text-wrap: balance; }
:where(p, li) { text-wrap: pretty; }

/* Images never overflow and never cause layout shift when sized in HTML. */
:where(img, svg, video) { max-width: 100%; height: auto; }

::selection { background: var(--wp--preset--color--brand-gold); color: var(--wp--preset--color--navy-900); }

/* --------------------------------------------------------------------------
   LAYOUT - page scaffolding
   -------------------------------------------------------------------------- */

.bpf-skip-link {
  position: absolute;
  left: var(--wp--preset--spacing--40);
  top: var(--wp--preset--spacing--40);
  z-index: 100;
  transform: translateY(-200%);
  background: var(--wp--preset--color--navy-900);
  color: #fff;
  padding: .625rem 1rem;
  border-radius: var(--bpf-radius);
  font-weight: 600;
  text-decoration: none;
}
.bpf-skip-link:focus { transform: translateY(0); }

.bpf-section { padding-block: var(--wp--preset--spacing--80); }
@media (min-width: 48rem) {
  .bpf-section { padding-block: clamp(var(--wp--preset--spacing--80), 5vw, 5rem); }
}
.bpf-section--soft { background: var(--wp--preset--color--navy-50); }

.bpf-stack { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--50); }
.bpf-cluster { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--40); align-items: center; }

.bpf-grid { display: grid; gap: var(--wp--preset--spacing--50); }
@media (min-width: 40rem) { .bpf-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .bpf-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 40rem) and (max-width: 61.999rem) { .bpf-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .bpf-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 40rem) and (max-width: 61.999rem) { .bpf-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Every top-level pattern brings its own shell so patterns can be composed
   in any order without a wrapper block around them. */
.bpf-shell {
  max-width: var(--wp--style--global--wide-size, 75rem);
  margin-inline: auto;
  padding-inline: var(--wp--preset--spacing--50);
}

/* Wide content gets its own scroller so the page body never moves sideways. */
.bpf-scroll { overflow-x: auto; }

/* --------------------------------------------------------------------------
   COMPONENTS
   -------------------------------------------------------------------------- */

/* --- Header and primary navigation ------------------------------------ */
.bpf-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--wp--preset--color--navy-900);
  color: #fff;
  box-shadow: var(--wp--preset--shadow--sticky);
}
.bpf-header__inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--40);
  min-height: var(--bpf-header-h);
  max-width: var(--wp--style--global--wide-size);
  margin-inline: auto;
  padding-inline: var(--wp--preset--spacing--50);
}
.bpf-brand {
  flex: none;
  white-space: nowrap;
  font-family: var(--wp--preset--font-family--serif);
  font-size: var(--wp--preset--font-size--md);
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  line-height: 1.15;
}
.bpf-brand span { display: block; font-family: var(--wp--preset--font-family--sans); font-size: var(--wp--preset--font-size--xs); font-weight: 400; color: var(--wp--preset--color--brand-gold); letter-spacing: .08em; text-transform: uppercase; }
.bpf-brand:hover { text-decoration: none; }

.bpf-nav { display: none; }
.bpf-nav ul { display: flex; flex-wrap: nowrap; gap: var(--wp--preset--spacing--40); list-style: none; margin: 0; padding: 0; }
.bpf-nav a {
  white-space: nowrap;
  color: #fff;
  text-decoration: none;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  padding-block: .5rem;
  border-bottom: var(--wp--custom--border--emphasis) solid transparent;
}
.bpf-nav a:hover, .bpf-nav a:focus-visible { border-bottom-color: var(--wp--preset--color--brand-gold); }
.bpf-nav a[aria-current="page"] { border-bottom-color: var(--wp--preset--color--brand-orange); }

.bpf-header__actions { display: flex; flex: none; align-items: center; gap: var(--wp--preset--spacing--30); }
.bpf-header__tel { color: #fff; text-decoration: none; font-weight: 600; font-size: var(--wp--preset--font-size--sm); white-space: nowrap; }
.bpf-header__tel:hover { text-decoration: underline; }
.bpf-header .bpf-btn { min-height: 44px; padding: .5rem 1.25rem; white-space: nowrap; }
/* Below the tablet breakpoint the drawer carries the phone number and the
   actions, so the header keeps only the toggle. */
@media (max-width: 47.999rem) { .bpf-header__actions .bpf-btn { display: none; } }
@media (max-width: 29.999rem) { .bpf-header__tel { display: none; } }

/* The full navigation needs more room than the page's two-column content.
   Keep the drawer toggle through 72.999rem so the header never overflows. */
@media (min-width: 73rem) {
  .bpf-nav { display: block; }
}

/* --- Mobile menu ------------------------------------------------------- */
.bpf-menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  min-width: 44px;
  padding: .5rem .75rem;
  background: transparent;
  color: #fff;
  border: var(--wp--custom--border--control) solid rgba(255,255,255,.55);
  border-radius: var(--bpf-radius);
  font: inherit;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  cursor: pointer;
}
/* Mismo corte de 73rem que usa .bpf-nav, declarado DESPUES de la regla base.
   Una consulta de medios no aporta especificidad: puesta antes, la regla base
   ganaba por orden de origen y el boton se veia tambien en escritorio, junto a
   la navegacion completa. No mover esta consulta por encima del bloque anterior. */
@media (min-width: 73rem) { .bpf-menu-toggle { display: none; } }
.bpf-menu-toggle:hover { border-color: var(--wp--preset--color--brand-gold); }

.bpf-drawer[hidden] { display: none !important; }
.bpf-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--wp--preset--color--navy-950);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: var(--wp--preset--spacing--50);
  overflow-y: auto;
}
.bpf-drawer__head { display: flex; align-items: center; justify-content: space-between; min-height: var(--bpf-header-h); }
.bpf-drawer__close {
  min-height: 44px; min-width: 44px;
  background: transparent; color: #fff;
  border: var(--wp--custom--border--control) solid rgba(255,255,255,.55);
  border-radius: var(--bpf-radius);
  font: inherit; font-weight: 600; cursor: pointer; padding: .5rem .875rem;
}
.bpf-drawer nav ul { list-style: none; margin: var(--wp--preset--spacing--50) 0 0; padding: 0; display: flex; flex-direction: column; }
.bpf-drawer nav a {
  display: block;
  padding: var(--wp--preset--spacing--40) 0;
  color: #fff;
  text-decoration: none;
  font-size: var(--wp--preset--font-size--md);
  font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.bpf-drawer nav a:hover { color: var(--wp--preset--color--brand-gold); }

/* --- Buttons ----------------------------------------------------------- */
.bpf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: .75rem 1.75rem;
  border-radius: var(--bpf-radius);
  border: var(--wp--custom--border--control) solid transparent;
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--base);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--wp--custom--duration--base), border-color var(--wp--custom--duration--base);
}
/* Primary: #002A54 on #FF7A05 = 5.51:1. White on this orange is 2.61:1 and
   is never used. Same rule for amber and gold. */
.bpf-btn--primary { background: var(--wp--preset--color--brand-orange); color: var(--wp--preset--color--navy-900); }
.bpf-btn--primary:hover { background: var(--wp--preset--color--orange-hover); color: var(--wp--preset--color--navy-900); }

.bpf-btn--secondary { background: transparent; color: var(--wp--preset--color--navy-900); border-color: var(--wp--preset--color--navy-900); }
.bpf-btn--secondary:hover { background: var(--wp--preset--color--navy-50); }

.bpf-btn--on-dark { background: var(--wp--preset--color--brand-gold); color: var(--wp--preset--color--navy-900); }
.bpf-btn--on-dark:hover { background: var(--wp--preset--color--brand-amber); color: var(--wp--preset--color--navy-900); }

.bpf-btn--outline-on-dark {
  background: transparent;
  color: var(--wp--preset--color--brand-gold);
  border-color: var(--wp--preset--color--brand-gold);
}
.bpf-btn--outline-on-dark:hover {
  background: var(--wp--preset--color--brand-gold);
  color: var(--wp--preset--color--navy-900);
}

.bpf-btn--quiet { background: transparent; color: var(--wp--preset--color--navy-700); text-decoration: underline; text-underline-offset: 2px; padding-inline: 0; min-height: 44px; }
.bpf-btn--quiet:hover { color: var(--wp--preset--color--navy-900); }

/* --- Hero -------------------------------------------------------------- */
.bpf-hero { background: var(--wp--preset--color--navy-900); color: #fff; }
.bpf-hero__inner {
  max-width: var(--wp--style--global--wide-size);
  margin-inline: auto;
  padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
  display: grid;
  gap: var(--wp--preset--spacing--60);
}
@media (min-width: 62rem) {
  .bpf-hero__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; padding-block: var(--wp--preset--spacing--80); }
}
.bpf-hero h1 { color: #fff; margin: 0 0 var(--wp--preset--spacing--40); }
/* :where() so this rule carries the specificity of .bpf-hero alone (0,1,0)
   instead of (0,1,1). Written as `.bpf-hero p` it outranked .bpf-hero__eyebrow
   below and forced the eyebrow to 20px navy-300 instead of 13px gold. Now both
   rules weigh the same and source order decides, which is what the file already
   assumed. Do not drop the :where(): the bug comes straight back, silently. */
.bpf-hero :where(p) { color: var(--wp--preset--color--navy-300); font-size: var(--wp--preset--font-size--md); max-width: 42ch; margin: 0 0 var(--wp--preset--spacing--50); }
.bpf-hero__eyebrow {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand-gold);
  margin: 0 0 var(--wp--preset--spacing--30);
}
/* Placeholder for the page-specific hero image. Never a CSS background:
   the real image ships as <picture> with explicit width and height. */
.bpf-hero__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--wp--custom--radius--lg);
  border: 1px dashed var(--wp--preset--color--navy-500);
  background: var(--wp--preset--color--navy-800);
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--wp--preset--spacing--50);
  color: var(--wp--preset--color--navy-300);
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  letter-spacing: .04em;
}
@media (min-width: 62rem) { .bpf-hero__media { aspect-ratio: 16 / 9; } }


/* --- Cards ------------------------------------------------------------- */
.bpf-card {
  background: var(--wp--preset--color--surface-card);
  border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--border-soft);
  border-radius: var(--bpf-radius);
  box-shadow: var(--wp--preset--shadow--card);
  padding: var(--wp--preset--spacing--50);
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
}
.bpf-card h3 { margin: 0; }
.bpf-card p { margin: 0; color: var(--wp--preset--color--neutral-700); }
.bpf-card__meta { font-family: var(--wp--preset--font-family--sans); font-size: var(--wp--preset--font-size--xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--neutral-500); }
.bpf-card--link:hover { box-shadow: var(--wp--preset--shadow--raised); }
.bpf-card__cta { margin-top: auto; padding-top: var(--wp--preset--spacing--20); }
.bpf-list { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); }
.bpf-list li { color: var(--wp--preset--color--neutral-700); }

/* Numbered step card. The number is decorative, so it is hidden from AT
   and the real order comes from the ordered list. */
.bpf-steps { list-style: none; margin: 0; padding: 0; }
.bpf-steps > li { counter-increment: bpf-step; }
.bpf-steps { counter-reset: bpf-step; }
.bpf-step__num {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--lg);
  color: var(--wp--preset--color--orange-800);
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: .02em;
}

/* --- Forms (visual only in Phase 2B; no submission handler) ------------ */
.bpf-field { display: flex; flex-direction: column; gap: .375rem; }
.bpf-field label { font-weight: 600; font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--navy-900); }
.bpf-field .bpf-hint { font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--neutral-500); }
.bpf-field input,
.bpf-field select,
.bpf-field textarea {
  width: 100%;
  min-height: 48px;
  padding: .625rem .75rem;
  font: inherit;
  color: var(--wp--preset--color--neutral-900);
  background: var(--wp--preset--color--surface-card);
  /* #7E8B99 on white = 3.48:1, clears the 3:1 minimum for non-text UI components. */
  border: var(--wp--custom--border--control) solid var(--wp--preset--color--border-strong);
  border-radius: var(--bpf-radius);
}
.bpf-field textarea { min-height: 8rem; resize: vertical; }
.bpf-field input::placeholder,
.bpf-field textarea::placeholder { color: var(--wp--preset--color--neutral-500); }
.bpf-field--error input,
.bpf-field--error select,
.bpf-field--error textarea { border-color: var(--wp--preset--color--state-error); }
.bpf-error {
  display: flex; align-items: flex-start; gap: .375rem;
  color: var(--wp--preset--color--state-error);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
}
/* The warning mark used to be U+26A0. Neither Source Sans 3 nor Source Serif 4
   carries that glyph, and adding a font just to draw a triangle would be a
   third typographic voice, so the icon is inline SVG that inherits the colour
   of the message. It is aria-hidden; the text carries the meaning. */
.bpf-error__icon { flex: none; width: 1.125em; height: 1.125em; margin-top: .18em; fill: currentColor; }
.bpf-consent { display: grid; grid-template-columns: auto minmax(0,1fr); gap: .625rem; align-items: start; font-size: var(--wp--preset--font-size--sm); }
.bpf-consent input { width: 1.25rem; height: 1.25rem; min-height: 0; margin-top: .2rem; accent-color: var(--wp--preset--color--navy-700); }

/* --- Notices ----------------------------------------------------------- */
.bpf-notice {
  border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--border-soft);
  border-left: 4px solid var(--wp--preset--color--state-info);
  border-radius: var(--bpf-radius);
  background: var(--wp--preset--color--surface-card);
  padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
  display: flex; flex-direction: column; gap: .375rem;
}
.bpf-notice__title { font-weight: 600; color: var(--wp--preset--color--navy-900); }
.bpf-notice p { margin: 0; }
.bpf-notice--success { border-left-color: var(--wp--preset--color--state-success); }
.bpf-notice--success .bpf-notice__title { color: var(--wp--preset--color--state-success); }
.bpf-notice--warning { border-left-color: var(--wp--preset--color--state-warning); }
.bpf-notice--warning .bpf-notice__title { color: var(--wp--preset--color--state-warning); }
.bpf-notice--error { border-left-color: var(--wp--preset--color--state-error); }
.bpf-notice--error .bpf-notice__title { color: var(--wp--preset--color--state-error); }

/* --- Accordion --------------------------------------------------------- */
.bpf-accordion { border-top: var(--wp--custom--border--hairline) solid var(--wp--preset--color--border-soft); }
.bpf-accordion__item { border-bottom: var(--wp--custom--border--hairline) solid var(--wp--preset--color--border-soft); }
.bpf-accordion__item h3 { margin: 0; }
.bpf-accordion__trigger {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--40);
  padding: var(--wp--preset--spacing--40) 0;
  min-height: 48px;
  background: none; border: 0;
  font: inherit;
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--md);
  font-weight: 600;
  color: var(--wp--preset--color--navy-900);
  text-align: left;
  cursor: pointer;
}
.bpf-accordion__icon { flex: none; width: 1rem; height: 1rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px,-2px); transition: transform var(--wp--custom--duration--base); }
.bpf-accordion__trigger[aria-expanded="true"] .bpf-accordion__icon { transform: rotate(-135deg) translate(-3px,-3px); }
.bpf-accordion__panel { padding-bottom: var(--wp--preset--spacing--50); max-width: var(--wp--custom--measure--text); }
.bpf-accordion__panel[hidden] { display: none; }

/* --- Breadcrumbs ------------------------------------------------------- */
.bpf-breadcrumb { font-size: var(--wp--preset--font-size--sm); }
.bpf-breadcrumb ol { display: flex; flex-wrap: wrap; gap: .375rem var(--wp--preset--spacing--20); list-style: none; margin: 0; padding: 0; }
.bpf-breadcrumb li { display: flex; align-items: center; gap: var(--wp--preset--spacing--20); color: var(--wp--preset--color--neutral-500); }
.bpf-breadcrumb li + li::before { content: "/"; color: var(--wp--preset--color--border-strong); }
.bpf-breadcrumb a { color: var(--wp--preset--color--navy-700); }
.bpf-breadcrumb [aria-current="page"] { color: var(--wp--preset--color--neutral-700); font-weight: 600; }
.bpf-breadcrumb--page { padding-block: var(--wp--preset--spacing--30); }

/* --- Data table -------------------------------------------------------- */
.bpf-table { width: 100%; border-collapse: collapse; font-size: var(--wp--preset--font-size--sm); font-variant-numeric: tabular-nums; background: var(--wp--preset--color--surface-card); }
.bpf-table th, .bpf-table td { text-align: left; padding: .625rem .875rem; border-bottom: var(--wp--custom--border--hairline) solid var(--wp--preset--color--border-soft); vertical-align: top; }
.bpf-table thead th {
  background: var(--wp--preset--color--navy-50);
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--wp--preset--color--neutral-500);
  border-bottom: var(--wp--custom--border--control) solid var(--wp--preset--color--border-soft);
}
.bpf-table tbody tr:last-child td { border-bottom: 0; }

/* --- Footer ------------------------------------------------------------ */
.bpf-footer { background: var(--wp--preset--color--navy-950); color: #fff; }
.bpf-footer__inner { max-width: var(--wp--style--global--wide-size); margin-inline: auto; padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--50) var(--wp--preset--spacing--50); }
.bpf-footer h2 { color: var(--wp--preset--color--brand-gold); font-family: var(--wp--preset--font-family--sans); font-size: var(--wp--preset--font-size--xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 var(--wp--preset--spacing--30); }
.bpf-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .375rem; }
.bpf-footer a { color: #fff; text-decoration: none; }
.bpf-footer a:hover { text-decoration: underline; text-underline-offset: 2px; }
.bpf-footer__legal {
  margin-top: var(--wp--preset--spacing--70);
  padding-top: var(--wp--preset--spacing--50);
  border-top: 1px solid rgba(255,255,255,.16);
  color: var(--wp--preset--color--navy-300);
  font-size: var(--wp--preset--font-size--sm);
  display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30);
  max-width: 90ch;
}

/* --- Home page ---------------------------------------------------------
   Added in phase 3B-1. Nothing here changes a token or an approved component:
   these rules only assemble the existing components into the Home layout.

   D-17 is enforced structurally. The only vertical space BETWEEN sections
   comes from .bpf-section, which is untouched. Inside a section every gap is
   a flex gap, so no child can contribute a margin that would add to, or
   collapse into, the section rhythm. If you add a block to the Home, put it
   inside .bpf-section__body and give it margin: 0. */
.bpf-section__body { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--60); }
.bpf-section__head { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); }
.bpf-section__head > * { margin: 0; }
.bpf-section__intro { max-width: var(--wp--custom--measure--text); }
.bpf-section__more { margin: 0; }

/* Two editorial Home sections use the full desktop canvas instead of leaving
   an empty second column. Mobile and tablet keep the natural reading order. */
@media (min-width: 62rem) {
  .bpf-home-split .bpf-section__body {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    column-gap: var(--wp--preset--spacing--80);
    row-gap: var(--wp--preset--spacing--40);
    align-items: start;
  }
  .bpf-home-split .bpf-section__head {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .bpf-home-split .bpf-prose,
  .bpf-home-split .bpf-notice { grid-column: 2; max-width: none; }
  .bpf-home-split .bpf-section__more { grid-column: 2; }
}

/* Running text. Same idea: gap instead of paragraph margins. Declared after
   .bpf-notice on purpose, so `class="bpf-notice bpf-prose"` opens the notice
   up to the paragraph rhythm without a modifier class of its own. */
.bpf-prose { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); }
.bpf-prose > p { margin: 0; }

/* Hero text column keeps the margin rhythm the hero component already sets
   (eyebrow 12px, h1 16px, lead 24px). The microcopy is the one addition, and
   it has to be declared AFTER `.bpf-hero :where(p)` because both selectors
   weigh (0,1,0) and source order is what decides between them. */
.bpf-hero__microcopy {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--navy-300);
  max-width: 42ch;
  margin: var(--wp--preset--spacing--30) 0 0;
}

/* Real hero image. No CSS background, no aspect-ratio here: the reserved box
   comes from the width/height attributes of whichever <source> the browser
   picks - 1600x2000 below 48rem, 1600x900 above - so the ratio changes with
   the art direction and CLS stays at zero in both. Setting an aspect-ratio in
   CSS would override that and reintroduce the shift. */
.bpf-hero__figure { margin: 0; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); }
.bpf-hero__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--wp--custom--radius--lg);
  background: var(--wp--preset--color--navy-800);
}
.bpf-hero__provisional {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--wp--preset--spacing--20);
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--navy-300);
}
/* Art direction by band, revision 3B-1 R1.
   Below 40rem - one-handed phones - the text column leads: eyebrow, H1, lead,
   both buttons and the microcopy come first and the image follows. That is the
   DOM order, so nothing is reordered and the H1 is the first thing painted.
   Between 40rem and 61.999rem the layout is still one column but there is room
   above the fold for both, so the image leads, as the approved composition asks.
   From 62rem the two-column grid takes over: text left, image right. */
@media (min-width: 40rem) and (max-width: 61.999rem) { .bpf-hero__figure { order: -1; } }
/* One-column phones: both hero actions go full width and stack. */
@media (max-width: 39.999rem) {
  .bpf-hero__actions .bpf-btn,
  .bpf-cta__actions .bpf-btn { width: 100%; }
}

/* Service cards route through the heading, so the heading is the link and
   there is no second, duplicate "read more" anchor per card. */
.bpf-card h3 a { color: var(--wp--preset--color--navy-900); text-decoration: none; }
.bpf-card h3 a:hover,
.bpf-card h3 a:focus-visible { text-decoration: underline; text-underline-offset: 2px; }
.bpf-card--link:focus-within { box-shadow: var(--wp--preset--shadow--raised); }

/* Statewide county directory. Region cards keep the 67 names readable without
   turning them into false destination links before researched county guides
   exist. The short lists form two balanced columns only when space permits. */
.bpf-region-grid { align-items: start; }
.bpf-county-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .45rem var(--wp--preset--spacing--30);
  margin: var(--wp--preset--spacing--30) 0 0;
  padding: 0;
  list-style: none;
}
.bpf-county-list li {
  position: relative;
  padding-left: 1rem;
  color: var(--wp--preset--color--neutral-700);
}
.bpf-county-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: .35rem;
  height: .35rem;
  border-radius: 50%;
  background: var(--wp--preset--color--brand-orange);
}
.bpf-directory-note {
  max-width: var(--wp--custom--measure--text);
  margin: var(--wp--preset--spacing--40) 0 0;
  color: var(--wp--preset--color--neutral-500);
  font-size: var(--wp--preset--font-size--sm);
}
@media (max-width: 29.999rem) {
  .bpf-county-list { grid-template-columns: 1fr; }
}

/* Contact page. The approved organic Fluent Form remains the single source of
   truth for fields, consent, storage, notifications, and its thank-you route.
   The selector is intentionally ID-agnostic because protected staging and the
   public site preserve equivalent form definitions under different record IDs. */
.bpf-contact-layout {
  display: grid;
  gap: var(--wp--preset--spacing--70);
  align-items: start;
}
@media (min-width: 62rem) {
  .bpf-contact-layout { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
}
.bpf-contact-copy,
.bpf-contact-methods,
.bpf-contact-form,
.bpf-contact-form__head,
.bpf-form-notes {
  display: flex;
  flex-direction: column;
}
.bpf-contact-copy { gap: var(--wp--preset--spacing--50); }
.bpf-contact-copy > *,
.bpf-contact-form__head > *,
.bpf-form-notes > * { margin: 0; }
.bpf-contact-methods { gap: var(--wp--preset--spacing--30); }
.bpf-contact-method {
  padding-bottom: var(--wp--preset--spacing--30);
  border-bottom: var(--wp--custom--border--hairline) solid var(--wp--preset--color--border-soft);
}
.bpf-contact-method:last-child { padding-bottom: 0; border-bottom: 0; }
.bpf-contact-method h3 { margin: 0 0 var(--wp--preset--spacing--20); }
.bpf-contact-method p { margin: 0; }
.bpf-contact-method a { overflow-wrap: anywhere; }
.bpf-contact-form {
  gap: var(--wp--preset--spacing--50);
  padding: var(--wp--preset--spacing--60);
  background: var(--wp--preset--color--surface-card);
  border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--border-soft);
  border-radius: var(--wp--custom--radius--lg);
  box-shadow: var(--wp--preset--shadow--raised);
}
.bpf-contact-form__head { gap: var(--wp--preset--spacing--20); }
.bpf-contact-form__head h3 { margin: 0; }
.bpf-contact-form .frm-fluent-form { font-family: var(--wp--preset--font-family--sans); }
.bpf-contact-form .frm-fluent-form .ff-el-group { margin-bottom: var(--wp--preset--spacing--40); }
.bpf-contact-form .frm-fluent-form .ff-el-input--label { margin-bottom: var(--wp--preset--spacing--20); }
.bpf-contact-form .frm-fluent-form .ff-el-input--label label {
  color: var(--wp--preset--color--navy-900);
  font-weight: 600;
  line-height: 1.35;
}
.bpf-contact-form .frm-fluent-form .ff-el-form-control {
  width: 100%;
  min-height: 48px;
  padding: .75rem .875rem;
  border: var(--wp--custom--border--control) solid var(--wp--preset--color--border-strong);
  border-radius: var(--wp--custom--radius--sm);
  background: #fff;
  color: var(--wp--preset--color--neutral-700);
  font: inherit;
  line-height: 1.4;
}
.bpf-contact-form .frm-fluent-form textarea.ff-el-form-control {
  min-height: 10rem;
  resize: vertical;
}
.bpf-contact-form .frm-fluent-form .ff-el-form-control::placeholder { color: var(--wp--preset--color--neutral-500); opacity: 1; }
.bpf-contact-form .frm-fluent-form .ff-el-form-check { display: flex; gap: var(--wp--preset--spacing--20); align-items: flex-start; }
.bpf-contact-form .frm-fluent-form .ff-el-form-check-input { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin-top: .15rem; }
.bpf-contact-form .frm-fluent-form .ff-el-form-check-label { color: var(--wp--preset--color--neutral-700); }
.bpf-contact-form .frm-fluent-form .ff-btn-submit {
  min-height: 48px;
  padding: .75rem 1.25rem;
  border: var(--wp--custom--border--control) solid transparent;
  border-radius: var(--wp--custom--radius--sm);
  background: var(--wp--preset--color--brand-orange);
  color: var(--wp--preset--color--navy-900);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}
.bpf-contact-form .frm-fluent-form .ff-btn-submit:hover { background: var(--wp--preset--color--orange-hover); }
.bpf-contact-form .frm-fluent-form .ff-el-form-control:focus-visible,
.bpf-contact-form .frm-fluent-form .ff-el-form-check-input:focus-visible,
.bpf-contact-form .frm-fluent-form .ff-btn-submit:focus-visible {
  outline: var(--wp--custom--focus--width) solid var(--bpf-focus);
  outline-offset: var(--wp--custom--focus--offset);
  border-radius: var(--wp--custom--radius--sm);
}
.bpf-contact-form .frm-fluent-form .text-danger,
.bpf-contact-form .frm-fluent-form .error { color: var(--wp--preset--color--state-error); }
.bpf-contact-form .frm-fluent-form .ff-el-is-error .ff-el-form-control { border-color: var(--wp--preset--color--state-error); }
.bpf-contact-form .frm-fluent-form .ff-message-success {
  padding: var(--wp--preset--spacing--40);
  border-left: 4px solid var(--wp--preset--color--state-success);
  background: var(--wp--preset--color--navy-50);
  color: var(--wp--preset--color--neutral-700);
}
.bpf-form-notes { gap: var(--wp--preset--spacing--30); }
.bpf-form-notes p { color: var(--wp--preset--color--neutral-500); font-size: var(--wp--preset--font-size--sm); }
.bpf-form-safety {
  padding: var(--wp--preset--spacing--40);
  background: var(--wp--preset--color--navy-50);
  border-left: 4px solid var(--wp--preset--color--navy-700);
  color: var(--wp--preset--color--neutral-700);
}
@media (max-width: 29.999rem) {
  .bpf-contact-form { padding: var(--wp--preset--spacing--40); }
}

.bpf-form-fallback {
  padding: var(--wp--preset--spacing--40);
  border-left: 4px solid var(--wp--preset--color--brand-orange);
  background: var(--wp--preset--color--navy-50);
  color: var(--wp--preset--color--neutral-700);
}
.bpf-form-fallback p { margin: 0; }

/* About page. The approved hero is an editorial team montage; the individual
   portraits below remain the primary identity reference for each named person.
   The cards use equal rows so titles and responsibilities stay easy to scan
   without cropping faces differently between breakpoints. */
.bpf-team-grid {
  display: grid;
  gap: var(--wp--preset--spacing--50);
}
@media (min-width: 40rem) {
  .bpf-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.bpf-team-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--wp--preset--color--surface-card);
  border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--border-soft);
  border-radius: var(--wp--custom--radius--lg);
  box-shadow: var(--wp--preset--shadow--card);
}
.bpf-team-card__media { display: block; background: var(--wp--preset--color--navy-50); }
.bpf-team-card__media img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.bpf-team-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
  padding: var(--wp--preset--spacing--50);
}
.bpf-team-card__body > * { margin: 0; }
.bpf-team-card__role {
  color: var(--wp--preset--color--orange-800);
  font-weight: 700;
}
.bpf-team-card__skills {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--20);
  margin: auto 0 0;
  padding: var(--wp--preset--spacing--20) 0 0;
  list-style: none;
}
.bpf-team-card__skills li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--wp--preset--color--neutral-700);
}
.bpf-team-card__skills li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: .75rem;
  height: .4rem;
  border-left: 3px solid var(--wp--preset--color--brand-orange);
  border-bottom: 3px solid var(--wp--preset--color--brand-orange);
  transform: rotate(-45deg);
}
@media (max-width: 29.999rem) {
  .bpf-team-card__body { padding: var(--wp--preset--spacing--40); }
}

/* Post-submission utility page. This route is noindex and intentionally uses
   live HTML rather than another large image asset. */
.bpf-thanks {
  background: var(--wp--preset--color--navy-900);
  color: var(--wp--preset--color--navy-300);
  text-align: center;
}
.bpf-thanks__inner { max-width: 48rem; }
.bpf-thanks h1 { color: #fff; margin: 0 0 var(--wp--preset--spacing--40); }
.bpf-thanks__lead { margin: 0 auto var(--wp--preset--spacing--50); max-width: 42rem; }
.bpf-thanks__actions { justify-content: center; }
.bpf-thanks-note {
  max-width: 50rem;
  margin: var(--wp--preset--spacing--50) auto 0;
  padding: var(--wp--preset--spacing--40);
  border-left: 4px solid var(--wp--preset--color--brand-gold);
  background: var(--wp--preset--color--navy-800);
  color: var(--wp--preset--color--navy-300);
  text-align: left;
}
.bpf-thanks-note p { margin: 0; }

/* Closing call to action. Same band component as the hero, one shade lighter
   so the page does not end on the colour it started with. */
.bpf-cta { background: var(--wp--preset--color--navy-800); }
.bpf-cta__inner { display: block; text-align: center; }
.bpf-cta h2 { color: #fff; margin: 0 0 var(--wp--preset--spacing--30); }
.bpf-cta p { max-width: 52ch; margin-inline: auto; }
/* CTA supporting copy can appear outside a .bpf-hero wrapper on interior-page
   patterns. Keep that unclassed copy readable on navy-800 without overriding
   the gold eyebrow or email treatment. */
.bpf-cta__inner > p:not(.bpf-hero__eyebrow):not(.bpf-cta__mail) { color: var(--wp--preset--color--navy-300); }
.bpf-cta__actions { justify-content: center; }
.bpf-cta__mail { margin: var(--wp--preset--spacing--40) 0 0; font-size: var(--wp--preset--font-size--sm); }
.bpf-cta__mail a { color: var(--wp--preset--color--brand-gold); }
.bpf-cta__mail a:hover { color: var(--wp--preset--color--brand-amber); }
.bpf-cta__note {
  margin: var(--wp--preset--spacing--40) auto 0;
  color: var(--wp--preset--color--navy-300);
  font-size: var(--wp--preset--font-size--sm);
}

/* The Fort Myers campaign page intentionally has no hero image. Give its
   message a deliberate centered composition instead of an empty grid column. */
@media (min-width: 62rem) {
  .page-id-35 .bpf-hero__inner { display: block; max-width: 64rem; }
  .page-id-35 .bpf-hero__text {
    max-width: 54rem;
    margin-inline: auto;
    text-align: center;
  }
  .page-id-35 .bpf-hero__text > p { margin-inline: auto; }
  .page-id-35 .bpf-hero__actions { justify-content: center; }
}

/* Page 35 is stored as page content rather than a theme pattern, so its
   legacy mail link remains in the markup. Present it with the same deliberate
   action treatment as the new CTA buttons without altering the page copy. */
.page-id-35 .bpf-cta__mail { display: flex; justify-content: center; }
.page-id-35 .bpf-cta__mail a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .75rem 1.75rem;
  border: var(--wp--custom--border--control) solid var(--wp--preset--color--brand-gold);
  border-radius: var(--wp--custom--radius--md);
  color: var(--wp--preset--color--brand-gold);
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--base);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color var(--wp--custom--duration--base), color var(--wp--custom--duration--base);
}
.page-id-35 .bpf-cta__mail a:hover {
  background: var(--wp--preset--color--brand-gold);
  color: var(--wp--preset--color--navy-900);
}

/* The Spanish-language notice is important context, not leftover body copy. */
.bpf-language-note { margin-bottom: var(--wp--preset--spacing--40); }
.bpf-language-note p {
  max-width: 72ch;
  margin: 0;
  padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
  border-left: 4px solid var(--wp--preset--color--brand-gold);
  border-radius: var(--wp--custom--radius--md);
  background: var(--wp--preset--color--navy-50);
  color: var(--wp--preset--color--neutral-700);
}


/* --------------------------------------------------------------------------
   UTILITIES - last layer, single-purpose, no component may depend on these
   -------------------------------------------------------------------------- */
.bpf-measure { max-width: var(--wp--custom--measure--text); }
/* Identifiers read as data, not as prose: permit numbers, hex codes, contrast
   ratios, fee percentages, review dates. The site has no monospace family, so
   the column alignment those strings need comes from the figures themselves:
   in both subsets every digit, and the dollar sign with them, carries the same
   advance width (494/1000 in the serif, 497/1000 in the sans), so numerals line
   up in a column without any feature being switched on. The 0/O ambiguity is
   resolved by the slashed zero, which IS a real feature ('zero') and is present
   in both faces.

   font-variant-numeric below is therefore a statement of intent, not the
   mechanism: 'tabular-nums' and 'lining-nums' map to 'tnum'/'lnum', which exist
   in Source Serif 4 but which Adobe does not ship in Source Sans 3 at all. On
   the sans they resolve to nothing and the default figures - already tabular,
   already lining - are what renders. Keeping the declaration costs nothing and
   makes the rule correct for both faces. */
.bpf-tabular {
  font-family: var(--wp--preset--font-family--sans);
  font-variant-numeric: tabular-nums lining-nums slashed-zero;
  letter-spacing: .01em;
}
/* Legal labels and statutory references, e.g. "F.S. 553.792". Uppercase plus
   tracking plus weight is what replaces the old monospace treatment. */
.bpf-legal-label {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--wp--preset--color--neutral-700);
}
.bpf-eyebrow { font-family: var(--wp--preset--font-family--sans); font-size: var(--wp--preset--font-size--xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--neutral-500); }
.bpf-muted { color: var(--wp--preset--color--neutral-500); }
.bpf-center { text-align: center; }
.bpf-swatch { height: 4.5rem; border-radius: var(--bpf-radius); border: 1px solid var(--wp--preset--color--border-soft); }
.bpf-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.bpf-placeholder {
  display: inline-block;
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--state-warning);
  background: #F8ECD5;
  border: 1px solid var(--wp--preset--color--state-warning);
  border-radius: var(--wp--custom--radius--sm);
  padding: .125rem .5rem;
}

/* Header brand on small screens.

   .bpf-brand shipped as `flex: none; white-space: nowrap`, so the brand could
   neither shrink nor wrap. Below the tablet breakpoint that pushed the header
   past the viewport: the Spanish tagline "Coordinación de permisos en toda
   Florida" fixes the brand at 305 px, and 24 + 305 + 16 + 63 = 408 in a 390 px
   viewport, so the Menú button fell off the right edge and a 17 px strip of body
   background showed beside the header and the hero. The shorter English tagline
   hits the same wall at 320 px, 6 px over.

   `flex: 0 1 auto` is the point of the fix: the brand still refuses to GROW, so
   wherever it fits it keeps its intrinsic width exactly as before, and it only
   gives way when the room genuinely runs out. `min-width: 0` lifts the implicit
   `min-width: auto` that would otherwise block the shrink, and `white-space:
   normal` lets the tagline take a second line instead of forcing one.

   Both languages need it, so the rule is not scoped by language. Type size,
   spacing, the phone link and the Menú button are untouched; the header grows in
   height because .bpf-header__inner sets min-height, not height.

   Bounded by the header's existing mobile breakpoint, so at 48rem and above
   nothing changes. */
@media (max-width: 47.999rem) {
  .bpf-brand {
    flex: 0 1 auto;
    min-width: 0;
    white-space: normal;
  }
}

/* ==========================================================================
   C4-r1A - Correcciones responsive (2026-10-08)
   Bloque anadido al final: no modifica ninguna regla anterior.
   Criterio: media queries >= 40rem, o min-width:0 / max-width, que solo
   permiten encoger donde ya hay holgura. El renderizado entre 320 y 639 px
   no cambia, salvo donde se indica explicitamente.
   ========================================================================== */

/* --- 2. CONTACTO ------------------------------------------------------ */

/* Overflow a 320 px: el grid no podia encoger por debajo del min-content de
   sus hijos (el fieldset de Fluent Forms declara width:300px;min-width:100%).
   No se toca el plugin: se le da capacidad de encoger desde el tema. */
.bpf-contact-layout > * { min-width: 0; }
.bpf-permit-form-shell fieldset { min-width: 0; width: 100%; max-width: 100%; }

/* Medida de 65-72 caracteres. El resto del sitio ya la respeta; esta seccion
   crecia sin tope hasta 129 caracteres por linea. */
@media (min-width: 40rem) {
  .bpf-contact-copy p,
  .bpf-contact-copy .bpf-section__intro { max-width: 68ch; }
}

/* Columnas mas equilibradas: la izquierda pasa de 4fr a 5fr. */
@media (min-width: 62rem) {
  .bpf-contact-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* --- 3. HEADER POR NIVELES -------------------------------------------- */

/* Medicion real sobre 1152 px disponibles (contenedor 1200 - 48 de padding):
   ingles pide 1106 px; espanol pide 1271 px (marca 305 + nav 640 +
   acciones 294 + 32 de gaps). De ahi los tres niveles. */

.bpf-header__inner > * { min-width: 0; }
.bpf-nav { flex: 0 1 auto; }

/* Nivel 1 - por debajo de 80rem (1280 px): hamburguesa.
   Revierte la banda 73-80rem, donde antes ya salia la nav de escritorio. */
@media (min-width: 73rem) and (max-width: 79.999rem) {
  .bpf-nav { display: none; }
  .bpf-menu-toggle { display: inline-flex; }
}

/* Nivel 2 - 80rem a 89.999rem (1280-1439 px): nav de escritorio compacta.
   Se oculta el telefono (sigue en el hero, el menu y el footer) y se
   reducen gaps. Espanol: 305 + 604 + 187 + 24 = 1120 <= 1152. */
@media (min-width: 80rem) {
  .bpf-nav { display: block; }
  .bpf-menu-toggle { display: none; }
}
@media (min-width: 80rem) and (max-width: 89.999rem) {
  .bpf-header__inner { gap: 12px; }
  .bpf-header__tel { display: none; }
  .bpf-nav > ul { gap: 10px; }
}

/* Nivel 3 - desde 90rem (1440 px): header completo con telefono.
   El contenedor del header se ensancha a 1340 px para que quepan las
   etiquetas completas en espanol sin recortarlas ni ocultar el telefono.
   Unico punto donde el header no se alinea con la columna de contenido
   de 1200 px; decision deliberada y solo a partir de 1440 px. */
@media (min-width: 90rem) {
  .bpf-header__inner { max-width: 1340px; }
  .bpf-nav > ul { gap: 12px; }
}

/* --- 4. MENU MOVIL: CTA TELEFONICO VISIBLE ---------------------------- */

/* El panel sigue siendo desplazable; el CTA queda fijo en su base, con
   safe-area, y el listado reserva espacio para no quedar tapado. */
#bpf-drawer > p:last-of-type {
  position: sticky;
  bottom: 0;
  margin: 0 !important;
  padding: .75rem 0 calc(.75rem + env(safe-area-inset-bottom, 0px));
  background: #001b37;
}
#bpf-drawer > p:last-of-type .bpf-btn {
  display: block;
  width: 100%;
  text-align: center;
  min-height: 48px;
}
#bpf-drawer nav ul { padding-bottom: .75rem; }

/* --- 5. H1 FLUIDA ----------------------------------------------------- */

/* Antes: 49 px fijos de 320 a 2560. Producia 5-6 lineas en movil y se
   quedaba corta en 1920+. No cambia ningun texto. */
main h1 { font-size: clamp(2.125rem, 1.75rem + 1.45vw, 3.5rem); }

/* --- 6. FAQ: RECORTE INTERNO DE 3 PX ---------------------------------- */

.bpf-accordion__trigger > span:first-child { min-width: 0; }
.bpf-accordion__icon { flex: none; }

/* --- 7. SERVICE AREAS: TARJETAS DE LA MISMA FILA ---------------------- */

/* Scoped a la pagina (page-id-25): ninguna otra rejilla cambia. */
@media (min-width: 40rem) {
  .page-id-25 .bpf-region-grid { align-items: start; }
  .page-id-25 .bpf-region-grid > .bpf-card { height: auto; }
}

/* --- 8. OBJETIVOS TACTILES -------------------------------------------- */

/* Solo enlaces de lista del footer; los enlaces en linea no se tocan. */
@media (max-width: 61.999rem) {
  .bpf-footer li a { display: inline-block; padding-block: .55rem; }
}

/* --- 9. RETRATOS DEL EQUIPO ------------------------------------------- */

/* No existen originales de mayor resolucion (verificado en wp-content/uploads
   y en los assets del tema: 448x448 es el unico tamano). Se limita el render
   a su tamano nativo para no escalar hacia arriba. Pendiente: originales a
   >= 1124 px para pantallas 2x. */
.bpf-team-card__media { display: block; max-width: 448px; margin-inline: auto; }
.bpf-team-card__media img { width: 100%; height: auto; }

/* --- 2b. CONTACTO: COLISION DE CLASE .bpf-consent --------------------- */

/* Hallazgo C4-r1A: bpf-consent.css define .bpf-consent como banner de
   cookies fijo (position:fixed; z-index:9999; inset:auto 0 0). El grupo de
   consentimiento SMS del formulario llega con la MISMA clase desde Fluent
   Forms, asi que se renderizaba como barra fija superpuesta al contenido en
   todos los anchos. Se devuelve al flujo normal solo la instancia que esta
   dentro del formulario; el banner de cookies real no coincide con este
   selector y queda intacto. No se modifica Fluent Forms ni el banner.
   bpf-consent.css carga DESPUES de este archivo, de ahi la especificidad
   con #id y el !important puntual. */
.bpf-permit-form-shell .ff-el-group.bpf-consent {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  z-index: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

/* Fluent Forms impone min-width:100% al fieldset desde su propia hoja, que
   tambien carga despues. */
.bpf-permit-form-shell form fieldset {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Turnstile tiene un ancho minimo rigido de 300 px que no cabe en un
   viewport de 320 px con ningun padding razonable. No se toca el widget ni
   su configuracion: se contiene para que el desbordamiento no llegue a la
   pagina. El widget sigue completo y utilizable. */
.bpf-permit-form-shell [id^="fluentform-turnstile"] { max-width: 100%; }

/* C4-r1B - Turnstile a 320-381 px: gutter del formulario.
   El widget mide 300 px fijos (tamano "normal"). Fluent Forms 6.2.15 llama a
   turnstile.render() en modo explicit y NUNCA envia el parametro size, asi que
   data-size en el markup seria ignorado: no hay via soportada para "compact".
   Con los gutters normales el formulario solo ofrece >=300 px reales a partir
   de 382 px de viewport. Por debajo, la tarjeta del formulario pasa a ancho
   completo: cambia SOLO el gutter del formulario, no el de la pagina.
   Sin transform:scale, sin recortar el iframe y sin overflow horizontal. */
@media (max-width: 23.875rem) {
  .bpf-permit-form-shell {
    margin-inline: -24px;
    border-inline: 0;
    border-radius: 0;
    padding-inline: 16px;
  }
}
@media (max-width: 22.5rem) {
  .bpf-permit-form-shell { padding-inline: 8px; }
}

/* --- 2c. MEDIDA DE LINEA: BLOQUES A ANCHO COMPLETO -------------------- */

/* El aviso legal y las notas del formulario no estan dentro de
   .bpf-contact-copy, por lo que crecian hasta 129 y 77 caracteres por
   linea. Solo se limita el ancho; no se toca el texto. */
@media (min-width: 40rem) {
  .bpf-notice p,
  .bpf-form-notes p,
  .bpf-contact-form__head p { max-width: 68ch; }
}

/* ==========================================================================
   C4-r1B - Ajustes finales (2026-10-08)
   ========================================================================== */

/* 1a. Revierte la proporcion 5fr/7fr introducida en r1A: estrechaba la
   columna del formulario y lo hacia MAS alto (658 vs 1454 a 1366 px).
   Se recupera la proporcion original 4fr/6fr. */
@media (min-width: 62rem) {
  .bpf-contact-layout { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
}

/* 1b. Columna izquierda sticky SOLO en escritorio con puntero fino.
   - (pointer: fine) deja movil y tablet tactil en position:static.
   - El sticky esta acotado por su propia celda del grid: no puede salirse
     del contenedor ni cubrir el footer.
   - top deja libre el header, que es position:sticky (--bpf-header-h).
   - max-height + overflow evitan que su base quede inalcanzable en
     viewports bajos (p. ej. 1280x720). */
/* C4-r1C: el sticky se activa solo si hay ancho Y altura suficientes.
   Sin max-height ni overflow-y: la columna nunca genera navegacion interna.
   min-height:48rem (768px) => 1366x768 si, 1280x720 no (queda static).
   Comprobado: top 88px + columna 658px = 746px <= 768px, cabe entera. */
@media (min-width: 80rem) and (min-height: 48rem) and (pointer: fine) {
  .bpf-contact-layout > .bpf-contact-copy {
    position: sticky;
    top: calc(var(--bpf-header-h, 72px) + 1rem);
    align-self: start;
  }
}