/*==========================================================
  Nexia Authentication Framework
  File: auth-layout.css

  Purpose:
      Shared Authentication Layout

      Register
      Login
      Verify Email
      Forgot Password
      Reset Password
==========================================================*/


/*==========================================================
  PAGE
==========================================================*/

.nx-auth{

    padding:72px 20px;

}


/*==========================================================
  CONTAINER
==========================================================*/

.nx-auth-container{

    width:min(100%,540px);

    margin-inline:auto;

}


/*==========================================================
  CARD
==========================================================*/

.nx-auth-card{

    padding:31px;

    background:var(--nx-surface);

    border:1px solid var(--nx-border);

    border-top:4px solid var(--nx-primary);

    border-radius:var(--nx-radius-lg);

    box-shadow:var(--nx-shadow-md);

}


/*==========================================================
  HEADER
==========================================================*/

.nx-auth-header{

    margin-bottom:28px;

    text-align:center;

}

.nx-auth-title{

    margin:0 0 14px;

    font-size:clamp(2.4rem,4vw,3rem);

    line-height:1.1;

}

.nx-auth-subtitle{

    max-width:360px;

    margin:0 auto;

    color:var(--nx-text-light);

    line-height:1.6;

}


/*==========================================================
  FORM
==========================================================*/

.nx-auth-form{

    display:flex;

    flex-direction:column;

    gap:18px;

}


/*==========================================================
  FOOTER
==========================================================*/

.nx-auth-footer{

    margin-top:24px;

    padding-top:20px;

    border-top:1px solid var(--nx-border);

    text-align:center;

    font-size:var(--nx-font-size-sm);

}

.nx-auth-footer p{

    margin:0;

}

.nx-auth-footer a{

    font-weight:var(--nx-weight-semibold);

}


/*==========================================================
  HELP TEXT
==========================================================*/

.nx-auth-help{

    color:var(--nx-text-muted);

    text-align:center;

}


/*==========================================================
  BUTTONS
==========================================================*/

.nx-auth .nx-btn{

    width:100%;

    min-height:48px;

    margin-top:6px;

}

.nx-auth .nx-btn{

    margin-left:0;

}


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

@media (max-width:640px){

    .nx-auth{

        padding:48px 20px;

    }

    .nx-auth-container{

        width:100%;

    }

    .nx-auth-card{

        padding:26px 22px;

    }

    .nx-auth-title{

        font-size:2.2rem;

    }

}

/*==========================================================
  WORDPRESS PASSWORD-PROTECTED PAGES
==========================================================*/

body.post-password-required .post-password-form{

    width:min(100%,540px);

    margin:72px auto;

    padding:31px;

    box-sizing:border-box;

    background:var(--nx-surface);

    border:1px solid var(--nx-border);

    border-top:4px solid var(--nx-primary);

    border-radius:var(--nx-radius-lg);

    box-shadow:var(--nx-shadow-md);

}

body.post-password-required .post-password-form p{

    margin:0;

    color:var(--nx-text-light);

    line-height:1.6;

}

body.post-password-required .post-password-form label{

    display:block;

    margin-top:24px;

    color:var(--nx-text-light);

    font-size:var(--nx-font-size-sm);

    font-weight:var(--nx-weight-semibold);

}

body.post-password-required .post-password-form input[type="password"]{

    display:block;

    width:100%;

    margin-top:8px;

    box-sizing:border-box;

}

body.post-password-required .post-password-form input[type="submit"]{

    display:flex;

    width:100%;

    margin-top:18px;

}

@media (max-width:640px){

    body.post-password-required .post-password-form{

        margin:48px 20px;

        padding:26px 22px;

        width:auto;

    }

}