/**
 * Vitalisite FSE - Layout Utilities
 * 
 * Global layout and utility classes
 * 
 * @package Vitalisite_FSE
 * @since 1.0.0
 */

main {
  min-height: 77vh;
  margin-top: 0;
}

html.vitalisite-motion-pending .reveal-y,
html.vitalisite-motion-pending .reveal-video,
html.vitalisite-motion-pending .reveal-before-after,
html.vitalisite-motion-pending .vitalisite-accordion-item,
html.vitalisite-motion-pending .reveal-stagger > * {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
}

/* Main Section Wrapper - content width + vertical spacing */
.vitalisite-section {
  max-width: 1290px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  --vitalisite-space-2xs: var(--wp--preset--spacing--20);
  --vitalisite-space-xs: var(--wp--preset--spacing--30);
  --vitalisite-space-sm: var(--wp--preset--spacing--40);
  --vitalisite-space-md: var(--wp--preset--spacing--50);
  --vitalisite-space-lg: var(--wp--preset--spacing--60);
  /* Espacement horizontal (Small/Medium fluides) */
  padding-left: var(--wp--preset--spacing--50);
  padding-right: var(--wp--preset--spacing--50);
  /* Espacement vertical resserré pour éviter les "trous" entre sections */
  padding-top: var(--wp--preset--spacing--60);
  padding-bottom: var(--wp--preset--spacing--60);

  /* Le contenu interne des patterns garde un rythme fixe, independant du BO */
  --wp--style--block-gap: var(--wp--preset--spacing--30);
}

/* L'espacement du BO s'applique entre les sections uniquement */
main.wp-block-post-content.is-layout-flow > .vitalisite-section + .vitalisite-section,
main.wp-block-post-content.is-layout-constrained
  > .vitalisite-section
  + .vitalisite-section {
  margin-block-start: var(
    --wp--style--block-gap,
    var(--wp--preset--spacing--70)
  ) !important;
}

.vitalisite-section.big-section {
  max-width: 1440px;
}

.vitalisite-section.full-section {
  max-width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}

/* Le premier pattern d'une page n'a pas besoin d'un padding-top de section:
   l'espace avec le header suffit deja visuellement. */
main.wp-block-post-content > .vitalisite-section:first-child {
  padding-top: 0;
}

.vitalisite-style--mineral .vitalisite-section.full-section {
  padding-left: 0;
  padding-right: 0;
}

/* ==========================================================================
   Section Rhythm
   ========================================================================== */

.vitalisite-section .wp-block-heading {
  margin-block-start: 0;
}

.vitalisite-section .is-layout-flow,
.vitalisite-section .is-layout-constrained {
  --vitalisite-flow-space: var(--vitalisite-space-md);
}

.vitalisite-section .is-layout-flow > * + *,
.vitalisite-section .is-layout-constrained > * + * {
  margin-block-start: var(--vitalisite-flow-space) !important;
}

.vitalisite-section .is-layout-grid {
  gap: var(--vitalisite-flow-space, var(--vitalisite-space-md)) !important;
}

.vitalisite-section .wp-block-columns.is-layout-flex {
  gap: var(--vitalisite-space-lg) !important;
}

.vitalisite-section .wp-block-buttons.is-layout-flex {
  gap: var(--vitalisite-space-xs) !important;
}

.vitalisite-section .mb-60,
.vitalisite-section .wp-block-group.mb-60 {
  --vitalisite-flow-space: var(--vitalisite-space-sm);
}

.vitalisite-section .wp-block-heading + p,
.vitalisite-section .wp-block-heading + .wp-block-paragraph {
  margin-block-start: var(--vitalisite-space-sm) !important;
}

.vitalisite-section .wp-block-heading + .wp-block-buttons,
.vitalisite-section p + .wp-block-buttons,
.vitalisite-section .wp-block-paragraph + .wp-block-buttons {
  margin-block-start: var(--vitalisite-space-md) !important;
}

/* Utilitaires de rythme utilises dans les patterns */
.mb-60 {
  margin-bottom: var(
    --vitalisite-space-lg,
    var(--wp--preset--spacing--60)
  ) !important;
}

.mt-20 {
  margin-top: var(
    --vitalisite-space-2xs,
    var(--wp--preset--spacing--20)
  ) !important;
}

.mt-40 {
  margin-top: var(
    --vitalisite-space-sm,
    var(--wp--preset--spacing--40)
  ) !important;
}

.mt-50 {
  margin-top: var(
    --vitalisite-space-md,
    var(--wp--preset--spacing--50)
  ) !important;
}

.mb-40 {
  margin-bottom: var(
    --vitalisite-space-sm,
    var(--wp--preset--spacing--40)
  ) !important;
}

.mb-50 {
  margin-bottom: var(
    --vitalisite-space-md,
    var(--wp--preset--spacing--50)
  ) !important;
}

/* Footer spacing */
.vitalisite-footer {
  margin-top: 70px;
}

/* ==========================================================================
   Accessibility Utilities (A11y)
   ========================================================================== */

/* Skip to Content Link - Hidden by default, visible on focus */
.skip-link {
  position: absolute;
  top: -9999px;
  left: 0;
  background-color: var(--wp--preset--color--bg);
  color: var(--wp--preset--color--primary);
  padding: 1rem;
  z-index: 9999;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 0 0 8px 0;
}

.skip-link:focus {
  top: 0;
  left: 0;
  width: auto;
  height: auto;
}

/* Improved Focus Visibility */
:focus-visible {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 2px;
}

/* ==========================================================================
   Button Utilities
   ========================================================================== */

.btn-primary .wp-block-button__link {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--on-primary);
  border: 2px solid var(--wp--preset--color--primary);
}

/* Fallback/safeguard: if a primary button is placed on a primary background */
.has-primary-background-color .btn-primary .wp-block-button__link,
.hero-bg .btn-primary .wp-block-button__link,
.btn-primary-on-primary .wp-block-button__link {
  background-color: var(--wp--preset--color--on-primary);
  color: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--on-primary);
}
.has-primary-background-color .btn-primary .wp-block-button__link:hover,
.hero-bg .btn-primary .wp-block-button__link:hover,
.btn-primary-on-primary .wp-block-button__link:hover {
  background-color: transparent;
  color: var(--wp--preset--color--on-primary);
}

.btn-secondary .wp-block-button__link {
  background-color: transparent;
  color: var(--wp--preset--color--primary);
  border: 2px solid var(--wp--preset--color--primary);
}

.btn-primary-soft .wp-block-button__link {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--primary);
  border: 2px solid var(--wp--preset--color--primary);
}

/* Bouton sur fond Primary — toujours lisible quelle que soit la couleur Primary */
/* Fond = on-primary (blanc si primary foncé, noir si primary clair) */
/* Texte = primary */
.btn-on-primary .wp-block-button__link {
  background-color: var(--wp--preset--color--on-primary);
  color: var(--wp--preset--color--primary);
  border: 2px solid var(--wp--preset--color--on-primary);
}

.btn-on-primary .wp-block-button__link:hover {
  background-color: transparent;
  color: var(--wp--preset--color--on-primary);
}

.btn-secondary-soft .wp-block-button__link {
  border: 2px solid var(--wp--preset--color--surface);
  color: var(--wp--preset--color--on-primary);
}

/* Accordion Fixes */
details.vitalisite-accordion-item.is-layout-flow > * {
  margin-block-start: 0 !important;
}

details.vitalisite-accordion-item.is-layout-flow > summary + * {
  margin-top: 0 !important;
}

.vitalisite-slider-wrapper .swiper-navigation-icon,
.vitalisite-testimonials-swiper .swiper-navigation-icon {
  height: 24px;
}

.vitalisite-slider-wrapper .swiper-pagination,
.vitalisite-testimonials-swiper .swiper-pagination {
  position: relative;
}

.vitalisite-slider-wrapper .swiper-pagination-bullet,
.vitalisite-testimonials-swiper .swiper-pagination-bullet {
  background-color: var(--wp--preset--color--primary);
}

.vitalisite-slider-wrapper .swiper-pagination-bullet-active,
.vitalisite-testimonials-swiper .swiper-pagination-bullet-active {
  opacity: 0.6;
}

.hidden-mobile {
  display: none;
  @media screen and (min-width: 782px) {
    display: flex;
  }
}