/* ============================================================
   McCarthy Tree Service LLC — shared design system
   Palette: pine (deep greens) / bone (warm paper) / ember (saw orange)
   Type:    Fraunces (display serif) + Inter (text)
   ============================================================ */

body {
    font-family: "Inter", system-ui, sans-serif;
    font-feature-settings: "cv02", "cv03";
}

/* ---------- header ---------- */
#main-header {
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

/* ---------- component: eyebrow label ---------- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.eyebrow::before {
    content: "";
    width: 1.75rem;
    height: 1px;
    background: currentColor;
    opacity: 0.5;
}

/* ---------- buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    border-radius: 0.875rem;
    padding: 1rem 1.75rem;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    cursor: pointer;
    text-decoration: none;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid #46805c; outline-offset: 3px; }

.btn-pine { background: #2a513b; color: #fff; box-shadow: 0 1px 2px rgba(14,32,24,0.2), 0 8px 24px -12px rgba(14,32,24,0.5); }
.btn-pine:hover { background: #346548; box-shadow: 0 2px 4px rgba(14,32,24,0.2), 0 12px 28px -12px rgba(14,32,24,0.55); }

.btn-ember { background: #de5f0a; color: #fff; box-shadow: 0 1px 2px rgba(184,71,11,0.3), 0 8px 24px -12px rgba(184,71,11,0.6); }
.btn-ember:hover { background: #ed7a14; }
.btn-ember:focus-visible { outline-color: #de5f0a; }

.btn-bone { background: #f6f3ec; color: #1d3629; border: 1px solid #ddd2bb; }
.btn-bone:hover { background: #ece6d8; }

.btn-ghost-light { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.22); backdrop-filter: blur(8px); }
.btn-ghost-light:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.35); }

.btn-lg { padding: 1.25rem 2.25rem; font-size: 1.0625rem; border-radius: 1rem; }

/* ---------- scroll reveal ---------- */
.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}
.reveal.is-visible {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .btn:hover { transform: none; }
    * { scroll-behavior: auto !important; }
}

/* ---------- FAQ accordion ---------- */
.faq-item {
    border-bottom: 1px solid #ece6d8;
}
.faq-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.375rem 0.25rem;
    font-weight: 500;
    color: #18181b;
    font-size: 1.0625rem;
    transition: color 0.2s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: #2a513b; }
.faq-item summary:focus-visible { outline: 2px solid #46805c; outline-offset: 2px; border-radius: 0.375rem; }
.faq-item summary::after {
    content: "+";
    flex-shrink: 0;
    font-family: "Fraunces", Georgia, serif;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1;
    color: #679c7a;
    transition: transform 0.3s ease;
    transform-origin: center;
    align-self: center;
}
.faq-item[open] summary::after { transform: rotate(45deg); color: #de5f0a; }
.faq-item .faq-body {
    padding: 0 0.25rem 1.5rem;
    max-width: 65ch;
}

/* ---------- sticky mobile call bar ---------- */
.callbar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 120;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem calc(0.625rem + env(safe-area-inset-bottom));
    background: rgba(251, 250, 247, 0.92);
    backdrop-filter: blur(12px);
    border-top: 1px solid #ece6d8;
}
.callbar a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 0.75rem;
    padding: 0.875rem 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1;
}
.callbar .callbar-call { background: #2a513b; color: #fff; }
.callbar .callbar-call.is-ember { background: #de5f0a; }
.callbar .callbar-estimate { background: #fff; color: #1d3629; border: 1px solid #ddd2bb; }
body.has-callbar { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
@media (min-width: 768px) {
    .callbar { display: none; }
    body.has-callbar { padding-bottom: 0; }
}

/* ---------- growth rings motif ---------- */
.rings {
    position: absolute;
    pointer-events: none;
    user-select: none;
}

/* ---------- image hover ---------- */
.img-zoom img { transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.img-zoom:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .img-zoom:hover img { transform: none; } }

/* ---------- dropdown nav ---------- */
.nav-dropdown {
    position: absolute;
    top: calc(100% + 0.75rem);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    min-width: 18rem;
}
.nav-dropdown.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* ---------- prose helpers for service pages ---------- */
.copy h2 {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 500;
    letter-spacing: -0.01em;
}
.copy a { color: #2a513b; text-decoration: underline; text-decoration-color: #96bda3; text-underline-offset: 3px; font-weight: 500; }
.copy a:hover { text-decoration-color: #2a513b; }