/**
 * Digentus Events – Single Event Specific Styles
 * Location: /shared/css/single-event.css
 *
 * Contains refinements and layout adjustments exclusively for the
 * single event view template (single-dig_event.php).
 * Ensures a single-column, left-aligned layout with controlled width.
 *
 * Version: 5.1.4
 */

/* ==========================================================================
   1. Main Container Alignment & Width
   ========================================================================== */

/* Overall container for the single event page content */
.dig-event-single-main {
	/* Theme overrides might be needed here if theme adds excessive padding */
}
/* Main article container - LEFT ALIGNED, MAX WIDTH */
.dig-event-single-view {
	position: relative; /* Context for absolute children (QR, Actions) */
	margin: 2em 0;     /* Vertical margin only for left alignment */
	padding: 0 15px;   /* Horizontal padding for small screens */
	max-width: 860px;  /* Limit content width - ADJUST AS NEEDED */
	/* NO margin-left/right: auto; ensures left alignment */
}

/* ==========================================================================
   2. Back Button & Header
   ========================================================================== */

.dig-event-back-button-wrapper {
	margin-bottom: 25px;
}
.dig-event-back-button {
	display: inline-flex; /* Use flex for better alignment */
	align-items: center;
	padding: 8px 15px;
	border: 1px solid var(--dig-border-color);
	border-radius: 4px;
	color: var(--dig-text-medium);
	text-decoration: none;
	font-size: 0.9em;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.dig-event-back-button:hover,
.dig-event-back-button:focus {
	background-color: var(--dig-bg-light);
	color: var(--dig-text-dark);
	border-color: #ccc;
	outline: none;
}
.dig-event-back-button .dashicons {
	margin-right: 6px;
	height: auto;
	font-size: 1.2em;
	line-height: 1;
}

.dig-event-single-view .entry-header {
	margin-bottom: 1.5em;
	position: relative; /* Context for QR code and actions menu */
	padding-bottom: 1em;
	border-bottom: 1px solid var(--dig-border-color);
}

/* Title */
.dig-event-single-view .entry-title {
	font-size: 2.4em; /* Larger title for single view */
	margin: 0 0 0.3em 0;
	padding-right: 80px; /* Space for QR Code - Adjust if QR size changes */
	font-weight: 600;
	line-height: 1.2; /* Adjust line height */
}

/* Meta Info (Date, Time, Location) */
.dig-event-single-view .entry-meta.dig-single-event-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 25px; /* Spacing between items */
	color: var(--dig-text-light);
	font-size: 1em; /* Slightly larger meta */
	margin-top: 0.5em;
	padding-bottom: 0; /* Remove padding, header has border */
	border-bottom: none !important; /* Ensure no border */
	padding-right: 80px; /* Space for QR Code - Adjust if QR size changes */
}
.dig-event-single-view .entry-meta.dig-single-event-meta span { display: inline-flex; align-items: center; }
.dig-event-single-view .entry-meta.dig-single-event-meta .dashicons { margin-right: 6px; color: var(--dig-primary-color); font-size: 1.2em; }
.dig-event-single-view .entry-meta.dig-single-event-meta a { color: inherit; text-decoration: underline; text-decoration-style: dotted; }
.dig-event-single-view .entry-meta.dig-single-event-meta a:hover { text-decoration-style: solid; color: var(--dig-primary-color); }

/* ==========================================================================
   3. Actions Menu & QR Code
   ========================================================================== */

.dig-event-item-actions {
	position: absolute;
	top: 5px; /* Adjust vertical position */
	right: 5px; /* Adjust horizontal position */
	z-index: 10;
}
.dig-event-actions-toggle {
	background: rgba(255,255,255,0.6); /* Semi-transparent background */
	border: 1px solid transparent;
	padding: 4px;
	line-height: 1;
	cursor: pointer;
	border-radius: 3px;
	color: var(--dig-text-light);
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.dig-event-actions-toggle:hover,
.dig-event-actions-toggle:focus {
	background-color: #fff;
	border-color: #ccc;
	color: var(--dig-text-dark);
	outline: none;
	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.dig-event-actions-toggle .dashicons {
	font-size: 20px;
	vertical-align: middle;
	transform: rotate(90deg);
	display: block;
}

.dig-event-actions-menu {
	display: none; /* Controlled by JS */
	position: absolute;
	top: 100%;
	right: 0;
	background: var(--dig-bg-white);
	border: 1px solid #ccc;
	padding: 0.5em 0;
	list-style: none;
	margin: 4px 0 0 0;
	min-width: 200px;
	box-shadow: 0 3px 8px rgba(0,0,0,0.15);
	z-index: 9999; /* Ensure it's on top */
	border-radius: 4px;
}
.dig-event-actions-menu li { margin: 0; padding: 0; }
.dig-event-actions-menu a,
.dig-event-actions-menu button {
	display: flex; align-items: center; gap: 8px; padding: 0.6em 1.2em;
	text-decoration: none; color: var(--dig-text-dark); background: none; border: none;
	width: 100%; text-align: left; cursor: pointer; font-size: 13px; line-height: 1.4;
	white-space: nowrap; transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;
}
.dig-event-actions-menu a:hover,
.dig-event-actions-menu button:hover,
.dig-event-actions-menu a:focus,
.dig-event-actions-menu button:focus { background-color: var(--dig-primary-color); color: #fff; outline: none; }
.dig-event-actions-menu .dashicons { font-size: 16px; color: var(--dig-text-light); flex-shrink: 0; margin-top: -1px; }
.dig-event-actions-menu a:hover .dashicons,
.dig-event-actions-menu button:hover .dashicons,
.dig-event-actions-menu a:focus .dashicons,
.dig-event-actions-menu button:focus .dashicons { color: #fff; }
.dig-event-actions-menu hr.dig-action-separator { border: none; border-top: 1px solid var(--dig-border-color); margin: 0.5em 0; height: 1px; padding: 0; }
/* Delete button specific style */
.dig-event-actions-menu .dig-delete-event-button { color: var(--dig-error-color); }
.dig-event-actions-menu .dig-delete-event-button:hover,
.dig-event-actions-menu .dig-delete-event-button:focus { background-color: var(--dig-error-bg); color: #a94442; }
.dig-event-actions-menu .dig-delete-event-button:hover .dashicons,
.dig-event-actions-menu .dig-delete-event-button:focus .dashicons { color: #a94442; }

/* QR Code Styling */
.dig-event-qr-wrapper {
	position: absolute; /* Position relative to .entry-header */
	top: 5px;          /* Align near top of header */
	right: 40px!important;         /* Align to the right */
	width: 65px;      /* Adjust size as needed */
	height: auto;
	z-index: 5;       /* Below actions menu if they overlap */
	padding: 5px;
	border: 1px solid #000;
}
.dig-event-qr-wrapper img {
	display: block;
	width: 100%;
	height: auto;
	/* Optional: add a light border */
	/* border: 1px solid var(--dig-border-color); */
}

/* ==========================================================================
   4. Single Column Content Layout
   ========================================================================== */

.dig-event-content-wrapper {
	margin-top: 1.5em;
}
.dig-event-layout {
	/* No flex properties needed now */
	margin-bottom: 2.5em;
}

/* Containers for image and text */
.dig-event-left,
.dig-event-right {
	width: 100%; /* Take full width */
	max-width: none;
	/* ADJUSTMENT: Reduced space between image and text */
	margin-bottom: 1.8em;
}

/* Thumbnail specific styles */
.dig-event-thumbnail {
	width: 100%; /* Image spans container width */
	max-width: 650px; /* Optional: limit image width */
	height: auto; /* Maintain aspect ratio */
	object-fit: contain; /* Show full image without cropping */
	border-radius: 6px;
	display: block; /* Remove extra space */
	/* ADJUSTMENT: Align image left (remove margin: auto) */
	margin: 0 0 1em 0; /* Top/LR: 0, Bottom: 1em */
	border: 1px solid var(--dig-border-color);
	background: var(--dig-bg-light); /* BG for contain */
	float: none !important; /* Ensure no floats */
}

/* Text content styles */
.dig-event-right {
	word-wrap: break-word;
	overflow-wrap: break-word;
	line-height: 1.7; /* Improve readability */
	text-align: left; /* Ensure text is left-aligned */
}
.dig-event-right p { margin-bottom: 1.2em; }
.dig-event-right ul,
.dig-event-right ol {
	/* ADJUSTMENT: Reset browser default padding and use margin for indentation */
	padding-left: 0;
	margin-left: 1.5em; /* Adjust indentation depth as needed */
	margin-bottom: 1.2em;
}
.dig-event-right li { margin-bottom: 0.5em; }
/* Ensure nested lists also have reduced padding */
.dig-event-right ul ul,
.dig-event-right ol ol,
.dig-event-right ul ol,
.dig-event-right ol ul {
    margin-left: 1.5em; /* Indent nested lists relative to parent */
    margin-bottom: 0; /* Remove extra space below nested list */
    margin-top: 0.5em; /* Add space above nested list */
}


/* ==========================================================================
   5. Single View Gallery
   ========================================================================== */

.dig-event-single-gallery {
	margin-top: 2.5em;
	clear: both; /* Ensure it's below any floated elements */
	/* Contained by .dig-event-single-view max-width */
}
.dig-event-single-gallery h3 {
	margin-bottom: 1em;
	font-size: 1.4em;
	font-weight: 600;
	border-bottom: 1px solid var(--dig-border-color);
	padding-bottom: 0.5em;
}
.dig-event-single-gallery ul.dig-gallery-image-list {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 15px; /* Space between gallery images */
}
.dig-event-single-gallery .dig-gallery-list-item {
	flex: 0 0 auto;
	line-height: 0;
}
.dig-event-single-gallery .dig-gallery-list-item img {
	display: block;
	width: 100px; /* Gallery thumbnail size */
	height: 100px;
	object-fit: cover;
	border-radius: 4px;
	border: 1px solid var(--dig-border-color);
	transition: opacity 0.2s ease, box-shadow 0.2s ease;
}
.dig-event-single-gallery .dig-gallery-list-item a:hover img,
.dig-event-single-gallery .dig-gallery-list-item a:focus img {
	opacity: 0.85;
	box-shadow: 0 0 0 3px var(--dig-primary-color);
	outline: none;
}

/* Hide print-only elements in screen view */
.print-only {
    display: none !important; /* Use important if needed to override */
    visibility: hidden;
}