/*
Theme Name: ericville25
Author: eric@ericwittke.com
File: metadata.css
Description: Styling for post meta info (Byline, Date, Tools) and Dropdowns.
*/

/* * -------------------------------------------------------------------------
 * Main Container
 * -------------------------------------------------------------------------
 */

.metadata {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--space-s);
    
    background-color: #fff6;
	background-image: var(--bg-effect-heavy);
	background-size: var(--bg-size);
	background-blend-mode: var(--bg-effect-blend-light);
	background-repeat: repeat;
    box-shadow: var(--shadow-soft);
    border-radius: var(--radius-m);

	/* Vertical Rhythm */
	padding: var(--space-s) var(--space-s);
	margin-bottom: var(--space-xl);
		
	/* Typography */
	font-size: var(--font-size-s);
}

/* * -------------------------------------------------------------------------
 * Byline & Author
 * -------------------------------------------------------------------------
 */

.metadata .byline {
	flex-grow: 1;
	display: flex;
	align-items: center;
	gap: var(--space-s);
	margin-left: var(--space-s);
}

.metadata .byline .avatar {
	position: relative;
	top: -1px;
	border-radius: 50%;
	height: 32px;
	width: 32px;
	box-shadow: none; /* This is a wordpress function, so I can't add a class to override */
}

.metadata .label {
	display: flex;
	align-items: center;
}

/* * -------------------------------------------------------------------------
 * Social & Tools
 * -------------------------------------------------------------------------
 */

.metadata .social {
	display: flex;
	gap: var(--space-s);
}

.casestudy-page .metadata .social {
	flex-grow: 1;
}

.metadata .social > * {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
}

/* Variant: Stacked social items for Case Studies */
.casestudy-page .metadata .social > * {
	flex-direction: column;
	flex-grow: 1;
	align-items: flex-start; 
}

/* Icons */
.metadata svg {
	width: var(--icon-size-m); 
	height: var(--icon-size-m);
	fill: var(--color-text);
}

/* * -------------------------------------------------------------------------
 * Metadata Buttons (Overrides Global Forms)
 * -------------------------------------------------------------------------
 */

.metadata .button,
.metadata button {
	/* Reset Global Styles */
	background: none;
	min-height: unset;
	font-family: inherit;
	font-weight: normal;
	font-size: inherit;
	text-decoration: none;
	color: var(--color-text);
	
	/* Layout */
	display: flex;
	gap: var(--space-s);
	align-items: center;
	
	/* Borders */
	border: 1px solid var(--color-borders);
	border-radius: var(--radius-s);
	
	/* Spacing */
	padding: var(--space-s) var(--space-s) !important; /* Force override of global button padding */
	cursor: pointer;
}

/* Hover / Focus States */
.metadata .button:where(:hover, :focus),
.metadata button:where(:hover, :focus) {
	outline-width: 2px !important;
	color: var(--color-text) !important;
}

.metadata .button svg,
.metadata button svg {
/* 	position: relative; */
/* 	top: 2px; */
}

/* * -------------------------------------------------------------------------
 * Dropdown Menu
 * -------------------------------------------------------------------------
 */

.metadata .button-menu-container {
	position: relative;
	display: inline-block;
}

.metadata .button-menu {
	display: none; /* Initial State - Toggled by js */
	
	/* Positioning */
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 1000;
	margin-top: var(--space-2xs);
	
	/* Box Model */
	min-width: 200px;
	width: 100%;
	padding: var(--space-s) 0;
	
	/* Appearance */
	background: var(--color-surface);
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-s);
	box-shadow: var(--shadow-md-2);
}

/* Dividers inside menu */
.metadata .button-menu hr {
	border: 0;
	border-top: 1px solid var(--color-borders);
	margin: var(--space-s) 0;
	max-width: unset;
}

/* * -------------------------------------------------------------------------
 * Menu Options
 * -------------------------------------------------------------------------
 */

.metadata .button-menu-option {
	display: flex;
	flex-direction: row;
	gap: var(--space-xs);
	padding: var(--space-s) var(--space-m);
	
	text-decoration: none;
	color: var(--color-gray-800);
	transition: background-color var(--motion-fast);
}

.metadata .button-menu-option:hover {
	background: var(--color-gray-100);
}

.metadata .button-menu-option:hover .label {
	color: var(--color-accent);
}

/* Vertical Variant */
.metadata .button-menu-option.vert {
	flex-direction: column;
}

/* Menu Icons */
.metadata .button-menu-option .icon {
	display: flex;
	align-items: center;
	margin-right: var(--space-xs);
}

/* Menu Text */
.metadata .button-menu-option .label {
	white-space: nowrap;
}

.metadata .button-menu-option .stats {
	opacity: 0.5;
}