/**
 * Vallie Insurance 2.0 — visual system
 * Gold · Pine · White. Loaded after main.css and overrides it.
 *
 * Principles (plan §3b): framed page (pine margins), split sections with one
 * colored column, gold vertical rules at section starts, gold hairlines between
 * sections, no drop shadows, Fraunces + Source Sans 3, one primary button per screen.
 */

/* ───────────────────────── Tokens ───────────────────────── */
:root {
    --pine:        #1A5632;
    --pine-deep:   #0E3B1F;
    --pine-ink:    #14231B;
    --gold:        #C9962B;
    --gold-dark:   #A87A1E;
    --gold-soft:   #F3E7CC;
    --paper:       #F7F5F0;
    --white:       #FFFFFF;
    --moss:        #5E6B63;   /* secondary text */
    --hairline:    #E6E1D6;

    /* Re-point the old token names so inner pages follow the new palette */
    --color-primary:         var(--pine);
    --color-primary-light:   #237542;
    --color-primary-dark:    var(--pine-deep);
    --color-accent:          var(--gold);
    --color-accent-light:    #D9AB4A;
    --color-accent-dark:     var(--gold-dark);
    --color-secondary:       var(--pine-deep);   /* navy retired */
    --color-secondary-light: var(--pine);
    --color-secondary-dark:  var(--pine-deep);
    --color-gray-50:         var(--paper);
    --color-gray-100:        #F1EEE6;
    --color-gray-200:        var(--hairline);
    --color-gray-600:        var(--moss);
    --color-gray-900:        var(--pine-ink);
    --color-star:            var(--gold);
    --border-color:          var(--hairline);

    --font-body:    'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
    --font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;

    --text-5xl: clamp(2.5rem, 1.6rem + 2.6vw, 3.5rem);   /* 40–56 */
    --text-4xl: clamp(2rem, 1.4rem + 1.6vw, 2.5rem);     /* 32–40 */
    --text-3xl: clamp(1.5rem, 1.2rem + 0.9vw, 1.75rem);  /* 24–28 */
    --text-2xl: 1.25rem;
    --text-xl:  1.125rem;
    --text-base: 1.0625rem;                              /* 17 */

    --radius-sm: 4px; --radius-md: 4px; --radius-lg: 4px; --radius-xl: 4px;
    --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-xl: none;

    --frame: clamp(6px, 6vw, 96px);
    --rule: 2px;
    --container-max: 1180px;
}

/* ───────────────────────── Page frame ───────────────────────── */
html { background: var(--pine-deep); }
body {
    background: var(--paper);
    color: var(--pine-ink);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    max-width: min(1500px, calc(100% - 2 * var(--frame)));
    margin: 0 auto;
    min-height: 100vh;
}
body.admin-bar { min-height: calc(100vh - 32px); }
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    font-variation-settings: "opsz" 144, "SOFT" 30;
    line-height: 1.12;
    letter-spacing: -0.005em;
    color: var(--pine-ink);
    text-wrap: balance;
}
p { max-width: 68ch; }
.tabular, .site-header__phone, .v2-hero__phone, .v2-trust, .team-card__link, .v2-people__line { font-variant-numeric: tabular-nums; }
a { color: var(--pine); }
a:hover { color: var(--pine-deep); }
::selection { background: var(--gold-soft); color: var(--pine-ink); }

/* ───────────────────────── Buttons ───────────────────────── */
.btn {
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: none !important;
    transform: none !important;
}
.btn--primary { background: var(--gold); border-color: var(--gold); color: var(--pine-ink); }
.btn--primary:hover, .btn--primary:focus-visible { background: var(--gold-dark); border-color: var(--gold-dark); color: var(--white); }
.btn--secondary { background: var(--pine); border-color: var(--pine); color: var(--white); }
.btn--secondary:hover { background: var(--pine-deep); border-color: var(--pine-deep); color: var(--white); }
.btn--outline { background: transparent; border-color: var(--pine); color: var(--pine); }
.btn--outline:hover { background: var(--pine); color: var(--white); }
.btn--white { background: var(--white); border-color: var(--white); color: var(--pine); }
.btn--white:hover { background: var(--gold-soft); border-color: var(--gold-soft); color: var(--pine-ink); }
.on-pine .btn--outline { border-color: var(--white); color: var(--white); }
.on-pine .btn--outline:hover { background: var(--white); color: var(--pine); }
.btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ───────────────────────── Header ───────────────────────── */
.site-header { background: var(--white); border-bottom: 1px solid var(--hairline); }
.site-header.is-scrolled { box-shadow: none; border-bottom-color: var(--gold); }
.site-header__topbar { background: var(--pine-deep); color: var(--white); font-size: 0.875rem; border-bottom: var(--rule) solid var(--gold); }
.site-header__topbar a { color: var(--white); }
.site-header__topbar a:hover { color: var(--gold-soft); }
.site-header__hours { color: var(--gold-soft); letter-spacing: 0.02em; }
.site-header__main-inner { padding: 0.9rem 0; }
.site-header__logo-img, .custom-logo { max-height: 60px; width: auto; }
.site-header .container { max-width: 1400px; }
.site-nav__list { gap: clamp(0.75rem, 1.4vw, 1.5rem); }
.site-nav__list > li > a { color: var(--pine-ink); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em; white-space: nowrap; }
.site-nav__list > li > a:hover, .site-nav__list > li.current-menu-item > a, .site-nav__list > li.current-menu-ancestor > a {
    color: var(--pine); box-shadow: inset 0 -2px 0 var(--gold);
}
.site-nav__list .sub-menu { border: 1px solid var(--hairline); border-top: var(--rule) solid var(--gold); box-shadow: none; border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.site-nav__list .sub-menu a:hover { background: var(--paper); color: var(--pine); }
.mobile-nav { background: var(--white); }
.mobile-nav__list a { color: var(--pine-ink); }
.hamburger__line { background: var(--pine); }
.breadcrumbs-bar { background: var(--paper); border-bottom: 1px solid var(--hairline); font-size: 0.875rem; }
.seasonal-banner { display: none !important; }

/* Mobile: phone and hours under the logo, plus a sticky contact bar */
.v2-mobile-contact {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 350;
    background: var(--pine-deep); border-top: var(--rule) solid var(--gold);
    grid-template-columns: 1fr 1fr 1fr;
}
.v2-mobile-contact a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: 0.55rem 0.25rem 0.6rem; color: var(--white); font-size: 0.8rem; font-weight: 600;
    letter-spacing: 0.02em; text-decoration: none; border-right: 1px solid rgba(255,255,255,0.12);
}
.v2-mobile-contact a:last-child { border-right: 0; }
.v2-mobile-contact a.is-primary { background: var(--gold); color: var(--pine-ink); }
.v2-mobile-contact .icon { width: 18px; height: 18px; }
@media (max-width: 767px) {
    .site-header__topbar { display: block; }
    .site-header__topbar-inner { flex-direction: column; align-items: flex-start; gap: 2px; }
    .site-header__contact { gap: 1rem; flex-wrap: wrap; }
    .site-header__email { display: none; }
    .v2-mobile-contact { display: grid; }
    body { padding-bottom: 64px; }
    .cookie-consent { bottom: 72px !important; left: 12px !important; right: auto !important; max-width: 320px; }
}

/* ───────────────────────── Sections ───────────────────────── */
.v2-section { position: relative; padding: clamp(3rem, 2rem + 4vw, 6rem) 0; border-top: 1px solid var(--gold); }
.v2-section--flush { padding: 0; }
.v2-section:first-of-type { border-top: 0; }
.v2-section--white { background: var(--white); }
.v2-section--paper { background: var(--paper); }
.v2-section--pine { background: var(--pine); color: var(--white); }
.v2-section--pine h2, .v2-section--pine h3, .v2-section--pine p { color: var(--white); }
.v2-section--deep { background: var(--pine-deep); color: var(--white); }

.v2-heading { position: relative; padding-left: 1.25rem; margin-bottom: 1.5rem; }
.v2-heading::before { content: ""; position: absolute; left: 0; top: 0.15em; bottom: 0.15em; width: var(--rule); background: var(--gold); }
.v2-heading h2 { font-size: var(--text-4xl); margin: 0; }
.v2-eyebrow { display: block; font-family: var(--font-body); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 0.5rem; }
.v2-section--pine .v2-eyebrow { color: var(--gold); }
.v2-section--pine .v2-heading::before { background: var(--gold); }
.v2-lead { font-size: var(--text-xl); color: var(--moss); max-width: 60ch; }
.v2-section--pine .v2-lead { color: rgba(255,255,255,0.85); }

.v2-split { display: grid; grid-template-columns: 5fr 7fr; align-items: stretch; }
.v2-split--rev { grid-template-columns: 7fr 5fr; }
@media (max-width: 900px) { .v2-split, .v2-split--rev { grid-template-columns: 1fr; } }

/* ───────────────────────── 1. Hero (split) ───────────────────────── */
.v2-hero { border-top: 0; }
.v2-hero__copy { background: var(--pine); color: var(--white); padding: clamp(2.5rem, 2rem + 4vw, 6rem) clamp(1.25rem, 4vw, 4rem) clamp(2.5rem, 2rem + 4vw, 5rem) var(--container-padding); display: flex; flex-direction: column; justify-content: center; }
.v2-hero__inner { max-width: 34rem; margin-left: auto; padding-right: 1rem; }
.v2-hero__eyebrow { color: var(--gold); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 1.25rem; padding-left: 1.1rem; position: relative; }
.v2-hero__eyebrow::before { content: ""; position: absolute; left: 0; top: 0.1em; bottom: 0.1em; width: var(--rule); background: var(--gold); }
.v2-hero__title { color: var(--white); font-size: var(--text-5xl); margin: 0 0 1.25rem; max-width: 14ch; }
.v2-hero__text { color: rgba(255,255,255,0.88); font-size: var(--text-xl); line-height: 1.55; margin: 0 0 1.75rem; max-width: 46ch; }
.v2-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.v2-hero__phone { color: var(--white); font-weight: 600; font-size: 1.125rem; text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; }
.v2-hero__phone .icon { color: var(--gold); }
.v2-hero__phone:hover { color: var(--gold-soft); }
.v2-hero__hours { margin: 1.25rem 0 0; font-size: 0.9rem; color: rgba(255,255,255,0.75); }
.v2-hero__media { position: relative; min-height: 420px; background: var(--pine-deep); }
.v2-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.v2-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,59,31,0.35), rgba(14,59,31,0) 40%); pointer-events: none; }
@media (max-width: 900px) {
    .v2-hero__inner { margin-left: 0; max-width: none; }
    .v2-hero__media { min-height: 260px; order: -1; }
    .v2-hero__media::after { background: linear-gradient(180deg, rgba(14,59,31,0) 60%, rgba(26,86,50,0.9)); }
    .v2-hero__title { max-width: none; }
}

/* ───────────────────────── 2. Trust line ───────────────────────── */
.v2-trust { background: var(--white); border-top: var(--rule) solid var(--gold); border-bottom: 1px solid var(--hairline); }
.v2-trust ul { list-style: none; margin: 0; padding: 0.9rem 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 0; }
.v2-trust li { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pine); padding: 0 1.25rem; position: relative; }
.v2-trust li + li::before { content: ""; position: absolute; left: 0; top: 0.25em; bottom: 0.25em; width: 1px; background: var(--gold); }
.v2-trust a { color: inherit; text-decoration: none; }
.v2-trust a:hover { color: var(--gold-dark); }
@media (max-width: 700px) { .v2-trust ul { flex-direction: column; align-items: flex-start; padding-left: var(--container-padding); } .v2-trust li { padding: 0.15rem 0; } .v2-trust li + li::before { display: none; } }

/* ───────────────────────── 3. Coverage tiles ───────────────────────── */
.v2-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 900px) { .v2-tiles { grid-template-columns: 1fr; } }
.v2-tile { display: block; position: relative; background: var(--white); border: 1px solid var(--hairline); text-decoration: none; color: var(--pine-ink); transition: border-color var(--transition-fast); }
.v2-tile:hover, .v2-tile:focus-visible { border-color: var(--gold); color: var(--pine-ink); outline: none; }
.v2-tile__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--pine-deep); }
.v2-tile__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; }
.v2-tile:hover .v2-tile__img img { transform: scale(1.03); }
.v2-tile__body { padding: 1.25rem 1.5rem 1.5rem; border-top: var(--rule) solid var(--gold); }
.v2-tile__body h3 { font-size: var(--text-3xl); margin: 0 0 0.35rem; }
.v2-tile__body p { color: var(--moss); margin: 0 0 0.75rem; }
.v2-tile__more { font-weight: 700; color: var(--pine); font-size: 0.95rem; }
.v2-tile__more::after { content: " \2192"; color: var(--gold); }

/* ───────────────────────── 4. The people (split) ───────────────────────── */
.v2-people { border-top: 1px solid var(--gold); }
.v2-people__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hairline); border-right: 1px solid var(--hairline); }
.v2-person { background: var(--white); padding: 1.25rem; display: grid; grid-template-columns: 96px 1fr; gap: 1rem; align-items: center; }
.v2-person__photo { width: 96px; height: 96px; object-fit: cover; object-position: top; border-radius: 2px; border-bottom: var(--rule) solid var(--gold); }
.v2-person h3 { font-size: 1.25rem; margin: 0 0 0.15rem; }
.v2-person__role { color: var(--moss); font-size: 0.9rem; margin: 0 0 0.35rem; }
.v2-people__line { font-size: 0.9rem; color: var(--pine); text-decoration: none; display: block; }
.v2-people__line:hover { color: var(--gold-dark); }
.v2-people__copy { background: var(--pine); color: var(--white); padding: clamp(2rem, 1.5rem + 3vw, 4.5rem) clamp(1.25rem, 4vw, 4rem); display: flex; flex-direction: column; justify-content: center; }
.v2-people__copy .v2-heading h2 { color: var(--white); }
.v2-people__copy p { color: rgba(255,255,255,0.88); }
@media (max-width: 900px) { .v2-people__grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .v2-person { grid-template-columns: 72px 1fr; } .v2-person__photo { width: 72px; height: 72px; } }

/* ───────────────────────── 5. How it works ───────────────────────── */
.v2-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 3rem; counter-reset: step; }
@media (max-width: 900px) { .v2-steps { grid-template-columns: 1fr; } }
.v2-step { position: relative; padding-top: 0.5rem; border-top: 1px solid var(--hairline); }
.v2-step__num { font-family: var(--font-heading); font-size: 2.5rem; font-weight: 600; color: var(--gold); line-height: 1; margin: 0.75rem 0 0.5rem; font-variant-numeric: lining-nums; }
.v2-step h3 { font-size: var(--text-3xl); margin: 0 0 0.5rem; }
.v2-step p { color: var(--moss); margin: 0; }

/* ───────────────────────── 6. Why Erie (pine band) ───────────────────────── */
.v2-erie { background: var(--pine); color: var(--white); }
.v2-erie .v2-heading h2 { color: var(--white); }
.v2-panels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2rem; }
@media (max-width: 900px) { .v2-panels { grid-template-columns: 1fr; } }
.v2-panel { background: var(--white); color: var(--pine-ink); padding: 1.5rem 1.5rem 1.75rem; border-top: var(--rule) solid var(--gold); }
.v2-panel h3 { font-size: var(--text-3xl); margin: 0 0 0.5rem; color: var(--pine-ink); }
.v2-panel p { color: var(--moss); margin: 0; }
.v2-erie__note { margin-top: 1.5rem; font-size: 0.95rem; color: rgba(255,255,255,0.8); }
.v2-erie__note a { color: var(--gold-soft); }

/* ───────────────────────── 7. Reviews (two-column editorial) ───────────────────────── */
.v2-reviews__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 3rem; position: relative; }
.v2-reviews__grid::before { content: ""; position: absolute; left: 50%; top: 0.5rem; bottom: 0.5rem; width: var(--rule); background: var(--gold); transform: translateX(-50%); }
@media (max-width: 800px) { .v2-reviews__grid { grid-template-columns: 1fr; } .v2-reviews__grid::before { display: none; } }
.v2-quote { padding: 1rem 0 1.5rem; }
.v2-quote blockquote { margin: 0; font-family: var(--font-heading); font-size: 1.35rem; line-height: 1.4; font-weight: 500; color: var(--pine-ink); }
.v2-quote blockquote::before { content: "\201C"; color: var(--gold); font-size: 1.6em; line-height: 0; vertical-align: -0.35em; margin-right: 0.15em; }
.v2-quote figcaption { margin-top: 0.75rem; color: var(--moss); font-size: 0.95rem; }
.v2-reviews__summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.25rem; margin-bottom: 1.5rem; }
.v2-reviews__score { font-family: var(--font-heading); font-size: 3rem; line-height: 1; color: var(--pine); }
.v2-reviews__stars { color: var(--gold); display: inline-flex; gap: 2px; }
.v2-reviews__count { color: var(--moss); }
.v2-reviews__links { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }

/* ───────────────────────── 8. Greeneville + closing CTA ───────────────────────── */
.v2-place__media { position: relative; min-height: 360px; background: var(--pine-deep); }
.v2-place__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v2-place__copy { padding: clamp(2rem, 1.5rem + 3vw, 4.5rem) clamp(1.25rem, 4vw, 4rem); background: var(--white); display: flex; flex-direction: column; justify-content: center; }
.v2-place__addr { font-style: normal; color: var(--pine-ink); line-height: 1.6; margin: 1rem 0 1.5rem; padding-left: 1.25rem; border-left: var(--rule) solid var(--gold); }
.v2-place__addr a { color: var(--pine); text-decoration: none; }
.v2-cta { background: var(--pine-deep); color: var(--white); padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) 0; border-top: var(--rule) solid var(--gold); }
.v2-cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; }
.v2-cta h2 { color: var(--white); font-size: var(--text-4xl); margin: 0 0 0.5rem; max-width: 22ch; }
.v2-cta p { color: rgba(255,255,255,0.82); margin: 0; max-width: 52ch; }
.v2-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.v2-cta__phone { color: var(--white); text-decoration: none; font-weight: 600; font-size: 1.125rem; }
.v2-cta__phone:hover { color: var(--gold-soft); }

/* ───────────────────────── Footer ───────────────────────── */
.site-footer { background: var(--pine-deep); color: rgba(255,255,255,0.85); border-top: var(--rule) solid var(--gold); }
.site-footer__main { background: transparent; padding: clamp(2.5rem, 2rem + 2vw, 4rem) 0; }
.site-footer__heading { color: var(--gold); font-family: var(--font-body); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.9rem; }
.site-footer__links a, .site-footer a { color: rgba(255,255,255,0.85); }
.site-footer__links a:hover, .site-footer a:hover { color: var(--gold-soft); }
.site-footer__tagline { color: var(--gold-soft); font-family: var(--font-heading); font-size: 1.1rem; }
.site-footer__logo img, .site-footer__logo-img { filter: brightness(0) invert(1); opacity: 0.95; }
.site-footer__logo-img--svg { filter: none; opacity: 1; max-height: 70px; width: auto; }
.site-footer__bottom { background: transparent; border-top: 1px solid rgba(201,150,43,0.45); }
.site-footer__bottom-inner { color: rgba(255,255,255,0.65); font-size: 0.85rem; }
.site-footer__credit { margin-left: 0.75rem; }
.site-footer__credit a { color: var(--gold); }
.site-footer__separator { color: var(--gold); }

/* ───────────────────────── Inner-page harmonisation ───────────────────────── */
.site-disclaimer { background: var(--pine-deep); color: rgba(255,255,255,0.55); font-size: 0.8rem; border-top: 1px solid rgba(201,150,43,0.35); }
.site-disclaimer p { max-width: none; }
.entry-content h1, .page-content h1 { font-size: var(--text-4xl); }
.hero:not(.v2-hero) { background: var(--pine); border-bottom: var(--rule) solid var(--gold); }
.hero:not(.v2-hero)::before, .hero:not(.v2-hero)::after { display: none; }
.hero:not(.v2-hero) .hero__title { font-weight: 600; }
.section__title { text-align: left; }
.section__title::after { display: none; }
.section__subtitle { text-align: left; margin-left: 0; color: var(--moss); }
.card { border: 1px solid var(--hairline); border-radius: var(--radius-sm); box-shadow: none !important; }
.card:hover { border-color: var(--gold); transform: none !important; }
.card__icon { color: var(--gold); }
.step__number, .stat__number { color: var(--gold); font-family: var(--font-heading); }
.cta-banner { background: var(--pine-deep); border-top: var(--rule) solid var(--gold); border-radius: 0; box-shadow: none; }
.trust-strip, .authority-badges { background: var(--white); border-top: var(--rule) solid var(--gold); }
.cookie-consent { border: 1px solid var(--hairline); border-top: var(--rule) solid var(--gold); border-radius: var(--radius-sm); box-shadow: none; }

/* ───────────────────────── Motion ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}