/*updated 11/01/2026*/
/*WC3 validated on 11/11/25*/

/* =====================================================
   1. DESIGN TOKENS
   Colors, fonts, and reusable variables
   ===================================================== */

/* Local Fonts */
@font-face {
    font-family: 'Roboto';
    src: url('/fonts/Roboto-VariableFont_wdth,wght.woff2') format('woff2');
    font-style: normal;
    font-weight: 450;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('/fonts/PlayfairDisplay-VariableFont_wght.woff2') format('woff2');
    font-style: normal;
    font-weight: 750;
    font-display: swap;
}

:root {
    /* Brand colors */
    --color-forest: #2D5016;
    --color-green-dark: #285444;
    --color-sage: #5F7A3A;
    --color-sage-hover: #5D8165;

    /* Gold accents */
    --color-gold: #EF9F27;
    --color-gold-light: #E8C97A;
    --color-gold-soft: #F7E3B0;
    --color-gold-muted: #DFCD80;

    /* Backgrounds */
    --color-bg-page: #DFE4D7;
    --color-bg-cream: #F4F0E6;
    --color-bg-mint: #EAF3DE;

    /* Text colors */
    --color-text-forest: #C0DD97;
    --color-text-mint: #27500A;
    --color-text-white: #FFFFFF;
    --color-text-white-transparent: #ffffff9e;

    /* Typography */
    --font-body: 'Roboto', sans-serif;
    --font-heading: 'Playfair Display', serif;
}

/* =====================================================
   2. GLOBAL STYLES
   Box sizing, body, typography, links, images
   ===================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}
html{
	margin:0;
	padding:0;	
}

body {
	width: min(95%, 100rem);
	margin-inline: auto;
	font-family:var(--font-body);
	font-weight:400;
	font-size:20px;
	line-height:1.6;
	background-color:var(--color-bg-page)	
}

h1,
h2,
h3,
p,
a{
	margin-top:0;
}

h1,
h2,
h3,
h4{
	font-family: var(--font-heading);
	font-weight: 900;
	line-height:1;
}

h1 {
	font-size:2.2rem;
	margin-bottom: 0.5em;
}

h2 {
	font-size:1.85rem;
}

h3 {
	font-size:1.50rem;
	font-weight:bold;
}

h2,
h3,
p {
    margin-bottom: 0.75em;
}

a {
    margin-bottom: 0;
}

ul {
	list-style-position: inside;
	text-align:left;		
}

ul li {
	list-style:disc;
	text-align:left;
}

button {
	display:inline-block;
	padding:1.0em 3.8em;
	margin:0.5em 0.3em 0.3em 0;
	border-radius:2em;
	box-sizing: border-box;
	text-decoration:none;
	font-family:'Roboto',sans-serif;
	font-size: 1.08rem;
	font-weight:300;
	font-style:italic;
	color:var(--color-text-forest);
	background-color:var(--color-forest);
	border-color:var(--color-gold);
	text-align:center;
	transition: all 0.2s;
}

button:hover {
	background-color:var(--color-sage-hover);
}

img{
	display: block;
}

header, nav, address, main, section, article {
	padding: 1rem 1rem;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
	margin-bottom: 1rem;
}
.text-center {
	text-align: center;
}

.bg-image {
	background-repeat: no-repeat; 
	background-size: cover; 
	padding-top:10px;
	padding-bottom:10px;
	color:var(--color-green-dark);
}

.badge {
	display: flex;
	justify-content: flex-end;
	margin-top: 0;
	margin-bottom:0;
	margin-right:1rem;
}

/* =====================================================
   3. SHARED LAYOUTS
   Containers, split layouts, alignment utilities
   ===================================================== */		
	
/*text wrapping around a picture styling code*/
.text-wrap-container {
	display:block;
	.text-wrap--image {
		float: right;
		width: 100%;
		max-width: 40em;
		padding-left:17px;	
	}
}
/*end text wrap section*/

.container--narrow {
	max-width: 50rem;
}

.role {
	text-align: left;
	padding-left: 1rem;
}

.title {
	display: flex;
}

#home h1 {
	margin-bottom:0.5em;
}

#services,#about, #testing, #contact, #resources, #title, #details, #blog, main, address, header, section, article, footer{
	border-radius:10px;
	padding:16px;
}

#about .split h2 {
	text-align:center;
}

#about .split {
	text-align:center;
	
}
#newsletter h2 a {
    color: #FFFFFF;
}

#newsletter h2 a:visited,
#newsletter h2 a:active {
    color: #FFFFFF;
}
#newsletter h2 a:hover {
	color: var(--color-gold-light);
}
#newsletter p {
	color: var(--color-text-white-transparent);
}
/* =====================================================
   4. NAVIGATION BAR
   Navigation links, dropdown menu
    Navigation layout
	Mobile: vertically stacked
	Desktop: horizontal navigation
   ===================================================== */

/* Base navigation layout — mobile */
nav .nav-links {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Mobile navigation alignment */
@media (max-width: 39.999em) {
    nav .nav-links > div {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Desktop navigation */
@media (min-width: 40em) {

    /* Main navigation row */
    nav .nav-links {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 1em;
    }

    /* Standard navigation items */
    nav .nav-links > * {
        flex: 0 1 auto;
        min-width: 0;
        margin-left: 0;
        display: flex;
        align-items: flex-start;
        justify-content: center;
    }

    /* Testing Services dropdown */
    nav .nav-links > .dropdown {
        flex: 0 0 auto;
        width: auto;
        display: block;
        align-items: flex-start;
        justify-content: center;
    }

    nav .nav-links > .dropdown .dropbtn {
        display: block;
        line-height: inherit;
        text-align: center;
    }

    /* Remove unnecessary link spacing */
    nav .nav-links > div > a {
        margin-bottom: 0;
    }
}

.dropdown {
    position: relative;
    display: block;
    width: 100%;
    cursor: pointer;
    text-align: center;
}

.dropbtn {
    display: block;
    width: 100%;
    text-align: center;
    cursor: pointer;
    font-weight: bold;
}

/* Dropdown menu */
.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    min-width: 100%;
    box-sizing: border-box;
    z-index: 1000;
	background-color: var(--color-forest);
    
}

/* Show when clicked (JavaScript) */
.dropdown-content.show {
    display: block;
}

/* Dropdown links */
.dropdown-content a {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    text-decoration: none;
    text-align: center;
    color: var(--color-text-forest);
    border-bottom: 1px solid rgba(255,255,255,0.15);
}

.dropdown-content a:last-child {
    border-bottom: none;
}

.dropdown-content a:hover,
.dropdown-content a:focus {
    background-color: var(--color-sage-hover);
    color: var(--color-text-white);
}

/* Dropdown arrow */
.dropbtn::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 8px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid currentColor;
    transform: rotate(0deg);
    transition: transform 0.2s ease;
}

/* Rotate caret only when dropdown is open */
.dropbtn[aria-expanded="true"]::before {
    transform: rotate(180deg);
}

/* =====================================================
   5. PAGE COMPONENTS
   Profile, testing, resources, contact
   ===================================================== */
.roundphoto {
	border-radius:50%;
	max-width:60%;
	height:auto;
	display:block;
	width:100%;
    margin: 0 auto;	
}

#testing .split h3 {
	text-align:center;
	margin-bottom:1em;
}

#resources .split div p,
#resources .split div h4 {
    margin-bottom: 0;
}

#resources .split a:link {
	text-decoration:none;
	text-align:left;
}

#contact .split div {
	text-align:center;
}
#contact .split div p {
	margin-bottom:0;
}

/*=====================================================
   6. BLOG COMPONENTS
   Carousel, slides, navigation controls
   ===================================================== */

/* Container hides the overflow of the track */
.blog-carousel-container {
	position: relative;
	width: 100%;
	margin:auto;
	overflow: hidden;
}

/* Track holds slides in a row */
.carousel-track {
	display: flex;
	transition: transform 0.3s ease-in-out;
}

/* Individual slide styling */
.slide {
	min-width: 100%; /* Shows one slide at a time */
	box-sizing: border-box;
	padding: 10px;
	text-align: center;
}

.slide img {
	width: 25%;
	border-radius: 8px;
}

.slide-content {
	padding: 10px;
}

.read-more {
	display: inline-block;
	margin-top: 10px;
	text-decoration: none;
	color: #007BFF;
}

/* Navigation Buttons */
.carousel-btn {
	position: absolute;
	top: 10%;
	transform: translateY(-50%);
	background-color: rgba(0, 0, 0, 0.5);
	color: white;
	border: none;
	padding: 10px 15px;
	cursor: pointer;
	font-size: 18px;
	z-index: 10;
	border-radius: 50%;
}

.prev-btn {
	left: 10px; 
}

.next-btn { 
	right: 10px; 
}

.carousel-btn:hover {
  background-color: rgba(0, 0, 0, 0.8);
}   

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .carousel-track {
        transition: none;
    }
}

/* =====================================================
   7. BACKGROUND AND COLOR THEMES
   Light, primary, dark, footer
   ===================================================== */
.bg-light {
	color:var(--color-text-white);
	background-color:var(--color-sage);
	border-radius:10px;
}

.bg-light a:link {
	font-weight:bold;
	text-decoration:none;
	text-align:left;
	color:var(--color-green-dark);
}
.bg-light a:visited {
	color:var(--color-green-dark);
}

.bg-light a:hover {
	color:var(--color-text-white);
}
.bg-light a:active {
	color:var(--color-text-white);
}

.bg-primary {
	color:var(--color-green-dark);
	background-color:var(--color-bg-cream);
	border-radius:10px;
}

.bg-primary a:link {
	font-weight:bold;
	text-decoration:none;
	text-align:left;
	color:var(--color-green-dark);
}
.bg-primary a:visited {
	color:var(--color-green-dark);
}

.bg-primary a:hover {
	color:var(--color-text-white);
}

.bg-primary a:active {
	color:var(--color-text-white);
}

.bg-dark {
	color:var(--color-gold-light);
	background-color:var(--color-forest);
	border-radius:10px;
}

.bg-dark a:link,
.bg-dark a:visited {
	font-weight:bold;
	text-decoration:none;
	text-align:left;
	color:var(--color-gold-light);
}

.bg-dark a:hover {
	color:var(--color-gold-soft);
}

.bg-dark a:active {
	color:var(--color-text-white);
}

.bg-footer {
	color:var(--color-text-mint);
	background-color:var(--color-bg-mint);
	border-radius:10px;
}

.bg-footer a:link {
	font-weight:bold;
	text-decoration:none;
	text-align:left;
	color:var(--color-sage-hover);
}

.bg-footer a:visited {
	color:var(--color-green-dark);
}

.bg-footer a:hover {
	color:var(--color-gold-muted);
}
.bg-footer a:active {
	color:#0e2954;
}

/* =====================================================
   8. RESPONSIVE STYLES
   Mobile, tablet, desktop
   ===================================================== */
@media (max-width:30em) {
    .bg-image {
        background: url(/images/grass2.avif);
		background-position: bottom left;
		background-repeat: no-repeat;
		padding-top:0px;
		padding-bottom:150px;
    }

	.badge {
		display: flex;
		justify-content: center;
	
	}

	.name {
	   font-size:1.25rem;
	   margin:0;
	   
	}

	.role {
	   font-size:0.90rem;
	   font-style:italic;	
   }
   
	h1 {
		font-size:1.5rem;
		margin-bottom: 0.5em;	
	}

	h2 {
		font-size:1.25rem;
	}

	h3 {
		font-size:1rem;
	
	}

	body {
		font-size:15px;
		
	}
	
    #contact .badge {
		margin:auto;
	}

	img {
		max-width:100%;
	}	
	
	
}

@media (min-width: 30.0625em) and (max-width: 64em){
    .bg-image {
        background-image: url(cactus3.avif);
		background-position:top left;
		background-repeat: no-repeat;
		padding-top:0px;
		padding-bottom:100px;
    }
	
	.badge {
		display: flex;
	}
		
	.name {
	   font-size:2rem;
	   margin:0;
	}

	.role {
	   font-size:1.05rem;
	   font-style:italic;	
	}

	h1 {
		font-size:1.5rem;
		margin-bottom: 0.5em;	
	}

	h2 {
		font-size:1.25rem;
	}

	h3 {
		font-size:1rem;
	}

	nav {
		font-size:15px;
	}

	body {
		font-size:15px;
	}
	img {
		max-width:100%;
	
	}
}

@media (min-width: 64.0625em) {
    .bg-image {
		background-color:grey;
	    background-image: url(/images/cactusyel.avif);
		background-blend-mode:lighten;
   }

   .name {
	   font-size:2.75rem;
	   margin:0;
   }

   .role {
	   font-size:1.5rem;
	   font-style:italic;
   }

   img {
		max-width:65%;
	}   
}
		
@media(min-width: 40em){
	header,
	section,
	article,
	main {
	padding: 1em 0;	
	}
}

.container {
	margin-inline: auto;
	width: min(100%, 95rem);
}
	
.split {
	display:flex;
	flex-direction:column;
}

@media (min-width: 40em){
	.split {
		flex-direction:row;
	}

	.split > * {
		flex-basis: 100%;
	}

	.split > * + * {
		margin-left:1em;
	}
}
/* Mobile and narrow-screen navigation */
@media (max-width: 39.999em) {
    nav .nav-links {
        font-size: clamp(1rem, 4vw, 1.125rem);
        line-height: 1.2;
        gap: 0.35em;
    }

    nav .nav-links > div {
        padding-block: 0.3em;
    }
}
/* =====================================================
   9. FOOTER
   ===================================================== */
footer {
    padding: 0.5rem 0;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
                rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    margin-bottom: 0;
    font-style: italic;
}

footer .split {
    display: flex;
    align-items: center;
}

footer .split p {
    margin: 0;
}