@charset "utf-8";

/* ---------------------------------------------------------------------------
   Infolink platform sign-in.

   Ported from templates/login.html. Colours, typography, spacing and states
   follow the handoff in templates/README.md, with three deliberate deviations,
   each marked "DEVIATION" below and driven by a row of the Israeli
   accessibility check-list (sitedocs_internet_accessibility_form.xlsx).
   --------------------------------------------------------------------------- */

:root {
    --ink: #1F1B19;          /* 15.7:1 on --page */
    --maroon: #6E2B26;       /*  9.5:1 on --page */
    --maroon-hover: #5A211D;
    --brass: #B08A3E;        /* decorative only - see --brass-text */
    --panel: #231A18;
    --page: #F7F5F1;
    --muted: #6B615A;        /*  5.5:1 on --page */
    --border: #D6CEC4;
    --rule: #E3DBD1;
    --error-bg: #F4E9E6;

    /* DEVIATION (row 19, SC 1.4.3 - contrast).
       Three palette values do not reach the 4.5:1 the regulation requires for
       body-size text on --page, so each is darkened to the nearest tone that
       does. Original -> used here:
         label   #8A7F76 (3.59:1) -> #6F655C (5.2:1)
         faint   #A0958C (2.69:1) -> #776C63 (4.7:1)
         brass   #B08A3E (2.94:1) -> #8A6A2E (4.6:1), for link hover text only
       The lightness ordering of the grey ramp is preserved, so the visual
       hierarchy the design intends is intact. The brass accent itself is
       unchanged wherever it is decoration rather than text. */
    --label: #6F655C;
    --faint: #776C63;
    --brass-text: #8A6A2E;

    --placeholder: #767169;  /*  4.8:1 on white */
}

* {
    box-sizing: border-box;
}

html {
    /* No px font-size on html: the user's browser text-size setting must win. */
    font-size: 100%;
}

body {
    margin: 0;
    background: var(--page);
    color: var(--ink);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--maroon);
}

a:hover,
a:focus {
    color: var(--brass-text);
    /* DEVIATION (row 17, SC 1.4.1 - colour is not the only means).
       The design specifies no underline on links. Colour alone may identify a
       link only when it contrasts 3:1 with the surrounding text AND the styling
       changes on hover and focus, so the underline is added for those two
       states only. At rest the design is unchanged. */
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Skip link (row 27, SC 2.4.1 - bypass blocks)
   First focusable element on every page. Moved off-screen rather than
   display:none, which would take it out of the tab order altogether.
   --------------------------------------------------------------------------- */
.skip-link {
    position: absolute;
    top: -100vh;
    inset-inline-start: 0;
    z-index: 100;
    padding: 10px 16px;
    background: var(--page);
    color: var(--maroon);
    font-size: 15px;
    font-weight: 700;
    text-decoration: underline;
}

.skip-link:focus {
    top: 0;
}

/* Text available to screen readers but not shown. Never display:none, which
   would remove it from the accessibility tree as well. */
.visually-hidden {
    position: absolute;
    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
   --------------------------------------------------------------------------- */
.login {
    min-height: 100vh;
    display: flex;
}

/* Left: photographic panel */
.brandPanel {
    width: 46%;
    min-width: 340px;
    flex-shrink: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 52px 48px;
    background: var(--panel) url('images/lighthouse.jpg') 32% center / cover no-repeat;
}

.brandPanel > * {
    position: relative;
}

.brandPanel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(35, 26, 24, .72) 0%,
        rgba(35, 26, 24, .34) 38%,
        rgba(35, 26, 24, .86) 100%);
}

.wordmark {
    position: relative;
    display: inline-block;
    align-self: flex-start;
    padding: 6px 12px;
}

.wordmark-text {
    font-family: 'Jost', "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 600;
    font-size: 32px;
    letter-spacing: -.01em;
    color: var(--page);
}

/* Brass arc around the wordmark. Decorative: aria-hidden in the markup. */
.wordmark-arc {
    position: absolute;
    inset: -3px -4px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--brass);
    border-right-color: var(--brass);
    transform: rotate(-9deg);
}

.brandCopy {
    margin: 0;
    max-width: 380px;
    font-family: 'Jost', "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 19px;
    line-height: 1.5;
    color: #EDE6DC;
}

/* Right: form column */
.formCol {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 40px;
}

/* Focused programmatically by the skip link; should not draw a ring of its own. */
.formCol:focus {
    outline: none;
}

.form {
    width: min(392px, 100%);
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.step {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

/* [hidden] alone loses to display:flex above, so it is restated. */
.step[hidden] {
    display: none;
}

/* ---------------------------------------------------------------------------
   Type
   --------------------------------------------------------------------------- */
h1 {
    margin: 0;
    font-family: 'Jost', "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 30px;
    font-weight: 500;
    letter-spacing: -.01em;
}

.head {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sub {
    margin: 0;
    font-size: 15px;
    color: var(--muted);
    line-height: 1.5;
}

.note {
    margin: 0;
    padding-top: 2px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--muted);
}

/* ---------------------------------------------------------------------------
   Fields
   --------------------------------------------------------------------------- */
.fields {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Was label.field in the design. The label is now a sibling of the input rather
   than its wrapper, so that the error message can sit between them without
   becoming part of the field's accessible name. The layout is unchanged. */
.field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

/* Error text beside its field. It is text, not a colour cue, so it carries its
   own meaning for anyone who cannot see the maroon (row 17). */
.field-error {
    font-size: 14px;
    line-height: 1.4;
    color: var(--maroon);
    font-weight: 600;
}

.field-label {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--label);
}

input[type=text],
input[type=password] {
    /* DEVIATION (row 20, SC 1.4.4 - resize text).
       The design specifies height:46px. A fixed height clips its own text once
       the user enlarges text to 200%, so min-height is used instead: identical
       at default size, and the control grows rather than truncating. The same
       applies to the button and the code field below. */
    min-height: 46px;
    padding: 11px 14px;
    border: 1px solid var(--border);
    background: #fff;
    font: inherit;
    font-size: 15px;
    color: var(--ink);
    outline: none;
    border-radius: 0;
}

input::placeholder {
    color: var(--placeholder);
    opacity: 1; /* Firefox dims placeholders by default, which costs contrast. */
}

input:focus {
    border-color: var(--maroon);
    box-shadow: 0 0 0 3px rgba(110, 43, 38, .10);
}

/* Reinforces the invalid state visually. This is on top of the message beside the
   field, never instead of it - colour alone must not be what tells someone a field
   is wrong (row 17). box-sizing keeps the thicker border from shifting the layout. */
input[aria-invalid="true"] {
    border-color: var(--maroon);
    border-width: 2px;
}

.code-input {
    min-height: 58px;
    padding: 14px 18px;
    font-family: 'Jost', "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 26px;
    letter-spacing: .42em;
}

/* ---------------------------------------------------------------------------
   Buttons and links
   --------------------------------------------------------------------------- */
button.primary {
    min-height: 48px;
    padding: 12px 16px;
    border: none;
    background: var(--maroon);
    color: var(--page);
    font-family: 'Jost', "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    letter-spacing: .02em;
    cursor: pointer;
}

button.primary:hover {
    background: var(--maroon-hover);
}

button.primary[disabled] {
    cursor: default;
    opacity: .85;
}

.links {
    display: flex;
    gap: 20px;
    font-size: 14px;
}

.links a {
    text-decoration: none;
}

.links a:hover,
.links a:focus {
    text-decoration: underline;
}

/* DEVIATION (row 17, SC 1.4.1). The design specifies --muted here, which is
   only 2.8:1 against the body text around it. The regulation allows colour as
   the sole distinction for a link at 3:1 or better against surrounding text,
   plus a styling change on hover and focus. --faint clears both bars (3.3:1
   against body text, 4.7:1 against the page) and keeps the link visibly
   quieter than its maroon neighbour, which is what the design is after. */
.links a.quiet {
    color: var(--faint);
}

/* ---------------------------------------------------------------------------
   Focus visibility (row 33, SC 2.4.7)

   The design removes the browser outline from inputs and replaces it with a
   border-colour change plus a 10%-opacity ring. That reads clearly enough with
   a mouse, but a keyboard user navigating the page needs an unmistakable
   indicator, so :focus-visible adds a solid ring on top. Pointer users never
   see it, so the design at rest is unaffected.
   These rules come last so they win on equal specificity.
   --------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.skip-link:focus-visible {
    outline: 3px solid var(--maroon);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Messages
   --------------------------------------------------------------------------- */
.error {
    margin: 0;
    border-left: 3px solid var(--maroon);
    background: var(--error-bg);
    padding: 12px 14px;
    font-size: 14px;
    color: var(--maroon);
    line-height: 1.45;
}

.error[hidden] {
    display: none;
}

/* Error summary: shown at the top when more than one field is at fault, with a
   link down to each one. */
.error-summary-title {
    margin: 0 0 8px;
    font-family: 'Jost', "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: var(--maroon);
}

.error-summary-message {
    margin: 0;
}

.error-summary-list {
    margin: 0;
    padding-inline-start: 1.2rem;
}

.error-summary-list li {
    margin-bottom: 4px;
}

.error-summary-list li:last-child {
    margin-bottom: 0;
}

.error-summary-list a {
    color: var(--maroon);
    font-weight: 600;
}

/* The banner is focused programmatically after a failed sign-in so that the
   message is announced (see Default.aspx.cs). It is not in the tab order, but
   it does take focus, so the ring is styled here rather than left as the
   browser's default black rectangle. Both states are covered because whether a
   programmatic focus matches :focus-visible depends on how the user got here. */
.error:focus,
.error:focus-visible {
    outline: 3px solid var(--maroon);
    outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   Contact strip
   --------------------------------------------------------------------------- */
.contact {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    font-size: 12px;
    color: var(--faint);
    border-top: 1px solid var(--rule);
    padding-top: 16px;
}

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */
@media (max-width: 860px) {
    .login {
        flex-direction: column;
    }

    .brandPanel {
        width: 100%;
        min-height: 280px;
        padding: 32px;
    }

    .formCol {
        padding: 40px 24px;
    }
}

/* Respect the OS "reduce motion" setting. Nothing here animates today, but the
   guard keeps that true as the page grows (row 25). */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}