/* =======================================================================================================
   3XW v2.02 // SETTINGS // Layout Values
   =======================================================================================================
    GLOBAL
   ------------------------------------------------------------------------------------------------------- */
:root {
  --scrollbar-w: 			0px;										/* srollbar width fallback, calculated with js in header (reusable part code block in header) */
  --real-vh: 				100svh;      								/* fallback for value calculated with js (reusable part code block in header) */
}	    																/* https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ */
/*.txw-top-layout*/body {
  --real-vw: 				calc( 100vw - var(--scrollbar-w) );
  --real-vw: 				100vw;				                        /* site width limits */
  //--scroll-offset:			calc( var(--header-h) + clamp(50px, 5vw, 100px) ); /* for on-page hashtag-links */
  //--scroll-offset:			100px;
  --scroll-margin-top:  calc( var(--header-h) + var(--local-spacing-ver) );

  --site-min-width:			280px;										/* minimal supported width on mobile */
  --site-max-width:			99999px;									/* boxed site max width */
  --page-max-width:			1200px;

  --pdd-top-layout:			calc(0px);										/* padding for top-layout/site: if 0, must be set to calc(0px) (needs unit, and calc required for minified css to prevent removal of unit */
  --pdd-top-layout-dbl:		calc( 2*var(--pdd-top-layout) );

  --site-width:				clamp( var(--site-min-width), var(--real-vw), var(--site-max-width) );
  --page-width:				clamp( calc( var(--site-min-width) - var(--pdd-top-layout-dbl) ),
                                   calc( var(--real-vw) - var(--pdd-top-layout-dbl) ),
      							   var(--page-max-width) );
  
/* content spacing */
  --local-spacing-hor:		clamp(2em, calc( 0.04*var(--page-width) ), 4em); /* horizontal gutter between clustered elements */
  --local-spacing-hor-s:	calc(0.5 * var(--local-spacing-hor));
  --local-spacing-hor-l:	calc(2.0 * var(--local-spacing-hor));

  --local-spacing-ver:		max( calc( 0.08*var(--page-width) ), var(--rt-single-line) ); /* responsive vertical spacing based on page width */
  --local-spacing-ver: 		var(--lcl-single-line);
  --local-spacing-ver-s:	calc(0.5 * var(--local-spacing-ver));
  --local-spacing-ver-l:	calc(3 * var(--local-spacing-ver));
}
/* -------------------------------------------------------------------------------------------------------
    SITE HEADER: SIZE
   ------------------------------------------------------------------------------------------------------- *
/*body header {
  	--logo-ratio-width: 	var(--logo-ratio-long);                         /* logo = landscape 
	--logo-ratio-height: 	var(--logo-ratio-short); }*/

body:is(.home) { --hdr-row-crumbs-h: 0px; }

/*.txw-top-layout*/
body {
  --hdr-row-pre-h:          0px;											/* height optional pre-header */
  --hdr-row-nav-h: 		    65px;											/* height row nav mobile/default */
  --hdr-row-crumbs-h: 	    30px;											/* height row breadcrumbs */
  --hdr-row-idx-h: 	        45px;											/* height row breadcrumbs */
  --header-h: calc(var(--hdr-row-nav-h) + var(--hdr-row-crumbs-h));         /* sum of the above */
  --header-aside-w: 	    var(--site-min-width);							/* width when header is sidebar */

  --hdr-logo-fr: 		    0.5;
  --hdr-shrink:             0.8;

  --hdr-ham-size:           30px;
  --hdr-bc-icon-size:       1.2em;
}
/* -------------------------------------------------------------------------------------------------------
    PAGE HEADER: HEGIHTS
   ------------------------------------------------------------------------------------------------------- */
/*.txw-top-layout*/body {
  --p-hdr-h-small:  50vh;
  --p-hdr-h-medium: 70vh;
  --p-hdr-h-large:  80vh;
  --p-hdr-h-full:   min( calc( var(--real-vh) - var(--hdr-row-crumbs-h) ),
                         calc(100vh - 50px) );
}
/* -------------------------------------------------------------------------------------------------------
    PAGE HEADER: WHICH HEGIHT WHERE
   ------------------------------------------------------------------------------------------------------- */
                  .txw-page-hdr { min-height: var(--p-hdr-h-large); } /* default */
body.page         .txw-page-hdr { min-height: var(--p-hdr-h-small); }
body.home         .txw-page-hdr { min-height: var(--p-hdr-h-large); }
body:is(.blog, .archive, .search )
                  .txw-page-hdr { min-height: var(--p-hdr-h-small); }
body.single-post  .txw-page-hdr { min-height: var(--p-hdr-h-medium); }

/* -------------------------------------------------------------------------------------------------------
    CONTENT LAYOUT
   ------------------------------------------------------------------------------------------------------- */
/*.txw-top-layout*/body {
  --measure: 				800px; 										/* max content width in any wider context */

  --not-aside-min-w:		60%;
  --sidebar-single-w:       calc(var(--page-max-width) * 0.2);			/* sidebar default width */
  --sidebar-twin-w:         calc(var(--page-max-width) * 0.18); 		/* twin sidebar width */

  --sidebar-widget-max-w: 	500px;

  --deflush-amount-hor: 	calc(0.5*var(--local-spacing-hor));
  --deflush-amount-ver: 	var(--rt-single-line);

  --flip-multi-breakpoint:	calc(var(--page-max-width) * 0.80 );		/* switcher breakppoint = container width */
  --flip-duo-breakpoint: 	calc(var(--page-max-width) * 0.60 );
  --flip-quartet-min-w:		calc(var(--site-min-width) * 0.80 );

  --flip-nested-breakpoint: calc(var(--page-max-width) * 0.30 );

  --grid-cl-min-w: 38ch;

  --tile-size: 				400px;
  --tile-padding: 			20%;

  --sec-divider-ar-value: 15;
  --sec-divider-min-width: 1100px;
  --sec-divider-max-width: 1400px;
  --sec-divider-height: calc( var(--page-width) / var(--sec-divider-ar-value) );
  --sec-divider-max-height: calc( max( min(var(--page-width),var(--sec-divider-max-width)), var(--sec-divider-min-width) ) / var(--sec-divider-ar-value) );
}
.txw-center {
  --flip-multi-breakpoint:	calc(var(--measure) * 0.80 );
  --flip-duo-breakpoint: 	calc(var(--measure) * 0.60 );
}

/* -------------------------------------------------------------------------------------------------------
    PADDING
   ------------------------------------------------------------------------------------------------------- */
.txw-brick-outr {
  --brick-padding: clamp(	var(--pdd-inline-global-min),
  							8%,
  							var(--pdd-inline-global-max)); }
/*.txw-top-layout*/body, section, blockquote,
                          .txw-showcase  > *,
*[class*='txw-box'] > *,  .txw-img-frame > *,
.txw-post-card-layered .txw-post-card-info {							 /* apply to all padded boxes to recalculate % based on its own parent */

  --pdd-inline-global-min:  1.6rem; /* 16px */
  --pdd-inline-flex:        2.5%;
  --pdd-inline-global-max:  5.6rem;	/* 56px */
  
  --pdd-block-global-min:	7.2rem; /* 72px */
  --pdd-block-flex:         11.25%;
  --pdd-block-global-max:   14.4rem;/* 144px */

  --pdd-inline-responsive:	clamp(	var(--pdd-inline-global-min),
									var(--pdd-inline-flex),
									var(--pdd-inline-global-max) );

  --pdd-block-responsive:	clamp(	var(--pdd-block-global-min),
	    							var(--pdd-block-flex),
									var(--pdd-block-global-max) ); }

main *[class*='txw-box'] > *,
main .txw-img-frame > *, .txw-showcase > *,
.txw-post-card-layered .txw-post-card-info {                                /* any boxes */
  --pdd-inline-global-min: 4.0rem; /* 40px */
  --pdd-inline-flex: 5%;  										            /* - increased inline padding */
}
*:is(.txw-s-line-flip, .txw-m-line-wrap) *[class*='txw-box'] > *,           /* grouped boxes */
blockquote {                                                                /* quotes */
  --pdd-block-flex:		 7%;  										        /* - decreased block padding */
}
/* -------------------------------------------------------------------------------------------------------
    SITE FOOTER
   ------------------------------------------------------------------------------------------------------- */
/*.txw-top-layout*/body {
    --ftr-clmn-min-w: 20ch;
    --ftr-clmn-max-w: 30ch;
    --ftr-credits-h: 90px;
}
footer { background-color: var(--clr-bckg-01); }
footer section { color: var(--clr-text-faded); }

footer .txw-box-full-w > section {
  max-width: var(--page-max-width);
}
footer .txw-footer-sec-links,
footer .txw-footer-sec-content,
footer .txw-footer-sec-columns,
footer .txw-footer-sec-credits {
    font-size: var(--fnt-body-size-s);
    font-weight: 300;
}
footer .txw-logo-wrapper {
  max-width: 100px;
}