/* -- THIS IS JS2026B -- */
/* -- THIS IS JS2026B -- */
/* -- THIS IS JS2026B -- */
/* -- THIS IS JS2026B -- */
/* -- THIS IS JS2026B -- */
/* -- THIS IS JS2026B -- */
/* -- THIS IS JS2026B -- */
/* -- THIS IS JS2026B -- */
/* -- THIS IS JS2026B -- */




/* 	--- This CSS snippet applies box-sizing: border-box to every element (*), as well as 
	all ::before and ::after pseudo-elements on a page. It ensures that an element's 
	specified width and height include its padding and borders, preventing elements from 
	becoming larger than intended and simplifying layout --- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/*  BODY */
body {
	color: #444;
	font-family: "Courier Prime", monospace;
	height: 100%;
	line-height: 1.3;
	font-size: clamp(1.2rem, 0.9rem + 0.5vw, 1.125rem);
	margin: 0;
	padding:0;
}

/* 	Hyperlink style. Nothing fancy: Links are same color as
	base font and underlined (old school). One mouseover,
	the color changes to a maroon. */
	
a{
	color: #444;
}

a:hover{
	color: #400;
}

/*  WRAPPER 
	The CSS rule width: min(1440px, 85%); is a responsive design 
	technique used to set an element's width to 85% of its container's
	width for screens less than 1440px wide, but it will never exceed 
	14400px to avoid it stretching too wide on large screens. Google
	AI suggested width: min(1440px, 85%);  as a good starting point.
*/
.wrapper {
	background: transparent;
	margin: 0 auto;
	padding: 0;
	/*width: min(1440px, 85%); */
	width: 75%;
}

/* --- Header --- */
header{
	background: white url("img/2023-05-21-selfie_thumb.jpg") no-repeat left top;
	height: 100%;
	width: 100%;
	}
	
/* clamp(1.6rem, 0.96rem + 1.92vw, 2.8rem) allows me to set 3 values for 
	this site's font size:  

	Minimum (1.6rem): The value will never go below this, no matter how small the screen gets.
	Preferred (0.96rem + 1.92vw): This is the "fluid" part. It uses a mix of fixed size (rem) and 
	viewport width (vw) so the value grows smoothly as the window gets wider.
	Maximum (2.8rem): The value will never exceed this, even on giant monitors.
*/

.site-title{
	font-size: clamp(1.6rem, 0.96rem + 1.92vw, 2.8rem);
	font-variant-caps: all-small-caps;
	height: auto;
	line-height:1.2em;
	margin: 0;
	padding: 0;
	text-align: left;
}	

.site-title-link{
	margin-left: 3.3em;
	text-decoration: none;
}

/* *** Menu in header *** */
.menu{
	font-size: clamp(1rem, 0.75rem + 1.5vw, 1.75rem); 
	line-height: 0;
	list-style-type: none;
	margin: 0;
	padding: .5em 0 2.2em 5.5em;
	text-align: left;
}

.menu li{
	display: inline;
}

/*	END HEADER */


/* The titles of the portfolios on the index.html / home page */
 .portfolio-title-and-links{
	background: transparent;
	font-size: clamp(1.125rem, 0.84375rem + 1.6875vw, 1.96875rem);
	font-variant-caps: all-small-caps;
	text-align: center;
	margin: 0 auto;
}	


/* Title on each page: "Arizona," "Contact," "About" */
.page-title{
	background: transparent;
	font-size: clamp(1.6rem, 0.96rem + 1.92vw, 2.8rem);
	font-variant-caps: all-small-caps;
	text-align: center;
	margin: 0;
	padding: 0;
}	

/* GRID STRUCTURE */
	
/*	The grid contains rows of vertical or portrait format images	
	and rows of horizontal or landscape format images. The 
	grids allow for 3 rows for the lanscape format images and
	4 for the portrait format images. 
*/

/* ***********************************************************************
	CHANGES FROM js2026a: 
	
	INCREASE GAP to 3em, 
	REDUCE 3 IMAGE ROW TO 2 IMAGES 
	REDUCE 4 IMAGE ROW TO 3 IMAGES 
	ADD MARGIN-TOP: 2EM; TO .ROW-4
	
	**********************************************************************
*/

.row {
  display: grid;
  gap: 3rem; /* 1.5 in js2026a rem */
  margin-bottom: 1.25rem; /* was 1.5rem */
}

/* 3-column rows (landscape images) */
.row-3 {
  grid-template-columns: repeat(2, 1fr);
}

/* 4-column rows (portrait images) */
.row-4 {
	grid-template-columns: repeat(3, 1fr);
	MARGIN-TOP: 2EM;
}

/* --- Figures --- */
/* The "figures" are the containers holding the images
	and their title titles and dates */

figure {
	margin: 0;
	display: flex;
	flex-direction: column;
}

/* Landscape images */
.row-3 img {
  aspect-ratio: 3 /2;
}

/* Portrait images */
.row-4 img {
  aspect-ratio: 3 / 4;
}

figure img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  border-radius:3px;
}

figcaption {
	letter-spacing: -.10rem;
	font-family: "Courier Prime", monospace;
	font-size: clamp(1rem, 1.25vw, 1.25rem);   
	margin-top: 0.3rem; /* was 0.4rem */
	text-align: left;
}

/*	Menu at the bottom of the page, after a portfolio. 
	Inserted into all pages except the home/portfolio
	page via SSI includes <!--#include virtual="footer-menu.html" -->
*/	
	
.menu-footer{
	font-size: clamp(1rem, 0.75rem + 1.5vw, 1.75rem); 
	font-variant-caps: all-small-caps;
	list-style-type: none;
	text-align: center;	
	max-width: 50ch; /* Limits footer width to approximately 65 characters */
	margin: .3em auto;  /* Centers the paragraph within its container */
	width: 100%;     /* Ensures it shrinks on smaller screens */
}	

.menu-footer li{
	display: inline;
}

.footer-menu-img{
	height: 80px;
	width: auto;
}

/* --- Footer --- */
footer {
font-size: clamp(1rem, 1.25vw, 1.25rem);   
  width: 100%;
  margin: 2em auto 0 auto;
  padding: 1rem;
  text-align:left;
}

/* Misc. helpers */

/* For those times when you need to smudge words together */
.smudgy{
	word-spacing: -.2em;
}

/* Under the portfolio title. "More Utah photos can be found..." */
.page-notes{
	font-size: clamp(1rem, 1.25vw, 1.25rem);   
	margin: 0 auto 1em auto;
	text-align: center;
	}

.center-something{
	text-align: center;
}

/* *** THE ABOUT PAGE ***/
	picture {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: fit-content; /* Ensures it doesn't take up 100% width */
}

picture img {
	max-width: 100%;
	height: auto;
	max-height: 550px;
	display: block; /* Removes extra space at the bottom of the image */
}


.section-title{
	font-size: clamp(1rem, 1.25vw, 1.25rem);   
	text-align: center;
}

p{
	max-width: 65ch; /* Limits width to approximately 65 characters */
	margin: 1em auto;  /* Centers the paragraph within its container */
	width: 100%;     /* Ensures it shrinks on smaller screens */
}


/* *** CONTACT FORM *** */
.contact-form {
	background: transparent;
	margin: 0 auto;   
	max-width: 500px;  
	width: 50%;       
	}

input, textarea {
font-family: courier new, monospace;
font-family: "Courier Prime", monospace;
  font-size: 1rem;  
  padding: 1em;  
  width: 100%;  
}

label{
	display: block;
	margin-top: 1em;
}

button{
	background: #666;
	color: white;
	cursor: pointer;
	font-family: "Courier Prime", monospace;
	font-size: 1.3rem;  
}

.hidden{
	display: none;
}


/* --- Responsive behavior --- */
/* --- Responsive behavior --- */
/* --- Responsive behavior --- */
/* --- Responsive behavior --- */

/* Tablet */
@media (max-width: 900px) {
  .row-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .row-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 500px) {
  .row-3,
  .row-4 {
    grid-template-columns: 1fr;
  }
  
  /* CONTACT FORM */
.contact-form {
	width: 90%;       
	}
  
  footer{
	  width: 99.9%
  }
}