/* ==========================================================================
   Latx Technologies — Global styles
   --------------------------------------------------------------------------
   Base element styling, the layout primitives every block assumes, long-form
   prose, the small content-block family, and the per-device visibility classes
   the block editor's Responsive tab prints.

   No component-specific rules live here — those belong in theme.css or in a
   block's own stylesheet. Requires variables.css and reset.css.
   ========================================================================== */

/* --------------------------------------------------------- 1. Base elements */

h1,
h2,
h3,
h4 {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  color: var(--color-text-strong);
  text-wrap: balance;
}

h1 {
  font-size: var(--font-size-heading-1);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}

h2 {
  font-size: var(--font-size-heading-2);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-heading);
}

h3 {
  font-size: var(--font-size-heading-3);
}

h4 {
  font-size: var(--font-size-heading-4);
}

p {
  text-wrap: pretty;
}

a {
  color: var(--color-accent-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--duration-fast) var(--easing-out);
}

a:hover {
  color: var(--color-text-strong);
}

strong,
b {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-strong);
}

hr {
  height: 1px;
  border: 0;
  background-color: var(--color-border-subtle);
}

::selection {
  color: var(--color-white);
  background-color: var(--color-brand-indigo);
}

/* --------------------------------------------------------- 2. Layout helpers */

.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

.container--narrow {
  max-width: var(--container-narrow-max-width);
}

/* The band rhythm every section block uses. A block sets this on its own
   <section>, so two adjacent blocks never double their padding. */
.section {
  padding-block: var(--space-section);
}

.section--tight {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4rem);
}

.section--spacious {
  padding-block: clamp(4.5rem, 3rem + 6vw, 8rem);
}

/* Consistent vertical rhythm without margin-collapse surprises. */
.stack > * + * {
  margin-block-start: var(--stack-space, var(--space-small));
}

.stack--large {
  --stack-space: var(--space-medium);
}

/* --------------------------------------------------- 3. Section heading block */

/* Shared by every section block, so the eyebrow, heading and lead sit in the
   same relationship on every band of every page. */
.section-heading {
  display: grid;
  gap: var(--space-small);
  max-width: 46rem;
  margin-block-end: var(--space-x-large);
}

.section-heading--split {
  max-width: none;
}

.section-heading--center {
  justify-items: center;
  margin-inline: auto;
  text-align: center;
}

.section-heading--center .eyebrow {
  justify-content: center;
}

.section-heading__title {
  font-size: var(--font-size-heading-2);
}

.section-heading__lead {
  max-width: 55ch;
  font-size: var(--font-size-body-large);
  color: var(--color-text-muted);
}

/* Heading on the left, lead paragraph alongside it. Below this width the lead
   would be too narrow to read, so it stacks under the heading instead. */
@media (width >= 60rem) {
  .section-heading--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    align-items: end;
    column-gap: var(--space-x-large);
  }

  .section-heading--split .eyebrow,
  .section-heading--split .section-heading__title {
    grid-column: 1;
  }

  .section-heading--split .section-heading__lead {
    grid-row: 1 / span 2;
    grid-column: 2;
    align-self: center;
  }
}

/* --------------------------------------------------------------- 4. Eyebrow */

.eyebrow {
  display: flex;
  gap: 0.875rem;
  align-items: center;
  font-family: var(--font-family-body);
  font-size: var(--font-size-overline);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-overline);
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 2.125rem;
  height: 2px;
  background-image: var(--gradient-rule);
  border-radius: 2px;
}

/* ----------------------------------------------------------------- 5. Prose */

/* Long-form body copy: the output of a WYSIWYG field, and the_content() on a
   page. Only ever applied to a container of flowing text, never to a layout
   wrapper. */
.prose {
  max-width: var(--max-text-width);
  color: var(--color-text-muted);
}

.prose > * + * {
  margin-block-start: var(--space-small);
}

.prose h2 {
  margin-block-start: var(--space-x-large);
  color: var(--color-text-strong);
}

.prose h3 {
  margin-block-start: var(--space-large);
  color: var(--color-text-strong);
}

.prose h2:first-child,
.prose h3:first-child {
  margin-block-start: 0;
}

.prose strong {
  color: var(--color-text-strong);
}

.prose ul {
  display: grid;
  gap: var(--space-2x-small);
  padding-inline-start: var(--space-medium);
  list-style: disc;
}

.prose ol {
  display: grid;
  gap: var(--space-2x-small);
  padding-inline-start: var(--space-medium);
  list-style: decimal;
}

.prose li::marker {
  color: var(--color-text-subtle);
}

.prose img {
  border-radius: var(--radius-large);
}

.prose figure {
  margin: 0;
}

.prose figcaption {
  margin-block-start: var(--space-2x-small);
  font-size: var(--font-size-small);
  color: var(--color-text-subtle);
}

blockquote.prose {
  max-width: 44rem;
  padding-inline-start: var(--space-medium);
  border-inline-start: 2px solid var(--color-border);
}

blockquote.prose p:first-child {
  font-size: var(--font-size-body-large);
  color: var(--color-text-strong);
}

/* ----------------------------------------------------------- 6. Text helpers */

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

.text-measure-short {
  max-width: var(--max-text-width-short);
}

.text-lead {
  font-size: var(--font-size-body-large);
  color: var(--color-text-muted);
}

.text-muted {
  color: var(--color-text-muted);
}

.text-monospace {
  font-family: var(--font-family-monospace);
  font-size: 0.875em;
  letter-spacing: 0;
}

.text-no-wrap {
  white-space: nowrap;
}

.text-center {
  text-align: center;
}

/* ---------------------------------------------------- 7. Content block family */

/* The wrapper the small Heading, Rich Text and Buttons blocks share, so an
   editor dropping one between two section blocks gets the same measure and the
   same rhythm as the sections around it. */
.content-block {
  margin-inline: auto;
  padding-inline: var(--container-gutter);
  max-width: var(--container-max-width);
}

.content-block--narrow {
  max-width: calc(var(--container-narrow-max-width) + var(--container-gutter) * 2);
}

.content-block--wide {
  max-width: calc(var(--container-max-width) + 10rem);
}

.content-block--center {
  text-align: center;
}

.content-block--center .prose,
.content-block--center .content-block__inner {
  margin-inline: auto;
}

.content-block--space-top-small { margin-block-start: var(--space-medium); }
.content-block--space-top-medium { margin-block-start: var(--space-x-large); }
.content-block--space-top-large { margin-block-start: var(--space-2x-large); }
.content-block--space-bottom-small { margin-block-end: var(--space-medium); }
.content-block--space-bottom-medium { margin-block-end: var(--space-x-large); }
.content-block--space-bottom-large { margin-block-end: var(--space-2x-large); }

/* --------------------------------------------------------- 8. Button system */

/* Declared globally rather than per block, because the hero, the call-to-action
   band, the forms and half the section blocks all place one. */
.button {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  min-height: var(--minimum-target-size);
  padding: 0.75rem 1.375rem;
  font-family: var(--font-family-display);
  font-size: 0.9375rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border-radius: var(--radius-medium);
  transition:
    background-color var(--duration-fast) var(--easing-out),
    box-shadow var(--duration-fast) var(--easing-out),
    border-color var(--duration-fast) var(--easing-out),
    transform var(--duration-fast) var(--easing-out);
}

.button:active {
  transform: translateY(1px);
}

.button__icon {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  transition: transform var(--duration-base) var(--easing-out);
}

.button:hover .button__icon {
  transform: translateX(2px);
}

.button--primary {
  color: var(--color-white);
  background-image: var(--gradient-brand);
  box-shadow: var(--shadow-brand);
}

.button--primary:hover {
  color: var(--color-white);
  box-shadow: var(--shadow-brand-hover);
}

.button--secondary {
  color: var(--color-text-strong);
  background-color: var(--color-background-raised);
  border: 1.5px solid var(--color-border);
}

.button--secondary:hover {
  color: var(--color-text-strong);
  border-color: var(--color-accent);
}

.button--ghost {
  color: var(--color-text-strong);
  border: 1.5px solid var(--color-border-strong);
}

.button--ghost:hover {
  color: var(--color-text-strong);
  background-color: var(--color-background-raised);
  border-color: var(--color-text-strong);
}

.button--large {
  min-height: 3.25rem;
  padding: 0.9375rem 1.75rem;
  font-size: 1rem;
}

.button--full-width {
  width: 100%;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-x-small);
  align-items: center;
}

.button-row--center {
  justify-content: center;
}

/* On a phone a row of buttons that wraps leaves one button stranded on its own
   line at a different width from the one above it. Below the mobile breakpoint
   every button fills the line, which lines them up and gives each a
   comfortable tap target. */
@media (width < 40rem) {
  .button {
    width: 100%;
  }

  .button-row {
    flex-direction: column;
    align-items: stretch;
  }

  /* A text link is not a button and should not be stretched into one. */
  .button-row .link-arrow {
    width: auto;
    justify-content: flex-start;
  }

  /* The search button sits beside its input, so it keeps its own width. */
  .search-form .button {
    width: auto;
  }
}

/* A text link that reads as an onward step rather than a button. */
.link-arrow {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  font-family: var(--font-family-display);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent-text);
  text-decoration: none;
}

.link-arrow:hover {
  text-decoration: underline;
}

.link-arrow svg {
  width: 1rem;
  height: 1rem;
  transition: transform var(--duration-base) var(--easing-out);
}

.link-arrow:hover svg {
  transform: translateX(2px);
}

/* ------------------------------------------------ 9. Per-device visibility */

/* Printed by the Responsive tab on every block. The breakpoints match the
   --breakpoint-* tokens, and the labels an editor sees in the dashboard. */
@media (width < 40rem) {
  .hide-mobile {
    display: none !important;
  }
}

@media (width >= 40rem) and (width < 62rem) {
  .hide-tablet {
    display: none !important;
  }
}

@media (width >= 62rem) {
  .hide-desktop {
    display: none !important;
  }
}

/* Swaps the first two children of a two-column layout on phones, so the part
   an editor wants read first leads regardless of source order. */
@media (width < 48rem) {
  .is-reverse-mobile {
    display: flex;
    flex-direction: column;
  }

  .is-reverse-mobile > *:first-child {
    order: 2;
  }

  .is-reverse-mobile > *:nth-child(2) {
    order: 1;
  }
}

/* --------------------------------------------------------------- 10. Utility */

.no-scroll {
  overflow: hidden;
}

/* -------------------------------------------------------------- 11. Print */

@media print {
  .site-header,
  .site-footer,
  .skip-link,
  .mobile-drawer {
    display: none;
  }

  body {
    color: var(--color-black);
    background: var(--color-white);
  }
}

/* ------------------------------------------------- 12. Section footer link */

/* The onward link that closes a listing section. Declared globally because
   seven blocks place one and they must all sit the same distance below the
   grid above them. */
.section-footer-link {
  margin-block-start: var(--space-large);
}