/*
 * Ortega layout system — vertical rhythm and readable text flow.
 *
 * The values below are the only spacing scale for new common components.
 * They use clamp() where a viewport-aware value makes the page feel natural;
 * they do not change the deliberately art-directed hero compositions.
 */
:root {
  --ortega-space-1: 8px;
  --ortega-space-2: 12px;
  --ortega-space-3: 16px;
  --ortega-space-4: 24px;
  --ortega-space-5: 32px;
  --ortega-space-6: clamp(40px, 4.5vw, 64px);
  --ortega-space-7: clamp(56px, 6vw, 88px);
  --ortega-space-8: clamp(72px, 8vw, 120px);
  --ortega-content-inline: clamp(16px, 5vw, 90px);
  --ortega-text-measure: 72ch;
}

html {
  scroll-padding-top: 86px;
}

/* A predictable rhythm inside editorial text, lists and legal copy. */
#brx-content :where(.brxe-rich-text, .brxe-text-basic) :where(p, ul, ol) {
  margin-block: 0;
}

#brx-content :where(.brxe-rich-text, .brxe-text-basic) :where(p, ul, ol) + :where(p, ul, ol) {
  margin-top: var(--ortega-space-3);
}

#brx-content :where(.brxe-rich-text, .brxe-text-basic) :where(ul, ol) {
  padding-inline-start: 1.25em;
}

#brx-content :where(.brxe-rich-text, .brxe-text-basic) li + li {
  margin-top: var(--ortega-space-1);
}

/* Footer icon/text rows must be allowed to shrink on narrow screens. */
#brx-footer :where(.brxe-icon-box, .brxe-icon-box .content) {
  min-width: 0;
}

#brx-footer .brxe-icon-box .content :where(h1, h2, h3, h4, h5, h6, p) {
  overflow-wrap: anywhere;
}

/* Utilities reserved for all future shared sections and content templates. */
.ortega-layout-section {
  padding-block: var(--ortega-space-7);
}

.ortega-layout-section--hero {
  padding-block: var(--ortega-space-8);
}

.ortega-layout-stack {
  display: grid;
  gap: var(--ortega-space-4);
}

.ortega-layout-stack--compact {
  gap: var(--ortega-space-3);
}

.ortega-layout-stack--loose {
  gap: var(--ortega-space-5);
}

.ortega-layout-copy {
  max-width: var(--ortega-text-measure);
}

/*
 * Mobile vertical rhythm.
 * 16px = close element gap, 32px = component gap,
 * 56px = page start, 64px = regular section, 72px = loose section/hero end.
 */
@media (max-width: 767px) {
  :root {
    --ortega-mobile-gap: 16px;
    --ortega-mobile-component: 32px;
    --ortega-mobile-page-start: clamp(48px, 14vw, 56px);
    --ortega-mobile-section: clamp(56px, 15vw, 64px);
    --ortega-mobile-section-loose: clamp(64px, 18vw, 72px);
    --ortega-space-6: clamp(40px, 11vw, 48px);
    --ortega-space-7: var(--ortega-mobile-section);
    --ortega-space-8: var(--ortega-mobile-section-loose);
    --ortega-content-inline: 16px;
    --ortega-text-measure: 100%;
  }

  html {
    scroll-padding-top: 72px;
  }

  /* Long headings should wrap on words without creating a horizontal scroll. */
  #brx-content :where(.brxe-heading, h1, h2, h3) {
    text-wrap: pretty;
    overflow-wrap: break-word;
  }

  #brx-content :where(.brxe-rich-text, .brxe-text-basic) :where(p, ul, ol) + :where(p, ul, ol) {
    margin-top: var(--ortega-space-3);
  }

  /* Use one opening/closing rhythm for every regular mobile hero. */
  #brx-content > .brxe-section > .brxe-section:first-child > .brxe-section:first-child {
    padding-top: var(--ortega-mobile-page-start) !important;
    padding-bottom: var(--ortega-mobile-section-loose) !important;
  }

  /* Standalone tax calculators previously started after a 150px blank area. */
  #brx-content > #brxe-pjhtww {
    margin-top: var(--ortega-mobile-page-start) !important;
    margin-bottom: var(--ortega-mobile-section) !important;
  }

  /* The work-permit tool had stacked margin + padding (87px + 55px). */
  #brx-content > #brxe-miuxxk {
    margin-top: var(--ortega-mobile-page-start) !important;
    margin-bottom: var(--ortega-mobile-section) !important;
    padding-top: 0 !important;
  }

  #brx-content > #brxe-miuxxk .score-calculator {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Service directories use the same page-frame rhythm as content pages. */
  #brx-content > #brxe-mjwrje {
    margin-top: var(--ortega-mobile-page-start) !important;
    margin-bottom: var(--ortega-mobile-section) !important;
  }

  /* Keep the compact thank-you page visually related to the other pages. */
  #brx-content > #brxe-movdkf {
    margin-top: var(--ortega-mobile-page-start) !important;
    margin-bottom: var(--ortega-mobile-gap) !important;
  }

  #brx-content > #brxe-yyvwcr {
    margin-bottom: var(--ortega-mobile-section) !important;
  }
}

/* Keep the mobile footer clear of the fixed messenger dock. */
@media (max-width: 478px) {
  #brx-footer {
    padding-bottom: calc(105px + env(safe-area-inset-bottom, 0px));
  }
}

.ortega-anchor-target {
  display: block;
  height: 0;
  position: relative;
  top: -90px;
  visibility: hidden;
}