/* ============================================================
   login.css
   ────────────────────────────────────────────────────────────
   Self-contained stylesheet for the /login page. Replaces the
   old css/landing/{style_reset, style_abstracts, style}.css trio.

   Three parts, in order:
     1. RESET      — minimal, modern box-sizing + zeroing
     2. TOKENS     — the Tell palette / type / radii (mirrors base.css
                     so the login page matches the rest of the platform
                     without depending on it)
     3. PAGE       — login card, form, alerts, footer

   The page loads its own Rubik + FontAwesome; no base.css / layout.css.
   ============================================================ */


/* ============================================================
   1 · RESET
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
    min-height: 100vh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img, svg, picture { display: block; max-width: 100%; }

input, button, textarea, select { font: inherit; color: inherit; }

button { cursor: pointer; background: none; border: none; }

fieldset { border: 0; }

ul[role="list"] { list-style: none; }

a { color: inherit; text-decoration: none; }


/* ============================================================
   2 · TOKENS  (Tell palette — kept in sync with base.css)
   ============================================================ */

:root {
    /* Brand */
    --tell-navy:        #1D3A5C;
    --tell-navy-deep:   #16304D;
    --tell-navy-soft:   #27496E;
    --tell-navy-tint:   #E8EEF5;
    --tell-coral:       #E0613A;
    --tell-coral-deep:  #C14B28;
    --tell-coral-tint:  #F7E0D8;

    /* Neutrals */
    --clr-bg:           #F4F6F9;
    --clr-surface:      #FFFFFF;
    --clr-ink:          #16304D;
    --clr-ink-soft:     #4E5A6B;
    --clr-ink-faint:    #8794A2;
    --clr-line:         rgba(29, 58, 92, 0.12);
    --clr-line-strong:  rgba(29, 58, 92, 0.22);

    /* Status */
    --clr-ok:           #5C9636;
    --clr-ok-tint:      #E9F3DD;
    --clr-danger:       #C0392B;
    --clr-danger-deep:  #93281C;
    --clr-danger-tint:  #F7DDD9;

    /* Footer (dark navy surface) */
    --foot-bg:          #16304D;
    --foot-ink:         rgba(255, 255, 255, 0.86);
    --foot-ink-soft:    rgba(255, 255, 255, 0.60);
    --foot-line:        rgba(255, 255, 255, 0.12);
    --foot-chip:        rgba(255, 255, 255, 0.10);

    /* Shape */
    --radius:           16px;
    --radius-sm:        10px;
    --radius-pill:      999px;

    /* Type */
    --font-main: "Rubik", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Headings (legacy fs-* names, retuned) */
    --fs-title:          clamp(30px, 4vw, 40px);
    --fs-third-heading:  20px;
    --fs-fourth-heading: 15px;

    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 18px 42px rgba(20, 30, 50, 0.10);
}

body {
    font-family: var(--font-main);
    color: var(--clr-ink);
    background: var(--clr-bg);
    /* Sticky footer: main grows, footer pinned to the bottom. */
    display: flex;
    flex-direction: column;
}


/* ============================================================
   3 · PAGE
   ============================================================ */

/* ── Flash messages ─────────────────────────────────────────── */

.alert {
    width: 100%;
    max-width: 420px;
    margin: 20px auto 0;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-size: 14px;
}

.alert p { margin: 0; }

.alert.error {
    background: var(--clr-danger-tint);
    color: var(--clr-danger-deep);
    border: 1px solid rgba(192, 57, 43, 0.30);
}

.alert.success {
    background: var(--clr-ok-tint);
    color: #3B6D11;
    border: 1px solid rgba(92, 150, 54, 0.30);
}


/* ── Main / centring ────────────────────────────────────────── */

.section60 {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 20px;
}

.login_form { width: 100%; max-width: 420px; }


/* ── Login card ─────────────────────────────────────────────── */

.topForm {
    background: var(--clr-surface);
    border: 1px solid var(--clr-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 36px 32px 32px;
}


/* ── Brand lockup at the top of the card ────────────────────── */

.login-brand {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 11px;
    line-height: 1;
    margin-bottom: 28px;
}

.login-brand__bars { display: block; flex-shrink: 0; }

.login-brand__word {
    font-weight: 700;
    font-size: 38px;
    letter-spacing: -0.02em;
    line-height: 0.82;
    color: var(--tell-navy);
}

.login-brand__e { color: var(--tell-coral); }


/* ── Form fields ────────────────────────────────────────────── */

#login-form { display: block; }

.inputBox { margin-bottom: 16px; }

.inputBox input[type="text"],
.inputBox input[type="password"] {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--clr-line-strong);
    border-radius: var(--radius-sm);
    background: var(--clr-surface);
    color: var(--clr-ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.inputBox input[type="text"]::placeholder,
.inputBox input[type="password"]::placeholder {
    color: var(--clr-ink-faint);
}

.inputBox input[type="text"]:focus,
.inputBox input[type="password"]:focus {
    outline: none;
    border-color: var(--tell-navy);
    box-shadow: 0 0 0 3px var(--tell-navy-tint);
}


/* ── Role selector ──────────────────────────────────────────── */

#login-form fieldset {
    margin: 4px 0 18px;
    padding: 14px 16px 10px;
    border: 1px solid var(--clr-line);
    border-radius: var(--radius-sm);
    background: rgba(29, 58, 92, 0.03);
}

#login-form legend {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--clr-ink-faint);
    padding: 0 6px;
}

#login-form fieldset > div {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 7px 0;
}

#login-form fieldset label {
    cursor: pointer;
    font-size: 14px;
    color: var(--clr-ink-soft);
}

input[type="radio"],
input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--tell-navy);
    cursor: pointer;
    flex-shrink: 0;
}


/* ── Token-login toggle row ─────────────────────────────────── */

.inputBox label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--clr-ink-soft);
}


/* ── Submit ─────────────────────────────────────────────────── */

input[type="submit"],
.login-submit {
    width: 100%;
    padding: 12px 18px;
    margin-top: 4px;
    background: var(--tell-navy);
    color: #fff;
    border: 1px solid var(--tell-navy);
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    /* inline-flex so the label + spinner sit centred side by side */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

input[type="submit"]:hover,
.login-submit:hover {
    background: var(--tell-navy-deep);
    border-color: var(--tell-navy-deep);
}

/* Submitting: dim + lock. No [disabled], so the native submit is never
   suppressed; the in-flight flag in login.html guards the double-submit. */
.login-submit.is-loading {
    opacity: 0.75;
    pointer-events: none;
}


/* ── Recover-password line ──────────────────────────────────── */

#login-form > p,
.topForm form > p {
    margin-top: 18px;
    font-size: 13px;
    color: var(--clr-ink-faint);
    text-align: center;
}

.topForm a {
    color: var(--tell-navy);
    font-weight: 500;
}

.topForm a:hover { color: var(--tell-coral); }


/* ============================================================
   FOOTER  (dark navy surface)
   ============================================================ */

footer {
    flex-shrink: 0;
    background: var(--foot-bg);
    color: var(--foot-ink);
}

.padding-block-700 { padding-block: 56px; }

.container {
    max-width: 1100px;
    margin-inline: auto;
    padding-inline: 32px;
}

.even-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    align-items: start;
}

/* Flow utility — vertical rhythm between siblings (skips the first). */
.flow_skip_first_child > * + * {
    margin-top: var(--flow-spacer, 1em);
}

/* Footer brand (the "Tell" wordmark + typewriter). */
.fs-title {
    font-size: var(--fs-title);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
    line-height: 1.1;
}

.fs-third-heading  { font-size: var(--fs-third-heading); }
.fs-fourth-heading { font-size: var(--fs-fourth-heading); }
.fw-bold           { font-weight: 700; }

#typewriter { color: rgba(255, 255, 255, 0.80); font-weight: 500; }

#caret {
    color: var(--tell-coral);
    font-weight: 400;
    animation: tell-blink 1s steps(1) infinite;
}

@keyframes tell-blink { 50% { opacity: 0; } }

/* Social links — empty <a> get their glyph from FontAwesome via CSS. */
ul[aria-label="Social links"] {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

ul[aria-label="Social links"] a {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-pill);
    background: var(--foot-chip);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}

ul[aria-label="Social links"] a:hover {
    background: var(--tell-coral);
    color: #fff;
}

ul[aria-label="Social links"] a::before {
    font-family: "FontAwesome";
    font-size: 16px;
    line-height: 1;
}

a[aria-label="facebook"]::before  { content: "\f09a"; }
a[aria-label="youtube"]::before   { content: "\f167"; }
a[aria-label="twitter"]::before   { content: "\f099"; }
a[aria-label="instragram"]::before,
a[aria-label="instagram"]::before { content: "\f16d"; }

/* Copyright line. */
.flow_skip_first_child > p {
    font-size: 13px;
    color: var(--foot-ink-soft);
    margin-top: 18px;
}

/* Footer nav. */
.footer-nav ul { list-style: none; }

.footer-nav a {
    color: var(--foot-ink);
    font-size: 14px;
    transition: color 0.15s ease;
}

.footer-nav a:hover { color: var(--tell-coral); }

/* Contact / booking block. */
.booking { color: var(--foot-ink); line-height: 1.7; }

.booking .fa { color: var(--tell-coral); }

footer a { color: var(--foot-ink); }
footer a:hover { color: var(--tell-coral); }
/* ── Brand lockup at the top of the card ────────────────────── */
.login-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 28px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 760px) {
    .even-columns { grid-template-columns: 1fr; gap: 32px; }
    .container { padding-inline: 24px; }
    .topForm { padding: 28px 22px 24px; }
}