/*
 * Landing Pages CSS — NEW elements only (CTA sections, FAQ blocks, the
 * image/text layout, container/color tokens). Every value below (colors,
 * fonts, the CTA button) was read from the LIVE site's own computed
 * styles via getComputedStyle() in Chrome on 2026-07-20 — not guessed,
 * not read from a CSS file in isolation (a prior pass did that and got
 * the body font wrong: it shipped 'Roboto', but the real site's body/nav/
 * footer text computes to "Roboto Slab", serif — a visually different,
 * slab-serif face. Headings genuinely are 'Open Sans' at weight 300,
 * confirmed the same way).
 *   - Logo: LandingPage::SHARED_LOGO_ASSET, the real petvilla-logo.png URL.
 *   - Fonts: Google Fonts CDN, same families/weights the live site serves
 *     (its own font source is theme-bundled, not a discrete linkable URL).
 * header.php/footer.php use invented class names (.lp-topbar etc. — there
 * is no equivalent real DOM to point at without pulling in Enfold's full
 * JS/CSS framework), so their layout/color rules below are hand-written,
 * with every color/font/spacing VALUE copied from the live site's real
 * computed styles.
 */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;700&family=Open+Sans:wght@300;600&display=swap');

:root {
    --lp-topbar-bg: #393946;
    --lp-navbar-bg: #57babe;
    --lp-nav-text: #ffffff;
    --lp-body-text: #444444;
    --lp-heading-text: #393945;
    --lp-footer-bg: #ffffff;
    --lp-footer-title: #000000;
    --lp-footer-link: #7f7f7f;
    --lp-good-bg: #e6f4ea;
    --lp-cta-bg: #ff671c;
    --lp-cta-text: #ffffff;
    --lp-container-width: 1310px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Roboto Slab', serif;
    font-size: 15px;
    color: var(--lp-body-text);
    /* 1.45 = ~145% of point size, the top of Butterick's Practical
       Typography's recommended 120-145% line-spacing range for body
       text (Frank 2026-07-20 readability pass) — was 1.6, slightly
       looser than optimal. */
    line-height: 1.45;
}

h1, h2, h3 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    color: var(--lp-heading-text);
}

.lp-container {
    max-width: var(--lp-container-width);
    margin: 0 auto;
    padding: 0 50px;
}

/* ── Header (sticky, like the real site's av_header_sticky) ───────────── */

.lp-header { position: sticky; top: 0; z-index: 100; }

.lp-topbar {
    background: var(--lp-topbar-bg);
    color: var(--lp-nav-text);
    font-size: 13px;
}
.lp-topbar .lp-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
    padding-bottom: 8px;
}
.lp-topbar-phone { color: #b0b0b5; text-decoration: none; display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 400; }
/* Real site: no flex gap — each icon sits in its own fixed 30px-wide box
   (measured via getComputedStyle), spacing comes from the box width, not
   a gap between variable-width items. */
.lp-topbar-social { display: flex; align-items: center; }
.lp-topbar-social a { width: 30px; height: 45px; display: flex; align-items: center; justify-content: center; color: #b0b0b5; text-decoration: none; font-size: 15px; line-height: 1; }
.lp-topbar-social a:hover { opacity: .8; }
.lp-topbar-social img { display: block; }

.lp-navbar {
    background: var(--lp-navbar-bg);
}
/* Real site: navbar is a fixed 50px bar; the logo is positioned
   independently and deliberately overlaps above AND below it (measured
   via getComputedStyle on the live page — not a fixed-height accident,
   the real logo container is 170px tall while the visible teal bar is
   only 50px). Negative margins on the logo shrink its contribution to
   the flex line's height instead of stretching the bar to fit it. */
.lp-navbar .lp-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    flex-wrap: wrap;
    gap: 12px;
}
.lp-navbar nav {
    display: flex;
    align-items: center;
}
.lp-navbar nav a {
    color: var(--lp-nav-text);
    text-decoration: none;
    font-family: 'Roboto Slab', serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 15px;
    padding: 0 13px;
}
.lp-navbar nav a:hover { text-decoration: underline; }
.lp-navbar nav a.lp-search-icon { display: flex; align-items: center; margin-left: 4px; color: #719430; }
.lp-search-icon svg { fill: currentColor; }
/* Native aspect ratio (1337x1213) — width set, height follows, never distorted.
   Negative margins replicate the real overlap: 35px above the navbar's
   own top, 75px below its bottom (measured via getComputedStyle). */
.lp-logo { display: block; margin-top: -35px; margin-bottom: -75px; }
.lp-logo img { width: 170px; height: auto; display: block; }

/* ── Footer ─────────────────────────────────────────────────────────── */

.lp-footer { margin-top: 60px; }
/* Real DOM: the illustration belongs only to the widget-grid container,
   not the copyright bar below it — combining them stretched the image
   over extra height and diluted it almost to invisibility. */
.lp-footer-illustration {
    background: var(--lp-footer-bg) url("https://www.petvilla.co.nz/backgroundimages/footer-bg.jpg") no-repeat 50% 50%;
    background-size: 100% 100%;
    padding: 40px 0;
    border-top: 1px solid #eee;
}
.lp-footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}
.lp-footer-title {
    color: var(--lp-footer-title);
    font-family: 'Roboto Slab', serif;
    font-weight: 400;
    font-size: 20px;
    letter-spacing: 1px;
    margin: 0 0 12px;
}
.lp-footer a {
    color: var(--lp-footer-link);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 16px;
    line-height: 24.75px;
}
.lp-footer a i { width: 18px; text-align: center; color: #666666; font-size: 18px; }
.lp-footer a img { display: block; }
.lp-footer a:hover { text-decoration: underline; }
.lp-footer-loc { list-style: none; margin: 0; padding: 0; }
.lp-footer-loc li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 14px;
    color: var(--lp-footer-link);
    font-size: 16px;
    line-height: 24.75px;
}
.lp-footer-loc li i { width: 16px; text-align: center; color: var(--lp-navbar-bg); font-size: 18px; margin-top: 4px; }
.lp-footer-loc a { display: inline; color: var(--lp-footer-link); text-decoration: none; }
.lp-footer-loc a:hover { text-decoration: underline; }
.lp-copyright {
    background: #ffffff url("https://www.petvilla.co.nz/backgroundimages/copyright-bg.jpg") no-repeat 0 0;
    background-size: cover;
    min-height: 170px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: rgba(0,0,0,.8);
    font-family: 'Roboto Slab', serif;
    font-size: 13px;
    text-align: center;
    padding: 16px 0;
}
.lp-copyright p { margin: 0 0 6px; }
.lp-copyright-line { font-size: 13px; }
.lp-copyright-terms { font-size: 19px; }
.lp-copyright-terms a { display: inline; font-size: 19px; color: rgba(0,0,0,.8); text-decoration: none; }
.lp-copyright a { display: inline; color: rgba(0,0,0,.8); text-decoration: none; }
.lp-copyright a:hover { text-decoration: underline; }

/* ── Hero ───────────────────────────────────────────────────────────── */

.lp-hero { position: relative; width: 100%; }
.lp-hero-img { display: block; width: 100%; height: 380px; object-fit: cover; }
.lp-hero-placeholder { width: 100%; height: 280px; background: var(--lp-topbar-bg); }
.lp-hero-caption {
    position: absolute;
    left: 110px;
    bottom: 18%;
    max-width: 70%;
}
.lp-hero-caption h1 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.25;
    color: #fff;
    text-shadow: 1px 1px 0 #000;
    margin: 0;
}
/* Multi-line headline (operator types "-" to separate lines): real site
   uses 3 tiers — large/light, bold/medium, small/uppercase — framed by a
   decorative circle. We use a straight vertical accent line instead of
   the circle (simpler graphic element, same "frames the text" idea). */
.lp-hero-caption-multiline { display: flex; align-items: stretch; gap: 20px; max-width: 80%; }
.lp-hero-line-marker { flex: 0 0 4px; width: 4px; background: var(--lp-navbar-bg); border-radius: 2px; }
.lp-hero-caption-multiline h1 { display: flex; flex-direction: column; gap: 6px; }
.lp-hero-line { display: block; font-size: clamp(30px, 4vw, 48px); font-weight: 300; }
.lp-hero-line-2 { font-weight: 700; font-size: clamp(24px, 3.2vw, 38px); }
.lp-hero-line-3 { font-weight: 400; font-size: clamp(14px, 1.6vw, 19px); text-transform: uppercase; letter-spacing: 1px; }

/* ── Intro / service group ─────────────────────────────────────────── */

.lp-intro, .lp-group, .lp-page-heading {
    max-width: var(--lp-container-width);
    margin: 0 auto;
    padding: 40px 50px;
}
/* No bottom padding — sits directly above .lp-intro, which supplies its
   own top padding as the gap, so the two don't stack into a double gap. */
.lp-page-heading { padding-bottom: 0; }
.lp-intro p { margin: 0 0 14px; font-size: 1.05rem; }
.lp-group h2, .lp-page-heading h2 {
    font-size: 26px;
    margin: 0 0 24px;
    text-align: center;
}

/* ── Alternating image/text rows ───────────────────────────────────── */

.lp-row {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 2.5rem;
}
.lp-row-reverse { flex-direction: row-reverse; }
.lp-row-text { flex: 1 1 50%; min-width: 0; }
.lp-row-image { flex: 0 0 42%; width: 42%; min-width: 0; }
/* Polaroid frame — white border, pin, slight rotation. Ported verbatim
   from the source's real kit.css, not re-invented. Alternates tilt on
   even rows so the row looks pinned by hand, not printed. */
.lp-polaroid {
    position: relative;
    background: #fff;
    padding: 12px 12px 34px;
    border-radius: 2px;
    box-shadow: 0 5px 14px rgba(0,0,0,.18);
    transform: rotate(-2deg);
    margin: 10px 4px 6px;
}
.lp-polaroid::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffb066, #d95f00 70%);
    box-shadow: 0 2px 3px rgba(0,0,0,.35);
    z-index: 2;
}
.lp-row-reverse .lp-polaroid { transform: rotate(1.6deg); }
.lp-polaroid img, .lp-polaroid .lp-row-image-placeholder {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #eee;
}
/* Service-name title: bold + larger than the general h1/h2/h3 weight-300
   rule above (that rule is verified against the real site's own nav/section
   headings — this card title has no real-site equivalent to match, so it
   follows the source's own Template C story-title treatment instead:
   bold, not all-caps, clearly heavier than the body text under it). */
.lp-row-text h3:first-of-type { font-family: 'Open Sans', sans-serif; font-weight: 700; font-size: 26px; line-height: 1.25; margin: 0 0 20px; }
.lp-service-price { color: var(--lp-navbar-bg); font-weight: 700; margin: 0 0 8px; }
.lp-row-text p { margin: 0 0 14px; font-size: 1.05rem; }
/* AI-written story text may add its own <h3> subheadings — distinct
   from the service-name heading above (:first-of-type), matching the
   source's Template C story-text heading style. No real-site equivalent
   exists for this element, so weight 600 (bolder than the general
   h1/h2/h3 weight-300 rule) is a pure readability call, not a brand
   deviation — clearer scannable contrast against 16.8px body text
   (Frank 2026-07-20 readability pass). */
.lp-row-text h3:not(:first-of-type) { text-transform: none; font-size: 20px; font-weight: 600; line-height: 1.2; margin: 1em 0 0.6em; }
.lp-row-text ul { margin: 0 0 1em 1.25rem; }
.btn {
    display: inline-block;
    background: var(--lp-cta-bg);
    color: var(--lp-cta-text);
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 19px;
    padding: 10px 30px;
    border-radius: 30px;
    /* When a group has 2+ buttons, page.php's inline script pins them all
       to the widest one's width — center the label inside that width. */
    text-align: center;
}
.btn:hover { opacity: .9; }
.lp-group-link { text-align: center; margin-top: 8px; }

/* ── FAQ section ────────────────────────────────────────────────────
   Left: clickable title list (custom display title or real question) in
   a white card carrying the teal brand accent — 4px teal line down the
   left edge (echoes .lp-hero-line-marker), the polaroid frames' own
   drop shadow, and a slight polaroid-style tilt (box AND the cards
   inside — Frank 2026-07-21: "fully in line with the Service Sections").
   Right: viewer pane — the section title sits here, top edge in line
   with the box top; intro copy by default, swaps to the clicked entry's
   real question + answer via faq-section.php's inline script. */
.lp-faq-section {
    max-width: var(--lp-container-width);
    margin: 0 auto;
    padding: 40px 50px;
}
.lp-faq-columns { display: flex; gap: 2rem; align-items: flex-start; }
.lp-faq-list {
    flex: 0 0 34%;
    width: 34%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #ffffff;
    border-left: 4px solid var(--lp-navbar-bg);
    border-radius: 6px;
    box-shadow: 0 5px 14px rgba(0,0,0,.18);
    transform: rotate(-1.2deg);
    padding: 18px;
    margin: 10px 4px 6px;
}
.lp-faq-list-item {
    display: block;
    width: 100%;
    text-align: left;
    background: #ffffff;
    border: 1px solid #e0e4e4;
    border-radius: 6px;
    padding: 14px 16px;
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--lp-heading-text);
    cursor: pointer;
    transition: border-color .15s, color .15s;
    transform: rotate(.7deg);
}
.lp-faq-list-item:nth-child(even) { transform: rotate(-.7deg); }
.lp-faq-list-item:hover { border-color: var(--lp-navbar-bg); }
.lp-faq-list-item-active {
    border-color: var(--lp-navbar-bg);
    color: var(--lp-navbar-bg);
}
.lp-faq-viewer { flex: 1 1 66%; min-width: 0; }
.lp-faq-viewer h2 { font-size: 26px; margin: 10px 0 18px; text-align: left; }
.lp-faq-viewer-intro p, .lp-faq-viewer-answer p { margin: 0 0 14px; font-size: 1.05rem; }
.lp-faq-viewer-intro { display: none; }
.lp-faq-viewer-intro-active { display: block; }
.lp-faq-viewer-answer h3 { font-size: 20px; font-weight: 700; margin: 0 0 14px; text-align: left; }
/* CTA buttons after the FAQ — the group section supplies 40px top padding
   of its own; the FAQ section's bottom padding is already the gap. */
.lp-group-after-faq { padding-top: 0; }

@media (max-width: 767px) {
    .lp-footer-grid { grid-template-columns: 1fr 1fr; }
    .lp-navbar .lp-container { flex-direction: column; }
    .lp-row, .lp-row-reverse { flex-direction: column; }
    .lp-row-image { width: 100%; flex: none; }
    .lp-hero-caption { left: 1rem; max-width: 90%; bottom: 8%; }
    .lp-faq-columns { flex-direction: column; }
    .lp-faq-list { width: 100%; }
}