/**
 * WordPress-specific CSS overrides for Ambition ESS theme.
 *
 * Fixes differences between Drupal's Twig markup and WordPress's wp_nav_menu output:
 * - Drupal renders dropdowns as <div class="dropdown-menu">, WordPress uses <ul>
 * - WordPress walker adds level-0/has-children classes to desktop nav (Drupal doesn't)
 * - Bootstrap dropdown-toggle caret needs to work with <ul> submenus
 */

/* ==========================================================================
   1. Fix dropdown menus: Drupal uses <div>, WordPress uses <ul>.
   The original CSS targets div.show - replicate for ul.show.
   ========================================================================== */

@media (min-width: 992px) {
  /* Left nav dropdown positioning */
  .block--navigation-ambition-ess ul.dropdown-menu.show,
  .block--navigation-ambitioness-right ul.dropdown-menu.show {
    padding: 30px;
    top: 46px;
    font-size: 1.5rem;
    color: #005E85;
  }

  /* Left nav dropdown items styling */
  .block--navigation-ambition-ess ul.show .dropdown-item,
  .block--navigation-ambitioness-right ul.show .dropdown-item {
    font-weight: 700;
    color: #005E85;
    line-height: 99%;
    letter-spacing: 0.05em;
    padding: 5px 0;
  }

  /* Right nav dropdown positioning (offset left) */
  .block--navigation-ambitioness-right ul.dropdown-menu.show {
    top: 58px;
    left: -230px;
  }
}

/* ==========================================================================
   7. Fix left nav wrapping (THÉMATIQUES wrapping to second line).
   Reduce item padding slightly so all 4 items fit on one line.
   ========================================================================== */

@media (min-width: 1200px) {
  .navbar-left-desktop .nav-desktop .level-0.nav-item {
    padding: 0 7px;
  }
  #navbar1 .navbar-left-desktop .nav-desktop .nav-link {
    padding: 5px 2px;
  }
  #navbar1 .navbar-left-desktop .nav-link.dropdown-toggle::after {
    margin-left: 5px;
  }
}

/* ==========================================================================
   2. Remove double arrow indicators on desktop nav items.
   WordPress walker adds level-0.has-children which triggers a CSS chevron arrow,
   while Bootstrap dropdown-toggle::after provides the ">" indicator.
   Hide the custom CSS arrow on desktop to avoid duplicates.
   ========================================================================== */

.nav-desktop .level-0.has-children.dropdown:after {
  display: none;
}

/* ==========================================================================
   3. Ensure desktop dropdown menus display as block (not columns) for right nav.
   The left nav uses 3-column layout, but right nav should be single column.
   ========================================================================== */

.block--navigation-ambitioness-right .dropdown-menu {
  column-count: auto;
}

/* ==========================================================================
   4. Fix WordPress admin bar offset for fixed header.
   ========================================================================== */

.admin-bar #navbar1 {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar #navbar1 {
    top: 46px;
  }
}

/* ==========================================================================
   5. Fix Bootstrap dropdown-menu display for ul elements.
   Bootstrap's dropdown JS adds .show to the <li> parent and the .dropdown-menu.
   With WordPress, the <ul> dropdown-menu needs proper display.
   ========================================================================== */

.nav-desktop .dropdown-menu {
  display: none;
  border: none;
}

.nav-desktop .dropdown-menu.show {
  display: block;
}

/* ==========================================================================
   Mobile Menu: Override Bootstrap's display:none for submenu dropdowns.
   The mobile menu uses transform for slide animation, not display toggle.
   Only apply on mobile (< 1200px)
   ========================================================================== */

@media (max-width: 1199px) {
  .nav-mobile .dropdown-menu,
  .nav-mobile .menu-drop,
  .nav-mobile .group-1,
  .nav-mobile .group-2 {
    display: block !important;
    position: absolute;
    border: none;
    background-color: #005E85;
    width: 100%;
    left: 0;
    top: 45px;
    min-height: 350px;
    z-index: 5000;
    padding: 0;
    /* Default state: visible (slid in from left) */
    transform: translateX(0) !important;
    transition: transform 0.3s ease;
  }

  /* Hidden state: slid off-screen to the right */
  .nav-mobile .dropdown-menu.is-hidden,
  .nav-mobile .menu-drop.is-hidden,
  .nav-mobile .group-1.is-hidden,
  .nav-mobile .group-2.is-hidden,
  .nav-mobile .is-hidden {
    transform: translateX(100%) !important;
  }

  /* Mobile submenu items - smaller font */
  .nav-mobile .dropdown-menu .dropdown-item,
  .nav-mobile .menu-drop .nav-item a,
  .nav-mobile .group-1 .nav-item a,
  .nav-mobile .group-2 .nav-item a {
    font-size: 1.4rem;
    padding: 10px 15px;
    color: #fff;
  }
}

/* ==========================================================================
   6. Fix the left nav dropdown: single column instead of 3-column layout.
   Override .nav-desktop .menu-drop { column-count: 3 } from ambition_ess.css.
   ========================================================================== */

.nav-desktop .menu-drop {
  -moz-column-count: auto;
  column-count: auto;
  width: auto;
}

@media (min-width: 992px) {
  .block--navigation-ambition-ess ul.dropdown-menu.show {
    position: absolute;
    left: 0;
    padding: 25px 30px;
    background-color: #fff;
    box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.25);
    z-index: 50;
    min-width: 250px;
    width: auto;
  }

  .block--navigation-ambition-ess ul.dropdown-menu.show .nav-item {
    margin-bottom: 0px;
    display: block;
  }

  .block--navigation-ambition-ess ul.dropdown-menu.show .dropdown-item {
    text-transform: uppercase;
    padding: 5px 0;
    white-space: nowrap;
  }
}

/* ==========================================================================
   8. Account Pages — Login, Registration, Dashboard, Profile Edit
   ========================================================================== */

/* --- Flash Messages --- */
.ess-flash {
  padding: 12px 18px;
  border-radius: 4px;
  margin-bottom: 20px;
  font-size: 1.4rem;
}
.ess-flash--error {
  background-color: #fce4e4;
  border: 1px solid #e74c3c;
  color: #c0392b;
}
.ess-flash--success {
  background-color: #e8f8e8;
  border: 1px solid #27ae60;
  color: #1e8449;
}
.ess-flash--info {
  background-color: #e8f0fe;
  border: 1px solid #3498db;
  color: #2471a3;
}

/* --- Login Form --- */
.ess-login-form {
  max-width: 500px;
  margin: 30px auto;
  padding: 30px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.ess-login-form h2 {
  font-size: 2.4rem;
  margin-bottom: 25px;
  color: #005E85;
}
.ess-login-form .form-group {
  margin-bottom: 18px;
}
.ess-login-form label {
  font-weight: 600;
  font-size: 1.4rem;
  margin-bottom: 5px;
  display: block;
}
.ess-login-form .form-control {
  padding: 10px 14px;
  font-size: 1.4rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
}
.ess-login-form .form-control:focus {
  border-color: #005E85;
  box-shadow: 0 0 0 0.2rem rgba(0, 94, 133, 0.15);
}
.ess-login-form .btn-primary {
  background-color: #005E85;
  border-color: #005E85;
  padding: 10px 30px;
  font-size: 1.5rem;
  width: 100%;
  margin-top: 10px;
}
.ess-login-form .btn-primary:hover {
  background-color: #004a6b;
  border-color: #004a6b;
}
.ess-login-links {
  margin-top: 20px;
  font-size: 1.3rem;
  text-align: center;
}
.ess-login-links a {
  color: #005E85;
  text-decoration: underline;
}

/* --- Password Reset Section --- */
.ess-reset-section {
  display: none;
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

/* --- Registration Form --- */
.ess-register-form {
  max-width: 700px;
  margin: 30px auto;
  padding: 30px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.ess-register-form h2 {
  font-size: 2.4rem;
  margin-bottom: 25px;
  color: #005E85;
}
.ess-register-form fieldset {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 20px 25px;
  margin-bottom: 25px;
}
.ess-register-form legend {
  font-size: 1.6rem;
  font-weight: 700;
  color: #005E85;
  width: auto;
  padding: 0 10px;
  margin-bottom: 0;
}
.ess-register-form .form-group {
  margin-bottom: 16px;
}
.ess-register-form label {
  font-weight: 600;
  font-size: 1.4rem;
  margin-bottom: 5px;
  display: block;
}
.ess-register-form .form-control,
.ess-register-form .form-control-file {
  padding: 8px 12px;
  font-size: 1.4rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
}
.ess-register-form textarea.form-control {
  min-height: 100px;
}
.ess-register-form .btn-primary {
  background-color: #005E85;
  border-color: #005E85;
  padding: 10px 30px;
  font-size: 1.5rem;
}
.ess-register-form .btn-primary:hover {
  background-color: #004a6b;
  border-color: #004a6b;
}
.ess-register-form .btn-outline-secondary {
  font-size: 1.3rem;
  padding: 6px 16px;
}

/* Structure autocomplete dropdown */
.ess-structure-autocomplete-wrap {
  position: relative;
}
#ess-structure-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  background: #fff;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 4px 4px;
  max-height: 200px;
  overflow-y: auto;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}
.ess-autocomplete-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 1.4rem;
}
.ess-autocomplete-item:hover {
  background-color: #f0f7fb;
}
.ess-autocomplete-empty {
  color: #999;
  cursor: default;
}

/* New structure section (hidden by default) */
#ess-new-structure-section {
  display: none;
}

/* --- Dashboard --- */
.ess-dashboard {
  max-width: 800px;
  margin: 30px auto;
}
.ess-dashboard h2 {
  font-size: 2.4rem;
  color: #005E85;
  margin-bottom: 25px;
}
.ess-dashboard-card {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  padding: 25px;
  margin-bottom: 25px;
}
.ess-dashboard-card h3 {
  font-size: 1.8rem;
  color: #005E85;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #f0f0f0;
}
.ess-dashboard-card dl {
  margin: 0;
}
.ess-dashboard-card dt {
  font-weight: 600;
  font-size: 1.3rem;
  color: #666;
  margin-top: 10px;
}
.ess-dashboard-card dd {
  font-size: 1.5rem;
  margin-left: 0;
  margin-bottom: 5px;
}
.ess-dashboard-card .badge {
  font-size: 1.1rem;
  padding: 3px 8px;
}

/* Quick actions */
.ess-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.ess-quick-actions .btn {
  font-size: 1.3rem;
  padding: 8px 16px;
}

/* --- Profile Edit --- */
.ess-profile-form {
  max-width: 600px;
  margin: 30px auto;
  padding: 30px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.ess-profile-form h2 {
  font-size: 2.4rem;
  margin-bottom: 25px;
  color: #005E85;
}
.ess-profile-form .form-group {
  margin-bottom: 18px;
}
.ess-profile-form label {
  font-weight: 600;
  font-size: 1.4rem;
  margin-bottom: 5px;
  display: block;
}
.ess-profile-form .form-control {
  padding: 10px 14px;
  font-size: 1.4rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
}
.ess-profile-form .btn-primary {
  background-color: #005E85;
  border-color: #005E85;
  padding: 10px 30px;
  font-size: 1.5rem;
}

/* CAPTCHA */
.ess-captcha {
  background: #f7f7f7;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
}
.ess-captcha label {
  font-weight: 600;
  font-size: 1.5rem;
}
.ess-captcha input[type="number"] {
  max-width: 100px;
  font-size: 1.6rem;
  text-align: center;
}

/* Form validation feedback */
.is-invalid {
  border-color: #e74c3c !important;
}
.invalid-feedback {
  color: #e74c3c;
  font-size: 1.2rem;
  margin-top: 4px;
}

/* Required field asterisk */
.ess-register-form .required,
.ess-login-form .required,
.ess-profile-form .required,
.ess-content-form .required {
  color: #e74c3c;
}

/* ==========================================================================
   9. Flash Messages (new hyphenated variant used by account templates)
   ========================================================================== */

.ess-flash-message {
  padding: 12px 18px;
  border-radius: 4px;
  margin-bottom: 20px;
  font-size: 1.4rem;
}
.ess-flash-error {
  background-color: #fce4e4;
  border: 1px solid #e74c3c;
  color: #c0392b;
}
.ess-flash-success {
  background-color: #e8f8e8;
  border: 1px solid #27ae60;
  color: #1e8449;
}
.ess-flash-info {
  background-color: #e8f0fe;
  border: 1px solid #3498db;
  color: #2471a3;
}

/* ==========================================================================
   10. My Content — Listing Page
   ========================================================================== */

.ess-my-content {
  max-width: 900px;
  margin: 30px auto;
}
.ess-my-content h2 {
  font-size: 2.4rem;
  color: #005E85;
  margin-bottom: 20px;
}

/* --- Tab Bar --- */
.ess-content-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #f0f0f0;
}
.ess-content-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  font-size: 1.3rem;
  font-weight: 600;
  color: #555;
  background: #f5f5f5;
  border-radius: 20px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.ess-content-tabs a:hover {
  background: #e0e0e0;
  color: #333;
}
.ess-content-tabs a.active {
  background: #005E85;
  color: #fff;
}
.ess-content-tabs .badge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.12);
  color: inherit;
}
.ess-content-tabs a.active .badge-count {
  background: rgba(255, 255, 255, 0.3);
}

/* --- Content Table --- */
.ess-content-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.ess-content-table thead {
  background: #f8f9fa;
}
.ess-content-table th {
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #666;
  padding: 12px 15px;
  text-align: left;
  border-bottom: 2px solid #eee;
}
.ess-content-table td {
  padding: 12px 15px;
  font-size: 1.4rem;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
}
.ess-content-table tbody tr:hover {
  background: #f8f9fa;
}
.ess-content-table tbody tr:last-child td {
  border-bottom: none;
}

/* --- Status Badges --- */
.ess-status-badge {
  display: inline-block;
  padding: 3px 10px;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 12px;
  white-space: nowrap;
}
.ess-status-publish {
  background: #e8f8e8;
  color: #1e8449;
}
.ess-status-draft {
  background: #fff3e0;
  color: #e67e22;
}
.ess-status-pending {
  background: #e8f0fe;
  color: #2471a3;
}

/* --- Content Action Links --- */
.ess-content-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
}
.ess-content-actions a {
  font-size: 1.3rem;
  color: #005E85;
  text-decoration: none;
  white-space: nowrap;
}
.ess-content-actions a:hover {
  text-decoration: underline;
}
.ess-content-actions .action-delete {
  color: #e74c3c;
}
.ess-content-actions .action-delete:hover {
  color: #c0392b;
}

/* --- Empty State --- */
.ess-empty-state {
  text-align: center;
  padding: 50px 20px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.ess-empty-state i.las {
  font-size: 5rem;
  color: #ccc;
  display: block;
  margin-bottom: 15px;
}
.ess-empty-state p {
  font-size: 1.6rem;
  color: #888;
  margin-bottom: 20px;
}

/* --- Pagination --- */
.ess-pagination {
  text-align: center;
}
.ess-pagination .page-numbers {
  display: inline-block;
  padding: 6px 12px;
  margin: 0 3px;
  font-size: 1.3rem;
  border-radius: 4px;
  color: #005E85;
  text-decoration: none;
  background: #f5f5f5;
  transition: background 0.2s;
}
.ess-pagination .page-numbers:hover {
  background: #e0e0e0;
}
.ess-pagination .page-numbers.current {
  background: #005E85;
  color: #fff;
}

/* ==========================================================================
   11. Content Form — Create / Edit
   ========================================================================== */

.ess-content-form {
  max-width: 800px;
  margin: 30px auto;
}
.ess-content-form h2 {
  font-size: 2.4rem;
  color: #005E85;
  margin-bottom: 25px;
}
.ess-content-form fieldset {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 25px;
  margin-bottom: 20px;
}
.ess-content-form legend {
  font-size: 1.7rem;
  font-weight: 700;
  color: #005E85;
  padding: 0 8px;
  width: auto;
}
.ess-content-form label {
  font-weight: 600;
  font-size: 1.4rem;
  margin-bottom: 5px;
  display: block;
}
.ess-content-form .form-control {
  padding: 10px 14px;
  font-size: 1.4rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
}
.ess-content-form .form-control:focus {
  border-color: #005E85;
  box-shadow: 0 0 0 0.2rem rgba(0, 94, 133, 0.15);
}
.ess-content-form .form-check-label {
  font-weight: 400;
  font-size: 1.4rem;
  display: inline;
}
.ess-content-form .btn-primary {
  background-color: #005E85;
  border-color: #005E85;
  padding: 10px 30px;
  font-size: 1.5rem;
}
.ess-content-form .btn-primary:hover {
  background-color: #004a6b;
  border-color: #004a6b;
}

/* --- File / Image Fields --- */
.ess-file-field {
  position: relative;
}
.ess-current-file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #f8f9fa;
  border: 1px solid #eee;
  border-radius: 4px;
  margin-bottom: 10px;
}
.ess-current-file .filename {
  font-size: 1.3rem;
  color: #555;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ess-current-file.ess-file-removed {
  display: none;
}
.ess-file-preview {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #ddd;
}
.ess-new-preview {
  margin-bottom: 10px;
}
.ess-new-preview .ess-file-preview {
  width: 120px;
  height: 120px;
}
.form-control-file {
  font-size: 1.3rem;
  padding: 6px 0;
}
.ess-remove-file {
  font-size: 1.2rem;
  flex-shrink: 0;
}

/* --- Domain Access Checkboxes --- */
.ess-domain-access-list {
  columns: 2;
  column-gap: 20px;
}
.ess-domain-access-list .form-check {
  break-inside: avoid;
}

/* --- Chosen.js Overrides for Content Form --- */
.ess-content-form .chosen-container {
  font-size: 1.4rem;
}
.ess-content-form .chosen-container-multi .chosen-choices {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 6px;
  min-height: 42px;
}
.ess-content-form .chosen-container-active .chosen-choices {
  border-color: #005E85;
  box-shadow: 0 0 0 0.2rem rgba(0, 94, 133, 0.15);
}

/* --- Validation (content form specific) --- */
.ess-content-form .is-invalid {
  border-color: #e74c3c !important;
}
.ess-field-error {
  color: #e74c3c;
  font-size: 1.2rem;
  margin-top: 4px;
}

/* --- wp_editor TinyMCE wrapper --- */
.ess-content-form .wp-editor-wrap {
  margin-bottom: 5px;
}

/* ==========================================================================
   12. Delete Confirmation
   ========================================================================== */

.ess-delete-confirm {
  max-width: 550px;
  margin: 30px auto;
}
.ess-delete-confirm .ess-login-form {
  max-width: 100%;
}
.ess-delete-confirm h2 {
  font-size: 2rem;
  color: #005E85;
}

/* ==========================================================================
   13. Responsive Adjustments for Content Management
   ========================================================================== */

@media (max-width: 767px) {
  .ess-content-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
  }
  .ess-content-tabs a {
    font-size: 1.2rem;
    padding: 5px 10px;
  }
  .ess-content-table th,
  .ess-content-table td {
    padding: 10px;
    font-size: 1.2rem;
  }
  .ess-content-actions a {
    font-size: 1.2rem;
  }
  .ess-content-actions a span,
  .ess-content-actions .action-edit {
    font-size: 0;
  }
  .ess-content-actions .action-edit i {
    font-size: 1.6rem;
  }
  .ess-content-form fieldset {
    padding: 15px;
  }
  .ess-domain-access-list {
    columns: 1;
  }
  .ess-content-form {
    margin-left: 10px;
    margin-right: 10px;
  }
  .ess-my-content {
    margin-left: 10px;
    margin-right: 10px;
  }
}

/* ==========================================================================
   14. Center pagination on all archive/listing pages
   ========================================================================== */

.navigation .pagination,
nav .pagination {
  justify-content: center;
}
.navigation {
  text-align: center;
}

/* ==========================================================================
   15. Utility: text-align-right (used by link-more-content blocks)
   ========================================================================== */

.text-align-right {
  text-align: right;
}

.text-align-center {
  text-align: center;
}

/* ==========================================================================
   16. Hide sidebar-right on single pages (Alpesolidaires & ESS)
   The sidebar contains "Evenement" and "Emploi" blocks that are not needed.
   ========================================================================== */

.sidebar-right {
  display: none !important;
}

/* Expand main content to full width when sidebar is hidden - only for single posts (articles) */
/* Job offers, events, etc. keep their 2-column layout */
.page-node-post .node .col-md-8 {
  flex: 0 0 100%;
  max-width: 100%;
}

/* ==========================================================================
   17. Calendar: long-span events (training courses / multi-session events)
   Events with a single date entry spanning >3 days are collapsed to their
   start date and displayed with an orange badge showing the full date range.
   ========================================================================== */

.ess-long-span-event {
  border-left: 3px solid #e67e22 !important;
}

.ess-date-range-badge {
  font-size: 0.85em;
  opacity: 0.85;
  font-style: italic;
  margin-left: 4px;
}

/* List views: badge text in orange */
.fc-list-item .ess-date-range-badge {
  color: #e67e22;
  font-weight: normal;
}

/* Grid views: badge text in white on colored background */
.fc-day-grid-event .ess-date-range-badge,
.fc-time-grid-event .ess-date-range-badge {
  color: #fff;
}