/*
Theme Name: Wagging Galore Astra Child
Theme URI: https://wagginggalore.local/
Description: Astra child theme for the Wagging Galore website.
Author: Wagging Galore
Template: astra
Version: 1.0.1
Text Domain: wagging-galore-astra-child
*/

/*
Palette
Navy:      #1F2A3D
Teal:      #2D8F88
Soft teal: #8FC8C2
Pale sage: #F4F8F7
Border:    #DCE8E4
*/

/* Testimonial blockquotes */
blockquote {
    color: #334155;
    font-style: italic;
    border-left: 4px solid #8FC8C2;
    margin: 0;
    padding: 0.5rem 0 0.5rem 2rem;
}

blockquote footer {
    margin-top: 1.5rem;
}

blockquote footer cite {
    color: #2D8F88;
    font-weight: 700;
    font-style: normal;
}

/*
Optional Beaver Builder card styling.
Add this class in Advanced > CSS Class:
wagging-card
*/
.wagging-card {
    background: #F4F8F7;
    border: 1px solid #DCE8E4;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(31, 42, 61, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

@media (hover: hover) {
    .wagging-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 30px rgba(31, 42, 61, 0.12);
    }
}

/* Consistent teal links for phone and email areas */
.wagging-contact a {
    color: #2D8F88;
}

.wagging-contact a:hover,
.wagging-contact a:focus {
    color: #1F2A3D;
}

/* Round scroll-to-top button */
#ast-scroll-top {
    border-radius: 50%;
}

/* Mobile refinements */
@media (max-width: 767px) {
    blockquote {
        padding-left: 1.25rem;
    }

    .wagging-card {
        border-radius: 14px;
    }
}

.waggin-hero {
    --waggin-navy: #071d36;
    --waggin-teal: #55b9ad;
    --waggin-pink: #e98aa5;
    --waggin-ink: #334155;
    --waggin-sky: #edf8fa;
    --waggin-image: url("http://waggingalore.local/wp-content/uploads/2026/08/waggin-hero-dog-e1785769388519.webp");

    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: clamp(540px, 38vw, 760px);
    overflow: hidden;
    background: var(--waggin-sky);
    font-family: Arial, Helvetica, sans-serif;
  }

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

  /* Dog photograph */

  .waggin-hero__photo {
    position: absolute;
    z-index: -2;
    top: 0;
    right: 0;
    bottom: 0;
    width: 59%;
    background-image: var(--waggin-image);
    background-size: cover;
    background-position: 52% center;
    background-repeat: no-repeat;
  }

  .waggin-hero__photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      var(--waggin-sky) 0%,
      rgba(237, 248, 250, 0.97) 7%,
      rgba(237, 248, 250, 0.72) 18%,
      rgba(237, 248, 250, 0.22) 34%,
      rgba(237, 248, 250, 0) 50%
    );
  }

  /* Main content */

  .waggin-hero__inner {
    position: relative;
    z-index: 2;
    width: min(1500px, 100%);
    min-height: inherit;
    margin-inline: auto;
    padding:
      clamp(70px, 7vw, 140px)
      clamp(28px, 7vw, 120px)
      clamp(120px, 10vw, 190px);
    display: flex;
    align-items: center;
  }

  .waggin-hero__content {
    position: relative;
    width: min(53%, 690px);
  }

  .waggin-hero__title {
    max-width: 760px;
    margin: 0;
    color: var(--waggin-navy);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(52px, 5.25vw, 104px);
    font-weight: 700;
    line-height: 0.99;
    letter-spacing: -0.045em;
    text-wrap: balance;
  }

  .waggin-hero__heart {
    display: inline-block;
    margin-left: 0.09em;
    color: var(--waggin-pink);
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    line-height: 1;
    transform: translateY(-0.02em);
  }

  .waggin-hero__copy {
    max-width: 650px;
    margin: clamp(26px, 2.5vw, 44px) 0 0;
    color: var(--waggin-ink);
    font-size: clamp(19px, 1.5vw, 29px);
    line-height: 1.58;
    text-wrap: pretty;
  }

  /* Decorative paw */

  .waggin-paw {
    position: absolute;
    z-index: -1;
    top: 18%;
    left: clamp(-80px, -5vw, -36px);
    width: 210px;
    height: 210px;
    opacity: 0.24;
    transform: rotate(-8deg);
    pointer-events: none;
  }

  .waggin-paw span {
    position: absolute;
    display: block;
    background: #a9d9dc;
  }

  .waggin-paw__pad {
    top: 92px;
    left: 50px;
    width: 104px;
    height: 95px;
    border-radius: 50% 50% 46% 46%;
    transform: rotate(6deg);
  }

  .waggin-paw__toe {
    border-radius: 50%;
  }

  .waggin-paw__toe--1 {
    top: 58px;
    left: 0;
    width: 58px;
    height: 76px;
    transform: rotate(-24deg);
  }

  .waggin-paw__toe--2 {
    top: 4px;
    left: 42px;
    width: 55px;
    height: 75px;
    transform: rotate(-8deg);
  }

  .waggin-paw__toe--3 {
    top: 7px;
    right: 43px;
    width: 55px;
    height: 75px;
    transform: rotate(10deg);
  }

  .waggin-paw__toe--4 {
    top: 61px;
    right: 0;
    width: 58px;
    height: 76px;
    transform: rotate(24deg);
  }

  /* Full-width bottom curve */

  

  /* Tablet and mobile */

  @media (max-width: 900px) {
    .waggin-hero {
      min-height: auto;
      display: flex;
      flex-direction: column;

      /*
      Breaks the hero out of a boxed theme container so the background
      and photograph can reach both sides of the screen.
      */
      width: 100vw;
      max-width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
    }

    .waggin-hero__inner {
      position: relative;
      z-index: 2;
      order: 1;
      width: 100%;
      min-height: 0;
      padding: 64px 24px 34px;
    }

    .waggin-hero__content {
      width: 100%;
    }

    .waggin-hero__title {
      max-width: 650px;
      font-size: clamp(46px, 12vw, 74px);
    }

    .waggin-hero__copy {
      max-width: 620px;
      font-size: clamp(18px, 4.7vw, 23px);
      line-height: 1.5;
    }

    .waggin-hero__photo {
      position: relative;
      z-index: 0;
      order: 2;
      top: auto;
      right: auto;
      bottom: auto;
      width: 100%;
      height: clamp(330px, 70vw, 560px);
      background-position: 54% 42%;
    }

    .waggin-hero__photo::before {
      background: linear-gradient(
        180deg,
        var(--waggin-sky) 0%,
        rgba(237, 248, 250, 0.56) 12%,
        rgba(237, 248, 250, 0) 31%
      );
    }

    .waggin-paw {
      top: 35px;
      left: -72px;
      transform: scale(0.72) rotate(-8deg);
      transform-origin: top left;
    }

    /*
    A shallower curve on tablets prevents the large white dome.
    The curve still spans the entire hero.
    */

    .waggin-hero__wave {
      left: -10%;
      right: -10%;
      bottom: -55px;
      height: 82px;
      border-radius: 50% 50% 0 0 / 70% 70% 0 0;
      transform: none;
    }
  }

  @media (max-width: 480px) {
    .waggin-hero__inner {
      padding: 52px 20px 32px;
    }

    .waggin-hero__title {
      font-size: clamp(42px, 12.5vw, 58px);
      letter-spacing: -0.05em;
      line-height: 0.98;
    }

    .waggin-hero__heart {
      margin-left: 0.04em;
    }

    .waggin-hero__copy {
      margin-top: 28px;
      font-size: 18px;
      line-height: 1.48;
    }

    .waggin-hero__photo {
      height: 360px;
      background-position: 52% 38%;
    }

    /*
    Very gentle phone curve.
    */

    .waggin-hero__wave {
      left: -15%;
      right: -15%;
      bottom: -142px;
      height: 62px;
      border-radius: 50% 50% 0 0 / 60% 60% 0 0;
    }
  }