/*
 * frontend + editor (Gutenberg) content (in the iframe)
 * does not apply to the editor (Gutenberg) UI in general
 */

/* Note on handling the absence of gaps between LPU sections ("bands").
 * By default, WordPress adds a gap between top-level page blocks through the
 * parent container's blockGap setting.
 *
 * Page templates keep a medium blockGap on wp:post-content for ordinary blocks.
 * The top-level .lpu-section marker cancels that gap between adjacent editorial
 * sections; section/content boundaries receive their own compact spacing below.
 * For adjacent sections nested in another container, set that container's
 * blockGap to zero when they should touch.
 *
 */

/* WordPress emits the theme.json token on :root after this stylesheet.
 * A more specific mobile override keeps section spacing constant between
 * breakpoints instead of changing continuously with the viewport width. */
@media (max-width: 781px) {
  html:root {
    --wp--custom--spacing--section: 3rem;
  }
}

/*****************************************************************************/
/* DECORATIVE MOTIFS                                                         */
/*****************************************************************************/
/* Decorative motifs are applied as backgrounds, not editorial images. */
/* to make repeatable would have to : 
   background-repeat: repeat-y;
   remove background-size: cover;*/
.lpu-motif {
  /* is at the top. Pattern may be at the top then nothing below if the content
  taller than the pattern*/
  background-position: center top;
  /*patterns not designed to be repeatable*/
  background-repeat: no-repeat;
  background-repeat: repeat-y;
  /* take entire width */
  background-size: cover;
}

.lpu-motif-1-bandeau {
  background-image: url("../images/motif-1-bandeau.svg");
}

.lpu-motif-1-carre {
  background-image: url("../images/motif-1-carre.svg");
}

.lpu-motif-2-bandeau {
  background-image: url("../images/motif-2-bandeau.svg");
}

.lpu-motif-2-carre {
  background-image: url("../images/motif-2-carre.svg");
}

.lpu-motif-3-bandeau {
  background-image: url("../images/motif-3-bandeau.svg");
}

.lpu-motif-3-carre {
  background-image: url("../images/motif-3-carre.svg");
}

.lpu-motif-4-bandeau {
  background-image: url("../images/motif-4-bandeau.svg");
}

.lpu-motif-4-carre {
  background-image: url("../images/motif-4-carre.svg");
}

.lpu-motif-5-bandeau {
  background-image: url("../images/motif-5-bandeau.svg");
}

.lpu-motif-5-carre {
  background-image: url("../images/motif-5-carre.svg");
}

.lpu-motif-7-bandeau {
  background-image: url("../images/motif-7-bandeau.svg");
}

.lpu-motif-7-carre {
  background-image: url("../images/motif-7-carre.svg");
}

.lpu-motif-8-bandeau {
  background-image: url("../images/motif-8-bandeau.svg");
}

.lpu-motif-8-carre {
  background-image: url("../images/motif-8-carre.svg");
}

/*****************************************************************************/
/* SPLIT-SECTION FRAMES                                                      */
/*****************************************************************************/
.wp-block-lpu-split-zone--frame-none {
  background: transparent;
}

.wp-block-lpu-split-zone--frame-ecru {
  background-color: var(--wp--preset--color--ecru);
}

.wp-block-lpu-split-zone--frame-green {
  background-color: var(--wp--preset--color--vert-fonce);
}

.wp-block-lpu-split-zone--frame-yellow {
  background-color: var(--wp--preset--color--jaune);
}

.wp-block-lpu-split-zone--frame-motif-1 {
  background: url("../images/motif-1-carre.svg") center / cover no-repeat;
}

.wp-block-lpu-split-zone--frame-motif-2 {
  background: url("../images/motif-2-carre.svg") center / cover no-repeat;
}

.wp-block-lpu-split-zone--frame-motif-3 {
  background: url("../images/motif-3-carre.svg") center / cover no-repeat;
}

.wp-block-lpu-split-zone--frame-motif-4 {
  background: url("../images/motif-4-carre.svg") center / cover no-repeat;
}

.wp-block-lpu-split-zone--frame-motif-5 {
  background: url("../images/motif-5-carre.svg") center / cover no-repeat;
}

.wp-block-lpu-split-zone--frame-motif-7 {
  background: url("../images/motif-7-carre.svg") center / cover no-repeat;
}

.wp-block-lpu-split-zone--frame-motif-8 {
  background: url("../images/motif-8-carre.svg") center / cover no-repeat;
}

/*****************************************************************************/
/* HEADER SHELL                                                              */
/*****************************************************************************/
.lpu-header {
  /* anchors mega menu */
  position: relative;
  z-index: 10;
  padding: 1rem clamp(1rem, 3vw, 3rem);
  background: var(--wp--preset--color--ecru);
  /* Shared colour for the logo and all menu foreground elements. */
  --lpu-header-foreground: var(--wp--preset--color--vert-fonce);
}

/*****************************************************************************/
/* TRANSPARENT HEADER STATE                                                  */
/*****************************************************************************/
/* .lpu-header-transparent = must use transparent header.
 * .lpu-header-transparent is set on the body by the php code of the theme.
 * Set if meta on a post, meta set when user activate a custom setting in the
 * page editor.
 */
body.lpu-header-transparent .lpu-header {
  /* Keep the transparent Home header out of normal flow so that the content
  can be at the top, right under the header (instead of below the header). */
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  background: transparent;
}

/* Absolute positioning removes the transparent header from the normal
 * document flow, so it is not naturally under the admin bar.
 * Therefore account for WordPress's fixed admin bar when an editor
 * is previewing the page while logged in. Without this offset the admin bar
 * covers the top of the header and makes its contents appear shorter than
 * the opaque state. */
body.admin-bar.lpu-header-transparent .lpu-header {
  top: 32px;
}
/* WordPress uses a taller admin bar on narrow screens. */
@media screen and (max-width: 782px) {
  body.admin-bar.lpu-header-transparent .lpu-header {
    top: 46px;
  }
}

/* Applied to the element which is after the <header> : <main>. 
 * Must remove the top margin when using the transparent header, otherwise
 * there would be an empty space at the top of <main> : the margin.
 * With the non transparent header it's not much of a problem : just some
 * extra empty space on top. 
 */
body.lpu-header-transparent .wp-site-blocks > main.wp-block-group {
  margin-block-start: 0;
}

/* On a transparent header, the editor setting controls the logo and all menu
 * foreground elements independently from the header background. */
body.lpu-header-foreground-ecru .lpu-header {
  --lpu-header-foreground: var(--wp--preset--color--ecru);
}

/* Every open menu uses green on ecru, regardless of the page settings. */
body
  .lpu-header:has(
    /* in mobile mode : clicked on the hamburger buton and the mobile menu is
    open */
    .wp-block-navigation__responsive-container.is-menu-open,
    /* Core's actual expanded state, for mouse, touch and keyboard alike. */
    .wp-block-navigation-submenu__toggle[aria-expanded="true"],
    .wp-block-navigation__submenu-icon[aria-expanded="true"]
  ) {
  --lpu-header-foreground: var(--wp--preset--color--vert-fonce);
  background: var(--wp--preset--color--ecru);
}

/*****************************************************************************/
/* HEADER FOREGROUND, FOCUS, AND LOGO VARIANTS                               */
/*****************************************************************************/
/* Make sure that the elements of the header have the --lpu-header-foreground
color */
/* menu items (technically their content) */
.lpu-header .wp-block-navigation-item__content,
 /* arrow of menu items with submenus */
.lpu-header .wp-block-navigation__submenu-icon,
 /* hamburger and mobile-overlay close buttons */
.lpu-header .wp-block-navigation__responsive-container-open,
.lpu-header .wp-block-navigation__responsive-container-close {
  color: var(--lpu-header-foreground) !important;
}

/* There are two logo variants (configured in the Customizer).
 * custom-logo is the green variant and lpu-logo-ecru is the ecru variant.
 * They follow the selected foreground colour. */
body.lpu-header-foreground-ecru
  .lpu-header
  .wp-block-site-logo:where(:has(img.lpu-logo-ecru))
  img.custom-logo {
  display: none;
}

body.lpu-header-foreground-ecru
  .lpu-header
  .wp-block-site-logo
  img.lpu-logo-ecru {
  display: block;
}

/* Every open menu uses the green logo on its opaque ecru background. */
body
  .lpu-header:has(
    .wp-block-navigation__responsive-container.is-menu-open,
    .wp-block-navigation-submenu__toggle[aria-expanded="true"],
    .wp-block-navigation__submenu-icon[aria-expanded="true"]
  )
  .wp-block-site-logo
  img.custom-logo {
  display: block;
}

body
  .lpu-header:has(
    .wp-block-navigation__responsive-container.is-menu-open,
    .wp-block-navigation-submenu__toggle[aria-expanded="true"],
    .wp-block-navigation__submenu-icon[aria-expanded="true"]
  )
  .wp-block-site-logo
  img.lpu-logo-ecru {
  display: none;
}

/*****************************************************************************/
/* HEADER NAVIGATION CONTAINER                                               */
/*****************************************************************************/
/* The site logo sits inside the navigation, in the center grid track. Core
 * wraps it in a nav item li; only its own track is sized (auto), so the logo
 * never overlaps the two flanking nav-groups. */
.lpu-header .wp-block-site-logo {
  margin: 0;
  width: var(--wp--custom--header--logo-width);
}

/* The header link stacks the green logo (custom_logo) and the ecru variant in
 * the same grid cell; the visibility rules above pick which one shows. */
.lpu-header__logo .custom-logo-link {
  display: grid;
}

.lpu-header__logo .custom-logo-link > img {
  grid-area: 1 / 1;
}

/* Hide the ecru variant by default. The selected and open-state rules above
 * have greater specificity and choose the visible variant. */
.lpu-header .wp-block-site-logo img.lpu-logo-ecru {
  display: none;
}

.lpu-header .wp-block-navigation {
  /* Limit maximum width of the menu to wideSize (theme.json) */
  width: min(100%, var(--wp--style--global--wide-size, 1200px));
  margin-inline: auto;
  min-width: 0;
  max-width: none;
}

.lpu-header .wp-block-navigation__responsive-container,
.lpu-header .wp-block-navigation__responsive-close,
.lpu-header .wp-block-navigation__responsive-dialog,
.lpu-header .wp-block-navigation__responsive-container-content {
  width: 100%;
}

.lpu-header .wp-block-navigation__container {
  width: 100%;
  max-width: none;
  align-items: center;
}

/* Desktop three-region layout: the two nav-groups share the side tracks and
 * the site logo keeps the center track, so the logo is centered by the grid
 * itself instead of by absolute positioning. Scoped to the closed container
 * so the mobile overlay keeps Core's single-column list. */
.lpu-header
  .wp-block-navigation__responsive-container:not(.is-menu-open)
  .wp-block-navigation__container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 1rem;
}

/*****************************************************************************/
/* HEADER LINK TYPOGRAPHY AND INTERACTION                                    */
/*****************************************************************************/
/* Increase specificity to beat Core CSS that reduces padding with the following
selector :
`.wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle` */
.lpu-header
  .wp-block-navigation-item__content.wp-block-navigation-item__content.wp-block-navigation-item__content {
  padding-inline: 0.75rem;
  font-family: var(--wp--preset--font-family--oswald);
  text-transform: uppercase;
}

.lpu-header .wp-block-navigation-item__content:focus-visible,
.lpu-header .wp-block-navigation__submenu-icon:focus-visible,
.lpu-header .wp-block-navigation__responsive-container-open:focus-visible,
.lpu-header .wp-block-navigation__responsive-container-close:focus-visible,
.lpu-header .custom-logo-link:focus-visible {
  outline: 2px solid var(--lpu-header-foreground);
  /* too much offset, default is ok */
  /* outline-offset: 3px; */
}

.lpu-header .wp-block-navigation-item__content:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.lpu-header .wp-block-navigation__submenu-icon {
  color: var(--lpu-header-foreground);
}

.lpu-header .wp-block-navigation__responsive-container.is-menu-open {
  box-sizing: border-box;
  padding: 1.5rem;
  background: var(--wp--preset--color--ecru);
  color: var(--lpu-header-foreground);
}

.lpu-header
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content {
  font-size: var(--wp--custom--header--overlay-font-size);
}

/* The compact header can open Core's overlay above 600px too. Its custom
 * nav-group list misses Core's gap, so space its items in every open overlay
 * and keep submenu links close to their parent label. */
.lpu-header
  .wp-block-navigation__responsive-container.is-menu-open
  .lpu-nav-group__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: var(--wp--preset--spacing--sm);
}

.lpu-header
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container {
  padding-block-start: var(--wp--preset--spacing--xs);
}

/* The site logo is a nav item on desktop; in Core's open overlay it would
 * become an entry of the vertical list, so it is hidden there. */
.lpu-header
  .wp-block-navigation__responsive-container.is-menu-open
  li:has(.lpu-header__logo) {
  display: none;
}

/*****************************************************************************/
/* HEADER NAVIGATION GROUPS                                                  */
/*****************************************************************************/
/* Desktop nav-group: each group is a grid item hugging its rail edge.
 * min-width: 0 lets its 1fr track shrink; overflow: hidden clips a
 * still-too-wide group while navigation.js decides whether to switch to
 * compact. Scoped to the closed container so the mobile overlay keeps Core's
 * stacked list. */
.lpu-header .lpu-nav-group__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lpu-header
  .wp-block-navigation__responsive-container:not(.is-menu-open)
  .lpu-nav-group {
  position: static;
  min-width: 0;
  /* overflow: hidden; */
}

.lpu-header
  .wp-block-navigation__responsive-container:not(.is-menu-open)
  .lpu-nav-group__list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(0.25rem, 1vw, 1rem);
  min-width: 0;
}

/* content of nav section on the left justified towards the logo */
.lpu-header
  .wp-block-navigation__responsive-container:not(.is-menu-open)
  .lpu-header__navigation
  > .wp-block-navigation-item:first-child {
  justify-content: end;
}

/* The closing group sits in the last (1fr) track; pack its items toward the
 * rail's outer edge so the three regions mirror each other. */
.lpu-header
  .wp-block-navigation__responsive-container:not(.is-menu-open)
  .lpu-nav-group:last-child
  .lpu-nav-group__list {
  justify-content: flex-end;
}

/* Keep every top-level label on one line; without nowrap the text wraps
 * inside a shrinking group and the overflow check never triggers. */
.lpu-header
  .wp-block-navigation__responsive-container:not(.is-menu-open)
  .lpu-nav-group
  > .lpu-nav-group__list
  > .wp-block-navigation-item
  > .wp-block-navigation-item__content {
  white-space: nowrap;
}

/*****************************************************************************/
/* DESKTOP SUBMENU / MEGA-MENU PANEL                                         */
/*****************************************************************************/
/* Desktop: keep the whole nav stack static so the full-width submenu panel
 * anchors to .lpu-header (position: relative) rather than to the nav rail. */
.lpu-header .wp-block-navigation,
.lpu-header .wp-block-navigation__responsive-container:not(.is-menu-open),
.lpu-header
  .wp-block-navigation__responsive-container:not(.is-menu-open)
  .wp-block-navigation__responsive-close,
.lpu-header
  .wp-block-navigation__responsive-container:not(.is-menu-open)
  .wp-block-navigation__responsive-dialog,
.lpu-header
  .wp-block-navigation__responsive-container:not(.is-menu-open)
  .wp-block-navigation__responsive-container-content {
  position: static;
}

/* Mega-menu: where the submenu lives inside a nav-group list, it still opens
 * as a full-width panel under the header bar. */
.lpu-header .wp-block-navigation-submenu {
  position: static;
}

.lpu-header
  .wp-block-navigation__responsive-container:not(.is-menu-open)
  .wp-block-navigation__submenu-container {
  top: calc(100% - var(--lpu-submenu-overlap, 0px));
  /* Immediate switch to opaque to match the header. Without it the mega-menu
    fades (coming from  Core's panel fade)
   * Without it the header would immediately while the mega-menu would fade in
   * which looked wrong. */
  transition: none;
  inset-inline: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
  width: auto;
  min-width: 0;
  height: auto;
  padding-block-start: calc(
    var(--wp--preset--spacing--md) + var(--lpu-submenu-overlap, 0px)
  );
  padding-inline: clamp(
    var(--wp--preset--spacing--md),
    3vw,
    var(--wp--preset--spacing--lg)
  );
  padding-block-end: var(--wp--preset--spacing--md);
  background: var(--wp--preset--color--ecru) !important;
  border: 0;
  color: var(--lpu-header-foreground);
  z-index: 1;
}

/* Raise the controls, not their parent items: the full-width panels must
 * remain in the header's stacking context so siblings can sit above them. */
.lpu-header
  .wp-block-navigation__responsive-container:not(.is-menu-open)
  .lpu-nav-group__list
  > .wp-block-navigation-item
  > .wp-block-navigation-item__content,
.lpu-header
  .wp-block-navigation__responsive-container:not(.is-menu-open)
  .lpu-nav-group__list
  > .wp-block-navigation-item
  > .wp-block-navigation__submenu-icon,
.lpu-header
  .wp-block-navigation__responsive-container:not(.is-menu-open)
  .wp-block-site-logo {
  position: relative;
  z-index: 2;
}

.lpu-header
  .wp-block-navigation__responsive-container:not(.is-menu-open)
  .wp-block-navigation__submenu-container
  > .wp-block-navigation-item {
  flex: 0 0 var(--wp--custom--header--mega-menu-item-column-width);
  width: var(--wp--custom--header--mega-menu-item-column-width);
  min-width: 0;
}

.lpu-header
  .wp-block-navigation__responsive-container:not(.is-menu-open)
  .wp-block-navigation__submenu-container
  > .wp-block-navigation-item
  > .wp-block-navigation-item__content {
  display: block;
  padding: var(--wp--preset--spacing--xs) 0;
  width: 100%;
  min-width: 0;
  /* The generic header link rule above supplies the same Ruden typography,
   * uppercase treatment, and interaction as the parent menu items. */
  text-wrap: balance;
}

.lpu-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
  padding-inline: 0;
}

/*****************************************************************************/
/* OPTIONAL MEGA-MENU EXTRA CONTENT                                          */
/*****************************************************************************/
/* Optional extra mega-menu content (intro, images, see navigation-content.php)
Hidden by default, enabled on desktop only.*/
.lpu-menu-link-image,
.lpu-menu-intro {
  display: none;
}

/* desktop-only code */
@media (min-width: 601px) {
  /* Without an intro column, distribute the fixed-width link cards across
   * the panel instead of leaving the whole group aligned to the left edge. */
  .lpu-header
    nav:not(.lpu-navigation--compact)
    .wp-block-navigation__responsive-container:not(.is-menu-open)
    .lpu-nav-group__list
    > .wp-block-navigation-submenu
    > .wp-block-navigation__submenu-container:not(:has(> .lpu-menu-intro)) {
    justify-content: space-evenly;
  }

  .lpu-header
    nav:not(.lpu-navigation--compact)
    .wp-block-navigation__responsive-container:not(.is-menu-open)
    .lpu-nav-group__list
    > .wp-block-navigation-submenu
    > .wp-block-navigation__submenu-container:not(:has(> .lpu-menu-intro))
    > .wp-block-navigation-item
    > .wp-block-navigation-item__content {
    text-align: center;
  }

  /* Have the (optional) first item .lpu-menu-intro reserving the first
   * column of the grid, the the other items take the remainder columns.
   * It is a bit tricky to implement with gridbox.
   * Reserve the intro column for up to 10 rows of fixed-width links.
   * Row gaps must stay zero: otherwise unused rows add 10 empty gaps.
   * Link margins supply the vertical spacing only on occupied rows. */
  .lpu-header
    nav:not(.lpu-navigation--compact)
    .wp-block-navigation__responsive-container:not(.is-menu-open)
    .lpu-nav-group__list
    > .wp-block-navigation-submenu
    > .wp-block-navigation__submenu-container:has(> .lpu-menu-intro) {
    display: grid;
    grid-template-columns:
      calc(
        var(--wp--custom--header--mega-menu-intro-column-width) +
          var(--wp--preset--spacing--sm)
      )
      repeat(auto-fill, var(--wp--custom--header--mega-menu-item-column-width));
    grid-auto-flow: row;
    grid-auto-rows: auto;
    align-content: start;
    row-gap: 0;
  }

  .lpu-header
    nav:not(.lpu-navigation--compact)
    .wp-block-navigation__responsive-container:not(.is-menu-open)
    .lpu-nav-group__list
    > .wp-block-navigation-submenu
    > .wp-block-navigation__submenu-container:has(> .lpu-menu-intro)
    > .wp-block-navigation-item {
    margin-block-end: var(--wp--preset--spacing--sm);
  }

  .lpu-header
    nav:not(.lpu-navigation--compact)
    .wp-block-navigation__responsive-container:not(.is-menu-open)
    .lpu-nav-group__list
    > .wp-block-navigation-submenu
    > .wp-block-navigation__submenu-container
    > .lpu-menu-intro {
    display: block;
    grid-column: 1;
    grid-row: 1 / span 10;
    width: var(--wp--custom--header--mega-menu-intro-column-width);
    padding-block: var(--wp--preset--spacing--xs);
    font-family: var(--wp--preset--font-family--dm-sans);
    font-size: var(--wp--preset--font-size--text);
  }

  .lpu-header
    nav:not(.lpu-navigation--compact)
    .wp-block-navigation__responsive-container:not(.is-menu-open)
    .lpu-nav-group__list
    > .wp-block-navigation-submenu
    > .wp-block-navigation__submenu-container
    > .wp-block-navigation-item
    > .wp-block-navigation-item__content
    > .lpu-menu-link-image {
    display: block;
  }
}

.lpu-header .lpu-menu-link-image,
.lpu-header .lpu-menu-intro-image {
  width: 100%;
  height: auto;
}

.lpu-header .lpu-menu-link-image {
  margin-block-start: var(--wp--preset--spacing--xs);
  aspect-ratio: var(--wp--custom--header--mega-menu-item-image-ratio);
  object-fit: cover;
}

.lpu-header .lpu-menu-intro-image {
  margin-block-end: var(--wp--preset--spacing--xs);
  aspect-ratio: var(--wp--custom--header--mega-menu-intro-image-ratio);
  object-fit: cover;
}

.lpu-header .lpu-menu-intro p {
  margin: 0;
}

.lpu-header .lpu-menu-intro p + p {
  margin-block-start: var(--wp--preset--spacing--xs);
}

.lpu-header .lpu-menu-intro-heading {
  font-weight: 700;
}

/*****************************************************************************/
/* COMPACT HEADER NAVIGATION                                                 */
/*****************************************************************************/
/* Compact presentation, selected by navigation.js when one nav-group no
 * longer fits in its track. The grid keeps the logo in the middle; the two
 * groups are dropped. Core still owns the open overlay; these rules only
 * choose the closed presentation, mirroring Core's own responsive (<600px)
 * presentation so the switch between the two is seamless. */
.lpu-header .lpu-header__navigation.lpu-navigation--compact {
  display: block;
}

.lpu-header
  .lpu-header__navigation.lpu-navigation--compact
  .wp-block-navigation__responsive-container-open {
  box-sizing: border-box;
  display: flex;
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  position: absolute;
  inset-inline-start: clamp(1rem, 3vw, 3rem);
  inset-block-start: 50%;
  z-index: 3;
  transform: translateY(-50%);
}

.lpu-header
  .lpu-header__navigation.lpu-navigation--compact
  .wp-block-navigation__responsive-container:not(.is-menu-open)
  .wp-block-navigation__container {
  display: flex;
  justify-content: center;
}

.lpu-header
  .lpu-header__navigation.lpu-navigation--compact
  .wp-block-navigation__responsive-container:not(.is-menu-open)
  .lpu-nav-group {
  display: none;
}

/*****************************************************************************/
/* PHONE PRESENTATION                                                        */
/*****************************************************************************/
/* Below 600px Core hides the entire closed Navigation container so only the
 * hamburger survives. Keep the compact closed presentation on phones too:
 * centered logo with the open button at the rail's start, the same closed
 * look the JavaScript class produces at larger widths. */
@media screen and (max-width: 600px) {
  .lpu-header
    nav.lpu-header__navigation
    .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: block;
  }

  .lpu-header
    nav.lpu-header__navigation
    .wp-block-navigation__responsive-container:not(.is-menu-open)
    .wp-block-navigation__container {
    display: flex;
    justify-content: center;
  }

  .lpu-header
    nav.lpu-header__navigation
    .wp-block-navigation__responsive-container:not(.is-menu-open)
    .lpu-nav-group {
    display: none;
  }

  .lpu-header
    .wp-block-navigation__responsive-container:not(.is-menu-open)
    .wp-block-navigation__responsive-container-close {
    display: none;
  }

  .lpu-header
    nav.lpu-header__navigation
    .wp-block-navigation__responsive-container-open {
    box-sizing: border-box;
    display: flex;
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
    margin: 0;
    padding: 0;
    position: absolute;
    inset-inline-start: clamp(1rem, 3vw, 3rem);
    inset-block-start: 50%;
    z-index: 3;
    transform: translateY(-50%);
  }
}

/*****************************************************************************/
/* HEADER RESPONSIVE (900px)                                                 */
/*****************************************************************************/
/* makes the logo be a bit smaller
kind of pointless.. 
What would be really neat instead is when the fact that there is not enough
space for the normal menu, to activate this mode. That would allow for the
full-size menu to remain longer a little bit longer. Would entail using
javascript instead of a media query, see
themes/lepaysanurbain/assets/js/navigation.js
*/
/*
@media (max-width: 900px) {
  .lpu-header {
    min-height: 4.5rem;
    padding: 0.75rem 1rem;
  }

  /* Shrink the grid item itself; limiting only the image height leaves an
   * unnecessarily wide logo track (and can distort the image). */
/* <= just because multiline comment inside multiline comment..
  .lpu-header .wp-block-site-logo {
    width: var(--wp--custom--header--reduced-logo-width);
  }

  .lpu-header
    .wp-block-navigation__responsive-container:not(.is-menu-open)
    .lpu-nav-group
    > .lpu-nav-group__list
    > .wp-block-navigation-item
    > .wp-block-navigation-item__content {
    font-size: var(--wp--custom--header--reduced-font-size);
  }
}
*/

/*****************************************************************************/
/* HERO SECTION                                                              */
/*****************************************************************************/
/* Little line (in css, shoud probably be a graphic.
   The title is optional. Keeping the separator on the heading makes the
 * title + curve variant automatic and removes both when the title is deleted. */
.lpu-hero .lpu-hero__title::after {
  display: block;
  width: 11rem;
  height: 0.65rem;
  margin-block-start: var(--wp--preset--spacing--xs);
  border-bottom: 1.5px solid currentColor;
  border-radius: 0 0 27.5% 20%;
  content: "";
  transform: rotate(-0.3deg);
}

/*****************************************************************************/
/* CARD GRID                                                                 */
/*****************************************************************************/
.lpu-card-grid {
  padding-block: var(--wp--preset--spacing--section-compact);
}

/* The pattern is a Group containing a wide Heading and wide Columns. Gutenberg
 * adds this style class to the Group; only the Columns break out of wideSize.
 * The inset lines the first card up with wide content without losing a gutter
 * on small screens. */
.lpu-card-grid.is-style-lpu-card-carousel {
  --lpu-carousel-inset: max(
    var(--wp--preset--spacing--md),
    calc((100% - var(--wp--style--global--wide-size)) / 2)
  );
}

.lpu-card-grid.is-style-lpu-card-carousel .lpu-card-grid__columns {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--lpu-carousel-inset);
  /* Core Columns forces wrapping below 782px. */
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  /* Match the physical padding so every snapped card lands on that same line. */
  scroll-padding-inline: var(--lpu-carousel-inset);
  scroll-snap-type: x mandatory;
}

.lpu-card-grid.is-style-lpu-card-carousel
  .lpu-card-grid__columns .lpu-card {
  /* Keep desktop cards near one third of wideSize; 80vw leaves room for a peek
   * at the next card on phones. Core Column forces 100% flex-basis on mobile. */
  flex: 0 0 min(80vw, calc(var(--wp--style--global--wide-size) / 3)) !important;
  scroll-snap-align: start;
}

/* Leave the native scrollbar visible if JS cannot create the navigation dots. */
.lpu-card-grid.is-style-lpu-card-carousel[data-lpu-carousel-ready]
  .lpu-card-grid__columns {
  scrollbar-width: none;
}

.lpu-card-grid.is-style-lpu-card-carousel[data-lpu-carousel-ready]
  .lpu-card-grid__columns::-webkit-scrollbar {
  display: none;
}

.lpu-card-carousel__nav {
  margin-block-start: var(--wp--preset--spacing--sm);
}

.lpu-card-carousel__dots {
  display: flex;
  justify-content: center;
}

.lpu-card-carousel__dot {
  display: inline-grid;
  place-items: center;
  /* Larger click target around the small ring shown in the mockups. */
  width: 2rem;
  height: 2rem;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.lpu-card-carousel__dot::before {
  box-sizing: border-box;
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  content: "";
}

.lpu-card-carousel__dot[aria-current="true"]::before {
  background: currentColor;
}

.lpu-card-carousel__nav button:focus-visible,
.lpu-card-grid__columns:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Crop each image itself: Gutenberg sets an inline height on img, so sizing
 * only its Figure leaves an empty strip beneath the image in the editor. */
.lpu-card .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 7 / 8;
  object-fit: cover;
}

/* Saved cards may still request centered alignment; keep their arrows beside
 * the start of the text. The editor needs the label's full intrinsic width. */
.lpu-card .lpu-card__body {
  align-items: flex-start;
}

.lpu-card__body > .wp-block-buttons {
  flex-shrink: 0;
}

/*****************************************************************************/
/* FARM SELECTOR                                                             */
/*****************************************************************************/
.lpu-farm-selector {
  padding-block: var(--wp--preset--spacing--section-extra-generous);
}

.lpu-farm-selector > .wp-block-heading {
  margin-block-end: var(--wp--preset--spacing--section-standard);
}

.wp-block-group.lpu-farm-selector__farms {
  align-items: center;
  gap: var(--wp--preset--spacing--md);
}

.lpu-farm-selector__farm {
  flex: 1 1 0;
  min-width: 0;
}

.lpu-farm-selector__farm .wp-block-heading {
  margin: 0;
  line-height: 1;
  text-transform: uppercase;
}

.lpu-farm-selector__farm a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
}

.lpu-farm-selector__farm a:hover,
.lpu-farm-selector__farm a:focus-visible {
  text-decoration-thickness: 3px;
}

.lpu-farm-selector__separator.wp-block-image {
  flex: 0 0 clamp(2.5rem, 4vw, 3.5rem);
  width: clamp(2.5rem, 4vw, 3.5rem);
  margin: 0;
}

.lpu-farm-selector__separator img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 781px) {
  .wp-block-group.lpu-farm-selector__farms {
    flex-direction: column;
    gap: var(--wp--preset--spacing--lg);
  }

  .lpu-farm-selector__farm {
    flex: 0 1 auto;
    width: 100%;
  }

  .lpu-farm-selector__separator.wp-block-image {
    flex: 0 0 2rem;
    width: 2rem;
  }
}

/*****************************************************************************/
/* TEXT COLUMNS BAND                                                         */
/*****************************************************************************/
.lpu-columns-text {
  padding-block: var(--wp--preset--spacing--section-generous);
}

.lpu-columns-text > .lpu-columns-text__title {
  margin-block-end: calc(var(--wp--preset--spacing--xl) * 2);
  text-wrap: balance;
}

/* repeat the class selector to increase specificity */
.lpu-columns-text__columns.lpu-columns-text__columns {
  gap: var(--wp--preset--spacing--xl);
}

@media (max-width: 781px) {
  .lpu-columns-text > .lpu-columns-text__title {
    margin-block-end: var(--wp--preset--spacing--xl);
  }
}

/*****************************************************************************/
/* GRAPHIC CALL-TO-ACTION BAND                                               */
/*****************************************************************************/
.lpu-graphic-band {
  padding-block: var(--wp--preset--spacing--section-standard);
}

/* Core Cover provides only 1em by default. Its minimum height can add more
 * visual space around the vertically centred hero content. */
.lpu-hero {
  padding-block: var(--wp--preset--spacing--section-standard);
}

.lpu-graphic-band > .wp-block-heading {
  text-wrap: balance;
}

.lpu-graphic-band > .wp-block-buttons {
  margin-block-start: var(--wp--preset--spacing--lg);
}

/*****************************************************************************/
/* SECTION RESPONSIVE (781px)                                                */
/*****************************************************************************/
@media (max-width: 781px) {
  .lpu-card-grid,
  .lpu-farm-selector,
  .lpu-columns-text,
  .lpu-graphic-band {
    padding-inline: var(--wp--preset--spacing--md);
  }
}

/*****************************************************************************/
/* GENERIC MAIN AND FOOTER TRANSITION                                        */
/*****************************************************************************/
/* too risky. may prevent a user from achieving what he wants.  */
/* main.wp-block-group {
  min-height: 30vh;
} */


/* Keep the Post Content blockGap for ordinary blocks. Designed sections use
 * the lpu-section marker so adjacent section backgrounds touch. */
.wp-block-post-content > .lpu-section {
  margin-block-start: 0;
}

/* The following block owns the space at a section/content boundary. */
.wp-block-post-content > .lpu-section + :not(.lpu-section),
.wp-block-post-content > :not(.lpu-section) + .lpu-section {
  margin-block-start: var(--wp--preset--spacing--section-compact);
}

.wp-block-post-content:has(> :first-child:not(.lpu-section)) {
  padding-block-start: var(--wp--preset--spacing--section-compact);
}

.wp-block-post-content:has(> :last-child:not(.lpu-section)) {
  padding-block-end: var(--wp--preset--spacing--section-compact);
}

/* The footer follows the final editorial section directly. */
.wp-site-blocks > main + footer.wp-block-template-part {
  margin-block-start: 0;
}

/*****************************************************************************/
/* FOOTER COMPONENT                                                          */
/*****************************************************************************/
/* Shared footer frame. The footer Navigation receives site-local content at
 * render time, while its layout and visual treatment remain shared. */

.lpu-footer::after {
  position: absolute;
  right: clamp(1.25rem, 4vw, 3.5rem);
  bottom: clamp(1rem, 3vw, 2rem);
  width: clamp(2.25rem, 4vw, 3.5rem);
  height: clamp(2.25rem, 4vw, 3.5rem);
  background: url("../images/footer/footer-star-ecru.svg") center / contain
    no-repeat;
  content: "";
}

.lpu-footer__intro {
  max-width: 13rem;
  margin: 0;
  font-family: var(--wp--preset--font-family--dm-sans);
  color: var(--wp--preset--color--ecru);
}

.lpu-footer__links .wp-block-navigation {
  width: 100%;
  max-width: none;
  margin: 0;
}

.lpu-footer .wp-block-navigation__container {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: var(--wp--preset--spacing--lg) clamp(1rem, 2vw, 2rem);
  width: 100%;
  max-width: none;
}

.lpu-footer .wp-block-navigation__container > .wp-block-navigation-submenu {
  display: block;
  min-width: 0;
}

.lpu-footer
  .wp-block-navigation__container
  > .wp-block-navigation-submenu
  > .wp-block-navigation-item__content {
  display: block;
  padding: 0;
  margin-block-end: 0.65rem;
  font-family: var(--wp--preset--font-family--ruden);
  color: var(--wp--preset--color--ecru) !important;
  text-transform: uppercase;
}

.lpu-footer .wp-block-navigation__submenu-icon {
  display: none;
}

.lpu-footer .wp-block-navigation__submenu-container {
  position: static;
  display: block;
  visibility: visible;
  opacity: 1;
  width: auto;
  min-width: 0;
  height: auto;
  padding: 0;
  background: transparent;
  border: 0;
}

/* Core's submenu rule is more specific than the generic footer rule above.
 * Repeat the direct-child relationship and force the footer columns open;
 * unlike the header, these submenus are always expanded. */
.lpu-footer
  .wp-block-navigation__container
  > .wp-block-navigation-submenu
  > .wp-block-navigation__submenu-container {
  position: static !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

.lpu-footer
  .wp-block-navigation__submenu-container
  > .wp-block-navigation-item {
  display: block;
  min-width: 0;
}

.lpu-footer
  .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content {
  display: inline-block;
  padding: 0.18rem 0;
  font-family: var(--wp--preset--font-family--dm-sans);
  color: var(--wp--preset--color--ecru) !important;
}

.lpu-footer
  .wp-block-navigation__submenu-container
  > .wp-block-navigation-item
  > .wp-block-navigation-item__content::before {
  content: "> ";
}

.lpu-footer .wp-block-navigation-item__content:hover,
.lpu-footer .wp-block-navigation-item__content:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.lpu-footer
  .wp-block-navigation__container
  > .wp-block-navigation-submenu:last-child {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin-block-start: 0.5rem;
  padding-block-start: 0.75rem;
  border-top: 1px solid rgba(248, 248, 240, 0.35);
}

.lpu-footer
  .wp-block-navigation__container
  > .wp-block-navigation-submenu:last-child
  > .wp-block-navigation__submenu-container
  > .wp-block-navigation-item
  > .wp-block-navigation-item__content::before {
  content: "> ";
}

/* 0-2-0 specificity to always beat wp Core CSS */
.lpu-footer > .lpu-footer__bottom {
  align-items: center;
  gap: var(--wp--preset--spacing--md);
  margin-block-start: var(--wp--preset--spacing--lg);
  color: var(--wp--preset--color--ecru);
}

@media (max-width: 900px) {
  .lpu-footer {
    padding-inline: 1rem !important;
  }

  /* 0-2-0 specificity to always beat wp Core CSS */
  .lpu-footer > .lpu-footer__main {
    flex-direction: column;
    gap: var(--wp--preset--spacing--lg);
  }

  .lpu-footer__main > .wp-block-column {
    flex-basis: 100% !important;
    width: 100%;
  }

  .lpu-footer__intro {
    max-width: 24rem;
  }

  .lpu-footer .wp-block-navigation__container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .lpu-footer {
    padding-top: 3rem !important;
    padding-bottom: 4rem !important;
  }

  .lpu-footer .wp-block-navigation__container {
    grid-template-columns: 1fr;
  }

  /* 0-2-0 specificity to always beat wp Core CSS */
  .lpu-footer > .lpu-footer__bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

/*****************************************************************************/
/* BUTTONS                                                                   */
/*****************************************************************************/
/* Color related features and constraints for buttons : 
 * - buttons have background color and text (and border) colors
 * - swap those colors on hover and :focus-visible;
 * - keep the border and focus outline synchronized with the text color
 * - make the arrow button work too
 * - set default color value (green text)
 * - must work when user selects text and/or background color manually in
 *   Gutenberg
 * - detect the parent section color when the button background is transparent
 *   (color underneath the button)
 * - do not require JavaScript
*/
/* CSS variables
 * 1) The following CSS variables determine the color of the button: 
 *    --lpu-button-text : color of button text, border, outline, and
 *      arrow. 
 *    --lpu-button-background : color of button background.
 *    --lpu-button-inverse-text : text color to use when hover/focus.
 *      Basically the same value as --lpu-button-background, except that it is
 *      not transparent by default.
 *
 * 2) The value of the following CSS variables is set in another
 *    stylesheet and is used here to help set the color of the button.
 *
 *    See themes/lepaysanurbain/functions.php lpu_enqueue_theme_styles() for the
 *    code that create the stylesheet that create these variables. 
 *
 *    The following variables contain information of text/background colors set
 *    manually by the user in Gutenberg on the element (or an ancestor of the
 *    element). It only works when the colors have been set using a color from a
 *    color palette, it does not work if the color is arbitrary
 *    CSS variables:
 * -  --lpu-button-surface : background color set manually by the user in
 *      Gutenberg on the button itself or the (nearest) ancestor to have a
 *      background set. Works thanks to CSS custom property inheritance : if
 *      ancestor set the variable but not the button : the value set by the
 *      ancestor is visible in the button. Only setif the color uses a preset
 *      color, does not work with arbitrary color. Attention risk of erroneous
 *      detection : 
	       - if set an arbitrary color on a parent instead of one from preset :
 *         ignored and could use color of an ancestor (that has used a preset)
	       - color changed dynamicalle (js)
 * -  --lpu-button-text : text color set directly by user in Gutenberg on the
 *      element (using a preset color).
 * -  --lpu-button-background, --lpu-button-inverse-text : background color set
 *      on the button. Value only set if the background color has been set on
 *      the button itself directly. Not set if background color set on ancestor
 *      only.
*/

/* set default colors for the button */
.wp-block-button__link {
  --lpu-button-text: var(--wp--preset--color--vert-fonce);
  --lpu-button-background: transparent;
  /* can't just use transparent on text when we want to show what is under the
    button. When text is transparent it shows the background of the button
     itself, not what is under the button */
  /* default for inverse-text is the background color set in Gutenberg on the 
  button or an ancestor or ecru */
  --lpu-button-inverse-text: var(
    --lpu-button-surface,
    var(--wp--preset--color--ecru)
  );
}

/* The on-color style changes only the defaults. The old class remains
 compatible with buttons saved before the style control was added.
 It does not use transparency to avoid issues with backgrounds using colors or
 patterns.
*/
:where(.lpu-button-on-color:not(.is-style-lpu-button-regular), .is-style-lpu-button-on-color) .wp-block-button__link {
  --lpu-button-text: var(--wp--preset--color--ecru);
  --lpu-button-inverse-text: var(--wp--preset--color--vert-fonce);
}

/* A solid button uses the same green and ecru as the outlined button's hover. */
.is-style-lpu-button-filled .wp-block-button__link {
  --lpu-button-text: var(--wp--preset--color--ecru);
  --lpu-button-background: var(--wp--preset--color--vert-fonce);
  --lpu-button-inverse-text: var(--wp--preset--color--vert-fonce);
}

/* Actually use the CSS variables */
/* normal state of colors */
/* Colors set on elements in Gutenberg (text color, background color) end up as
 * class names on the div element (eg. .has-xxx-color) with CSS declarations
 * that use !important. Eg. user sets black on text on an element. Element
 * receives .has-black-color class. The following rule is applied:
 * .has-vert-grise-color {
      color: var(--wp--preset--color--vert-grise)!important;
 * }
 * wp core's palette code use !important. Our declarations must outrank them. 
 * For our declarations to win : 
 * - use !important
 * - double the classes in the selector */
.wp-block-button__link.wp-block-button__link {
  color: var(--lpu-button-text) !important;
  background-color: var(--lpu-button-background) !important;
  border-color: currentColor !important;
}

.is-style-lpu-button-filled .wp-block-button__link.wp-block-button__link {
  border-color: var(--lpu-button-background) !important;
}

/* Actually use the CSS variables */
/* inverted colors on hover/focus.
 We have to beat the color that wp sets by default, especially when the color/
 background color is set manually in Gutenberg.
 */
/* 'interactive' state with swapped colors */
.wp-block-button__link.wp-block-button__link:hover,
.wp-block-button__link.wp-block-button__link:focus-visible {
  color: var(--lpu-button-inverse-text) !important;
  background-color: var(--lpu-button-text) !important;
}

/* @media not (prefers-reduced-motion) {
  .wp-block-button__link {
    transition:
      background-color 100ms ease,
      color 100ms ease;
  }
} */

/* style the outline */
.wp-block-button__link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Arrow button: hidden text for a11y on the frontend, arrow icon via ::after.
 * .wp-site-blocks exists on the frontend only — scope the text-hiding rule
 * there so the editor keeps the label visible and editable. The class supports
 * old buttons; data-lpu-arrow records the current toolbar choice. */
.wp-site-blocks :is(.lpu-button-arrow:not([data-lpu-arrow="false"]), [data-lpu-arrow="true"]) .wp-block-button__link,
.wp-site-blocks :is(.lpu-button-arrow:not([data-lpu-arrow="false"]), [data-lpu-arrow="true"]) .wp-block-button__link:hover,
.wp-site-blocks :is(.lpu-button-arrow:not([data-lpu-arrow="false"]), [data-lpu-arrow="true"]) .wp-block-button__link:focus-visible {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.5rem;
  min-width: 3.5rem;
  height: 2.5rem;
  padding: 0;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

.wp-site-blocks :is(.lpu-button-arrow:not([data-lpu-arrow="false"]), [data-lpu-arrow="true"]) .wp-block-button__link::after {
  position: absolute;
  inset: 0;
  width: 1.75rem;
  height: 1.25rem;
  margin: auto;
  background-color: currentColor;
  content: "";
  mask: url("../images/arrow-right.svg") center / contain no-repeat;
  -webkit-mask: url("../images/arrow-right.svg") center / contain no-repeat;
}

/* Keep card arrows close to the height of regular text buttons. */
.wp-site-blocks .lpu-card-grid .wp-block-button[data-lpu-arrow="true"] .wp-block-button__link {
  height: 2.5rem;
}

/* Editor: show the arrow on top of the editable text so the user sees the
 * button will display as an arrow on the frontend. */
.editor-styles-wrapper :is(.lpu-button-arrow:not([data-lpu-arrow="false"]), [data-lpu-arrow="true"]) .wp-block-button__link {
  position: relative;
  padding-right: 2rem;
}

.editor-styles-wrapper :is(.lpu-button-arrow:not([data-lpu-arrow="false"]), [data-lpu-arrow="true"]) .wp-block-button__link::after {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 0.875rem;
  background-color: currentColor;
  content: "";
  mask: url("../images/arrow-right.svg") center / contain no-repeat;
  -webkit-mask: url("../images/arrow-right.svg") center / contain no-repeat;
  pointer-events: none;
}