/**
Theme Name: Click Wise Design
Author: Click Wise Design
Author URI: https://clickwisedesign.com
Description: Custom WordPress theme by Click Wise Design.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: click-wise-design
Template: astra
*/

:root {
  --br: 10px;
  --shadow: 0 2px 1rem -4px rgba(0, 0, 0, 0.2);
}

html,
body {
  width: 100%;
  height: auto;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
}

@view-transition {
  navigation: auto;
}

.line-grow-left .wp-block-uagb-separator__inner {
  position: relative;
  display: block;
  width: 0%; /* Start from zero width */
  opacity: 0; /* Start invisible */
  transform-origin: right; /* Start growing from the right */
  animation:
    growFromRight 1s ease-out forwards,
    fadeIn 0.5s ease-out forwards;
}

@keyframes growFromRight {
  from {
    width: 0%; /* Start from zero width */
  }
  to {
    width: 100%; /* Grow to full width */
  }
}

/* fix logo being behind top header */
.main-header-bar {
  box-shadow: none !important;
  z-index: 10;
}

/* fix contact form not filling width */
.wp-block-uagb-container.uagb-layout-grid > .uagb-block-c6506a5e.uagb-is-root-container {
  width: 100% !important;
}

.site-header {
  width: 100%;
  top: 0;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.25);
}

.ast-above-header.ast-above-header-bar {
  position: relative;
}

.ast-above-header.ast-above-header-bar::after {
  content: "";
  position: absolute;
  width: min(70%, 1200px);
  height: 2px;
  bottom: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.5);
}

.ast-above-header-bar.ast-sticky-active {
  top: 0 !important;
}

#ast-desktop-header .ast-primary-header-bar.ast-sticky-active {
  top: 52px !important;
}

.ast-primary-sticky-header-active .ast-primary-header-bar {
  background: none !important;
}

.header-button {
  --ac: var(--ast-global-color-1);

  padding: 20px 32px;
  background: transparent;
  /*border-radius: var(--br);*/
  display: flex;
  position: relative;
  overflow: hidden;
  transition: all 200ms ease-in-out;
}

.header-button::after {
  content: "";
  width: 200%;
  height: 100%;
  position: absolute;
  top: 0;
  left: -200%;
  transition: left 300ms ease-in-out;
}

.header-button:hover::after {
  left: 0%;
}

.header-button__label {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 1rem;
  z-index: 1;
}

@keyframes header-button-background {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.header-button::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  /*background: linear-gradient(
    110deg,
    var(--ast-global-color-0),
    var(--ast-global-color-1),
    var(--ast-global-color-0)
  );*/
  background-color: #fff;
  background-size: 400% 400%;
  animation: header-button-background 5s linear infinite;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.header-button:hover {
  transform: translateY(-2px) scale(1.03);
}

.uagb-block-9a97d13d > .wp-block-uagb-container {
  transition-property: background-color, transform, translate, opacity !important;
  transition-duration: 150ms !important;
  transition-timing-function: ease-in-out !important;
}

.uagb-block-9a97d13d > .wp-block-uagb-container:hover {
  background-color: color-mix(in srgb, var(--ast-global-color-1) 10%, var(--ast-global-color-7)) !important;
  translate: 0 -0.25rem !important;
}

.wp-block-uagb-container.uagb-block-712b80e8::before {
  height: calc(100%) !important;
}

.bg-dots,
.bg-grid {
  position: relative;
  z-index: 0;
}

.bg-dots::after,
.bg-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: var(--spacing) var(--spacing);
}

.bg-dots::after {
  --spacing: 1.5rem;

  opacity: 0.25;
  background-image: radial-gradient(white 1px, transparent 1px), radial-gradient(white 1px, transparent 1px);
  background-position: center;
}

.bg-grid::after {
  --spacing: 2rem;
  --color: #fff;

  opacity: 0.2;
  background-image:
    linear-gradient(to right, var(--color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(ellipse 50% 80% at 50% 0%, #000 80%, transparent 110%);
  mask-image: radial-gradient(ellipse 50% 80% at 50% 0%, #000 80%, transparent 110%);
}

.swoosh {
  position: relative;
}

.swoosh::after {
  content: "";
  width: 100%;
  height: clamp(32px, 7vw, 96px);
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: var(--ast-global-color-7);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,20 C460,100 1080,20 1440,30 L1440,80 L0,80 Z' fill='%23000'/%3E%3C/svg%3E")
    no-repeat center bottom;
  -webkit-mask-size: 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,20 C460,100 1080,20 1440,30 L1440,80 L0,80 Z' fill='%23000'/%3E%3C/svg%3E")
    no-repeat center bottom;
  mask-size: 100% 100%;
  pointer-events: none;
}

.center-up {
  translate: 0% -50%;
}

.uagb-icon-margin-wrapper {
  display: flex;
}

#work-gallery {
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--ast-global-color-0) 7%, var(--ast-global-color-7))
      color-mix(in srgb, var(--ast-global-color-0) 10%, var(--ast-global-color-7))
  );
}

#services > div {
  position: relative;
  overflow: hidden;
  transition-property: background-color, border-color, transform, opacity, scale !important;
  transition-duration: 150ms !important;
  transition-timing-function: ease-in-out !important;
}

#services > div::after {
  content: "";
  width: 200%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  position: absolute;
  top: 0;
  left: -200%;
  transition: left 300ms ease-in-out;
}

#services > div:hover::after {
  left: 0%;
}

#services > div:hover {
  background-color: color-mix(in srgb, var(--ast-global-color-0) 10%, var(--ast-global-color-6)) !important;
  scale: 1.05;
}

.w-l .uagb-container-inner-blocks-wrap {
  max-width: min(100%, 1800px) !important;
}

.current_page_item .menu-link,
.menu-link:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
  text-decoration-color: var(--ast-global-color-0);
}

#service-sidebar {
  background-color: color-mix(in srgb, var(--ast-global-color-0) 60%, #000) !important;
}

#service-sidebar .wp-block-uagb-icon-list-child {
  padding-top: 20px;
  border-bottom: solid 1px white;
  width: 100%;
  padding-bottom: 20px;
  transition: padding-left 0.3s ease;
  padding-left: 0; /* No reserved space by default */
  margin-bottom: 0;
}

#service-sidebar .wp-block-uagb-icon-list-child span {
  text-align: left;
}

#service-sidebar .wp-block-uagb-icon-list-child::before {
  content: "→";
  position: absolute;
  right: 100%; /* Position to the left of the text */
  top: 50%;
  transform: translate(-10px, -50%);
  opacity: 0;
  margin-right: 0.3em; /* Small gap between arrow and text */
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
  color: white;
}

#service-sidebar .wp-block-uagb-icon-list-child:hover::before,
#service-sidebar .wp-block-uagb-icon-list-child.active::before {
  opacity: 1;
  transform: translate(0, -50%);
}

#service-sidebar:has(.wp-block-uagb-icon-list-child:hover) .wp-block-uagb-icon-list-child.active:not(:hover)::before {
  opacity: 0;
  transform: translate(-10px, -50%);
}

#service-sidebar h2::after {
  content: "";
  background-color: white;
  height: 4px;
  width: 70%;
  display: block;
}

.wp-block-uagb-container.uagb-layout-grid > .wp-block-uagb-container {
  width: 100% !important;
}

/* Desktop submenu override */
@media (min-width: 922px) {
  .sub-menu {
    background: color-mix(in srgb, var(--ast-global-color-0) 90%, transparent) !important;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .sub-menu:has(> :nth-child(10)) {
    grid-template-columns: repeat(3, 1fr);
  }

  .sub-menu li {
    padding: 0.5rem 1rem;
  }

  .sub-menu li::after {
    content: "";
    height: 1px;
    background: #fff9;
    left: 10%;
    right: 10%;
    bottom: 0;
    position: absolute;
  }

  /* Remove line from bottom items of each column */
  .sub-menu li:nth-last-child(-n + 2)::after {
    display: none;
  }
}

.safe-svg-inline path {
  fill: var(--ast-global-color-0) !important;
  stroke: var(--ast-global-color-0) !important;
}

.uagb-post-grid.is-grid.uagb-post__image-position-top .uagb-post__image a[class^="uagb-image-ratio-"] > img {
  max-width: 390px !important;
  height: 300px !important;
}

@media (max-width: 576px) {
  .uagb-block-7b68d00c > div:nth-child(1) {
    align-items: start !important;
  }
}

.solid-hero {
  background-color: color-mix(in srgb, var(--ast-global-color-0) 85%, #000) !important;
}

@media (max-width: 921px) {
  .header-button::before {
    background-color: black;
  }

  .header-button__label {
    color: black;
  }

  #ast-hf-mobile-menu .sub-menu .menu-link {
    --mobile-bg: color-mix(in srgb, var(--ast-global-color-0) 10%, transparent);
    background-color: var(--mobile-bg);
    color: black;
    border-top: 2px solid var(--mobile-bg);
  }

  #ast-hf-mobile-menu .sub-menu .ast-icon {
    display: none;
  }
}

/* ==========================================================================
   Footer (replaces the Astra footer; markup in functions.php)

   Colours come from the Astra palette so the footer follows the theme.
   Columns are widget areas, so these rules normalise whatever blocks an editor
   drops in. Utility classes usable from the block editor's
   "Additional CSS class(es)" field:
     cwd-footer-tile       icon block -> brand-coloured chip with a white icon
     cwd-footer-row        group block -> icon + text on one line
     cwd-footer-row--link  that row's link covers the whole row
   ========================================================================== */
.cwd-footer {
  --cwd-footer-bg: var(--ast-global-color-6);
  --cwd-footer-text: var(--ast-global-color-3);
  --cwd-footer-heading: var(--ast-global-color-2);
  --cwd-footer-line: var(--ast-global-color-4);
  --cwd-footer-accent: var(--ast-global-color-0);

  background-color: var(--cwd-footer-bg);
  color: var(--cwd-footer-text);
  font-size: 16px;
  line-height: 1.5;
}

.cwd-footer__inner {
  max-width: 1500px;
  margin-inline: auto;
  padding: 48px 32px 28px;
}

/* The plugin's contact bar is `position: fixed` at the bottom of the viewport
   (`#sticky-wrapper`, 69px tall), so the last footer row would sit under it at
   full scroll. Reserve its height, and only when the bar is actually output. */
body:has(#sticky-wrapper) .cwd-footer__inner {
  padding-bottom: 97px;
}

/* Brand row */
.cwd-footer__brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 32px;
  margin-bottom: 40px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--cwd-footer-line);
}

.cwd-footer__logo {
  display: inline-flex;
}

/* Beats the generic `.cwd-footer img` cap below. */
.cwd-footer .cwd-footer__logo-img {
  display: block;
  width: auto;
  max-width: 340px;
  height: auto;
  max-height: 96px;
  object-fit: contain;
}

.cwd-footer__logo-text {
  color: var(--cwd-footer-heading);
  font-size: 28px;
  font-weight: 700;
}

.cwd-footer__brand-side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 16px 24px;
}

.cwd-footer__brand-side .cwd-footer__widget {
  display: flex;
  align-items: center;
}

/* Column grid: the track count comes from the number of populated columns, so
   an empty column never leaves a dead gap. */
.cwd-footer__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px 56px;
  padding-bottom: 40px;
}

@media (min-width: 577px) {
  .cwd-footer__cols--2,
  .cwd-footer__cols--3,
  .cwd-footer__cols--4,
  .cwd-footer__cols--5,
  .cwd-footer__cols--6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 922px) {
  .cwd-footer__cols {
    gap: 48px 96px;
  }

  .cwd-footer__cols--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cwd-footer__cols--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .cwd-footer__cols--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .cwd-footer__cols--6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* Block content normalisation */
.cwd-footer__col > .cwd-footer__widget + .cwd-footer__widget {
  margin-top: 24px;
}

.cwd-footer__widget > :first-child {
  margin-top: 0;
}

.cwd-footer__widget > :last-child {
  margin-bottom: 0;
}

.cwd-footer :is(h1, h2, h3, h4, h5, h6) {
  margin: 0 0 14px;
  color: var(--cwd-footer-heading);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

.cwd-footer :is(h1, h2, h3, h4, h5, h6):not(:first-child) {
  margin-top: 24px;
}

.cwd-footer p {
  margin: 0 0 8px;
}

/* Buttons keep the Button block's own colours. */
.cwd-footer a:not(.cwd-button) {
  color: var(--cwd-footer-text);
  text-decoration: none;
  transition: color 150ms ease-in-out;
}

.cwd-footer a:not(.cwd-button):hover {
  color: var(--cwd-footer-accent);
}

.cwd-footer ul,
.cwd-footer ol {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.4;
}

.cwd-footer li {
  margin: 0;
}

.cwd-footer li > a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.cwd-footer img,
.cwd-footer iframe {
  max-width: 100%;
}

.cwd-footer figure {
  margin: 0 0 16px;
}

.cwd-footer hr,
.cwd-footer .wp-block-separator {
  margin: 24px 0;
  border: 0;
  border-top: 1px solid var(--cwd-footer-line);
}

.cwd-footer a:focus-visible {
  outline: 2px solid var(--cwd-footer-accent);
  outline-offset: 3px;
}

/* Editor utilities */
.cwd-footer .cwd-footer-tile {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background-color: var(--cwd-footer-accent);
  color: #fff;
  font-size: 16px;
  transition: background-color 150ms ease-in-out;
}

.cwd-footer .cwd-footer-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* A heading rowed up with an icon must not keep its stacked bottom margin. */
.cwd-footer .cwd-footer-row :is(h1, h2, h3, h4, h5, h6),
.cwd-footer .cwd-footer-row p {
  margin: 0;
}

/* Icon blocks default to width:100%; keep them inline when rowed up. */
.cwd-footer .cwd-footer-row > .cwd-icon:not(.cwd-footer-tile) {
  width: auto;
}

/* Row whose single link covers the whole row, icon chip included. Add
   `cwd-footer-row cwd-footer-row--link` to a group holding one link. */
.cwd-footer .cwd-footer-row--link {
  position: relative;
  border-radius: 8px;
}

.cwd-footer .cwd-footer-row--link a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.cwd-footer .cwd-footer-row--link:hover a:not(.cwd-button) {
  color: var(--cwd-footer-accent);
}

.cwd-footer .cwd-footer-row--link:hover .cwd-footer-tile {
  background-color: color-mix(in srgb, var(--cwd-footer-accent) 82%, #000);
}

.cwd-footer .cwd-footer-row--link:focus-within {
  outline: 2px solid var(--cwd-footer-accent);
  outline-offset: 4px;
}

.cwd-footer .cwd-footer-row--link a:focus-visible {
  outline: none;
}

/* Business hours block: day on the left, hours flush right */
.cwd-footer .cwd-business-hours--list {
  grid-template-columns: minmax(0, 1fr) auto;
}

.cwd-footer .cwd-business-hours--list .cwd-business-hours__day {
  color: var(--cwd-footer-text);
  font-weight: 400;
}

.cwd-footer .cwd-business-hours--list .cwd-business-hours__hours {
  color: var(--cwd-footer-heading);
  text-align: end;
}

/* Bottom bar */
.cwd-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: 24px;
  border-top: 1px solid var(--cwd-footer-line);
}

.cwd-footer__copyright {
  margin: 0;
  color: var(--cwd-footer-text);
  font-size: 14px;
}

.cwd-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 13px;
}

.cwd-footer__legal a {
  color: var(--cwd-footer-text);
  opacity: 0.75;
}

.cwd-footer__legal a:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 921px) {
  .cwd-footer__brand {
    flex-direction: column;
    align-items: flex-start;
  }

  .cwd-footer__brand-side {
    justify-content: flex-start;
  }
}

@media (max-width: 576px) {
  .cwd-footer__inner {
    padding: 40px 20px 24px;
  }

  .cwd-footer__brand {
    padding-bottom: 24px;
  }

  .cwd-footer__brand-side {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
}