/**
 * COPYRIGHT 2024 BY ROBERT CURA. ALL RIGHTS RESERVED
 * AUTHOR: ROBERT CURA
 * INCEPTION: 2024APR08
 * DESCRIPTION: Typography for FORM-RELATED elements
 **/

/*************************************************************************** *
 *
 * FORM-RELATED ELEMENTS CUSTOMIZATION                    
 *
 *************************************************************************** */

/*************************************************************************** *
 * GENERIC/COMMON FORMS/INPUT RELATED CUSTOMIZATIONS                                                                          
 *************************************************************************** */
form *  {
    font-family:        var(--xrc-font-sans--montserrat);
}
form input[type="text"],
form input[type="email"],
form input[type="password"]
{
    color:              #2220b9;
    font-family:        serif;
    font-size:          1.2rem;
    height:             3.5rem;
    line-height:        2rem;
    padding:            1rem;
    width:              100%;
}
form input[type="password"] {
    margin-bottom:      2rem;
}
form label  {
    /*line-height:        2rem;*/
    color:              #789789;
    display:            block;
    font-family:        sans-serif;
    height:             1.5rem;
    padding:            1rem;
    margin:             1rem 0;
}
form input[type="submit"] {
    height:             3rem;
    padding:            0 2rem;
    margin:             2.0rem 0;
}
form textarea  {
    padding:            1rem;
    width:              100%;
}
/*-------------------------------------------------------------------------- */
/*  FORM CUSTOMIZATIONS                                                                          
/*-------------------------------------------------------------------------- */
.xrc-form-wrapper {
    display:            flex;
    align-items:        center;
    justify-content:    center;
}

/*-------------------------------------------------------------------------- */
/*  WEBFORM CUSTOMIZATIONS                                                                          
/*-------------------------------------------------------------------------- */
.xrc-webform-wrapper {
    display:            flex;
    align-items:        center;
    justify-content:    center;
}
.xrc-webform-wrapper form  {
    margin-left:        2rem;
    margin-right:       2rem;
    width:              80%;
}
.webform-button--submit {
    background-color:   lightgreen;
}
.webform-element-more--link a {
    padding:            0 1rem;
}
.webform-element-more--link a,
.webform-element-description,
.webform-element-description a,
.webform-element-more--content {
    font-family:        var(--xrc-font-sans--montserrat);
    font-size:          calc(0.8 * 1.2rem);
}
.xrc-paragraph div.ck-editor__main .ck-content * 
{
    font-family:        var(--xrc-font-sans--montserrat);
}
.xrc-paragraph div.ck-editor__main .ck-content {
    background-color:   var(--xrc-swap-color-para--bkgd-tone);
}
/*************************************************************************** *
 * PARAGRAPH-RELATED INPUT/FORMS CUSTOMIZATIONS                                                                          
 *************************************************************************** */
.xrc-paragraph form input[type="text"] {
    background-color:   var(--xrc-form-text-color--bkgd-tone);
    color:              var(--xrc-form-text-color--text-main);
    font-family:        var(--xrc-form-text-font--font-family);
    font-size:          var(--xrc-form-text-font--font-size);
    font-weight:        var(--xrc-form-text-font--weight);
    line-height:        var(--xrc-form-text-font--line-height);
    padding:            1rem;
    height:             var(--xrc-form-input--height);
}
.xrc-paragraph form label {
    background-color:   var(--xrc-form-labl-color--bkgd-tone);
    color:              var(--xrc-form-labl-color--text-main);
    font-family:        var(--xrc-form-labl-font--font-family);
    font-size:          var(--xrc-form-labl-font--font-size);
    font-weight:        var(--xrc-form-labl-font--weight);
    line-height:        var(--xrc-form-labl-font--line-height);
}

/** SWAP FILES **/
.xrc-paragraph form input[type="text"]
{
    --xrc-form-text-color--bkgd-tone:   var(--xrc-swap-form-text-color--bkgd-tone,  var(--xrc-dflt-form-text-color--bkgd-tone   ));
    --xrc-form-text-color--text-main:   var(--xrc-swap-form-text-color--text-main,  var(--xrc-dflt-form-text-color--text-main   ));
    --xrc-form-text-font--font-family:  var(--xrc-swap-form-text-font--font-family, var(--xrc-dflt-form-text-font--font-family  ));
    --xrc-form-text-font--font-size:    var(--xrc-swap-form-text-font--font-size,   var(--xrc-dflt-form-text-font--font-size    ));
    --xrc-form-text-font--weight:       var(--xrc-swap-form-text-font--weight,      var(--xrc-dflt-form-text-font--weight       ));
    --xrc-form-text-font--line-height:  var(--xrc-swap-form-text-font--line-height, var(--xrc-dflt-form-text-font--line-height  ));
    --xrc-form-input--height:           var(--xrc-swap-form-input--height,          var(--xrc-dflt-form-input--height           ));
}
.xrc-paragraph label {
    --xrc-form-labl-color--bkgd-tone:   var(--xrc-swap-form-labl-color--bkgd-tone, var(--xrc-dflt-form-labl-color--bkgd-tone ));
    --xrc-form-labl-color--text-main:   var(--xrc-swap-form-labl-color--text-main, var(--xrc-dflt-form-labl-color--text-main ));
    --xrc-form-labl-font--font-family:  var(--xrc-swap-form-labl-font--font-family,var(--xrc-dflt-form-labl-font--font-family));
    --xrc-form-labl-font--font-size:    var(--xrc-swap-form-labl-font--font-size,  var(--xrc-dflt-form-labl-font--font-size  ));
    --xrc-form-labl-font--weight:       var(--xrc-swap-form-labl-font--weight,     var(--xrc-dflt-form-labl-font--weight     ));
    --xrc-form-labl-font--line-height:  var(--xrc-swap-form-labl-font--line-height,var(--xrc-dflt-form-labl-font--line-height));
}


/** OVERRIDES **/
.xrc-paragraph form input[type="text"]
{
    --xrc-swap-form-text-color--bkgd-tone:   var(--xrc-dflt-form-text-color--bkgd-tone      );
/*    --xrc-swap-form-text-color--bkgd-tone:   var(--xrc-swap-color-para--bkgd-tone           );*/
    --xrc-swap-form-text-color--text-main:   var(--xrc-swap-color-para--text-main           );
    --xrc-swap-form-text-font--font-family:  var(--xrc-font-sans--fira                      );
  /*--xrc-swap-form-text-font--font-family:  var(--xrc-swap-para-body-text--font-family     );*/
    --xrc-swap-form-text-font--font-size:    var(--xrc-swap-para-body-text--font-size       );
    --xrc-swap-form-text-font--weight:       var(--xrc-swap-para-body-text--font-weight     );
    --xrc-swap-form-text-font--line-height:  var(--xrc-swap-form-text-font--line-height     );
    --xrc-swap-form-input--height:           var(--xrc-swap-form-input--height              );
}
.xrc-paragraph form label {
    --xrc-swap-form-labl-color--bkgd-tone:   var(--xrc-swap-color-para--bkgd-main           );
    --xrc-swap-form-labl-color--text-main:   var(--xrc-swap-color-para--text-alt1           );
    --xrc-swap-form-labl-font--font-family:  var(--xrc-font-sans--scandia-web               );
  /*--xrc-swap-form-labl-font--font-family:  var(--xrc-swap-para-menu-text--font-family     );*/
    --xrc-swap-form-labl-font--font-size:    var(--xrc-swap-para-menu-text--font-size       );
    --xrc-swap-form-labl-font--weight:       var(--xrc-swap-para-menu-text--font-weight     );
    --xrc-swap-form-labl-font--line-height:  var(--xrc-swap-form-labl-font--line-height     );
}


/** DEFAULTS **/
:root  {
    --xrc-dflt-form-text-color--bkgd-tone   : #ffffff;
    --xrc-dflt-form-text-color--text-main   : #2200af;
    --xrc-dflt-form-text-font--font-family  : sans-serif;
    --xrc-dflt-form-text-font--font-size    : 1.2rem;
    --xrc-dflt-form-text-font--weight       : 300;
    --xrc-dflt-form-text-font--line-height  : 1.5rem;
    --xrc-dflt-form-input--height           : 2.0rem;

    --xrc-dflt-form-labl-color--bkgd-tone   : #ffffff;
    --xrc-dflt-form-labl-color--text-main   : #555555;
    --xrc-dflt-form-labl-font--font-family  : sans-serif;
    --xrc-dflt-form-labl-font--font-size    : 1.0rem;
    --xrc-dflt-form-labl-font--weight       : 300;
    --xrc-dflt-form-labl-font--line-height  : 1.2rem;
}