/*
Theme Name: Mativ 2023 Redesign
Theme URI: https://www.mativ.com
Author: Digiteam Inc.
Author URI: https://www.digiteam.ca
Description: Redesign of the Mativ corporate website to replace the simpler, flatter site architecture of the initial theme (2022).
Requires at least: 6.0
Tested up to: 6.2.2
Requires PHP: 5.7
Version: 1.0.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mativ
Tags: grid-layout, wide-blocks, accessibility-ready, custom-background, custom-colors, custom-header, custom-logo, editor-style, full-site-editing, full-width-template, template-editing, theme-options, 
*/

/**
 * CSS rules for adding padding to full-width block with constrained layout.
 * Note: this is an interim solution to solve the negating of left and right
 * padding on full width inner blocks. 
 *
 * @see: https://github.com/WordPress/gutenberg/issues/44404 
 */

/* .has-global-padding:where(.is-layout-constrained) > .alignfull {
  padding-right: var(--wp--style--root--padding-right);
  padding-left: var(--wp--style--root--padding-left);
} */

.motion-slide-in {
  opacity: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Apply antialiased font smoothing */
html {
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  scroll-padding-top: var(--h, 0px);
}

main.wp-block-group {
  max-width: 100%;
}

/* Need to override default z-index as child elements all-too-easily go higher
than the value. */
header.is-position-sticky {
  z-index: 9999;
}

/* ----------------------------------
   📚 Primary Menu Styles

   CSS rules for the primary (header) navigation block, including associated 
   dropdown menus. Given the complexity of the navigation, the configuration 
   done to the block itself should be minimal.

   Modal dialog for responsive navigation container can only be instantiated
   from the mobile-specific menu toggle, but is visible for all screen sizes 
   once open.

   Note: every style reference is deliberately copied verbatim from the source,
   with the only difference being the inclusion of the header prefix.
---------------------------------- */
header .wp-block-navigation {
  --mobile-menu-item-gap: 26px;
  --mobile-submenu-right-offset: 50px;
  margin-left: auto;
}

header .wp-block-navigation .wp-block-navigation-item__content:hover,
header
  .wp-block-navigation
  .wp-block-navigation-item.current-menu-item
  > .wp-block-navigation-item__content,
.wp-block-navigation-item__content.current-menu-ancestor {
  color: var(--wp--preset--color--fushia-100) !important;
}

/* 💻📱 Submenu menu items. */
header
  .wp-block-navigation
  .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content {
  color: var(--wp--preset--color--black-75);
}

.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .wp-block-navigation__container {
  --navigation-layout-justification-setting: stretch;
}

/* Expanded menu item requires the icon (SVG) to be flipped vertially. */
header
  .wp-block-navigation
  .wp-block-navigation-submenu__toggle[aria-expanded='true']
  + .wp-block-navigation__submenu-icon {
  transform: rotate(180deg);
}

/* 📱 Menu toggle for responsive navigation container */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  color: var(--wp--preset--color--black);
  -webkit-tap-highlight-color: transparent;
}

.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
  height: 39px;
  width: 39px;
  fill: currentColor;
}

.wp-block-navigation__responsive-container-open:hover,
.wp-block-navigation__responsive-container-close:hover {
  color: var(--wp--preset--color--black-75) !important;
}

/* 📱 Close button indicator (includes text label and icon). */
.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close {
  color: var(--wp--preset--color--black);
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1.28;
  display: flex;
  align-items: center;
  gap: 20px;
}

/* 💻 Hide the submenu icon for anything larger than a mobile device. */
header
  .wp-block-navigation:not(.is-menu-open)
  .wp-block-navigation__submenu-icon {
  display: none;
}

header .wp-block-navigation .wp-block-navigation__submenu-icon svg {
  stroke: unset;
  margin-top: unset;
  fill: currentColor;
  width: 14px;
  height: 8px;
}

/* 📱 Disable the top margin when an admin bar is present and the menu is open. */
.has-modal-open
  .admin-bar
  .is-menu-open
  .wp-block-navigation__responsive-dialog {
  margin-top: unset;
}

/* 
📱 Mobile menu container which can stretch the maximum height of the viewport.
Navigation within will be a scrollable entity. Note the padding-top value which
uses the same value as what is applied to the header block.
*/
header
  .wp-block-navigation:not(.has-background)
  .wp-block-navigation__responsive-container.is-menu-open {
  animation: unset;
  bottom: unset;
  padding-top: calc(
    var(--wp-admin--admin-bar--position-offset, 0px) +
      var(--wp--preset--spacing--32)
  );
  overflow: hidden;
  max-height: 100vh;
  max-height: 100dvh;
}

/* 
📱 Child descendents require full height to essure navigation container is 
scrollable. 
*/
header
  .wp-block-navigation:not(.has-background)
  .wp-block-navigation__responsive-container.is-menu-open
  :is(
    .wp-block-navigation__responsive-close,
    .wp-block-navigation__responsive-dialog
  ) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

header
  .wp-block-navigation:not(.has-background)
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-close
  .wp-block-navigation__responsive-dialog
  .wp-block-navigation__responsive-container-content {
  flex-grow: 1;
  overflow: auto;
  padding-top: var(--h, 0px);
  padding-bottom: calc(var(--wp--style--root--padding-left) * 2);
}

/* 
📱 Mobile menu container dropshadow / semi-transparent layer mask to obscure
the visible page content. 
*/
.has-modal-open header::after {
  content: '';
  position: absolute;
  inset: 100% 0 auto;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 999;
}

/* 
📱 Force the brand logo to be visible 'above' the modal window. Flex shrink
added to avoid logo shrinking below minimum size. 
*/
.has-modal-open header .wp-block-site-logo {
  flex-shrink: 0;
  position: relative;
  z-index: 999999;
}

/* 📱 Menu layout to force coverage of full container area. */
header
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content {
  --navigation-layout-justification-setting: stretch;
}

/* 📱 Submenu container */
header
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .wp-block-navigation__submenu-container {
  padding: unset;
}

/*
📱 Submenu <ul> that utilizes a custom right margin to ensure the menu does
not run underneath the space allocated to the SVG icon indicator. This menu
will be hidden by default, but open (see next rule set) when toggled by the
calling button
*/
header
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .has-child
  .wp-block-navigation__submenu-container {
  all: unset;
  margin-top: var(--mobile-menu-item-gap);
  display: none;
  margin-left: var(--wp--style--root--padding-left);
  margin-right: var(--mobile-submenu-right-offset);
  gap: var(--mobile-menu-item-gap);
  width: auto !important;
}

header
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .has-child
  .wp-block-navigation-submenu__toggle[aria-expanded='true']
  ~ .wp-block-navigation__submenu-container {
  display: flex;
  flex-direction: column;
}

/* 📱 */
header
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .wp-block-navigation__container {
  gap: var(--mobile-menu-item-gap);
}

/* 📱 Top-level link/button */
header
  .wp-block-navigation
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  > .wp-block-navigation__container
  > .wp-block-navigation-item
  > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--black);
  font-size: var(--wp--preset--font-size--xl);
  line-height: 1.27;
  -webkit-tap-highlight-color: transparent;
}

/* 
📱 Text label for each top-level menu item should not overlap the space 
occupied by the indicator (SVG).
*/
header
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .wp-block-navigation-item.has-child
  .wp-block-navigation-item__label {
  padding-right: var(--mobile-submenu-right-offset);
}

/* 📱 Submenu indicator (SVG). Only displayed when child elements are defined. */
header
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .wp-block-navigation-item.has-child
  .wp-block-navigation__submenu-icon {
  height: unset;
  margin: unset;
  position: absolute;
  right: 0;
  top: 0;
  padding: 12px;
  color: var(--wp--preset--color--fushia-100);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 💻 Top level navigation wrapper. */
header .wp-block-navigation:not(.is-menu-open) .wp-block-navigation__container {
  gap: 0.5rem
    clamp(
      24px,
      calc(1.5rem + (52 - 24) * ((100vw - 600px) / (1440 - 600))),
      52px
    );
}

/* 💻 Remove default padding that is applied to menu item toggle buttons. */
header
  .wp-block-navigation:not(.is-menu-open)
  .wp-block-navigation-item.open-on-click
  .wp-block-navigation-submenu__toggle {
  color: var(--wp--preset--color--black);
  line-height: 1.25;
  padding-left: unset;
  padding-right: unset;
}

/* 💻 Submenu container */
header
  .wp-block-navigation:not(.has-background)
  .wp-block-navigation__submenu-container:not(.is-menu-open) {
  background: #f7f7f7;
  border: 0px solid var(--wp--preset--color--black-25);
  box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01),
    0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09),
    0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
  padding: 2.5rem;
  gap: 23px;
  width: max-content !important;
  transform: translateX(-38px) translateY(40px);
}

/* 💻 Alignment and width of submenu container. */
header
  .wp-block-navigation:not(.is-menu-open)
  .has-child
  .wp-block-navigation-submenu__toggle[aria-expanded='true']
  ~ .wp-block-navigation__submenu-container {
  left: unset;
  right: unset;
}

/* 💻 Menu items within the submenu container. */
header
  .wp-block-navigation:not(.is-menu-open)
  :where(
    .wp-block-navigation__submenu-container
      .wp-block-navigation-item
      a:not(.wp-element-button)
  ) {
  padding: unset;
}

/* 💻 Enable mouse/pointer events for opening submenu on :hover */
@media (hover: hover) and (pointer: fine) {
  header
    .wp-block-navigation
    .wp-block-navigation-item:where(.has-child.open-on-click:hover) {
    position: relative;
  }

  header
    .wp-block-navigation
    .wp-block-navigation-item:where(.has-child.open-on-click:hover)::before {
    content: '';
    position: absolute;
    inset: 0 -2.5rem -2.5rem;
    z-index: 1;
  }

  header
    .wp-block-navigation
    .wp-block-navigation-item:where(.has-child.open-on-click:hover)
    .wp-block-navigation-submenu__toggle {
    color: var(--wp--preset--color--fushia-100) !important;
  }

  header
    .wp-block-navigation
    .wp-block-navigation-item:where(.has-child.open-on-click:hover)
    .wp-block-navigation-submenu {
    left: unset;
    right: unset !important;
    height: auto;
    opacity: 1;
    overflow: visible;
    visibility: visible;
    width: max-content;
  }
}

/* ===[===✨✨✨ CORE/BUTTON(S) ✨✨✨===]=== */

/* 🌟 Apply flex layout to the link element if it has an icon */
.wp-block-button:where(.has-icon) .wp-block-button__link {
  display: flex;
  align-items: center;
  gap: 0 0.625rem;
}

/* Need to force override on :hover for styled buttons as there is no way (as of
June 21, 2023) of doing this in the editor. */
:where(.wp-block-button.is-style-outline) .wp-block-button__link:is(:hover) {
  color: var(--wp--preset--color--black-50) !important;
}

/* ===[===✨✨✨ CORE/GROUP ✨✨✨===]=== */

/* 🌟 Newish core/group grid layout rocking the non-standard gap! 💥 */
:where(body .is-layout-grid) {
  gap: var(--wp--custom--spacing--block-gap);
}

/* ===[===✨✨✨ PAGE WRAPPER ✨✨✨===]=== */

/* Force main warpper to be 100% height of the viewport. */
.wp-site-blocks {
  height: 100vh;
  height: 100dvh;
}

/* ===[===✨✨✨ CORE/POST-TERMS ✨✨✨===]=== */

/* 📚 Styles for the WordPress Gutenberg block "core/post-terms". Main styles
defined in theme.json */
.wp-block-post-terms {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--16);
}

/* Remove the separator between each term as there isn't a way of doing this 
within the block editor. */
.wp-block-post-terms__separator {
  display: none;
}

/* ===[===✨✨✨ CORE/POST-TEMPLATE ✨✨✨===]=== */

@media (min-width: 600px) {
  /* Masonry-style. */
  :where(.wp-block-post-template.is-layout-grid.is-style-masonry) {
    grid-auto-rows: 3.8fr 1.705fr 3.8fr;
    grid-auto-flow: dense;
  }

  :where(.wp-block-post-template.is-layout-grid.is-style-masonry)
    > .wp-block-post:is(:nth-child(4n + 1), :nth-child(4n + 3)) {
    grid-row: span 2;
  }

  :where(.wp-block-post-template.is-layout-grid.is-style-masonry)
    > .wp-block-post:is(:nth-child(4n + 3), :nth-child(4n + 4)) {
    align-self: end;
  }

  :where(.wp-block-post-template.is-layout-grid.is-style-masonry)
    .wp-block-post:nth-child(odd) {
    --featured-image-aspect-ratio: 606/741;
  }
}

@media (max-width: 599px) {
  :where(.wp-block-post-template.is-layout-grid.is-style-masonry)
    .wp-block-post-featured-image {
    --featured-image-aspect-ratio: 382/200;
  }
}

:where(.wp-block-post-template.is-layout-grid.is-style-masonry)
  .wp-block-post-featured-image {
  aspect-ratio: var(--featured-image-aspect-ratio, 606/435) !important;
}

:where(.wp-block-post-template.is-layout-grid.is-style-masonry)
  .wp-block-post-featured-image
  a {
  overflow: hidden;
}

:where(.wp-block-post-template.is-layout-grid.is-style-masonry)
  .wp-block-post-featured-image
  img {
  transition: transform 0.5s ease;
  will-change: transform;
}

:where(.wp-block-post-template.is-layout-grid.is-style-masonry)
  .wp-block-post-featured-image
  a:hover
  img {
  transform: scale(1.1);
}

/* 3-column layout. */
@media (max-width: 1023px) {
  .wp-block-post-template-is-layout-grid.columns-3 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  }
}

@media (max-width: 639px) {
  .wp-block-post-template-is-layout-grid.columns-3 {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ===[===✨✨✨ CORE/BUTTON ✨✨✨===]=== */

/* Style: Plain Text */
.wp-block-button:is(.is-style-plain) .wp-block-button__link {
  background-color: unset;
  color: var(--wp--preset--color--black);
  font-weight: unset;
  letter-spacing: unset;
  padding: unset;
  text-transform: unset;
}

.wp-block-button:is(.is-style-plain) .wp-block-button__link:is(:hover) {
  border-color: transparent;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ===[===✨✨✨ ELEMENT/LINK ✨✨✨===]=== */

a:where(:not(.wp-element-button)):hover {
  text-underline-offset: 0.2em;
}

/* ===[===👔👔👔 PATTERN/MEDIA-ALIGN CARD 👔👔👔===]=== */

.wp-pattern-mativ-card-horizontal {
  position: relative;
}

:where(.wp-pattern-mativ-card-horizontal) a::before {
  content: '';
  position: absolute;
  inset: 0;
}

/* ===[===🔗🔗🔗 PAGINATION 🔗🔗🔗===]=== */

:where(.wp-block-query-pagination),
:where(.wp-block-query-pagination-numbers) {
  gap: 6px;
}

:where(.wp-block-query-pagination-numbers) {
  display: flex;
}

:where(.wp-block-query-pagination)
  :is(
    .wp-block-query-pagination-previous,
    .wp-block-query-pagination-next,
    .page-numbers
  ) {
  border: solid 1px currentColor;
  padding: 0.75em 1.5em;
}

.wp-block-query-pagination > .wp-block-query-pagination-next,
.wp-block-query-pagination > .wp-block-query-pagination-numbers,
.wp-block-query-pagination > .wp-block-query-pagination-previous {
  margin-bottom: 0;
  margin-right: 0;
}

.page-numbers.current {
  background-color: var(--wp--preset--color--grey);
  border-color: var(--wp--preset--color--grey);
  color: var(--wp--preset--color--white);
}

:where(
    .wp-block-query-pagination-previous,
    .wp-block-query-pagination-next,
    .page-numbers
  ):is(:hover) {
  text-decoration: none !important;
}

.wp-block-query-pagination .wp-block-query-pagination-previous-arrow:only-child,
.wp-block-query-pagination .wp-block-query-pagination-next-arrow:only-child {
  margin: 0;
}

/* ===[===✏️✏️✏️ NINJA FORMS ✏️✏️✏️===]=== */

:where(.nf-form-content nf-fields-wrap) {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.field-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.field-wrap :where(label, .nf-label-span) {
  font-weight: 700;
}

.field-wrap.nf-error {
  --_border-color: #c00;
}

.nf-field-element :where(input[type='text'], input[type='email'], textarea) {
  border: solid 1px var(--_border-color, var(--wp--preset--color--black-25));
  display: block;
  padding: 1.25em 1.5em;
  width: 100%;
}

.nf-field-element :where(ul) {
  margin: 0;
  list-style-type: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75em;
}

.nf-field-element :where(ul label) {
  font-weight: normal;
}

.nf-field-element :where(input[type='checkbox'], input[type='radio']) {
  accent-color: var(--wp--preset--color--fushia-100);
}

.nf-error-msg:is(.nf-error-required-error) {
  color: #c00;
  font-size: 0.875em;
  margin-top: 0.5em;
}

.ninja-forms-field:is(input[type='submit'], button) {
  border: solid 1px var(--wp--preset--color--black);
  background-color: var(--wp--preset--color--black);
  color: var(--wp--preset--color--white);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.275;
  padding: 0.75em 1.5em;
  cursor: pointer;
}

.ninja-forms-field:is(input[type='submit'], button):where(:hover) {
  border-color: currentColor;
  background-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--black);
}

.nf-field-element :where(p, ul) {
  &:first-child {
    margin-top: 0;
  }

  &:last-child {
    margin-bottom: 0;
  }
}

.nf-form-fields-required {
  display: none;
}

/* ===[===🌐🌐🌐 POLYLANG LANGUAGE DROPDOWN 🌐🌐🌐===]=== */
/* https://moderncss.dev/custom-select-styles-with-pure-css/ */
.wp-block-polylang-language-switcher {
  min-width: 4rem;
  cursor: pointer;
  color: var(--wp--preset--color--white);
  position: relative;
}

.wp-block-polylang-language-switcher::after {
  content: '';
  position: absolute;
  inset: 0 0 0 auto;
  pointer-events: none;
  background: var(--wp--preset--color--black) url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMCA2Ij4KICA8cGF0aCBkPSJNOS43OC4zNDVhLjc0OS43NDkgMCAwIDEgMCAxLjA2bC00LjI1IDQuMjVhLjc1Ljc1IDAgMCAxLTEuMDYgMEwuMjIgMS40MDVBLjc1Ljc1IDAgMCAxIDEuMjguMzQ1TDUgNC4wNjQgOC43Mi4zNDVhLjc0OS43NDkgMCAwIDEgMS4wNiAwWiIgZmlsbD0iI2ZmZiIvPgo8L3N2Zz4=") right 0.8571em top 50%/0.7142em auto no-repeat;
  width: 2.4285em;
}

.wp-block-polylang-language-switcher:hover,
.wp-block-polylang-language-switcher:focus-within {
  background-color: var(--wp--preset--color--fushia-100);
}

.wp-block-polylang-language-switcher select {
  appearance: none;
  background-color: var(--wp--preset--color--black);
  border: none;
  border-radius: 0;
  margin: 0;
  padding: 0.5em 2.4285em 0.5em 0.8571em;
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  cursor: inherit;
  line-height: inherit;
  outline: none;
}