/**
Theme Name: ODPH
Author: Martin Stevens
Author URI: https://wpxl.co.uk
Description: Custom theme for OPDH
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: odph
Template: astra
*/


/* DEBUG */
/* * {
    outline: 1px solid red;
    outline-offset: -1px;
} */

@media (min-width: 1200px) {
  .ast-plain-container.ast-no-sidebar #primary {
    margin-top: 0;
    margin-bottom: 0;
  }
}




/* Minimal mobile overflow fix for Spectra */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

/* Only target containers that commonly cause overflow */
.wp-block-uagb-container {
  max-width: 100%;
  box-sizing: border-box;
}

/* Fix for any element with inline width styles from Spectra */
[style*="width"]:not(img):not(video) {
  max-width: 100% !important;
}

a#phone {
  position: absolute;
  top: 1rem;
  width: 100%;
}

.wp-block-button {
  perspective: 1000px;
}

.wp-block-button__link {
  transform: scale(0.98) translateY(0px) rotateX(0deg);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.wp-block-button:hover .wp-block-button__link {
  transform: scale(1.02) translateY(-6px) rotateX(2deg);
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.15),
    0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Optional: Add a subtle press effect when clicked */
.wp-block-button:active .wp-block-button__link {
  transform: scale(0.99) translateY(-2px) rotateX(1deg);
  transition: all 0.1s ease;
}

.servicelink {
  perspective: 1000px;
}

.servicelink .info {
  transform: scale(0.95) translateY(0px) rotateX(0deg);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.servicelink:hover .info {
  transform: scale(1.02) translateY(-8px) rotateX(2deg);
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.15),
    0 4px 8px rgba(0, 0, 0, 0.1);
}

.ast-desktop .ast-primary-header-bar .main-header-menu>.menu-item {
  line-height: 1;
  padding: 2rem 0.5rem;
  top: 1.5rem;
}

.ast-desktop .ast-primary-header-bar .main-header-menu>.menu-item.phone,
a#phone,
a#mobile-phone {
  position: absolute;
  right: 0;
  top: -0.25rem;
  height: 2rem;
  padding: 0;
  font-size: 1.5rem;
  font-weight: 600;
}

.ast-desktop .ast-primary-header-bar .main-header-menu>.menu-item.phone:before,
a#phone:before,
a#mobile-phone:before {
  content: "";
  display: block;
  width: 26px;
  height: 26px;
  background-image: url(img/call-drake-boilers-house.svg);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  right: 200px;
  top: 1px;
  transition: all 0.2s ease;
  transform: scale(1);
}

.ast-desktop .ast-primary-header-bar .main-header-menu>.menu-item.phone:hover:before,
a#phone:hover:before,
a#mobile-phone:before {
  transform: scale(0);
}

.ast-desktop .ast-primary-header-bar .main-header-menu>.menu-item.phone:after,
a#phone:after,
a#mobile-phone:after {
  content: "";
  display: block;
  width: 26px;
  height: 26px;
  background-image: url(img/call-drake-boilers-phone.svg);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  right: 200px;
  top: 1px;
}



.ast-builder-grid-row>.site-header-section {
  position: relative;
}

a#phone {
  right: 0;
  top: 3rem;
}


/* Phone ringing shake animation with scale */
@keyframes phoneRing {

  0%,
  100% {
    transform: scale(1.3) rotate(0deg);
  }

  10% {
    transform: scale(1.3) rotate(-10deg);
  }

  20% {
    transform: scale(1.3) rotate(10deg);
  }

  30% {
    transform: scale(1.3) rotate(-8deg);
  }

  40% {
    transform: scale(1.3) rotate(8deg);
  }

  50% {
    transform: scale(1.3) rotate(-6deg);
  }

  60% {
    transform: scale(1.3) rotate(6deg);
  }

  70% {
    transform: scale(1.3) rotate(-3deg);
  }

  80% {
    transform: scale(1.3) rotate(3deg);
  }

  90% {
    transform: scale(1.3) rotate(-1deg);
  }
}

/* Apply animation on hover */
/* .ast-desktop .ast-primary-header-bar .main-header-menu > .menu-item.phone:hover:after {
    animation: phoneRing 0.8s ease-in-out infinite;
    transform-origin: center center;
  } */
.ast-desktop .ast-primary-header-bar .main-header-menu>.menu-item.phone:hover:after,
#mobile-phone:after {
  animation: phoneRing 0.8s ease-in-out infinite;
  transform-origin: center center;
  background-image: url(img/call-drake-boilers-phone-blue.svg);
  cursor: pointer;
}


.wp-block-uagb-container.uagb-block-af61c601 {
  background-position: center !important;
}

@media (max-width: 921px) {

  li.phone.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-74 a.menu-link {
    color: #fff !important;
    background: #02324d !important;
  }

}