/* ============================================================
   INFLUASIA 2026 — the WordPress-only stylesheet.

   THREE THINGS LIVE HERE AND NOTHING ELSE:
     1. the page templates, index.php and the 404, which are surfaces the static
        site does not have and therefore has no rules for;
     2. the Fluent Forms fields inside the contact panel;
     3. the theme form's success and failure message, which is a state the
        static form could not have — it had no server to hear back from.

   IT RESTYLES NOTHING. Every value in part 2 is QUOTED from the .cform rules in
   src/styles/sections.css, including the four alphas that block records as
   measured contrast readings against #82110c, the worst point on the panel's
   own gradient. The form replaced the mechanism, not the design, so the fields
   have to keep the type, the wells and the readings the design was signed off
   with. Where a value here is new it is derived from a token the site already
   sets, never chosen fresh.

   GENERATED BY scripts/build-wp.mjs — edit that, not this.
   ============================================================ */

/* ---------- 1. the generic page and the 404 ---------- */

/* The nav is position:fixed at --nav-h (84px), so a page that starts at the top
   of the document would start underneath it. The offset is written as the token
   plus air rather than as 84px plus a number, so it follows --nav-h if that
   moves. MEASURED on the served page: the shell's computed padding-top is
   138.00px at 1440x900 (84 + 6vh of 900) and 134.64px at 390x844 (84 + 6vh of
   844), so the first line of a legal page clears the pill at both. */
.page-shell {
  padding-top: calc(var(--nav-h) + clamp(28px, 6vh, 64px));
  /* 2026-09-04, client on the legal pages: "there is a gap between the contact
     form footer and the menu/copyrights footer." Measured, the gap was THIS
     padding: parts/site-contact is main's last child, so main's bottom padding
     painted the body's white between the dark contact block and the footer.
     The air moved onto .page-body, above the contact block. */
  padding-bottom: 0;
}

/* THE FULL COLUMN, 2026-09-04. This was a 64ch measure, the widest value that
   kept a legal paragraph's longest line at 75 characters at 1440x900. Client:
   "the width should use the full body width vs half now", so the column is now
   .container's own 1560px, the width the one-pager runs at. */
.page-body {
  max-width: none;
  padding-bottom: clamp(56px, 10vh, 120px);
}

.page-title {
  font-size: clamp(34px, 5.2vw, 62px);
  margin: 0 0 clamp(18px, 2.6vh, 30px);
}
.eyebrow + .page-title {
  margin-top: 14px;
}

.page-lede {
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.65;
  color: var(--muted);
  margin: 0 0 28px;
}
.page-actions {
  margin: 0;
}

/* the_content() is the client's markup, so this dresses the tags WordPress can
   emit rather than classes we control */
.page-copy {
  color: var(--ink-grey);
  font-size: 16.5px;
  line-height: 1.75;
}
.page-copy > :first-child {
  margin-top: 0;
}
.page-copy p,
.page-copy address {
  margin: 0 0 18px;
}
.page-copy h2,
.page-copy h3,
.page-copy h4 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--ink);
  margin: 38px 0 14px;
}
.page-copy h2 { font-size: clamp(22px, 2.6vw, 30px); }
.page-copy h3 { font-size: clamp(18px, 2vw, 22px); }
.page-copy h4 { font-size: 17px; }

/* base.css sets list-style:none on every ul and ol for the one-pager's rails and
   chips. Legal copy needs its markers back, and only inside this column. */
.page-copy ul { list-style: disc; }
.page-copy ol { list-style: decimal; }
.page-copy ul,
.page-copy ol {
  padding-left: 22px;
  margin: 0 0 18px;
}
.page-copy li { margin-bottom: 8px; }

/* ONE RED: --crimson-text is the only red a glyph on this site may take, so a
   link in the client's own copy takes that one and no other. Computed 5.23:1
   against the page's #ffffff ground, over the 4.5:1 body-text bar; the underline
   means it is not carrying the distinction on colour alone. */
.page-copy a {
  color: var(--crimson-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.page-copy a:hover { text-decoration-thickness: 2px; }

.page-copy strong { font-weight: 700; color: var(--ink); }
.page-copy hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 34px 0;
}
.page-copy blockquote {
  margin: 0 0 18px;
  padding-left: 18px;
  border-left: 3px solid var(--crimson);
  color: var(--ink-grey);
}
.page-copy table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 18px;
  font-size: 15px;
}
.page-copy th,
.page-copy td {
  border: 1px solid var(--line);
  padding: 10px 12px;
  text-align: left;
}
/* a wide table in pasted legal copy must scroll inside its own column rather
   than push the whole document sideways */
.page-copy figure.wp-block-table,
.page-copy .wp-block-table {
  overflow-x: auto;
}

/* ---------- 2. Fluent Forms inside the contact panel ---------- */

/* .cform is the SAME panel the static site draws — the gradient, the radius, the
   focus-within warm-up and the isolation all still come from sections.css. Only
   the fields inside it are the plugin's now.

   The selectors are element-based inside the scoped panel on purpose: whatever
   class names Fluent Forms emits this release or next, an input is still an
   input inside .cform--fluent. The .ff-* selectors that do appear are only for
   structure the elements cannot express by themselves. */

.cform--fluent .ff-el-group,
.cform--fluent .frm-fluent-form .ff-el-group {
  /* .cform is a grid with gap:16px; the plugin lays its own groups out with
     margins, so the same 16px is spent that way here */
  margin: 0 0 16px;
}
.cform--fluent .ff-el-group:last-of-type { margin-bottom: 0; }

/* .cform-field: 12px / 700 / 0.14em / uppercase, at rgba(255,255,255,0.78),
   which sections.css records as 6.70:1 against #82110c */
.cform--fluent label,
.cform--fluent .ff-el-input--label label {
  display: block;
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}
.cform--fluent .ff-el-input--label.ff-el-is-required label:after {
  color: rgba(255, 255, 255, 0.78);
}

/* .cform-field input / textarea, value for value. The 0.46 border is the
   measured 3.16:1 non-text-UI reading; the 0.66 placeholder is 4.80:1. */
.cform--fluent input[type="text"],
.cform--fluent input[type="email"],
.cform--fluent input[type="tel"],
.cform--fluent input[type="url"],
.cform--fluent input[type="number"],
.cform--fluent input[type="date"],
.cform--fluent textarea,
.cform--fluent select {
  width: 100%;
  font: 500 15px var(--font-body);
  color: var(--white);
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.46);
  border-radius: 12px;
  padding: 13px 15px;
  transition: border-color 0.25s, background 0.25s;
  box-shadow: none;
}
.cform--fluent textarea { resize: vertical; }
.cform--fluent input::placeholder,
.cform--fluent textarea::placeholder {
  color: rgba(255, 255, 255, 0.66);
}
.cform--fluent input:focus,
.cform--fluent input:focus-visible,
.cform--fluent textarea:focus,
.cform--fluent textarea:focus-visible,
.cform--fluent select:focus,
.cform--fluent select:focus-visible {
  outline: none;
  border-color: var(--amber);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: none;
}

/* The submit button is the site's .btn recipe: crimson pill, white label, a wipe
   rising on hover. Reproduced here rather than left to the plugin's default so
   the block keeps the one control it exists to get pressed. Adding the class
   "btn" to the submit button in the Fluent Forms editor lands on the same
   declarations, so doing both is safe.
   THE WIPE IS --amber UNDER AN --ink LABEL, 2026-09-04. Client: the hover
   "should be another more distinct color like a light green or something that
   still gels well with the design of the footer." Amber rather than green: it
   is already the footer's accent (the OFFICE/EMAIL labels, the LET'S TALK
   headline), the site has no green token and this sheet may not carry a new
   hex. sections.css gives .cform-submit the same two rules, so the static form
   and this one hover alike. */
.cform--fluent button[type="submit"],
.cform--fluent input[type="submit"],
.cform--fluent .ff-btn-submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 34px;
  border: 0;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  background: var(--crimson);
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  box-shadow: 0 10px 26px -12px rgba(225, 29, 46, 0.55);
  transition: color 0.35s var(--ease-out);
}
.cform--fluent button[type="submit"]::after,
.cform--fluent input[type="submit"]::after,
.cform--fluent .ff-btn-submit::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--amber);
  transform: translateY(101%);
  border-radius: 50% 50% 0 0;
  transition: transform 0.45s var(--ease-expo), border-radius 0.45s var(--ease-expo);
}
.cform--fluent button[type="submit"]:hover::after,
.cform--fluent input[type="submit"]:hover::after,
.cform--fluent .ff-btn-submit:hover::after {
  transform: translateY(0);
  border-radius: 0;
}
/* MEASURED ON THE LIVE SITE, 2026-09-04: the button rendered Fluent's blue, not
   crimson. Fluent prints an inline per-form style AFTER this sheet —
   `form.fluent_form_3 .ff-btn-submit:not(.ff_btn_no_style)` at (0,3,1) — and
   its own stylesheet fades `.ff-default .ff_btn_style:hover` to opacity .8, so
   the (0,2,1) recipe above lost the ground, the label and the hover. Only the
   contested declarations are repeated here, at (0,4,1) and (0,5,1); the pill
   itself still comes from the block above. .ff-btn is the class the plugin
   always puts beside .ff-btn-submit, which is what buys the fourth class. */
.cform--fluent .fluentform form .ff-btn.ff-btn-submit {
  background: var(--crimson);
  color: var(--white);
  border: 0;
}
.cform--fluent .fluentform form .ff-btn.ff-btn-submit:hover,
.cform--fluent .fluentform form .ff-btn.ff-btn-submit:focus {
  background: var(--crimson);
  opacity: 1;
}
.cform--fluent .fluentform form .ff-btn.ff-btn-submit:hover {
  color: var(--ink);
}
@media (prefers-reduced-motion: reduce) {
  .cform--fluent button[type="submit"]::after,
  .cform--fluent input[type="submit"]::after,
  .cform--fluent .ff-btn-submit::after {
    transition: none;
  }
}

/* ERRORS AND CONFIRMATIONS IN WHITE, NOT IN A SECOND RED.
   The panel IS crimson, and this site reserves the crimson family: a light red
   error message would be both a new red and a 1-to-1 fight with its own ground.
   White at full alpha is the 9.18:1 reading sections.css already records for a
   filled value on this panel, and the field's border going solid white is the
   non-colour half of the same signal. */
.cform--fluent .error,
.cform--fluent .text-danger,
.cform--fluent .ff-el-is-error .error {
  color: #ffffff;
  font-weight: 700;
  font-size: 12.5px;
  margin-top: 6px;
}
.cform--fluent .ff-el-is-error input,
.cform--fluent .ff-el-is-error textarea,
.cform--fluent .ff-el-is-error select {
  border-color: rgba(255, 255, 255, 0.92);
}
.cform--fluent .ff-message-success,
.cform--fluent .ff_message_success {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid rgba(255, 255, 255, 0.46);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 15px;
}

/* ---------- 3. the theme form's own answer ---------- */

/* THE ONE STATE THE STATIC PANEL COULD NOT HAVE. The prototype's form composed
   a mailto and handed the visitor to their mail client, so it never had a server
   to report back from; the theme's own form does, and a submission that says
   nothing afterwards is a submission the visitor has to guess about.

   NOT A NEW COMPONENT. Every value below is the .ff-message-success well
   directly above — 0.1 ground, the 0.46 border at its measured 3.16:1, white
   text at the 9.18:1 sections.css records for a filled value on this panel,
   12px radius and 14/16 padding straight off the inputs. The failure variant
   changes exactly what the Fluent error state changes: the border to 0.92 and
   the weight to 700.

   AND IT IS NOT RED. The panel IS crimson. A red error message here would be
   both a second red on a site that reserves the family and a 1-to-1 fight with
   its own ground, so the distinction is carried by weight and border, never by
   hue — the same argument the .ff error rules above are written from. */
.cform-status {
  margin: 0;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.55;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid rgba(255, 255, 255, 0.46);
}
.cform-status--error {
  font-weight: 700;
  border-color: rgba(255, 255, 255, 0.92);
}
/* base.css sets `a { text-decoration: none }` for the one-pager, and the only
   link that ever appears in here is the mailto in the delivery-failure message —
   the one line whose whole job is to be clicked. It gets the affordance back. */
.cform-status a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}