/*
Theme Name: Orange Comet - Salient Child
Description: This is a custom child theme for Orange Comet
Theme URI:
Author:
Author URI:
Template: salient
Version: 1.0
*/

/*---------------------------------------------------------------------------
  TABLE OF CONTENTS:
  Last Updated 10.06.2022 | 04:55pm - Schuler
-----------------------------------------------------------------------------
1.0 # CSS Variables + Helper Classes
2.0 # Login Styles  
3.0 # Media Queries 
----------------------------------------------------------------------------- */

/*===========================================================================
  # 1.0 CSS Variables + Helper Classes
  =========================================================================== */
:root {
  --color-accent: #fa4616;
}

/*===========================================================================
  # 2.0 Login Styles
  =========================================================================== */  

/* Typography */
body.login div#login form#loginform input#wp-submit {
  font-family: 'Cabin', sans-serif;
  font-size: 18px; font-weight: 500; line-height: 1; text-transform: uppercase;
}

/* WordPress Core Overrides */
body.login { position: relative; background: #fff; }
body.login:before { 
  position: absolute; top: 0; left: 0;
  content:''; width: 40%; height: 100%;
  background: url('../assets/images/SG--GUARD--NIGHTSCANNER.jpg') no-repeat; 
  background-size: cover; background-position: center center;
}

body.login div#login { 
  display: flex; flex-direction: column; justify-content: center;
  width: 60%; height: 100%; margin: 0 0 0 40%; padding: 0; 
}
body.login div#login h1 {}
body.login div#login h1 a {
  background-image: url('../assets/images/OrangeComet-logo-web-02-dark.png');
  height: 70px; width: 280px;
  background-size: 280px 70px;
  background-repeat: no-repeat;
}
body.login div#login a:hover { color: var(--color-accent); }
body.login div#login form { overflow: visible;
  display: flex; flex-direction: column; padding: 0;
  background: none; border: 0; box-shadow: none;
}
body.login div#login form#loginform p {}
body.login div#login form#loginform p label {}
body.login div#login form#loginform input {}
body.login div#login form#loginform input#user_login {}
body.login div#login form#loginform input#user_pass {}
body.login div#login form#loginform input#wp-submit { 
  margin-top: 2em; padding: 23px 50px; border-radius: 200px; 
  background: var(--color-accent); border-color: var(--color-accent);
  transition: opacity .45s cubic-bezier(0.25, 1, 0.33, 1), transform .45s cubic-bezier(0.25, 1, 0.33, 1), border-color .45s cubic-bezier(0.25, 1, 0.33, 1), color .45s cubic-bezier(0.25, 1, 0.33, 1), background-color .45s cubic-bezier(0.25, 1, 0.33, 1), box-shadow .45s cubic-bezier(0.25, 1, 0.33, 1);
}
body.login div#login form#loginform input#wp-submit:hover {
  box-shadow: 0 20px 38px rgb(0 0 0 / 16%);
  transform: translateY(-3px);
}

body.login div#login form#loginform p.forgetmenot {}
body.login div#login form#loginform p.forgetmenot input#rememberme {}
body.login div#login form#loginform p.submit { display: flex; }

body.login .login .message, 
body.login .login .success,
body.login .login #login_error { 
  padding-left: 12px; border-left: 8px solid var(--color-accent); 
  color: var(--color-accent); box-shadow: none; 
}

body.login div#login p#nav a {}
body.login div#login p#backtoblog {}
body.login div#login p#backtoblog a {}

a.privacy-policy-link { color: var(--color-accent); }

/*===========================================================================
  # 3.0 Media Queries
  =========================================================================== */

/*===========================================================================
  # 4.0 
  !important migrated from wp-login.php 
  waiting on CloudFlare caching
  =========================================================================== */
/* Typography */
body.login div#login form:before { 
  font-family: 'Roboto', sans-serif; font-weight: 400; 
  font-size: 1.953rem; line-height: 1.1; letter-spacing: 1px;
}
body.login div#login form input[type='text'],
body.login div#login form input[type='password'] { 
  font-size: 1.25rem; 
}
body.login .privacy-policy-page-link { text-align: left; }

/* Content */
body.login div#login { 
  width: 500px; max-width: 100%; height: 100%; margin: 0 0 0 40%; padding: 0; 
} 
body.login div#login h1 a { max-width: 100%; margin-bottom: 0; margin-left: 0; }
body.login div#login form { position: relative; overflow: visible;
  display: flex; flex-direction: column; padding: 0;
  background: none; border: 0; box-shadow: none;
}
body.login div#login form:before { margin-bottom: 24px;
  content:'LOGIN REQUIRED'; color: #fa4616;
  
}
/* Form -- Lost Password */
body.login div#login form#lostpasswordform { 
}

/* Global Form Styles */
body.login div#login form#resetpassform .button-primary,
body.login div#login form#lostpasswordform .button-primary { 
  background: #fa4616; border-color: #fa4616;
}

body.login div#login > * { margin-left: 32px!important; margin-right: 32px!important; }

body.login div#login .message, 
body.login div#login .success,
body.login div#login #login_error { 
  padding-left: 12px; border-left: 8px solid var(--color-accent); 
  color: var(--color-accent); box-shadow: none; 
}

/* Form -- Reset Password */
body.login div#login p.reset-pass { margin-bottom: 0; }
body.login div#login form#resetpassform .button.button-primary:hover { }
body.login div#login form#resetpassform .button.wp-generate-pw { color: #fa4616; border-color: #fa4616; }

@media screen and (max-width: 900px) {
  body.login:before { width: 100%; height: 200px; background-position: top; }
  body.login div#login { 
    align-items: center; justify-content: unset;
    margin: 0 auto; padding-top: 220px; 
  }
  body.login div#login > * { margin-right: 16px!important; margin-left: 16px!important; }
  body.login div#login form p.submit { justify-content: right; }
  body.login div#login form#loginform { justify-content: right; } 
  body.login #nav,
  body.login #backtoblog,
  body.login .privacy-policy-page-link {
    width: calc(100% - 32px); padding: 0;
  }
}

@media screen and (max-width: 480px) {
  body.login div#login form:before { font-size: 1.77rem; }
  body.login div#login form#loginform input { font-size: 1rem; }
}