/* =======================================================================================================
   3XW v2.02 // SETTINGS // Brand Styles
   =======================================================================================================
    LOGO
   ------------------------------------------------------------------------------------------------------- */
.txw-logo-wrapper {
    --logo-default: 	    url(/wp-content/uploads-m/3xw/svg/LOGO-2022-logo_default.svg);
    --logo-margins:         url(/wp-content/uploads-m/3xw/svg/LOGO-2022-logo_default-margins.svg);
    --logo-single-line:     url(/wp-content/uploads-m/3xw/svg/LOGO-2022-logo_default.svg);
    --logo-tagline: 	    url(/wp-content/uploads-m/3xw/svg/LOGO-2022-logo_with-tagline.svg);
    --logo-minimal: 	    url(/wp-content/uploads-m/3xw/svg/LOGO-2022-logo_minimal.svg);
    --logo-night: 		    url(/wp-content/uploads-m/3xw/svg/LOGO-2022-logo_by-night.svg);
    --logo-night-tagline:   url(/wp-content/uploads-m/3xw/svg/LOGO-2022-logo_by-night-tagline.svg);

    --logo-ratio-long:      17;
    --logo-ratio-short:     8;

    --logo-ratio-width:     var(--logo-ratio-long); /* logo = landscape */
    --logo-ratio-height:    var(--logo-ratio-short);
}
.txw-logo-tag {
    --logo-ratio-short:     8; /*--logo-ratio-height: var(--logo-ratio-short);*/
}
.txw-logo-def-margins {
    --logo-ratio-long:      14.5;
    --logo-ratio-short:     8;
}
.txw-logo-min {
    --logo-ratio-width:     1;
    --logo-ratio-height:    1;
}
/* -------------------------------------------------------------------------------------------------------
    TEXT RESPONSIVE GLOBAL
   ------------------------------------------------------------------------------------------------------- */
@font-face {
    font-family: Afacad Flux;
    src: url('/wp-content/uploads-m/csp/font/afacad-flux-variable.woff2') format('woff2-variations');
    font-weight: 100 1000;
    font-style: normal;
    font-display: swap;
}
html, button, input, textarea {
  font-variation-settings: "slnt" 0; /*  safari fix */
}
:root {
    font-size: 62.5%; /* 16px * 0.625 makes 1 REM = 10px */ }
    /* REM allows upscaling for the visually impaired, use PX only for heading max-values */
    /* if body font size is responsive (clamp with VW), all % or EM values will be responsive */
    /* non-responsive font-sizes should be set in REM, making them fixed but upscalable */
body {
    --fnt-body-size:    1.8rem;
    --fnt-body-line:	1.4;
    --rt-single-line: 	calc( var(--fnt-body-size) * var(--fnt-body-line) );
    --lcl-single-line: 	calc( max( 1em, 14px ) * var(--fnt-body-line) );

    --fnt-body-type:	'Afacad Flux';                   --fnt-head-type:	'Afacad Flux';
    --fnt-body-wght:    400;
    --fnt-intro-wght:	500;
    --txt-indent:       3ch;

/* -------------------------------------------------------------------------------------------------------
    TEXT RESPONSIVE SMALL                               TEXT RESPONSIVE LARGE
   ------------------------------------------------------------------------------------------------------- */

    --fnt-body-size-s:	86%;	                        --fnt-body-size-l:	130%;
    --fnt-body-line-s: 	1.3;    			                --fnt-body-line-l: 	1.5;

/* -------------------------------------------------------------------------------------------------------
    TEXT FIXED
   ------------------------------------------------------------------------------------------------------- */

    --fnt-button-size:  1.6rem;
    --fnt-meta-size:    1.2rem;
    --fnt-card-size:    1.1rem;

/* -------------------------------------------------------------------------------------------------------
    TEXT HEADINGS RESPONSIVE
   ------------------------------------------------------------------------------------------------------- */

    --fnt-head-size-h1: clamp(4.5rem, 4.5vw, 9rem);     --fnt-head-wght:	650;
    --fnt-head-size-h2: clamp(3rem, 3vw, 4rem);     --fnt-head-wght-h2:	750;

    --fnt-head-size-h3: 2.5rem;            		    --fnt-head-wght-h3:	700;
    --fnt-head-size-h4: 2.5rem;            		    --fnt-head-wght-h4:	600;
    --fnt-head-size-h5: 2rem;					    --fnt-head-wght-h5:	550;
    --fnt-head-size-h6: 1.2rem;					    --fnt-head-wght-h6:	600;

	--fnt-head-line: 1;
}
h5, h6 { --fnt-head-line: 1; }
/*
h1,
.s3xw-h1 {
    text-transform: capitalize;
}
h2, h3, h4, h5, h6,
[class*='s3xw-h']:not(.s3xw-h1) {
    text-transform: ;
}
*/
.txw-toc-h-wrapper {
    text-transform: capitalize;
}

/* -------------------------------------------------------------------------------------------------------
    POST META DETAILS
   ------------------------------------------------------------------------------------------------------- */

/*.txw-top-layout*/body {
    --mta-txt-trans: capitalize;
    --mta-sub-dvdr: "\00B7"; /* applied as content of ::after, use unicode for symbols */
    --mta-sub-arrw: "\203A"; /* applied as content of ::after, use unicode for symbols */
    --mta-cat-seperator: ',\00a0\00a0\00a0';
    --mta-tag-seperator: ',\00a0\00a0\00a0';
    --mta-ary-spac: 1ch;
}
/* -------------------------------------------------------------------------------------------------------
    BRAND COLORS (HSL)
   -------------------------------------------------------------------------------------------------------
    PRIMARY                 SECONDARY
    (brand 01)			    (brand 02)		    (brand 03)		    (brand 04)
   ------------------------------------------------------------------------------------------------------- */
body {
    --brand01-h:	 241;	--brand02-h:  15;	--brand03-h: 243;	--brand04-h: 240;
    --brand01-s: 	 56%;	--brand02-s:100%;	--brand03-s: 51%;	--brand04-s: 81%;
    --brand01-l: 	 30%;	--brand02-l: 38%;	--brand03-l:  8%;	--brand04-l: 77%;

    /* shade calculator settings */
    --brand-x:	     1.2; /* factor 30% increase or decrease lightness */
    --brand-ds:	     20%; /* saturation desaturated colors */	
    --brand-os:	    100%; /* saturation oversaturated colors */

    --clr-brand-01:		    hsl( var(--brand01-h), var(--brand01-s), var(--brand01-l) );
    --clr-brand-01-lgt:	    hsl( var(--brand01-h), var(--brand01-s), calc( var(--brand01-l)*var(--brand-x) ) );
    --clr-brand-01-lgtr:    hsl( var(--brand01-h), var(--brand01-s), calc( var(--brand01-l)*var(--brand-x)*var(--brand-x) ) );
    --clr-brand-01-drk:     hsl( var(--brand01-h), var(--brand01-s), calc( var(--brand01-l)*(2 - var(--brand-x)) ) );
    --clr-brand-01-drkr:    hsl( var(--brand01-h), var(--brand01-s), calc( var(--brand01-l)*(2 - var(--brand-x))*(2 - var(--brand-x)) ) );
    --clr-brand-01-osat:    hsl( var(--brand01-h), var(--brand-os), var(--brand01-l) );
    --clr-brand-01-dsat:    hsl( var(--brand01-h), var(--brand-ds), var(--brand01-l) );
    --clr-brand-01-trns-75: hsl( var(--brand01-h), var(--brand01-s), var(--brand01-l), .75 );
    --clr-brand-01-trns-50: hsl( var(--brand01-h), var(--brand01-s), var(--brand01-l), .5 );
    --clr-brand-01-trns-25: hsl( var(--brand01-h), var(--brand01-s), var(--brand01-l), .25 );
    --clr-brand-01-comp:	hsl( calc( 180 + var(--brand01-h) ), var(--brand01-s), var(--brand01-l) );

    --clr-brand-02:		    hsl( var(--brand02-h), var(--brand02-s), var(--brand02-l) );
    --clr-brand-02-lgt:	    hsl( var(--brand02-h), var(--brand02-s), calc( var(--brand02-l)*var(--brand-x) ) );
    --clr-brand-02-lgtr:	hsl( var(--brand02-h), var(--brand02-s), calc( var(--brand02-l)*var(--brand-x)*var(--brand-x) ) );
    --clr-brand-02-drk:	    hsl( var(--brand02-h), var(--brand02-s), calc( var(--brand02-l)*(2 - var(--brand-x)) ) );
    --clr-brand-02-drkr:	hsl( var(--brand02-h), var(--brand02-s), calc( var(--brand02-l)*(2 - var(--brand-x))*(2 - var(--brand-x)) ) );
    --clr-brand-02-osat:	hsl( var(--brand02-h), var(--brand-os), var(--brand02-l) );
    --clr-brand-02-dsat:	hsl( var(--brand02-h), var(--brand-ds), var(--brand02-l) );
    --clr-brand-02-trns-75: hsl( var(--brand02-h), var(--brand02-s), var(--brand02-l), .75 );
    --clr-brand-02-trns-50: hsl( var(--brand02-h), var(--brand02-s), var(--brand02-l), .5 );
    --clr-brand-02-trns-25: hsl( var(--brand02-h), var(--brand02-s), var(--brand02-l), .25 );
    --clr-brand-02-comp:	hsl( calc( 180 + var(--brand02-h) ), var(--brand02-s), var(--brand02-l) );

    --clr-brand-03:		    hsl( var(--brand03-h), var(--brand03-s), var(--brand03-l) );
    --clr-brand-03-lgt:	    hsl( var(--brand03-h), var(--brand03-s), calc( var(--brand03-l)*var(--brand-x) ) );
    --clr-brand-03-lgtr:	hsl( var(--brand03-h), var(--brand03-s), calc( var(--brand03-l)*var(--brand-x)*var(--brand-x) ) );
    --clr-brand-03-drk:	    hsl( var(--brand03-h), var(--brand03-s), calc( var(--brand03-l)*(2 - var(--brand-x)) ) );
    --clr-brand-03-drkr:	hsl( var(--brand03-h), var(--brand03-s), calc( var(--brand03-l)*(2 - var(--brand-x))*(2 - var(--brand-x)) ) );
    --clr-brand-03-osat:	hsl( var(--brand03-h), var(--brand-os), var(--brand03-l) );
    --clr-brand-03-dsat:	hsl( var(--brand03-h), var(--brand-ds), var(--brand03-l) );
    --clr-brand-03-trns-75: hsl( var(--brand03-h), var(--brand03-s), var(--brand03-l), .75 );
    --clr-brand-03-trns-50: hsl( var(--brand03-h), var(--brand03-s), var(--brand03-l), .5 );
    --clr-brand-03-trns-25: hsl( var(--brand03-h), var(--brand03-s), var(--brand03-l), .25 );
    --clr-brand-03-comp:	hsl( calc( 180 + var(--brand03-h) ), var(--brand03-s), var(--brand03-l) );

    --clr-brand-04:		    hsl( var(--brand04-h), var(--brand04-s), var(--brand04-l) );
    --clr-brand-04-lgt:	    hsl( var(--brand04-h), var(--brand04-s), calc( var(--brand04-l)*var(--brand-x) ) );
    --clr-brand-04-lgtr:	hsl( var(--brand04-h), var(--brand04-s), calc( var(--brand04-l)*var(--brand-x)*var(--brand-x) ) );
    --clr-brand-04-drk:	    hsl( var(--brand04-h), calc(var(--brand04-s) * 0.7), calc( var(--brand04-l)*(2 - var(--brand-x)) ) );
    --clr-brand-04-drkr:	hsl( var(--brand04-h), var(--brand04-s), calc( var(--brand04-l)*(2 - var(--brand-x))*(2 - var(--brand-x)) ) );
    --clr-brand-04-osat:	hsl( var(--brand04-h), var(--brand-os), var(--brand04-l) );
    --clr-brand-04-dsat:	hsl( var(--brand04-h), var(--brand-ds), var(--brand04-l) );
    --clr-brand-04-trns-75: hsl( var(--brand04-h), var(--brand04-s), var(--brand04-l), .75 );
    --clr-brand-04-trns-50: hsl( var(--brand04-h), var(--brand04-s), var(--brand04-l), .5 );
    --clr-brand-04-trns-25: hsl( var(--brand04-h), var(--brand04-s), var(--brand04-l), .25 );
    --clr-brand-04-comp:	hsl( calc( 180 + var(--brand04-h) ), var(--brand04-s), var(--brand04-l) );

/* -------------------------------------------------------------------------------------------------------
    SUPPORTIVE COLORS
   ------------------------------------------------------------------------------------------------------- */

    --clr-off-white: #f8f8fe;
    --clr-off-grey:  #7c7c7c;
    --clr-off-black: #434343;
}
/* -------------------------------------------------------------------------------------------------------
    DESIGN DETAILS
   ------------------------------------------------------------------------------------------------------- */
/*.txw-top-layout*/body {
    --shp-bdr-width:      2px;
    --shp-bdr-radius:     5px;

    --shp-box-shadow-def:               2px 2px 35px rgb(0 0 0 / 6%);
    --shp-flt-shadow-def:   drop-shadow(2px 2px 35px rgb(0 0 0 / 6%));
}
hero .txw-title span {
    color:                var(--clr-brand-04);
}