/* 	--- 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.
	
	Example: my monitor is 1497px wide. Because 1440px is larger than 
	1440px, the 1440px value is being used on my machine. 
*/
.wrapper {
	background: #fff;
	margin: 0 auto;
	padding: 0;
	width: min(1240px, 85%); 
}

/* --- Header --- */
header{
	background: white url("img/2023-05-21-selfie_thumb.jpg") no-repeat left top;
	background-size: 125px 125px;
	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. 
*/

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

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

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

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

/* 4-column rows (used on index.html to display the portfolio images and links in a row of 4	)  */
.row-4 {
	grid-template-columns: repeat(4, 1fr);
	}
	
.row-4 img{
	width: 100%;
	min-height: 225px;
}

/* --- 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-2 img {
  aspect-ratio: 3 /2;
}

/* Portrait images */
.row-3 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" -->
*/	

.footer-menu-img{
	height: 80px;
	width: auto;
	margin-top: 3em;
}

ul.footer-menu {
	font-size: clamp(1rem, 0.75rem + 1.5vw, 1.75rem); 
	font-variant-caps: all-small-caps;
	list-style-type: none;
	text-align: center;	
	margin: .3em auto;  /* Centers the paragraph within its container */
	width: fit-content;
	max-width: 47ch; /* Limits width to ~5-7 words */
}	

.footer-menu li{
	display: inline;
}


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

/* Misc. helpers */

/*	Hides the buttom that changes the style sheet. The alt
	style sheet is a development tool*/
.change-css{
	opacity: 0; 
	margin-left: 50%;
}

/* 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;  
}

/* Honey Pot - A honeypot is a security mechanism, a hidden form field, designed to 
	detect and block bots by luring them into interacting with it. Because spam bots 
	automatically fill all fields, they trigger the trap, while human users ignore it */ 
.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%
  }
}