/* ==========================================================================
   Duty Scheduler — prijava, registracija, reset lozinke

   Izgled po dizajnu "Redizajn logiranja u Broadsheet stilu",
   inačica "zlato na bijelom":

     #9c7c38  križ, rub stranice, gumb "Prijavi se"
     #7d6229  linkovi i sitne verzalne oznake (tamnije, da ostanu čitljive)
     #d9c79d  rubovi polja, okvir stranice, crta razdjelnika
     #f7f2e7  blaga podloga na hoveru

   Jedna boja nosi cijeli zaslon. Nikakve plave. Tokeni su zatvoreni unutar
   .ds-auth da se ne prelijevaju na panele ni na ostatak župne stranice.
   ========================================================================== */

.ds-auth {
    --ds-gold:      #9c7c38;
    --ds-gold-ink:  #7d6229;
    --ds-gold-line: #d9c79d;
    --ds-gold-tint: #f7f2e7;

    --ds-paper:  #ffffff;
    --ds-ink:    #201e1d;
    --ds-radius: 2px;
    --ds-frame:  clamp(10px, 2.2vw, 26px);

    --ds-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

    position: relative;
    /* Sadržaj mora stati unutar zlatnog okvira, pa je razmak veći od uvlake.
       Bočni razmak je odmjeren tako da u uskom stupcu teme ostane dovoljno
       mjesta za dva stupca. */
    padding: clamp(24px, 4.5vw, 64px) clamp(20px, 4vw, 56px);
    background: var(--ds-paper);
    color: var(--ds-ink);
    font-size: 15px;
    line-height: 1.55;

    /* Raspored se ravna prema širini OVOG okvira, ne prema širini prozora.
       Plugin sjedi u stupcu teme koji zna biti uzak (na župnoj stranici je
       oko 700 px), pa bi medijski upit po prozoru dao dva stupca ondje gdje
       za njih nema mjesta. */
    container-type: inline-size;
    container-name: dsauth;
}

/* --------------------------------------------------------------------------
   Obrana od tema koje nameću vlastito pismo

   WordPress teme (npr. TagDiv Newspaper pravilom ".td-page-content h1")
   znaju biti specifičnije od naših klasa i pregaziti font na naslovima i
   odlomcima. Ovdje ga vraćamo, ali ISKLJUČIVO unutar .ds-auth — nijedan
   drugi dio stranice se ne dira.

   Ako Google Fonts ikad ne bude dostupan, pismo pada na Georgiju odnosno
   Times New Roman, koji postoje na svakom uređaju, pa stranica i dalje
   izgleda kako treba.
   -------------------------------------------------------------------------- */

.ds-auth,
.ds-auth * {
    font-family: var(--ds-serif) !important;
}

/* Tanka zlatna linija uvučena od ruba — drži sadržaj kao okvir slike. */
.ds-auth::before {
    content: "";
    position: absolute;
    inset: var(--ds-frame);
    border: 1px solid var(--ds-gold-line);
    border-radius: var(--ds-radius);
    pointer-events: none;
}

.ds-auth *,
.ds-auth *::before,
.ds-auth *::after { box-sizing: border-box; }

.ds-auth__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 1280px;
    margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Glava
   -------------------------------------------------------------------------- */

.ds-auth__masthead {
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* Naslov se ravna prema širini glave, da duga riječ ne izađe iz stupca. */
    container-type: inline-size;
}

.ds-auth .ds-auth__kicker {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1.7;
}

.ds-auth__kicker em {
    font-style: normal;
    opacity: 0.62;
}

.ds-auth__mark {
    flex: none;
    width: 20px;
    height: 26px;
    color: var(--ds-gold);
}

/* Dvostruka klasa diže specifičnost iznad pravila teme za h1 i odlomke. */
.ds-auth .ds-auth__title {
    font-weight: 600;
    /* Zamjena za starije preglednike bez container upita. */
    font-size: clamp(32px, 8vw, 44px);
    line-height: 0.98;
    letter-spacing: -0.018em;
    margin: 34px 0 0;
    padding: 0;
    color: var(--ds-ink);
    text-wrap: balance;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Jedan stupac (mobitel): naslov se drži u JEDNOM redu. 11cqi je odmjereno
   prema stvarnoj širini slova — "Prijava za dežurstva" pri 40 px zauzima
   343 px, a toliko stane i na telefonu od 430 px. */
@supports (container-type: inline-size) {
    .ds-auth .ds-auth__title {
        font-size: clamp(24px, 10cqi, 38px);
    }
}

/* --------------------------------------------------------------------------
   Uski okvir (mobitel) — zbijeniji razmaci, da se stranica ne razvuče
   -------------------------------------------------------------------------- */

@container dsauth (max-width: 539px) {
    .ds-auth__inner { gap: 20px; }

    .ds-auth .ds-auth__kicker { line-height: 1.55; }
    .ds-auth .ds-auth__title  { margin-top: 18px; }
    .ds-auth .ds-auth__lead   { margin-top: 10px; font-size: 15px; max-width: 32ch; }

    .ds-auth .ds-auth__panel-title { margin-bottom: 18px; }

    .ds-auth__form { gap: 15px; }
    .ds-field { gap: 5px; }
    .ds-field__aside { margin-top: 1px; font-size: 13px; }

    .ds-auth .ds-auth__submit  { margin-top: 4px; }
    .ds-auth .ds-auth__alt     { margin-top: 16px; }
    .ds-auth .ds-auth__divider { margin-top: 18px; }
    .ds-auth .ds-auth__google  { margin-top: 14px; }

    .ds-auth .ds-notices { margin-bottom: 14px; }
    .ds-auth .ds-notice  { padding: 10px 12px; }
}

.ds-auth .ds-auth__lead {
    margin: 14px 0 0;
    padding: 0;
    font-size: clamp(15px, 1.6vw, 19px);
    line-height: 1.45;
    opacity: 0.7;
    max-width: 26ch;
    text-wrap: pretty;
}

/* Kad tema već ispisuje isti naslov, naš izostaje — tada uvod preuzima
   ulogu glavnog teksta u glavi stranice. */
.ds-auth--no-title .ds-auth__lead {
    font-size: clamp(21px, 3.2vw, 32px);
    line-height: 1.25;
    opacity: 0.85;
    max-width: 22ch;
    margin-top: 26px;
}

.ds-auth__spacer { display: none; }
.ds-auth__today  { display: none; }

.ds-auth .ds-auth__today-label {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ds-gold-ink);
    margin-bottom: 10px;
}

.ds-auth .ds-auth__today-date {
    font-family: var(--ds-serif);
    font-weight: 400;
    font-size: 30px;
    line-height: 1.1;
    text-wrap: balance;
}

/* --------------------------------------------------------------------------
   Obrazac
   -------------------------------------------------------------------------- */

.ds-auth__panel { min-width: 0; }

.ds-auth__panel-inner {
    width: 100%;
    max-width: 380px;
}

.ds-auth .ds-auth__panel-title {
    margin: 0 0 30px;
    font-family: var(--ds-serif);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ds-gold-ink);
}

.ds-auth__form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    max-width: none;
}

.ds-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ds-auth .ds-field__label {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ds-gold-ink);
    font-weight: 400;
    margin: 0;
}

.ds-field__wrap {
    position: relative;
    display: flex;
}

.ds-auth .ds-field__input {
    width: 100%;
    min-height: 52px;
    padding: 0 14px;
    font-family: var(--ds-serif);
    font-size: 17px;
    color: var(--ds-ink);
    caret-color: var(--ds-gold);
    background: #fff;
    border: 1px solid var(--ds-gold-line);
    border-radius: var(--ds-radius);
    margin: 0;
}

.ds-auth .ds-field__input--password { padding-right: 54px; }

.ds-auth .ds-field__input::placeholder {
    color: color-mix(in srgb, var(--ds-ink) 34%, transparent);
}

/* Chrome vlastitim samodopunjavanjem oboji polje plavo i promijeni pismo.
   Vraćamo bijelu podlogu i naš font. */
.ds-auth .ds-field__input:-webkit-autofill,
.ds-auth .ds-field__input:-webkit-autofill:hover,
.ds-auth .ds-field__input:-webkit-autofill:focus,
.ds-auth .ds-field__input:autofill {
    -webkit-text-fill-color: var(--ds-ink);
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    box-shadow: 0 0 0 1000px #fff inset;
    caret-color: var(--ds-gold);
    font-family: var(--ds-serif) !important;
    font-size: 17px;
    /* Odgađa Chromeovu vlastitu pozadinu toliko da se nikad ne pojavi. */
    transition: background-color 100000s ease-in-out 0s;
}

.ds-auth .ds-field__input:hover { border-color: var(--ds-gold); }

.ds-auth .ds-field__input:focus,
.ds-auth .ds-field__input:focus-visible {
    border-color: var(--ds-gold);
    outline: 2px solid var(--ds-gold);
    outline-offset: 2px;
}

/* Dodirna zona oka je 44 × 44 px. */
.ds-auth .ds-field__eye {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--ds-gold);
    border-radius: var(--ds-radius);
    padding: 0;
}

.ds-auth .ds-field__eye:hover { background: var(--ds-gold-tint); }
.ds-auth .ds-field__eye.is-visible { opacity: 0.6; }

.ds-field__aside {
    align-self: flex-start;
    margin-top: 3px;
    font-size: 14px;
}

.ds-auth .ds-auth__note {
    margin: -6px 0 0;
    font-size: 13px;
    opacity: 0.65;
}

/* --------------------------------------------------------------------------
   Radnje — puno zlato za jedinu primarnu radnju
   -------------------------------------------------------------------------- */

.ds-auth .ds-auth__submit {
    width: 100%;
    min-height: 54px;
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ds-serif);
    font-weight: 600;
    font-size: 17px;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: #fff;
    background: var(--ds-gold);
    border: 1px solid var(--ds-gold);
    border-radius: var(--ds-radius);
    cursor: pointer;
    padding: 0 20px;
}

.ds-auth .ds-auth__submit:hover,
.ds-auth .ds-auth__submit:active {
    background: var(--ds-gold-ink);
    border-color: var(--ds-gold-ink);
}

.ds-auth .ds-auth__alt {
    margin: 22px 0 0;
    font-size: 15px;
    text-align: center;
}

.ds-auth .ds-auth__divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ds-gold-ink);
}

.ds-auth__divider span { opacity: 0.8; }

.ds-auth__divider i {
    flex: 1;
    height: 1px;
    background: var(--ds-gold-line);
}

/* Google — bijelo sa zlatnim rubom i crnim slovima, bez plave. */
.ds-auth .ds-auth__google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    margin-top: 20px;
    padding: 0 20px;
    font-family: var(--ds-serif);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.2;
    color: var(--ds-ink);
    background: #fff;
    border: 1px solid var(--ds-gold-line);
    border-radius: var(--ds-radius);
    text-decoration: none;
}

.ds-auth .ds-auth__google:hover {
    background: var(--ds-gold-tint);
    border-color: var(--ds-gold);
    color: var(--ds-ink);
}

.ds-auth .ds-auth__google svg { display: block; flex: none; }

.ds-auth a {
    color: var(--ds-gold-ink);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.ds-auth a:hover { color: var(--ds-gold); }

.ds-auth :focus-visible {
    outline: 2px solid var(--ds-gold);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Poruke — u istoj gramatici, bez zaobljenja
   -------------------------------------------------------------------------- */

.ds-auth .ds-notices { margin: 0 0 20px; }

.ds-auth .ds-notice {
    border-radius: var(--ds-radius);
    border-left-width: 3px;
    border-left-color: var(--ds-gold);
    background: var(--ds-gold-tint);
    font-size: 14px;
    padding: 12px 14px;
}

.ds-auth .ds-notice--error {
    border-left-color: #a4123a;
    background: color-mix(in srgb, #a4123a 7%, transparent);
}

.ds-auth .ds-notice--success {
    border-left-color: #1b6e46;
    background: color-mix(in srgb, #1b6e46 7%, transparent);
}

/* --------------------------------------------------------------------------
   Tablet i šire — dvije stranice novina
   -------------------------------------------------------------------------- */

/* Dva stupca — naslov lijevo, obrazac desno — čim okvir ima 540 px sadržaja.
   Mjeri se širina OKVIRA, ne prozora: plugin sjedi u stupcu teme koji je na
   župnoj stranici širok 696 px, odnosno 594 px sadržaja. */
@container dsauth (min-width: 540px) {
    .ds-auth__inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: clamp(28px, 6cqi, 64px);
        align-items: stretch;
    }

    /* U dva stupca naslov se ravna prema svojoj koloni i smije se lomiti
       u dva reda, kako je i u dizajnu. */
    .ds-auth .ds-auth__title { font-size: clamp(30px, 17cqi, 76px); }

    .ds-auth__mark { width: 24px; height: 32px; }

    .ds-auth__masthead { padding-right: 24px; }

    .ds-auth__kicker { font-size: 12px; letter-spacing: 0.18em; line-height: 1.8; }
    .ds-auth .ds-auth__title { margin-top: 76px; }
    .ds-auth .ds-auth__lead  { margin-top: 28px; max-width: 24ch; }
    .ds-auth__spacer { display: block; flex: 1; min-height: 40px; }
    .ds-auth__today  { display: block; }

    .ds-auth__panel {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .ds-auth__panel-inner { max-width: 360px; }

    .ds-field__label { font-size: 12px; }
    .ds-auth .ds-field__input { min-height: 54px; }
    .ds-auth .ds-auth__submit { min-height: 56px; font-size: 18px; }
    .ds-auth .ds-auth__google { min-height: 54px; }
    .ds-auth .ds-auth__divider { font-size: 12px; margin-top: 30px; }
    .ds-auth .ds-auth__alt { font-size: 16px; margin-top: 24px; }
}

@container dsauth (min-width: 1100px) {
    .ds-auth__inner { gap: 88px; }
}

@media (prefers-reduced-motion: reduce) {
    .ds-auth * { transition: none !important; }
}