/* ============================================================
 *  Developed by Web Design MATTRS
 *  Author: Maciek (Matt) Rek
 *  Year: 2024
 *  ============================================================
 *  Website: mattrs.co.uk
 *  Purpose: Public Styles for MATTRS Custom Theme
 *  Customizations and enhancements specifically for the 
 *  website's public-facing elements.
 *  ------------------------------------------------------------
 *  This file is part of a custom solution developed for
 *  small businesses, offering fast, reliable, and eco-friendly
 *  website hosting and digital services.
 *  ============================================================
 */
html {
  -webkit-text-size-adjust: 100%;
  width: 100vw;
  overflow-x: hidden;
}

figure {
  max-width: 100%;
}

img {
  display: block;
}

mark {
  padding-left: 0.2em;
  padding-right: 0.2em;
  border-radius: 3px;
}

.wp-block-navigation a:focus,
.wp-block-navigation button:focus,
.mattrs-gn-site-logo a:focus,
.mattrs-gn-site-logo button:focus {
  outline: none;
}

@media (max-width: 779px) {
  .wp-block-navigation__responsive-dialog {
    margin: 2rem;
  }
  .wp-block-navigation__responsive-dialog .wp-block-navigation-item {
    font-size: var(--wp--preset--font-size--large);
  }
}

.mattrs-gn-site-logo img,
.mattrs-gn-hosting-cp img {
  filter: brightness(0);
}
.mattrs-has-dark-background .mattrs-gn-site-logo img, .has-accent-3-background-color .mattrs-gn-site-logo img, .has-contrast-background-color .mattrs-gn-site-logo img,
.mattrs-has-dark-background .mattrs-gn-hosting-cp img,
.has-accent-3-background-color .mattrs-gn-hosting-cp img,
.has-contrast-background-color .mattrs-gn-hosting-cp img {
  filter: brightness(0) invert(1);
}

@media (max-width: 779px) {
  .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex !important;
  }
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none !important;
  }
}
@media (min-width: 780px) {
  .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: none !important;
  }
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: block !important;
    width: 100%;
    position: relative;
    z-index: auto;
    background-color: inherit;
  }
}
#globalnav .wp-block-search__button {
  background-color: transparent !important;
}
.wp-block-group:not(.mattrs-has-dark-background) #globalnav .wp-block-search__button {
  color: black;
}
.wp-block-group:not(.mattrs-has-dark-background) #globalnav .wp-block-search__button:hover .search-icon {
  opacity: 0.7;
}

textarea,
input {
  border-radius: 4px;
}

a.wp-element-button,
button {
  transition: transform 0.2s ease-out;
}
a.wp-element-button:hover,
button:hover {
  background-color: var(--wp--preset--color--contrast-2) !important;
  border-color: var(--wp--preset--color--contrast-2) !important;
}
.is-style-outline a.wp-element-button:hover:not(.has-contrast-color):not(.has-accent-3-color),
.is-style-outline button:hover:not(.has-contrast-color):not(.has-accent-3-color) {
  background-color: var(--wp--preset--color--custom-off-white-2) !important;
  border-color: var(--wp--preset--color--custom-off-white-2) !important;
  color: var(--wp--preset--color--contrast) !important;
}
nav a.wp-element-button:hover,
nav button:hover {
  background-color: initial !important;
  border-color: initial !important;
}
a.wp-element-button.has-accent-3-background-color:hover, a.wp-element-button.has-accent-3-color:hover,
button.has-accent-3-background-color:hover,
button.has-accent-3-color:hover {
  transform: scale(1.02);
  background-color: var(--wp--preset--color--custom-accent-3-hover) !important;
}
a.wp-element-button.has-accent-3-color:hover,
button.has-accent-3-color:hover {
  color: var(--wp--preset--color--base-2) !important;
}
a.wp-element-button.has-accent-3-border-color:hover,
button.has-accent-3-border-color:hover {
  border-color: var(--wp--preset--color--custom-accent-3-hover) !important;
}
a.wp-element-button.has-contrast-color:not(.has-base-2-background-color):hover,
button.has-contrast-color:not(.has-base-2-background-color):hover {
  color: var(--wp--preset--color--base-2) !important;
}
a.wp-element-button.has-base-2-color:not(.has-accent-3-background-color):not(.has-accent-3-background-color):not(.has-accent-4-background-color):hover,
button.has-base-2-color:not(.has-accent-3-background-color):not(.has-accent-3-background-color):not(.has-accent-4-background-color):hover {
  color: var(--wp--preset--color--contrast) !important;
  background-color: var(--wp--preset--color--base-2) !important;
}
a.wp-element-button.has-base-2-background-color:hover,
button.has-base-2-background-color:hover {
  background-color: var(--wp--preset--color--custom-off-white-2) !important;
  border-color: var(--wp--preset--color--custom-off-white-2) !important;
}
a.wp-element-button.has-accent-4-background-color:hover,
button.has-accent-4-background-color:hover {
  background-color: var(--wp--preset--color--custom-accent-4-hover) !important;
  border-color: var(--wp--preset--color--custom-accent-4-hover) !important;
}

.mattrs-has-modal body {
  overflow: hidden;
}

.mattrs-modal {
  display: block;
  height: 0;
  overflow: hidden;
  z-index: -999;
  opacity: 0;
  pointer-events: none;
}
.mattrs-has-modal .mattrs-modal {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: auto;
  overflow: auto;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 200;
  pointer-events: auto;
  opacity: 1;
  transition: opacity 0.3s ease-out;
}

@media (max-width: 480px) {
  .mattrs-modal-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
  }
}

.mattrs-modal-wrapper {
  margin-top: -46px !important;
}

.mattrs-modal-content {
  display: none;
}
.mattrs-modal-content.mattrs-modal-open {
  display: block;
}

.mattrs-modal-trigger {
  cursor: pointer;
  transition: transform 0.2s ease-out;
}
.mattrs-modal-trigger:hover {
  transform: scale(1.02);
}
.mattrs-modal-trigger:hover .mattrs-modal-trigger-button {
  opacity: 1;
}

.mattrs-modal-trigger-button {
  cursor: pointer;
  opacity: 0.1;
  transition: opacity 0.6s ease-out;
}

.mattrs-modal-close {
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease-out;
}
.mattrs-modal-close:hover {
  opacity: 1;
}

/* Ensure the target element is positioned relative for the pseudo-element to align correctly */
.mattrs-flash-highlight {
  position: relative;
}
.mattrs-flash-highlight::before {
  content: "";
  position: absolute;
  display: block;
  top: -1rem;
  left: -1rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 0, 0.5); /* Flash color with transparency */
  animation: flashAnimation 1s ease-in-out;
}

@keyframes flashAnimation {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.entry-content sup.fn {
  font-size: 60%;
  font-weight: bold;
}
.entry-content sup.fn a {
  display: inline-block;
  padding: 0.1em 0.3em;
  position: relative;
  z-index: 0;
}
.entry-content sup.fn a:hover {
  transform: scale(1.3);
}
.entry-content sup.fn a:after {
  content: "";
  z-index: -1;
  position: absolute;
  display: block;
  top: -0.2em;
  left: -1em;
  bottom: -0.3em;
  right: -0.3em;
  border-radius: 2px;
}

.mattrs-limit-width {
  max-width: 45rem;
}

.mattrs-limit-width-more {
  max-width: 39rem;
}

.mattrs-page-menu .wp-block-navigation__responsive-container-close {
  right: auto;
}

.mattrs-hover-card-zoom {
  transition: transform 0.3s ease-out;
}
.mattrs-hover-card-zoom:hover {
  transform: scale(1.007);
}

.wp-block-button__link {
  transition: box-shadow 0.3s ease-in-out;
}

.wp-block-button__link:hover {
  box-shadow: 3px 5px 0px 0 rgba(0, 0, 0, 0.2) !important;
}

/* WP ImageViewer customisation */
.iv-fullscreen {
  background-color: var(--wp--preset--color--base);
}
.iv-fullscreen:before, .iv-fullscreen:after {
  background-color: var(--wp--preset--color--contrast);
}

.iv-prev,
.iv-next,
.iv-fullscreen-close {
  filter: grayscale(100%) invert(100%);
}

.iv-snap-view {
  background-color: var(--wp--preset--color--base);
}

.mattrs-hide-form-required-label.grunion-label-required,
.mattrs-hide-form-required-label .grunion-label-required,
.mattrs-hide-form-required-label-wrap.grunion-label-required,
.mattrs-hide-form-required-label-wrap .grunion-label-required {
  display: none;
}

.contact-form-submission {
  box-sizing: border-box;
}

.mtr-hero-video-figure {
  width: calc(100% + 2px);
  margin: -1px !important;
}

.mtr-border-to-psoudoselector {
  position: relative;
  z-index: 0;
}
.mtr-border-to-psoudoselector:after {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  left: -12px;
  top: -12px;
  right: -12px;
  bottom: -12px;
  border: inherit;
  border-radius: 10px;
}

.mtr-column-video-stretch-vertically {
  align-self: stretch !important;
}
.mtr-column-video-stretch-vertically > .wp-block-group {
  height: 100%;
}
.mtr-column-video-stretch-vertically > .wp-block-group > figure {
  height: calc(100% + 2px);
}
.mtr-column-video-stretch-vertically > .wp-block-group > figure > video {
  height: 100%;
}

a.has-contrast-3-background-color:hover {
  background-color: var(--wp--preset--color--accent-3) !important;
}

mark {
  padding-left: 0;
  padding-right: 0;
}

/*# sourceMappingURL=public.css.map */