/* Contact form brick. Field, label and button basics come from the theme's
   base.css (form > div, input, textarea, button); this file adds layout and state. */

.brick-contact-form .twocols { align-items: start; }
.brick-contact-form .twocols > div { justify-content: flex-start; }

.brick-contact-form__box { padding: 2.5rem clamp(1.25rem, 4vw, 2.5rem); }
.brick-contact-form__box h2 { font-size: 1.75rem; margin-top: 0; }

.brick-contact-form__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1rem;
}
.brick-contact-form__row > div { display: flex; flex-direction: column; gap: 0.25rem; }

.brick-contact-form label { font-weight: 600; color: var(--textDark); }
.brick-contact-form input,
.brick-contact-form textarea { width: 100%; background: white; }

/* A textarea is a scroll container, so as a flex item (the theme's `form > div` is a flex
   column) its automatic minimum height is zero, and a phone browser shrank it to a single
   line - seen on a real device, not reproducible in desktop Chrome at phone width. The
   theme's 9rem is pinned as a floor. */
.brick-contact-form textarea { min-height: 9rem; flex-shrink: 0; }

.brick-contact-form input:disabled,
.brick-contact-form textarea:disabled { opacity: 0.6; cursor: not-allowed; }
.brick-contact-form button:disabled { opacity: 0.8; cursor: progress; transform: none; }

/* Turnstile's managed widget is 65px tall; reserving it avoids a jump when it loads. */
.brick-contact-form .cf-turnstile { min-height: 65px; margin-bottom: 1rem; }

.brick-contact-form__hp { display: none !important; }

/* Button and privacy note, left-aligned like the CTA brick's text and button. */
/* Flex set here, not inherited: inside __bottom the footer is no longer a direct child
   of the form, so the theme's `form > div` rule that gave it flex (and gap) misses it. */
.brick-contact-form__footer { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.brick-contact-form__note { font-size: 0.875rem; margin: 0; }

/* -- photo --
   Bottom-right corner of the box with its cropped edge on the box's bottom edge - the
   CTA brick's arrangement. It rises beside everything below the fields, so the box does
   not grow to fit it, and is sized so the air above the head roughly matches the air
   below the privacy note: at 15rem the head sits about 50px under the textarea against
   the note's 40px. Going smaller opens a gap above the head.

   Only the footer (button + note) keeps the photo's width clear. The Turnstile widget
   above it may run under the photo's top-left corner, which is transparent - hence
   pointer-events: none, so its Privatliv/Hjaelp links stay clickable. The thank-you is
   short, so it also reserves the photo's height. */

.brick-contact-form__column { container: contact-form / inline-size; }

.brick-contact-form__bottom { gap: 0; margin-bottom: 0; }

.brick-contact-form__photo {
    position: absolute;
    right: clamp(1.25rem, 4vw, 2.5rem);
    bottom: 0;
    line-height: 0;
    pointer-events: none;
}
.brick-contact-form__photo p { margin: 0; }
.brick-contact-form .brick-contact-form__photo img { width: 15rem; margin: 0; border-radius: 0; }

.brick-contact-form--photo .brick-contact-form__footer,
.brick-contact-form--photo .brick-contact-form__success { padding-right: 16rem; }
.brick-contact-form--photo .brick-contact-form__success { min-height: 12rem; }

/* Too narrow for the corner: the head would reach the 300px Turnstile widget and the note
   would be squeezed into a thin column. The photo stands on top of the box instead, its
   cropped edge on the box's top border, and the box moves down to make room.

   A container query rather than a viewport one, because the box narrows both on phones
   and in the two-column layout just above the point where it stacks. It is on the column,
   not the box, because it has to move the box itself - a container query only styles the
   container's descendants. 35rem of column is about 30rem of box content once the box's
   padding and border are off. The margin is the photo's height: 11rem wide at the source
   image's 4000x3932 ratio. */
@container contact-form (max-width: 35rem) {
    .brick-contact-form--photo .brick-contact-form__box { margin-top: calc(11rem * 3932 / 4000); }
    .brick-contact-form__photo { bottom: 100%; }
    .brick-contact-form .brick-contact-form__photo img { width: 11rem; }
    .brick-contact-form--photo .brick-contact-form__footer,
    .brick-contact-form--photo .brick-contact-form__success { padding-right: 0; min-height: 0; }
}

/* -- states -- */

.brick-contact-form__error { display: none; }
.brick-contact-form[data-state="error"] .brick-contact-form__error {
    display: block;
    background: #FDECEE;
    border: 1px solid #F5C2C7;
    color: #842029;
    border-radius: 0.4rem;
    padding: 0.6rem 0.9rem;
    margin-bottom: 1rem;
}

.brick-contact-form__success { display: none; }
.brick-contact-form[data-state="sent"] .brick-contact-form__success { display: block; }
.brick-contact-form[data-state="sent"] form { display: none; }
.brick-contact-form__success h2:focus { outline: none; }

.brick-contact-form__spinner {
    display: none;
    width: 1em;
    height: 1em;
    margin-right: 0.5em;
    vertical-align: -0.15em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: brick-contact-form-spin 0.7s linear infinite;
}
.brick-contact-form[data-state="busy"] .brick-contact-form__spinner { display: inline-block; }
@keyframes brick-contact-form-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .brick-contact-form__spinner { animation: none; border-right-color: currentColor; opacity: 0.6; }
}

/* The theme's .sr-only is display:none, which also silences a live region. */
.brick-contact-form__visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}