/* ===========================================================================
   Westie Puppies For Home - design layer
   Loaded after wpfh-site.css. Typography, motion, surface treatment.
   The palette is inherited untouched: no colour token is redefined here.
   =========================================================================== */

:root{
  /* Display voice. Fraunces carries an optical-size axis, so headings are cut
     for their size rather than scaled from one drawing. */
  --wpfh-font-display:'Fraunces','Lora',Georgia,serif;

  /* Easing. Exponential ease-out for arrivals; the spring is reserved for
     moments that follow a physical, momentum-carrying gesture. */
  --wpfh-expo:cubic-bezier(.16,1,.3,1);
  --wpfh-out:cubic-bezier(.22,.61,.36,1);
  --wpfh-spring:linear(0,.009,.035 2.1%,.141,.281 6.7%,.723 12.9%,.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,.991,.977 51%,.974 53.8%,.98 57.1%,.997 69.8%,1.003 76.9%,1);

  --wpfh-t1:.16s; --wpfh-t2:.3s; --wpfh-t3:.62s;

  /* Fluid display scale. Tracking tightens as size grows (never one value). */
  --wpfh-fs-display:clamp(2.45rem,1.5rem + 4.3vw,4.55rem);
  --wpfh-fs-h2:clamp(1.72rem,1.28rem + 1.85vw,2.7rem);
  --wpfh-fs-h3:clamp(1.16rem,1.04rem + .5vw,1.42rem);
  --wpfh-fs-lede:clamp(1.06rem,1rem + .42vw,1.3rem);
  --wpfh-fs-body:1.0625rem;

  --wpfh-measure:68ch;
}

/* ---------------------------------------------------------------------------
   1. Two voices

   The brief: headings and body text must not read as the same person talking.
   Headings get the serif, optical sizing, negative tracking and tight leading.
   Body gets the sans, near-zero tracking, and generous leading.
   --------------------------------------------------------------------------- */

h1,h2,h3,h4,
.elementor-heading-title,
.xpro-heading-title,
.wpfh-rv-headline,
.wpfh-name-row h2,
.wpfh-name-row h3,
.wpfh-rs-number,
body.single-post .page-header .entry-title,
body.single-post .page-content h2,
body.single-post .page-content h3{
  font-family:var(--wpfh-font-display);
  font-optical-sizing:auto;
  font-weight:600;
  color:var(--wpfh-ink);
  text-wrap:balance;
}

h1,.elementor-widget-heading h1.elementor-heading-title{
  font-size:var(--wpfh-fs-display);
  line-height:1.03;
  letter-spacing:-.032em;
  font-weight:600;
}

h2,.elementor-widget-heading h2.elementor-heading-title{
  font-size:var(--wpfh-fs-h2);
  line-height:1.11;
  letter-spacing:-.021em;
}

h3,.elementor-widget-heading h3.elementor-heading-title{
  font-size:var(--wpfh-fs-h3);
  line-height:1.24;
  letter-spacing:-.012em;
  font-weight:600;
}

h4{line-height:1.3;letter-spacing:-.008em;}

/* Body voice: the sans, quieter, longer-lined, never tracked. */
body,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.wpfh-desc,.wpfh-rs-text,.wpfh-rv-quote p{
  font-family:var(--wpfh-font-body);
  letter-spacing:0;
}

.elementor-widget-text-editor{
  font-size:var(--wpfh-fs-body);
  line-height:1.72;
  color:var(--wpfh-ink-soft);
}

.elementor-widget-text-editor p{max-width:var(--wpfh-measure);}
.elementor-widget-text-editor p:last-child{margin-bottom:0;}

/* A lede sits between the two voices: sans, but larger and darker. */
.wpfh-lede-text .elementor-widget-container,
.wpfh-lede-text p{
  font-size:var(--wpfh-fs-lede);
  line-height:1.6;
  color:var(--wpfh-ink);
}

/* Small labels are the third voice: sans, tracked open, never the serif. */
.wpfh-tag,.wpfh-rs-outof,.wpfh-rv-meta,.wpfh-overline .elementor-heading-title{
  font-family:var(--wpfh-font-body);
  letter-spacing:.1em;
}

/* Figures in data positions line up. */
.wpfh-price,.wpfh-rs-number,.wpfh-mi{font-variant-numeric:tabular-nums;}

/* ---------------------------------------------------------------------------
   2. Legibility floors

   Nothing below 14px, and nothing tappable below 44px.
   --------------------------------------------------------------------------- */

.wpfh-tag{font-size:12px;padding:7px 13px;letter-spacing:.08em;}
.wpfh-gender{font-size:14px;}
.wpfh-mi{font-size:14.5px;}
.wpfh-desc{font-size:15.5px;line-height:1.65;}
.wpfh-rv-quote p{font-size:15px;line-height:1.7;}
.wpfh-rv-loc{font-size:13.5px;}
.wpfh-rv-meta{font-size:11.5px;}
.wpfh-rs-outof{font-size:11.5px;}
.wpfh-overline .elementor-heading-title{font-size:13px;}
.xpro-button-text,.elementor-button-text{font-size:15px;}

@media(max-width:782px){
  .wpfh-tag{font-size:12px;}
  .wpfh-mi{font-size:15px;}
  .wpfh-desc{font-size:16px;}
  .elementor-widget-text-editor{font-size:1.05rem;line-height:1.75;}
  .xpro-button-text,.elementor-button-text{font-size:16px;}

  /* Every nav, footer and inline link becomes a real target. */
  .xpro-elementor-horizontal-navbar-nav > li > a,
  .xpro-elementor-vertical-navbar-nav > li > a,
  .elementor-icon-list-item > a,
  .wpfh-name-row h2 a,.wpfh-name-row h3 a{
    min-height:44px;
    display:flex;
    align-items:center;
  }
  .elementor-icon-list-items .elementor-icon-list-item{margin-bottom:2px;}

  /* Legibility floor.

     Elementor writes per-widget typography at (0,3,1), which no author-level
     selector here can outrank. These are deliberate floors on running text
     and button labels only - the tracked uppercase micro-labels keep their
     smaller size, which is a type decision rather than an oversight. */
  .wpfh-main .elementor-widget-text-editor,
  .wpfh-main .elementor-widget-text-editor p,
  .wpfh-main .elementor-widget-icon-box .elementor-icon-box-description,
  .wpfh-main .elementor-widget-icon-list .elementor-icon-list-text{
    font-size:15.5px !important;
    line-height:1.7 !important;
  }
  .elementor-button-text,.xpro-button-text{font-size:16px !important;}
}

/* Contact details in the footer are now tappable, so they need real height. */
.xpro-infolist-desc a[href^="mailto:"],
.xpro-infolist-desc a[href^="tel:"]{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid rgba(246,239,230,.35);
  transition:border-color var(--wpfh-t1) var(--wpfh-out),color var(--wpfh-t1) var(--wpfh-out);
}
.xpro-infolist-desc a[href^="mailto:"]:hover,
.xpro-infolist-desc a[href^="tel:"]:hover{border-bottom-color:currentColor;}

/* The menu toggle and its close button ship at 40px. */
.xpro-elementor-horizontal-menu-toggler,
.xpro-elementor-horizontal-menu-close{
  min-width:44px;
  min-height:44px;
}

/* The card title link was styled for an h3 the shortcode never emits. */
.wpfh-name-row h2{
  font-size:1.38rem;
  margin:0;
  line-height:1.2;
  letter-spacing:-.015em;
}
.wpfh-name-row h2 a{
  color:var(--wpfh-ink);
  text-decoration:none;
  transition:color var(--wpfh-t1) var(--wpfh-out);
}
.wpfh-name-row h2 a:hover{color:var(--wpfh-primary);}

/* ---------------------------------------------------------------------------
   3. Browser surfaces

   The parts nobody draws still belong to the palette.
   --------------------------------------------------------------------------- */

::selection{background:var(--wpfh-secondary-tint);color:var(--wpfh-ink);}
::-moz-selection{background:var(--wpfh-secondary-tint);color:var(--wpfh-ink);}

html{scrollbar-color:var(--wpfh-border-strong) var(--wpfh-bg);scrollbar-width:thin;}
::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-track{background:var(--wpfh-bg);}
::-webkit-scrollbar-thumb{
  background:var(--wpfh-border-strong);
  border-radius:99px;
  border:3px solid var(--wpfh-bg);
}
::-webkit-scrollbar-thumb:hover{background:var(--wpfh-secondary);}

input,textarea,select{caret-color:var(--wpfh-primary);}

a{text-underline-offset:.18em;text-decoration-thickness:.07em;}

input::placeholder,textarea::placeholder{color:#8A827A;opacity:1;}

/* ---------------------------------------------------------------------------
   4. Motion

   One authored moment - the puppy cards settling in - plus response-level
   feedback on things you can actually touch. Sections lead in quietly; they do
   not each perform the same entrance.

   Everything starts from a visible default: the hidden state is applied only
   once JS confirms it can reveal it again.
   --------------------------------------------------------------------------- */

.wpfh-js [data-wpfh-reveal]{
  opacity:0;
  transform:translate3d(0,var(--wpfh-ry,16px),0);
}

.wpfh-js [data-wpfh-reveal].is-in{
  opacity:1;
  transform:none;
  transition:
    opacity .66s var(--wpfh-expo) var(--wpfh-delay,0ms),
    transform .66s var(--wpfh-expo) var(--wpfh-delay,0ms),
    filter .66s var(--wpfh-expo) var(--wpfh-delay,0ms);
}

/* The authored moment. Cards rise, sharpen, and settle in sequence; the photo
   releases a held scale a beat behind the card, so the image arrives last. */
.wpfh-js .wpfh-puppy-grid [data-wpfh-reveal]{
  --wpfh-ry:26px;
  filter:blur(7px);
}
.wpfh-js .wpfh-puppy-grid [data-wpfh-reveal].is-in{filter:blur(0);}

.wpfh-js .wpfh-puppy-grid [data-wpfh-reveal] .wpfh-puppy-photo img{
  transform:scale(1.07);
}
.wpfh-js .wpfh-puppy-grid [data-wpfh-reveal].is-in .wpfh-puppy-photo img{
  transform:scale(1);
  transition:transform 1.05s var(--wpfh-expo) calc(var(--wpfh-delay,0ms) + 90ms);
}

/* Response: feedback on press, not on release. */
.wpfh-btn,.elementor-button,.xpro-button{
  transition:
    background-color var(--wpfh-t1) var(--wpfh-out),
    color var(--wpfh-t1) var(--wpfh-out),
    border-color var(--wpfh-t1) var(--wpfh-out),
    box-shadow var(--wpfh-t2) var(--wpfh-out),
    transform var(--wpfh-t2) var(--wpfh-spring);
}
.wpfh-btn:active,.elementor-button:active,.xpro-button:active{
  transform:scale(.972);
  transition-duration:90ms;
  transition-timing-function:var(--wpfh-out);
}

/* Card lift, and a photo that leans in with it. */
.wpfh-puppy-card{
  transition:
    transform .42s var(--wpfh-expo),
    box-shadow .42s var(--wpfh-expo),
    border-color .42s var(--wpfh-expo);
}
.wpfh-puppy-card:hover{
  transform:translateY(-6px);
  border-color:var(--wpfh-border-strong);
}
.wpfh-puppy-photo img{transition:transform .62s var(--wpfh-expo);}
.wpfh-puppy-card:hover .wpfh-puppy-photo img{transform:scale(1.055);}

/* Status tag reads as pinned to the photo, so it rides the hover a little. */
.wpfh-tag{transition:transform .42s var(--wpfh-expo);}
.wpfh-puppy-card:hover .wpfh-tag{transform:translateY(-2px);}

/* ---------------------------------------------------------------------------
   4b. Hero ambient loop

   A silent, seamless video sits behind the hero copy. It is decorative, so it
   never carries meaning, never takes pointer events, and is the first thing
   dropped when the visitor has asked for less motion or less data.
   --------------------------------------------------------------------------- */

.wpfh-hero-host{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

/* Everything the hero already contained stays above the loop. */
.wpfh-hero-host > *:not(.wpfh-hero-media){
  position:relative;
  z-index:1;
}

.wpfh-hero-media{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background-color:var(--wpfh-bg);
  background-size:cover;
  background-position:center;
}

.wpfh-hero-media video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  opacity:0;
  transition:opacity 1.1s var(--wpfh-expo);
}

/* Only fade up once there are real frames to show, so the poster never blinks. */
.wpfh-hero-media video.is-ready{opacity:1;}

/* A light scrim: the loop is already graded pale, so this only guarantees the
   headline holds its contrast over the busier frames. */
.wpfh-hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(100deg,
    rgba(255,251,245,.42) 0%,
    rgba(255,251,245,.20) 52%,
    rgba(246,234,219,.26) 100%);
}

/* Reduced motion keeps the image and drops the movement entirely. */
@media(prefers-reduced-motion:reduce){
  .wpfh-hero-media video{display:none;}
}

/* ---------------------------------------------------------------------------
   5. Header as a material
   --------------------------------------------------------------------------- */

.xpro-theme-builder-header{
  transition:
    background-color .38s var(--wpfh-out),
    box-shadow .38s var(--wpfh-out),
    border-color .38s var(--wpfh-out);
  border-bottom:1px solid transparent;
}

/* Chrome only asserts itself once content is actually running underneath it. */
.wpfh-scrolled .xpro-theme-builder-header{
  background:rgba(255,251,245,.82);
  backdrop-filter:saturate(1.7) blur(14px);
  -webkit-backdrop-filter:saturate(1.7) blur(14px);
  border-bottom-color:var(--wpfh-border);
  box-shadow:0 1px 24px rgba(60,42,28,.06);
}

@media(prefers-reduced-transparency:reduce){
  .wpfh-scrolled .xpro-theme-builder-header{
    background:var(--wpfh-bg);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}

/* ---------------------------------------------------------------------------
   6. Section rhythm - more air above a heading than below it
   --------------------------------------------------------------------------- */

.elementor-widget-heading + .elementor-widget-text-editor{margin-top:.55rem;}
.wpfh-puppy-body{gap:11px;}
.wpfh-meta{gap:8px;padding-top:11px;}
.wpfh-actions{margin-top:12px;}

/* Footer link column: label reads as a label, not a section. */
.xpro-infolist-title{
  font-family:var(--wpfh-font-body);
  font-size:13px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  margin:0 0 2px;
}

/* ---------------------------------------------------------------------------
   7. Reduced motion

   Not "no feedback" - a gentler, non-vestibular equivalent. Opacity still
   carries the arrival; travel, blur and overshoot are dropped.
   --------------------------------------------------------------------------- */

@media(prefers-reduced-motion:reduce){
  .wpfh-js [data-wpfh-reveal],
  .wpfh-js .wpfh-puppy-grid [data-wpfh-reveal]{
    transform:none !important;
    filter:none !important;
  }
  .wpfh-js [data-wpfh-reveal].is-in{
    transition:opacity .3s ease var(--wpfh-delay,0ms);
  }
  .wpfh-js .wpfh-puppy-grid [data-wpfh-reveal] .wpfh-puppy-photo img,
  .wpfh-js .wpfh-puppy-grid [data-wpfh-reveal].is-in .wpfh-puppy-photo img{
    transform:none !important;
    transition:none !important;
  }
  .wpfh-puppy-card:hover,
  .wpfh-puppy-card:hover .wpfh-puppy-photo img,
  .wpfh-puppy-card:hover .wpfh-tag,
  .wpfh-btn:active,.elementor-button:active,.xpro-button:active{
    transform:none !important;
  }
}