/* ===================================================================
   D13 Premium 2026 — micro-interactions, scroll-driven anim, polish
   Loaded sitewide via mu-plugin enqueue.
   Designed not to override theme; only ADDS premium feel.
   =================================================================== */

/* 1. Smooth scroll + better focus ring (premium accessibility) */
html { scroll-behavior: smooth; }
:focus-visible {
    outline: 2px solid #C76D54;
    outline-offset: 3px;
    border-radius: 4px;
    transition: outline-offset 120ms cubic-bezier(.4,0,.2,1);
}

/* 2. Premium image load — gentle fade-in instead of pop-in */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 420ms cubic-bezier(.4,0,.2,1);
}
img[loading="lazy"].is-loaded,
img[loading="lazy"][src*="data:"],
img.is-loaded {
    opacity: 1;
}
/* Eager LCP images: never fade (would defeat LCP timing) */
img[fetchpriority="high"], img[loading="eager"] { opacity: 1 !important; }

/* 3. CTA buttons — subtle 3D lift + brand-colored shadow */
.btn,
a.btn,
button.btn,
.btn--primary,
.elementor-button,
input[type="submit"].btn,
.wp-block-button__link {
    transition: transform 200ms cubic-bezier(.4,0,.2,1),
                box-shadow 200ms cubic-bezier(.4,0,.2,1),
                background-color 200ms ease;
    will-change: transform, box-shadow;
}
.btn:hover,
a.btn:hover,
.btn--primary:hover,
.elementor-button:hover,
.wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow:
        0 8px 22px -8px rgba(199, 109, 84, .45),
        0 4px 8px -4px rgba(31, 20, 12, .12);
}
.btn:active { transform: translateY(0); transition-duration: 80ms; }

/* 4. Pest-card / service-card hover — premium lift + subtle border accent */
.related-service-card,
.card-pest,
.pillar-child,
.service-card,
.editorial-card,
[class*="card"]:not([class*="cookie"]):not(footer *):not(header *) {
    transition: transform 300ms cubic-bezier(.4,0,.2,1),
                box-shadow 300ms cubic-bezier(.4,0,.2,1);
}
.related-service-card:hover,
.card-pest:hover,
.pillar-child:hover,
.service-card:hover,
.editorial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 50px -20px rgba(31,20,12,.18);
}

/* 5. Section reveal on scroll — used by data-reveal attribute */
[data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 700ms cubic-bezier(.4,0,.2,1),
                transform 700ms cubic-bezier(.4,0,.2,1);
}
[data-reveal].is-revealed,
[data-reveal][data-reveal="seen"] {
    opacity: 1;
    transform: translateY(0);
}

/* 6. Better link hovers (subtle underline animation) */
a:not(.btn):not([class*="card"] a):not(nav a):not(footer a):not(header a) {
    position: relative;
    transition: color 180ms ease;
}

/* 7. Premium <picture> + <img> rendering hints */
img, picture, picture > source, picture > img {
    image-rendering: auto;
}

/* 8. Reduce motion accommodation (accessibility + perf) */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    img[loading="lazy"] { opacity: 1 !important; }
}

/* 9. Print-friendly (premium detail) */
@media print {
    .btn, .site-header__cta, .mobile-drawer, .floating-actions, .cookie-banner { display: none !important; }
    a::after { content: " (" attr(href) ")"; font-size: 12px; color: #555; }
    body { font-size: 11pt; }
    img { max-width: 60% !important; }
}

/* 10. View Transitions API (Chrome 111+) — instant cross-page transitions */
@supports (view-transition-name: foo) {
    :root { view-transition-name: root; }
    .site-header { view-transition-name: site-header; }
    .site-footer { view-transition-name: site-footer; }
}

/* 11. Safer focus on form inputs (better than browser default) */
input:focus, textarea:focus, select:focus {
    outline: 2px solid #C76D54;
    outline-offset: 1px;
    box-shadow: 0 0 0 4px rgba(199,109,84,.12);
}

/* 12. Scrollbar styling (Webkit/Blink) — premium subtle thumb */
@media (pointer: fine) {
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: rgba(31,20,12,.22); border-radius: 6px; }
    ::-webkit-scrollbar-thumb:hover { background: rgba(31,20,12,.35); }
}

/* ===================================================================
   D13 Premium 2026 -- Layout, footer, ed-cta polish (added 2026-05-16)
   =================================================================== */

/* ed-cta: premium polish + responsive stack on mobile */
.ed-cta {
    margin: 2.4rem auto;
    max-width: 920px;
}
.ed-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.8rem 2rem;
    background: linear-gradient(135deg, #fdf9f3 0%, #faf7f3 100%);
    border: 1px solid rgba(199, 109, 84, 0.18);
    border-radius: 18px;
    box-shadow: 0 12px 28px -16px rgba(31, 20, 12, 0.14);
    transition: transform 280ms cubic-bezier(.4,0,.2,1),
                box-shadow 280ms cubic-bezier(.4,0,.2,1);
}
.ed-cta__inner:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 40px -20px rgba(31, 20, 12, 0.2);
}
.ed-cta__eyebrow {
    display: inline-block;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #C76D54;
    font-weight: 700;
    margin-bottom: 0.4rem;
}
.ed-cta__eyebrow::before {
    content: '◆';
    display: inline-block;
    transform: translateY(-1px);
    margin-right: 0.45em;
    color: #C76D54;
    font-size: 8px;
    opacity: 0.65;
}
.ed-cta__tagline {
    font-size: 16px;
    color: #1F140C;
    line-height: 1.5;
    margin: 0;
}
.ed-cta__btns {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex-shrink: 0;
}
.ed-cta__btns .btn { white-space: nowrap; }
@media (max-width: 720px) {
    .ed-cta__inner { flex-direction: column; align-items: stretch; padding: 1.4rem 1.4rem; gap: 1.2rem; }
    .ed-cta__btns { flex-direction: row; flex-wrap: wrap; justify-content: stretch; }
    .ed-cta__btns .btn { flex: 1 1 auto; text-align: center; }
}

/* ed-card numeral -- cleaner premium-styled */
.ed-card__num {
    font-family: 'Fraunces', 'Georgia', serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #C76D54;
    opacity: 0.85;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

/* Page-width consistency across pillar/page/article templates */
.pillar .container--prose,
.page__body .container--prose,
.articlev2-body .container--prose,
.prose:not([class*="container"]):not(figure *):not(.ed-cta *) {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 1100px) {
    .container--prose { max-width: 760px; }
    .container--wide  { max-width: 1180px; }
}

/* Site footer: responsive grid, proper gap, stacks at small screens */
.site-footer {
    padding: 4rem 1.25rem 2rem;
}
.site-footer__inner,
.site-footer .container,
.site-footer__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2.4rem;
    max-width: 1180px;
    margin: 0 auto;
}
.site-footer__col h4,
.site-footer__col-title,
.site-footer__heading {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #C76D54;
    margin: 0 0 1rem;
    font-weight: 700;
}
.site-footer__col ul,
.site-footer__col-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.site-footer__col li a,
.site-footer__col-list a {
    color: rgba(250, 247, 243, 0.85);
    text-decoration: none;
    font-size: 14.5px;
    transition: color 180ms ease;
}
.site-footer__col li a:hover,
.site-footer__col-list a:hover {
    color: #FAF7F3;
}
.site-footer__bottom {
    margin-top: 2.4rem;
    padding-top: 1.6rem;
    border-top: 1px solid rgba(250, 247, 243, 0.1);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-size: 13px;
    opacity: 0.8;
}
@media (max-width: 900px) {
    .site-footer__inner,
    .site-footer .container,
    .site-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem;
    }
}
@media (max-width: 560px) {
    .site-footer {
        padding: 3rem 1rem 1.5rem;
    }
    .site-footer__inner,
    .site-footer .container,
    .site-footer__grid {
        grid-template-columns: 1fr;
        gap: 1.6rem;
    }
    .site-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* Mobile-first sticky action bar (urgence) safe-area */
.mobile-bottom-bar,
.seo-mobile-bottom-bar {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
}

/* Print-friendly footer */
@media print {
    .site-footer { padding: 1rem 0; }
    .site-footer__col li a { color: #000 !important; }
}
