/***********************************************
Font-face setup
***********************************************/
@font-face {
    font-family: 'montserrat';
    src: url('../font/montserrat-regular.woff2') format('woff2'),
         url('../font/montserrat-regular.woff') format('woff');
    font-weight:normal;
    font-style:normal;
}

@font-face {
    font-family: 'montserrat';
    src: url('../font/montserrat-medium.woff2') format('woff2'),
         url('../font/montserrat-medium.woff') format('woff');
    font-weight:700;
    font-style:bold;
}

@font-face {
    font-family: 'eagle';
    src: url('../font/eagle.woff2') format('woff2'),
         url('../font/eagle.woff') format('woff');
    font-weight:700;
    font-style:bold;
}

@font-face {
    font-family: 'aloha';
    src: url('../font/aloha.woff2') format('woff2'),
         url('../font/aloha.woff') format('woff');
    font-weight:700;
    font-style:bold;
}


/***** Fonts overrides *****/
body, form, input, button, textarea, select, label,
.select select, .select optgroup option,
.select optgroup option, .checkbox > span label,
.radio > span label, form .message, .btn        { font-family:'montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; color:var(--color-gray500); letter-spacing:.5px; }

html, body                                      { margin:0; padding:0; background-color:var(--color-snow); }
html                                            { scroll-behavior:smooth; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6                    { font-weight:bold; font-family:eagle; color:var(--color-brand); flex-wrap:wrap; }

p+h1, p+h2, p+h3, p+h4, p+h5, p+h6,
.p+h1, .p+h2, .p+h3, .p+h4, .p+h5, p+.h6,
figure+*, .cards+*                              { margin-top:30px; }

h1, .h1                                         { font-size:3.6rem; line-height:4rem; font-weight:bold; }
h1 small                                        { margin-bottom:12px; display:block; width:100%; font-size:5rem; line-height:3rem; font-family:aloha; color:var(--color-brand100); }
h2, .h2                                         { font-size:3.8rem; line-height:3.8rem; font-weight:bold; }
h2 small                                        { margin-bottom:12px; display:block; width:100%; font-size:4rem; font-family:aloha; color:var(--color-brand300); }
h3, .h3                                         { font-size:3.6rem; line-height:4rem; font-weight:bold; gap:0; }
h3 small                                        { display:block; width:100%; font-size:1.3rem; color:var(--color-brand300); }
h4, .h4                                         { font-size:2.6rem; line-height:2.8rem; font-weight:bold; color:var(--color-brand); gap:0; }
h5, .h5                                         { font-size:1.8rem; font-weight:bold; color:var(--color-brand300); max-width:900px; }
h6, .h6                                         { font-size:1.4rem; line-height:2rem; }

p                                               { max-width:800px; text-wrap:pretty; }
p+h4                                            { margin-top:30px; }

.va                                             { margin-right:3px; letter-spacing:-10px; }
h4 .va                                          { margin:0 0 0 -2px; letter-spacing:-3px; }
h2 .wa                                          { letter-spacing:-6px; }

.txt--small, small                              { font-size:1.2rem; line-height:1.6rem; color:var(--color-gray400); }
.txt--smaller                                   { font-size:1rem; line-height:1.4rem; }
.txt--subtext                                   { margin-top:0; }
.txt-aloha                                      { font-family:aloha; }
.txt--hero                                      { font-size:1.8rem; }

hr                                              { margin:20px 0; border-top:3px solid var(--color-brand); border-radius:3px; width:30px; }
a                                               { display:inline-flex; grid-gap:8px; align-items:center; }
strong                                          { font-weight:bold; color:var(--color-brand); }

.txt                                            { display:flex; flex-direction:column; flex-grow:1; }

.txt--wrap                                      { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }

.txt--snow                                      { color:var(--color-snow); }
.txt--mist                                      { color:var(--color-mist); }

.txt--brand,
.txt--info,
.txt--info strong                               { color:var(--color-brand); }

.txt--brand800                                  { color:var(--color-brand800); }

.txt--positive,
.txt--positive strong                           { color:var(--color-positive); }

.txt--amber,
.txt--amber strong                              { color:var(--color-amber); }

.txt--warning                                   { color:var(--color-warning); }

.txt--negative                                  { color:var(--color-negative); }

.txt--bcbBlue100                                { color:var(--color-brand); }
.txt--gray400                                   { color:var(--color-gray400); }
.txt--gray900                                   { color:var(--color-gray900); }

:root {
    /* Border Radius */
    --radius: 4px;

    /* Border Radius */
    --shadow: 0, 13, 34;

    /* Brand */
    --color-brand50:        #F6F5F7;
    --color-brand100:       #D4A9DA;
    --color-brand200:       #B4AFB8;
    --color-brand300:       #865394;
    --color-brand:          #501167;
    --color-brand800:       #44364D;

    /* Positive */
    --color-positive:       #12B76A;
    --color-positiveDark:   #039855;

    /* Negative */
    --color-negative:       #F04438;
    --color-negativeDark:   #B42318;

    /* Warning */
    --color-warning:        #FDC10A;
    --color-warningDark:    #DC6803;

    /* Infomation */
    --color-info:           #0060F5;
    --color-infoDark:       #00388F;
    
    /* Grays */
    --color-gray300:        #D2D5DA;
    --color-gray400:        #9DA3AE;
    --color-gray500:        #6A7281;
    --color-gray700:        #3D424B;
    --color-snow:           #FFFFFF;
    --color-haze:           #FAFCFF;
    --color-mist:           #E8ECF5;
    --color-black:          #000D22;
}

/***********************************************
Tablet - This applies from 768px onwards
***********************************************/
@media (min-width:768px)                        {
    h1, .h1                                     { font-size:6.6rem; line-height:7rem; }
    h1 small                                    { font-size:5rem; }
    h2, .h2                                     { font-size:5.6rem; line-height:6rem; }
    h2 small                                    { font-size:5rem; }
    h3, .h3                                     { font-size:3.6rem; line-height:4rem; }
    h5, .h5                                     { font-size:1.8rem; }
    h6, .h6                                     { font-size:1.4rem; line-height:2rem; }

    .va                                         { margin-right:7px; letter-spacing:-14px; }
    h4 .va                                      { margin:0 0 0 -2px; letter-spacing:-3px; }
    h2 .wa                                      { letter-spacing:-6px; }

    .txt--center h2,
    .txt--center h4,
    .txt--center h5                             { justify-content:center; }

    .txt--left h2,
    .txt--left h4                               { justify-content:flex-start; }
}