/* ==========================================================================
   Dream City Church — MinistryPlatform sign-in theme  (v2, brand-aligned)
   Drop-in replacement for the custom login stylesheet.

   Brand references (Dream City Church Identity Guidelines)
   - Palette p.10: Deep Magenta #bc204b, Orange #e07e3c, Sunset Gradient
     (#e07e3c → #bc204b), Black, White; secondary Charcoal #3F4444,
     Cloud #bcbcbc, Fire #e1523d.
   - Fonts p.11: Termina for headings; Neue Haas Grotesk Display Pro for
     body. Neither is served by the MP login page. If DCC has an Adobe
     Fonts kit, add its @import below and the stacks pick it up; until
     then the page falls back to Lato (which MP loads) — no broken look.
   - Logo p.3/5: only the approved white reversed brandmark on dark or
     gradient backgrounds; no recolouring, shadows, opacity, or
     typesetting the wordmark. Upload the white horizontal brandmark as
     the MP login logo; this theme never alters it.

   Variables are declared on `*` (not :root) on purpose: MP's base
   stylesheet declares its variables on `*`, so :root would lose.
   ========================================================================== */

/* @import url("https://use.typekit.net/XXXXXXX.css");  <- DCC Adobe Fonts kit (Termina + Neue Haas Grotesk) */

* {
    /* Brand palette */
    --magenta:      #bc204b;
    --orange:       #e07e3c;
    --fire:         #e1523d;
    --charcoal:     #3f4444;
    --cloud:        #bcbcbc;
    --sunset:       linear-gradient(90deg, var(--orange) 0%, var(--magenta) 100%);

    /* Neutrals derived from Black / Charcoal / Cloud / White */
    --paper:        #f6f6f6;
    --surface:      #ffffff;
    --ink:          #141616;
    --ink-muted:    #5c6262;
    --line:         #e2e2e2;
    --line-strong:  var(--cloud);
    --magenta-soft: rgba(188, 32, 75, .16);
    --error-text:   #b23520;   /* Fire, darkened for AA text contrast */
    --error-tint:   rgba(225, 82, 61, .10);

    --font-heading: 'termina', 'Termina', 'Lato', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-body:    'neue-haas-grotesk-display', 'Neue Haas Grotesk Display Pro', 'Lato', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* MinistryPlatform theme variables (base stylesheet reads these) */
    --background-color: var(--paper);
    --background-image: none;
    --text-color: var(--ink);
    --text-color-light: var(--ink-muted);
    --border-color: var(--line);
    --font-family: var(--font-body);
    --link-color: var(--magenta);
    --primary-background-color: var(--magenta);
    --primary-color: #ffffff;
    --primary-border-color: var(--magenta);
    --secondary-background-color: transparent;
    --secondary-color: var(--ink);
    --secondary-border-color: var(--line-strong);
    --error-color: var(--error-text);
    --header-background-color: var(--magenta);
    --header-height: auto;
    --logo-background-color: transparent;
    --logo-display: block;
    --logo-width: 240px;
    --language-selector-background-color: transparent;
    --content-background-color: transparent;
    --title-font-size: 1.5rem;
    --title-longer-font-size: 1.25rem;
    --title-font-weight: 800;
    --description-font-size: 1rem;
    --description-font-weight: 400;
    --description-line-height: 1.5;
    --label-font-size: 0.875rem;
    --label-font-weight: 700;
    --label-spacer: 0.375rem;
    --input-background-color: var(--surface);
    --input-border-color: var(--line-strong);
    --input-color: var(--ink);
    --input--color: var(--input-color);
    --checkbox-font-size: 0.9375rem;
    --checkbox-font-weight: 400;
    --footer-background-color: transparent;
    --footer-height: auto;
    --footer-content-background-color: transparent;
    --main-container-width-lg: 440px;
    --main-container-width-sm: 100%;

    /* Theme-only tokens */
    --radius: 8px;
    --radius-lg: 16px;
    --control-h: 3.25rem;              /* 52px touch target */
    --focus-ring: 0 0 0 4px var(--magenta-soft);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, .05), 0 20px 40px -24px rgba(0, 0, 0, .25);
    --ease: 160ms cubic-bezier(.2, .7, .2, 1);

}

/* --------------------------------------------------------------------------
   Page frame
   -------------------------------------------------------------------------- */
html { color-scheme: light; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.app {
    min-height: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

/* Sunset band (header) ---------------------------------------------------- */
header {
    position: relative;
    background: var(--sunset);
    color: #fff;
    padding: 1.75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* The approved white reversed brandmark. No filters, no opacity, no shadow. */
header .logo {
    width: var(--logo-width);
    max-width: 62vw;
    height: 60px;
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;
}

header .logo, footer .tm-logo {
    filter: brightness(0) grayscale(1) invert(1);
}

.language-selector-container { flex: none; }

.language-selector {
    appearance: none;
    -webkit-appearance: none;
    height: 2.25rem;
    padding: 0 2rem 0 .75rem;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 999px;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='white' stroke-width='1.75' stroke-linecap='round'/></svg>") no-repeat right .75rem center,
        rgba(255, 255, 255, .12);
    color: #fff;
    font: inherit;
    font-size: .875rem;
    cursor: pointer;
}
.language-selector:hover { background-color: rgba(255, 255, 255, .22); }
.language-selector:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.language-selector option { color: var(--ink); }

header .language-selector-container {
    position: fixed;
    top: 1%;
}

/* Content / card ---------------------------------------------------------- */
.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 1rem 2rem;      /* clear gap below the band; no overlap */
}

.login {
    width: 100%;
    max-width: var(--main-container-width-lg);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 1.75rem 1.5rem 1.5rem;
    box-sizing: border-box;
}

/* Termina-style heading: uppercase, tracked, heavy (brand p.11) */
.login h1 {
    margin: 0 0 .5rem;
    font-family: var(--font-heading);
    font-size: var(--title-font-size);
    font-weight: var(--title-font-weight);
    text-transform: uppercase;
    letter-spacing: .08em;
    line-height: 1.1;
    color: var(--ink);
}
.login h1::after {                 /* short sunset rule under the heading */
    content: "";
    display: block;
    width: 3rem;
    height: 4px;
    margin-top: .75rem;
    border-radius: 2px;
    background: var(--sunset);
}

.login h2 {
    margin: 0 0 1.75rem;
    font-size: var(--description-font-size);
    font-weight: var(--description-font-weight);
    line-height: var(--description-line-height);
    color: var(--ink-muted);
    max-width: 36ch;
}

/* Status message: only occupies space when there is a message */
.message { display: none; }
.message:not(:empty) {
    display: block;
    width: 100%;
    max-width: var(--main-container-width-lg);
    box-sizing: border-box;
    margin: 0 0 1rem;
    padding: .875rem 1rem;
    border-radius: var(--radius);
    border: 1px solid var(--fire);
    border-left-width: 4px;
    background: var(--error-tint);
    color: var(--error-color);
    font-size: .9375rem;
    line-height: 1.45;
}

/* Fields ----------------------------------------------------------------- */
.login-form { display: flex; flex-direction: column; }

.input-with-label { display: block; margin-bottom: 1.125rem; }

.input-with-label > div {
    font-size: var(--label-font-size);
    font-weight: var(--label-font-weight);
    color: var(--ink);
    margin-bottom: var(--label-spacer);
    display: flex;
    align-items: center;
    gap: .5rem;
    transition: color var(--ease);
}
.input-with-label:has(input:focus-visible) > div { color: var(--magenta); }

.login input[type="text"],
.login input[type="password"],
.login input[type="email"],
.login input[type="phone"],
.login input[type="tel"] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    height: var(--control-h);
    padding: 0 1rem;
    margin: 0;
    font: inherit;
    font-size: 1rem;                 /* ≥16px prevents iOS zoom-on-focus */
    letter-spacing: 0;
    color: var(--input-color);
    background: var(--input-background-color);
    border: 1px solid var(--input-border-color);
    border-radius: var(--radius);
    transition: border-color var(--ease), box-shadow var(--ease);
}
.login input[type="password"] { letter-spacing: .12em; }
.login input.inactive { opacity: .55; }

.login input:hover { border-color: var(--charcoal); }
.login input:focus-visible {
    outline: none;
    border-color: var(--magenta);
    box-shadow: var(--focus-ring);
}
.login input:user-invalid { border-color: var(--fire); }

.login input:-webkit-autofill {
    -webkit-text-fill-color: var(--input-color);
    box-shadow: 0 0 0 1000px var(--input-background-color) inset;
}

.input-with-label > div input[type="radio"] {
    accent-color: var(--magenta);
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
}

.checkbox-with-label {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin: .25rem 0 1.5rem;
    font-size: var(--checkbox-font-size);
    font-weight: var(--checkbox-font-weight);
    color: var(--ink-muted);
    cursor: pointer;
    min-height: 2.75rem;
}
.checkbox-with-label input[type="checkbox"] {
    accent-color: var(--magenta);
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
}
.checkbox-with-label input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: 4px;
}

/* Buttons ---------------------------------------------------------------- */
.login button {
    width: 100%;
    height: var(--control-h);
    padding: 0 1.25rem;
    border-radius: var(--radius);
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color var(--ease), border-color var(--ease), color var(--ease), transform var(--ease);
}
.login button:active { transform: translateY(1px); }
.login button:focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; }

.login button.primary {
    background: var(--primary-background-color);
    color: var(--primary-color);
    border: 1px solid var(--primary-border-color);
}
.login button.primary:hover { background: #a11b40; border-color: #a11b40; }

.login button.secondary,
.login button#sendCodeFlowToggleButton,
.login button#loginFlowToggleButton {
    background: var(--secondary-background-color);
    color: var(--secondary-color);
    border: 1px solid var(--secondary-border-color);
}
.login button.secondary:hover { border-color: var(--magenta); color: var(--magenta); }

/* "or" divider */
.standalone-label {
    display: flex;
    align-items: center;
    gap: .875rem;
    margin: 1rem 0;
    color: var(--ink-muted);
    font-size: .8125rem;
}
.standalone-label::before,
.standalone-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* External providers ------------------------------------------------------ */
.external-providers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .625rem;
}
.external-providers:empty { display: none; }
.external-providers > * {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 2.75rem;
    padding: 0 .875rem;
    border-radius: var(--radius);
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--ink);
    font-size: .9375rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: border-color var(--ease), color var(--ease);
}
.external-providers > *:hover { border-color: var(--magenta); color: var(--magenta); }
.external-providers > *:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; }

.external-providers .external-provider.half-width {
    width: 100%;
}

.external-providers .external-provider button {
    border: 0;
}

/* Account actions --------------------------------------------------------- */
.account-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
    font-size: .9375rem;
}
.account-action-spacer { display: none; }
.account-actions a {
    color: var(--link-color);
    font-weight: 700;
    text-decoration: none;
    padding: .5rem 0;
    display: inline-block;
    border-bottom: 1px solid transparent;
    transition: border-color var(--ease);
}
.account-actions a:hover { border-bottom-color: currentColor; }
.account-actions a:focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; border-radius: 2px; }

/* Footer ------------------------------------------------------------------ */
footer { padding: 1.25rem 1.5rem 1.75rem; color: var(--ink-muted); font-size: .75rem; }
.footer-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem 1.5rem;
}
.footer-content a { display: inline-flex; align-items: center; gap: .5rem; color: inherit; text-decoration: none; opacity: .75; }
.footer-content a:hover { opacity: 1; }
.tm-logo { height: 18px; width: 110px; background-size: contain; background-repeat: no-repeat; opacity: .8; }

#blockUi {
    position: fixed; inset: 0;
    background: rgba(20, 22, 22, .35);
    backdrop-filter: blur(2px);
    z-index: 100;
}

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
    header { padding: 2.25rem 2.5rem; }
    header .logo { height: 72px; }
    .content { padding: 2.5rem 1.5rem 3rem; }
    .login { padding: 2.25rem 2.5rem 2rem; }
}

/* --------------------------------------------------------------------------
   Desktop: full-height sunset panel on the left, form on the right
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
    .app {
        grid-template-columns: minmax(360px, 42%) minmax(0, 1fr);
        grid-template-rows: 1fr auto;
    }
    header {
        grid-column: 1;
        grid-row: 1 / 3;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        padding: 3rem;
        background: linear-gradient(180deg, var(--orange) 0%, var(--magenta) 100%);
    }
    header .logo { width: min(var(--logo-width), 100%); max-width: none; height: 84px; }
    .content {
        grid-column: 2;
        grid-row: 1;
        justify-content: center;
        padding: 3rem 2rem;
    }
    .login {
        border-color: transparent;
        box-shadow: none;
        background: transparent;
        padding: 0;
        max-width: 400px;
    }
    .login h1 { font-size: 1.75rem; }
    footer { grid-column: 2; grid-row: 2; }
}

/* --------------------------------------------------------------------------
   Motion + accessibility
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
}
@media (forced-colors: active) {
    .login button, .login input, .external-providers > * { border: 1px solid ButtonText; }
}

/* --------------------------------------------------------------------------
   Dark mode — Charcoal-family neutrals; sunset gradient unchanged
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    * {
        --paper:        #161818;
        --surface:      #1f2222;
        --ink:          #f2f2f2;
        --ink-muted:    var(--cloud);
        --line:         #343838;
        --line-strong:  #4c5252;
        --link-color:   #e8567c;   /* magenta lifted for contrast on dark */
        --magenta-soft: rgba(232, 86, 124, .25);
        --error-text:   #ff8c78;
        --error-tint:   rgba(225, 82, 61, .16);
        --shadow-card:  0 1px 2px rgba(0, 0, 0, .5), 0 20px 40px -24px rgba(0, 0, 0, .8);
    }
    html { color-scheme: dark; }
    .login button.primary:hover { background: #d0275a; border-color: #d0275a; }
    .login button.secondary:hover,
    .external-providers > *:hover { color: var(--link-color); border-color: var(--link-color); }
    .input-with-label:has(input:focus-visible) > div { color: var(--link-color); }
    .login input:focus-visible { border-color: var(--link-color); }
    footer .tm-logo { filter: brightness(0) grayscale(1) invert(1); }
    .language-selector option { color: var(--ink); background: var(--surface); }
}