/*
Theme Name: Future Doors 2025
Theme URI: http://example.com/twenty-twenty-one-child/
Description: Child theme for the Twenty Twenty-One theme
Author: Your Name
Author URI: http://example.com
Template: twentytwentyone
Version: 1.0.0
*/

/* Add your custom styles here */


/* Lgiht Tan from Logo #cfac6f #f0e8da*/
/* Dark Tan for Header and Footer #a67c52 NEW #742117 */
/* Dark at bottom of footer #261813  #33140a */

:root {
	/* Font Family */
	--global--font-primary: var(--font-headings, "Onest", sans-serif);
	--global--font-secondary: var(--font-base, "Onest", sans-serif);
}

html {
	background-color: #f0e8da;
	font-family: "Onest", sans-serif !important;
	color: #33140a;
}

body { background-color: #f0e8da !important; color: #33140a !important;} /* #e5d3ba very Light brown */

.titles {
	font-family: "Onest", sans-serif;
	font-weight: 400;
	font-size: 20px;
	text-transform: uppercase;
}

.singular .entry-title {
	line-height: 0.9em;
}

.singular .entry-header {
	margin-top: 0;
	margin-bottom: 10px !important;
	padding-bottom: 10px !important;
}

.entry-content, .entry-summary {
	font-family: "Onest", sans-serif !important;
}

.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
	outline: 2px solid transparent;
	text-decoration: none;
	text-decoration-skip-ink: none;
	background: transparent !important;
}

/* Main Style */

main {
	padding-top: 0 !important;
}

body {
	font-family: "Onest", sans-serif !important;
	font-weight: 200;
	font-style: normal;
}

h1.wp-block-post-title, h1.entry-title, header.entry-header .entry-title  {
	font-family: "Onest", sans-serif;
	font-weight: 900;
	color: #42210b;
	font-style: normal;
	text-transform: uppercase;
	font-size: clamp(32px, 3vw, 60px);
}
h2 {
	font-family: "Onest", sans-serif;
	font-weight: 900;
	color: #42210b;
	font-style: normal;
}

h3 {
	font-family: "Onest", sans-serif;
	font-weight: 500;
	font-style: normal;
}

/* MENU */
.menu-button-container {
	margin-top: 65px;
}


.menu-button-container{
	background-color: transparent !important;
}

#primary-menu-list li a {
	text-transform: uppercase;
	color: #eee;
	font-family: "Onest", sans-serif !important;
}

a.btnlight {
	padding: 2px 8px;
	text-transform: uppercase;
	background-color: #f0e8da;
	color: #42210d; 
	border-radius: 4px;
	text-decoration: none;
	margin: 4px 1em;
}

a.btnlight:hover {
	background-color: #f0e8da;
	color: #42210d;
	text-decoration: none;
	box-shadow: inset 0 0 4px 4px #cfac6f;
}



/* HOME PAGE STYLES */
.home article {
	margin-top: 0 !important;
}
.home .wp-block-group {
	padding-top: 2em !important;
	padding-bottom: 2em !important;
}

.home .wp-block-group .wp-block-cover {
	background-color: rgba(0,0,0, 0) !important;
}

.home main {
	padding-bottom: 0 !important;
}
.home h2.wp-block-heading {
	font-family: "Onest", sans-serif;
	font-weight: 900;
	color: #fff;
	font-style: normal;
}

.home .homeproducts{
	padding-top: 2em !important;
	padding-bottom: 2em !important;
}

/* Header Styles */
.headerstarter {
	background-color: #33140a;
	text-align: center;
	font-size: 15px;
	color: #fff;
	padding: 5px 3px 5px 3px;
	position: relative;
}
.headerstarter strong { border:1px solid #cfac6f; background-color: #f0e8da; color: #42210d; font-size: 125%; font-weight: 900; border-radius: 4px; padding: 0 2px 0 2px; box-shadow: inset 0 0 0 1px #cfac6f; transform: translateY(-50%);}

.headercontainer {
	background-color: #a85d32;
	border-bottom: 4px solid #cfac6f;
	width: 100%;
}

#masthead {
	padding-top: 0px !important;
	padding-bottom: 10px !important;
}


/* Page STYLES */

.newheader {
	border: 0 !important;
	padding-bottom: 0;
	margin-bottom: 0;
}


/* BUTTONS */

.btnproduct:link {
	position: relative;
	top: -30px;
	right: 10px;
	font-size: 0.8em;
	text-decoration: none;
	text-transform: uppercase;
	padding: 2px 8px;
	background-color: #42210b;
	border-radius: 4px;
	color: #eee;
	float: right;
}

.btnproduct:hover {
	opacity: 0.8;
	color: #fff;
	text-decoration: none;
}

.btnproduct:visited {
	opacity: 1;
	color: #ddd;
	text-decoration: none;
}


/* PRODUCT PAGE STYLE */

.productboxbig {
	display: grid;
	grid-template-columns: 0.5fr 1fr;
	grid-template-rows: auto;
	grid-auto-rows: 1fr;
	gap: 25px 25px;
	grid-auto-flow: row;
	justify-content: start;
	align-content: start;
	justify-items: start;
	align-items: start;
	grid-template-areas:
		"details photo";
}

.photo {justify-self:start;align-self:start;grid-area:photo;background-position:top center;background-repeat:no-repeat;background-size:contain;width:100%;height:100%;border:none !important;}

.details {
	justify-self: start;
	align-self: start;
	grid-area: details;
}


.productdetails {
	font-family: "Onest", sans-serif;
	font-weight: 400;
	display: grid;
	grid-template-columns: auto auto;
	grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto;
	gap: 5px 5px;
	grid-auto-flow: row;
	justify-content: start;
	align-content: start;
	justify-items: center;
	align-items: center;
	grid-template-areas:
		"modelname modelname"
		"sizeimage maxsize"
		"sizeimage to"
		"sizeimage minsize"
		"divider divider"
		"railprofiles railprofiles"
		"profiles profiles"
		"panelprofiles panelprofiles"
		"pprofiles pprofiles"
		"otherprofiles otherprofiles"
		"oprofiles oprofiles";
}
.productdetails .small, .Polyestercontainer .small {
	font-size: 14px;
}


.modelname {
	justify-self: start;
	align-self: center;
	grid-area: modelname;
	font-size: 36px;
	text-transform: uppercase;
	font-weight: 800;
	line-height: 1em;
	color: #42210b;
}
.modelname span { font-weight: 400; }

.sizeimage{grid-area:sizeimage;justify-self:start;align-self:start;}

.divider {
	justify-self: start;
	grid-area: divider;
}

.railprofiles {
	justify-self: start;
	grid-area: railprofiles;
}

.profiles {justify-self:start;grid-area:profiles;}

.maxsize { grid-area: maxsize; }


.to { grid-area: to; }

.minsize { grid-area: minsize; }

.panelprofiles {justify-self:start;grid-area:panelprofiles;}

.pprofiles {
  justify-self: start;
  grid-area: pprofiles;
}

.otherprofiles {
  justify-self: start;
  grid-area: otherprofiles;
}

.oprofiles {
	justify-self: start;
	grid-area: oprofiles;
}
.primary-navigation {
	margin-top: 30px !important;
	margin-right: 20px;
}

.menu-item-home-icon a {
	font-size: 0;
	display: inline-block;
	width: 24px;
	height: 24px;
	background-image: url('/i/home.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.menu-item-home-icon a::before {
	content: "";
	display: inline-block;
	width: 100%;
	height: 100%;
}

ol ol { margin-block-end: 2em;}

.homebtn { opacity: 0.8;}
.homebtn:hover { opacity: 1;}
/* make space between menu items 
#menu-footermenu1 .menu-item:nth-child(6) { margin-top: 1.45em; }*/

.productname { width: 100%; padding: 10px 0 15px 0; line-height: 0.85em; font-size: 18px; font-weight: 500; text-align: center; }
.tantitle{font-family:"Onest",sans-serif;font-weight:500;font-style:normal;font-size:20px;color:#a67c52;text-transform:uppercase;}

.backbtnbox { width: 100%; max-width: 1240px; margin: 0 auto -3em; text-align: right; }
.btn:link { color:#eee;padding:2px 10px;background-color:#42210b;border-radius:4px;text-decoration:none;text-transform:uppercase;font-size:14px;}
.btn:visited { color:#ddd;}
.btn:hover { color:#fff;opacity:0.7;}
.btn:active { color:#eee;background-color:#a85d32!important;}

.row-container { width: 100%; max-width:1024px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; gap: 20px 20px; }
ol.steps { font-size: 90%; margin-top: 0.75em; }
ol.steps li, ol.steps li ol li  { margin-top: 0.75em; line-height: 1.25em; }
ol.steps ol { list-style-type: lower-alpha; }
ol.steps ol li span { font-weight: 600; }


#field_9jv0r1, #field_9jv0r12 { border: none !important; border-radius: 8px !important; }


/* FOOTER GRID Styles */
.footercontainer {
	margin-block-start: 0 !important;
	background-color: #a85d32 !important;
	border-top: 4px solid #cfac6f;
}

.site-footer > .site-info {
	border: none !important;
}

footer {
	margin-block-start: 0 !important;
	padding-bottom: 0 !important;
}
footer .site-info {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.footerender {
	background-color: #33140a;
	text-align: center;
	font-size: 14px;
	color: #a85d32;
	padding: 5px;
}

ul#menu-footermenu1, ul#menu-footermenu2 {
	list-style: none;
	padding-left: 0;
}

.site-footer li a:link, .site-footer li a:visited {
	font-size: 16px !important;
	text-decoration: none;
	text-transform: uppercase;
	color: #eee !important;
}
.site-footer li a:hover {
	text-decoration: underline;
	color: #fff !important;
}

.footerender a:link, .footerender a:visited {
	text-decoration: none;
	color: #eee;
}

.footcontainer {
	display: grid; 
	grid-template-columns: 2fr 1.5fr 1.5fr 1.5fr 1.5fr; 
	grid-template-rows: 1fr;
	grid-template-areas: 
		"logo . menu1 menu2 address"; 
	height: auto; 
	width: 100%;
	margin: 2.5em auto 3em;
	font-family:"Onest",sans-serif; font-weight:400; font-style:normal; font-size:16px; text-transform:uppercase;
}
.logo { grid-area: logo; max-width: 250px; }
.menu1 { grid-area: menu1; max-width: 300px; }
.menu2 { grid-area: menu2; max-width: 300px; }
.address { grid-area: address; max-width: 300px; }
	.site-address {font-size: 16px; color: #eee; line-height: 0.75em !important;border-top: none;}
#menu-item-1743 {height: 28px;}

.phonebox {position: absolute; top: 9px; right: 10px; width: auto;}
.proudof {color: #fff; font-size: 13px; padding-top: 0.5em; border-top: 1px solid rgba(255,255,255, 0.5); margin-top: 0.5em; width: 95%;}
/*.heavyshadow { text-shadow: 1px 4px 16px rgba(66, 33, 13, 0.85), 1px 3px 8px rgba(66, 33, 13, 0.95), 1px 2px 4px rgba(66, 33, 13, 0.95), 1px 1px 2px rgba(66, 33, 13, 1);}*/
.heavyshadow { text-shadow:  1px 3px 8px rgba(66, 33, 13, 0.95), 1px 1px 2px rgba(66, 33, 13, 1);}



.newish2 { display: inline-block; background-color: rgba(125, 0, 0, 0.9); padding:0 5px; color: #fff; font-weight: 600; text-decoration: none; margin: 10px;}
.newish1 { background-color: rgba(175, 0, 0, 0.75); width: auto; padding: 2px 2px 3px; }
@media only screen and (max-width: 400px) {
	.site-branding .site-logo { width: 190px !important; margin-top: -10px; margin-bottom: 0; }
	#masthead { padding-top: 20px !important; }
	.site-main article	{ margin-top: 40px !important; }
	.menu-button-container { margin-top: 70px !important; }
.productdetails {
	font-family: "Onest", sans-serif;
	font-weight: 400;
	width: 100%;
	display: grid;
	grid-template-columns: auto ;
	grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto auto;
	gap: 5px 5px;
	grid-auto-flow: row;
	justify-content: start;
	align-content: start;
	justify-items: center;
	align-items: center;
	grid-template-areas:
		"modelname"
		"sizeimage"
		"maxsize"
		"to"
		"minsize"
		"divider"
		"railprofiles"
		"profiles"
		"panelprofiles"
		"pprofiles"
		"otherprofiles"
		"oprofiles";
	}

	.footcontainer {
	display: grid;
	grid-template-columns: 1fr 1fr; 
	grid-template-rows: 0.65fr 1fr 0.3fr; 
	grid-template-areas: 
		"logo logo"
		"menu1 menu2"
		"address address";
		height:auto;
		width: auto;
		margin: 2em auto 0 !important;
	}
	.logo { grid-area: logo; max-width: 100%; height: 150px; }
	.footcontainer .logo .site-logo { height: 130px; text-align: center; margin: 0; }
	.footcontainer .logo .site-logo .hlogo img { height: 120px; text-align: center; }
	.footcontainer .address { text-align: center; margin-top: 2em;}
	ul#menu-footermenu1, ul#menu-footermenu2 { padding-bottom: 10px; }
	.footer2-menu-class { margin-top: 14px;}
	ul#menu-footermenu1 li, ul#menu-footermenu2 li { margin-bottom: 15px; line-height: 16px; }
	.proudof {color: #fff; font-size: 12px; padding-top: 0.5em; border-top: 1px solid rgba(255,255,255, 0.5); margin-top: 0.5em; width: 95%;}
	.row-container { width: 100%; grid-template-columns: auto ; grid-template-rows: auto auto; gap: 20px 20px; }
	.test1 { height: auto; }
	.test2 { height: auto; }
	.headerstarter { height: 75px !important; padding-top: 38px; }
	.hidesm { display: none;}
	.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
		max-width: 1200px;
		width: calc(100% - 2.5rem);
	}
	.site-address { border-top: 1px solid rgba(255,255,255,0.5);padding-top: 1em;}
	.headerstarter {text-align: center !important; }
}

@media only screen and (max-width: 482px) {
	
	.primary-navigation {
		margin-top: 0 !important;
	}
	.primary-menu-container {
		background-image: url('/wp-content/themes/Futuredoors_2025/i/Future_Doors_header_Logo.svg');
		background-color: #a85d32 !important;
		background-repeat: no-repeat;
		background-position: 50% 5px;
		background-size: 85%;
	}
	.productdetails {
		max-width: 100%;
		width: 100% !important;
	}
	.productboxbig {
		max-width: 100%;
		width: 100% !important;
		display: grid;
		grid-template-columns: auto;
		grid-template-rows: auto auto;
		grid-auto-rows: auto;
		gap: 25px 25px;
		grid-auto-flow: column;
		justify-content: start;
		align-content: start;
		justify-items: start;
		align-items: start;
		grid-template-areas:
		"details"
		"photo";
		margin-left: 10px !important; margin-right: 10px !important; 
	}
	.row-container {  grid-template-columns: 1fr ; grid-template-rows: 1fr 1fr; }
}

.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
	max-width: 1240px !important;
	width: calc(100% - 8rem) !important;
}


@media only screen and (max-width: 1000px) {
	.hidesm { display: none;}
	.headerstarter {text-align: left;}
	#masthead { margin-left: 20px !important; margin-right: 20px !important; max-width: 100% !important; }
	#masthead .site-logo { width: 300px;}
}