@charset "UTF-8";
/*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=* 
 Theme Name:        TKTR
 Version:           1.0.0
 Description:       The Knot Tying Rabbit custom theme 
 Author: Scott Hammel, Primal Apparatus Workshop, LLC
 Author URI: https://primalapparatus.com
 License: The Artistic License 2.0.  See accompanying LICENSE file.
 License URI: http://www.perlfoundation.org/attachment/legal/artistic-2_0.txt
 
 Copyright: (c) 2021, Primal Apparatus Workshop      
                                                     
                                                     
 
                        A A  
                       aa aa
                      ppp ppp         Primal
                  A  pppp pppp  A 
                 aa  pppp pppp  aa 
                pPPp  PpP PpP  pPPp   Apparatus
                pppp           pppp 
                PppP  wwWWWww  PppP 
                     wwwwwwwww        Workshop
                   wwwwwwWwwwwww
                  wwwwwwwwwwwwwww   
                   WwwwW   WwwwW  
                                                     
                                                     
                               
*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*/

/*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=* 
 Variables 
 *=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*/
:root 
{ 
  
 /* Global */
 --global--spacing: 20px;
 --global--spacing-horizontal: var(--global--spacing);
 --global--spacing-vertical: var(--global--spacing);
 --global--padding: var(--global--spacing);
 --global--base--font-size: 10pt; /* font size on the root html element */
 --global--font-size: 1.5rem; /* rem => size relative to font size of root html element */
 --global--mobile--font-size:1.2rem; 
 --global--font: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
 --global--line-height: 1.7;
 --global--logo--max-width: 300px;
 --global--logo--max-width--mobile: 200px;
 /* note main breakpoint is 622px.  there are 621px's specified.  secondary is 822px. */
 --global--post--line-height: 26px;
 
 /* standard light mode */
 --global--color-primary-light: #000000;
 --global--color-background-light: #fafafa;

 /* standard dark mode (not implemented yet)*/
 --global--color-primary-dark: #000000;
 --global--color-background-dark: #fafafa;
 
 /* until dark mode is implemented, do this: */
 --global--color-primary: var(--global--color-primary-light);
 --global--color-background: var(--global--color-background-light);
 
  
}

/*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=* 
 Variables for responsive-ness.  I just snagged these from elsewhere as a starter
 *=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*/
:root {
	--responsive--spacing-horizontal: calc(2 * var(--global--spacing-horizontal) * 0.6);
	--responsive--aligndefault-width: calc(100vw - var(--responsive--spacing-horizontal));
	/*--responsive--alignwide-width: calc(100vw - var(--responsive--spacing-horizontal));*/
	--responsive--alignwide-width: 100%;
	--responsive--alignfull-width: 100%;
	--responsive--alignright-margin: var(--global--spacing-horizontal);
	--responsive--alignleft-margin: var(--global--spacing-horizontal);
}

@media only screen and (min-width: 795px) {

	:root {
		--responsive--aligndefault-width: min(calc(100vw - 4 * var(--global--spacing-horizontal)), 707px);
		/*--responsive--alignwide-width: calc(100vw - 4 * var(--global--spacing-horizontal));*/
		--responsive--alignwide-width: 100%;
		--responsive--alignright-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width)));
		--responsive--alignleft-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width)));
	}
}
@media only screen and (min-width: 822px) {

	:root {
		--responsive--aligndefault-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 707px);
		--responsive--alignwide-width: 100%;
		/*--responsive--alignwide-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 1240px);*/
	}
}

/** NOTE: some of the following I picked up from other themes **/
/*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=* 
 Reset these, so funky things don't happen unexpectedly 
 *=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*/
html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
form,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 
{
	padding: 0;
	margin: 0;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}
/*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*
 Apply generic border-box to all elements.
 See:
 https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
 *=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*/
html {

	/* Apply border-box across the entire page. */
	box-sizing: border-box;
	font-family: var(--global--font);
	line-height: var(--global--line-height);
	font-size: var(--global--base--font-size);
}

/*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*
 Relax the definition a bit, to allow components to override it manually.
 *=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*/
*,
*::before,
*::after {
	box-sizing: inherit;
}

body {
	font-size: var(--global--font-size);
	font-weight: normal;
	color: var(--global--color-primary);
	text-align: left;
	background-color: var(--global--color-background);
}
@media only screen and (max-width: 482px)
{
	body
	{
		font-size: var(--global--mobile--font-size);
	}
}
/*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=* 
 Tinker around with sizes/margins/etc. for responsive behavior
 *=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*/
.post-thumbnail,
.entry-content .wp-audio-shortcode,
.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce),
*[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce),
.default-max-width 
{
	max-width: var(--responsive--aligndefault-width);
	margin-left: auto;
	margin-right: auto;
}

.widget-area,
.pagination,
.comments-pagination,
.post-navigation,
.site-footer,
.site-header,
.alignwide,
.wide-max-width 
{
	max-width: var(--responsive--alignwide-width);
	margin-left: auto;
	margin-right: auto;
	position:relative;
}

.alignfull,
.wp-block-group .wp-block-group__inner-container > *.alignfull,
.full-max-width 
{
	max-width: var(--responsive--alignfull-width);
	width: var(--responsive--alignfull-width);
	margin-left: auto;
	margin-right: auto;
}

@media only screen and (min-width: 795px) 
{

	.alignfull,
	.full-max-width
	 {
		max-width: var(--responsive--alignfull-width);
		width: auto;
		margin-left: auto;
		margin-right: auto;
	}
}
/*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=* 
 Some content styles
 *=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*/
.entry-header .post-thumbnail,
.singular .post-thumbnail,
.alignfull [class*=inner-container] > .alignwide,
.alignwide [class*=inner-container] > .alignwide 
{
	margin-left: auto;
	margin-right: auto;
	width: var(--responsive--alignwide-width);
	max-width: var(--responsive--alignfull-width);
}
.entry-header h2
{
	line-height: var(--global--post--line-height);

}
.entry-header em
{
	font-size: 0.75em;
}
a
{
	color:var(--global--color-primary);
	text-decoration:none;
}
a:hover
{
	text-decoration:underline overline;
	text-decoration-style:solid;	
}
li.current_page_item a
{
	text-decoration:underline;
	text-decoration-style:double;
}

.entry-content p
{
	margin-bottom:1.25em;
}
.entry-content p a, footer a
{
	text-decoration:underline;
}
.entry-content p a:hover, footer a:hover
{
	text-decoration:underline;
	text-decoration-style:dashed;	
}
@media only screen and (min-width: 795px) 
{

	.entry-content > .alignleft 
	{
		margin-left: var(--responsive--alignleft-margin);
		margin-right: var(--global--spacing-horizontal);
	}
}
@media only screen and (min-width: 795px) 
{

	.entry-content > .alignright 
	{
		margin-left: var(--global--spacing-horizontal);
		margin-right: var(--responsive--alignright-margin);
	}
}
.tktr-card-dropshadow
{
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	margin-bottom:5px;
	
}
div.tktr-card-dropshadow:hover
{
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2) inset, 0 6px 20px 0 rgba(0, 0, 0, 0.19) inset;
	
}
/* this next one is to remove WordPress' insistence on supplying 
   both height and width attributes on images in content, thus destroying
   the aspect ratio */
.tktr-content-image > img
{
	height:auto;
}
.tktr-textalign-center > figure > figcaption
{
	text-align:center;
}
.tktr-sub-figcaption
{
	font-size:1.2rem;
	padding-bottom:15px;
}
.tktr-sub-figcaption a
{
	text-decoration:none;
}
@media only screen and (max-width:482px)
{
	.tktr-sub-figcaption
	{
		font-size:1.0rem;
		margin-bottom:10px;
	}
}
.entry-content > ul, .entry-content > ol
{
	padding-left:21px;
}

@media only screen and (min-width: 795px)
{
	.entry-content > ul, .entry-content > ol
	{
		padding-left:33px;
	}	
}

.tktr-fp-separator
{
	width:10vw;
	margin-top: 15px;
	margin-bottom:15px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}
 
.tktr-footnotes-seperator
{
	margin: 0px auto;
    max-width: var(--responsive--aligndefault-width);
	
} 
/*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=* 
 Order/contact form
 *=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*/
 /*** simple human test -- visual cue ***/
.sihute-cue-icon
{
  height:21px;
  width:21px;
  /*border:1px solid;*/
  vertical-align:middle;
  display:inline-block;
  
}
.sihute-cue-icon span
{
  font-size:21px;
}
#sihute-ci-lock
{
  color:red;
}
#sihute-ci-unlock
{
  color:green;
}
/*** end simple human test styling ***/
.tktr-colors-grid
{
	display:grid;
	/* 3 cols, but labels and checkbox for each, so six */
	grid-template-columns: max-content max-content max-content max-content max-content max-content;
}
.tktr-colors-grid > label
{
	margin-right:9px;
}
.tktr-postcolors-grid
{
	display:grid;
	/* 3 cols, but labels and checkbox for each, so six */
	grid-template-columns: max-content max-content max-content max-content max-content max-content max-content max-content max-content max-content;
}
.tktr-postcolors-grid > label
{
	margin-right:9px;
}
@media only screen and (max-width: 482px)
{
	.tktr-colors-grid
	{
		display:grid;
		/* 3 cols, but labels and checkbox for each, so six */
		grid-template-columns: max-content max-content max-content max-content max-content max-content;
	}
	.tktr-colors-grid > label
	{
		margin-right:9px;
	}
	.tktr-postcolors-grid
	{
		display:grid;
		/* 3 cols, but labels and checkbox for each, so six */
		grid-template-columns: max-content max-content max-content max-content max-content max-content max-content max-content;
	}
	.tktr-postcolors-grid > label
	{
		margin-right:9px;
	}	
}
.tktr-beads-grid
{
	display:grid;
	/* 3 cols, but labels and checkbox for each, so six */
	grid-template-columns: max-content max-content max-content max-content max-content max-content;
}
.tktr-beads-grid > label
{
	margin-right:9px;
}
.tktr-postbeads-grid
{
	display:grid;
	/* 3 cols, but labels and checkbox for each, so six */
	grid-template-columns: max-content max-content max-content max-content max-content max-content max-content max-content max-content max-content;
}
.tktr-postbeads-grid > label
{
	margin-right:9px;
}
#txtmessage
{
	width:300px;
}
.formTitleLastMsg
{
	display:block;
	font-weight:bold;
}
.orderFormMsg
{
	display:block;
	font-style:italic;	
	margin-bottom: 1em;
}
.orderFormMsg a
{
	text-decoration:underline;
	color:blue;
}
.orderFormMsg a:hover
{
	text-decoration:underline overline;
	color:blue;
}
@media only screen and (max-width: 482px)
{
	.tktr-beads-grid
	{
		display:grid;
		/* 3 cols, but labels and checkbox for each, so six */
		grid-template-columns: max-content max-content max-content max-content max-content max-content;
	}
	.tktr-beads-grid > label
	{
		margin-right:9px;
	}
	.tktr-postbeads-grid
	{
		display:grid;
		/* 3 cols, but labels and checkbox for each, so six */
		grid-template-columns: max-content max-content max-content max-content max-content max-content max-content max-content;
	}
	.tktr-postbeads-grid > label
	{
		margin-right:9px;
	}	
}
/*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=* 
 Header ... logos, etc.
 *=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*/
 /*** containment. In this case, desktop-size first. ***/


@media only screen and (max-width: 482px)
{
	.tktr-small-font
	{
		font-size:0.8em;
	}
}
@media only screen and (orientation: portrait)
{
	.tktrhat-bannerimage
	{
	  grid-area:tktrhatbanner;
	  position:relative;
	  background-image:url('assets/banner-image.jpg');
	  background-size: auto 100%;  /* width height */
	  background-repeat: no-repeat;
	  background-position:center;
	  height:25vw; /* this is the ratio of the banner image h/w => 420/1680=0.25. Any multiple of this will work */
	  width:100%;
	}

	.tktr-pagetitle-text
	{
		font-size: 4vw;
		font-weight:bold;
		color: var(--global--color-background);
		z-index:499;
	}  
}
@media only screen and (orientation: landscape)
{
	.tktrhat-bannerimage
	{
	  grid-area:tktrhatbanner;
	  position:relative;
	  background-image:url('assets/banner-image.jpg');
	  background-size: auto 100%;  /* width height */
	  background-repeat: no-repeat;
	  background-position:center;
      height:15vw; /* 0.6 * h/w.  This provides more content real-estate when the display is in landscape mode */
      width:100%;
	}

	.tktr-pagetitle-text
	{
    	font-size:2.4vw; /* this is 0.6 times the "normal" portrait-orientation size. Since the vertical space is less in the banner, the font size is reduced so it doesn't overflow or get clipped */
		font-weight:bold;
		color: var(--global--color-background);
		z-index:499;
	}  
}
.tktr-pagetitle
{
  margin: 0px;
  /*top:50%;*/
  bottom:10px;
  left:50%;
  transform:translate(-50%, 0%); /*-50%);*/
  position:absolute;
  text-align:center;	
}

.tktrhat-nav-grid-container
{
	display:grid;
	grid-template-areas:
	  'tktrhattitle tktrhatnav';
	grid-template-columns: max-content auto;
	grid-gap: 7px;
	background-color: var(--global--color-background);
	padding: 8px;
	padding-top:2px;		
	opacity:0.8;
	position:relative;
	z-index:500;
	width: 100%;
	line-height:1.4;
}
.tktrhat-sitetitle
{

	display:inline-block;
	grid-area: tktrhattitle;
}
.tktrhat-primarynav
{
	text-align:right;
	display:inline-block;
	grid-area: tktrhatnav;

} 
.tktrhead-grid-container
{
	display:grid;
	grid-template-areas:
	  'tktrhatbanner';
	grid-template-columns: 100%;
	grid-gap: 0px;
	background-color: var(--global--color-background);
	width:100%;
} 
.tktrhead-grid-container-backpage
{
	display:grid;
	grid-template-areas:
	  'tktrhatbanner';
	grid-template-columns: 100%;
	grid-gap: 0px;
	background-color: var(--global--color-background);
	width:100%;
} 


    /*** menu.  Mobile first this time.  ***/
.show-menu-button
{
	display:block;
	position:absolute;
	/*bottom:50px;*/
	top:5px;
	right:0px;
	height:35px;
	width:30px;
	background-color:var(--global--color-background);
	border: 2px solid;
	border-color:var(--global--color-primary);
	padding:0;
	margin-bottom:20px;
	z-index:501;
	
}
.show-menu-button-backpage
{
	top:0px;
	bottom:auto;
	margin-bottom:0;
	margin-top:12px;
}
#tktrmenuburger span.tktrburgerfixins
{
	display: block;
	margin-top:2px;
	margin-left:2px;
	height:15%;
	width:90%;
	background: var(--global--color-primary);
	border-radius: 9px;	
}
#tktrmenuburger span.tktrburgerlabel
{
	display: block;
	margin:0px;
	height:20%;
	width:100%;
	font-size:8px;
	text-align:center;
}
#primary-mobile-menu-toggle /* the invisible checkbox */
{
	display:none;
}
.primary-nav
{
	visibility:hidden;
}
.primary-menu-container
{
	/*visibility: visible;*/
	opacity: 1.0;
	padding:0px;
	position:relative;
	width:100%;
	text-align:left;
	
	top:0px;
	bottom:0px;
	right:0px;
	left:0px;
	
	background-color:var(--global--color-background);
	/*
	transition: all 0.15s ease-in-out;
	transform: translateY(var(--global--spacing-vertical));
	*/
}
#primary-mobile-menu-toggle:checked ~ .primary-nav {visibility:visible;}

@media only screen and (max-width: 794px)
{
	.primary-nav
	{
		visibility:hidden;
		
		top:0;
		left:0;
		right:0px;
		bottom:0px;
		
		position:absolute;
	}
	.primary-menu-container
	{
		/*height: 100vh;*/
		z-index: 500;
		overflow-x: hidden;
		overflow-y: auto;
		border: 2px solid black;
		visibility:inherit;
	}
}

/* desktop size */
@media only screen and (min-width: 795px)  
{

	.show-menu-button
	{
		display:none;
	}

	.primary-nav
	{
		visibility:visible;
	}
	.primary-menu-container 
	{
		/*visibility: visible;*/
		opacity: 1;
		position: relative;
		padding: 0;
		background-color: transparent;
		overflow: initial;
		transform: none;
		top:auto;
		left:auto;
		right:auto;
		bottom:auto;

	}

}
.primary-menu-container .menu-wrapper
{
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
	list-style: none;
	/*margin: 0;*/
	max-width: none;
	/*padding-left: 0;*/
	position: relative;
}

.primary-menu-container .menu-wrapper
{
	/*padding-bottom: 100px;*/
}

.primary-menu-container .menu-wrapper ul
{
	padding-left: 0;
}

.primary-menu-container .menu-wrapper li
{
	display: block;
	position: relative;
	width: 100%;
	padding-left: var(--global--padding);
}

@media only screen and (min-width: 795px)
{

	.primary-menu-container .menu-wrapper li
	{
		margin: 0;
		width: inherit;
	}

	.primary-menu-container .menu-wrapper li:last-child
	{
		margin-right: 0;
	}
}
/*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=* 
 Footer
 *=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*/
.sep-bar
{
	width:80vw;
	margin-left:auto;
	margin-right:auto;
	border-bottom: 1px solid black;
	display:block;
	padding-top:11px;
	margin-bottom:8px;
} 
.foot-pads
{
	display:flex;
	flex-wrap:wrap;
	min-width:100%;
	
}
.foot-pads > section,
.foot-pad
{
	flex:50%;
	padding:0;
}
.foot-left-pad, .foot-pads > section:first-child
{
	text-align:left;
}
.foot-right-pad, .foot-pads > section:last-child
{
	text-align:right;
}
.foot-pads section .widget-title
{
	font-size:1.1em;
	font-weight:bold;
}
@media screen and (max-width: 621px)
{
	.foot-pads section .widget-title
	{
		display:none;
	}
	.foot-pad, .foot-pads > section
	{
		flex:100%;
	}
	.foot-left-pad,.foot-right-pad, .foot-pads > section, 
	.foot-pads > section:first-child, .foot-pads > section:last-child
	{
		text-align:center;
	}
}
#tktrrights
{
	width:100%;
	text-align:right;
	margin-bottom:20px;
	margin-top:10px;
	font-size:1rem;
}
.site-footer
{
	padding-left:8px;
	padding-right:8px;	
}