/* /support/ — epic 2895 W1 restyle. * * Linked ONLY by support/support.html (the gn_anuga/css/plans.css precedent), * so every rule here is scoped to this page by the file it lives in. That is * deliberate: three of the cascade defects below are FLEET-WIDE, and repairing * them at source would restyle /about, /plans, /security and /billing-policy on * all four sites inside a change the operator asked to be about one page. * They are filed as TASK-2929, which also says to DELETE this file's button * and divider blocks once it lands — they are duplicated there, and only the * form rules are genuinely support-only. * * WHY THIS FILE HAS TO EXIST * -------------------------- * /support/ is the first page in the gn_anuga marketing family to contain a * form. The family owns NO form styling — there is no

, , *

, <label> or <button> in about.html, plans.html,
 * security.html, billing_policy.html, privacy_policy.html or
 * terms_and_conditions.html — so the form fell through to two layers that were
 * never meant for it:
 *
 *   1. hydratabase_home.css:130 declared an UNSCOPED `.form-group{display:flex}`
 *      written for the homepage sign-up box. Each field became a three-column
 *      row (label | control | help text), and the textarea, as a flex item, was
 *      floored at its min-content width — i.e. Django's default cols="40" —
 *      instead of filling the column. Fixed AT SOURCE (scoped to
 *      `#home-page-forms`), because it is a plain bug, not a design choice.
 *
 *   2. MapStore's `.msgapi` Bootstrap 3.4.1 theme, which supplies a SECOND
 *      full Bootstrap on top of GeoNode's. MEASURED, not assumed: the rem base
 *      is 16px (GeoNode's `html{font-size:10px}` is overridden), so
 *      `.msgapi .form-control{height:2rem;padding:.25rem .5rem}` gives a 32px
 *      control with 4px/8px padding and, via `.msgapi .form-control{font-size:.875rem}`
 *      (NOT the `font:inherit` reset, which is only (0,1,1)), 14px text — legible,
 *      but cramped and out of step with the family's 15px/1.7 body copy. More
 *      seriously `.msgapi .btn` (0,2,0) strips `.hydrata-btn-*` (0,1,0) of its
 *      padding, radius and border, and `.msgapi button{color:inherit}` (0,1,1)
 *      beats `.hydrata-btn-primary{color:white}` (0,1,0) — so the submit button
 *      rendered #333 on #325f93, a contrast ratio of 1.92:1 against the 4.5:1
 *      WCAG AA needs. White restores 6.58:1.
 *
 * SPECIFICITY — this is the fiddly part, and it is why the selectors look
 * over-long. geonode.css ships a SECOND full Bootstrap 3 whose selectors are
 * `.msgapi ...`-prefixed, and <body> also carries `gn-legacy`, so the rules
 * that actually have to be beaten on a control are:
 *     .msgapi .form-control            (0,2,0)
 *     .msgapi select.form-control      (0,2,1)  -- and !important on borders
 *     .msgapi .gn-legacy form input    (0,2,2)  -- this one is easy to miss
 * A plain `.hydrata-support-form .form-control` (0,2,0) therefore styles the
 * textarea and silently loses the select and the email input to a #ddd border.
 * Every form rule that must beat `.msgapi .gn-legacy form input` is (0,3,0) or
 * higher for that reason. (The label rule needs only (0,2,1): the rule it has
 * to clear is `.msgapi label` at (0,1,1).) Do NOT
 * "simplify" these to shorter selectors: they will quietly stop applying to
 * two of the three fields, which is exactly the bug this file was written to
 * fix and is invisible unless you diff computed styles field by field.
 *
 * DO NOT size controls with Bootstrap's .form-group-lg / .input-lg. This
 * MapStore build has a unit bug: `.msgapi .form-group-lg .form-control` is
 * `height:24rem` — 384px tall.
 *
 * Palette and radii are the family's, copied not invented:
 *   #1e3a5f headings/labels  #4a5568 body  #64748b captions  #94a3b8 fine print
 *   #325f93 links + primary button  #cbd5e1 control hairline  #e2e8f0 divider
 *   radius: 5px buttons, 6px controls, 8px panels
 */

/* ---------------------------------------------------------------------------
 * Fields — stacked: label above, control full width, help text below.
 * ------------------------------------------------------------------------- */

.hydrata-support-page .hydrata-support-form .form-group {
    /* Belt and braces against the homepage flex rule. Scoping it at source is
     * the real repair; this page must not depend on that file staying correct. */
    display: block;
    margin-bottom: 24px;
}

.hydrata-support-page .hydrata-support-form label {
    display: block;
    margin-bottom: 8px;
    font-family: Montserrat, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #1e3a5f;
}

.hydrata-support-page .hydrata-support-form .form-control {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: auto;          /* .msgapi .form-control pins this to 2rem = 32px */
    min-height: 46px;      /* one height for select and input alike — see below */
    padding: 10px 12px;
    font-size: 15px;
    line-height: 1.6;
    color: #1f2937;
    background-color: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    box-shadow: none;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* A <select> ignores vertical padding when computing its intrinsic height, so
 * without a floor it sits shorter than the email input beside it. The floor is
 * `min-height` on .form-control above rather than a hard `height` here: a hard
 * height clips a wrapped option label, and the first guess (44px) left the
 * select 1px short of the input's computed 45px — a ragged edge once both are
 * full width.
 * NOTE: `.msgapi select.form-control` forces border-style/border-width with
 * !important; only the colour above survives, which is what we want anyway. */
.hydrata-support-page .hydrata-support-form select.form-control {
    -webkit-appearance: menulist;
    appearance: menulist;
}

.hydrata-support-page .hydrata-support-form textarea.form-control {
    min-height: 200px;
    resize: vertical;
}

.hydrata-support-page .hydrata-support-form .form-control:focus {
    border-color: #325f93;
    box-shadow: 0 0 0 3px rgba(50, 95, 147, 0.35);
    /* Deliberately NOT `outline: 0`. Under forced-colors / high-contrast a
     * transparent outline is repainted in the system highlight colour, while
     * box-shadow is dropped entirely — `outline: 0` would leave those users no
     * focus indicator at all. In normal rendering the indicator is the border
     * swap (#cbd5e1 -> #325f93, 6.58:1); the halo at 0.15 alpha composited to
     * 1.25:1 against white and contributed nothing, hence 0.35. */
    outline: 2px solid transparent;
    outline-offset: 2px;
}

/* A signed-in reporter's address is `disabled`, not merely prefilled, so it
 * must READ as locked rather than as a field they forgot to fill in.
 *
 * The text is the family's BODY token (#4a5568), not its caption token
 * (#64748b): a signed-in reporter has to be able to read the address we are
 * about to reply to, and #64748b on this fill measures 4.34:1 — under the
 * 4.5:1 AA threshold. WCAG exempts disabled controls from contrast, so this is
 * a legibility choice rather than a compliance one; #4a5568 gives 6.87:1. */
.hydrata-support-page .hydrata-support-form .form-control[disabled] {
    background-color: #f1f5f9;
    color: #4a5568;
    cursor: not-allowed;
}

.hydrata-support-page .hydrata-support-form .help-block {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: #64748b;
}

/* Django puts aria-invalid="true" on a control that failed validation — use it
 * rather than inventing a class. (0,4,0), so it beats this file's own (0,3,0)
 * border shorthand above. Without it a failed field looks identical to a good
 * one and the only signal is a line of red text. */
.hydrata-support-page .hydrata-support-form .form-control[aria-invalid="true"] {
    border-color: #b91c1c;
}

.hydrata-support-page .hydrata-support-form .form-control[aria-invalid="true"]:focus {
    border-color: #b91c1c;
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.25);
}

/* Django emits field errors as <ul class="errorlist">, and `.errorlist` is
 * defined in NO stylesheet in the fleet — without this it renders as a
 * browser-default indented bullet list. */
.hydrata-support-page .hydrata-support-form .errorlist {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    line-height: 1.6;
    color: #b91c1c;
}

/* ---------------------------------------------------------------------------
 * Buttons. Two separate defeats, both measured:
 *   - `.msgapi .btn` (0,2,0) outranks `.hydrata-btn-primary` (0,1,0), so both
 *     buttons lose their 10px/20px padding and 5px radius, and the secondary
 *     loses its 2px blue border to `1px solid transparent` — which is why it
 *     read as a link rather than a button.
 *   - `.msgapi button,.msgapi input,...{color:inherit;font:inherit}` (0,1,1)
 *     outranks `.hydrata-btn-primary{color:white}` (0,1,0), so the submit
 *     button rendered #333 on #325f93 = 1.92:1. That is a WCAG AA failure, and
 *     it is the one defect here that is a bug rather than a mismatch.
 * Restored at (0,3,0), for this page only.
 * ------------------------------------------------------------------------- */

.hydrata-support-page .btn.hydrata-btn-primary,
.hydrata-support-page .btn.hydrata-btn-secondary {
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    border-radius: 5px;
    white-space: normal;
}

.hydrata-support-page .btn.hydrata-btn-primary {
    padding: 10px 20px;
    color: #fff;
    background-color: #325f93;
    border: 1px solid #325f93;
}

.hydrata-support-page .btn.hydrata-btn-primary:hover,
.hydrata-support-page .btn.hydrata-btn-primary:focus {
    color: #fff;
    background-color: #1e3a5f;
    border-color: #1e3a5f;
    text-decoration: none;
}

.hydrata-support-page .btn.hydrata-btn-secondary {
    padding: 9px 20px;   /* The family pairs the primary's 10px padding + no border
                          * against the secondary's 8px + 2px border. support.css
                          * gives the primary a 1px border, so 8px here would leave
                          * the secondary 2px shorter; 9px brings them within a
                          * pixel. They never sit side by side on this page — the
                          * secondary is in the docs callout, the primary is the
                          * form submit — so a 1px residual from the <a>/<button>
                          * line box is not worth more CSS. */
    color: #325f93;
    background-color: #fff;
    border: 2px solid #325f93;
}

.hydrata-support-page .btn.hydrata-btn-secondary:hover,
.hydrata-support-page .btn.hydrata-btn-secondary:focus {
    color: #fff;
    background-color: #325f93;
    text-decoration: none;
}

/* ---------------------------------------------------------------------------
 * Section dividers. `.msgapi hr{border-top:1px solid #ddd;margin:1rem 0}`
 * (0,1,1) outranks `.featurette-divider{margin:40px 0;border-color:#e2e8f0}`
 * (0,1,0), so the family's divider renders as a 16px-margin #ddd hairline —
 * on /about and every other family page too, not just here.
 * ------------------------------------------------------------------------- */

.hydrata-support-page hr.featurette-divider {
    margin: 40px 0;
    border: 0;
    border-top: 1px solid #e2e8f0;
}

/* ---------------------------------------------------------------------------
 * Notices. `.msgapi .alert` resolves but sets no font-size, so it inherits
 * body's 14px and Bootstrap's tight 8px padding / 2px radius.
 * ------------------------------------------------------------------------- */

.hydrata-support-page .alert {
    padding: 14px 18px;
    font-size: 15px;
    line-height: 1.7;
    border-radius: 6px;
}

/* `{{ form.non_field_errors }}` renders an .errorlist INSIDE .alert-danger, where
 * the field-error sizing above is wrong — it would make the danger notice a point
 * smaller than the throttled warning. Placed last so the (0,3,0) tie with the
 * .errorlist rule resolves in favour of this one. */
.hydrata-support-page .hydrata-support-form .alert .errorlist {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: inherit;
}