/* =========================================
   Event Node Form Styles (Frontend)
   ========================================= */

.node-event-form {
  max-width: 860px;
  margin: 10px auto;
  padding: 36px;
  background: #ffffff;
  border-radius: var(--radius, 10px);
  box-shadow: var(--shadow, 0 10px 30px rgba(0,0,0,.12));
}

/* Success Alert Banner */
.node-event-form .event-submit-success-banner {
  margin-bottom: 25px;
}

.node-event-form .event-success-alert {
  display: flex;
  align-items: center;
  gap: 16px;
  background-color: #f0fdf4;
  border: 1.5px solid #86efac;
  border-left: 6px solid var(--brand-highlight-green, #438306);
  color: #166534;
  padding: 16px 20px;
  border-radius: 8px;
  font-size: 1.05rem;
  line-height: 1.5;
  box-shadow: 0 4px 14px rgba(85, 165, 8, 0.1);
}

.node-event-form .event-success-alert .success-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  stroke: var(--brand-highlight-green, #438306);
}

.node-event-form .event-success-alert .success-text strong {
  color: #14532d;
}

/* Event Portal Header & Navigation (Live site style) */
.full-width-hero-banner {
  width: 100%;
  position: relative;
}

.full-width-hero-banner .event-portal-hero-banner {
  width: 100%;
  height: 280px;
  overflow: hidden;
}

.full-width-hero-banner .portal-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.event-portal-header-content {
  max-width: 860px; /* match container width of form */
  margin: 0 auto;
  padding: 30px 15px 10px 15px;
  box-sizing: border-box;
}

.event-portal-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid #e2e8f0;
}

.event-portal-header-content .event-portal-title {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--brand-text, #1d2b36);
  border-left: none !important;
  padding-left: 0 !important;
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.event-portal-header-content .event-portal-nav {
  display: inline-flex;
  align-items: center;
  background-color: #f1f5f9;
  border: 1px solid #d9e2ec;
  border-radius: 30px;
  padding: 4px;
  gap: 4px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
  max-width: 100%;
}

.event-portal-header-content .event-nav-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475569 !important;
  padding: 10px 22px;
  border-radius: 26px;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  border: none !important;
  background-color: transparent;
  white-space: nowrap;
}

.event-portal-header-content .event-nav-item:hover {
  background-color: #e2e8f0;
  color: #0256a4 !important;
}

.event-portal-header-content .event-nav-item.active {
  background-color: #0256a4 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(2, 86, 164, 0.25);
  cursor: default;
}

.event-portal-header-content .event-portal-intro {
  font-size: 1.05rem;
  color: var(--brand-muted, #475569);
  margin: 0 0 16px 0;
  font-weight: 500;
}

@media (max-width: 680px) {
  .event-portal-header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .event-portal-header-content .event-portal-nav {
    width: 100%;
    display: flex;
  }
  .event-portal-header-content .event-nav-item {
    flex: 1;
    text-align: center;
    padding: 10px 14px;
  }
}

.node-event-form .form-item {
  margin-bottom: 24px;
}

.node-event-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--brand-text, #1d2b36);
  font-size: 1.05rem;
}

.node-event-form .form-text,
.node-event-form .form-email,
.node-event-form .form-tel,
.node-event-form .form-url,
.node-event-form .form-select,
.node-event-form .form-textarea,
.node-event-form .form-date,
.node-event-form .form-time {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border, #d9e2ec);
  border-radius: 6px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--brand-text, #1d2b36);
  background-color: #f9fbfd;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.node-event-form .form-text:focus,
.node-event-form .form-email:focus,
.node-event-form .form-tel:focus,
.node-event-form .form-url:focus,
.node-event-form .form-select:focus,
.node-event-form .form-textarea:focus {
  outline: none;
  border-color: var(--brand-blue, #0256a4);
  box-shadow: 0 0 0 3px rgba(2, 86, 164, 0.15);
  background-color: #ffffff;
}

.node-event-form fieldset {
  border: 1px solid var(--border, #d9e2ec);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 30px;
  background-color: #ffffff;
}

.node-event-form fieldset legend {
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--brand-blue-dark, #014785);
  padding: 0 10px;
  margin-bottom: 15px;
}

.node-event-form .form-actions {
  margin-top: 36px !important;
  padding-top: 24px !important;
  border-top: 1px solid var(--border, #d9e2ec) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

.node-event-form .form-actions input,
.node-event-form .form-actions button,
.node-event-form .form-actions .button {
  margin: 0 !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 28px !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
  line-height: normal !important;
  text-decoration: none !important;
}

/* Primary Action: Request to Publish / Submit */
.node-event-form #edit-submit,
.node-event-form .action-request-publish,
.node-event-form [data-drupal-selector="edit-request-publish"],
.node-event-form .button--primary {
  background-color: var(--brand-blue, #0256a4) !important;
  color: #ffffff !important;
  border: 1.5px solid var(--brand-blue, #0256a4) !important;
}

.node-event-form #edit-submit:hover,
.node-event-form .action-request-publish:hover,
.node-event-form [data-drupal-selector="edit-request-publish"]:hover,
.node-event-form .button--primary:hover {
  background-color: var(--brand-blue-dark, #014785) !important;
  border-color: var(--brand-blue-dark, #014785) !important;
  box-shadow: 0 4px 12px rgba(2, 86, 164, 0.25) !important;
  transform: translateY(-1px) !important;
}

/* Secondary Action: Preview & Save Draft */
.node-event-form #edit-preview,
.node-event-form [data-drupal-selector="edit-preview"],
.node-event-form .action-preview,
.node-event-form .action-save-draft,
.node-event-form [data-drupal-selector="edit-save-draft"],
.node-event-form .button--secondary {
  background-color: #ffffff !important;
  color: var(--brand-blue, #0256a4) !important;
  border: 1.5px solid var(--brand-blue, #0256a4) !important;
}

.node-event-form #edit-preview:hover,
.node-event-form [data-drupal-selector="edit-preview"]:hover,
.node-event-form .action-preview:hover,
.node-event-form .action-save-draft:hover,
.node-event-form [data-drupal-selector="edit-save-draft"]:hover,
.node-event-form .button--secondary:hover {
  background-color: #f0f7ff !important;
  color: var(--brand-blue-dark, #014785) !important;
  border-color: var(--brand-blue-dark, #014785) !important;
  box-shadow: 0 4px 12px rgba(2, 86, 164, 0.12) !important;
  transform: translateY(-1px) !important;
}

/* Style Remove button in recurrence table */
.node-event-form .field--name-field-event-dates table input[id*="-actions-delete"],
.node-event-form .field--name-field-event-dates table input[value="Remove"],
.node-event-form .field--name-field-event-dates table button[value="Remove"] {
  background-color: #ffffff !important;
  color: #dc2626 !important;
  border: 1.5px solid #fca5a5 !important;
  padding: 8px 18px !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  line-height: normal !important;
  height: auto !important;
  margin-top: 1.65rem !important;
  margin-bottom: 0 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.node-event-form .field--name-field-event-dates table input[id*="-actions-delete"]:hover,
.node-event-form .field--name-field-event-dates table input[value="Remove"]:hover,
.node-event-form .field--name-field-event-dates table button[value="Remove"]:hover {
  background-color: #fef2f2 !important;
  border-color: #ef4444 !important;
  color: #b91c1c !important;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.15) !important;
}

/* Style Add another item button */
.node-event-form .field--name-field-event-dates input[id*="add-more"],
.node-event-form .field--name-field-event-dates input[value="Add another item"],
.node-event-form .field--name-field-event-dates button[value="Add another item"],
.node-event-form .field--name-field-event-dates .field-add-more-submit {
  background-color: #ffffff !important;
  color: var(--brand-blue, #0256a4) !important;
  border: 1.5px solid var(--brand-blue, #0256a4) !important;
  padding: 10px 22px !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 14px !important;
  box-shadow: 0 1px 3px rgba(2, 86, 164, 0.08) !important;
}

.node-event-form .field--name-field-event-dates input[id*="add-more"]:hover,
.node-event-form .field--name-field-event-dates input[value="Add another item"]:hover,
.node-event-form .field--name-field-event-dates button[value="Add another item"]:hover,
.node-event-form .field--name-field-event-dates .field-add-more-submit:hover {
  background-color: #f0f7ff !important;
  color: var(--brand-blue-dark, #014785) !important;
  border-color: var(--brand-blue-dark, #014785) !important;
  box-shadow: 0 3px 8px rgba(2, 86, 164, 0.18) !important;
  transform: translateY(-1px) !important;
}

/* Hide admin tabs / metadata sections on frontend event form */
.node-event-form .vertical-tabs,
.node-event-form details[data-drupal-selector*="menu"],
.node-event-form details[data-drupal-selector*="simple-sitemap"],
.node-event-form details#edit-menu,
.node-event-form details#edit-simple-sitemap,
.node-event-form details#edit-author,
.node-event-form details#edit-options {
  display: none !important;
}

/* Hide admin elements from public users */
.node-event-form .form-item-status,
.node-event-form .field--name-moderation-state,
.node-event-form .form-item-revision-log,
.node-event-form .field--name-revision-log,
.node-event-form #edit-revision-information,
.node-event-form .field--name-revision,
.node-event-form .form-item-revision,
.node-event-form details#edit-revision-information,
.node-event-form .filter-wrapper,
.node-event-form .js-filter-wrapper,
.node-event-form .filter-guidelines,
.node-event-form .filter-help,
.node-event-form .filter-tips {
  display: none !important;
}

/* Edit summary link & wrapper */
.node-event-form .link-edit-summary,
.node-event-form button.link-edit-summary {
  display: inline !important;
  color: var(--brand-blue, #0256a4) !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  text-decoration: underline !important;
  cursor: pointer !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 2px !important;
  box-shadow: none !important;
  outline: none !important;
  line-height: inherit !important;
  font-family: inherit !important;
  vertical-align: baseline !important;
  -webkit-appearance: none !important;
}

.node-event-form .link-edit-summary:hover,
.node-event-form button.link-edit-summary:hover {
  color: var(--brand-blue-dark, #014785) !important;
  background: none !important;
}

.node-event-form .link-edit-summary-wrapper,
.node-event-form label small.description,
.node-event-form label span.description {
  font-weight: normal !important;
  color: var(--brand-muted, #5b6770) !important;
  font-size: 0.95rem !important;
  margin-left: 6px !important;
  display: inline-block !important;
}

/* Autocomplete Search Icon */
.node-event-form input.form-autocomplete {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%235b6770'%3E%3Ccircle cx='11' cy='11' r='7' stroke-width='2'/%3E%3Cpath stroke-width='2' stroke-linecap='round' d='M16.5 16.5L21 21'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 18px 18px !important;
  padding-right: 42px !important;
}

/* Attachments Fieldset / Details styling */
.node-event-form .field--name-field-event-attachments {
  border: 1px solid var(--border, #d9e2ec);
  border-radius: 8px;
  margin-bottom: 24px;
  background-color: #ffffff;
  overflow: hidden;
}

.node-event-form .field--name-field-event-attachments summary {
  padding: 14px 20px;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--brand-blue-dark, #014785);
  background-color: #f8fafc;
  cursor: pointer;
  border-bottom: 1px solid var(--border, #d9e2ec);
  margin-bottom: 20px;
}

.node-event-form .field--name-field-event-attachments .form-item,
.node-event-form .field--name-field-event-attachments .js-form-managed-file,
.node-event-form .field--name-field-event-attachments .form-managed-file,
.node-event-form .field--name-field-event-attachments .description {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.node-event-form .field--name-field-event-attachments .description {
  padding-bottom: 20px !important;
  margin-top: 8px;
}

.node-event-form .field--name-field-event-attachments input[type="file"] {
  padding: 10px;
  background: #f8fafc;
  border: 1.5px dashed var(--border, #cbd5e1);
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
}

/* Checkboxes and Radios */
.node-event-form .form-type-checkbox,
.node-event-form .form-type-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.node-event-form .form-type-checkbox input,
.node-event-form .form-type-radio input {
  margin: 0;
  width: 18px;
  height: 18px;
}

.node-event-form .form-type-checkbox label,
.node-event-form .form-type-radio label {
  margin-bottom: 0;
  font-weight: normal;
}

/* Required Asterisks */
.node-event-form .form-required::after {
  content: " *";
  color: #e32726;
  display: inline-block;
}

/* Media/File widgets */
.node-event-form .image-widget-data {
  display: flex;
  align-items: center;
  gap: 20px;
}

.node-event-form .file-size,
.node-event-form .description {
  font-size: 0.85rem;
  color: var(--brand-muted, #5b6770);
  margin-top: 6px;
}

.node-event-form .tabledrag-toggle-weight-wrapper {
  display: none !important;
}

.node-event-form table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.node-event-form table th {
  text-align: left;
  padding: 10px;
  background: #f1f5f9;
  border-bottom: 2px solid var(--border, #d9e2ec);
}

.node-event-form table td {
  padding: 15px 10px;
  border-bottom: 1px solid var(--border, #d9e2ec);
  vertical-align: middle;
}

/* Fix weird date/time layout */
.node-event-form .field--type-datetime .container-inline {
  display: flex !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
  align-items: flex-start;
}

.node-event-form .field--type-datetime .form-item {
  margin-bottom: 15px !important;
  display: flex;
  flex-direction: column;
  min-width: 150px;
}

.node-event-form .field--type-datetime .form-item label {
  margin-bottom: 5px;
  white-space: nowrap;
}