/*
Theme Name: ericville25
Author: eric@ericwittke.com
File: footer.css
Description: Styling for global page footers.
*/

/* * -------------------------------------------------------------------------
 * Main Wrapper
 * -------------------------------------------------------------------------
 */

footer {
	margin-top: var(--space-xl);
	border-top: 1px solid var(--color-borders);
	
	/* Background Texture */
	background-color: var(--color-borders);
	background-image: var(--bg-effect-light);
	background-size: var(--bg-size);
	background-repeat: repeat;
	/* Note: background-blend-mode is likely inherited or unnecessary here 
	   as color-borders is opaque, but consider adding if texture is too subtle. */
}

/* * -------------------------------------------------------------------------
 * Layout Container
 * -------------------------------------------------------------------------
 */

footer .container {
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-m);
	
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: var(--space-m) var(--page-gutter-s) var(--space-xl) var(--page-gutter-s);
	
	font-size: var(--font-size-xs);
	cursor: default;

	/* FLAG: Radius on transparent container? 
	 * Since the 'footer' element has the background color, these radius values 
	 * on the inner container won't be visible unless there is an overflow:hidden 
	 * or a background color applied to .container itself. 
	 */
	border-top-left-radius: var(--radius-s);
	border-top-right-radius: var(--radius-s);
}

/* * Breakpoints
 * Values match variables.css
 */

/* --breakpoint-m */
@media (min-width: 700px) {
	footer .container {
		flex-wrap: nowrap;
		padding: var(--space-xl) var(--page-gutter-l);
		gap: var(--space-m);
	}
}

/* --container-max */
@media (min-width: 900px) {
	footer .container {
		padding: var(--space-xl) var(--page-gutter-s);
	}
}

/* * -------------------------------------------------------------------------
 * Site Info (Left Column)
 * -------------------------------------------------------------------------
 */

footer .info {
	display: flex;
	flex-flow: column;
	width: 100%;
	flex-grow: 1;
	gap: var(--space-2xs);
}

/* Hide tagline on mobile to save space */
footer .info .tagline,
footer .info .built-in {
	display: none;
	opacity: 0.8;
}

footer .info .site-name {
	font-weight: bold;
	font-family: var(--header-fonts);
}

footer .info .site-name.long {
	font-weight: normal;
}

footer .info .site-name.long a {
	font-weight: bold;
}

/* Desktop Info Adjustments */
@media (min-width: 700px) {
	footer .info {
		max-width: 270px;       
	}
	
	footer .info .tagline,
	footer .info .built-in {
		display: block;
	}
}

/* * -------------------------------------------------------------------------
 * Navigation Links
 * -------------------------------------------------------------------------
 */

footer nav {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	align-items: flex-start;
	
	/* Reset font size/weight from headers if necessary */
	font-family: var(--header-fonts); /* Per variables.css rules */
	font-size: var(--font-size-xs);
}

footer nav h5 {
	font-size: unset;
	font-weight: normal;
	margin: 0;
}

footer nav a {
	display: block;
	width: 100%;
	color: var(--color-text);
	font-weight: bold;
	border-radius: var(--radius-s);
	text-decoration: none;
	transition: all var(--motion-fast);
	
	/* OPTIMIZATION: Layout Shift Prevention
	 * Originally, horizontal padding was only added on hover. 
	 * We add it here to default state so text doesn't "jump".
	 */
	padding: var(--space-xs);
	margin-left: calc(-1 * var(--space-xs)); /* Negative margin to align text visually left */
}

/* Standard Nav Hover */
footer nav:not(.social) a:hover {
	background: var(--color-bg);
	/* Padding is already set in parent rule, just changing background */
}

/* * -------------------------------------------------------------------------
 * Social Icons
 * -------------------------------------------------------------------------
 */

footer nav.social .links {
	display: flex;
	flex-direction: row;
}

footer nav.social a {
	display: flex;
	padding: var(--space-s);
	border-radius: var(--radius-s);
	
	/* SVG Icon Handling */
	fill: var(--color-text);
	opacity: 0.5;
	transition: all var(--motion-fast);

	/* Reset the negative margin used in standard nav links */
	margin-left: 0; 
}

/* * FLAG: Removed :first-child { padding-left: 0 } 
 * Removing padding on the first item causes the hover background 
 * rectangle to be clipped/asymmetrical compared to others.
 * It is cleaner to leave the padding and let the alignment be handled by the flex gap.
 */

footer nav.social a:hover {
	fill: var(--color-text);
	opacity: 1;
}