@charset "ISO-8859-1";

@font-face {
    font-family: 'Oswald';
   /*  src: url('../fonts/oswald/Oswald-VariableFont_wght.ttf') format('truetype'); */
    src: url('../fonts/oswald/Oswald-Regular.ttf') format('truetype');
    font-weight: 100 900; /* Full variable weight range */
    font-display: swap;
}

body {
    font-family: 'Oswald', sans-serif;
}

h1, h2, .blurb h3 {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
}


@media (min-width: 769px) {
	.fulllayout {
	    display: grid;
	    row-gap: 2rem;
	    padding: 1rem;
	    background-color: #f8f9fa;
	}
	
	.rowsection {
	    display: grid;
	    grid-template-columns: 1fr 1fr;
	    gap: 2rem;
	    background-color: #fff;
	    padding: 2rem;
	    border-radius: 12px;
	    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
	}
	
	.photosection img {
		width: 100%;
	    border-radius: 10px;
	    max-height: 375px;
	    object-fit: cover;
	}
	
	.blurb h2 {
	    margin-bottom: 0.5rem;
	}
	
	footer {
	    background-color: #eee;
	    padding: 1rem;
	    margin-top: 3rem;
	}
	
	
	/**********  three blurb section ***************/
	.three-blurbs {
	    display: grid;
	    grid-template-columns: 1fr 2fr;
	    gap: 2rem;
	    background-color: #fff;
	    padding: 2rem;
	    border-radius: 12px;
	    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}
	
	.blurbgrid {
	    display: grid;
	    grid-template-columns: repeat(3, 1fr);
	    gap: 1.5rem;
	}
	
	.blurb h3 {
	    margin-bottom: 0.5rem;
	}
	
	.blurb p {
	    font-size: 0.95rem;
	    line-height: 1.4;
	}
	
	/**************** stacked ***************************/
	
	.custom-layout {
	    display: grid;
	    grid-template-columns: 1fr 200px 1fr; /* Explicit width for image */
	    gap: 2rem;
	    align-items: center;
	    padding: 2rem;
	    background-color: #fff;
	    border-radius: 12px;
	    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
	}
	
	.custom-layout .leftblurb,
	.custom-layout .rightstack {
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	}
	
	.custom-layout .imagecenter {
	    display: flex;
	    align-items: center;
	    justify-content: center;
	}
	
	.custom-layout .imagecenter img {
	    max-width: 100%;
	    max-height: 200px;
	    border-radius: 10px;
	    object-fit: cover;
	}
	
	.top-logo-banner {
	  display: flex;
	  align-items: center;
	  justify-content: flex-start;
	  background-color: #ffffff;
	  padding: 2rem;
	  border-radius: 12px;
	  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
	}
	
	.logo-blurb {
	  display: flex;
	  align-items: center;
	  gap: 1.5rem;
	}
	
	.hero-logo {
	  height: 80px;
	  width: auto;
	  object-fit: contain;
	  border-radius: 8px;
	}
	
	.business-info h1 {
	  margin: 0;
	  font-size: 2rem;
	  font-weight: 700;
	}
	
	.business-info p {
	  margin: 0.25rem 0 0;
	  font-size: 1rem;
	  color: #444;
	}
	
/*	
	.rowsection img,
	.photosection img,
	.imagecenter img {
	    width: 100%;
	    height: auto;
	    max-height: 200px;
	    object-fit: contain;
	    display: block;
	    margin: 0 auto;
	}
*/

		.pan-container {
		  overflow: hidden;
		  width: 100%;
		  max-width: 100%;
		  height: 200px;
		  position: relative;
		}
		
		.pan-img {
		  height: 100%;
		  width: auto;
		  min-width: 150%; /* Ensures it's wider than the container */
		  position: relative;
		  animation: pan-left-right 12s infinite alternate ease-in-out;
		  object-fit: cover;
		  border-radius: 10px;
		}
		
		@keyframes pan-left-right {
		  0%   { transform: translateX(0); }
		  100% { transform: translateX(-25%); } /* Adjust this based on how much you want to pan */
		}

	
}






@media (max-width: 768px) {
    .rowsection,
    .three-blurbs,
    .custom-layout {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto;
        text-align: center;
    }

    .photosection img,
    .imagecenter img {
        max-width: 100%;
        height: auto;
        margin: 0 auto;
    }

    .blurbgrid {
        grid-template-columns: 1fr;
    }

    .rightstack {
        flex-direction: column;
        align-items: center;
    }

    .blurb,
    .leftblurb {
        padding: 0.5rem 0;
    }

    .custom-layout .imagecenter,
    .custom-layout .leftblurb,
    .custom-layout .rightstack {
        align-items: center;
    }
    
    
		.pan-container {
		  overflow: hidden;
		  width: 100%;
		  max-width: 100%;
		  height: 200px;
		  position: relative;
		}
		
		.pan-img {
		  height: 100%;
		  width: auto;
		  min-width: 150%; /* Ensures it's wider than the container */
		  position: relative;
		  animation: pan-left-right 12s infinite alternate ease-in-out;
		  object-fit: cover;
		  border-radius: 10px;
		}
		
		@keyframes pan-left-right {
		  0%   { transform: translateX(0); }
		  100% { transform: translateX(-25%); } /* Adjust this based on how much you want to pan */
		}
		
		.top-logo-banner {
		  flex-direction: column;
		  text-align: center;
		}
		
		.logo-blurb {
		  flex-direction: column;
		  align-items: center;
		}
		
		.hero-logo {
		  height: 60px;
		}
}

/*** top nav css ******/
.topnav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.75rem;
  padding:.5rem 0;
  flex-wrap:wrap; /* remove if you want one-line only */
}

.topnav .left,
.topnav .right,
.topnav .auth-group{
  display:flex;
  align-items:center;
  gap:.5rem;
}

.topnav .brand{ font-weight:600; }

.topnav .btn{
  display:inline-block;
  padding:.4rem .8rem;
  border-radius:.6rem;
  text-decoration:none;
  border:1px solid transparent; /* keep buttons from shifting */
  vertical-align:middle;
}

.logout-form{ margin:0; }
.logout-form .btn{ cursor:pointer; }


/* Call-to-Action row */
.cta-row { padding: 1rem 0; }
.cta-wrap { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.btn { display: inline-block; padding: .6rem 1rem; border-radius: .5rem; border: 1px solid #2a3b2f; text-decoration: none; }
.btn.primary { background: #2a3b2f; color: #fff; }
.btn.ghost { background: transparent; color: #2a3b2f; }
.muted { color: #6b7280; margin-right: .5rem; font-size: .9rem; }
@media (max-width: 680px) { .cta-wrap { justify-content: center; } }