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

  /* Add a generous top padding to push the content down from the site header.
       Using padding is often better than margin here as it won't collapse.
       '4rem' is a good starting point, adjust as needed. 1rem is usually 16px. */
  padding-top: 4rem;
}
/* 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 */
}

h1.entry-title {
  display: block;
}

/* 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;
}
/*
 * By adding 'body' and our context class, we increase specificity
 * to override aggressive theme styles without using !important.
 */
body .dig-events-context .dig-event-actions-toggle {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid transparent;
  padding: 4px;
  line-height: 1;
  cursor: pointer;
  border-radius: 3px;
  color: var(--dig-text-light, #555); /* Fallback color for the icon */
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;

  /* Reset theme overrides */
  font-family: "dashicons"; /* Ensure it uses the icon font */
  font-size: 20px;
  width: auto;
  height: auto;
}
body .dig-events-context .dig-event-actions-toggle:hover,
body .dig-events-context .dig-event-actions-toggle:focus {
  background-color: #333;
  border-color: #333;
  color: #fff;
  outline: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}

a.dig-event-back-button {
  margin-top: 10px;
}
/*
 * We target the Dashicon span directly.
 * 'color: currentColor;' makes the icon inherit its color from its parent button.
 * If the button's color is white, the icon will be white. If black, the icon will be black.
 */
.dig-event-actions-toggle .dashicons {
  font-size: 20px;
  vertical-align: middle;
  transform: rotate(90deg);
  display: block;
  color: currentColor;
}

.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;
}

/* ==========================================================================
   6. Registration Form Refinements
   ========================================================================== */

/**
 * Card styles for the entire section.
 * This creates a visually distinct container for the registration form.
 */
.dig-event-registration-section {
  background-color: var(--dig-bg-white, #ffffff);
  border: 1px solid var(--dig-border-color, #e0e0e0);
  border-radius: 8px;
  padding: 2em; /* Generous padding inside the card */
  margin-top: 2.5em; /* Space above the card */
}

.dig-event-registration-section:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
}

/**
 * Add vertical space between form groups for better readability.
 */
.dig-form .form-group {
  margin-bottom: 1.25em;
}

/**
 * Add space above the button to separate it from the fields or info box.
 */
.dig-form .form-actions {
  margin-top: 1.5em;
}

/**
 * Reusable Notice Box Component (DRY Principle)
 * This base class defines the structure for all notices.
 */
.dig-notice-box {
  display: flex;
  align-items: flex-start;
  padding: 1em;
  margin-top: 1.5em;
  background-color: var(--dig-bg-light, #f9f9f9);
  border-left-width: 4px;
  border-left-style: solid;
  border-radius: 4px;
  color: var(--dig-text-medium, #555);
}

.dig-notice-box .dashicons {
  margin-right: 0.75em;
  margin-top: 2px; /* Fine-tune vertical alignment */
  font-size: 1.2em;
}

.dig-notice-box p {
  margin: 0;
  line-height: 1.6;
}

/**
 * Notice Box Modifiers (Color Variants)
 */
.dig-notice-box.notice-info {
  border-left-color: var(--dig-primary-color, #0073aa);
}
.dig-notice-box.notice-info .dashicons {
  color: var(--dig-primary-color, #0073aa);
}

.dig-notice-box.notice-success {
  border-left-color: #4caf50; /* Green */
}
.dig-notice-box.notice-success .dashicons {
  color: #4caf50; /* Green */
}

.dig-notice-box.notice-warning {
  border-left-color: #ffc107; /* Amber/Yellow */
}
.dig-notice-box.notice-warning .dashicons {
  color: #ffc107; /* Amber/Yellow */
}

/* ==========================================================================
   7. Check-in Response Page Styles
   ========================================================================== */
body.wp-die-wrap {
  background-color: #f0f0f1;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.checkin-response-wrapper {
  background-color: #fff;
  border: 1px solid #c3c4c7;
  border-left-width: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
  margin: 5em auto;
  padding: 1em 2em;
  max-width: 700px;
}

.checkin-response-wrapper h1 {
  font-size: 1.5em;
  margin: 0.5em 0 1em;
  font-weight: 600;
}

.checkin-response-wrapper p {
  font-size: 1.1em;
  margin: 0;
  line-height: 1.6;
}

/* Status-specific border colors */
.checkin-response-wrapper.status-success {
  border-left-color: #4caf50; /* Green */
}
.checkin-response-wrapper.status-warning {
  border-left-color: #ffc107; /* Amber/Yellow */
}
.checkin-response-wrapper.status-error {
  border-left-color: #f44336; /* Red */
}