/*  
 *  AurumCore Welcome Kit - System pages
 *  February, 2026
 *  All rights reserved.
 *
 *  
 *  Index:
 *   - Definition: Body;
 *   - Definition: Color classes;
 *   - Definition: Typography;
 *   - Definition: Buttons;
 *   - Definition: Header & Footer;
 *
 *   - Page: Login;
*/
:root {
    --gold-60: #B6802C;
    --teal-60: #36617B;
    --crimson-60: #730202;

    --gold-40: #E5BC41;
    --teal-40: #04B2D9;
    --teal-80: #023859;
    --teal-100: #071024;

    --white: #FFFFFF;
    --black: #000000;

    --teal-10: #F8FCFC;
    --gray-10: #F7F7F8;

    --gray-20: #EFEFF0;
    --gray-50: #A9A9AF;
    --gray-60: #7E7F7E;
    --border: #ACC2C8;

    --gradient-gold: linear-gradient(to bottom, #E5BC41 0%, #B6802C 100%);
    --gradient-gold-hover: linear-gradient(to bottom, #B6802C 0%, #B46F27 100%);
    --gradient-teal: linear-gradient(to bottom, #36617B 32%, #023859 100%);
    --gradient-teal-100: linear-gradient(to bottom, #023859 20%, #071024 80%);

    --shadow-teal: 0px 3px 20px rgba(4,178,217,.16);
    --shadow-gold: 0px 0px 12px rgba(182,128,44,.25);
}

/* "Kids, you tried your best and you failed miserably. The lesson is, never try."
    - Homer Simpson
 */

/* ==========================================
 * Definition: Body;
 * ========================================== */
html {
    position: relative;
    min-height: 100%;
    padding: 0;
    margin: 0;
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    width: 100%;
    cursor: default;
    color: var(--black);
    font-weight: 400;
    font-family: "Red Hat Display", sans-serif;
    background-color: var(--white);
}
main {
    flex: 1;
}
.container { padding: 0 24px; }


/* ==========================================
 * Definition: Color classes;
 * ========================================== */
.text-teal-60 { color: var(--teal-60); }
.bg-gradient-teal-100 { background: var(--gradient-teal-100); }

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}


/* ==========================================
 * Definition: Typography;
 * ========================================== */
h1 {
    margin: 0;
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    font-family: "Red Hat Display", sans-serif;
}
h2 {
    margin: 0;
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    font-family: "Red Hat Display", sans-serif;
}
h4 {
    margin: 0;
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    font-family: "Red Hat Display", sans-serif;
}
p {
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
    font-family: "Red Hat Display", sans-serif;
}
p.jumbo {
    font-size: 100px;
    line-height: 120px;
    font-weight: 300;
}


/* ==========================================
 * Definition: Buttons;
 * ========================================== */
/* ---- GROUP: ANCHORS; ---- */
a:not(.button),
a:not(.button):visited {
    display: inline-block;
    margin: 0;
    font-size: 14px;
    line-height: 18px;
    font-weight: 700;
    transition: 0.3s;
}
a:not(.button).big-link { font-size: 18px; line-height: 24px; }
a.disabled { opacity: .5; cursor: not-allowed; }
a:focus,
a:focus-visible {
    outline: var(--teal-60) auto 1px !important;
    box-shadow: var(--shadow-teal)!important;
}

/* ---- Main ---- */
a:not(.button),
a:not(.button):visited {
    color: var(--gold-60);
    text-decoration: underline;
}
a:not(.button):not(.disabled):active,
a:not(.button):not(.disabled):hover {
    color: var(--gold-40)!important;
    text-decoration: underline;
}

/* ---- Secondary ---- */
a:not(.button).link-secondary,
a:not(.button).link-secondary:visited,
a#hs_login_reset,
a#hs_login_reset:visited {
    color: var(--teal-60)!important;
    text-decoration: underline;
}
a:not(.button).link-secondary:not(.disabled):active,
a:not(.button).link-secondary:not(.disabled):hover,
a#hs_login_reset:active,
a#hs_login_reset:hover {
    color: var(--teal-100)!important;
    text-decoration: underline;
}

/* ---- GROUP: BUTTONS; ---- */
.button,
.hs-button[type="submit"] {
    position: relative;
    display: inline-block;
    margin: 0;
    min-width: 240px;
    padding: 8px 24px;

    font-size: 16px;
    line-height: 22px;
    font-weight: 700;
    font-family: "Red Hat Display", sans-serif;
    text-decoration: none;

    border: none;
    border-radius: 32px;
    transition: 0.3s;
}
.button:hover,
.hs-button[type="submit"]:hover { text-decoration: none!important; }
.button:disabled { opacity: .4; cursor: not-allowed; }
.button:focus,
.button:focus-visible,
.hs-button[type="submit"]:focus,
.hs-button[type="submit"]:focus-visible {
    outline: var(--teal-60) auto 1px !important;
    box-shadow: var(--shadow-teal); !important;
}

/* ---- Primary ---- */
.button.button-primary,
.hs-button[type="submit"].primary { color: var(--white); background: var(--gradient-gold); }
.button.button-primary:hover,
.hs-button[type="submit"].primary:hover { color: var(--white); background: var(--gradient-gold-hover); }

/* ---- Secondary ---- */
.button.button-secondary { color: var(--white); background-color: var(--teal-60); }
.button.button-secondary:hover { color: var(--white); background-color: var(--teal-80); }

/* ---- Outline ---- */
.button.button-outline {
    color: var(--black);
    background-color: var(--white);
    border: 1px solid var(--teal-60);
}
.button.button-outline:hover {
    color: var(--white);
    background-color: var(--teal-60);
    border-color: var(--teal-60);
}


/* ==========================================
 * Definition: Form elements;
 * ========================================== */
span[id^="hs_cos_wrapper"] > .hs-form-field { display: none; }

form { margin: 0 auto; max-width: 420px; text-align: left!important; }
form .hs-form-field { position: relative; margin-bottom: 16px; }
form .hs-form-field label {
    display: block;
    font-size: 14px;
    line-height: 18px;
    font-weight: 700;
    color: var(--black);
    font-family: "Red Hat Display", sans-serif;
}
form .hs-form-field .hs-input:not([type="checkbox"]) {
    display: block;
    width: 100%;
    margin: 4px 0;
    padding: 8px 12px;
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    color: var(--black);
    font-family: "Red Hat Display", sans-serif;

    border: 1px solid var(--border);
    border-radius: 8px;
}
form .hs-form-field .hs-input:disabled { background-color: var(--gray-20); cursor: default; }
form .hs-form-field .hs-input:not(:disabled):focus,
form .hs-form-field .hs-input:not(:disabled):active {
    outline: var(--gold-60) auto 1px !important;
    box-shadow: var(--shadow-gold); !important;
}

form .hs-form-field .hs-input.form-input-error {
    border: 1px solid var(--crimson-60)!important;
    margin-bottom: 2px!important;
}

/* Field: password  */
form .hs-form-field .hs-input[type="password"] {
    padding-right: 48px;
}
a[class$="widget-show-password"] {
    position: absolute;
    top: 31px;
    right: 16px;
}
a[class$="widget-show-password"],
a[class$="widget-show-password"]:visited {
    color: var(--gray-60);
}
a[class$="widget-show-password"]:hover,
a[class$="widget-show-password"]:focus {
    color: var(--gold-60);
}

/* Field: checkbox  */
form .hs-form-field .hs-input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--gold-60);
    vertical-align: middle;
}
form .hs-form-field label[for=hs-login-widget-remember] {
    margin-left: 8px;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
}

/* Field: Help text  */
.no-list.hs-error-msgs {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.no-list.hs-error-msgs label {
    color: var(--teal-60);
    font-size: 14px;
    line-height: 18px;
    font-weight: 500;
}
.no-list.hs-error-msgs label.hs-error-msg { color: var(--crimson-60); }

/* Field: Buttons  */
div:has(a#hs_login_reset) { padding-top: 16px; text-align: center; }

form .hs_submit {
    text-align: center;
    margin-top: 32px;
}


/* ==========================================
 * Page: Login;
 * ========================================== */
/* ---- GROUP: CAROUSEL ---- */
.main-logo {
    display: block;
    margin: 0 auto;
    width: 80%;
    max-width: 160px;
}

.body-content {
    display: block;
    padding: 32px 16px 24px;
    width: 100%;
    max-width: 600px;
    background-color: var(--white);
    border-radius: 24px;
}