/*
 * File: gutenberg-buttons.css
 * Version: mmdb-0.8.18-claude
 * Munich Musicians DB - Gutenberg Editor Button Styles
 * Custom button classes for manual use in Gutenberg blocks
 *
 * USAGE FOR BUTTONS:
 * 1. Add a Button block in Gutenberg
 * 2. Select the button
 * 3. In the right sidebar under "Advanced" → "Additional CSS class(es)"
 * 4. Add one of these classes:
 *    - imm-button-search
 *    - imm-button-login
 *    - imm-button-register
 *    - imm-feedback-link
 *    - imm-imprint-link
 *    - imm-button (for generic styled buttons)
 *
 * USAGE FOR SIMPLE ELEMENTS:
 * For imm-feedback-link and imm-imprint-link, you can also add these classes
 * to any HTML element (link, span, div, etc.) in Gutenberg. They will be automatically localized.
 *
 * LOCALIZATION:
 * Elements with the following classes are automatically localized via JavaScript (button-localization.js):
 * - imm-button-login: EN: Login/Logout, DE: Anmelden/Abmelden (login status aware)
 * - imm-button-search: EN: Search, DE: Suchen
 * - imm-button-register: EN: Register, DE: Registrieren
 * - imm-feedback-link: EN: Feedback, DE: Feedback
 * - imm-imprint-link: EN: Imprint, DE: Impressum
 *
 * You can enter the button/link text in any language; it will be automatically replaced
 * based on the site language when the page loads.
 *
 * 0.8.16d FIX: gutenberg buttons
 */

/* Base Button Style - Override WordPress Theme Styles */
.wp-block-button.imm-button .wp-block-button__link,
.wp-block-button.imm-button-search .wp-block-button__link,
.wp-block-button.imm-button-login .wp-block-button__link,
.wp-block-button.imm-button-register .wp-block-button__link,
.wp-block-button.imm-feedback-link .wp-block-button__link,
.wp-block-button.imm-imprint-link .wp-block-button__link {
  /* Reset theme styles */
  border-radius: 8px !important;
  padding: 12px 24px !important;
  
  /* IMM Button Style */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-size: 1rem !important;
  line-height: 1.4 !important;
  display: inline-block !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  
  /* Primary Blue Color */
  background-color: #007cba !important;
  background: #007cba !important;
  color: #fff !important;
  border: 2px solid #007cba !important;
  border-width: 2px !important;
  box-shadow: 0 2px 6px rgba(0, 124, 186, 0.3) !important;
}

/* Hover State */
.wp-block-button.imm-button .wp-block-button__link:hover,
.wp-block-button.imm-button-search .wp-block-button__link:hover,
.wp-block-button.imm-button-login .wp-block-button__link:hover,
.wp-block-button.imm-button-register .wp-block-button__link:hover,
.wp-block-button.imm-feedback-link .wp-block-button__link:hover,
.wp-block-button.imm-imprint-link .wp-block-button__link:hover {
  background-color: #005a87 !important;
  background: #005a87 !important;
  border-color: #005a87 !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 124, 186, 0.4) !important;
}

/* Secondary Style - Gray Buttons */
.wp-block-button.imm-button-secondary .wp-block-button__link {
  border-radius: 8px !important;
  padding: 12px 24px !important;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-size: 1rem !important;
  line-height: 1.4 !important;
  transition: all 0.3s ease !important;
  
  background-color: #f0f0f1 !important;
  background: #f0f0f1 !important;
  border: 2px solid #c3c4c7 !important;
  border-width: 2px !important;
  color: #50575e !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

.wp-block-button.imm-button-secondary .wp-block-button__link:hover {
  background-color: #e9e9ea !important;
  background: #e9e9ea !important;
  border-color: #a7aaad !important;
  color: #50575e !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2) !important;
}

/* Danger Style - Red Buttons */
.wp-block-button.imm-button-danger .wp-block-button__link {
  border-radius: 8px !important;
  padding: 12px 24px !important;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-size: 1rem !important;
  line-height: 1.4 !important;
  transition: all 0.3s ease !important;
  
  background-color: #d63638 !important;
  background: #d63638 !important;
  border: 2px solid #d63638 !important;
  border-width: 2px !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(214, 54, 56, 0.3) !important;
}

.wp-block-button.imm-button-danger .wp-block-button__link:hover {
  background-color: #b32d2e !important;
  background: #b32d2e !important;
  border-color: #b32d2e !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(214, 54, 56, 0.4) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .wp-block-button.imm-button .wp-block-button__link,
  .wp-block-button.imm-button-search .wp-block-button__link,
  .wp-block-button.imm-button-login .wp-block-button__link,
  .wp-block-button.imm-button-register .wp-block-button__link,
  .wp-block-button.imm-feedback-link .wp-block-button__link,
  .wp-block-button.imm-imprint-link .wp-block-button__link,
  .wp-block-button.imm-button-secondary .wp-block-button__link,
  .wp-block-button.imm-button-danger .wp-block-button__link {
    padding: 10px 20px !important;
    font-size: 0.95rem !important;
  }
  
  /* Prevent wrapping - keep buttons in one row on mobile */
  .wp-block-buttons {
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }
  
  /* Make buttons smaller to fit in one row */
  .wp-block-buttons .wp-block-button {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  
  .wp-block-buttons .wp-block-button .wp-block-button__link {
    padding: 10px 12px !important;
    font-size: 0.85rem !important;
    white-space: nowrap !important;
  }
}