/*!
Theme Name: Kadence Child
Theme URI: https://www.kadencewp.com/kadence-theme/
Template: kadence
Author: Kadence WP
Author URI: https://www.kadencewp.com/
Description: A child theme for the Kadence Theme.
Version: 1.0.4
License: GNU General Public License v3.0 (or later)
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: kadence-child
*/

/* Theme customization starts here
-------------------------------------------------------------- */

/* Widefoot FAQ accordion (used on /faqs/ and per-product FAQ panel)
   Markup: <section class="widefoot-faq">
             <h2 class="widefoot-faq__heading">…</h2>
             <div class="widefoot-faq__list">
               <details class="widefoot-faq__item">
                 <summary class="widefoot-faq__question">…</summary>
                 <div class="widefoot-faq__answer"><p>…</p></div>
               </details>
             </div>
           </section>
   Native <details>/<summary> for accordion behavior — zero JS.
-------------------------------------------------------------- */
.widefoot-faq { margin: 2.5rem 0; font-family: var(--global-body-font-family, inherit); }
.widefoot-faq__heading { margin: 0 0 1.25rem; font-size: 1.5rem; font-weight: 700; color: var(--global-palette3, #1f2933); line-height: 1.3; }
.widefoot-faq__list { border-top: 1px solid var(--global-palette7, #f3f4f7); }
.widefoot-faq__item { border-bottom: 1px solid var(--global-palette7, #f3f4f7); transition: background-color .2s ease; background-color: transparent; }
.widefoot-faq__item[open] { background-color: var(--global-palette8, #f9f9fb); box-shadow: inset 3px 0 0 var(--global-palette1, #e47b02); }
.widefoot-faq__item > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 1rem; padding: 1rem .75rem; font-weight: 600; font-size: 1.0625rem; color: var(--global-palette3, #1f2933); transition: color .15s ease, font-weight .15s ease; }
.widefoot-faq__item > summary::-webkit-details-marker { display: none; }
.widefoot-faq__item > summary::marker { content: ""; }
.widefoot-faq__item > summary::after { content: ""; margin-left: auto; flex-shrink: 0; width: .625rem; height: .625rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .2s ease; }
.widefoot-faq__item[open] > summary::after { transform: rotate(225deg) translateY(-3px); }
.widefoot-faq__item > summary:hover { color: var(--global-palette1, #e47b02); }
.widefoot-faq__item[open] > summary { color: var(--global-palette1, #e47b02); font-weight: 700; }
.widefoot-faq__item > summary:focus-visible { outline: 2px solid var(--global-palette1, #e47b02); outline-offset: 2px; border-radius: 2px; }
.widefoot-faq__answer { padding: .25rem .75rem 1.25rem; color: var(--global-palette4, #3e4c59); line-height: 1.6; font-size: 1rem; }
.widefoot-faq__answer p { margin: 0 0 .75rem; }
.widefoot-faq__answer p:last-child { margin-bottom: 0; }
.widefoot-faq__answer a { color: var(--global-palette1, #e47b02); text-decoration: underline; text-underline-offset: 2px; }
.widefoot-faq__answer a:hover { color: var(--global-palette2, #ed8f0c); }

/* Widefoot animated SVG site logo
   Inlined into the WP custom-logo via inc/widefoot-logo-animated.php.
   Letters W I D E F O O T flash through their assigned colors in succession
   on hover, then return to white. Each letter runs its own keyframe with a
   staggered animation-delay so the cascade reads as a wave.
   Scope is the SVG itself — Kadence's logo template doesn't pass through a
   filter that lets us tag the wrapping <a>, so we hover-target the SVG.
-------------------------------------------------------------- */
/* Static dimensions — width=100% (from SVG attribute) + height:auto means the
   SVG fills its parent's width and the aspect-ratio determines its height.
   Do NOT change to width:auto without constraining height — width:auto makes
   the SVG render at its intrinsic viewBox size (2400×700) and breaks layout. */
.widefoot-logo-svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Sticky shrink — the SAFE method. height:50px is a layout property, so
   Kadence's sticky JS (which uses offsetHeight/offsetTop for measurements)
   sees the new size correctly when the .item-is-fixed class is added. The
   50px matches Kadence's data-shrink-height="50" attribute on the upper-
   inner-wrap, so the logo finishes at the same height as the rest of the
   shrunken header.

   Why no transform: transforms affect getBoundingClientRect() but NOT
   offsetHeight/offsetTop. Kadence used those properties inconsistently,
   so transform-based shrink fed bad data into the sticky math (broke top).
   Why no transition: animating the height would feed Kadence intermediate
   measurements over the transition duration, with the same risk. Instant
   snap is safe and visually matches the rest of the header which also
   snaps. */
.kadence-sticky-header.item-is-fixed:not(.item-at-start) .widefoot-logo-svg {
    height: 50px;
    width: auto;
}

/* Kadence sticky-header / WooCommerce demo_store override.

   On pages with the site-wide store notice (`<p class="demo_store">` in
   document flow at the top of #wrapper), Kadence's sticky-header JS sets
   an inline `top: -36px` on the upper-inner-wrap on every scroll event.
   That -36px matches the demo_store's height — a measurement bug, not the
   wrap's intended behavior (its `data-reveal-scroll-up="false"` says it
   should stay fully visible when sticky).

   Author `!important` here beats Kadence's JS-set inline `top` because
   inline styles without `!important` rank below author-important in the
   cascade. Scoped to `body.woocommerce-demo-store` so home (no notice)
   stays untouched. */
body.woocommerce-demo-store .kadence-sticky-header[data-reveal-scroll-up="false"].item-is-fixed {
    top: 0 !important;
}

/* Static white fill is supplied by the SVG itself (inline style="fill:#fff").
   We don't declare a static fill rule in CSS — that avoids fighting RUCSS,
   Kadence stylesheet order, or any other cascade contributor. The flash
   animation below overrides the inline white during its run; after the
   animation ends and on mouse-leave, the inline white takes over again. */

/* Sunset gradient cascade: W→T flash through Turmeric → Amber → Heliconia →
   Extreme Rose → Flirt → Vivid Purple → Hippie Blue → Deep Indigo on hover,
   then return to white. One keyframe per letter color. */
@keyframes wf-sunset-1 { 0% { fill: #fff } 20% { fill: #FFBF15 } 45% { fill: #FFBF15 } 100% { fill: #fff } }
@keyframes wf-sunset-2 { 0% { fill: #fff } 20% { fill: #F89A18 } 45% { fill: #F89A18 } 100% { fill: #fff } }
@keyframes wf-sunset-3 { 0% { fill: #fff } 20% { fill: #F2541B } 45% { fill: #F2541B } 100% { fill: #fff } }
@keyframes wf-sunset-4 { 0% { fill: #fff } 20% { fill: #C91853 } 45% { fill: #C91853 } 100% { fill: #fff } }
@keyframes wf-sunset-5 { 0% { fill: #fff } 20% { fill: #A8186E } 45% { fill: #A8186E } 100% { fill: #fff } }
@keyframes wf-sunset-6 { 0% { fill: #fff } 20% { fill: #6A0487 } 45% { fill: #6A0487 } 100% { fill: #fff } }
@keyframes wf-sunset-7 { 0% { fill: #fff } 20% { fill: #301D7D } 45% { fill: #301D7D } 100% { fill: #fff } }
@keyframes wf-sunset-8 { 0% { fill: #fff } 20% { fill: #1F1352 } 45% { fill: #1F1352 } 100% { fill: #fff } }

/* Shared animation properties as longhand (avoids any shorthand-parsing
   ambiguity). The only per-letter values are animation-name and -delay. */
.widefoot-logo-svg:hover #W,
.widefoot-logo-svg:hover #I,
.widefoot-logo-svg:hover #D,
.widefoot-logo-svg:hover #E,
.widefoot-logo-svg:hover #F,
.widefoot-logo-svg:hover #O-1,
.widefoot-logo-svg:hover #O-2,
.widefoot-logo-svg:hover #T {
    animation-duration: 700ms;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    animation-direction: normal;
    animation-play-state: running;
}

.widefoot-logo-svg:hover #W   { animation-name: wf-sunset-1; animation-delay: 0ms;   }
.widefoot-logo-svg:hover #I   { animation-name: wf-sunset-2; animation-delay: 60ms;  }
.widefoot-logo-svg:hover #D   { animation-name: wf-sunset-3; animation-delay: 120ms; }
.widefoot-logo-svg:hover #E   { animation-name: wf-sunset-4; animation-delay: 180ms; }
.widefoot-logo-svg:hover #F   { animation-name: wf-sunset-5; animation-delay: 240ms; }
.widefoot-logo-svg:hover #O-1 { animation-name: wf-sunset-6; animation-delay: 300ms; }
.widefoot-logo-svg:hover #O-2 { animation-name: wf-sunset-7; animation-delay: 360ms; }
.widefoot-logo-svg:hover #T   { animation-name: wf-sunset-8; animation-delay: 420ms; }

/* Respect users who've asked their OS to reduce motion: disable the flash
   animation entirely. Letters stay white during hover. Accessibility 101. */
@media (prefers-reduced-motion: reduce) {
    .widefoot-logo-svg:hover [id] { animation: none !important; }
}

/* Employee-owned statement in the footer.
   Markup is injected by the template_redirect output buffer in
   functions.php. Two copies are emitted:
     .widefoot-employee-owned--desktop  → inside the logo column
     .widefoot-employee-owned--mobile   → at the bottom of the middle row
   This rule shows the right one per breakpoint so the message lives
   under the logo on wide screens, and under the social column with an
   "Employee Owned" subtitle once the columns have stacked.
   1024px matches Kadence's tablet breakpoint where the 3 footer
   columns collapse to a single column.
-------------------------------------------------------------- */
.widefoot-employee-owned p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--global-palette7, #c8ccd2);
}
.widefoot-employee-owned--desktop {
    display: block;
    margin-top: 1rem;
    max-width: 360px;
}
.widefoot-employee-owned--mobile {
    display: none;
    margin: 1.5rem 0 0;
    padding: 1.5rem 1rem 0;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.widefoot-employee-owned--mobile h3 {
    margin: 0 0 .5rem;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--global-palette5, #ffffff);
}
@media (max-width: 1024px) {
    .widefoot-employee-owned--desktop { display: none; }
    .widefoot-employee-owned--mobile  { display: block; }
}