/**
 * HoplaCollect Content Section Styles (modernized)
 * Scope: Content section only
 */

/* Theming (scoped) - ControleWeb style */
.hc-content-section {
  margin: var(--hc-space-8, 2rem) 0;
  padding: var(--hc-space-8, 2rem) 0 0 0;
  background: transparent;
  border-top: 2px solid var(--hc-primary-500, #3b82f6);
}


/* Content list and items */
.hc-content-list {
  margin: 0;
  padding: 0;
}

.hc-content-item {
  max-width: 700px;
}

/* Content title */
.hc-content-title {
  margin: 0 0 10px;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--hc-text);
  line-height: 1.3;
}

/* Content body (readability) */
.hc-content-body {
  line-height: var(--hc-leading-relaxed, 1.625);
  color: var(--hc-gray-700, #44403c);
  font-size: var(--hc-text-base, 1rem);
}

.hc-content-body p { margin: 0 0 1em; }
.hc-content-body p:last-child { margin-bottom: 0; }

/* Content media elements (exclude gallery images — handled separately) */
.hc-content-body img,
.hc-content-body iframe,
.hc-content-body video,
.hc-content-body embed,
.hc-content-body object {
  max-width: 100%;
  height: auto;
  border-radius: var(--hc-radius-sm);
}
.hc-content-body > img,
.hc-content-body p > img,
.hc-content-body a > img:only-child:not(.gallery-icon img) {
  display: block;
  margin: 16px 0;
}

/* Conteneur WP de la vidéo = pleine largeur, responsive */
.hc-content-body .wp-video,
.hc-content-body .wp-video .mejs-container,
.hc-content-body .wp-video-shortcode {
  width: 100% !important;
  max-width: 100%;
}

.hc-content-body iframe {
  border: none;
  box-shadow: 0 3px 10px rgba(0,0,0,.08);
}

/* Headings inside body */
.hc-content-body h1,
.hc-content-body h2,
.hc-content-body h3,
.hc-content-body h4,
.hc-content-body h5,
.hc-content-body h6 {
  margin: 1.25em 0 .5em;
  color: var(--hc-text);
  line-height: 1.3;
}
.hc-content-body h1 { font-size: 1.75rem; }
.hc-content-body h2 { font-size: 1.5rem; }
.hc-content-body h3 { font-size: 1.25rem; }
.hc-content-body h4 { font-size: 1.125rem; }

/* Lists */
.hc-content-body ul,
.hc-content-body ol { margin: 0 0 1em 1.25em; }
.hc-content-body li { margin: .35em 0; }

/* Links */
.hc-content-body a {
  color: var(--hc-primary-600, #2563eb);
  text-decoration: none;
  font-weight: var(--hc-font-medium, 500);
  transition: color var(--hc-transition-fast, 150ms);
}
.hc-content-body a:hover {
  color: var(--hc-primary-700, #1d4ed8);
  text-decoration: underline;
}

/* Tables */
.hc-content-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: .975rem;
}
.hc-content-body th,
.hc-content-body td {
  padding: 12px 14px;
  text-align: left;
  border: 1px solid var(--hc-border);
}
.hc-content-body th {
  background-color: #f3f4f6;
  font-weight: 600;
}
.hc-content-body tr:nth-child(even) { background-color: #fafafa; }

/* Blockquote */
.hc-content-body blockquote {
  margin: var(--hc-space-5, 1.25rem) 0;
  padding: var(--hc-space-4, 1rem) var(--hc-space-5, 1.25rem);
  border-left: 4px solid var(--hc-primary-500, #3b82f6);
  background-color: var(--hc-primary-50, #eff6ff);
  color: var(--hc-gray-600, #57534e);
  border-radius: 0 var(--hc-radius-lg, 1rem) var(--hc-radius-lg, 1rem) 0;
}

/* Code */
.hc-content-body code {
  background-color: #f3f4f6;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .9em;
}
.hc-content-body pre {
  background-color: #f3f4f6;
  padding: 14px;
  border-radius: var(--hc-radius-sm);
  overflow: auto;
  margin: 1rem 0;
}
.hc-content-body pre code { padding: 0; background: none; }

/* Empty state — direct child only ("Aucun contenu.") */
.hc-content-section > p {
  text-align: center;
  color: var(--hc-muted);
  font-style: italic;
  padding: 28px 0;
  font-size: 1.05rem;
}

/* -----------------------------------------------
   WordPress [gallery] shortcode
   Classic editor generates .gallery with floated
   .gallery-item figures.  We override with flexbox
   for a clean, responsive grid.
   ----------------------------------------------- */
.hc-content-body .gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 1em 0;
  padding: 0;
}
.hc-content-body .gallery::after {
  content: none; /* remove WP clearfix */
}
.hc-content-body .gallery .gallery-item {
  float: none;            /* override WP default */
  margin: 0 !important;   /* override WP inline */
  padding: 0;
  text-align: center;
  flex: 1 1 auto;
  min-width: 0;
}
/* Column widths via flex-basis */
.hc-content-body .gallery-columns-1 .gallery-item { flex-basis: 100%; }
.hc-content-body .gallery-columns-2 .gallery-item { flex-basis: calc(50% - 4px); }
.hc-content-body .gallery-columns-3 .gallery-item { flex-basis: calc(33.333% - 6px); }
.hc-content-body .gallery-columns-4 .gallery-item { flex-basis: calc(25% - 6px); }
.hc-content-body .gallery-columns-5 .gallery-item { flex-basis: calc(20% - 7px); }
.hc-content-body .gallery-columns-6 .gallery-item { flex-basis: calc(16.666% - 7px); }

/* Gallery images: fill their container, no extra spacing */
.hc-content-body .gallery .gallery-icon {
  line-height: 0; /* remove inline gap under img */
}
.hc-content-body .gallery .gallery-icon img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  margin: 0 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none;
  border-radius: var(--hc-radius-sm, 6px);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.hc-content-body .gallery .gallery-icon img:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* Gallery links: no underline, no colored text, no border */
.hc-content-body .gallery .gallery-icon a,
.hc-content-body .gallery a {
  display: block;
  line-height: 0;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  background: none !important;
}

/* Gallery item container: no border from WP/theme */
.hc-content-body .gallery .gallery-item,
.hc-content-body .gallery figure,
.hc-content-body .gallery dt {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: none !important;
}

/* Gallery captions */
.hc-content-body .gallery .gallery-caption {
  margin: 6px 0 0;
  padding: 0 4px;
  font-size: 0.8rem;
  color: var(--hc-gray-500, #78716c);
  line-height: 1.4;
}

/* Responsive: stack on small screens */
@media (max-width: 480px) {
  .hc-content-body .gallery .gallery-item {
    flex-basis: 100% !important;
  }
}

/* -----------------------------------------------
   Gallery & Lightbox protection
   Prevent the design-system button reset from
   breaking theme / WP lightbox close buttons
   rendered inside the content body.
   ----------------------------------------------- */
.hc-content-body button:not([class*="hc-"]),
.hc-content-body .gallery button,
.hc-content-body .wp-lightbox-overlay button,
.hc-content-body .wp-block-image button {
  all: revert;
  cursor: pointer;
}

/* Linked images: pointer by default (navigate) */
.hc-content-body a[href] > img,
#hc-content-description a[href] > img {
  cursor: pointer;
}
/* Lightbox-ready (gallery images) : loupe, even when wrapped in a WP auto-link.
   Specificity raised above `a[href] > img` so the loupe always wins. */
.hc-content-body img.hc-lightbox-ready,
.hc-content-body a[href] > img.hc-lightbox-ready,
#hc-content-description img.hc-lightbox-ready,
#hc-content-description a[href] > img.hc-lightbox-ready {
  cursor: zoom-in;
}

/* -----------------------------------------------
   HoplaCollect Content Lightbox v2 (.hc-clb-*)
   Modern overlay for content images.
   ----------------------------------------------- */

/* Overlay */
.hc-clb-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 250ms ease, visibility 250ms ease;
}
.hc-clb-overlay.hc-clb-visible {
  opacity: 1;
  visibility: visible;
}

/* Image */
.hc-clb-img {
  max-width: 90vw;
  max-height: calc(100vh - 100px);
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 12px 60px rgba(0, 0, 0, 0.6);
  user-select: none;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 250ms ease, transform 300ms ease;
  cursor: zoom-in;
}
.hc-clb-img.hc-clb-img-loaded {
  opacity: 1;
  transform: scale(1);
}
.hc-clb-img.hc-clb-zoomed {
  max-width: none;
  max-height: none;
  width: auto;
  height: auto;
  cursor: zoom-out;
  transform: scale(1);
}

/* Top toolbar */
.hc-clb-toolbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding: 12px 16px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, transparent 100%);
  z-index: 3;
  pointer-events: none;
}
.hc-clb-toolbar > * {
  pointer-events: auto;
}

/* Counter (e.g. "3 / 7") */
.hc-clb-counter {
  margin-right: auto;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

/* Toolbar buttons (close + zoom) */
.hc-clb-btn {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.1);
  transition: background 150ms ease, transform 150ms ease;
}
.hc-clb-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.08);
}
.hc-clb-btn:active {
  transform: scale(0.95);
}

/* Navigation arrows */
.hc-clb-arrow {
  all: unset;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.1);
  transition: background 150ms ease, transform 150ms ease;
  z-index: 2;
}
.hc-clb-prev { left: 16px; }
.hc-clb-next { right: 16px; }
.hc-clb-arrow:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: translateY(-50%) scale(1.1);
}
.hc-clb-arrow:active {
  transform: translateY(-50%) scale(0.92);
}

/* Loading spinner */
.hc-clb-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  pointer-events: none;
}
.hc-clb-spinner-ring {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: #fff;
  border-radius: 50%;
  animation: hc-clb-spin 0.7s linear infinite;
}
@keyframes hc-clb-spin {
  to { transform: rotate(360deg); }
}

/* Mobile: bigger touch targets, adjust spacing */
@media (max-width: 768px) {
  .hc-clb-img {
    max-width: 96vw;
    max-height: calc(100vh - 80px);
    border-radius: 4px;
  }
  .hc-clb-arrow {
    width: 40px;
    height: 40px;
  }
  .hc-clb-prev { left: 8px; }
  .hc-clb-next { right: 8px; }
  .hc-clb-toolbar {
    padding: 8px 12px;
  }
}

/* 3-column layout for Content tab */
.hc-content-three-cols {
  display: grid;
  grid-template-columns: 200px 1fr 400px;
  gap: var(--hc-space-8, 2rem);
  align-items: start;
  transition: grid-template-columns 250ms ease;
}

/* 2-column layout: nav + main (no rewards) */
.hc-content-two-cols.hc-cols-nav-main {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--hc-space-8, 2rem);
  align-items: start;
  transition: grid-template-columns 250ms ease;
}

/* 2-column layout: main + rewards (no nav) */
.hc-content-two-cols.hc-cols-main-rewards {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--hc-space-8, 2rem);
  align-items: start;
  transition: grid-template-columns 250ms ease;
}

/* 1-column layout (no menu, no subrewards) */
.hc-content-one-col {
  display: block;
}

/* Toggles container */
.hc-content-toggles {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

/* Toggle buttons */
button.hc-mini-menu-toggle,
button.hc-subrewards-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px !important;
  background: var(--hc-surface, #fff) !important;
  color: var(--hc-muted, #78716c) !important;
  border: 1px solid var(--hc-border, #e7e5e4) !important;
  box-shadow: none !important;
  font-size: 0.8rem !important;
  font-weight: 500;
  cursor: pointer;
  outline: none !important;
  border-radius: 6px;
  transition: all 150ms ease;
}
button.hc-mini-menu-toggle:hover,
button.hc-subrewards-toggle:hover {
  background: var(--hc-gray-50, #fafaf9) !important;
  border-color: var(--hc-gray-300, #d6d3d1) !important;
  color: var(--hc-text, #1c1917) !important;
}
button.hc-mini-menu-toggle[aria-expanded="true"],
button.hc-subrewards-toggle[aria-expanded="true"] {
  background: var(--hc-primary-50, #eff6ff) !important;
  border-color: var(--hc-primary, #3b82f6) !important;
  color: var(--hc-primary, #3b82f6) !important;
}

/* Toggle icon */
.hc-toggle-icon {
  font-size: 1.1em;
  line-height: 1;
  transition: transform 200ms ease;
}
button.hc-mini-menu-toggle[aria-expanded="true"] .hc-toggle-icon {
  transform: rotate(-90deg);
}
button.hc-subrewards-toggle[aria-expanded="true"] .hc-toggle-icon {
  transform: rotate(90deg);
}

/* Position subrewards toggle to the right */
button.hc-subrewards-toggle {
  margin-left: auto;
}

/* Collapsed menu: hide first column */
.hc-content-three-cols.hc-menu-collapsed {
  grid-template-columns: 0 1fr 400px;
}
.hc-content-two-cols.hc-cols-nav-main.hc-menu-collapsed {
  grid-template-columns: 0 1fr;
}

/* Collapsed subrewards: hide last column */
.hc-content-three-cols.hc-subrewards-collapsed {
  grid-template-columns: 200px 1fr 0;
}
.hc-content-two-cols.hc-cols-main-rewards.hc-subrewards-collapsed {
  grid-template-columns: 1fr 0;
}

/* Both collapsed */
.hc-content-three-cols.hc-menu-collapsed.hc-subrewards-collapsed {
  grid-template-columns: 0 1fr 0;
}

/* Wrapper shrinks when collapsed */
.hc-menu-collapsed .hc-content-mini-menu-wrapper {
  height: 0;
  overflow: hidden;
}
.hc-menu-collapsed .hc-content-main {
  margin-left: calc(-1 * var(--hc-space-8, 2rem));
}

/* Subrewards shrinks when collapsed */
.hc-subrewards-collapsed .hc-content-subrewards {
  height: 0;
  width: 0;
  min-width: 0;
  max-height: 0;
  overflow: hidden;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}
.hc-cols-main-rewards.hc-subrewards-collapsed .hc-content-main,
.hc-content-three-cols.hc-subrewards-collapsed .hc-content-main {
  margin-right: calc(-1 * var(--hc-space-8, 2rem));
}

/* Mini menu (left) */
.hc-content-mini-menu-wrapper {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Menu collapse animation - hidden by default */
.hc-content-mini-menu {
  overflow: hidden;
  transition: opacity 200ms ease, max-height 200ms ease, transform 200ms ease;
  transform-origin: top;
  opacity: 0;
  max-height: 0;
  pointer-events: none;
}
.hc-content-mini-menu.hc-expanded {
  opacity: 1;
  max-height: none;
  pointer-events: auto;
}

.hc-content-mini-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hc-content-mini-menu a {
  display: block;
  padding: 8px 10px;
  color: var(--hc-text);
  text-decoration: none !important;
  border-radius: 8px;
  border: 1px solid var(--hc-border);
  background: var(--hc-surface);
}
.hc-content-mini-menu a:hover {
  color: var(--hc-primary);
  border-color: var(--hc-primary);
}

/* Subrewards (right) */
.hc-content-subrewards {
  display: flex;
  flex-direction: column;
}
.hc-content-subrewards .hc-product-row {
  flex-direction: column !important;
}
.hc-content-subrewards .hc-product-row > .hc-product-card {
  flex: none !important;
  width: 100% !important;
  max-width: 100% !important;
}
.hc-content-subrewards .hc-product-sidebar {
  width: 100% !important;
  padding-top: 0 !important;
}
.hc-subrewards-title {
  margin: 0 0 10px;
  font-size: 1.1rem;
}
.hc-subrewards-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hc-campaign .hc-subrewards-list .hc-product-item {
  list-style: none !important;
  list-style-type: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
}
.hc-campaign .hc-subrewards-list .hc-product-item::before,
.hc-campaign .hc-subrewards-list .hc-product-item::marker {
  content: none !important;
  display: none !important;
}


/* Long description embedded media: prevent horizontal overflow on small
   viewports. */
#hc-content-description img,
#hc-content-description iframe,
#hc-content-description video,
#hc-content-description embed,
#hc-content-description table {
  max-width: 100%;
  height: auto;
}

/* Responsive */
@media (max-width: 992px) {
  .hc-content-three-cols,
  .hc-content-two-cols {
    grid-template-columns: 1fr;
  }
  .hc-content-mini-menu-wrapper, .hc-content-subrewards { position: static; }
  .hc-content-toggles { display: none; }
  .hc-content-subrewards { max-height: none; }
  .hc-subrewards-list { overflow: visible; }
  /* Single-column layout: center both the long description and the
     content blocks (each capped at 700px) so they sit in a balanced
     readable column instead of sticking to the left edge. */
  .hc-content-item,
  #hc-content-description {
    max-width: 700px;
    margin-inline: auto;
  }
}
@media (max-width: 768px) {
  .hc-content-section { margin: 24px 0; }
  .hc-content-section h3 { font-size: 1.5rem; }
  .hc-content-item { padding: 18px; }
  .hc-content-title { font-size: 1.15rem; }
  .hc-content-body { font-size: .975rem; }
  .hc-content-body table { font-size: .9rem; }
  .hc-content-body th, .hc-content-body td { padding: 8px 10px; }
}

/* Sidebar reward cards: mobile image height */
@media (max-width: 768px) {
  .hc-content-subrewards .hc-product-media { height: 200px; }
}

@media (max-width: 576px) {
  .hc-content-section { margin: 20px 0; }
  .hc-content-section h3 { font-size: 1.35rem; }
  .hc-content-title { font-size: 1.05rem; }
  .hc-content-body { font-size: 0.95rem; }
  .hc-content-toggles,
  .hc-content-subrewards,
  .hc-content-mini-menu-wrapper { display: none; }
  .hc-content-three-cols,
  .hc-content-two-cols { display: block; }
  .hc-content-main,
  .hc-content-list { width: 100%; max-width: 100%; padding: 0; }
  /* Keep inner breathing room so body text doesn't touch screen edges. */
  .hc-content-item {
    width: 100%;
    max-width: 100%;
    padding: 14px 12px;
  }
}