/*
 * Shared across every page: the small hover and press feedback, the floating
 * quote button, and the phone layout. Each page's desktop look is inline in
 * its template; the motion here is extra, and the phone rules at the bottom
 * reshape the layout below 960px and 700px.
 *
 * The motion is deliberately small — a button warms or darkens, a photo eases
 * in a few percent — and all of it is switched off for anyone whose device asks
 * for reduced motion.
 */

/* Buttons and links ease between their colours instead of snapping, and press
   in slightly when clicked or tapped. The colours themselves come from each
   template's style-hover. */
a, button {
  transition: background-color .18s ease, color .18s ease, border-color .18s ease,
              box-shadow .18s ease, transform .12s ease;
}
a:active, button:active { transform: translateY(1px) scale(.98); }

/* Photos ease in a little on hover. Every photo slot carries data-bh-image and
   clips its own overflow, so the zoom stays inside the frame. The home hero is
   a background, not a picture to look at, and opts out with .ww-still. */
[data-bh-image] img { transition: transform .5s ease; }
[data-bh-image]:hover img { transform: scale(1.05); }
.ww-still img, .ww-still:hover img { transform: none; }

/* --------------------------------------------------------- floating button */
#float-cta {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 10px 24px;
  border-radius: 999px;
  background: #C0532F;
  color: #FFFFFF;
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .08) inset;
  /* Hidden until the visitor is past the top of the page, where the hero's
     own buttons already say the same thing. site.js adds .ww-scrolled. */
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, background-color .18s ease, box-shadow .18s ease;
}
.ww-scrolled #float-cta { opacity: 1; transform: none; pointer-events: auto; }
#float-cta:hover { background: #D9653F; color: #FFFFFF; transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0, 0, 0, .5); }
#float-cta:active { transform: translateY(0) scale(.97); }
.float-cta__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  font-size: 17px;
  transition: transform .18s ease;
}
#float-cta:hover .float-cta__arrow { transform: translateX(3px); }

/* Gallery photos ease in slightly on hover, the only motion on the wall. */
.ww-gallery-tile img { transition: transform .6s ease; }
@media (hover: hover) {
  .ww-gallery-tile:hover img { transform: scale(1.03); }
}

/* Phones already have the bar across the bottom; two floating things would
   cover the page. */
@media (max-width: 700px) {
  #float-cta { display: none; }
}

/* ------------------------------------------------------------------ phones
 *
 * The templates' inline styles are the desktop layout. These rules are the
 * small-screen layout on top of them, keyed to the ww-* classes in the
 * templates; !important is what lets a stylesheet win over an inline style.
 */

/* The menu button only exists below the breakpoint. */
.ww-menu-btn { display: none; }

@media (max-width: 960px) {
  .ww-header { position: relative; padding: 12px 16px !important; gap: 12px !important; }
  .ww-logo { height: 34px !important; }

  .ww-menu-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid #3E3A35;
    border-radius: 8px;
    background: transparent;
    color: #F3F0EA;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .ww-menu-btn span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .2s ease, opacity .2s ease;
  }
  .ww-menu-open .ww-menu-btn { border-color: #E08A6A; color: #E08A6A; }
  .ww-menu-open .ww-menu-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .ww-menu-open .ww-menu-btn span:nth-child(2) { opacity: 0; }
  .ww-menu-open .ww-menu-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* The links drop down under the header as full-width rows, big enough to
     hit with a thumb, with the two buttons at the bottom. */
  .ww-nav {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 2px !important;
    padding: 10px 16px 20px;
    background: #1C1B1A;
    border-bottom: 1px solid #36332E;
    box-shadow: 0 24px 40px rgba(0, 0, 0, .5);
    max-height: calc(100vh - 72px);
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
  }
  .ww-menu-open .ww-nav { display: flex !important; }
  .ww-nav a {
    font-size: 18px !important;
    padding: 14px 12px !important;
    margin: 0 !important;
    border-radius: 6px;
  }
  .ww-nav a.ww-nav-call,
  .ww-nav a.ww-nav-quote {
    text-align: center;
    padding: 15px 18px !important;
    margin-top: 10px !important;
  }
  .ww-nav a.ww-nav-call + a.ww-nav-quote { margin-top: 8px !important; }
}

@media (max-width: 700px) {
  /* Service cards: a shorter photo, so the card is about the words. */
  .ww-svc-img { height: 168px !important; }

  /* Recent projects and the gallery are photos: two to a row on a phone
     instead of one tall photo after another. A gallery tile marked "wide"
     still spans both columns, as it does on a desktop. */
  .ww-recent-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .ww-recent-grid > * { height: 160px !important; }
  .ww-gallery-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: 180px !important;
    gap: 6px !important;
  }

  /* Links set as plain text — a phone number, the email address, "Directions →",
     a link inside a paragraph — get a thumb-sized hit area. Vertical padding
     on an inline link does not move the line it sits in, and a block one
     grows by the padding, which is the point. Buttons, the menu and the
     footer rows set their own padding (inline, or with !important here) and
     keep it, because :where() gives this rule no specificity to fight them
     with; the header's logo and the call bar are put back as they were. */
  :where(#page-wrap) a { padding-top: 12px; padding-bottom: 12px; }
  .ww-header a, #call-bar a { padding-top: 0; padding-bottom: 0; }

  /* Footer link lists: rows a thumb can hit without catching the one below. */
  .ww-foot-links { gap: 0 !important; }
  .ww-foot-links a { padding: 12px 0; }
  .ww-foot-social a { padding: 11px 16px !important; }

  /* The send button on the forms: full width, under the thumb. */
  .ww-submit { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  a:active, button:active, [data-bh-image]:hover img,
  #float-cta, #float-cta:hover, #float-cta:active, #float-cta:hover .float-cta__arrow { transform: none !important; }
}