/*
Theme Name: The Pasta Factory 2
Template: blankslate
Author: Child Theme Configurator

*/

body {
  margin: 0;
  /*font-family: 'Open Sans';*/
  font-family: "Anaheim", sans-serif;
  /*background: #1c1c1c;*/
  color: #333;
  font-size: 18px;
}


.wrapper {
  max-width: 1280px;
  margin: 0 auto;
}


.webheader {
  padding: 40px 20px;
  background-color: #FFF;
  color: #1E1E1E;
  height: auto;
}

/* new dedicated flex wrapper for header */
.header-wrapper {
  max-width: 1280px;        /* same constraint */
  margin: 0 auto;
  display: flex;
  align-items: center;      /* vertical centering */
  justify-content: space-between;
}

.weblogo {
  width: 300px;
  margin-right: 20px;
  flex-shrink: 0;
}

.weblogo img {
  height: 200px;
  display: block; /* Prevents extra space below image */
}

.webnavigation {
  flex: 1;
  text-align: right;
  font-family: "Amatic SC", sans-serif;
  font-size: 36px;
}

.webslider{
  min-height: calc(100vh - 240px) !important;

   display: flex;             /* enable flexbox */
 justify-content: center;   /* center horizontally */
 align-items: center;       /* center vertically */
 text-align: center;        /* center multiline text */
 /* optional styling */
 background: #444;
 color: white;


 background-size: cover;
 background-position: center;


 text-align: center;
 font-family: "Amatic SC", sans-serif;
 font-size: 78px;
 line-height: 1.1;

/* Needed for overlay */
 position: relative;
  z-index: 0; /* ensures overlay stays behind content */
  overflow: hidden; /* keeps overlay inside */

}

.webslidernew{
min-height:500px;

}


.webslidersub{
  min-height: 550px !important;

   display: flex;             /* enable flexbox */
 justify-content: center;   /* center horizontally */
 align-items: center;       /* center vertically */
 text-align: center;        /* center multiline text */
 /* optional styling */
 background: #444;
 color: white;


 background-size: cover;
 background-position: center;

/* Needed for overlay */
 position: relative;
  z-index: 0; /* ensures overlay stays behind content */
  overflow: hidden; /* keeps overlay inside */
}

/* Overlay */
.webslider::before, .webslidersub::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(30,30,30,0.5);
  z-index: 0;
}

.webslider *, .webslidersub * {
  position: relative;
  z-index: 1; /* keep text above overlay */
}




/* Smaller web slider */

.webslidersubsmall{
  min-height: 250px !important;
max-height:250px !important;
   display: flex;             /* enable flexbox */
 justify-content: center;   /* center horizontally */
 align-items: center;       /* center vertically */
 text-align: center;        /* center multiline text */
 /* optional styling */
 background: #444;
 color: white;


 background-size: cover;
 background-position: center;

/* Needed for overlay */
 position: relative;
  z-index: 0; /* ensures overlay stays behind content */
  overflow: hidden; /* keeps overlay inside */
}

/* Overlay */
.webslidersubsmall:before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(30,30,30,0.5);
  z-index: 0;
}

.webslidersubsmall * {
  position: relative;
  z-index: 1; /* keep text above overlay */
}




.container {
  display: flex;
  flex-wrap: wrap;           /* allow stacking on small screens */
  width: 100%;
  min-height: 350px;
}

.text, .text-right, .image {
  flex: 1 1 50%;             /* take equal width, shrink & grow equally */
  box-sizing: border-box;
}

.text {
  background-color: #D79F37;
  padding: 50px;
  display: flex;
  justify-content: center;
  align-items: flex-start;



}


.text-right{

  background-color: #D79F37;
  padding: 50px;
  display: flex;
justify-content: flex-start; /* 👈 change from center to flex-start */
  align-items: flex-start;

}

.text a, .text-right a{
  background-color:#333;
	color:#FFF;
	text-decoration:#FFF;
	border-radius:5px;
	padding:8px 25px;
	display:inline-block;
}

.text a.nobutton, .text-right a.nobutton{
	display: inline;
  padding: 0;
  background: none;
  color: inherit;
  border-radius: 0;
	text-decoration:underline;

}

.text-content {
  max-width: 800px;         /* limit text line length */
  width: 100%;
}

.image {
  /*background-image: url('https://images.unsplash.com/photo-1682687218147-9806132dc697?q=80&w=1375&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
  */background-size: cover;
  background-position: center;
  min-height: 300px;
}

.subpagemain{
	padding:40px 0;
}

.button a{
		background-color:#333;
	color:#FFF;
	text-decoration:#FFF;
	border-radius:5px;
	padding:8px 25px;
	display:inline-block;
}

a.button {
		background-color:#333;
	color:#FFF;
	text-decoration:#FFF;
	border-radius:5px;
	padding:8px 25px;
	display:inline-block;
}

.postmain{
	padding:40px 0;
}

.postmain h1, .postmain h2{
	font-family: "Anaheim", sans-serif;
}

.webfooter{
background-color: #FFF;
color:#1E1E1E;
text-align: center;
margin-top: 0px;
padding:40px 0;
font-size:12px;
}

.webfooter a{
  color:#1E1E1E;

}

.webfooter i{
  font-size:28px;

}

/* Gutenberg - columns */

.wp-block-column {
  padding-right: 20px;
}

.wp-block-column:last-child {
  padding-right: 0;
}


.clear{
  clear:both !important;
}

h1{
font-family: "Amatic SC", sans-serif;
font-size:62px;
	margin:0 0 0 0;
}

h2{
font-family: "Amatic SC", sans-serif;
font-size:52px;
	margin:0 0 0 0;
}

h3{
font-family: "Amatic SC", sans-serif;
font-size:36px;
margin:0 0 0 0;
}

p{
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
}

a{
	color:inherit;
}

strong{
  font-weight: 700;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea
{
    background-color: #fff;
    color: #000;
    width: 100%;
	border:1px solid #999;
	padding:10px;
}

input[type="submit"]
{
  background-color:#333;
	color:#FFF;
	text-decoration:#FFF;
	border-radius:5px;
	padding:14px 30px;
	display:inline-block;
	border:0;
	font-size:16px;
}



/* Responsive */
@media (max-width: 1290px) {
	.wrapper{
		padding:0 2%;
	}
}

/* Responsive: Stack on small screens */
@media (max-width: 900px) {


}


/* 📱 Responsive breakpoint */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }

  .text,
  .image {
    flex: none;
    width: 100%;
    min-height: 300px;
  }
}