/* ==========================================================================
   Base — reset, typography, shared primitives.
   Mirrors what GeneratePress + the Elementor kit produced on the old site.
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--color-page);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg,
video { max-width: 100%; }

img { height: auto; border: 0; }

h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1; font-weight: 600; }

h2 { font-size: 40px; }
h3 { font-size: 30px; }

@media (max-width: 1366px) {
  h2 { font-size: 28px; }
  h3 { font-size: 28px; }
}

p { margin: 0; }

a { color: inherit; text-decoration: none; }
a:hover,
a:focus-visible { color: inherit; }

ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 3px; }

/* --- Skip link ---------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--color-invert);
  color: var(--color-primary);
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* --- Utilities ---------------------------------------------------------- */
.u-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Layout primitives --------------------------------------------------
   `.section` is a full-bleed band (backgrounds paint edge to edge).
   `.section__inner` is the centred measure; set --content-width per section.
   These mirror Elementor's boxed-container behaviour 1:1.
   ------------------------------------------------------------------------ */
.section {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.section__inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--content-width, 100%);
  margin-inline: auto;
}

/* Above the laptop breakpoint the per-section content widths (1268px, 1614px …)
   are wider than many desktop viewports, which used to let content run right up
   to the screen edge. Keep the same gutter the design uses at 1366px and below. */
@media (min-width: 1367px) {
  .section__inner {
    max-width: min(var(--content-width, 100%), 100% - (var(--gutter) * 2));
  }
}

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--btn-padding);
  border: 0;
  border-radius: var(--btn-radius);
  background-color: transparent;
  background-image: var(--btn-gradient);
  color: var(--color-invert);
  font-family: inherit;
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: filter .2s ease;
}

.btn:hover,
.btn:focus-visible { color: var(--color-invert); filter: brightness(1.08); }

/* Full-width variant — Elementor's "justify" button alignment. */
.btn--block { display: flex; width: 100%; }

/* --- Form fields -------------------------------------------------------- */
.field {
  width: 100%;
  padding: var(--field-padding);
  border: 0;
  border-radius: var(--field-radius);
  background-color: var(--color-invert);
  color: var(--color-field-text);
  font-family: inherit;
  font-size: var(--field-font-size);
  font-weight: var(--field-font-weight);
  line-height: var(--line-height-base);
}

.field::placeholder { color: var(--color-field-text); opacity: 1; }

textarea.field { resize: vertical; }

/* File inputs: hide the browser's "Choose file" button — clicking anywhere on
   the field opens the picker, and the chosen filename shows in its place. */
.field[type='file'] {
  cursor: pointer;
  line-height: 1.5;
}

.field[type='file']::file-selector-button { display: none; }
.field[type='file']::-webkit-file-upload-button { display: none; }

.form__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.form__cell { flex: 1 1 100%; min-width: 0; }
.form__cell--half { flex: 1 1 calc(50% - 5px); }

.form__status {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 600;
}
.form__status[data-state='error'] { color: #c0392b; }
.form__status[data-state='ok'] { color: var(--color-secondary); }