/**
 * ixiun Forms — front-end styles.
 *
 * Layout is driven by the schema's `layout` rows: each .ixiun-form__row is a
 * CSS grid whose column count comes from the --ixf-cols custom property set
 * inline per row. On narrow screens every row collapses to a single column.
 *
 * BRAND-AWARE BY DESIGN: the look is driven by --ixf-* variables that default to
 * the host theme's own tokens (Nunito Sans, the body font, the accent/button
 * colours) with plain fallbacks. On the ixiun-onyx theme the form picks up the
 * site's fonts and gold accent automatically; on any other theme it degrades to
 * a clean neutral. To restyle, a theme need only set these variables.
 */

.ixiun-form {
    /* Type — labels get the theme's Nunito Sans as an editorial accent; fields
       use the theme body font. Both fall back cleanly off the ixiun theme. */
    --ixf-font:       var(--font-body, 'Helvetica Neue', Arial, sans-serif);
    --ixf-label-font: var(--wp--preset--font-family--nunito-sans, 'Nunito Sans', var(--font-body, sans-serif));

    /* Colour — sampled from the theme palette with fallbacks.
       NOTE: ink deliberately reads --color-text (the body text colour), NOT
       --color-primary. "Primary" is a brand colour that can legitimately be light,
       which would render labels/buttons unreadable; body text is reliably legible. */
    --ixf-ink:     var(--color-text, #1a1b1a);
    --ixf-muted:   var(--color-muted, #6b7280);
    --ixf-accent:  var(--color-accent, #ddbd7d);
    --ixf-surface: var(--color-surface, #ffffff);
    /* Field border: tinted from the ink so it always relates to the text colour.
       Strong enough (30%) that a pale field still reads as a FIELD when it sits
       on a coloured card — a near-invisible hairline just looks like a blank gap. */
    --ixf-border:  color-mix(in srgb, var(--ixf-ink) 30%, transparent);
    --ixf-error:   #b3261e;

    /* Button palette. --ixf-btn (fill / border) and --ixf-btn-text (the label) are
       BOTH overridable from Form Settings, so the button never depends on a theme
       variable happening to resolve to a readable value. */
    --ixf-btn:           var(--color-btn, #d6a84b);
    --ixf-btn-secondary: var(--color-btn-secondary, #e7dcdc);
    --ixf-btn-text:      var(--ixf-ink);
    --ixf-inverse:       var(--color-text-inverse, #ffffff);
    /* The label colour once the hover wipe has filled the button. Without this the
       label keeps its resting colour and vanishes into the fill (black-on-black).
       Defaults to the inverse (white), which is right for a dark fill; override it
       from Form Settings if the button colour is light. */
    --ixf-btn-text-hover: var(--ixf-inverse);

    /* Input focus ring/border colour — its own variable so it can be recoloured
       (Forms ▸ Form Settings ▸ Focus color) independently of the button. */
    --ixf-focus:    var(--color-btn, #d6a84b);
    /* The required-field mark colour, likewise independently recolourable. */
    --ixf-required: var(--ixf-accent);

    --ixf-radius: 10px;
    --ixf-gap: 1.25rem;      /* horizontal gap between side-by-side fields */
    --ixf-row-gap: 1.75rem;  /* vertical rhythm between rows — the "air" */

    max-width: 640px;
    margin: 0 auto;
    font-family: var(--ixf-font);
    color: var(--ixf-ink);
}

.ixiun-form__title {
    margin: 0 0 var(--ixf-row-gap);
}

/* --- Rows / columns ---------------------------------------------------- */
.ixiun-form__row {
    display: grid;
    grid-template-columns: repeat(var(--ixf-cols, 1), 1fr);
    column-gap: var(--ixf-gap);
    row-gap: var(--ixf-row-gap);
    margin-bottom: var(--ixf-row-gap);
}

@media (max-width: 600px) {
    .ixiun-form__row {
        grid-template-columns: 1fr;
    }
}

/* --- Fields ------------------------------------------------------------ */
.ixiun-form__field {
    display: flex;
    flex-direction: column;
    min-width: 0; /* let inputs shrink inside the grid */
    border: 0;
    padding: 0;
    margin: 0;
}

/* Editorial label: Nunito Sans, tracked-out, small — echoing the theme's
   eyebrow/label treatment. Case is left as authored (so "(optional)" hints stay
   lowercase); it just gets the spacing and the accent font. */
.ixiun-form__label {
    font-family: var(--ixf-label-font);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.45;
    color: var(--ixf-ink);
    margin-bottom: 0.6rem;
}

.ixiun-form__required {
    color: var(--ixf-required);
    margin-left: 0.15em;
}

.ixiun-form__field input,
.ixiun-form__field textarea,
.ixiun-form__field select {
    width: 100%;
    box-sizing: border-box;
    padding: 0.78rem 0.9rem;
    font-family: var(--ixf-font);
    font-size: 1rem;
    line-height: 1.4;
    color: var(--ixf-ink);
    background: var(--ixf-surface);
    border: 1px solid var(--ixf-border);
    border-radius: var(--ixf-radius);
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.ixiun-form__field input::placeholder,
.ixiun-form__field textarea::placeholder {
    color: var(--ixf-muted);
    opacity: 0.7;
}

.ixiun-form__field textarea {
    min-height: 8.5rem;
    resize: vertical;
}

/* Custom dropdown chevron so selects match the inputs instead of the OS look. */
.ixiun-form__field select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2.4rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23726a58' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.95rem center;
    background-size: 12px 8px;
}

.ixiun-form__field input:focus,
.ixiun-form__field textarea:focus,
.ixiun-form__field select:focus {
    outline: none;
    border-color: var(--ixf-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ixf-focus) 40%, transparent);
}

/* --- Choice groups (radio / checkbox) --------------------------------- */
/* radio/checkbox groups render as a <fieldset><legend> for correct labelling;
   strip the browser's default fieldset chrome so it matches other fields. */
.ixiun-form__control {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.ixiun-form__options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.15rem;
}

.ixiun-form__option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--ixf-font);
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}

.ixiun-form__option input {
    width: auto;
    accent-color: var(--ixf-focus);
}

/* --- Help + error ------------------------------------------------------ */
.ixiun-form__help {
    margin: 0.4rem 0 0;
    font-size: 0.85em;
    color: var(--ixf-muted);
}

.ixiun-form__error {
    margin: 0.4rem 0 0;
    font-size: 0.85em;
    color: var(--ixf-error);
}

.ixiun-form__field.has-error input,
.ixiun-form__field.has-error textarea,
.ixiun-form__field.has-error select {
    border-color: var(--ixf-error);
}

.ixiun-form__summary {
    padding: 0.8rem 1rem;
    margin-bottom: var(--ixf-row-gap);
    border-radius: var(--ixf-radius);
    border-left: 3px solid var(--ixf-error);
    background: color-mix(in srgb, var(--ixf-error) 8%, transparent);
    color: var(--ixf-error);
    font-weight: 600;
}

/* --- The confirmation, and the swap animation -------------------------- */
/* With JS, submitting doesn't reload the page: the form fades out and this panel
   slides up into exactly the space it left. The shell pins its height for the
   duration so the page never lurches. Without JS the same panel is printed by
   the server after a redirect — it just appears, already in place, with no
   animation classes on it. Both look identical once settled. */

.ixiun-form-shell {
    transition: height 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* The form on its way out. */
.ixiun-form.is-leaving {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.28s ease, transform 0.28s ease;
    pointer-events: none;
}

/* The confirmation sits directly on whatever the form sat on — no panel of its
   own. The form is usually already inside the theme's card, and a tinted box
   inside that card just reads as a box inside a box. */
.ixiun-form--done {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
}

.ixiun-form__done-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

/* The tick, in a soft gold disc. */
.ixiun-form__done-mark {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ixf-accent) 22%, transparent);
    color: var(--ixf-accent);
}

.ixiun-form__done-mark svg {
    width: 1.5rem;
    height: 1.5rem;
}

.ixiun-form__success {
    margin: 0;
    color: var(--ixf-ink);
    font-family: var(--ixf-label-font);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.5;
    max-width: 34ch;
}

/* Entry animation. These classes are added by the script only — the server-
   rendered (no-JS) panel carries neither, so it is simply visible. That's the
   whole trick: if the animation classes were the default, a visitor with JS off
   would be left staring at an invisible confirmation. */
.ixiun-form--done.is-entering {
    opacity: 0;
    transform: translateY(14px);
}

.ixiun-form--done.is-entering.is-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* The panel is focused programmatically so screen-reader and keyboard users land
   on it; that shouldn't paint a focus ring for mouse users. */
.ixiun-form--done:focus {
    outline: none;
}

.ixiun-form--done:focus-visible {
    outline: 2px solid var(--ixf-focus);
    outline-offset: 3px;
}

/* Respect a stated preference for less motion: same swap, no travel. */
@media (prefers-reduced-motion: reduce) {

    .ixiun-form-shell,
    .ixiun-form.is-leaving,
    .ixiun-form--done.is-entering.is-in {
        transition: none;
    }

    .ixiun-form--done.is-entering {
        transform: none;
    }
}

/* --- Submit button styles --------------------------------------------- */
/* Ported from the ixiun-onyx theme's editorial button system so the form's
   button looks the same whether or not that theme is active. Choose one in
   Forms ▸ Form Settings ▸ Button style; it maps to a --primary / --secondary /
   --outline / --simple modifier below.
     Primary   — solid gold, dark label, hover-wipes to dark, sliding →
     Secondary — soft fill, hover-wipes to gold, sliding →
     Outline   — ghost with a thin border, hover-wipes to solid
     Simple    — a clean rounded gold pill, no frills                         */
/* Turnstile captcha widget, when configured. Cloudflare renders the box itself
   at a fixed size; we only give it room to breathe above the button. */
.ixiun-form__captcha {
    margin-top: calc(var(--ixf-row-gap) * 1.25);
}

.ixiun-form__actions {
    margin-top: calc(var(--ixf-row-gap) * 1.25);
}

.ixiun-form__submit {
    cursor: pointer;
    font-family: var(--ixf-label-font);
}

.ixiun-form__submit[disabled] {
    opacity: 0.6;
    cursor: default;
    transform: none;
    box-shadow: none;
}

/* Shared editorial base — Primary / Secondary / Outline */
.ixiun-form__submit--primary,
.ixiun-form__submit--secondary,
.ixiun-form__submit--outline {
    position: relative;
    z-index: 0;               /* stacking context so the wipe sits behind the label */
    overflow: hidden;         /* clip the wipe to the button box */
    display: inline-block;
    text-align: center;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 1.4rem 3.4rem;
    min-width: 240px;
    border: 1.5px solid transparent;
    border-radius: 2px;       /* barely-rounded, editorial */
    background-color: transparent;
    color: var(--ixf-btn-text);
    transition: color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

/* Left-to-right colour wipe, revealed on hover (behind the label) */
.ixiun-form__submit--primary::before,
.ixiun-form__submit--secondary::before,
.ixiun-form__submit--outline::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.42s cubic-bezier(0.65, 0, 0.35, 1);
}

.ixiun-form__submit--primary:hover::before,
.ixiun-form__submit--secondary:hover::before,
.ixiun-form__submit--outline:hover::before {
    transform: scaleX(1);
}

.ixiun-form__submit--primary:hover,
.ixiun-form__submit--secondary:hover,
.ixiun-form__submit--outline:hover {
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.24);
}

/* Sliding arrow — solid styles only */
.ixiun-form__submit--primary::after,
.ixiun-form__submit--secondary::after {
    content: '\2192';
    display: inline-block;
    margin-left: 0.75em;
    transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.ixiun-form__submit--primary:hover::after,
.ixiun-form__submit--secondary:hover::after {
    transform: translateX(7px);
}

/* Resting raised shadow — solid buttons only */
.ixiun-form__submit--primary,
.ixiun-form__submit--secondary {
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
}

/* Primary — solid gold gradient; wipes to the dark colour */
.ixiun-form__submit--primary {
    color: var(--ixf-btn-text);
    border-color: var(--ixf-btn);
    background: linear-gradient(150deg,
        color-mix(in srgb, var(--ixf-btn) 82%, #fff) 0%,
        color-mix(in srgb, var(--ixf-btn) 90%, #000) 100%);
}
.ixiun-form__submit--primary::before {
    background-color: var(--ixf-btn-text);
}
.ixiun-form__submit--primary:hover {
    /* Primary wipes to the dark ink, so the label flips for the same reason. */
    color: var(--ixf-btn-text-hover);
    border-color: var(--ixf-btn-text);
}

/* Secondary — soft fill; wipes to gold */
.ixiun-form__submit--secondary {
    color: var(--ixf-btn-text);
    border-color: var(--ixf-btn-secondary);
    background: linear-gradient(150deg,
        color-mix(in srgb, var(--ixf-btn-secondary) 97%, #fff) 0%,
        color-mix(in srgb, var(--ixf-btn-secondary) 93%, #000) 100%);
}
.ixiun-form__submit--secondary::before {
    background-color: var(--ixf-btn);
}
.ixiun-form__submit--secondary:hover {
    color: var(--ixf-btn-text);
    border-color: var(--ixf-btn);
}

/* Outline — a PROMINENT ghost: a full-strength 2px border in the button colour,
   a faint tint so it still reads as a button (a border alone disappears on a
   coloured background), and a solid wipe to the button colour on hover.
   Deliberately not the theme's on-photo white variant, which vanishes on light. */
.ixiun-form__submit--outline {
    color: var(--ixf-btn-text);
    border-width: 2px;
    border-color: var(--ixf-btn);
    /* A TRUE ghost: fully transparent and flat at rest. No tint fill, no resting
       shadow — those are what make an outline button read as a washed-out solid
       one. Its presence comes from the 2px border and a confident label. */
    background-color: transparent;
    box-shadow: none;
}
.ixiun-form__submit--outline::before {
    background-color: var(--ixf-btn);
}
.ixiun-form__submit--outline:hover {
    /* The wipe fills with --ixf-btn, so the label MUST flip or it disappears
       into the fill (e.g. black label on a black fill). */
    color: var(--ixf-btn-text-hover);
    border-color: var(--ixf-btn);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
}

/* Simple — a clean rounded gold pill, no wipe/arrow */
.ixiun-form__submit--simple {
    display: inline-block;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 1rem 2.6rem;
    border: 0;
    border-radius: var(--ixf-radius);
    color: var(--ixf-btn-text);
    background: linear-gradient(150deg,
        color-mix(in srgb, var(--ixf-btn) 88%, #fff) 0%,
        color-mix(in srgb, var(--ixf-btn) 94%, #000) 100%);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--ixf-btn) 38%, transparent);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.ixiun-form__submit--simple:hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
    box-shadow: 0 12px 26px color-mix(in srgb, var(--ixf-btn) 46%, transparent);
}
.ixiun-form__submit--simple:active {
    transform: translateY(0);
}

/* Optional full-width submit — set via the "Button width" setting. */
.ixiun-form__actions--full .ixiun-form__submit {
    display: block;
    width: 100%;
}

/* --- Honeypot: visually and semantically hidden, but present in the DOM.
       Not display:none — some bots skip display:none fields. -------------- */
.ixiun-form__hp {
    position: absolute !important;
    left: -9999px !important;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Editor-only hint when a shortcode id doesn't resolve. */
.ixiun-form__notice {
    padding: 0.6rem 0.8rem;
    border: 1px dashed var(--ixf-error);
    border-radius: var(--ixf-radius);
    color: var(--ixf-error);
}